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

add:add_post page

Browse Source
master
xhhing 2 weeks ago
parent cec3c6a31b
commit ebc04b1900
6 changed files with 299 additions and 1 deletions
Show Stats Download Patch File Download Diff File

7
pages.json
Unescape View File

@ -517,6 +517,13 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/homepages/community/add_post/add_post",
"style" :
{
"navigationStyle": "custom"
}
},
{
"path": "pages/homepages/community/personal_center/personal_center",
"style" :

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

@ -0,0 +1,112 @@
<template>
<view class="add_post_box">
<!-- 头部盒子 -->
<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>
</view>
<!-- 标题盒子 -->
<view class="title_box">发布我的帖子</view>
<button class="publish_btn">发表</button>
</view>
<!-- 提示盒子 -->
<view class="addpost_tip_box">分享自己的健康秘诀</view>
<!-- 发布盒子 -->
<view class="addpost_box">
<view class="post_box">
<view class="post_top_box">
<view class="post_avatar_box">
<image class="post_avatar" :src=user.avatar mode="widthFix"></image>
</view>
<view class="post_info">
<view class="post_name">{{user.name}}</view>
<view class="post_date">{{user.date}}</view>
</view>
</view>
<textarea class="post_word_box" v-model="user.word" placeholder="请输入你的文案(最多50个字)" cols="16" rows="2" auto-height maxlength="50"></textarea>
<!-- <view class="post_word_box">{{user.word}}</view> -->
<view class="post_images_box">
<view class="myimgDV">
<view class='receiveimage flex justify'>
<block v-for="(item,ind) in user.imgList" :key="ind">
<image class="imgitem doublepic" @tap="chooseTheImg(ind)" :style="{height:imgheight}" :src="item" mode="aspectFill"></image>
</block>
</view>
</view>
<!-- <community_image_box class="post_images" :imgList='user.imgList' :num='user.imgList.length'></community_image_box> -->
</view>
</view>
</view>
</view>
</template>
<script>
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
export default{
data(){
return{
user:{
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
name:'cat',
date:'2024年9月31日',
word:'',
imgList:[
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
],
},
imgheight:'',
}
},
methods:{
getheight() {
console.log('imgboxtype:',this.imgboxtype)
let that = this;
const query = uni.createSelectorQuery().in(that)
query.select('.imgitem').boundingClientRect()
query.exec((res)=>{
console.log(res[0].width)
that.imgheight = (res[0].width).toFixed(2) + 'px';
})
},
chooseTheImg(index){
uni.chooseImage({
count: 1, //图片可选择数量
sizeType: ['original','compressed'], //original 原图，compressed 压缩图，默认二者都有
sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。
crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
width: 100,
height: 100
},
success: res => {
console.log('res', res)
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
// this.uploadTheImg(imgFiles)
console.log('imgFiles', imgFiles)
this.user.imgList[index] = imgFiles[0]
console.log(this.user.imgList[index])
}
})
},
toCommunityPage(){
uni.navigateTo({
url:'/pages/homepages/community/community/community'
})
}
},
mounted() {
this.$nextTick(function() {
this.getheight();
})
}
}
</script>
<style lang="scss" scoped>
@import "@/static/homepages/community/add_post/scss/add_post.scss"
</style>

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

@ -161,10 +161,20 @@ export default {
},
likeClick(index){
//TODO:点赞
this.posts[index].islike = this.posts[index].islike ? false:true
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(){
//TODO:转到发布帖子界面
uni.navigateTo({
url:'/pages/homepages/community/add_post/add_post'
})
}
}
}

BIN
static/homepages/community/add_post/pictures/add_post_image.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

169
static/homepages/community/add_post/scss/add_post.scss
Unescape View File

@ -0,0 +1,169 @@
.add_post_box{
height: 100vh;
width: 100vw;
position: relative;
.addpost_top_box{
display: flex;
align-items: center;
// background-color: #55aaff;
height: 10vh;
width: 100%;
position: absolute;
top: 5%;
.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;
.return_image{
width: 3vh;
}
}
.title_box{
font-family: 'Poppins';
font-style: normal;
font-weight: 550;
font-size: 2.8vh;
width: fit-content;
// line-height: 33px;
/* or 92% */
text-align: center;
letter-spacing: -0.604677px;
color: #000000;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.publish_btn{
position: absolute;
right: 5vw;
display: flex;
justify-content: center;
align-items: center;
background: #5790DF;
box-shadow: 0px 14.8205px 29.641px rgba(87, 144, 223, 0.5);
border-radius: 20px;
padding: 1vh 2vh;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 1.5vh;
text-align: center;
letter-spacing: -0.604677px;
color: #FFFFFF;
}
}
.addpost_tip_box{
position: absolute;
top: 15vh;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-size: 1.9vh;
letter-spacing: -0.604677px;
color: #CCB8B8;
padding-bottom: 1vh;
border-bottom: 1px solid #000000;
}
.addpost_box{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 25vh;
width: 90%;
.post_box{
background-color: #B2CBF0;
border-radius: 30px;
padding: 5vh 2vh;
box-sizing: border-box;
margin-bottom: 5vh;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.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;
background-color: #E6EEFA;
border-radius: 8px;
box-sizing: border-box;
padding: 1.5vh 1.5vh;
height: 5.5vh;
width:100%;
letter-spacing: 1px;
}
.post_images_box{
width: 100%;
height:70%;
// .post_images{
// width: 100%;
// height: 100%;
// }
.myimgDV {
width: 100%;
height: 100%;
.flex {
display: flex;
}
.justify {
justify-content: space-between;
}
.receiveimage {
margin-top: 28rpx;
display: flex;
flex-wrap: wrap;
width: 100%;
.doublepic {
// height: 100%;
width: 49%;
margin-right: 12rpx;
margin-bottom: 12rpx;
&:nth-child(2n) {
margin-right: 0;
}
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save