cfc/cfc-frontend/pages/profile/service-role-apply.vue

<template>
  <view class="page">
    <!-- 审核状态展示 -->
    <view v-if="showStatusView" class="status-view">
      <view class="status-card" :class="'status-' + applyStatus">
        <view class="status-icon">{{ statusIcon }}</view>
        <text class="status-title">{{ statusTitle }}</text>
        <text class="status-desc">{{ statusDesc }}</text>
      </view>
      <view v-if="applyStatus === 'pending'" class="status-tip">
        <text>预计 1-3 个工作日内完成审核，请耐心等待</text>
      </view>
      <view v-if="applyStatus === 'rejected'" class="reject-info">
        <text class="reject-label">拒绝原因</text>
        <text class="reject-reason">{{ applyRecord && applyRecord.rejectReason }}</text>
      </view>
      <view class="action-buttons">
        <button v-if="applyStatus === 'rejected'" class="btn-reapply" @click="handleReapply">
          重新申请
        </button>
        <button v-if="applyStatus === 'approved'" class="btn-center" @click="goToCenter">
          进入服务商中心
        </button>
        <button class="btn-back" @click="goBack">返回首页</button>
      </view>
    </view>

    <!-- 申请表单 -->
    <view v-else class="form-wrap">
      <view class="header">
        <text class="title">服务角色申请</text>
        <text class="subtitle">选择申请角色，提交资质信息</text>
      </view>

      <view class="section">
        <view class="section-title">选择申请角色 <text class="required">*</text></view>
        <!-- 严格三列：roleRows 每行固定 3 个单元格，flex:1 等分，不依赖 calc/gap -->
        <view class="role-grid">
          <view
            v-for="(row, rowIdx) in roleRows"
            :key="getRoleRowKey(rowIdx)"
            class="role-row"
          >
            <view
              v-for="role in row"
              :key="role.key"
              class="role-cell"
            >
              <view
                v-if="!role.placeholder"
                class="role-card"
                :class="{ selected: selectedRoles.indexOf(role.key) > -1 }"
                @click="toggleRole(role.key)"
              >
                <text class="role-icon">{{ role.icon }}</text>
                <text class="role-name">{{ role.name }}</text>
                <view v-if="selectedRoles.indexOf(role.key) > -1" class="check-mark">✓</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">身份证信息</view>
        <input class="input" v-model="form.idCard" placeholder="请输入身份证号码" maxlength="18" />
        <view class="upload-row">
          <view class="upload-item" @click="chooseIdCardImage('front')">
            <image v-if="form.idCardFront" :src="form.idCardFront" mode="aspectFill" class="upload-preview" />
            <view v-else class="upload-placeholder">
              <text class="upload-icon">+</text>
              <text class="upload-label">身份证正面</text>
            </view>
          </view>
          <view class="upload-item" @click="chooseIdCardImage('back')">
            <image v-if="form.idCardBack" :src="form.idCardBack" mode="aspectFill" class="upload-preview" />
            <view v-else class="upload-placeholder">
              <text class="upload-icon">+</text>
              <text class="upload-label">身份证反面</text>
            </view>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">资质证书</view>
        <view class="cert-list">
          <view v-for="(img, idx) in form.certificateImages" :key="getCertKey(idx)" class="cert-item">
            <image :src="img" mode="aspectFill" class="cert-preview" />
            <text class="cert-del" @click="removeCert(idx)">×</text>
          </view>
          <view class="cert-add" @click="chooseCertificate">
            <text class="upload-icon">+</text>
            <text class="upload-label">添加证书</text>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">联系地址 <text class="required">*</text></view>
        <view class="address-row" @click="openAddressPicker">
          <text class="address-label">所在地区</text>
          <view class="address-value-wrap">
            <text v-if="addressText" class="address-value">{{ addressText }}</text>
            <text v-else class="address-placeholder">请选择省市区街道</text>
            <text class="address-arrow">›</text>
          </view>
        </view>
        <input class="input" v-model="form.addressDetail" placeholder="详细地址（门牌号等）" />
        <!-- 与收件人地址共用同一组件 components/address-picker.vue -->
        <AddressPicker ref="addressPicker" :show-trigger="false" @change="onAddressChange" />
      </view>

      <button class="submit-btn" :disabled="submitting" @click="handleSubmit">
        {{ submitting ? '提交中...' : '提交申请' }}
      </button>
      <view class="footer-hint">
        <text>提交后将在 1-3 个工作日内完成审核</text>
      </view>
    </view>
  </view>
</template>

<script>
import { submitServiceRoleApply, getMyServiceRoleApply, uploadServiceRoleImage } from '../../utils/api'
import AddressPicker from '@/components/address-picker.vue'

export default {
  components: { AddressPicker },
  data() {
    return {
      roleList: [
        { key: 'planner', name: '规划师', icon: '📋' },
        { key: 'nutritionist', name: '营养师', icon: '🥗' },
        { key: 'butler', name: '管家', icon: '🔔' },
        { key: 'vendor', name: '服务商', icon: '🏪' },
        { key: 'article_admin', name: '文章管理员', icon: '📝' },
        { key: 'activity_provider', name: '活动提供商', icon: '🎪' }
      ],
      selectedRoles: [],
      addressText: '',
      form: {
        idCard: '',
        idCardFront: '',
        idCardBack: '',
        certificateImages: [],
        province: '',
        city: '',
        district: '',
        street: '',
        addressDetail: ''
      },
      submitting: false,
      applyRecord: null,
      showStatusView: false
    }
  },
  computed: {
    // 按每行 3 个拆分行；最后一行不足 3 个用空占位单元格补齐，保证各行严格三列等宽
    roleRows() {
      const rows = []
      const list = this.roleList || []
      const total = Math.ceil(list.length / 3) * 3
      for (let i = 0; i < total; i += 3) {
        const row = []
        for (let j = 0; j < 3; j++) {
          const item = list[i + j]
          row.push(
            item
              ? item
              : { key: 'role-placeholder-' + i + '-' + j, name: '', icon: '', placeholder: true }
          )
        }
        rows.push(row)
      }
      return rows
    },
    applyStatus() {
      if (!this.applyRecord) return 'none'
      const s = this.applyRecord.status
      return s === 0 ? 'pending' : s === 1 ? 'approved' : 'rejected'
    },
    statusIcon() {
      return { pending: '⏳', approved: '✅', rejected: '❌' }[this.applyStatus] || '📋'
    },
    statusTitle() {
      return { pending: '审核中', approved: '申请已通过', rejected: '申请被驳回' }[this.applyStatus] || ''
    },
    statusDesc() {
      return {
        pending: '您的申请正在审核中，请留意消息通知',
        approved: '恭喜！您已成功通过审核，可以开始使用服务商功能',
        rejected: '您的申请未通过审核，可查看原因后重新提交'
      }[this.applyStatus] || ''
    }
  },
  onLoad() {
    this.checkExistingApply()
  },
  methods: {
    // 模板里不能直接调用 uni.*（渲染时实例上没有 uni，会报
    // "Property or method uni is not defined"），统一收进方法
    goBack() {
      var pages = getCurrentPages()
      if (pages && pages.length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({ url: '/pages/index/index' })
      }
    },
    async checkExistingApply() {
      try {
        const res = await getMyServiceRoleApply()
        if (res.code === 200 && res.data) {
          this.applyRecord = res.data
          const status = res.data.status
          if (status === 0) {
            this.showStatusView = true
          } else if (status === 1) {
            // 已通过，跳转服务商中心
            setTimeout(() => uni.redirectTo({ url: '/pages/vendor/center' }), 800)
          } else if (status === 2) {
            // 已拒绝，显示原因
            this.showStatusView = true
          }
        }
      } catch (e) {
        // 无申请记录，显示表单
      }
    },
    toggleRole(key) {
      const idx = this.selectedRoles.indexOf(key)
      if (idx > -1) {
        this.selectedRoles.splice(idx, 1)
      } else {
        this.selectedRoles.push(key)
      }
    },
    chooseIdCardImage(side) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          uni.showLoading({ title: '上传中...' })
          try {
            const uploadRes = await uploadServiceRoleImage(res.tempFilePaths[0])
            uni.hideLoading()
            if (uploadRes.code === 200) {
              if (side === 'front') {
                this.form.idCardFront = uploadRes.data.url
              } else {
                this.form.idCardBack = uploadRes.data.url
              }
              uni.showToast({ title: '上传成功', icon: 'success' })
            } else {
              uni.showToast({ title: uploadRes.message || '上传失败', icon: 'none' })
            }
          } catch (e) {
            uni.hideLoading()
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        }
      })
    },
    async chooseCertificate() {
      uni.chooseImage({
        count: 9 - this.form.certificateImages.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          uni.showLoading({ title: '上传中...' })
          try {
            for (const filePath of res.tempFilePaths) {
              const uploadRes = await uploadServiceRoleImage(filePath)
              if (uploadRes.code === 200) {
                this.form.certificateImages.push(uploadRes.data.url)
              }
            }
            uni.hideLoading()
            uni.showToast({ title: '上传成功', icon: 'success' })
          } catch (e) {
            uni.hideLoading()
            uni.showToast({ title: '上传失败', icon: 'none' })
          }
        }
      })
    },
    removeCert(idx) {
      this.form.certificateImages.splice(idx, 1)
    },
    getCertKey(idx) {
      return 'cert-' + idx
    },
    getRoleRowKey(rowIdx) {
      return 'role-row-' + rowIdx
    },
    openAddressPicker() {
      if (this.$refs.addressPicker) {
        this.$refs.addressPicker.open()
      }
    },
    onAddressChange(e) {
      this.form.province = e.province || ''
      this.form.city = e.city || ''
      this.form.district = e.district || ''
      this.form.street = e.street || ''
      this.addressText = e.fullName || ''
    },
    async handleSubmit() {
      if (this.selectedRoles.length === 0) {
        uni.showToast({ title: '请至少选择一个角色', icon: 'none' })
        return
      }
      if (!this.form.idCardFront || !this.form.idCardBack) {
        uni.showToast({ title: '请上传身份证正反面照片', icon: 'none' })
        return
      }
      if (!this.form.province) {
        uni.showToast({ title: '请选择联系地址', icon: 'none' })
        return
      }

      this.submitting = true
      uni.showLoading({ title: '提交中...' })
      try {
        const res = await submitServiceRoleApply({
          roles: this.selectedRoles,
          idCard: this.form.idCard,
          idCardImages: [this.form.idCardFront, this.form.idCardBack],
          certificateImages: this.form.certificateImages,
          province: this.form.province,
          city: this.form.city,
          district: this.form.district,
          street: this.form.street,
          addressDetail: this.form.addressDetail
        })
        uni.hideLoading()
        if (res.code === 200) {
          // 提交成功，刷新状态
          await this.checkExistingApply()
          if (!this.showStatusView) this.showStatusView = true
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '提交失败，请重试', icon: 'none' })
      } finally {
        this.submitting = false
      }
    },
    handleReapply() {
      this.applyRecord = null
      this.showStatusView = false
      this.selectedRoles = []
      this.addressText = ''
      this.form = {
        idCard: '',
        idCardFront: '',
        idCardBack: '',
        certificateImages: [],
        province: '',
        city: '',
        district: '',
        street: '',
        addressDetail: ''
      }
    },
    goToCenter() {
      uni.redirectTo({ url: '/pages/vendor/center' })
    }
  }
}
</script>

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

/* ===== 状态展示区 ===== */
.status-view {
  padding-top: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-card {
  width: 100%;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  margin-bottom: 30rpx;
}
.status-card.status-pending {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border: 2rpx solid #FDE68A;
}
.status-card.status-approved {
  background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
  border: 2rpx solid #86EFAC;
}
.status-card.status-rejected {
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
  border: 2rpx solid #FCA5A5;
}
.status-icon {
  font-size: 80rpx;
  display: block;
  margin-bottom: 20rpx;
}
.status-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1F2937;
  display: block;
  margin-bottom: 12rpx;
}
.status-desc {
  font-size: 26rpx;
  color: #6B7280;
  line-height: 1.6;
  display: block;
}
.status-tip {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx 28rpx;
  margin-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}
.status-tip text {
  font-size: 24rpx;
  color: #92400E;
}
.reject-info {
  background: #fff;
  border-radius: 12rpx;
  padding: 28rpx;
  margin-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}
.reject-label {
  font-size: 24rpx;
  color: #9CA3AF;
  display: block;
  margin-bottom: 12rpx;
}
.reject-reason {
  font-size: 28rpx;
  color: #DC2626;
  line-height: 1.6;
  display: block;
}
.action-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.btn-reapply, .btn-center, .btn-back {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  text-align: center;
  border: none;
}
.btn-reapply {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}
.btn-center {
  background: linear-gradient(135deg, #10B981, #34D399);
  color: #fff;
}
.btn-back {
  background: #F3F4F6;
  color: #6B7280;
}

/* ===== 表单区 ===== */
.header {
  text-align: center;
  padding: 50rpx 0 30rpx;
}
.title {
  font-size: 42rpx;
  font-weight: bold;
  color: #1F2937;
  display: block;
}
.subtitle {
  font-size: 26rpx;
  color: #9CA3AF;
  margin-top: 10rpx;
  display: block;
}
.section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  color: #374151;
}
.required {
  color: #EF4444;
  margin-left: 4rpx;
}

/* 角色网格：固定三列
   不使用 calc() 与 flex gap（旧版 iOS WebView 不支持 gap，calc 除法在不同机型上
   会出现取整偏差导致换行）——改用「每行 3 个 flex:1 单元格 + 固定 rpx 间距」，
   所有机型/分辨率下都严格等分三列 */
.role-grid {
  display: flex;
  flex-direction: column;
}
.role-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.role-cell {
  /* flex:1 + 可收缩，保证同一行三等分，长文案不撑破列宽 */
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
/* 单元格之间留白：左右各 8rpx，首尾行视情况抵消，保证总宽不溢出 */
.role-cell:not(:first-child) {
  margin-left: 16rpx;
}
.role-row:not(:first-child) {
  margin-top: 20rpx;
}
.role-card {
  width: 100%;
  box-sizing: border-box;
  background: #F9FAFB;
  border-radius: 16rpx;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 3rpx solid transparent;
  transition: all 0.2s;
}
.role-card.selected {
  background: #FFF7ED;
  border-color: #F97316;
}
.role-icon {
  font-size: 44rpx;
  margin-bottom: 10rpx;
}
.role-name {
  font-size: 24rpx;
  color: #374151;
  font-weight: 500;
  /* 保证长角色名不换行撑高导致行高不一致 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.check-mark {
  position: absolute;
  top: 8rpx;
  right: 12rpx;
  color: #F97316;
  font-size: 32rpx;
  font-weight: bold;
}

/* 联系地址入口行（与收件人地址页保持同一套视觉） */
.address-row {
  display: flex;
  align-items: center;
  padding: 24rpx 24rpx;
  background: #FAFAFA;
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}
.address-label {
  font-size: 26rpx;
  color: #374151;
  width: 140rpx;
  flex-shrink: 0;
}
.address-value-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.address-value {
  font-size: 26rpx;
  color: #374151;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-placeholder {
  font-size: 26rpx;
  color: #9CA3AF;
  text-align: right;
}
.address-arrow {
  font-size: 34rpx;
  color: #9CA3AF;
  margin-left: 8rpx;
  flex-shrink: 0;
}

/* 输入框 */
.input {
  width: 100%;
  height: 72rpx;
  border: 2rpx solid #E5E7EB;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
  background: #FAFAFA;
}

/* 图片上传 */
.upload-row {
  display: flex;
  gap: 20rpx;
}
.upload-item {
  flex: 1;
  height: 200rpx;
  border: 3rpx dashed #D1D5DB;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FAFAFA;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-icon {
  font-size: 48rpx;
  color: #9CA3AF;
}
.upload-label {
  font-size: 22rpx;
  color: #9CA3AF;
  margin-top: 8rpx;
}
.upload-preview {
  width: 100%;
  height: 100%;
}

/* 证书列表 */
.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.cert-item {
  width: 160rpx;
  height: 160rpx;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
}
.cert-preview {
  width: 100%;
  height: 100%;
}
.cert-del {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 36rpx;
  height: 36rpx;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 36rpx;
  font-size: 28rpx;
}
.cert-add {
  width: 160rpx;
  height: 160rpx;
  border: 3rpx dashed #D1D5DB;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 16rpx;
  border: none;
  box-shadow: 0 8rpx 24rpx rgba(249, 115, 22, 0.3);
}
.submit-btn[disabled] {
  opacity: 0.6;
  box-shadow: none;
}
.footer-hint {
  text-align: center;
  margin-top: 24rpx;
}
.footer-hint text {
  font-size: 24rpx;
  color: #9CA3AF;
}
</style>