完成了个人主页

App.vue

@@ -24,7 +24,6 @@ import ai_recongize_plan from './components/ai_recongize_plan/ai_recongize_plan.
 import ai_recongize_hot from './components/ai_recongize_hot/ai_recongize_hot.vue';
 import ai_recongize_recipe from './components/ai_recongize_recipe/ai_recongize_recipe.vue';
 
-
 export default {
   globalData: {
     // 定义后端数据库地址信息

components/community_image_box/community_image_box.vue

@@ -0,0 +1,141 @@
+<template>
+    <view class="myimgDV">
+        <view v-if="imgPicList.length>0" class='receiveimage flex justify'>
+            <block v-for="(item,ind) in imgPicList" :key="ind">
+                <image class="imgitem" :style="{width:imgwidth,height:imgheight}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''"
+                 :src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)"></image>
+                <!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} -->
+            </block>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+		name:"community_image_box",
+        data() {
+            return {
+                imgPicList: [],
+                imgboxtype: 0,
+                imgwidth: 0,
+                imgpad: 0,
+                imgheight: ''
+            }
+        },
+        props: {
+            imgList: {
+                type: Array
+            },
+            num: {
+                type: Number,
+                default: 0
+            },
+            pad: {
+                type: Number,
+                default: 0
+            }
+        },
+        methods: {
+            // 图片预览
+            previewpic(cind, clist) {
+                console.log(cind, clist);
+                uni.previewImage({
+                    urls: clist,
+                    current: cind,
+                    indicator: 'default'
+                });
+            },
+            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)
+                    if (that.num == 1) {
+                        that.imgheight = '100%';
+                    } else if (that.num == 2 || that.num == 4) {
+                        that.imgheight = (res[0].width).toFixed(2) + 'px';
+                    } else {
+                        that.imgheight = (res[0].width).toFixed(2) + 'px';
+                    }
+                })
+
+                // const query = uni.createSelectorQuery().in(this).select('.imgitem');
+                // uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => {
+                //     console.log('reac', res)
+                //     if (this.num == 1) {
+                //         this.imgheight = '100%';
+                //     } else if (this.num == 2 || this.num == 4) {
+                //         this.imgheight = (res.width).toFixed(2) + 'px';
+                //     } else {
+                //         this.imgheight = (res.width).toFixed(2) + 'px';
+                //     }
+                // }).exec()
+				
+            }
+        },
+        mounted() {
+            // let this = this;
+            this.imgPicList = this.imgList;
+			console.log('num:'+this.num)
+            if (this.num == 1) {
+                this.imgboxtype = 0;
+                this.imgwidth = 100 + '%';
+            } else if (this.num == 2 || this.num == 4) {
+                this.imgboxtype = 1;
+                this.imgwidth = 49 + '%';
+            } else if (this.num == 3 || this.num > 4) {
+                this.imgboxtype = 2;
+                this.imgwidth = 32 + '%';
+            }
+            this.$nextTick(function() {
+                this.getheight();
+            })
+        }
+    }
+</script>
+
+<style lang="scss">
+    .myimgDV {
+        .flex {
+            display: flex;
+        }
+        .justify {
+            justify-content: space-between;
+        }
+        .receiveimage {
+            margin-top: 28rpx;
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            .onepic {
+                width: 100%;
+                // height: 188rpx;
+                // height: auto;
+                margin-bottom: 28rpx;
+                &:nth-child(3n) {
+                    margin-right: 0;
+                }
+            }
+            .doublepic {
+                // width: 340rpx;
+                // height: 340rpx;
+                margin-right: 12rpx;
+                margin-bottom: 12rpx;
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+            }
+            .triplepic {
+                // width: 222rpx;
+                // height: 222rpx;
+                margin-right: 12rpx;
+                margin-bottom: 12rpx;
+                &:nth-child(3n) {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+</style>

pages/homepages/community/community/community.vue

@@ -1,20 +1,125 @@
 <template>
-  <view>
+  <view class="community_box">
- <tarbar_community></tarbar_community>
+	  <!-- 头部信息 -->
+	  <view class="top_box">
+		  <!-- 头像 -->
+		  <view class="dog_image_box">
+			  <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="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image>
+			  		</view>
+			  		<view class="post_info">
+			  			<view class="post_name">puppy</view>
+			  			<view class="post_date">2024年11月13日</view>
+			  		</view>
+			  	</view>
+			  	<view class="post_word_box">今天去海边锻炼看见的，真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
+			  	<view class="post_images_box">
+			  		<community_image_box class="post_images" :imgList='imgList' :num='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>
+			  		<view class="like_box">
+			  			<image
+							class="love_icon" 
+							src="../../../../static/homepages/community/community/pictures/love_image.png" 
+							mode="widthFix"
+							@click="likeClick"
+						></image>
+			  			<view class="like_num">122</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},
+  components: {Community, community_image_box},
   data() {
-    return {};
+    return {
+		posts:[
+			{
+				content:''
+			},
+			{
+				content:''
+			},
+			{
+				content:''
+			},
+			{
+				content:''
+			},
+		],
+		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()
+  },
+  methods:{
+	  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(){
+		  //TODO:点赞
+	  },
+	  toAddPostPage(){
+		  //TODO:转到发布帖子界面
+	  }
   }
 }
 </script>
 
 <style lang="scss">
-
+	@import "@/static/homepages/community/community/scss/community.scss"
 </style>

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

@@ -0,0 +1,196 @@
+.community_box{
+	padding: 5vh 5vw;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	.top_box{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 10vh;
+		// border-bottom: 1.48205px solid #000000;
+		.dog_image_box{
+			// height: 8vh;
+			// width: 8vh;
+			height: 110rpx;
+			width: 110rpx;
+			border-radius: 50%;
+			background-color: #D9D9D9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.dog_image{
+				width: 85rpx;
+			}
+		}
+		.words_box{
+			height: 100%;
+			width: 60%;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-around;
+			align-items: center;
+			.title_box{
+				width: fit-content;
+				font-family: 'Poppins';
+				font-style: normal;
+				font-weight: 600;
+				font-size: 3vh;
+				line-height: 33px;
+				text-align: center;
+				letter-spacing: -0.604677px;
+				color: #000000;
+			}
+			.tip_word_box{
+				font-family: 'Poppins';
+				font-style: normal;
+				font-weight: 600;
+				font-size: 2vh;
+				line-height: 33px;
+				text-align: center;
+				letter-spacing: -0.604677px;
+				color: #CCB8B8;
+			}
+		}
+		.add_image_box{
+			// height: 8vh;
+			// width: 8vh;
+			height: 110rpx;
+			width: 110rpx;
+			border-radius: 50%;
+			background-color: #D9D9D9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.add_image{
+				width: 50rpx;
+			}
+		}
+	}
+	// 分割线
+	.line_box{
+		width: 70%;
+		border-bottom: 1.48205px solid #000000;
+		position: absolute;
+		top: 17vh;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.post_body{
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		top: 20vh;
+		width: 90%;
+		.post_scroll_box{
+			height: 69vh;
+		}
+		.post_box{
+			background-color: #E6EEFA;
+			border-radius: 30px;
+			padding: 2vh 2vh;
+			box-sizing: border-box;
+			margin-bottom: 5vh;
+			width: 100%;
+			// height: 55vh;
+			display: flex;
+			flex-direction: column;
+			// height:900rpx;
+			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;
+			}
+			.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);
+					}
+				}
+			}
+		}
+	}
+}

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "48f6c93b",
+  "hash": "70943268",
-  "configHash": "badd50c8",
+  "configHash": "c265b382",
   "lockfileHash": "e3b0c442",
-  "browserHash": "debd2ea0",
+  "browserHash": "d782de90",
   "optimized": {},
   "chunks": {}
 }