Merge remote-tracking branch 'origin/master'

doum

2026-04-23 7d242579a0923e7639876797e738a22c45d6e2d0

 app/pages/message/message.vue

@@ -1,6 +1,29 @@
<template>
   <view>
		
   <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>

@@ -8,12 +31,181 @@
   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">
<style lang="scss" scoped>
   .message-page {
      height: 100vh;
      background: #f6f8fc;
      overflow: hidden;

</style>
      &__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>