123 lines
4.6 KiB
Vue
123 lines
4.6 KiB
Vue
<template>
|
|
<div class='home-wrap'>
|
|
<div class="background-wrap">
|
|
<img class="background-image" src="@/assets/image/track.jpg" />
|
|
</div>
|
|
<!-- <div class="top-bgimg-wrap">
|
|
<img class="top-img" src="@/assets/image/bgimg-top.png"/>
|
|
<div class="logo-wrap">
|
|
<img class="yidong-img" src="@/assets/image/yidong.png"/>
|
|
<img class="fiveG-img" src="@/assets/image/5g.png"/>
|
|
</div>
|
|
</div> -->
|
|
<div class="info-card flex-container">
|
|
<add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo>
|
|
<div class="form">
|
|
<van-field required v-model="formData.Name" clearable placeholder="请输入姓名" />
|
|
<van-field required type='number' v-model="formData.Phone" clearable placeholder="请输入手机号" />
|
|
<!-- <van-field required type='text' v-model="formData.Code" clearable placeholder="请输入参赛编号" /> -->
|
|
</div>
|
|
<div class="button" @click="onSubmit">提交</div>
|
|
</div>
|
|
<!-- <div class="hint">
|
|
温馨提示：请使用只包含本人正面头像的清晰照片进行注册
|
|
</div> -->
|
|
<!-- <img class="bottom-img" src="@/assets/image/bgimg-bottom.png" alt=""> -->
|
|
<!-- <van-image-preview v-model="showPreview" :images="images"> </van-image-preview> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import addPhoto from "./components/addPhoto"
|
|
import { Field, Dialog } from 'vant';
|
|
import { Runnerverify} from 'api/home'
|
|
|
|
export default {
|
|
name:'Home',
|
|
components:{
|
|
addPhoto,
|
|
[Field.name]:Field,
|
|
[Dialog.name]:Dialog
|
|
},
|
|
activated(){
|
|
|
|
},
|
|
watch:{
|
|
Code(val){
|
|
sessionStorage.Code = val
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
photo:'',
|
|
formData:{
|
|
Name:'',
|
|
Phone:'',
|
|
Code:''
|
|
},
|
|
Code:null, //存入本地的code
|
|
}
|
|
},
|
|
methods:{
|
|
changePhoto(imgBase64){
|
|
this.photo = imgBase64
|
|
this.$Loading.hidden()
|
|
},
|
|
readyHandle(){
|
|
this.$Loading.show('正在处理图片...')
|
|
},
|
|
onSubmit(){
|
|
if(this.verifyForm()){
|
|
let data = {
|
|
Name: this.formData.Name,
|
|
facePic: this.photo,
|
|
Phone:this.formData.Phone
|
|
}
|
|
this.$Loading.show('正在注册...')
|
|
Runnerverify(data).then(res => {
|
|
if(res.code === 0){
|
|
this.$Toast.success('注册成功！')
|
|
this.$router.push('/photos')
|
|
localStorage.images = JSON.stringify(res.data)
|
|
}else if(res.code === 2004){ //号码已被使用
|
|
Dialog.alert({
|
|
title: '温馨提示',
|
|
message: '号码已被占用，请使用新的手机号码进行注册！'
|
|
});
|
|
}else if(res.code == 2021){ //如果返回没有照片则提示用户
|
|
localStorage.images = []
|
|
this.$router.push({
|
|
path:'/photos',
|
|
query:{
|
|
type:'hintPage'
|
|
}
|
|
})
|
|
}else{
|
|
this.$Toast.error('注册失败：' + res.msg)
|
|
}
|
|
this.$Loading.hidden()
|
|
}).catch(err => {
|
|
this.$Loading.hidden()
|
|
})
|
|
}
|
|
},
|
|
verifyForm(){ //表单校验
|
|
// let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/;
|
|
// let IDcardFlag = idcardReg.test(this.formData.IDcard) ? true : false;
|
|
let NameFlag = this.formData.Name.length && this.formData.Name.length > 0 ? true : false
|
|
if(!this.photo){
|
|
this.$Toast.error('请上传人脸照片！')
|
|
return
|
|
}else if(!NameFlag){
|
|
this.$Toast.error('请填写姓名！')
|
|
return
|
|
}else if(this.formData.Phone.length !== 11){
|
|
this.$Toast.error('请填写正确的手机号码！')
|
|
return
|
|
}else{
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |