完善消息列表逻辑

stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysServicesTopicServiceImp.java

@@ -170,6 +170,7 @@ public class SysServicesTopicServiceImp implements ISysServicesTopicService {
                 JSONObject dataObj = new JSONObject();
                 dataObj.put("count", counts.get(i).getCount());
                 dataObj.put("topicId", topic.getTopicId());
+                dataObj.put("uid", topic.getFromUid());
 
                 JSONObject msgObj = new JSONObject();
                 msgObj.put("type", WsUtils.WS_TYPE_NEW_CUSTOMER_REPLY);

stdiet-custom/src/main/resources/mapper/custom/SysServicesTopicMapper.xml

@@ -36,8 +36,8 @@
         ) AS status
         LEFT JOIN (SELECT topic_id, uid, del_flag FROM sys_services_topic ) AS topic USING(topic_id)
         WHERE del_flag = 0
-        ORDER BY `read` ASC, update_time DESC
         ) AS userList GROUP BY uid
+        ORDER BY `read` ASC, update_time DESC
     </select>
 
     <select id="selectTopicListByUid" parameterType="SysServicesTopic" resultMap="SysServicesTopicResult">

stdiet-ui/src/store/modules/message.js

@@ -96,8 +96,27 @@ const actions = {
   async fetchTopicListApi({ dispatch, commit, rootGetters, state }, payload) {
     // prettier-ignore
     const { roles: [role], userId } = rootGetters;
+    const { customerList } = state;
     const { fromUid } = payload;
-    commit("save", { selCusId: fromUid, topicLoading: true });
+    const newCustomerList = JSON.parse(JSON.stringify(customerList));
+
+    const tarIdx = newCustomerList.findIndex(obj => obj.reSort);
+    if (tarIdx > -1) {
+      const [tarCustomer] = newCustomerList.splice(tarIdx, 1);
+      const injectIdx = newCustomerList.findIndex(obj => obj.read == 1);
+      tarCustomer.reSort = false;
+      if (injectIdx === -1) {
+        newCustomerList.splice(newCustomerList.length, 0, tarCustomer);
+      } else {
+        newCustomerList.splice(injectIdx, 0, tarCustomer);
+      }
+    }
+
+    commit("save", {
+      selCusId: fromUid,
+      topicLoading: true,
+      customerList: newCustomerList
+    });
     const result = await fetchTopicList({
       role,
       uid: userId,
@@ -106,12 +125,14 @@ const actions = {
     let mTopicList = [];
     if (result.code === 200 && result.rows.length) {
       // 默认展示第一个
-      const [defTopic] = result.rows;
+      setTimeout(() => {
-      dispatch("fetchTopicDetailActions", {
+        const [defTopic] = result.rows;
-        topicId: defTopic.topicId,
+        dispatch("fetchTopicDetailActions", {
-        id: defTopic.id,
+          topicId: defTopic.topicId,
-        uid: defTopic.uid
+          id: defTopic.id,
-      });
+          uid: defTopic.uid
+        });
+      }, 100);
       mTopicList = result.rows;
     }
     commit("save", {
@@ -121,7 +142,13 @@ const actions = {
   },
   async fetchTopicDetailActions({ commit, dispatch, state }, payload) {
     const { topicId, id = 0, uid } = payload;
-    const { healthyData, planList, customerData } = state;
+    const {
+      healthyData,
+      planList,
+      customerData,
+      topicList,
+      customerList
+    } = state;
     commit("save", { selTopicId: topicId, detailLoading: true });
     // 客户信息
     if (healthyData.customerId !== parseInt(uid)) {
@@ -138,7 +165,23 @@ const actions = {
     //
     const result = await fetchTopicDetail({ topicId, id });
     if (result.code === 200) {
-      commit("save", { detailData: result.data[0], detailLoading: false });
+      // 设置已读
+      const newTopicList = JSON.parse(JSON.stringify(topicList));
+      const preState = newTopicList.some(t => t.read == 0);
+      newTopicList.find(obj => obj.topicId === topicId).read = 1;
+      const newCutomers = JSON.parse(JSON.stringify(customerList));
+      const afterState = newTopicList.some(t => t.read == 0);
+      if (!afterState) {
+        const tarCustomer = newCutomers.find(cus => cus.uid === uid);
+        tarCustomer.read = 1;
+        tarCustomer.reSort = preState;
+      }
+      commit("save", {
+        detailData: result.data[0],
+        detailLoading: false,
+        topicList: newTopicList,
+        customerList: newCutomers
+      });
     }
   },
   async getCustomerFileActions({ commit }, payload) {

stdiet-ui/src/views/custom/message/messageBrowser/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="message_browser_wrapper">
+    <!-- 客户列表 -->
     <div class="customers_list" @scroll="handleOnScroll" v-loading="cusLoading">
       <div v-if="customerList && customerList.length">
         <div
@@ -10,7 +11,11 @@
           }`"
           @click="handleOnCustomerClick(customer)"
         >
-          <span class="customer_avatar">
+          <span
+            :class="`customer_avatar ${
+              !customer.read ? 'customer_avatar_unread' : ''
+            }`"
+          >
             <el-avatar size="medium" :src="customer.avatar">
               {{ customer.name && customer.name.substr(-1) }}
             </el-avatar>
@@ -21,6 +26,7 @@
         </div>
       </div>
     </div>
+    <!-- 客户问题列表 -->
     <div class="topic_list" v-loading="topicLoading">
       <div v-if="topicList && topicList.length">
         <div
@@ -49,6 +55,7 @@
       </div>
       <div v-else class="topic_list_empty">暂无消息</div>
     </div>
+    <!-- 问题对话详情列表 -->
     <div class="topic_detail" v-loading="detailLoading">
       <div class="topic_detail_list">
         <div
@@ -136,8 +143,8 @@ export default {
     setTimeout(() => {
       const itemElm = document.querySelector(".topic_item");
       if (itemElm) {
-        console.log(itemElm);
+        // console.log(itemElm);
-        this.itemWidth = itemElm.clientWidth - 32 - 20 - 80;
+        this.itemWidth = itemElm.clientWidth - 24 - 20 - 50 - 4;
       }
     }, 100);
   },
@@ -167,28 +174,29 @@ export default {
     },
     handleOnMessage({ data }) {
       if (data.type === keys.WS_TYPE_MESSAGE_COUNT) {
-        const { data: tData } = data.data;
+        const { data: tData, count } = data.data;
-        const time = dayjs(tData.createTime).format("YYYY-MM-DD HH:mm:ss");
+        this.updateUnreadCount({
-        const newTopicList = [
+          msgUnreadCount: count,
-          {
-            id: tData.id,
-            content: tData.content,
-            createTime: time,
-            img: tData.img,
-            topicId: tData.topicId,
-            role: "customer",
-            uid: tData.uid,
-            updateTime: time,
-            topicType: tData.topicType,
-            read: tData.read,
-          },
-          ...this.topicList,
-        ];
-        this.save({
-          topicList: newTopicList,
         });
+        if (tData.uid === selCusId) {
+          this.fetchTopicListApi({
+            fromUid: tData.uid,
+          });
+        } else {
+          // 调整用户列表顺序
+          const newCustomers = JSON.parse(JSON.stringify(this.customerList));
+          const tarIdx = newCustomers.findIndex((obj) => obj.uid === tData.uid);
+          if (tarIdx > -1) {
+            const [tarCustomer] = newCustomers.splice(tarIdx, 1);
+            tarCustomer.read = 0;
+            newCustomers.splice(0, 0, tarCustomer);
+            this.save({
+              customerList: newCustomers,
+            });
+          }
+        }
       } else if (data.type === keys.WS_TYPE_NEW_CUSTOMER_REPLY) {
-        const { count, topicId } = data.data;
+        const { count, topicId, uid } = data.data;
         this.updateUnreadCount({
           msgUnreadCount: count,
         });
@@ -197,13 +205,24 @@ export default {
             (obj) => obj.topicId === topicId
           );
           if (tarTopic) {
-            console.log({ tarTopic });
             this.fetchTopicDetailActions({
               topicId,
               id: tarTopic.id,
               uid: tarTopic.uid,
             });
           }
+        } else {
+          // 调整用户列表顺序
+          const newCustomers = JSON.parse(JSON.stringify(this.customerList));
+          const tarIdx = newCustomers.findIndex((obj) => obj.uid === uid);
+          if (tarIdx > -1) {
+            const [tarCustomer] = newCustomers.splice(tarIdx, 1);
+            tarCustomer.read = 0;
+            newCustomers.splice(0, 0, tarCustomer);
+            this.save({
+              customerList: newCustomers,
+            });
+          }
         }
       }
     },
@@ -300,11 +319,29 @@ export default {
       cursor: pointer;
       display: flex;
       align-items: center;
+      position: relative;
 
       &:hover {
         background: #dedede;
       }
 
+      .customer_avatar {
+      }
+
+      .customer_avatar_unread {
+        &::after {
+          content: "";
+          display: block;
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          background: #d96969;
+          position: absolute;
+          top: 8px;
+          left: 36px;
+        }
+      }
+
       .customer_name {
         margin-left: 8px;
         overflow: hidden;
@@ -374,7 +411,7 @@ export default {
       }
 
       .topic_info {
-        flex: 0 0 80px;
+        flex: 0 0 50px;
         text-align: center;
       }
     }

stdiet-ui/src/views/custom/message/userInfo/recipesPlan.vue

@@ -119,7 +119,7 @@ export default {
   },
   watch: {
     planList(val, newVal) {
-      console.log({ val, newVal });
+      // console.log({ val, newVal });
       this.cusOutId = val.reduce((str, cur) => {
         if (!str && cur.recipesId && cur.reviewStatus === 2) {
           str = cur.outId;
@@ -184,7 +184,7 @@ export default {
       );
     },
     handleOnSendChange(val, data) {
-      console.log({ val, data });
+      // console.log({ val, data });
       const { id } = data;
       if (data.reviewStatus === 2) {
         this.updateRecipesPlanActions({