添加消息界面和消息通知框

teamwork/pages.json

@@ -160,6 +160,12 @@
 		"style": {
 			"navigationStyle": "custom"
 		}
+	},
+	{
+		"path": "pages/post/message",
+		"style": {
+			"navigationStyle": "custom"
+		}
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

teamwork/pages/post/message.vue

+<template>
+	
+	<view>
+		<!-- 页头 -->
+		<view class="top">
+			<image @click="back" class="back" src="/static/discover/back.png"></image>
+			<view class="title">消息列表</view>
+			<span class="empty"></span>
+		</view>
+		
+		<view class="one-post" >
+			<view class="icon-with-name">
+				<image :src="'https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/f692aaa2-45bc-42c3-af38-e0dff12d2eac.jpg'"
+				 class="icon" />
+				<text class="name">用户姓名</text></br>
+				<text class="message">太6啦</text>
+				
+			</view>
+			<image :src="'https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/f692aaa2-45bc-42c3-af38-e0dff12d2eac.jpg'"
+				 class="post-img" />
+				<text class="text-content">2023年2月15日 5月20日 12:54</text>			
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+	
+	.top {
+		width: 100%;
+		height: 50px;
+		background-color: #EDEEF0;
+		text-align: center;
+	}
+	
+	.back {
+		width: 40px;
+		height: 30px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		float: left;
+		margin-left: 10px;
+	}
+	
+	.empty {
+		width: 40px;
+		height: 30px;
+		margin-top: 10px;
+		margin-bottom: 10px;
+		float: right;
+		margin-right: 10px;
+	}
+	
+	.title {
+		font-size: 20px;
+		margin-top: 15px;
+		font-weight: bold;
+		color: #f1992d;
+		display: inline-block;
+	}
+	
+	.one-post {
+		width: 90%;
+		background-color: rgb(245 154 35 / 30%);
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 20px;
+		border-radius: 15px;
+		overflow: auto;
+	}
+	
+	.icon-with-name {
+		width: 70%;
+		
+		margin-left: 10px;
+		margin-top: 15px;
+		float: left;
+		overflow: auto;
+	}
+	
+	.icon {
+		width: 40px;
+		height: 40px;
+		border-radius: 50%;
+		float: left;
+	}
+	
+	.post-img{
+		width: 60px;
+		height: 60px;
+		border-radius: 15%;
+		float: right;
+		margin-top: 10px;
+		margin-right: 10px;
+	}
+	
+	.name {
+		float: left;
+		margin-bottom: auto;
+		margin-left: 10px;
+		margin-top: 5px;
+		font-size: 12px;
+		font-weight: bold;
+		width: 60%;
+		color:#02A7F0;
+	}
+	
+	.message {
+		float: left;
+		font-size: 12px;
+		margin-left: 10px;
+		width: 70%;
+		word-wrap: break-word;
+	}
+	
+	.text-content {
+		float: left;
+		margin-top: 5px;
+		margin-left: 5%;
+		overflow: auto;
+		font-size: 12px;
+		transform: scale(0.7);
+	}
+	
+</style>
\ No newline at end of file

teamwork/pages/post/post.vue

@@ -26,7 +26,8 @@
 						<text class="text-content">{{item.content}}</text>
 						<view class="img-conetent">
 							<!-- 多张图片 -->
-							<view v-if="item.pictureList.length!=1" class="one-img" v-for="(img,imgIndex) in item.pictureList">
+							<view v-if="item.pictureList.length!=1" class="one-img"
+								v-for="(img,imgIndex) in item.pictureList">
 								<view class="post-pic" @click.stop="showPic(imgIndex,item.pictureList)"
 									:style="'background: url('+img+') no-repeat center/cover #eeeeee;'"></view>
 							</view>
@@ -55,6 +56,11 @@
 		</view>
 		<!-- 我的帖子 -->
 		<view v-if="current == 0">
+
+			<view class="message">
+				您一共收到{{messageNum}}条消息~
+			</view>
+
 			<!-- 单个帖子 -->
 			<view v-for="(item,index) in myPost" :key="index">
 				<!-- 单个帖子 -->
@@ -68,7 +74,8 @@
 						<text class="text-content">{{item.content}}</text>
 						<view class="img-conetent">
 							<!-- 多张图片 -->
-							<view v-if="item.pictureList.length!=1" class="one-img" v-for="(img,imgIndex) in item.pictureList">
+							<view v-if="item.pictureList.length!=1" class="one-img"
+								v-for="(img,imgIndex) in item.pictureList">
 								<view class="post-pic" @click.stop="showPic(imgIndex,item.pictureList)"
 									:style="'background: url('+img+') no-repeat center/cover #eeeeee;'"></view>
 							</view>
@@ -135,6 +142,7 @@
 				like: 200,
 				isLike: 1,
 				comment: 120,
+				messageNum:6,
 				pictureList: [{
 					picture: "https://mp-6f6feaec-a026-4402-8e8d-18f7572890da.cdn.bspapp.com/cloudstorage/becea65c-89d7-4fe0-9c3f-2e08cdf911e8.jpg"
 				}, ],
@@ -183,14 +191,14 @@
 					});
 			},
 			// 图片放大
-			showPic(index,list) {
+			showPic(index, list) {
 
 				uni.previewImage({
 					current: index,
 					urls: list
 				});
 			},
-			
+
 			//点赞状态改变
 			changeAllPostLike(index) {
 				if (this.btnDisabled) {
@@ -280,6 +288,21 @@
 </script>
 
 <style>
+	.message {
+		/* border: 2px solid #000; */
+		width: 60%;
+		height: 40px;
+		border-radius: 15px;
+		margin-top: 15px;
+		margin-left: auto;
+		margin-right: auto;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		background-color: rgb(245 154 35 / 30%);
+	}
+
 	.one-post {
 		width: 90%;
 		background-color: rgb(245 154 35 / 30%);