flat: 消息

pages/msglog/read.vue

@@ -1,16 +1,38 @@
 <template>
-    <scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
+    <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
-            <view class="list-card btn-feel" v-for="(item, index) in 20" :key="index">
+            <view
+                class="list-card btn-feel"
+                v-for="(item, index) in msgList"
+                :key="index"
+                @click="seeDetail(item, index)"
+            >
                 <view class="card-img">
-                    <image class="card-img-flame" src="/static/icon/msgtype.png"></image>
+                    <image
+                        class="card-img-flame"
+                        v-if="item.title === '招聘会预约提醒'"
+                        src="/static/icon/msgtype.png"
+                    ></image>
+                    <image
+                        class="card-img-flame"
+                        v-if="item.title === '职位上新'"
+                        src="/static/icon/msgtype2.png"
+                    ></image>
+                    <image
+                        class="card-img-flame"
+                        v-if="item.title === '系统通知'"
+                        src="/static/icon/msgtype3.png"
+                    ></image>
+                    <view class="subscript" v-if="item.notReadCount || !item.isRead">
+                        {{ item.notReadCount || '' }}
+                    </view>
                 </view>
                 <view class="card-info">
                     <view class="info-title">
-                        <text>今日推荐</text>
-                        <view class="card-time">刚才</view>
+                        <text>{{ item.title }}</text>
+                        <view class="card-time">{{ item.date }}</view>
                     </view>
-                    <view class="info-text line_2">这里有9个职位很适合你，快来看看吧</view>
+                    <view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
                 </view>
             </view>
         </view>
@@ -19,7 +41,12 @@
 
 <script setup>
 import { reactive, inject, ref } from 'vue';
+const { $api, navTo, debounce } = inject('globalFunction');
+import { storeToRefs } from 'pinia';
+import { useReadMsg } from '@/stores/useReadMsg';
+const { msgList } = storeToRefs(useReadMsg());
 const isLoaded = ref(false);
+
 async function loadData() {
     try {
         if (isLoaded.value) return;
@@ -30,7 +57,22 @@ async function loadData() {
     }
 }
 
-function handleScrollToLower() {}
+function seeDetail(item, index) {
+    switch (item.title) {
+        case '职位上新':
+            useReadMsg().markAsRead(item, index);
+            navTo('/packageA/pages/newJobPosition/newJobPosition');
+            break;
+        case '招聘会预约提醒':
+            useReadMsg().markAsRead(item, index);
+            navTo('/packageA/pages/reservation/reservation');
+            break;
+        case '系统通知':
+            navTo('/packageA/pages/systemNotification/systemNotification');
+            break;
+    }
+}
+
 defineExpose({ loadData });
 </script>
 
@@ -41,6 +83,9 @@ defineExpose({ loadData });
 }
 .scrollmain{
     padding: 28rpx
+}
+.read{
+
 }
 .list-card
     background: #FFFFFF;
@@ -57,9 +102,25 @@ defineExpose({ loadData });
         display: grid;
         place-items: center;
         margin-right: 30rpx;
+        position: relative;
         .card-img-flame
             width: 100%;
             height: 100%
+        .subscript
+            position: absolute;
+            right: 0;
+            top: 0;
+            min-width: 26rpx;
+            height: 26rpx;
+            padding: 0 8rpx; /* 横向内边距控制宽度自适应 */
+            border-radius: 1000rpx; /* 实现椭圆形/圆角 */
+            text-align: center;
+            line-height: 26rpx;
+            background: #F73636;
+            font-weight: 600;
+            font-size: 20rpx;
+            color: #FFFFFF;
+            box-sizing: border-box;
     .card-info
         flex: 1;
         display: flex;