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

<template>
  <view class="page-team-customers">
    <view class="page-header">
      <text class="header-title">团队客户</text>
      <text class="header-subtitle">查看上级供应商下的客户归属</text>
    </view>

    <view class="content-area">
      <view v-if="isLoading" class="loading-indicator">
        <image class="loading-avatar" src="/static/images/avatar_default.png" mode="aspectFill"></image>
        <text class="loading-text">加载中...</text>
      </view>

      <view v-else class="customer-list">
        <!-- 状态筛选 Tab -->
        <view class="status-tabs" v-if="statusOptions.length > 0">
          <view
            class="status-tab"
            v-for="(option, index) in statusOptions"
            :key="index"
            :class="{ 'status-tab-active': status === option.key }"
            @click="handleStatusChange(option.key)"
          >
            <text>{{ option.label }}</text>
          </view>
        </view>

        <!-- 列表区域 -->
        <view v-else>
          <view class="no-data" v-if="filteredCustomers.length === 0">
            <view class="empty-state">
              <image src="/static/images/icon_empty_state.png" class="empty-icon"></image>
              <text>暂无客户数据</text>
            </view>
          </view>

          <view class="customer-item" v-for="customer in filteredCustomers" :key="customer.id">
            <view class="customer-avatar-wrap">
              <image
                v-if="customer.avatar"
                class="customer-avatar-img"
                :src="customer.avatar"
                mode="aspectFill"></image>
              <text v-else class="customer-avatar-icon">👤</text>
            </view>

            <view class="customer-info">
              <view class="customer-name">{{ customer.nickname || '微信用户' }}</view>
              <view class="customer-meta">
                <text class="member-type">{{ customer.memberType || '本地用户' }}</text>
                <text class="join-time">{{ formatJoinTime(customer.joinTime) }}</text>
              </view>
            </view>

            <view class="customer-right">
              <view class="order-count">
                <text>{{ customer.orderCount || 0 }}</text>
                <text>订单</text>
              </view>

              <view class="source-tag" :class="getSourceTagClass(customer.source)">
                <text>{{ getSourceTagLabel(customer.source) }}</text>
              </view>
            </view>
          </view>

          <!-- 加载更多 -->
          <view class="load-more" v-if="hasMore && !loading">
            <view @click="loadMore" class="load-more-btn">
              <text>加载更多</text>
              <image v-if="loadingMore" src="/static/images/arrow_down.png" class="spinner"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面状态
      status: 'all', // all | referred | order | manual
      page: 1,
      hasMore: true,
      loading: false,
      refreshing: false,

      // 数据
      customers: [],         // 所有客户列表
      filteredCustomers: [], // 筛选后的客户列表
      statusOptions: [       // 筛选选项
        { key: 'all', label: '全部' },
        { key: 'referred', label: '推荐人' },
        { key: 'order', label: '下单' },
        { key: 'manual', label: '人工' }
      ],

      // 查询参数
      systemId: '',          // 供应商体系ID
      parentId: ''           // 上级供应商用户ID
    }
  },

  onLoad(options) {
    // 从路由参数获取系统ID和上级用户ID
    this.systemId = options.systemId || ''
    this.parentId = options.parentId || ''
    this.loadCustomers()
    this._onLoadFired = true
  },

  onShow() {
    if (this._onLoadFired) {
      // 首次进入：onLoad 已加载，跳过避免双发
      this._onLoadFired = false
    } else {
      // 切Tab返回时刷新
      this.page = 1
      this.customers = []
      this.hasMore = true
      this.loadCustomers()
    }
  },

  methods: {
    // 加载客户列表
    async loadCustomers() {
      if (this.loading || this.refreshing) return
      this.loading = true

      try {
        // 并发请求：获取客户列表 + 获取统计概览
        var res = await this.$http.getTeamCustomers({
          systemId: this.systemId,
          parentId: this.parentId,
          page: this.page,
          size: 20
        })

        if (res && res.data) {
          this.customers = this.page === 1 ? res.data.records || [] : this.customers.concat(res.data.records || [])
          this.hasMore = (res.data.records || []).length >= 20
          this.page++

          // 计算筛选后的列表
          this.filteredCustomers = this.filterByStatus(this.customers, this.status)
        }
      } catch (error) {
        console.error('获取团队客户失败:', error)
      } finally {
        this.loading = false
        this.refreshing = false
      }
    },

    // 根据状态筛选
    filterByStatus(customers, status) {
      if (status === 'all') return customers
      return customers.filter(c => c.source === status)
    },

    // 处理状态筛选切换
    handleStatusChange(key) {
      this.status = key
      this.page = 1
      this.customers = []
      this.hasMore = true
      this.loadCustomers()
    },

    // 加载更多
    async loadMore() {
      if (this.loading || !this.hasMore) return
      this.loadingMore = true
      try {
        await this.loadCustomers()
      } finally {
        this.loadingMore = false
      }
      this.$nextTick(() => {
        this.loadingMore = false
      })
    },

    // 格式化加入时间
    formatJoinTime(timeStr) {
      if (!timeStr) return '-'
      var d = this.parseDate(timeStr)
      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
    },

    // 获取来源标签样式
    getSourceTagClass(source) {
      const classes = {
        'manual': 'tag-manual',
        'order': 'tag-order',
        'referral': 'tag-referral'
      }
      return classes[source] || 'tag-default'
    },

    // 获取来源标签文字
    getSourceTagLabel(source) {
      const labels = {
        'manual': '人工绑定',
        'order': '下单自动',
        'referral': '推荐码'
      }
      return labels[source] || source
    }
  }
}
</script>

<style>
/* 页面整体样式 */
.page-team-customers {
  background-color: #FFF7ED;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  padding: 24rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #FED7AA;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.header-subtitle {
  font-size: 20rpx;
  color: #94A3B8;
}

/* 内容区 */
.content-area {
  padding: 0 30rpx 30rpx;
}

/* 状态筛选 Tab */
.status-tabs {
  display: flex;
  background-color: #F5FAFE;
  border-radius: 20rpx;
  padding: 6rpx 12rpx;
  margin-bottom: 24rpx;
}

.status-tab {
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
}

.status-tab-active {
  color: #F97316;
  border-bottom: 2rpx solid #F97316;
}

/* 列表项 */
.customer-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
  display: flex;
  align-items: center;
}

.customer-avatar-wrap {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  position: relative;
}

.customer-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.customer-avatar-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #F5FAFE;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 32rpx;
}

.customer-info {
  flex: 1;
}

.customer-name {
  font-size: 28rpx;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-type {
  font-size: 20rpx;
  color: #94A3B8;
  margin-top: 4rpx;
}

.join-time {
  font-size: 20rpx;
  color: #B5B5B5;
}

/* 右侧信息 */
.customer-right {
  flex-shrink: 0;
  text-align: right;
  margin-left: 24rpx;
}

.order-count {
  margin-bottom: 8rpx;
}

.order-count .number {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
}

.order-count .label {
  font-size: 20rpx;
  color: #666666;
}

/* 来源标签 */
.source-tag {
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-size: 16rpx;
  margin-top: 4rpx;
}

.tag-manual {
  background-color: #E6F7EE;
  color: #65C29A;
}

.tag-order {
  background-color: #FFF7EE;
  color: #F97316;
}

.tag-referral {
  background-color: #EEF8FF;
  color: #2F5496;
}

.tag-default {
  background-color: #F5FAFE;
  color: #666666;
}

/* 加载更多 */
.load-more {
  padding: 24rpx;
  text-align: center;
  color: #94A3B8;
  font-size: 24rpx;
}

/* 加载更多按钮 */
.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 40rpx;
  border: 1rpx solid #FED7AA;
  border-radius: 20rpx;
  color: #666666;
  font-size: 24rpx;
}

.load-more-btn .spinner {
  width: 16rpx;
  height: 16rpx;
  margin-left: 6rpx;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 空状态 */
.no-data .empty-state {
  text-align: center;
  padding: 80rpx 30rpx;
  color: #94A3B8;
}

.empty-icon {
  width: 64rpx;
  height: 64rpx;
  margin: 0 auto 12rpx;
  display: block;
}
</style>