cfc/cfc-frontend/pages/butler/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>
        <input class="input" v-model="formData.realName" placeholder="请输入真实姓名" />
      </view>

      <view class="form-item">
        <text class="label">手机号</text>
        <input class="input" v-model="formData.phone" type="number" placeholder="请输入手机号" maxlength="11" />
      </view>

      <view class="form-item">
        <text class="label">管家等级</text>
        <picker mode="selector" :range="tiers" range-key="label" @change="onTierChange">
          <view class="picker">
            <text v-if="formData.tier">{{ getTierLabel(formData.tier) }}</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.description" placeholder="请说明您的管家资质、从业经验等" maxlength="500" />
        <text class="counter">{{ formData.description.length }}/500</text>
      </view>

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

<script>
import { butlerApply } from '@/utils/api'

export default {
  data() {
    return {
      tiers: [
        { value: 'bronze', label: '青铜管家' },
        { value: 'silver', label: '白银管家' },
        { value: 'gold', label: '黄金管家' },
        { value: 'platinum', label: '铂金管家' }
      ],
      formData: {
        realName: '',
        phone: '',
        tier: '',
        description: ''
      },
      submitting: false
    }
  },
  methods: {
    onTierChange(e) {
      this.formData.tier = this.tiers[e.detail.value].value
    },
    getTierLabel(value) {
      const item = this.tiers.find(t => t.value === value)
      return item ? item.label : value
    },
    async handleSubmit() {
      if (!this.formData.realName) {
        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
        return
      }
      if (!this.formData.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }
      this.submitting = true
      try {
        const res = await butlerApply({
          tier: this.formData.tier,
          description: this.formData.description
        })
        if (res.code === 200) {
          uni.showModal({
            title: '申请成功',
            content: '您的管家申请已提交，请等待审核',
            showCancel: false,
            success: () => uni.navigateBack()
          })
        } else {
          uni.showToast({ title: res.message || '提交失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '提交失败', icon: 'none' })
      } 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: 28rpx;
  color: #666;
  margin-top: 16rpx;
  display: block;
}
.form {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}
.form-item {
  margin-bottom: 40rpx;
}
.label {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
  font-weight: bold;
}
.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.placeholder {
  color: #999;
}
.arrow {
  font-size: 32rpx;
  color: #999;
}
.textarea {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  display: block;
  margin-top: 10rpx;
}
.btn-submit {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
}
.btn-submit[disabled] {
  opacity: 0.6;
}
</style>