style: 消息列表

components/CustomTabBar/index.vue

@@ -7,7 +7,8 @@
                         <view class="message-style" v-if="item.key === 'chat' && messageCount > 0">
                         </view>
                         <view v-if="item.key === 'chat'" class="chat-box">
-                            <image class="img" :src="item.iconPath"></image>
+                             <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
+                             <image v-else class="img" :src="item.selectedIconPath"></image>
                         </view>
                        <template v-else>
                             <image v-if="item.key != selectIndex" class="img" :src="item.iconPath"></image>
@@ -81,7 +82,7 @@ export default {
                     {
                         "pagePath": "/pages/chat",
                         "iconPath": "/static/images/tabbar/chat.png",
-                        "selectedIconPath": "/static/images/tabbar/chat.png",
+                        "selectedIconPath": "/static/images/tabbar/chat_.png",
                         "text": "消息",
                         key: 'chat'
                     },
@@ -126,7 +127,7 @@ export default {
                 {
                     "pagePath": "/pages/chat",
                     "iconPath": "/static/images/tabbar/chat.png",
-                    "selectedIconPath": "/static/images/tabbar/chat.png",
+                    "selectedIconPath": "/static/images/tabbar/chat_.png",
                     "text": "消息",
                     key: 'chat'
                 },

components/NoneView/index.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="none-box">
-        <img src="/static/serverImg/list/null.png" alt="" style="width: 267rpx; height: 267rpx;">
+        <img :src="icon" alt="" style="width: 267rpx; height: 267rpx;">
         <view class="none-text">{{value}}</view>
     </view>
 </template>
@@ -11,6 +11,10 @@ const props = defineProps({
     value: {
         type: String,
         default: '数据为空'
+    },
+    icon: {
+         type: String,
+        default: '/static/serverImg/list/null.png'
     }
 })
 </script>

pages.json

@@ -59,7 +59,8 @@
 		{
 			"path": "pages/chat",
 			"style": {
-				"navigationBarTitleText": "消息"
+				"navigationBarTitleText": "消息",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/chat.vue

@@ -1,10 +1,30 @@
 <template>
     <view class="chat-container">
-
+        <view class="container-banner" :style="{ height: globalData.navBarHeight + 'px' }">
+            <view class="container-banner-box" :style="{ height: globalData.statusBarHeight + 'px' }">
+                <img src="/static/serverImg/chat/msg.png" alt="" style="width: 34rpx;height: 34rpx;">
+                <view class="container-banner-btn">咨询客服</view>
+            </view>
+        </view>
         <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
             class="scroll-view-class" @scrolltolower="scrolltolower" scroll-y>
             <view class="chat-main">
-                <view v-if="list && list.length > 0">
+                <view class="chat-sys-box">
+                    <view class="chat-sys-item">
+                        <view class="chat-sys-title">
+                            收到{{kf_count}}条客服对话
+                            <view class="chat-num sys-ab" v-if="kf_count > 0">{{ kf_count }}</view>
+                        </view>
+                        <view class="chat-sys-btn">去查看</view>
+                    </view>
+                    <view class="chat-sys-item">
+                        <view class="chat-sys-title">收到{{xt_count}}条系统提醒
+                            <view class="chat-num sys-ab" v-if="xt_count > 0">{{ xt_count }}</view>
+                        </view>
+                        <view class="chat-sys-btn">去查看</view>
+                    </view>
+                </view>
+                <view v-if="list && list.length > 0" class="chat-list">
                     <uni-swipe-action>
                         <uni-swipe-action-item v-for="item in list" :key="item.code" :right-options="[
                             {
@@ -17,13 +37,14 @@
                         ]" @click="handleDelete(item)">
                             <template #default>
                                 <view class="chat-item" @click="onClick(item)">
+
                                     <img v-if="item.conversationAvatar" :src="item.conversationAvatar" alt=""
                                         class="chat-img" />
                                     <img src="/static/serverImg/mine/user.png" alt="" class="chat-img" v-else />
                                     <view class="chat-box">
                                         <view class="chat-top">
                                             <text class="chat-name">{{ item.conversationType === '1' ? '系统消息' :
-                                                type?item.volunteerName:item.userName }}</text>
+                                                type ? item.volunteerName : item.userName }}</text>
                                             <text class="chat-time">{{ handlerData(item.newestMsgTime ||
                                                 item.createTime) }}</text>
                                         </view>
@@ -38,12 +59,13 @@
                                         </view>
                                     </view>
                                 </view>
+
                             </template>
                         </uni-swipe-action-item>
                     </uni-swipe-action>
                 </view>
                 <view v-else>
-                    <NoneView value="您还没有相关消息" />
+                    <NoneView value="暂无消息" icon="/static/serverImg/chat/null.png" />
                 </view>
             </view>
         </scroll-view>
@@ -64,18 +86,39 @@ import { useDict } from '@/utils/dict.js';
 import NoneView from '@/components/NoneView/index.vue'
 import dayjs from 'dayjs/esm/index'
 import { getList, conversationRemove } from '@/api/conversation.js';
+import { getNavBarHeight } from '@/utils/index.js'
 
 const { } = useDict();
 const userType = uni.getStorageSync('userType') //读取本地存储
 console.log("TCL: userType", userType)
 const list = ref([])
-
+const globalData = ref({
+    statusBarHeight: 47,
+    navBarHeight: 91,
+})
 
 const type = computed(() => {
     return userType === 1
 })
 const isRefreshing = ref(false)
 
+// 客服数量
+const kf_count = computed(() =>{
+    const  count = list.value.filter(item => item.conversationType === '3')
+    if(count && count.length >0){
+        return count[0].msgUnreadCount
+    }
+    return 0
+})
+//系统消息数量
+const xt_count = computed(() =>{
+    const  count = list.value.filter(item => item.conversationType === '1')
+    if(count && count.length >0){
+        return count[0].msgUnreadCount
+    }
+    return 0
+})
+
 const loadmoreInfo = ref({
     status: 'loadmore',
     loadingText: '努力加载中...',
@@ -185,51 +228,66 @@ const init = async (type) => {
     }
 }
 
-const totalInit = async () => {
-    //  try {
-    //      const listApi = userType === 1 ? getTotalMoney : getVolunteerTotalMoney;
-    //      const res = await listApi({});
-    //      data.value.totalEarning = res.data.totalEarning;
-    //      data.value.totalExpend = res.data.totalExpend;
-    //  } catch (error) {
-    //      console.log('error', error);
-    //      uni.showToast({
-    //          title: error.msg,
-    //          icon: 'error',
-    //      });
-    //  }
+const getNav = async () => {
+    try {
+        const res = await getNavBarHeight();
+        globalData.value = res;
+        console.log("TCL: getNav -> res", res)
+    } catch (error) {
+
+    }
 }
+
 onShow(() => {
     init('top');
-    // totalInit();
+    getNav()
 })
 </script>
 
 <style lang="scss" scoped>
 .chat-container {
-    height: 100vh;
+
+    position: fixed;
+    top: 0px;
+    bottom: 0;
+    left: 0px;
+    right: 0px;
+    padding-bottom: 150rpx;
+    background: #FAF8F7;
 
     .scroll-view-class {
-        height: 100vh;
-        // background: rgba(245, 245, 245, 1);
+        height: 100%;
+        padding-bottom: 200rpx;
+    }
+
+    .chat-main {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .chat-list {
+        padding: 16rpx 0 16rpx 32rpx;
     }
 
     .chat-item {
-        padding: 16rpx;
         display: flex;
-        border-bottom: 1px solid rgba(238, 238, 238, 1);
+
+        flex: 1;
 
         .chat-img {
-            width: 96rpx;
-            height: 96rpx;
-            border-radius: 16rpx;
-            margin-right: 12rpx;
+            width: 84rpx;
+            height: 84rpx;
+            border-radius: 84rpx;
+            margin-right: 26rpx;
         }
 
         .chat-box {
-            // border-bottom: 1px solid rgba(238, 238, 238, 1);
             flex: 1;
-            // padding-bottom: 16rpx;
+            border-bottom: 1rpx solid rgba(216, 216, 216, 0.8);
+            height: 100%;
+            padding-bottom: 30rpx;
+            padding-right: 53rpx;
 
             .chat-top {
                 display: flex;
@@ -237,18 +295,23 @@ onShow(() => {
                 justify-content: space-between;
 
                 .chat-name {
+                    font-family: PingFang SC;
                     font-size: 32rpx;
-                    font-weight: 400;
-                    line-height: 48rpx;
-                    color: rgba(0, 0, 0, 1);
+                    font-weight: normal;
+                    line-height: 40rpx;
+                    letter-spacing: normal;
+                    color: rgba(0, 0, 0, 0.8);
 
                 }
 
                 .chat-time {
+                    font-family: PingFang SC;
                     font-size: 28rpx;
-                    font-weight: 400;
+                    font-weight: normal;
                     line-height: 40rpx;
-                    color: rgba(75, 85, 99, 1);
+                    text-align: right;
+                    letter-spacing: normal;
+                    color: rgba(0, 0, 0, 0.5);
                 }
             }
 
@@ -257,10 +320,12 @@ onShow(() => {
                 justify-content: space-between;
 
                 .chat-text {
+                    font-family: PingFang SC;
                     font-size: 28rpx;
-                    font-weight: 400;
+                    font-weight: normal;
                     line-height: 40rpx;
-                    color: rgba(102, 102, 102, 1);
+                    letter-spacing: normal;
+                    color: rgba(109, 121, 141, 0.8);
                     width: 250px;
 
 
@@ -272,23 +337,26 @@ onShow(() => {
                     /* 溢出部分显示省略号 */
                 }
 
-                .chat-num {
-                    background: rgba(239, 68, 68, 1);
-                    color: #fff;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    width: 40rpx;
-                    height: 40rpx;
-                    border-radius: 40rpx;
-                    line-height: 40rpx;
-                    font-size: 24rpx;
-                }
+                // .chat-num {
+                //     background: rgba(239, 68, 68, 1);
+                //     color: #fff;
+                //     display: flex;
+                //     align-items: center;
+                //     justify-content: center;
+
+                //     width: 40rpx;
+                //     height: 40rpx;
+                //     border-radius: 40rpx;
+                //     line-height: 40rpx;
+                //     font-size: 24rpx;
+                // }
             }
 
 
         }
+        .chat-box:last-child {
+            border-bottom:none; 
+        }
 
     }
 }
@@ -296,4 +364,91 @@ onShow(() => {
 .chat-item {
     transition: transform 0.2s ease;
 }
+
+.container-banner {
+    display: flex;
+    align-items: flex-end;
+    background: #fff;
+
+    .container-banner-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 45rpx;
+
+        .container-banner-btn {
+            font-size: 30rpx;
+            font-weight: 500;
+            line-height: 44rpx;
+            display: flex;
+            align-items: center;
+            color: #3D3D3D;
+            margin-left: 13rpx;
+        }
+    }
+}
+
+
+
+.chat-sys-box {
+    padding: 24rpx 32rpx 46rpx;
+    display: flex;
+    gap: 32rpx;
+
+    .chat-sys-item {
+        flex: 1;
+        padding: 32rpx;
+        border-radius: 18rpx;
+        background: #FFFFFF;
+        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
+
+        .chat-sys-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: rgba(0, 0, 0, 0.8);
+            margin-bottom: 16rpx;
+            position: relative;
+        }
+
+        .chat-sys-btn {
+            border-radius: 24rpx;
+            background: #F7F7F7;
+            width: 128rpx;
+            height: 48rpx;
+            font-size: 26rpx;
+            font-weight: 600;
+            line-height: 40rpx;
+            color: #757474;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+    }
+}
+
+.sys-ab {
+    position: absolute;
+    right: -14rpx;
+    top: -22rpx;
+}
+
+.chat-num {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 32rpx;
+
+    font-family: PingFang SC;
+    font-size: 24rpx;
+    font-weight: 600;
+    line-height: 44rpx;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFFFFF;
+
+    background: #FF1818;
+}
 </style>

utils/index.js

@@ -0,0 +1,19 @@
+/**
+ * 获取导航栏高度
+ */
+export const getNavBarHeight = () =>{
+    return new Promise((resolve, reject) => {
+         // 在 App.vue  中初始化
+         uni.getSystemInfo({
+            success: (res) => {
+            const statusBarHeight = res.statusBarHeight
+            const navBarHeight =
+                res.platform === 'android' ? 48 : 44 + res.statusBarHeight;
+                resolve( { statusBarHeight, navBarHeight })
+            },
+            fail: (err) => {
+                reject(err)
+            }
+        })
+    })
+}