完成消息页面设计

pages.json

@@ -45,13 +45,22 @@
 					"autoBackButton": false
 				}
 			}
+		},
+		{
+			"path" : "pages/chatDetail/chatDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
 		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F7F7F7"
+		"backgroundColor": "#F7F7F7",
+		"navigationBarTitleFontWeight": "bold"
 	},
 	"tabBar": {
 		"list": [

pages/chat/chat.vue

@@ -10,25 +10,25 @@
 			></u-search>
 		</view>
 		<view class="list-box">
-			<view class="list-item-box">
+			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onChatClick(item)">
 				<view class="main-box">
 					<view class="icon-box">
-						图
+						<cover-image class="icon" :src="`/static/chat-icon/${item.type}.png`"></cover-image>
 					</view>
 					<view class="content-box">
 						<view class="title">
-							XXXX通知
+							{{item.title}}
 						</view>
 						<view class="text">
-							尊敬的用户，您在2025年01月10日09:00收到了一条通知
+							{{item.content}}
 						</view>
 					</view>
 					<view class="other-box">
 						<view class="date">
-							8/16
+							{{item.time}}
 						</view>
 						<view class="tag">
-							1
+							{{item.count}}
 						</view>
 					</view>
 				</view>
@@ -48,7 +48,45 @@
 	const searchForm = ref({
 		keyword: ''
 	})
-	
+	const list = ref([
+		{
+			id: '1',
+			title: '会费缴交成功通知',
+			content: '尊敬的用户，您在2023年8月16日15:00成交缴交会费……',
+			type: 'zhifu',
+			time: '8/16',
+			count: 1
+		},
+		{
+			id: '2',
+			title: '继续教育通知',
+			content: '尊敬的用户，您预约2023年8月16日《广州市存量房网……',
+			type: 'jiaoyu',
+			time: '8/16',
+			count: 1
+		},
+		{
+			id: '3',
+			title: '课程购买成功通知',
+			content: '尊敬的用户，您在成功购买2023年8月16日《广州市存……',
+			type: 'goumai',
+			time: '8/16',
+			count: 1
+		},
+		{
+			id: '4',
+			title: '个人会员生日祝福',
+			content: '尊敬的用户，今日是您的生日，协会祝你在……',
+			type: 'shengri',
+			time: '8/16',
+			count: 1
+		},
+	])
+	function onChatClick(chat) {
+		uni.navigateTo({
+			url: `/pages/chatDetail/chatDetail?id=${chat.id}&title=${chat.title}`
+		})
+	}
 	onLoad(() => {
 		uni.setTabBarBadge({ //显示数字  
 			index: 1, //tabbar下标
@@ -91,12 +129,16 @@
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-					padding: 20rpx 0;
+					padding: 30rpx 0;
 					.icon-box {
 						width: 15%;
 						display: flex;
 						justify-content: center;
 						align-items: center;
+						.icon {
+							width: 70rpx;
+							height: 70rpx;
+						}
 					}
 					.content-box {
 						width: 67%;

pages/chatDetail/chatDetail.vue

@@ -0,0 +1,30 @@
+<template>
+	<view class="container">
+		消息详情
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const chatId = ref()
+	const chatTitle = ref('')
+	
+	onLoad((load) => {
+		chatId.value = load.id
+		chatTitle.value = load.title
+		uni.setNavigationBarTitle({
+			title: chatTitle.value
+		})
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+	}
+</style>

pages/template.vue

@@ -0,0 +1,23 @@
+<template>
+	<view class="container">
+		模板
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	onLoad(() => {
+		console.log('onLoad')
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+	}
+</style>