update:community.page

pages/homepages/community/community/community.vue

@@ -27,30 +27,30 @@
 			  <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="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image>
+			  			<image class="post_avatar" :src=item.avatar mode="widthFix"></image>
 			  		</view>
 			  		<view class="post_info">
-			  			<view class="post_name">puppy</view>
-			  			<view class="post_date">2024年11月13日</view>
+			  			<view class="post_name">{{item.name}}</view>
+			  			<view class="post_date">{{item.date}}</view>
 			  		</view>
 			  	</view>
-			  	<view class="post_word_box">今天去海边锻炼看见的，真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
+			  	<view class="post_word_box">{{item.word}}</view>
 			  	<view class="post_images_box">
-			  		<community_image_box class="post_images" :imgList='imgList' :num='imgList.length'></community_image_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">10</view>
+			  			<view class="comments_num">{{item.comments_num}}</view>
 			  		</view>
 			  		<view class="like_box">
 			  			<image
 							class="love_icon" 
-							src="../../../../static/homepages/community/community/pictures/love_image.png" 
+							:src=getLikeImage(index)
 							mode="widthFix"
-							@click="likeClick"
+							@click="likeClick(index)"
 						></image>
-			  			<view class="like_num">122</view>
+			  			<view class="like_num">{{item.like_num}}</view>
 			  		</view>
 			  	</view>
 			  </view>
@@ -70,30 +70,79 @@ export default {
     return {
 		posts:[
 			{
-				content:''
+				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,
 			},
 			{
-				content:''
+				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,
 			},
 			{
-				content:''
+				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,
 			},
 			{
-				content:''
+				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,
 			},
 		],
-		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',
-		]
 	};
   },
   mounted(){
 	this.getAllPost()
   },
+  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:{
+	  getLikeImage(index) {
+		  //TODO:获取点赞的图片
+	        const item = this.likeImages.find(item => item.index === index);
+	        return item ? item.image : '';
+		},
 	  getAllPost(){
 		  //TODO:获取所有的帖子
 		  const app = getApp()
@@ -110,8 +159,9 @@ export default {
 			},
 		  })
 	  },
-	  likeClick(){
+	  likeClick(index){
 		  //TODO:点赞
+		  this.posts[index].islike = this.posts[index].islike ? false:true
 	  },
 	  toAddPostPage(){
 		  //TODO:转到发布帖子界面