2025-10-09

新建系统消息页面

pages.json

@@ -72,6 +72,26 @@
 				"navigationStyle": "custom",
 				"enablePullDownRefresh": true
 			}
+		},
+		{
+			"path" : "pages/message/systemMessage",
+			"style" : 
+			{
+				"navigationBarTitleText" : "系统通知",
+				"navigationBarBackgroundColor": "#F0F3FF",
+				"navigationBarTextStyle": "#000",
+				"app-plus": {
+					"titleNView": {
+						"buttons": [
+							{
+								"type": "menu",
+								"color": "#000"
+							}
+							
+						]
+					}
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/message/message.vue

@@ -15,7 +15,7 @@
 						</view>
 					</view>
 					<view class="head-box2">
-						<view class="item">
+						<view class="item" @click="handleNavigateTo">
 							<view class="box-img">
 								<image class="img" src="/static/message/system.png" mode=""></image>
 							</view>
@@ -62,7 +62,8 @@
 
 				<scroll-view scroll-y="true" class="message-list" :style="'height:'+height+'px'">
 					<view class="message-item" v-for="item in messageList">
-						<u-swipe-action bgColor="#F8FBFF" :index="item.groupId" class="other-program" @content-click="handleChat(item)" v-if="item.program.linkmanId !== params.userId"
+						<u-swipe-action bgColor="#F8FBFF" :index="item.groupId" class="other-program"
+							@content-click="handleChat(item)" v-if="item.program.linkmanId !== params.userId"
 							:options="options">
 							<view class="item-name title-wrap">
 								{{ item.program.name}}
@@ -77,7 +78,8 @@
 								未读： {{item.userUnread.length}}
 							</view>
 						</u-swipe-action>
-						<u-swipe-action bgColor="#F8FBFF" class="my-program" @content-click="handleChat(item)" v-else :options="options">
+						<u-swipe-action bgColor="#F8FBFF" class="my-program" @content-click="handleChat(item)" v-else
+							:options="options">
 							<view class="item-name title-wrap">
 								{{ item.program.name}}
 							</view>
@@ -89,6 +91,7 @@
 							</view>
 						</u-swipe-action>
 					</view>
+					<view class="placeholder-box"></view>
 				</scroll-view>
 			</view>
 		</view>
@@ -114,7 +117,7 @@
 			success(res) {
 				let screenHeight = res.screenHeight
 				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
-					height.value = screenHeight - data.height - 50
+					height.value = screenHeight - data.height
 				}).exec()
 				uni.createSelectorQuery().in(instance.proxy).select("#fixedHeadId").boundingClientRect((data : any) => {
 					height.value = height.value - data.height
@@ -125,6 +128,13 @@
 
 	// 搜索
 	const keyword = ref('')
+	
+	// 系统消息
+	const handleNavigateTo = () => {
+		uni.navigateTo({
+			url:'/pages/message/systemMessage'
+		})
+	}
 
 	// 小菜单切换
 	const menuList = ref([{
@@ -247,7 +257,7 @@
 					}
 				}
 			}
-			
+
 			.head-box2 {
 				display: flex;
 				justify-content: space-around;
@@ -317,7 +327,7 @@
 					.other-message {
 						padding: 20rpx 0rpx 20rpx 20rpx;
 						background-color: #F8FBFF;
-;
+						;
 					}
 
 					.my-program {
@@ -327,6 +337,11 @@
 					}
 
 				}
+				
+				.placeholder-box{
+					width: 100%;
+					height: 50rpx;
+				}
 			}
 		}
 	}

pages/message/systemMessage.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="system-message">
+		<u-tabs :list="menuList" bg-color="#F0F3FF" :is-scroll="false" v-model="currentMenu"
+			@change="handleChangeMenu"></u-tabs>
+
+		<view class="message-list">
+			<view class="message-item" v-for="item in dataList">
+				<view class="typeAndDate">
+					<view> {{item.type}} </view>
+					<view> {{item.createDate}} </view>
+				</view>
+				<view class="u-m-t-20">
+					{{item.programName}}
+				</view>
+				<view class="u-m-t-20">
+					<span class="u-m-r-10" style="color: #666;">项目公司</span>{{item.programCom}}
+				</view>
+				<view class="u-m-t-20 u-m-b-20">
+					<span class="u-m-r-10" style="color: #666;">进度信息</span>{{item.process}}
+				</view>
+				<view class="btn">
+					查看详情
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { onMounted, ref } from 'vue';
+
+	const menuList = [{
+		name: '提醒'
+	}, {
+		name: '物流'
+	}, {
+		name: '订单',
+	}, {
+		name: '优惠',
+	}, {
+		name: '其他',
+	}]
+	const currentMenu = ref(0)
+	const handleChangeMenu = (index) => {
+		console.log("handleChangeMenu");
+	}
+
+	const dataList = ref([])
+
+	const mockData = () => {
+		for (var i = 0; i < 20; i++) {
+			dataList.value.push({
+				type: "项目通知",
+				programName: "测试" + (i + 1),
+				programCom: "项目公司" + (i + 1),
+				process: "项目信息",
+				createDate: "2025-09-" + (i + 1)
+			})
+		}
+	}
+
+	onMounted(() => {
+		mockData()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.system-message {
+		width: 100%;
+		height: 100%;
+		background-color: #F0F3FF;
+
+		.message-list {
+			margin-top: 20rpx;
+			padding: 0 40rpx 20rpx;
+
+			.message-item {
+				border-radius: 20rpx;
+				padding: 20rpx;
+				background: #DDE8FF;
+				margin-bottom: 10rpx;
+
+				font-family: Work Sans;
+				font-weight: 400;
+				font-size: 26rpx;
+				leading-trim: NONE;
+				line-height: 100%;
+				letter-spacing: -2%;
+
+				.typeAndDate {
+					display: flex;
+					justify-content: space-between;
+				}
+
+				.btn {
+					display: inline;
+					background: #7B99FF;
+					border-radius: 8rpx;
+					padding: 4rpx 20rpx;
+					color: #002499;
+				}
+			}
+		}
+	}
+</style>