fzu102201435
/
front
1
0
Fork 4
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add:complete static community pages

Browse Source
master
xhhing 2 months ago
parent 40fe59faa6
commit 0880661727
6 changed files with 539 additions and 10 deletions
Show Stats Download Patch File Download Diff File

6
pages/homepages/community/add_post/add_post.vue
Unescape View File

@ -4,7 +4,11 @@
<view class="addpost_top_box">
<!-- 返回个人中心盒子 -->
<view class="return_box" @click="toCommunityPage">
<image class="return_image" src="../../../../static/homepages/community/add_post/pictures/left_arrow.png" mode="widthFix"></image>
<image
class="return_image"
src="../../../../static/homepages/community/add_post/pictures/left_arrow.png"
mode="widthFix"
></image>
</view>
<!-- 标题盒子 -->
<view class="title_box">发布我的帖子</view>

9
pages/homepages/community/community/community.vue
Unescape View File

@ -3,7 +3,7 @@
<!-- 头部信息 -->
<view class="top_box">
<!-- 头像 -->
<view class="dog_image_box">
<view class="dog_image_box" @click="toPersonCenter">
<image class="dog_image" src="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image>
</view>
<view class="words_box">
@ -175,7 +175,12 @@ export default {
uni.navigateTo({
url:'/pages/homepages/community/add_post/add_post'
})
}
},
toPersonCenter(){
uni.navigateTo({
url:'/pages/homepages/community/personal_center/personal_center'
})
}
}
}
</script>

226
pages/homepages/community/personal_center/personal_center.vue
Unescape View File

@ -1,17 +1,229 @@
<template>
<view>
<view class="person_center_box">
<view class="person_center_top">
<view class="return_box">
<image
class="return_image"
src="../../../../static/homepages/community/personal_center/pictures/left_arrow.png"
mode="widthFix"
></image>
</view>
</view>
<view class="person_center_body">
<view class="info_box">
<view class="height_box">
<view class="height_data">{{height}}cm</view>
<view class="height_words">身高</view>
</view>
<image class="avatar_box" src="" mode="widthFix"></image>
<view class="weight_box">
<view class="weight_data">{{weight}}kg</view>
<view class="weight_words">体重</view>
</view>
<view class="name_box">{{name}}</view>
<view class="tip_box">{{tip}}</view>
</view>
<view class="btns_box">
<button class="changeInfoBtn">个人中心修改信息</button>
<button class="addPostBtn" @click="toAddPostPage">去发布帖子</button>
</view>
<view class="posts_box">
<view class="post_nav_box">
<view class="toMypost_box post_nav">
<view class="toMypost" @click="myPostClick">我的帖子</view>
<view class="bottom_line" v-if="isMyPost"></view>
</view>
<view class="toLikepost_box post_nav">
<view class="toLikepost" @click="likePostClick">我的点赞</view>
<view class="bottom_line" v-if="!isMyPost"></view>
</view>
</view>
<view class="posts">
<view class="post_box" v-for="(item, index) in posts" :key="index">
<view class="post_top_box">
<view class="post_avatar_box">
<image class="post_avatar" :src=item.avatar mode="widthFix"></image>
</view>
<view class="post_info">
<view class="post_name">{{item.name}}</view>
<view class="post_date">{{item.date}}</view>
</view>
</view>
<view class="post_word_box">{{item.word}}</view>
<view class="post_images_box">
<community_image_box class="post_images" :imgList='item.imgList' :num='item.imgList.length'></community_image_box>
</view>
<view class="post_bottom_box">
<view class="comments_box">
<image class="chat_icon" src="../../../../static/homepages/community/community/pictures/chat_icon.png" mode="widthFix"></image>
<view class="comments_num">{{item.comments_num}}</view>
</view>
<view class="like_box">
<image
class="love_icon"
:src=getLikeImage(index)
mode="widthFix"
@click="likeClick(index)"
></image>
<view class="like_num">{{item.like_num}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
export default {
data() {
return {};
}
components: {community_image_box},
data() {
return {
name:'puppy',
height:187,
weight:71,
tip:'这是一条个性签名',
isMyPost:true,
likePosts:[
{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'cat',
date:'2024年9月31日',
word:'这是我喜欢的帖子',
imgList:[
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
],
comments_num:1,
like_num:100,
islike:false,
},
],
myPosts:[
{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'cat',
date:'2024年9月31日',
word:'今天去海边锻炼看见的，真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
imgList:[
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
],
comments_num:1,
like_num:100,
islike:false,
},
{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'puppy',
date:'2024年11月13日',
word:'今天去海边锻炼看见的，真是太美了',
imgList:[
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
],
comments_num:12,
like_num:17,
islike:false,
},
{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'cat',
date:'2024年10月13日',
word:'今天去海边锻炼看见的',
imgList:[
'../../../../static/homepages/community/community/pictures/dog_image.png',
'../../../../static/homepages/community/community/pictures/dog_image.png',
],
comments_num:10,
like_num:100,
islike:false,
},
{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'cat',
date:'2024年1月13日',
word:'今天去锻炼',
imgList:[
'../../../../static/homepages/community/community/pictures/dog_image.png',
],
comments_num:10,
like_num:100,
islike:false,
},
],
posts:[],
};
},
mounted(){
this.getAllPost()
this.posts = this.myPosts
},
computed:{
likeImages() {
return this.posts.map((post, index) => ({
index,
image: post.islike ? '../../../../static/homepages/community/community/pictures/red_love_image.png' : '../../../../static/homepages/community/community/pictures/love_image.png'
}));
}
},
methods:{
myPostClick(){
this.isMyPost = true
this.posts = this.myPosts
},
likePostClick(){
this.isMyPost = false
this.posts = this.likePosts
},
getLikeImage(index) {
//TODO:获取点赞的图片
const item = this.likeImages.find(item => item.index === index);
return item ? item.image : '';
},
getAllPost(){
//TODO:获取所有的帖子
const app = getApp()
uni.request({
url:app.globalData.fit_journey_community_address + '/post/getAll',
method:"GET",
success:(res) => {
console.log('getAllPost')
console.log(res)
},
fail: (err) => {
console.log('getAllPost fail')
console.log(err.log)
},
})
},
likeClick(index){
//TODO:点赞
if (this.posts[index].islike){
this.posts[index].islike = false
this.posts[index].like_num--
}
else{
this.posts[index].islike = true
this.posts[index].like_num++
}
},
toAddPostPage(){
uni.navigateTo({
url:'/pages/homepages/community/add_post/add_post'
})
}
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../../../../static/homepages/community/personal_center/scss/personal_center.scss"
</style>

BIN
static/homepages/community/personal_center/pictures/left_arrow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/homepages/community/personal_center/pictures/top_background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 761 KiB

308
static/homepages/community/personal_center/scss/personal_center.scss
Unescape View File

@ -0,0 +1,308 @@
.person_center_box{
height: 100vh;
width: 100vw;
position: relative;
.person_center_top{
height: 25vh;
background-image: url("@/static/homepages/community/personal_center/pictures/top_background.png");
background-size: cover;
background-position: center;
.return_box{
display: flex;
justify-content: center;
align-items: center;
background-color: #E6EEFA;
height: 5.5vh;
width: 5.5vh;
border-radius: 50%;
position: absolute;
left: 5vw;
top: 2vh;
.return_image{
width: 3vh;
}
}
}
.person_center_body{
box-sizing: border-box;
position: absolute;
width: 100vw;
height: 82vh;
top: 18vh;
background: #E6EEFA;
border-radius: 50px 50px 0px 0px;
.info_box{
width: 100vw;
height: 20vh;
position: relative;
// background-color: #fff;
.height_box{
width: fit-content;
position: absolute;
top: 20%;
left: 19vw;
.height_data{
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 2vh;
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
margin-bottom: 0.5vh;
}
.height_words{
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.8vh;
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
}
}
.weight_box{
width: fit-content;
position: absolute;
top: 20%;
right: 19vw;
.weight_data{
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 2vh;
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
margin-bottom: 0.5vh;
}
.weight_words{
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.8vh;
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
}
}
.avatar_box{
background-color: #fff;
width: 12vh;
height: 12vh;
border-radius: 50%;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
}
.name_box{
position: absolute;
left: 50%;
top: 52%;
transform: translateX(-50%);
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 2.1vh;
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
}
.tip_box{
position: absolute;
left: 50%;
top: 70%;
width: 100vw;
transform: translateX(-50%);
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 1.8vh;
text-align: center;
letter-spacing: -0.604677px;
color: #6C7A9C;
}
}
.btns_box{
display: flex;
height: 5vh;
.changeInfoBtn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 35vw;
font-size: 1.6vh;
background: #fff;
box-shadow: 0px 14.8205px 29.641px rgba(0, 0, 0, 0.25);
border-radius: 29.641px;
}
.addPostBtn{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 35vw;
font-size: 1.6vh;
background: #fff;
box-shadow: 0px 14.8205px 29.641px rgba(0, 0, 0, 0.25);
border-radius: 29.641px;
}
}
.posts_box{
margin-top: 4vh;
height: 52vh;
width: 100vw;
position: relative;
.post_nav_box{
width: 100%;
display: flex;
justify-content: center;
.post_nav{
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
width: 20vw;
height: 3vh;
margin: 0vh 2vw;
position: relative;
.toMypost{
position: absolute;
top: 0%;
}
.toLikepost{
position: absolute;
top: 0%;
}
.bottom_line{
margin-top: 6px;
height: 1px;
width: 5vw;
border-bottom:2px solid #000000 ;
background: #6C7A9C;
border-radius: 2.9641px;
}
}
}
.posts{
background-color: #fff;
border-radius: 50px 50px 0px 0px;
box-sizing: border-box;
margin-top: 2vh;
display: flex;
flex-direction: column;
height: 49vh;
padding: 0vw 3vw 0vw 3vw;
position: relative;
.post_box{
background-color: #E6EEFA;
border-radius: 30px;
padding: 2vh 2vh;
box-sizing: border-box;
margin-bottom: 5vh;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
margin-top: 3vh;
.post_top_box{
display: flex;
.post_avatar_box{
width: 5vh;
height: 5vh;
border-radius: 50%;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-right: 2vh;
.post_avatar{
width: 80%;
}
}
.post_info{
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 2vh;
color: #000000;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.post_word_box{
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-size: 2vh;
color: #000000;
margin-top: 2.5vh;
}
.post_images_box{
width: 100%;
height:70%;
.post_images{
width: 100%;
height: 100%;
}
}
.post_bottom_box{
position: absolute;
bottom: 0%;
width: 100%;
height: 10%;
padding: 0% 6%;
box-sizing: border-box;
display: flex;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
/* Note: backdrop-filter has minimal browser support */
border-radius: 0px 0px 30px 30px;
left: 50%;
transform: translateX(-50%);
.comments_box{
display: flex;
align-items: center;
height: 100%;
// width: 10%;
.chat_icon{
width: 3.2vh;
}
.comments_num{
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 2vh;
text-align: center;
letter-spacing: -0.604677px;
color: rgba(255, 255, 255, 0.8);
}
}
.like_box{
display: flex;
align-items: center;
height: 100%;
margin-left: 4%;
// width: 10%;
.love_icon{
width: 3.2vh;
}
.like_num{
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 2vh;
text-align: center;
letter-spacing: -0.604677px;
color: rgba(255, 255, 255, 0.8);
}
}
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save