cfc/cfc-frontend/pages/guide/register/index.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.inviteCode" 
          placeholder="输入邀请码可关联上级成长规划师"
          @blur="validateInviteCode"
        />
        <text class="hint" v-if="inviteCodeInfo">关联成长规划师：{{ inviteCodeInfo.guideName }}</text>
      </view>

      <!-- 真实姓名 -->
      <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>
        <input 
          class="input" 
          v-model="formData.idCard" 
          placeholder="请输入身份证号"
          maxlength="18"
        />
      </view>

      <!-- 地址 -->
      <view class="form-item">
        <text class="label">联系地址</text>
        <input 
          class="input" 
          v-model="formData.address" 
          placeholder="请输入联系地址"
        />
      </view>

      <!-- 银行卡号（选填） -->
      <view class="form-item">
        <text class="label">银行卡号 <text class="optional">（选填，用于佣金结算）</text></text>
        <input 
          class="input" 
          v-model="formData.bankCard" 
          placeholder="请输入银行卡号"
          maxlength="30"
        />
      </view>

      <!-- 开户行（选填） -->
      <view class="form-item">
        <text class="label">开户行 <text class="optional">（选填）</text></text>
        <input 
          class="input" 
          v-model="formData.bankName" 
          placeholder="请输入开户行名称，如：中国工商银行广州天河支行"
        />
      </view>

      <!-- 成长规划师认证信息（选填） -->
      <view class="section-divider">
        <text class="divider-text">成长规划师认证信息（选填）</text>
      </view>

      <!-- 成长规划师证书号 -->
      <view class="form-item">
        <text class="label">成长规划师证书号 <text class="optional">（选填）</text></text>
        <input 
          class="input" 
          v-model="formData.teacherNo" 
          placeholder="如有成长规划师证书，请填写证书号"
        />
      </view>

      <!-- 成长规划师照片 -->
      <view class="form-item">
        <text class="label">成长规划师照片 <text class="optional">（选填）</text></text>
        <view class="upload-section">
          <image 
            v-if="formData.teacherPhoto" 
            :src="formData.teacherPhoto" 
            class="preview-image"
            @click="chooseImage('teacherPhoto')"
          />
          <view v-else class="upload-placeholder" @click="chooseImage('teacherPhoto')">
            <text class="upload-icon">📷</text>
            <text class="upload-text">上传照片</text>
          </view>
        </view>
      </view>

      <!-- 证书照片 -->
      <view class="form-item">
        <text class="label">证书照片 <text class="optional">（选填）</text></text>
        <view class="upload-section">
          <image 
            v-if="formData.certificateImage" 
            :src="formData.certificateImage" 
            class="preview-image"
            @click="chooseImage('certificateImage')"
          />
          <view v-else class="upload-placeholder" @click="chooseImage('certificateImage')">
            <text class="upload-icon">📷</text>
            <text class="upload-text">上传证书</text>
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button class="btn-submit" @click="submit">提交申请</button>
    </view>
  </view>
</template>

<script>
import { registerGuide, validateInviteCode } from '../../../utils/api.js'

export default {
  data() {
    return {
      formData: {
        inviteCode: '',
        realName: '',
        phone: '',
        idCard: '',
        address: '',
        bankCard: '',
        bankName: '',
        teacherNo: '',
        teacherPhoto: '',
        certificateImage: ''
      },
      inviteCodeInfo: null
    }
  },
  onLoad(options) {
    // 如果有邀请码参数，自动填充
    if (options.inviteCode) {
      this.formData.inviteCode = options.inviteCode
      this.validateInviteCode()
    }
  },
  methods: {
    async validateInviteCode() {
      if (!this.formData.inviteCode) {
        this.inviteCodeInfo = null
        return
      }

      try {
        const res = await validateInviteCode(this.formData.inviteCode)
        if (res.code === 200) {
          this.inviteCodeInfo = res.data
          uni.showToast({
            title: '邀请码有效',
            icon: 'success'
          })
        } else {
          this.inviteCodeInfo = null
          uni.showToast({
            title: '邀请码无效',
            icon: 'none'
          })
        }
      } catch (e) {
        this.inviteCodeInfo = null
        uni.showToast({
          title: '验证失败',
          icon: 'none'
        })
      }
    },

    chooseImage(field) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0]
          this.uploadImage(field, tempFilePath)
        }
      })
    },

    uploadImage(field, filePath) {
      uni.showLoading({ title: '上传中...' })
      
      // TODO: 实际应该上传到服务器
      // 这里简化处理，直接使用本地路径
      setTimeout(() => {
        this.formData[field] = filePath
        uni.hideLoading()
        uni.showToast({
          title: '上传成功',
          icon: 'success'
        })
      }, 1000)
    },

    async submit() {
      // 验证表单
      if (!this.formData.realName) {
        uni.showToast({ title: '请输入真实姓名', icon: 'none' })
        return
      }

      if (!this.formData.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }

      if (!this.formData.idCard) {
        uni.showToast({ title: '请输入身份证号', icon: 'none' })
        return
      }

      try {
        uni.showLoading({ title: '提交中...' })
        
        const userId = uni.getStorageSync('userId')
        const res = await registerGuide({
          userId: userId,
          ...this.formData
        })

        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'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.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;
}

.hint {
  font-size: 24rpx;
  color: #F97316;
  margin-top: 10rpx;
  display: block;
}

.optional {
  font-size: 24rpx;
  color: #999;
  font-weight: normal;
}

.section-divider {
  margin: 20rpx 0 30rpx;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.divider-text {
  font-size: 26rpx;
  color: #999;
}

.upload-section {
  display: flex;
  align-items: center;
}

.preview-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.upload-placeholder {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #E0E0E0;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F8F8F8;
}

.upload-icon {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.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;
}
</style>