front/pages/homepages/community/community/community.vue

<template>
  <view class="community_box">
	  <!-- 头部信息 -->
	  <view class="top_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">
			  <!-- 标题 -->
			  <view class="title_box">fit journey社区</view>
			  <view class="tip_word_box">搜索他人的健康秘诀</view>
		  </view>
		  <view class="add_image_box">
			  <image 
				class="add_image" 
				src="../../../../static/homepages/community/community/pictures/add_image.png" 
				mode="widthFix"
				@click="toAddPostPage"
			></image>
		  </view>
	  </view>
	  <view class="line_box"></view>
	  <!-- 帖子 -->
	  <view class="post_body">
		  <scroll-view class="post_scroll_box" scroll-y="true">
			  <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>
		  </scroll-view>
	  </view>
  </view>
  <!-- 底部导航栏 -->
  <tarbar_community class="tarbar_box"></tarbar_community>
</template>

<script>
import Community from "@/components/swiper/community.vue";
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
export default {
  components: {Community, community_image_box},
  data() {
    return {
		posts:[
			{
				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,
			},
		],
	};
  },
  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()
		  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(){
		  //TODO:转到发布帖子界面
		  uni.navigateTo({
		  	url:'/pages/homepages/community/add_post/add_post'
		  })
	  },
		toPersonCenter(){
			uni.navigateTo({
				url:'/pages/homepages/community/personal_center/personal_center'
			})
		}
  }
}
</script>

<style lang="scss">
	@import "@/static/homepages/community/community/scss/community.scss"
</style>