YingXingAI/pages/transfer/index.vue

<template>
  <view class="page-container">
    <view class="page-header">
      <PageHeader title="人工转接" :is-back="false" :border-bottom="false" />
    </view>
    
    <scroll-view 
      class="page-main" 
      scroll-y
      enable-back-to-top
    >
      <view class="main-content">
        <!-- 服务状态卡片 -->
        <view class="status-card">
          <view class="status-title">人工服务</view>
          <view class="status-content">
            <view class="status-badge" :class="isOnline ? 'online' : 'offline'">
              {{ 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)"
              >
                {{ agent.online ? '转接' : '离线' }}
              </u-button>
            </view>
          </view>
        </view>

        <!-- 无数据提示 -->
        <view class="empty-tip" v-if="agentList.length === 0">
          暂无客服在线
        </view>
      </view>
    </scroll-view>

    <view class="page-tabbar">
      <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>

<script>
import TabBar from "@/components/TabBar-optimized.vue";
import PageHeader from "@/components/PageHeader.vue";

export default {
  name: "TransferPage",
  components: {
    TabBar,
    PageHeader,
  },
  data() {
    return {
      showModal: false,
      modalContent: '',
      selectedAgent: null,
      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: "离线",
        },
      ],
    };
  },
  methods: {
    handleTabChange(path, index) {
      console.log("切换到标签页:", path, index);
    },
    handleTransfer(agent) {
      if (!agent.online) {
        uni.showToast({
          title: '该客服当前离线',
          icon: 'none'
        });
        return;
      }
      this.selectedAgent = agent;
      this.modalContent = `确认转接到${agent.name}吗？`;
      this.showModal = true;
    },
    confirmTransfer() {
      // 这里可以执行实际的转接逻辑
      uni.showToast({
        title: '正在为您转接...',
        icon: 'none'
      });
      this.showModal = false;
      
      // 模拟跳转到聊天页面
      setTimeout(() => {
        // uni.navigateTo({
        //   url: '/pages/message/dialogBox/dialogBox?agentId=' + this.selectedAgent.id
        // });
      }, 1000);
    },
  },
};
</script>

<style scoped>
/* ===== 页面容器 - 主流三段式布局 ===== */
.page-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
  overflow: hidden;
}

/* ===== 头部导航 ===== */
.page-header {
  flex-shrink: 0;
  z-index: 100;
}

/* ===== 内容区域 ===== */
.page-main {
  flex: 1;
  height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== 内容内层 ===== */
.main-content {
  padding: 10px;
  padding-bottom: calc(50px + env(safe-area-inset-bottom) + 10px);
  min-height: 100%;
}

/* ===== 底部导航 ===== */
.page-tabbar {
  flex-shrink: 0;
  z-index: 100;
}

.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;
  border-bottom: 1px solid #f0f0f0;
}

.agent-item:last-child {
  border-bottom: none;
}

.agent-avatar-wrapper {
  position: relative;
  margin-right: 12px;
}

.agent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #eee;
}

.online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #52c41a;
  border-radius: 50%;
  border: 2px solid #fff;
}

.agent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.agent-name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.agent-status {
  font-size: 13px;
  color: #999;
}

.agent-action {
  margin-left: 10px;
}

.empty-tip {
  text-align: center;
  padding: 50px 20px;
  color: #999;
  font-size: 14px;
}
</style>