Merge remote-tracking branch 'origin/master'

doum

2026-04-21 3539d67072a5fd179bd44385ebefce0d1a6e8cb4

 small-program/pages/message/message.vue

@@ -1,19 +1,187 @@
<template>
   <view>
		
   <view class="itinerary-page">
      <view class="top-fixed">
         <view class="top-gradient"></view>
         <view class="top-inner">
            <view :style="{ height: statusbarHeight + 'px' }"></view>
            <view class="header-bar" :style="{ height: navHeight + 'px' }">
               <text class="header-title">我的消息</text>
            </view>
         </view>
      </view>
      <view class="content">
         <view class="message-item" v-for="item in noticeList" :key="item.id">
            <view class="message-item-image">
               <view class="message-item-image-dian" v-if="item.status === 0"></view>
               <image src="/static/icon/xiaoxi_ic_tongzhi3@2x.png" mode="widthFix"></image>
            </view>
            <view class="message-item-info">
               <text>{{ item.title }}</text>
               <text>{{ item.content }}</text>
               <text>{{ item.createDate }}</text>
            </view>
         </view>
      </view>
      <custom-tabbar></custom-tabbar>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'

   export default {
      components: {
         CustomTabbar
      },
      data() {
         return {
				
         };
            noticeList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0
         }
      },
      computed: {
         ...mapState(['navHeight', 'statusbarHeight', 'token'])
      },
      async onShow() {
         await this.$onLaunched
         if (!this.token) {
            return
         }
         this.pageNum = 1
         this.total = 0
         this.noticeList = []
         this.getNoticeList()
      },
      onReachBottom() {
         if (this.noticeList.length < this.total) {
            this.pageNum++
            this.getNoticeList()
         }
      },
      methods: {
         async getNoticeList() {
            const res = await this.$u.api.getMemberNoticePage({
               page: this.pageNum,
               capacity: this.pageSize,
               model: {
                  userType: 0
               }
            })
            if (res.code === 200) {
               if (this.pageNum === 1) {
                  this.noticeList = res.data.records || []
               } else {
                  this.noticeList = [...this.noticeList, ...(res.data.records || [])]
               }
               this.total = res.data.total || 0
            }
         }
      }
   }
</script>
<style>
   page {
      background-color: #F8F9FB;
   }
</style>
<style lang="scss" scoped>
   .top-fixed {
      position: sticky;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 20;
   }

<style lang="scss">
   .top-gradient {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #1ba8fa 0%, #73e5cf 100%);
   }

</style>
   .top-inner {
      position: relative;
      z-index: 1;
      padding-bottom: 18rpx;
   }

   .header-bar {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
   }

   .header-title {
      font-weight: 600;
      font-size: 40rpx;
      color: #FFFFFF;
   }

   .content {
      width: 100%;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      .message-item {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         background: #FFFFFF;
         border-radius: 16rpx;
         display: flex;
         align-items: flex-start;
         margin-bottom: 20rpx;
         .message-item-image {
            flex-shrink: 0;
            width: 64rpx;
            height: 64rpx;
            margin-right: 20rpx;
            position: relative;
            image {
               width: 100%;
               height: 100%;
            }
            .message-item-image-dian {
               position: absolute;
               right: 0;
               top: 0;
               width: 18rpx;
               height: 18rpx;
               background: #FF0000;
               border-radius: 50%;
            }
         }
         .message-item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            text {
               &:nth-child(1) {
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #222222;
               }
               &:nth-child(2) {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #666666;
                  margin-top: 16rpx;
               }
               &:nth-child(3) {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #999999;
                  margin-top: 16rpx;
               }
            }
         }
      }
   }
</style>