cfc/cfc-frontend/pages/nutritionist/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>
        <textarea class="textarea" v-model="formData.qualification" placeholder="请说明您的营养师资质、从业经验等" maxlength="500" />
        <text class="counter">{{ formData.qualification.length }}/500</text>
      </view>

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

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

export default {
  data() {
    return {
      formData: {
        realName: '',
        phone: '',
        qualification: ''
      },
      submitting: false
    }
  },
  methods: {
    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 nutritionistApply(this.formData)
        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;
}
.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>