注册页面重构

src/views/home/components/addPhoto.vue

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

src/views/home/index.vue

@@ -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>
-        </div> -->
-        <div class="info-card flex-container">
-            <add-photo @changePhoto="changePhoto" @readyHandle='readyHandle'></add-photo>
-            <van-form class="form">
+        <div class="top-brand-wrap">
+            <h1 class="title">注册</h1>
+        </div>
+        <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
             }
         }