caremate/train-frontend/pages/verify/index.vue

<template>
  <view class="verify-page">
    <view class="page-header">
      <text class="page-title">校友身份校验</text>
      <text class="page-desc">请填写您的真实信息以完成身份校验</text>
    </view>
    <view class="form-card">
      <view class="form-item">
        <text class="form-label">姓名 <text class="required">*</text></text>
        <input class="form-input" v-model="form.name" placeholder="请输入真实姓名" />
        <text class="form-error" v-if="errors.name">{{ errors.name }}</text>
      </view>
      <view class="form-item">
        <text class="form-label">手机号 <text class="required">*</text></text>
        <input class="form-input" v-model="form.phone" type="number" placeholder="请输入手机号" maxlength="11" />
        <text class="form-error" v-if="errors.phone">{{ errors.phone }}</text>
      </view>
      <view class="form-item">
        <text class="form-label">届别</text>
        <input class="form-input" v-model="form.grade" placeholder="如：2018届" />
      </view>
      <view class="form-item">
        <text class="form-label">院系</text>
        <input class="form-input" v-model="form.department" placeholder="如：管理学院" />
      </view>
      <view class="form-item">
        <text class="form-label">邀请码</text>
        <input class="form-input" v-model="form.inviteCode" placeholder="如有邀请码请填写" />
      </view>
      <view class="form-item">
        <text class="form-label">所在城市</text>
        <input class="form-input" v-model="form.city" placeholder="如：深圳" />
      </view>
      <view class="form-item">
        <text class="form-label">家庭结构</text>
        <input class="form-input" v-model="form.familyStruct" placeholder="如：三口之家" />
      </view>
      <view class="form-item">
        <text class="form-label">关注书籍</text>
        <input class="form-input" v-model="form.concernBook" placeholder="如：穷爸爸富爸爸" />
      </view>
      <text class="form-error" v-if="errors.idField">{{ errors.idField }}</text>
    </view>
    <button class="submit-btn" @click="handleSubmit" :loading="loading" :disabled="loading">提交校验</button>
  </view>
</template>

<script>
import { alumniVerify } from '@/utils/api.js'

export default {
  data() {
    return {
      loading: false,
      form: {
        name: '',
        phone: '',
        grade: '',
        department: '',
        inviteCode: '',
        city: '',
        familyStruct: '',
        concernBook: ''
      },
      errors: {
        name: '',
        phone: '',
        idField: ''
      }
    }
  },
  onLoad() {
    // 登录时微信手机号一键授权获取的号码，自动预填，免手输
    var phone = this.$store.state.phone || uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').phone || ''
    if (phone) {
      this.form.phone = phone
    }
  },
  methods: {
    validate() {
      this.errors = { name: '', phone: '', idField: '' }
      var valid = true
      if (!this.form.name.trim()) {
        this.errors.name = '请输入姓名'
        valid = false
      }
      if (!this.form.phone.trim()) {
        this.errors.phone = '请输入手机号'
        valid = false
      } else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
        this.errors.phone = '手机号格式不正确'
        valid = false
      }
      if (!this.form.grade && !this.form.department && !this.form.inviteCode) {
        this.errors.idField = '请至少提供届别/院系/邀请码中的一项'
        valid = false
      }
      return valid
    },
    handleSubmit() {
      if (!this.validate()) return
      if (this.loading) return
      this.loading = true
      var self = this
      alumniVerify(this.form).then(function(resp) {
        if (resp.data === true) {
          self.$store.commit('setAlumniVerify', 'accepted')
          uni.showToast({ title: '校验通过', icon: 'success' })
          setTimeout(function() {
            if (!self.$store.state.classId) {
              uni.redirectTo({ url: '/pages/class/index' })
            } else {
              uni.switchTab({ url: '/pages/index/index' })
            }
          }, 800)
        } else {
          uni.showToast({ title: '校验未通过，请核实信息', icon: 'none' })
        }
      }).catch(function(err) {
        console.error('校验失败', err)
      }).finally(function() {
        self.loading = false
      })
    }
  }
}
</script>

<style scoped>
.verify-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding: 32rpx;
}
.page-header {
  margin-bottom: 40rpx;
}
.page-title {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 12rpx;
}
.page-desc {
  display: block;
  font-size: 26rpx;
  color: #64748B;
}
.form-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}
.form-item {
  margin-bottom: 28rpx;
}
.form-label {
  display: block;
  font-size: 28rpx;
  color: #1E293B;
  font-weight: 500;
  margin-bottom: 12rpx;
}
.required {
  color: #EF5350;
}
.form-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #1E293B;
  background: #F8FAFC;
}
.form-error {
  display: block;
  font-size: 24rpx;
  color: #EF5350;
  margin-top: 8rpx;
}
.submit-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: #F97316;
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
}
.submit-btn:active {
  opacity: 0.85;
}
</style>