2025-10-09

新建系统消息页面
2025-10-09 17:19:28 +08:00
parent 039111ed27
commit 793bf62680
3 changed files with 147 additions and 6 deletions
--- a/pages/message/systemMessage.vue
+++ b/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>