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>