cfc/cfc-frontend/pages/vendor/team-system/team-system.vue

<template>
  <view class="page-team-system">
    <!-- 头部：体系信息 -->
    <view class="system-header" v-if="systemInfo">
      <view class="system-info">
        <view class="system-icon">🏢</view>
        <view class="system-detail">
          <text class="system-name">{{ systemInfo.name || '我的供应商体系' }}</text>
          <text class="system-desc">服务商团队管理</text>
        </view>
      </view>
      <view class="system-status" :class="systemInfo.status">
        <text>{{ systemInfo.status === 'active' ? '活跃' : '未激活' }}</text>
      </view>
    </view>

    <!-- 层级关系 -->
    <view class="section" v-if="hierarchyInfo">
      <view class="section-header">
        <text class="section-title">层级关系</text>
      </view>
      <view class="hierarchy-grid">
        <!-- 上级 -->
        <view class="hierarchy-item" v-if="hierarchyInfo.parent">
          <view class="hierarchy-label">上级服务商</view>
          <view class="hierarchy-person">
            <image v-if="hierarchyInfo.parent.avatar" class="avatar-img" :src="hierarchyInfo.parent.avatar" mode="aspectFill"></image>
            <text v-else class="avatar-placeholder">👤</text>
            <view class="person-info">
              <text class="person-name">{{ hierarchyInfo.parent.nickname || '服务商' }}</text>
              <text class="person-level">上级</text>
            </view>
          </view>
        </view>

        <!-- 下级 -->
        <view class="hierarchy-item" v-else>
          <view class="hierarchy-label">下级服务商</view>
          <view class="hierarchy-empty">
            <text>暂无下级</text>
          </view>
        </view>

        <!-- 团队规模 -->
        <view class="hierarchy-stat">
          <text class="stat-value">{{ hierarchyInfo.totalChildren || 0 }}</text>
          <text class="stat-label">团队成员</text>
        </view>
      </view>
    </view>

    <!-- 团队统计 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">团队数据</text>
      </view>
      <view class="stats-grid">
        <view class="stat-card">
          <text class="stat-num">{{ teamStats.memberCount || 0 }}</text>
          <text class="stat-name">团队成员</text>
        </view>
        <view class="stat-card">
          <text class="stat-num">{{ teamStats.customerCount || 0 }}</text>
          <text class="stat-name">客户归属</text>
        </view>
        <view class="stat-card">
          <text class="stat-num">{{ teamStats.orderCount || 0 }}</text>
          <text class="stat-name">关联订单</text>
        </view>
        <view class="stat-card">
          <text class="stat-num">{{ teamStats.amount || 0 }}</text>
          <text class="stat-name">关联金额(元)</text>
        </view>
      </view>
    </view>

    <!-- 团队成员列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">团队成员</text>
        <text class="section-action" @click="goToMembers">查看全部</text>
      </view>
      <view class="member-list">
        <view class="member-item" v-for="member in teamMembers.slice(0, 5)" :key="member.userId">
          <image v-if="member.avatar" class="member-avatar" :src="member.avatar" mode="aspectFill"></image>
          <text v-else class="member-avatar-placeholder">👤</text>
          <view class="member-info">
            <text class="member-name">{{ member.nickname || '微信用户' }}</text>
            <text class="member-role">{{ member.role || '成员' }}</text>
          </view>
          <view class="member-stats">
            <text class="member-count">{{ member.customerCount || 0 }}</text>
            <text class="member-label">客户</text>
          </view>
        </view>
        <view class="empty-tip" v-if="teamMembers.length === 0">
          <text>暂无团队成员</text>
        </view>
      </view>
    </view>

    <!-- 团队客户列表 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">团队客户</text>
        <text class="section-action" @click="goToCustomers">查看全部</text>
      </view>
      <view class="customer-list">
        <view class="customer-item" v-for="customer in teamCustomers.slice(0, 5)" :key="customer.id">
          <view class="customer-avatar">
            <text class="customer-icon">👥</text>
          </view>
          <view class="customer-info">
            <text class="customer-name">{{ customer.familyName || '未知家庭' }}</text>
            <text class="customer-meta">{{ customer.source === 'manual' ? '人工绑定' : customer.source === 'order' ? '下单自动' : '推荐码' }}</text>
          </view>
          <view class="customer-stats">
            <text class="customer-orders">{{ customer.orderCount || 0 }}</text>
            <text class="customer-label">订单</text>
          </view>
        </view>
        <view class="empty-tip" v-if="teamCustomers.length === 0">
          <text>暂无客户数据</text>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-bar">
      <button class="btn-manage" @click="goToManage">团队管理</button>
      <button class="btn-customers" @click="goToCustomers">客户列表</button>
    </view>
  </view>
</template>

<script>
import { getVendorSystemInfo, getVendorHierarchyInfo, getVendorTeamMembers, getVendorTeamCustomers } from '@/utils/api.js'

export default {
  data() {
    return {
      systemInfo: null,
      hierarchyInfo: null,
      teamStats: {
        memberCount: 0,
        customerCount: 0,
        orderCount: 0,
        amount: 0
      },
      teamMembers: [],
      teamCustomers: []
    }
  },

  onLoad() {
    this.loadData()
  },

  onShow() {
    this.loadData()
  },

  methods: {
    async loadData() {
      try {
        // 并发获取所有数据
        const [systemRes, hierarchyRes, membersRes, customersRes] = await Promise.all([
          this.fetchSystemInfo(),
          this.fetchHierarchyInfo(),
          this.fetchTeamMembers(),
          this.fetchTeamCustomers()
        ])

        if (systemRes) {
          this.systemInfo = systemRes
        }
        if (hierarchyRes) {
          this.hierarchyInfo = hierarchyRes
        }
        if (membersRes) {
          this.teamMembers = membersRes
        }
        if (customersRes) {
          this.teamCustomers = customersRes
        }

        // 更新统计
        this.updateStats()
      } catch (error) {
        console.error('加载团队数据失败:', error)
      }
    },

    // 获取体系信息
    async fetchSystemInfo() {
      try {
        const res = await getVendorSystemInfo()
        return res.data || null
      } catch (e) {
        return null
      }
    },

    // 获取层级关系
    async fetchHierarchyInfo() {
      try {
        const res = await getVendorHierarchyInfo()
        return res.data || null
      } catch (e) {
        return null
      }
    },

    // 获取团队成员
    async fetchTeamMembers() {
      try {
        const res = await getVendorTeamMembers(this.systemInfo?.id)
        return res.data || []
      } catch (e) {
        return []
      }
    },

    // 获取团队客户
    async fetchTeamCustomers() {
      try {
        const res = await getVendorTeamCustomers({
          systemId: this.systemInfo?.id,
          parentId: null,
          page: 1,
          size: 50
        })
        return res.data || []
      } catch (e) {
        return []
      }
    },

    // 更新统计数据
    updateStats() {
      this.teamStats.memberCount = this.teamMembers.length
      this.teamStats.customerCount = this.teamCustomers.length
    },

    // 跳转管理页面
    goToManage() {
      uni.navigateTo({
        url: '/pages/vendor/team-manage/team-manage'
      })
    },

    // 跳转客户列表
    goToCustomers() {
      uni.navigateTo({
        url: '/pages/vendor/team-customers/team-customers'
      })
    }
  }
}
</script>

<style>
.page-team-system {
  background-color: #FFF7ED;
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 体系头部 */
.system-header {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}

.system-info {
  display: flex;
  align-items: center;
}

.system-icon {
  font-size: 64rpx;
  margin-right: 20rpx;
}

.system-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.system-desc {
  font-size: 24rpx;
  color: #94A3B8;
  margin-top: 4rpx;
}

.system-status {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.system-status.active {
  background-color: #E6F7EE;
  color: #65C29A;
}

.system-status.inactive {
  background-color: #FFF7EE;
  color: #F97316;
}

/* 区块 */
.section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 0 30rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.section-action {
  font-size: 24rpx;
  color: #F97316;
}

/* 层级关系 */
.hierarchy-grid {
  display: flex;
  flex-wrap: wrap;
}

.hierarchy-item {
  flex: 1;
  min-width: 48%;
  padding: 20rpx;
  background-color: #FFF7ED;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.hierarchy-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.hierarchy-person {
  display: flex;
  align-items: center;
}

.avatar-img {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.avatar-placeholder {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: #F5FAFE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 16rpx;
}

.person-info {
  flex: 1;
}

.person-name {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.person-level {
  font-size: 20rpx;
  color: #94A3B8;
}

.hierarchy-empty {
  font-size: 24rpx;
  color: #94A3B8;
}

.hierarchy-stat {
  flex: 1;
  min-width: 48%;
  padding: 20rpx;
  background-color: #F5FAFE;
  border-radius: 12rpx;
  text-align: center;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #2F5496;
  display: block;
}

.stat-label {
  font-size: 22rpx;
  color: #666;
}

/* 统计网格 */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
}

.stat-card {
  width: 50%;
  padding: 20rpx;
  text-align: center;
  border-right: 1rpx solid #FED7AA;
  border-bottom: 1rpx solid #FED7AA;
}

.stat-num {
  font-size: 36rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}

.stat-name {
  font-size: 22rpx;
  color: #666;
}

/* 成员列表 */
.member-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}

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

.member-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.member-avatar-placeholder {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: #F5FAFE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  margin-right: 16rpx;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.member-role {
  font-size: 20rpx;
  color: #94A3B8;
}

.member-stats {
  text-align: right;
}

.member-count {
  font-size: 28rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}

.member-label {
  font-size: 20rpx;
  color: #666;
}

.empty-tip {
  text-align: center;
  padding: 40rpx;
  color: #94A3B8;
  font-size: 26rpx;
}

/* 客户列表 */
.customer-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #FED7AA;
}

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

.customer-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: #F5FAFE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.customer-icon {
  font-size: 32rpx;
}

.customer-info {
  flex: 1;
}

.customer-name {
  font-size: 26rpx;
  color: #333;
  display: block;
}

.customer-meta {
  font-size: 20rpx;
  color: #94A3B8;
}

.customer-stats {
  text-align: right;
}

.customer-orders {
  font-size: 28rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}

.customer-label {
  font-size: 20rpx;
  color: #666;
}

/* 操作按钮 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0,0,0,0.05);
}

.btn-manage, .btn-customers {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.btn-manage {
  background-color: #F97316;
  color: #fff;
}

.btn-customers {
  background-color: #fff;
  color: #F97316;
  border: 2rpx solid #F97316;
}
</style>