1
0
Fork 0

注册页面重构

This commit is contained in:
skywt2003 2022-05-26 15:08:59 +08:00
parent 1996d90a67
commit db6e59df25
2 changed files with 76 additions and 246 deletions

View File

@ -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() //keychange
})
})
})
}
}
},
}
}
</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>

View File

@ -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
}
}