fix: isolate customer service chats and reload bank details

web/src/mobile/views/SupportView.vue

@@ -144,7 +144,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+  import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import { useRoute } from 'vue-router';
   import {
     ChatbubbleEllipsesOutline,
@@ -214,6 +214,7 @@
   const sessionStartedAt = ref(new Date().toISOString());
   const messageList = ref<HTMLElement | null>(null);
   let chat: CustomerServiceChat | null = null;
+  let connectionVersion = 0;
   async function load() {
     loading.value = true;
     error.value = '';
@@ -224,7 +225,6 @@
       ]);
       services.value = serviceRows;
       me.value = profile;
-      if (isChat.value) await connectChat();
     } catch (err) {
       const message = errorText(err);
       error.value = message;
@@ -239,54 +239,79 @@
     if (status === 'busy') return '忙碌';
     return '离线留言';
   }
-  async function connectChat() {
-    const serviceID = Number(route.params.id);
-    if (!serviceID || chatLoading.value) return;
+  function disconnectChat() {
+    connectionVersion += 1;
     chat?.disconnect();
     chat = null;
-    chatLoading.value = true;
-    chatError.value = '';
     messages.value = [];
     historyBoundarySeq.value = 0;
+    chatLoading.value = false;
+    chatError.value = '';
+    draft.value = '';
+    sending.value = false;
+    mediaSending.value = false;
+    uploadProgress.value = 0;
+    toolsOpen.value = false;
+    emojiOpen.value = false;
+  }
+  async function connectChat() {
+    const serviceID = Number(route.params.id);
+    disconnectChat();
+    if (!serviceID) return;
+    const version = connectionVersion;
+    chatLoading.value = true;
     try {
       const session = await request<CustomerServiceSession>({
         url: `/v1/customer-services/${serviceID}/session`,
         method: 'POST',
         data: { device_id: deviceID(), platform: 'web', app_version: '1.0.0' },
       });
-      chat = new CustomerServiceChat(session, (rows) => {
+      if (version !== connectionVersion) return;
+      const nextChat = new CustomerServiceChat(session, (rows) => {
+        if (version !== connectionVersion) return;
         messages.value = rows;
         void scrollToBottom();
       });
-      await chat.connect(session.token);
+      chat = nextChat;
+      await nextChat.connect(session.token);
+      if (version !== connectionVersion) {
+        nextChat.disconnect();
+        return;
+      }
       // Tinode delivers cached topic history just after subscribe resolves.
       // Give that initial batch a brief window so it can be separated from the new session.
       await new Promise<void>((resolve) => window.setTimeout(resolve, 250));
+      if (version !== connectionVersion) return;
       historyBoundarySeq.value = messages.value.reduce((max, message) => Math.max(max, message.seq), 0);
       sessionStartedAt.value = new Date().toISOString();
     } catch (err) {
+      if (version !== connectionVersion) return;
       chat?.disconnect();
       chat = null;
       chatError.value = errorText(err);
     } finally {
-      chatLoading.value = false;
+      if (version === connectionVersion) chatLoading.value = false;
     }
   }
   async function sendMessage() {
     if (!chat || sending.value || !draft.value.trim()) return;
+    const activeChat = chat;
+    const version = connectionVersion;
     const value = draft.value;
     draft.value = '';
     toolsOpen.value = false;
     emojiOpen.value = false;
     sending.value = true;
     try {
-      await chat.send(value);
+      await activeChat.send(value);
+      if (version !== connectionVersion) return;
       await scrollToBottom();
     } catch (err) {
+      if (version !== connectionVersion) return;
       draft.value = value;
       chatError.value = errorText(err);
     } finally {
-      sending.value = false;
+      if (version === connectionVersion) sending.value = false;
     }
   }
   async function sendMedia(type: 'image' | 'video', event: Event) {
@@ -294,6 +319,8 @@
     const file = input.files?.[0];
     input.value = '';
     if (!file || !chat || mediaSending.value) return;
+    const activeChat = chat;
+    const version = connectionVersion;
     const maxSize = type === 'image' ? 10 * 1024 * 1024 : 50 * 1024 * 1024;
     if (!file.type.startsWith(`${type}/`)) {
       window.$message?.error(type === 'image' ? '请选择照片文件' : '请选择视频文件');
@@ -308,16 +335,21 @@
     mediaSending.value = true;
     uploadProgress.value = 0;
     try {
-      await chat.sendMedia(file, type, (progress) => {
+      await activeChat.sendMedia(file, type, (progress) => {
+        if (version !== connectionVersion) return;
         uploadProgress.value = Math.min(99, Math.round(progress * 100));
       });
+      if (version !== connectionVersion) return;
       uploadProgress.value = 100;
       await scrollToBottom();
     } catch (err) {
+      if (version !== connectionVersion) return;
       window.$message?.error(errorText(err));
     } finally {
-      mediaSending.value = false;
-      uploadProgress.value = 0;
+      if (version === connectionVersion) {
+        mediaSending.value = false;
+        uploadProgress.value = 0;
+      }
     }
   }
   function toggleTools() {
@@ -346,6 +378,10 @@
       hour12: false,
     }).format(new Date(value));
   }
+  watch(() => route.params.id, (serviceID) => {
+    if (serviceID) void connectChat();
+    else disconnectChat();
+  }, { immediate: true, flush: 'sync' });
   onMounted(load);
-  onBeforeUnmount(() => chat?.disconnect());
+  onBeforeUnmount(disconnectChat);
 </script>