消息

api/conversation.js

@@ -50,4 +50,15 @@ export function setRead(data) {
         method: 'post',
         data
     })
+}
+
+
+
+//删除会话记录
+export function conversationRemove(data) {
+    return request({
+        url: `/core/conversation/remove`,
+        method: 'post',
+        data
+    })
 }

pages/chat.vue

@@ -1,38 +1,55 @@
 <template>
     <view class="chat-container">
+
         <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-item" v-for="item in list" :key="item.code" @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>
-                                <text class="chat-time">{{ handlerData(item.newestMsgTime || item.createTime) }}</text>
-                            </view>
-                            <view class="chat-bottom">
-                                <text class="chat-text">
-                                   {{ item.newestMsgContent }}
-                                </text>
-                                <!-- <view class="chat-num">
-                                    2
-                                </view> -->
-                            </view>
-                        </view>
-                    </view>
-                    <!-- <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
-                     :loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
-                     :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" /> -->
+                    <uni-swipe-action>
+                        <uni-swipe-action-item v-for="item in list" :key="item.code" :right-options="[
+                            {
+                                text: '删除',
+                                style: {
+                                    backgroundColor: '#ff4949',
+                                    width: '80px'
+                                }
+                            }
+                        ]" @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>
+                                            <text class="chat-time">{{ handlerData(item.newestMsgTime ||
+                                                item.createTime) }}</text>
+                                        </view>
+                                        <view class="chat-bottom">
+                                            <text class="chat-text">
+                                                {{ item.msgType === '2' ? '[图片]' : item.newestMsgContent || '[暂无消息]' }}
+                                            </text>
+                                            <view class="chat-num"
+                                                v-if="item.msgUnreadCount && item.msgUnreadCount > 0">
+                                                {{ item.msgUnreadCount }}
+                                            </view>
+                                        </view>
+                                    </view>
+                                </view>
+                            </template>
+                        </uni-swipe-action-item>
+                    </uni-swipe-action>
                 </view>
                 <view v-else>
                     <NoneView value="您还没有相关消息" />
                 </view>
-
-
             </view>
         </scroll-view>
+
+
+
         <custom-tab-bar page="chat" />
     </view>
 
@@ -40,13 +57,13 @@
 
 <script setup>
 import CustomTabBar from '@/components/CustomTabBar/index.vue'
-import { ref, computed } from 'vue'
+import { ref, computed, reactive } from 'vue'
 import { getAccountChangeList, getVolunteerChangeList } from "@/api/mine";
 import { onShow } from '@dcloudio/uni-app';
 import { useDict } from '@/utils/dict.js';
 import NoneView from '@/components/NoneView/index.vue'
 import dayjs from 'dayjs/esm/index'
-import { getList } from '@/api/conversation.js';
+import { getList, conversationRemove } from '@/api/conversation.js';
 
 const { } = useDict();
 const userType = uni.getStorageSync('userType') //读取本地存储
@@ -54,12 +71,11 @@ console.log("TCL: userType", userType)
 const list = ref([])
 
 
-const type = computed(() =>{
-    return userType === 1 
+const type = computed(() => {
+    return userType === 1
 })
 const isRefreshing = ref(false)
 
-
 const loadmoreInfo = ref({
     status: 'loadmore',
     loadingText: '努力加载中...',
@@ -72,25 +88,25 @@ const pages = ref({
     total: 0,
 })
 const isToday = (date) => {
-  return dayjs(date).isSame(dayjs(), 'day');
+    return dayjs(date).isSame(dayjs(), 'day');
 };
 
 const isYesterday = (date) => {
-  return dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day');
+    return dayjs(date).isSame(dayjs().subtract(1, 'day'), 'day');
 };
 const handlerData = (dates) => {
     const date = dayjs(dates);
     if (isToday(dates)) {
-    return date.format('HH:MM');;
+        return date.format('HH:MM');;
     } else if (isYesterday(dates)) {
-    return '昨天';
+        return '昨天';
     } else {
-    return date.format('YY/MM/DD'); // 或者其他格式如 'YYYY年MM月DD日'
+        return date.format('YY/MM/DD'); // 或者其他格式如 'YYYY年MM月DD日'
     }
 }
 
 const onClick = (record) => {
-	console.log("TCL: onClick -> record", record)
+    console.log("TCL: onClick -> record", record)
     uni.navigateTo({
         url: `/pages_orderuser/pages/talk/pages/index/index?conversationRecordId=${record.conversationRecordId}`
     });
@@ -104,6 +120,27 @@ const onCustomRefresh = () => {
     pages.value.current = 1;
     init('top')
 };
+const handleDelete = (item) => {
+    uni.showModal({
+        title: '提示',
+        content: '确定要删除该聊天吗？',
+        success: async (res) => {
+            if (res.confirm) {
+                // 调用删除接口
+                try {
+                    await conversationRemove({
+                        conversationRecordId: item.conversationRecordId,
+                        system: userType === 1 ? '1' : '2'
+                    }); // 替换为实际接口
+                    uni.showToast({ title: '删除成功' });
+                    init('top'); // 刷新列表
+                } catch (err) {
+                    uni.showToast({ title: '删除失败', icon: 'none' });
+                }
+            }
+        }
+    });
+};
 
 const init = async (type) => {
     try {
@@ -126,7 +163,7 @@ const init = async (type) => {
         const res = await getList({
             // pageNum: pages.value.current,
             // pageSize: pages.value.pageSize,
-            system: userType===1?'1':'2'
+            system: userType === 1 ? '1' : '2'
         });
         list.value = type === 'top' ? res.rows : [...list.value, ...res.rows];
         pages.value.total = res.total;
@@ -180,6 +217,7 @@ onShow(() => {
     .chat-item {
         padding: 16rpx;
         display: flex;
+        border-bottom: 1px solid rgba(238, 238, 238, 1);
 
         .chat-img {
             width: 96rpx;
@@ -189,9 +227,9 @@ onShow(() => {
         }
 
         .chat-box {
-            border-bottom: 1px solid rgba(238, 238, 238, 1);
+            // border-bottom: 1px solid rgba(238, 238, 238, 1);
             flex: 1;
-            padding-bottom: 16rpx;
+            // padding-bottom: 16rpx;
 
             .chat-top {
                 display: flex;
@@ -217,6 +255,7 @@ onShow(() => {
             .chat-bottom {
                 display: flex;
                 justify-content: space-between;
+
                 .chat-text {
                     font-size: 28rpx;
                     font-weight: 400;
@@ -225,9 +264,12 @@ onShow(() => {
                     width: 250px;
 
 
-                    white-space: nowrap;       /* 禁止换行 */
-                    overflow: hidden;          /* 隐藏溢出内容 */
-                    text-overflow: ellipsis;   /* 溢出部分显示省略号 */
+                    white-space: nowrap;
+                    /* 禁止换行 */
+                    overflow: hidden;
+                    /* 隐藏溢出内容 */
+                    text-overflow: ellipsis;
+                    /* 溢出部分显示省略号 */
                 }
 
                 .chat-num {
@@ -237,10 +279,11 @@ onShow(() => {
                     align-items: center;
                     justify-content: center;
 
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 20px;
-                    line-height: 20px;
+                    width: 40rpx;
+                    height: 40rpx;
+                    border-radius: 40rpx;
+                    line-height: 40rpx;
+                    font-size: 24rpx;
                 }
             }
 
@@ -249,4 +292,8 @@ onShow(() => {
 
     }
 }
+
+.chat-item {
+    transition: transform 0.2s ease;
+}
 </style>

pages_orderuser/pages/talk/pages/index/index.vue

@@ -44,11 +44,10 @@
 </template>
 
 <script>
-import { getHistoryMsg } from "@/pages_orderuser/pages/talk/request/template-talk/history-msg.js";
 import { wxUploadFile, wxMakePhoneCall } from '@/utils/wxRequest.js'
 import { sendMsg, getOrderConversationInfo, getListConversationInfo, setRead } from '@/api/conversation.js';
 import { onMounted } from "vue";
-
+import store from "@/store"
 export default {
 	data() {
 		return {
@@ -74,6 +73,8 @@ export default {
 			system: '2',
 			userId: uni.getStorageSync('userId'), //读取本地存储
 			conversationRecordId: null,//会话id
+			storeUser:  store.state.user,
+			store:store,
 		}
 	},
 	computed: {
@@ -106,26 +107,45 @@ export default {
 
 		this.getMessage();
 
+	
+
 	},
 	onMounted() {
-		uni.onSocketMessage(function (parmas) {
-			const res = JSON.parse(parmas.data);
-			console.log("TCL: get -> res", res)
-			if (res.type === 'msgNew') {
-				this.talkList.unshift({ ...res.data, code: 200 });
-			}
+		// uni.onSocketMessage(function (parmas) {
+		// 	const res = JSON.parse(parmas.data);
+		// 	console.log("TCL: get -> res", res)
+		// 	if (res.type === 'msgNew') {
+		// 		this.talkList.unshift({ ...res.data, code: 200 });
+		// 	}
 
-			console.log(' onMounted-收到服务器消息:', res, this.talkList);
+		// 	console.log(' onMounted-收到服务器消息:', res, this.talkList);
 
 
-		});
+		// });
+		
 
 	},
 	methods: {
 		// 下拉刷新
 		refresherrefresh(e) {
-			this.getMessage();
+			console.log("TCL: 下拉刷新 -> e", e)
 			this.scrollView.refresherTriggered = true;
+			// this.getMessage();
+			setTimeout(()=>{
+				this.scrollView.refresherTriggered = false;
+			},500)
+		},
+		listsMessage(){
+			console.log('-----listsMessage---->', this.storeUser,this.storeUser.wsManager);
+
+			this.storeUser.wsManager.onMessage(res => {
+				console.log('--------->', res)
+				// 处理消息逻辑
+				if (res.type === 'msgNew') {
+					this.talkList.unshift({ ...res.data, code: 200 });
+				}
+			});
+
 		},
 		// 获取历史消息
 		getMessage() {
@@ -133,6 +153,15 @@ export default {
 				return;
 			}
 
+			console.log('--------->', this.storeUser);
+			if (!this.storeUser.wsManager) {
+				store.dispatch('GetInfo').then((res) => {
+					this.listsMessage();
+				 });
+			}else{
+				this.listsMessage();
+			}
+
 			// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
 			let get = async () => {
 				this.ajax.flag = false;
@@ -152,12 +181,14 @@ export default {
 
 				const res = await apiFun(parmas);
 				console.log("TCL: getOrder -> res", res)
-				this.scrollView.refresherTriggered = false;
+			
 				if (res.code === 200) {
 					const data = res.data.vos;
 					// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用。取当前消息数据的第一条信息元素
 					const selector = `msg-${data?.[0]?.msgSendTime}`;
-
+					// uni.setNavigationBarTitle({
+					// 		title: userType === 1? res.data. :  // 根据业务逻辑调整 
+					// 	});
 					// 将获取到的消息数据合并到消息数组中
 					this.talkList = [...this.talkList, ...data];
 					console.log("TCL: getOrder -> talkList", this.talkList)

store/modules/user.ts

@@ -55,6 +55,9 @@ const user: Module<UserState, UserState> = {
     SET_MESSAGECOUNT: (state, num: Number) => {
       state.messageCount = num
     },
+    SET_MESSAGE: (state, ms:any) => {
+      state.wsManager = ms
+    },
   },
 
   actions: {
@@ -106,16 +109,18 @@ const user: Module<UserState, UserState> = {
             this.wsManager.closeConnection();
           }else{
             //获取账户时，连接soket 
-            this.wsManager = new WebSocketManager(res.user.userId);
+            const ms = new WebSocketManager(res.user.userId);
             // 设置消息回调
-            this.wsManager.onMessage(data => {
+            ms.onMessage(data => {
               // 处理消息逻辑
               if (data.type === 'msgUnreadCount') {
                 commit('SET_MESSAGECOUNT', data.data);
               }
             });
             // 建立连接
-            this.wsManager.connect();
+            ms.connect();
+            commit('SET_MESSAGE', ms)
+
           }
           
 

utils/WebSocketManager.js

@@ -54,6 +54,7 @@ class WebSocketManager {
             console.log('收到 WebSocket 消息:', res.data);
             try {
                 const data = JSON.parse(res.data);
+				console.log("TCL: WebSocketManager -> _setupEventListeners -> data", data)
                 if (typeof this.onMessageCallback === 'function') {
                     this.onMessageCallback(data); // 回调通知外部
                 }
@@ -141,6 +142,7 @@ class WebSocketManager {
      * 设置消息回调
      */
     onMessage(callback) {
+		console.log("TCL: WebSocketManager -> onMessage -> callback", callback)
         this.onMessageCallback = callback;
     }
 }