注册页面重构
This commit is contained in:
skywt2003
parent
1996d90a67
commit
db6e59df25
|
|
@ -1,185 +0,0 @@
|
|||
<template>
|
||||
<div class="addPhoto-wrap">
|
||||
<div class="main-wrap">
|
||||
<!-- <div class="img-title">
|
||||
<span>请上传人脸照片</span>
|
||||
</div> -->
|
||||
<div class="main">
|
||||
<div class="img-item" >
|
||||
<div class="template-wrap">
|
||||
<!-- 使用背景图展示 -->
|
||||
<!-- <div class="imgs" :style="{backgroundImage:`url(${photo.url})`}"></div> -->
|
||||
<!-- 用image组件展示 -->
|
||||
<div class="img-wrap">
|
||||
<van-image
|
||||
v-show="photo"
|
||||
class="imgs"
|
||||
fit="contain"
|
||||
:src="photo"
|
||||
/>
|
||||
|
||||
<div class="temp" v-show="!photo" >
|
||||
<!-- <img class="cameraIcon" src="@/assets/image/camera-icon.png" alt=""> -->
|
||||
<svg class="cameraIcon" viewBox="0 0 24 24"><path fill="currentColor" d="M20,4H16.83L15,2H9L7.17,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H8.05L9.88,4H14.12L15.95,6H20V18M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15Z" /></svg>
|
||||
<span>头像上传</span>
|
||||
</div>
|
||||
</div>
|
||||
<input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*">
|
||||
<!-- <input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*"> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用来放添加按钮 -->
|
||||
<!-- <div class="img-item" v-show="!photo.url">
|
||||
<div class="template-wrap">
|
||||
<input :key="isKey" @change="onChange($event)" id="myInput" ref="myInput" type="file" accept="image/*" capture="camera">
|
||||
<div class="img-wrap">
|
||||
<div class="temp">
|
||||
<img class="cameraIcon" src="@/assets/image/camera-icon.png" alt="">
|
||||
<span>头像上传</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JudgeCompress, RotateImage, CheckFile, FiletoDataURL } from '@/utils/handleImage'
|
||||
import { Image } from 'vant'
|
||||
|
||||
|
||||
export default {
|
||||
name:'AddPhoto',
|
||||
// props:{
|
||||
// photo:Object,
|
||||
// },
|
||||
components:{
|
||||
[Image.name]:Image,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isKey:0,
|
||||
compressSize:100,
|
||||
photo:'',
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChange(e) {
|
||||
if(!e.target.files[0]){ //用户可能取消选择，此时啥都不用做
|
||||
return
|
||||
}
|
||||
this.$emit('readyHandle') //告诉父级已经开始处理.
|
||||
this.photo = ''
|
||||
let file = e.target.files[0];
|
||||
let _this = this
|
||||
if(file){
|
||||
var imageFile = CheckFile(file);
|
||||
if(!imageFile){
|
||||
this.$Toast.error('文件格式错误！')
|
||||
return
|
||||
}else{
|
||||
RotateImage(imageFile).then(res =>{ //传入文件，旋转后返回文件进行压缩
|
||||
JudgeCompress(res,this.compressSize,0.95).then(res => { //传入文件，压缩返回压缩后的文件
|
||||
FiletoDataURL(res).then(res => { //传入文件，返回base64 DataURL
|
||||
_this.photo = res
|
||||
_this.$emit('changePhoto', res)
|
||||
_this.isKey = (new Date()).getTime() //修改key以防止重新选择同一张图不触发change
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.addPhoto-wrap
|
||||
width 100%
|
||||
position relative
|
||||
z-index 999
|
||||
.main-wrap
|
||||
width 100%
|
||||
padding 0
|
||||
box-sizing border-box
|
||||
.img-title
|
||||
// background rgb(64,158,255)
|
||||
padding 10px
|
||||
text-align center
|
||||
font-size 14px
|
||||
align-items center
|
||||
color black
|
||||
padding-left 5px
|
||||
.main
|
||||
width 100%
|
||||
box-sizing border-box
|
||||
padding 40px 5px
|
||||
display flex
|
||||
justify-content center
|
||||
.img-item
|
||||
width 50%
|
||||
height 0
|
||||
padding-bottom 50%
|
||||
position relative
|
||||
overflow hidden
|
||||
box-sizing border-box
|
||||
display inline-block
|
||||
.template-wrap
|
||||
box-sizing border-box
|
||||
position absolute
|
||||
overflow hidden
|
||||
bottom 5px
|
||||
top 5px
|
||||
left 5px
|
||||
overflow hidden
|
||||
right 5px
|
||||
// background rgba(0,133,208,0.7)
|
||||
padding 5px
|
||||
.img-wrap
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100%
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.imgs
|
||||
width 100%
|
||||
height 100%
|
||||
.temp
|
||||
position absolute
|
||||
top 5px
|
||||
bottom 5px
|
||||
left 5px
|
||||
right 5px
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
position absolute
|
||||
left 50%
|
||||
top 50%
|
||||
transform translate(-50%, -50%)
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
span
|
||||
color black
|
||||
margin-top 10px
|
||||
font-size 14px
|
||||
.cameraIcon
|
||||
width 60px
|
||||
height 60px
|
||||
color black
|
||||
#myInput
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
z-index 500
|
||||
display inline-block
|
||||
opacity 0
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
</style>
|
||||
|
|
@ -3,89 +3,106 @@
|
|||
<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 class="top-brand-wrap">
|
||||
<h1 class="title">注册</h1>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="info-card flex-container">
|
||||
<add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo>
|
||||
<van-form class="form">
|
||||
<div class="card flex-container">
|
||||
<!-- <add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo> -->
|
||||
<van-form>
|
||||
<van-cell-group inset>
|
||||
<van-field required name="uploader" label="照片">
|
||||
<template #input>
|
||||
<van-uploader v-model="photoList" :after-read="readyHandle" :max-count="1" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field required v-model="formData.Name" name="姓名" label="姓名" clearable placeholder="请输入姓名" />
|
||||
<van-field required type='number' v-model="formData.Phone" name="手机号" label="手机号" clearable placeholder="请输入手机号" />
|
||||
</van-cell-group>
|
||||
<van-button type="primary" block round @click="onSubmit">提交</van-button>
|
||||
</van-form>
|
||||
<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'
|
||||
import { Form, Field, CellGroup, Dialog, Toast, Button, Uploader } from 'vant'
|
||||
import { JudgeCompress, RotateImage, CheckFile, FiletoDataURL } from '@/utils/handleImage'
|
||||
import { Runnerverify } from 'api/home'
|
||||
|
||||
export default {
|
||||
name:'Home',
|
||||
name: 'Home',
|
||||
components:{
|
||||
addPhoto,
|
||||
[Field.name]:Field,
|
||||
[Dialog.name]:Dialog
|
||||
[Form.name]: Form,
|
||||
[Field.name]: Field,
|
||||
[Dialog.name]: Dialog,
|
||||
[Toast.name]: Toast,
|
||||
[CellGroup.name]: CellGroup,
|
||||
[Button.name]: Button,
|
||||
[Uploader.name]: Uploader
|
||||
},
|
||||
activated(){
|
||||
|
||||
},
|
||||
watch:{
|
||||
watch: {
|
||||
Code(val){
|
||||
sessionStorage.Code = val
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
photo:'',
|
||||
formData:{
|
||||
Name:'',
|
||||
Phone:'',
|
||||
Code:''
|
||||
photo: '',
|
||||
formData: {
|
||||
Name: '',
|
||||
Phone: '',
|
||||
Code: ''
|
||||
},
|
||||
Code:null, //存入本地的code
|
||||
Code: null,
|
||||
photoList: []
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changePhoto(imgBase64){
|
||||
this.photo = imgBase64
|
||||
this.$Loading.hidden()
|
||||
},
|
||||
readyHandle(){
|
||||
this.$Loading.show('正在处理图片...')
|
||||
methods: {
|
||||
readyHandle(file) {
|
||||
let _this = this
|
||||
if (file.file){
|
||||
var imageFile = CheckFile(file.file)
|
||||
if (!imageFile){
|
||||
Toast.fail('图片文件格式错误！')
|
||||
return
|
||||
} else {
|
||||
RotateImage(imageFile).then(res => { //传入文件，旋转后返回文件进行压缩
|
||||
JudgeCompress(res, this.compressSize,0.95).then(res => { //传入文件，压缩返回压缩后的文件
|
||||
FiletoDataURL(res).then(res => { //传入文件，返回base64 DataURL
|
||||
_this.photo = res
|
||||
_this.photoList = [{url: res, isImage: true}]
|
||||
})
|
||||
})
|
||||
})
|
||||
Toast.success('上传成功')
|
||||
}
|
||||
}
|
||||
},
|
||||
onSubmit(){
|
||||
if(this.verifyForm()){
|
||||
if (this.verifyForm()){
|
||||
let data = {
|
||||
Name: this.formData.Name,
|
||||
facePic: this.photo,
|
||||
Phone:this.formData.Phone
|
||||
Phone: this.formData.Phone
|
||||
}
|
||||
this.$Loading.show('正在注册...')
|
||||
Toast.loading({
|
||||
message: '正在注册……',
|
||||
forbidClick: true,
|
||||
});
|
||||
Runnerverify(data).then(res => {
|
||||
if(res.code === 0){
|
||||
this.$Toast.success('注册成功！')
|
||||
if (res.code === 0){
|
||||
Toast.success('注册成功！')
|
||||
this.$router.push('/photos')
|
||||
localStorage.images = JSON.stringify(res.data)
|
||||
}else if(res.code === 2004){ //号码已被使用
|
||||
} else if (res.code === 2004){ //号码已被使用
|
||||
Dialog.alert({
|
||||
title: '温馨提示',
|
||||
message: '号码已被占用，请使用新的手机号码进行注册！'
|
||||
title: '提示',
|
||||
message: '号码已注册。请使用新的手机号码进行注册，或使用此号码登录。'
|
||||
});
|
||||
}else if(res.code == 2021){ //如果返回没有照片则提示用户
|
||||
} else if (res.code === 2021){ //如果返回没有照片则提示用户
|
||||
localStorage.images = []
|
||||
this.$router.push({
|
||||
path:'/photos',
|
||||
|
|
@ -93,29 +110,27 @@ export default {
|
|||
type:'hintPage'
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.$Toast.error('注册失败：' + res.msg)
|
||||
} else {
|
||||
Toast.fail('注册失败：' + res.msg)
|
||||
}
|
||||
this.$Loading.hidden()
|
||||
Toast.clear()
|
||||
}).catch(err => {
|
||||
this.$Loading.hidden()
|
||||
Toast.fail('错误：' + err)
|
||||
Toast.clear()
|
||||
})
|
||||
}
|
||||
},
|
||||
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('请上传人脸照片！')
|
||||
verifyForm(){
|
||||
if (!this.photo){
|
||||
Toast.fail('请上传人脸照片！')
|
||||
return
|
||||
}else if(!NameFlag){
|
||||
this.$Toast.error('请填写姓名！')
|
||||
} else if (!this.formData.Name.length){
|
||||
Toast.fail('请填写姓名！')
|
||||
return
|
||||
}else if(this.formData.Phone.length !== 11){
|
||||
this.$Toast.error('请填写正确的手机号码！')
|
||||
} else if (this.formData.Phone.length !== 11){
|
||||
Toast.fail('请填写正确的手机号码！')
|
||||
return
|
||||
}else{
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue