<template>
|
<view class="message-page">
|
<view class="message-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
<view class="message-page__nav-inner">
|
<text class="message-page__nav-title">消息</text>
|
</view>
|
</view>
|
|
<scroll-view class="message-page__body" scroll-y :style="bodyStyle">
|
<view class="message-page__list">
|
<view v-for="item in messageList" :key="item.id" class="message-card">
|
<view class="message-card__icon-wrap">
|
<view class="message-card__icon-bg">
|
<text class="message-card__icon">🔔</text>
|
</view>
|
<view v-if="item.unread" class="message-card__dot"></view>
|
</view>
|
|
<view class="message-card__content">
|
<text class="message-card__title">{{ item.title }}</text>
|
<text class="message-card__desc">{{ item.desc }}</text>
|
<text class="message-card__time">{{ item.time }}</text>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
statusBarHeight: 0,
|
navHeight: 0,
|
messageList: [
|
{
|
id: 1,
|
title: '订单待配送',
|
desc: '您已抢单成功，订单：32728367487367，请按时到【中铁快运南站旗舰店】取货',
|
time: '2026-04-12 20:00',
|
unread: true
|
},
|
{
|
id: 2,
|
title: '配送中',
|
desc: '订单：32728367487367已取货，请按时送达',
|
time: '2026-04-12 20:00',
|
unread: true
|
},
|
{
|
id: 3,
|
title: '已送达',
|
desc: '订单：32728367487367已送达，请联系用户确认签收',
|
time: '2026-04-12 20:00',
|
unread: false
|
},
|
{
|
id: 4,
|
title: '订单已完成',
|
desc: '订单：32728367487367已完成，相关订单结算会在3个工作日内完成',
|
time: '2026-04-12 20:00',
|
unread: false
|
},
|
{
|
id: 5,
|
title: '订单已评价',
|
desc: '订单：32728367487367，用户已评价，可查看评价内容',
|
time: '2026-04-12 20:00',
|
unread: false
|
},
|
{
|
id: 6,
|
title: '退款中',
|
desc: '订单：32728367487367，用户已提交退款申请，该订单任务已取消，请勿前往。',
|
time: '2026-04-12 20:00',
|
unread: false
|
},
|
{
|
id: 7,
|
title: '订单已结算',
|
desc: '行李订单：3729378487987 平台已完成结算，金额为XX元，请注意查收',
|
time: '2026-04-12 20:00',
|
unread: false
|
}
|
]
|
}
|
},
|
computed: {
|
bodyStyle() {
|
return {
|
marginTop: this.navHeight + 'px',
|
height: `calc(100vh - ${this.navHeight}px)`
|
}
|
}
|
},
|
onLoad() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
this.navHeight = this.statusBarHeight + uni.upx2px(88)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.message-page {
|
height: 100vh;
|
background: #f6f8fc;
|
overflow: hidden;
|
|
&__nav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
z-index: 10;
|
background: linear-gradient(180deg, #1f73f6 0%, #1b6df2 100%);
|
}
|
|
&__nav-inner {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 24rpx;
|
}
|
|
&__nav-title {
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
&__body {
|
box-sizing: border-box;
|
}
|
|
&__list {
|
padding: 18rpx 18rpx calc(env(safe-area-inset-bottom) + 24rpx);
|
}
|
}
|
|
.message-card {
|
display: flex;
|
align-items: flex-start;
|
gap: 18rpx;
|
padding: 24rpx 20rpx;
|
margin-bottom: 18rpx;
|
border-radius: 18rpx;
|
background: #ffffff;
|
box-shadow: 0 8rpx 20rpx rgba(28, 55, 106, 0.04);
|
|
&__icon-wrap {
|
position: relative;
|
flex-shrink: 0;
|
}
|
|
&__icon-bg {
|
width: 52rpx;
|
height: 52rpx;
|
border-radius: 50%;
|
background: #fff7e3;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
&__icon {
|
font-size: 26rpx;
|
line-height: 1;
|
}
|
|
&__dot {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 14rpx;
|
height: 14rpx;
|
border-radius: 50%;
|
background: #ff3b30;
|
border: 2rpx solid #ffffff;
|
}
|
|
&__content {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__title {
|
display: block;
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #2b3139;
|
line-height: 1.35;
|
}
|
|
&__desc {
|
display: block;
|
margin-top: 10rpx;
|
font-size: 28rpx;
|
line-height: 1.55;
|
color: #8c95a3;
|
}
|
|
&__time {
|
display: block;
|
margin-top: 16rpx;
|
font-size: 26rpx;
|
color: #b1b7c1;
|
}
|
}
|
</style>
|
