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

<template>
  <view class="container">
    <view class="header">
      <text class="title">服务商入驻</text>
      <text class="subtitle">选择服务商类型，提交入驻申请</text>
    </view>

    <view class="form">
      <view class="form-item">
        <text class="label">服务商类型</text>
        <picker mode="selector" :range="vendorTypes" range-key="label" @change="onTypeChange">
          <view class="picker">
            <text v-if="formData.vendorType">{{ getTypeLabel(formData.vendorType) }}</text>
            <text v-else class="placeholder">请选择服务商类型</text>
            <text class="arrow">›</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">资质说明</text>
        <textarea
          class="textarea"
          v-model="formData.vendorInfo"
          placeholder="请填写您的资质信息、服务经验等"
          maxlength="500"
        />
        <text class="counter">{{ formData.vendorInfo.length }}/500</text>
      </view>

      <button class="btn-submit" :disabled="!formData.vendorType || submitting" @click="handleSubmit">
        {{ submitting ? '提交中...' : '提交申请' }}
      </button>
    </view>
  </view>
</template>

<script>
import { vendorApply } from '../../utils/api'

export default {
  onLoad() {
    uni.redirectTo({ url: '/pages/profile/service-role-apply' })
  },
  data() {
    return {
      vendorTypes: [
        { value: 'planner', label: '成长规划师' },
        { value: 'activity_provider', label: '活动提供商' },
        { value: 'product_supplier', label: '商品供应商' }
      ],
      formData: {
        vendorType: '',
        vendorInfo: ''
      },
      submitting: false
    }
  },
  methods: {
    onTypeChange(e) {
      this.formData.vendorType = this.vendorTypes[e.detail.value].value
    },
    getTypeLabel(value) {
      const item = this.vendorTypes.find(t => t.value === value)
      return item ? item.label : value
    },
    async handleSubmit() {
      this.submitting = true
      try {
        const res = await vendorApply({
          vendorType: this.formData.vendorType,
          vendorInfo: this.formData.vendorInfo
        })
        uni.showToast({ title: '提交成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (e) {
        // api.js already shows error toast
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background: #f8f8f8;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  font-size: 26rpx;
  color: #999;
  margin-top: 10rpx;
  display: block;
}
.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}
.picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #eee;
}
.placeholder {
  color: #ccc;
}
.arrow {
  color: #ccc;
  font-size: 36rpx;
}
.textarea {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #eee;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.counter {
  display: block;
  text-align: right;
  font-size: 24rpx;
  color: #ccc;
  margin-top: 10rpx;
}
.btn-submit {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}
.btn-submit[disabled] {
  opacity: 0.5;
}
</style>