样式调整

api/common/notic.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export const NoticApi = {
+	/**
+	 * 获取标签数据
+	 */
+	getTabData: () => {
+		return request({
+			url: '/system/notify-message/typeCount',
+			method: 'GET',
+		})
+	},
+	/**
+	 * 获取列表数据
+	 */
+	getListData: params => {
+		return request({
+			url: '/system/notify-message/page',
+			method: 'GET',
+			params
+		})
+	},
+	/**
+	 * 已读
+	 */
+	readNotic: id => {
+		return request({
+			url: `/system/notify-message/update-read?ids=${id}`,
+			method: 'PUT',
+		})
+	}
+}

sub/owner/notic.vue

@@ -3,14 +3,16 @@
     <!-- Tab 切换 -->
     <view class="tab-container">
       <view
-        v-for="(tab, index) in tabs"
-        :key="index"
+        v-for="tab in tabs"
+        :key="tab.label"
         class="tab-item"
-        :class="{ active: currentTab === index }"
-        @tap="switchTab(index)"
+        :class="{ active: queryParams.templateId === tab.label }"
+        @tap="switchTab(tab.label)"
       >
-        <text>{{ tab.name }}</text>
-        <text v-if="tab.count > 0" class="badge">{{ tab.count }}</text>
+        <text>
+          {{ $dict.echoDicValue(dictMap.notfy_message_type, tab.label) }}
+        </text>
+        <text v-if="tab.value > 0" class="badge">{{ tab.value }}</text>
       </view>
     </view>
 
@@ -26,13 +28,13 @@
       <view
         v-for="(item, index) in list"
         :key="index"
-        :class="['notice-item', !item.type ? 'is-read' : '']"
+        :class="['notice-item', !item.readStatus ? 'is-read' : '']"
         @tap="goDetail(item)"
       >
-        <view :class="['notice-icon', !item.type ? 'green' : '']">
+        <view :class="['notice-icon', !item.readStatus ? 'green' : '']">
           <image
             :src="
-              !item.type
+              !item.readStatus
                 ? '/static/images/owner/message.png'
                 : '/static/images/owner/message-grey.png'
             "
@@ -40,28 +42,49 @@
           ></image>
         </view>
         <view class="notice-content">
-          <view class="notice-title">{{ item.title }}</view>
-          <view class="notice-time">{{ item.time }}</view>
+          <view class="notice-title">
+            {{ item.templateParams.title }}
+          </view>
+          <view class="notice-time" v-if="item.templateParams.startTime">
+            {{
+              `${$util.formatDate(
+                item.templateParams.startTime,
+                'YYYY年M月D日'
+              )} - 
+              ${$util.formatDate(
+                item.templateParams.endTime,
+                'YYYY年M月D日'
+              )}`
+            }}
+          </view>
+          <view class="notice-time" v-else>
+            {{
+              `到期时间 
+						  ${$util.formatDate(item.templateParams.endTime, 'YYYY年M月D日')}`
+            }}
+          </view>
         </view>
         <view class="notice-arrow">
           <text class="iconfont icon-right"></text>
         </view>
       </view>
-      <cs-emty v-if="list.length == 0"></cs-emty>
+      <cs-emty v-if="list.length == 0" :marginTop="24"></cs-emty>
     </scroll-view>
   </view>
 </template>
 
 <script>
+import { getDictBatchByType } from '@/api/system/dict.js'
+import { NoticApi } from '@/api/common/notic.js'
 export default {
   data() {
     return {
-      tabs: [
-        { name: '任务通知', count: 4 },
-        { name: '整改到期', count: 0 },
-        { name: '资质逾期', count: 0 }
-      ],
-      currentTab: 0,
+      tabs: [],
+      queryParams: {
+        templateId: 0,
+        pageSize: 6,
+        pageNo: 1
+      },
       list: [],
       mock: [
         {
@@ -93,62 +116,81 @@ export default {
           type: 1
         }
       ],
-      page: 1,
+      dictMap: {},
       isRefreshing: false,
       hasMore: true // 添加是否有更多数据的标志
     }
   },
 
   onLoad() {
+    this.getDict()
+    this.getTabber()
+  },
+  onShow() {
     this.getList()
   },
-
   methods: {
+    async getDict() {
+      const dict = await getDictBatchByType({
+        type: ['notfy_message_type'].join(',')
+      })
+      this.dictMap = {
+        ...dict.data
+      }
+    },
+    async getTabber() {
+      const res = await NoticApi.getTabData()
+      this.tabs = res.data
+      this.queryParams.templateId = res.data[0].label
+      this.getList()
+    },
     switchTab(index) {
-      if (this.currentTab === index) return
-      this.currentTab = index
-      this.page = 1
+      if (this.queryParams.templateId === index) return
+      this.queryParams.templateId = index
+      this.queryParams.pageNo = 1
       this.list = []
       this.getList()
     },
     async getList() {
-      if (this.currentTab == 0) {
-        this.list = [...this.mock, ...this.mock]
+      const res = await NoticApi.getListData(this.queryParams)
+      this.list = res.data.list
+      if (this.list.length == res.data.total) {
+        this.hasMore = false
       }
     },
     async loadMore() {
       if (!this.hasMore) return // 没有更多数据时不再加载
-      this.page++
+      this.queryParams.pageNo++
       await this.getList()
     },
     async onRefresh() {
       try {
         this.isRefreshing = true
-        this.page = 1
+        this.queryParams.pageNo = 1
         await this.getList()
       } finally {
         this.isRefreshing = false
       }
     },
     goDetail(item) {
-      //   // 跳转到详情页
-      //   uni.navigateTo({
-      //     url: `/pages/notice-detail/notice-detail?id=${item.id}`,
-      //   });
+      // 跳转到详情页
+      uni.navigateTo({
+        url: item.templateParams.url,
+        success() {
+          NoticApi.readNotic(item.id)
+        }
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
 .tab-container {
   display: flex;
+  flex-flow: row now;
+  max-width: 100%;
+  overflow-x: scroll;
   background: #fff;
   padding: 24rpx 32rpx;
   gap: 24rpx;
@@ -157,13 +199,10 @@ export default {
     flex: 1;
     text-align: center;
     position: relative;
-    height: 64rpx;
-    line-height: 64rpx;
-    font-size: 28rpx;
+    padding: 16rpx 0;
     color: #4b5675;
     background: #f9f9f9;
     border-radius: 240rpx;
-
     &.active {
       color: #07c160;
       background: rgba(7, 193, 96, 0.1);
@@ -178,9 +217,8 @@ export default {
 }
 
 .scroll-container {
-  flex: 1;
   box-sizing: border-box;
-  max-height: calc(100vh - 124rpx);
+  height: calc(100vh - 124rpx);
   padding: 0 24rpx;
 }