需要添加客服，二维码，扫码功能

pages/my-index/set-up/message/details.vue

@@ -0,0 +1,55 @@
+<script setup>
+  import { ref } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { getUserNoticeDetail } from '../../../../api/my-index'
+
+  const viewData = ref({})
+  const loading = ref(true)
+  onLoad(async e => {
+    const res = await getUserNoticeDetail(e.id)
+    viewData.value = res.data
+    loading.value = false
+  })
+</script>
+
+<template>
+  <view v-if="!loading" class="notice-detail">
+    <view class="box">
+      <text>{{ viewData.title }}</text>
+      <text>{{ viewData.content }}</text>
+      <text>{{ viewData.createTime }}</text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  page {
+    background: #f9f9f9;
+  }
+
+  .notice-detail {
+    padding: 20rpx 32rpx;
+    .box {
+      padding: 20rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      display: flex;
+      flex-direction: column;
+      text {
+        font-size: 32rpx;
+        color: #333333;
+        // 第二个
+        &:nth-child(2) {
+          font-size: 28rpx;
+          color: #353535;
+          margin: 10rpx 0;
+        }
+        // 最后一个
+        &:last-child {
+          font-size: 24rpx;
+          color: #999999;
+        }
+      }
+    }
+  }
+</style>

pages/my-index/set-up/message/index.vue

@@ -0,0 +1,120 @@
+<script setup>
+  import { ref } from 'vue'
+  import { getUserNoticeList } from '@/api/my-index'
+  import { navigateTo } from '../../../../utils/router'
+
+  // 类型：1-系统 gear 2-消息 chatbubble 3-提醒 notification
+  const iconMap = [
+    { icon: 'gear', bg: '#05b0ff1f', color: '#05b0ff' },
+    { icon: 'chatbubble', bg: '#23c4311a', color: '#23c431' },
+    { icon: 'notification', bg: '#dcdf111f', color: '#dbdf11' }
+  ]
+
+  const paging = ref(null)
+  const dataList = ref([])
+  const getData = async (pageNum, pageSize) => {
+    try {
+      const res = await getUserNoticeList({
+        pageNum,
+        pageSize
+      })
+      paging.value.complete(res.rows)
+    } catch (error) {
+      paging.value.complete(false)
+    }
+  }
+
+  const onGo = item => {
+    navigateTo('/pages/my-index/set-up/message/details', { id: item.id })
+  }
+</script>
+
+<template>
+  <z-paging
+    ref="paging"
+    v-model="dataList"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :default-page-size="15"
+    :show-loading-more-no-more-view="false"
+    @query="getData"
+  >
+    <view
+      v-for="item in dataList"
+      :key="item.id"
+      class="card-box"
+      @click="onGo(item)"
+    >
+      <view
+        :style="{ background: iconMap[item.type - 1].bg }"
+        class="icon-box"
+      >
+        <uni-icons
+          :type="iconMap[item.type - 1].icon"
+          :color="iconMap[item.type - 1].color"
+          size="30"
+        ></uni-icons>
+      </view>
+      <view class="content-box">
+        <view class="top">
+          <text>{{ item.title }}</text>
+          <text>{{ item.createTime }}</text>
+        </view>
+        <text class="content">
+          {{ item.content }}
+        </text>
+      </view>
+    </view>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped>
+  .card-box + .card-box {
+    border-top: 2rpx solid #f5f5f5;
+    padding-top: 18rpx !important;
+  }
+  .card-box {
+    padding: 20rpx 30rpx;
+    display: flex;
+    align-items: center;
+    .icon-box {
+      flex-shrink: 0;
+      width: 84rpx;
+      height: 84rpx;
+      border-radius: 84rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 16rpx;
+    }
+    .content-box {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        text {
+          font-size: 32rpx;
+          color: #333333;
+          &:last-child {
+            font-size: 28rpx;
+            color: #a5a5a5;
+          }
+        }
+      }
+      .content {
+        margin-top: 6rpx;
+        font-size: 28rpx;
+        color: #979797;
+        // 超过1行显示省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        line-clamp: 1;
+      }
+    }
+  }
+</style>