需求开发

pages/msglog/unread.vue

@@ -4,6 +4,7 @@
             <!-- 未读消息列表 -->
             <view
                 class="list-card press-button"
+                :class="{ unread: item.isRead === '0' }"
                 v-for="(item, index) in unreadMsgList"
                 :key="index"
                 @click="seeDetail(item)"
@@ -16,19 +17,27 @@
                     ></image>
                     <image
                         class="card-img-flame"
-                        v-if="item.title === '职位上新'"
+                        v-else-if="item.title === '职位上新'"
                         src="/static/icon/msgtype2.png"
                     ></image>
                     <image
                         class="card-img-flame"
-                        v-if="item.title === '系统通知'"
+                        v-else-if="item.title === '系统通知'"
                         src="/static/icon/msgtype3.png"
                     ></image>
+                    <image
+                        class="card-img-flame card-img-default"
+                        v-else
+                        src="/static/icon/bell.png"
+                    ></image>
                     <view class="subscript" v-if="item.notReadCount">{{ item.notReadCount }}</view>
                 </view>
                 <view class="card-info">
                     <view class="info-title">
-                        <text>{{ item.title }}</text>
+                        <view class="title-left">
+                            <view class="unread-dot" v-if="item.isRead === '0'"></view>
+                            <text :class="{ 'unread-text': item.isRead === '0' }">{{ item.title }}</text>
+                        </view>
                         <view class="card-time">{{ item.date }}</view>
                     </view>
                     <view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
@@ -64,7 +73,8 @@ async function loadData() {
 }
 
 function seeDetail(item) {
-    console.log(item);
+    uni.setStorageSync('currentMessageDetail', item);
+    navTo('/pages/msglog/messageDetail');
 }
 
 defineExpose({ loadData });
@@ -89,6 +99,8 @@ defineExpose({ loadData });
     align-items: center;
     padding: 26rpx 36rpx;
     margin: 0 0 28rpx 0
+    &.unread
+        background: linear-gradient(135deg, #FFFAFA 0%, #FFFFFF 100%)
     .card-img
         width: 96rpx;
         height: 96rpx;
@@ -100,6 +112,9 @@ defineExpose({ loadData });
         .card-img-flame
             width: 100%;
             height: 100%
+        .card-img-default
+            width: 60%
+            height: 60%
         .subscript
             position: absolute;
             right: 0;
@@ -126,15 +141,31 @@ defineExpose({ loadData });
             color: #333333;
             display: flex;
             justify-content: space-between;
+            align-items: center;
             width: 100%
-            text
-                font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
+            .title-left
+                display: flex
+                align-items: center
+                min-width: 0
+                flex: 1
+                .unread-dot
+                    width: 14rpx
+                    height: 14rpx
+                    background: #F73636
+                    border-radius: 50%
+                    margin-right: 12rpx
+                    flex-shrink: 0
+                .unread-text
+                    font-weight: 600
+                text
+                    font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
             .card-time
                 font-weight: 400;
                 font-size: 28rpx;
                 color: #AAAAAA;
                 height: 100%
                 margin: 4rpx;
+                flex-shrink: 0
         .info-text
             font-weight: 400;
             font-size: 28rpx;