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

<template>
  <view class="page">
    <view class="section">
      <view class="section-title">选择申请角色 <text class="required">*</text></view>
      <view class="role-grid">
        <view
          v-for="role in roleList"
          :key="role.key"
          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>
          <text v-if="selectedRoles.indexOf(role.key) > -1" class="check-mark">✓</text>
        </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>
      <AddressPicker ref="addressPicker" @change="onAddressChange" />
      <input class="input" v-model="form.addressDetail" placeholder="详细地址（门牌号等）" />
    </view>

    <button class="submit-btn" :disabled="submitting" @click="handleSubmit">
      {{ submitting ? '提交中...' : '提交申请' }}
    </button>
  </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: [],
      form: {
        idCard: '',
        idCardFront: '',
        idCardBack: '',
        certificateImages: [],
        province: '',
        city: '',
        district: '',
        street: '',
        addressDetail: ''
      },
      submitting: false
    }
  },
  onLoad() {
    this.checkExistingApply()
  },
  methods: {
    async checkExistingApply() {
      try {
        const res = await getMyServiceRoleApply()
        if (res.code === 200 && res.data && res.data.status === 0) {
          uni.showModal({
            title: '提示',
            content: '您已提交过申请，请等待审核',
            showCancel: false,
            success: () => uni.navigateBack()
          })
        }
      } 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,
        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
    },
    onAddressChange(e) {
      this.form.province = e.province || ''
      this.form.city = e.city || ''
      this.form.district = e.district || ''
      this.form.street = e.street || ''
    },
    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) {
          uni.showModal({
            title: '提交成功',
            content: '申请已提交，请等待后台审核',
            showCancel: false,
            success: () => uni.navigateBack()
          })
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '提交失败，请重试', icon: 'none' })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx 30rpx 100rpx;
}
.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}
.required {
  color: #ff4444;
}
.role-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.role-card {
  width: calc(33.33% - 14rpx);
  background: #f8f8f8;
  border-radius: 12rpx;
  padding: 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 2rpx solid transparent;
}
.role-card.selected {
  background: #fff7ed;
  border-color: #f97316;
}
.role-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}
.role-name {
  font-size: 24rpx;
  color: #333;
}
.check-mark {
  position: absolute;
  top: 8rpx;
  right: 12rpx;
  color: #f97316;
  font-size: 28rpx;
  font-weight: bold;
}
.input {
  width: 100%;
  height: 72rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  margin-bottom: 16rpx;
}
.upload-row {
  display: flex;
  gap: 20rpx;
}
.upload-item {
  flex: 1;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upload-icon {
  font-size: 48rpx;
  color: #ccc;
}
.upload-label {
  font-size: 22rpx;
  color: #999;
  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: 8rpx;
  overflow: hidden;
}
.cert-preview {
  width: 100%;
  height: 100%;
}
.cert-del {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 32rpx;
  height: 32rpx;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 32rpx;
  font-size: 24rpx;
}
.cert-add {
  width: 160rpx;
  height: 160rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 40rpx;
  left: 30rpx;
  width: calc(100% - 60rpx);
}
.submit-btn[disabled] {
  opacity: 0.6;
}
</style>