cfc/cfc-frontend/pages/vendor/center.vue

<template>
  <view class="container">
    <!-- 待审核提示 -->
    <view v-if="isPending" class="pending-banner">
      <text class="pending-icon">⏳</text>
      <view class="pending-info">
        <text class="pending-title">服务商申请审核中</text>
        <text class="pending-desc">请等待管理员审核，预计 1-3 个工作日完成</text>
      </view>
    </view>

    <!-- 未审核通过时隐藏信息卡片和菜单 -->
    <view v-else>
      <view class="header">
        <text class="icon">🏪</text>
        <text class="title">服务商中心</text>
        <text class="status-badge" :class="'badge-' + (vendorInfoData.vendorType || '')">{{ getTypeLabel(vendorInfoData.vendorType) }}</text>
      </view>

      <view class="info-card" v-if="vendorInfoData">
        <view class="info-row">
          <text class="info-label">服务商类型</text>
          <text class="info-value">{{ getTypeLabel(vendorInfoData.vendorType) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">真实姓名</text>
          <text class="info-value">{{ vendorInfoData.realName || '未设置' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">联系电话</text>
          <text class="info-value">{{ vendorInfoData.phone || '未设置' }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">联系方式</text>
          <text class="info-value">{{ vendorInfoData.vendorInfo || '暂无' }}</text>
        </view>
      </view>

      <view class="menu-list">
        <view class="menu-item" @click="goToProducts">
          <view class="menu-icon">📦</view>
          <text class="menu-label">商品管理</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToOrders">
          <view class="menu-icon">📋</view>
          <text class="menu-label">订单管理</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToTeamSystem">
          <view class="menu-icon">👥</view>
          <text class="menu-label">团队管理</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { vendorInfo, vendorStatus } from '../../utils/api'

export default {
  data() {
    return {
      vendorTypes: [
        { value: 'planner', label: '成长规划师' },
        { value: 'activity_provider', label: '活动提供商' },
        { value: 'product_supplier', label: '商品供应商' }
      ],
      vendorInfoData: null,
      isPending: false
    }
  },
  onLoad() {
    this.loadStatus()
    this.loadVendorInfo()
  },
  methods: {
    getTypeLabel(value) {
      const item = this.vendorTypes.find(t => t.value === value)
      return item ? item.label : (value || '服务商')
    },
    async loadStatus() {
      try {
        const res = await vendorStatus()
        this.isPending = !!(res && res.data && res.data.vendorStatus === 'pending')
      } catch (e) {
        this.isPending = false
      }
    },
    async loadVendorInfo() {
      try {
        const res = await vendorInfo()
        this.vendorInfoData = res.data
      } catch (e) {
        // vendor 未审核通过时会报错，忽略
      }
    },
    goToProducts() {
      uni.navigateTo({ url: '/pages/vendor/products/products' })
    },
    goToOrders() {
      uni.navigateTo({ url: '/pages/vendor/orders/orders' })
    },
    goToTeamSystem() {
      uni.navigateTo({ url: '/pages/vendor/team-system/team-system' })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background: linear-gradient(180deg, #FFF7ED 0%, #F8F8F8 25%);
  min-height: 100vh;
}

/* 待审核提示 */
.pending-banner {
  background: linear-gradient(135deg, #FEF3C7, #FFFBEB);
  border: 2rpx solid #FDE68A;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-top: 30rpx;
}
.pending-icon {
  font-size: 72rpx;
}
.pending-info {
  display: flex;
  flex-direction: column;
}
.pending-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #92400E;
}
.pending-desc {
  font-size: 24rpx;
  color: #B45309;
  margin-top: 8rpx;
}

/* 头部 */
.header {
  text-align: center;
  padding: 50rpx 0 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  font-size: 100rpx;
  margin-bottom: 16rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #1F2937;
}
.status-badge {
  margin-top: 12rpx;
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  background: #F3F4F6;
  color: #6B7280;
}
.status-badge.badge-planner { background: #ECFDF5; color: #059669; }
.status-badge.badge-activity_provider { background: #EFF6FF; color: #2563EB; }
.status-badge.badge-product_supplier { background: #FFF7ED; color: #EA580C; }

/* 信息卡片 */
.info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #F3F4F6;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 26rpx;
  color: #9CA3AF;
}
.info-value {
  font-size: 26rpx;
  color: #374151;
  font-weight: 500;
  max-width: 60%;
  text-align: right;
  word-break: break-all;
}

/* 菜单列表 */
.menu-list {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 30rpx;
  border-bottom: 1rpx solid #F3F4F6;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}
.menu-label {
  font-size: 30rpx;
  color: #374151;
  flex: 1;
}
.arrow {
  color: #D1D5DB;
  font-size: 36rpx;
}
</style>