add:add_post page

pages.json

@@ -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" :

pages/homepages/community/add_post/add_post.vue

@@ -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>

pages/homepages/community/community/community.vue

@@ -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'
+		  })
 	  }
   }
 }

static/homepages/community/add_post/scss/add_post.scss

@@ -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;
+			            }
+			        }
+			    }
+			}
+		}
+	}
+}