pages/consultation/index.vue

@@ -240,10 +240,6 @@ export default {
         this.chatList = this.normalizeDialogueList(list);
         // 同步到全局会话列表，便于后续实时合并
         this.$store.commit("set_UserMsgList", this.chatList);
-        this.$store.commit("upsert_DialogueTypeMap", {
-          list: this.chatList,
-          type: 1,
-        });
         this.totalCount = res?.data?.item2 || list.length;
       } catch (error) {
         console.error("[在线咨询] 获取会话列表失败", error);

pages/transfer/index.vue

@@ -10,42 +10,63 @@
       enable-back-to-top
     >
       <view class="main-content">
-        <!-- 会话列表（人工转接） -->
+        <!-- 服务状态卡片 -->
-        <view 
+        <view class="status-card">
-          class="chat-item" 
+          <view class="status-title">人工服务</view>
-          v-for="(item, index) in displayChatList" 
+          <view class="status-content">
-          :key="item.id || index" 
+            <view class="status-badge" :class="isOnline ? 'online' : 'offline'">
-          @click="openChat(item)"
+              {{ isOnline ? '在线' : '离线' }}
+            </view>
+            <view class="status-desc">
+              {{ isOnline ? '客服正在为您服务' : '当前暂无客服在线' }}
+            </view>
+          </view>
+        </view>
+
+        <!-- 人工客服列表 -->
+        <view class="section-title">在线客服</view>
+        <view class="agent-list">
+          <view class="agent-item" v-for="(agent, index) in agentList" :key="index" @click="handleTransfer(agent)">
+            <view class="agent-avatar-wrapper">
+              <image class="agent-avatar" :src="agent.avatar || defaultAvatar"></image>
+              <view class="online-dot" v-if="agent.online"></view>
+            </view>
+            <view class="agent-info">
+              <view class="agent-name">{{ agent.name }}</view>
+              <view class="agent-status">{{ agent.statusText }}</view>
+            </view>
+            <view class="agent-action">
+              <u-button
+                size="mini"
+                type="primary"
+                :disabled="!agent.online"
+                @click.stop="handleTransfer(agent)"
               >
-          <view class="chat-avatar-wrapper">
+                {{ agent.online ? '转接' : '离线' }}
-            <image class="chat-avatar" :src="item.avatar"></image>
+              </u-button>
-            <view class="unread-badge" v-if="item.unreadCount > 0">
-              {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
-            </view>
-          </view>
-          
-          <view class="chat-content">
-            <view class="chat-header">
-              <text class="chat-name">{{ item.name }}</text>
-              <text class="chat-time">{{ item.displayTime }}</text>
-            </view>
-            <view class="chat-preview">
-              <text class="preview-text">{{ item.displayPreview }}</text>
             </view>
           </view>
         </view>
 
-        <view class="empty-container" v-if="chatList.length === 0">
+        <!-- 无数据提示 -->
-          <image class="empty-image" src="/static/common/icon/empty-chat.png"></image>
+        <view class="empty-tip" v-if="agentList.length === 0">
-          <text class="empty-text">暂无人工转接消息</text>
+          暂无客服在线
-          <text class="empty-hint">人工客服接入后会显示在这里</text>
         </view>
       </view>
     </scroll-view>
 
     <view class="page-tabbar">
-      <TabBar :currentPath="'/pages/transfer/index'" @change="handleTabChange" />
+      <TabBar :currentPath="'/pages/manual-transfer/index'" @change="handleTabChange" />
     </view>
+
+    <u-modal
+      v-model="showModal"
+      :show-cancel-button="true"
+      title="人工转接"
+      :content="modalContent"
+      @confirm="confirmTransfer"
+      @cancel="showModal = false"
+    ></u-modal>
   </view>
 </template>
 
@@ -59,266 +80,68 @@ export default {
     TabBar,
     PageHeader,
   },
-  computed: {
-    dialogueTypeMap() {
-      return this.$store?.state?.vuex_dialogueTypeMap || {};
-    },
-    unreadMap() {
-      const map = {};
-      const list = this.$store?.state?.vuex_userMsgList || [];
-      list.forEach((item) => {
-        const id = this.getDialogueId(item);
-        const count =
-          item?.unReadCount ??
-          item?.unreadCount ??
-          item?.unread ??
-          null;
-        if (id && typeof count === "number") {
-          map[id] = count;
-        }
-      });
-      return map;
-    },
-    displayChatList() {
-      // 未完成首帧加载前不渲染，避免显示上一页的会话
-      if (!this.hasLoaded) return [];
-
-      const realtime = this.$store?.state?.vuex_userMsgList || [];
-      const baseList = this.chatList || [];
-
-      const rtMap = {};
-      realtime.forEach((item) => {
-        const id = this.getDialogueId(item);
-        if (id) rtMap[id] = item;
-      });
-
-      const merged = baseList.map((item) => {
-        const id = this.getDialogueId(item);
-        const rt = id ? rtMap[id] : null;
-        const source = rt || item;
-        // 只展示标记为人工转接（2）的会话
-        const type = this.dialogueTypeMap[id];
-        if (type && Number(type) !== 2) return null;
-        const unread =
-          typeof this.unreadMap[id] === "number"
-            ? this.unreadMap[id]
-            : source?.unReadCount ??
-              source?.unreadCount ??
-              source?.unread ??
-              0;
-
-        return {
-          ...item,
-          ...rt,
-          id,
-          dialogueManagementId: id,
-          DialogueManagementId: id,
-          userId:
-            source?.receiverId ||
-            source?.friendId ||
-            source?.userId ||
-            item?.userId ||
-            "",
-          avatar:
-            source?.receiverHeadSculptureUrl ||
-            source?.avatar ||
-            source?.friendAvatar ||
-            "/static/avatar/default-avatar.png",
-          displayTime: this.formatTime(
-            source?.lastMessageTime ||
-              source?.lastSendTime ||
-              source?.sendDate ||
-              item?.lastMessageTime ||
-              ""
-          ),
-          displayPreview:
-            source?.lastMessage ||
-            source?.message ||
-            item?.lastMessage ||
-            "暂无消息",
-          unreadCount: unread,
-        };
-      }).filter(Boolean);
-
-      realtime.forEach((item) => {
-        const id = this.getDialogueId(item);
-        if (!id) return;
-        const exists = merged.some((row) => row.id === id);
-        const type = this.dialogueTypeMap[id];
-        if (!exists && (!type || Number(type) === 2)) {
-          const unread =
-            typeof this.unreadMap[id] === "number"
-              ? this.unreadMap[id]
-              : item?.unReadCount ??
-                item?.unreadCount ??
-                item?.unread ??
-                0;
-          merged.unshift({
-            ...item,
-            id,
-            dialogueManagementId: id,
-            DialogueManagementId: id,
-            userId:
-              item?.receiverId ||
-              item?.friendId ||
-              item?.userId ||
-              "",
-            avatar:
-              item?.receiverHeadSculptureUrl ||
-              item?.avatar ||
-              item?.friendAvatar ||
-              "/static/avatar/default-avatar.png",
-            displayTime: this.formatTime(
-              item?.lastMessageTime ||
-                item?.lastSendTime ||
-                item?.sendDate ||
-                ""
-            ),
-            displayPreview:
-              item?.lastMessage || item?.message || "暂无消息",
-            unreadCount: unread,
-          });
-        }
-      });
-
-      return merged;
-    },
-  },
   data() {
     return {
-      chatList: [],
+      showModal: false,
-      totalCount: 0,
+      modalContent: '',
-      isLoading: false,
+      selectedAgent: null,
-      hasLoaded: false,
+      defaultAvatar: "/static/avatar/default-avatar.png",
+      isOnline: true,
+      agentList: [
+        {
+          id: 1,
+          name: "客服小王",
+          avatar: "",
+          online: true,
+          statusText: "空闲中",
+        },
+        {
+          id: 2,
+          name: "客服小李",
+          avatar: "",
+          online: true,
+          statusText: "忙碌中",
+        },
+        {
+          id: 3,
+          name: "客服小张",
+          avatar: "",
+          online: false,
+          statusText: "离线",
+        },
+      ],
     };
   },
-  onLoad() {
-    this.loadChatList().finally(() => {
-      this.hasLoaded = true;
-    });
-  },
-  onShow() {
-    if (this.hasLoaded) {
-      this.refreshChatList();
-    }
-  },
   methods: {
     handleTabChange(path, index) {
       console.log("切换到标签页:", path, index);
     },
-    async openChat(item) {
+    handleTransfer(agent) {
-      if (item?.id) {
+      if (!agent.online) {
-        try {
-          await this.$u.api.ReadMessageApi({
-            dialogueManagementId: item.id,
-          });
-        } catch (err) {
-          console.error("[人工转接] 标记已读失败", err);
-        }
-      }
-
-      this.$store.dispatch("selectTeacherChatItem", {
-        id: item.id,
-        receiverId: item.userId,
-      });
-    },
-    async loadChatList() {
-      if (this.isLoading) return;
-      this.isLoading = true;
-      try {
-        const res = await this.$u.api.GetDialogueListApi({
-          "Item1.OnlineConsultationType": 2,
-        });
-        const list = (res && res.data && res.data.item1) || [];
-        this.chatList = this.normalizeDialogueList(list);
-        this.$store.commit("set_UserMsgList", this.chatList);
-        this.$store.commit("upsert_DialogueTypeMap", {
-          list: this.chatList,
-          type: 2,
-        });
-        this.totalCount = res?.data?.item2 || list.length;
-      } catch (error) {
-        console.error("[人工转接] 获取会话列表失败", error);
         uni.showToast({
-          title: "获取会话列表失败",
+          title: '该客服当前离线',
-          icon: "none",
+          icon: 'none'
         });
-      } finally {
+        return;
-        this.isLoading = false;
       }
+      this.selectedAgent = agent;
+      this.modalContent = `确认转接到${agent.name}吗？`;
+      this.showModal = true;
     },
-    refreshChatList() {
+    confirmTransfer() {
-      this.loadChatList();
+      // 这里可以执行实际的转接逻辑
-    },
+      uni.showToast({
-    normalizeDialogueList(list = []) {
+        title: '正在为您转接...',
-      return list.map((item, index) => {
+        icon: 'none'
-        const unread =
-          typeof item?.unReadCount === "number"
-            ? item.unReadCount
-            : item?.unreadCount || 0;
-
-        const id =
-          item?.dialogueManagementId ||
-          item?.DialogueManagementId ||
-          item?.dialogueId ||
-          item?.friendId ||
-          item?.id ||
-          index;
-
-        return {
-          id,
-          dialogueManagementId: id,
-          DialogueManagementId: id,
-          userId: item?.receiverId || item?.friendId || item?.userId || "",
-          friendId: item?.receiverId || item?.friendId || item?.userId || "",
-          name:
-            item?.receiverName ||
-            item?.friendName ||
-            item?.userName ||
-            item?.title ||
-            "",
-          avatar: this.buildAvatarUrl(
-            item?.receiverHeadSculptureUrl ||
-              item?.avatar ||
-              item?.friendAvatar
-          ),
-          lastMessage: item?.lastMessage || "暂无消息",
-          lastMessageTime: this.formatTime(
-            item?.lastMessageTime || item?.lastSendTime || item?.startTime
-          ),
-          unreadCount: unread,
-        };
       });
-    },
+      this.showModal = false;
-    buildAvatarUrl(url) {
+      
-      const fallback = "/static/avatar/default-avatar.png";
+      // 模拟跳转到聊天页面
-      if (!url) return fallback;
+      setTimeout(() => {
-      if (/^https?:\/\//i.test(url)) return url;
+        // uni.navigateTo({
-      const baseUrl = this.$u?.http?.config?.baseUrl || "";
+        //   url: '/pages/message/dialogBox/dialogBox?agentId=' + this.selectedAgent.id
-      if (baseUrl) return `${baseUrl}/${url}`;
+        // });
-      return url.startsWith("/") ? url : `/${url}`;
+      }, 1000);
-    },
-    formatTime(timeStr) {
-      if (!timeStr) return "";
-      const date = new Date(timeStr);
-      if (!isNaN(date.getTime())) {
-        const month = (date.getMonth() + 1).toString().padStart(2, "0");
-        const day = date.getDate().toString().padStart(2, "0");
-        const hours = date.getHours().toString().padStart(2, "0");
-        const minutes = date.getMinutes().toString().padStart(2, "0");
-        return `${month}/${day} ${hours}:${minutes}`;
-      }
-      return String(timeStr).replace("T", " ").slice(5, 16);
-    },
-    getDialogueId(item) {
-      return (
-        item?.dialogueManagementId ||
-        item?.DialogueManagementId ||
-        item?.dialogueId ||
-        item?.friendId ||
-        item?.id ||
-        ""
-      );
     },
   },
 };
@@ -365,113 +188,123 @@ export default {
   z-index: 100;
 }
 
-.chat-item {
+.status-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+  margin-bottom: 15px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.status-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  margin-bottom: 10px;
+}
+
+.status-content {
   display: flex;
+  align-items: center;
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 10px;
+}
+
+.status-badge.online {
+  background-color: #52c41a;
+  color: #fff;
+}
+
+.status-badge.offline {
+  background-color: #999;
+  color: #fff;
+}
+
+.status-desc {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  margin: 15px 0 10px 0;
+}
+
+.agent-list {
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.agent-item {
+  display: flex;
+  align-items: center;
   padding: 15px;
-  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
-  border-bottom: 1rpx solid #f0f0f0;
-  transition: background-color 0.2s;
 }
 
-.chat-item:active {
+.agent-item:last-child {
-  background-color: #f5f5f5;
+  border-bottom: none;
 }
 
-.chat-avatar-wrapper {
+.agent-avatar-wrapper {
   position: relative;
   margin-right: 12px;
 }
 
-.chat-avatar {
+.agent-avatar {
-  width: 50px;
+  width: 48px;
-  height: 50px;
+  height: 48px;
-  border-radius: 8px;
+  border-radius: 50%;
-  background-color: #e8e8e8;
+  background-color: #eee;
 }
 
-.unread-badge {
+.online-dot {
   position: absolute;
-  top: -5px;
+  bottom: 2px;
-  right: -5px;
+  right: 2px;
-  min-width: 18px;
+  width: 10px;
-  height: 18px;
+  height: 10px;
-  padding: 0 5px;
+  background-color: #52c41a;
-  background: #ff4d4f;
+  border-radius: 50%;
-  border-radius: 9px;
-  color: #fff;
-  font-size: 11px;
-  line-height: 18px;
-  text-align: center;
   border: 2px solid #fff;
 }
 
-.chat-content {
+.agent-info {
   flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 }
 
-.chat-header {
+.agent-name {
-  display: flex;
+  font-size: 15px;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.chat-name {
-  font-size: 16px;
   font-weight: 500;
   color: #333;
-  max-width: 200px;
+  margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.chat-time {
+.agent-status {
-  font-size: 12px;
-  color: #999;
-  flex-shrink: 0;
-}
-
-.chat-preview {
-  display: flex;
-  align-items: center;
-}
-
-.preview-text {
   font-size: 13px;
   color: #999;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
 }
 
-.empty-container {
+.agent-action {
-  display: flex;
+  margin-left: 10px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100px 20px;
 }
 
-.empty-image {
+.empty-tip {
-  width: 120px;
+  text-align: center;
-  height: 120px;
+  padding: 50px 20px;
-  margin-bottom: 20px;
-}
-
-.empty-text {
-  font-size: 16px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.empty-hint {
-  font-size: 13px;
   color: #999;
+  font-size: 14px;
 }
 </style>
+

store/index.js

@@ -53,8 +53,6 @@ const store = new Vuex.Store({
     vuex_msgUser: lifeData.vuex_msgUser ? lifeData.vuex_msgUser : {},
     // 消息窗口滚动位置
     vuex_msgScrollTop: 0,
-    // 记录会话ID与在线咨询类型的映射，区分在线咨询/人工转接
-    vuex_dialogueTypeMap: {},
     // 自定义tabbar数据
     vuex_iPhone: lifeData.vuex_iPhone ? lifeData.vuex_iPhone : false,
     // tabbar相关配置
@@ -311,21 +309,6 @@ const store = new Vuex.Store({
       saveLifeData("vuex_teacherInfo", state.vuex_teacherInfo);
       saveLifeData("vuex_user", state.vuex_user);
     },
-    // 合并会话类型映射（在线咨询类型）
-    upsert_DialogueTypeMap(state, { list = [], type }) {
-      if (!type) return;
-      const next = { ...(state.vuex_dialogueTypeMap || {}) };
-      list.forEach((item) => {
-        const id =
-          item?.dialogueManagementId ||
-          item?.DialogueManagementId ||
-          item?.dialogueId ||
-          item?.friendId ||
-          item?.id;
-        if (id) next[id] = type;
-      });
-      state.vuex_dialogueTypeMap = next;
-    },
   },
   actions: {
     // 获取聊天列表（最近联系人）