szugift-fe/sourcecode/h5app/vue/src/views/SecurityVerify.vue

<template>
    <div>
        <nav-bar path="index" title="身份验证"/>
        <div class='card'>
            <h3><strong>个人资料</strong></h3>
            <van-cell-group :border="false">
                <van-field
                        v-model="phone"
                        required
                        clearable
                        label="手机号"
                        placeholder="请输入手机号"
                        :error="phoneError"
                        @click="phoneError=false"
                />
                <!--<van-field-->
                <!--v-model="sms"-->
                <!--center-->
                <!--clearable-->
                <!--label="短信验证码"-->
                <!--placeholder="请输入短信验证码"-->
                <!--required-->
                <!--disabled-->
                <!--&gt;-->
                <!--<van-button slot="button" size="small" type="primary">发送验证码</van-button>-->
                <!--</van-field>-->

                <van-field
                        v-model="username"
                        required
                        clearable
                        label="昵称"
                        placeholder="请输入昵称"
                        maxlength="12"
                        :error="usernameError"
                        @click="usernameError=false"
                />
                <van-field
                        v-model="wechat"
                        required
                        clearable
                        label="微信号"
                        placeholder="请输入微信号"
                        maxlength="20"
                        :error="wechatError"
                        @click="wechatError=false"
                />
            </van-cell-group>

            <p>性别</p>
            <van-radio-group v-model="radio">
                <van-radio name="1" checked-color="#fd6740" style="float: left; margin-right: 20px">男</van-radio>
                <van-radio name="2" checked-color="#fd6740">女</van-radio>
            </van-radio-group>

            <p>宿舍区</p>
            <van-button size="large" @click="show = true">{{dormitory}}</van-button>
            <van-actionsheet
                    v-model="show"
                    :actions="actions"
                    cancel-text="取消"
                    @select="onSelect"
            />
        </div>

        <div class="card" style="margin-bottom: 10px">
            <p>上传校卡照片</p>
            <div style="margin-bottom: 10px">
                <add-photo @onRead="onRead"/>
            </div>
            <p>活动仅允许深大学生参与，请上传正面校卡照片审核~</p>
        </div>

        <van-button
                class="submit_button"
                type="primary"
                @click="next"
                :loading="loading"
        >下一步
        </van-button>
    </div>
</template>

<script>
    import {BasicFunction} from "../connector/basic-service";
    import NavBar from '../components/navBar';
    import {
        Uploader, Icon,
        CellGroup, Field,
        RadioGroup, Radio,
        Picker,
        Button,
        Actionsheet,
        Toast
    } from 'vant';
    import AddPhoto from "../components/addPhoto";
    export default {
        name: "SecurityVerify",
        components: {
            AddPhoto,
            NavBar,
            [Uploader.name]: Uploader, [Icon.name]: Icon,
            [CellGroup.name]: CellGroup, [Field.name]: Field,
            [RadioGroup.name]: RadioGroup, [Radio.name]: Radio,
            [Picker.name]: Picker,
            [Button.name]: Button,
            [Actionsheet.name]: Actionsheet
        },
        data() {
            return {
                phone: '',
                phoneError: false,
                sms: '',
                username: '',
                usernameError: false,
                wechat: '',
                wechatError: false,
                radio: '1',
                show: false,
                dormitory: '点击选择宿舍区',
                dorId: -1,
                actions: [
                    {id: 0, name: '斋区'},
                    {id: 1, name: '西南'},
                    {id: 2, name: '南区'},
                    {id: 3, name: '桂庙'},
                    {id: 4, name: '西丽'},
                ],
                photo: null,
                loading: false,
                userDo : {},
                identityDo : {},
                identityUpload : false,
                userUpload : false
            };
        },
        methods: {
            next() {
                Toast.loading({
                    mask: true,
                    message: '此过程大约需要15s，你的校卡正在拼命上传，请耐心等待...',
                    duration: 20000
                });
                this.loading = true;
                // 检查输入
                if (this.phone.length !== 11) {
                    Toast.fail("请输入11位手机号");
                    this.phoneError = true;
                    this.loading = false;
                    return;
                } else if (!isNumber(this.phone)) {
                    Toast.fail("请输入正确格式的手机号");
                    this.phoneError = true;
                    this.loading = false;
                    return;
                } else if (isEmojiCharacter(this.username)) {
                    Toast.fail('不支持表情哦');
                    this.usernameError = true;
                    this.loading = false;
                    return;
                } else if (this.username.length < 1) {
                    Toast.fail('请输入昵称');
                    this.usernameError = true;
                    this.loading = false;
                    return;
                } else if (isEmojiCharacter(this.wechat) || this.wechat.length < 6) {
                    this.wechatError = true;
                    Toast.fail('请输入正确格式的微信号');
                    this.loading = false;
                    return;
                } else if (this.dorId === -1) {
                    Toast.fail('请选择宿舍区');
                    this.loading = false;
                    return;
                } else if (this.photo === null) {
                    Toast.fail('请上传校卡正面照片');
                    this.loading = false;
                    return;
                }

                let that = this;
                // console.log('------- photo -------');
                // console.log(this.photo);
                this.updateInfo(null);
                // let fileObj = this.photo;
                let formData = new FormData();


                // if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传
                //     photoCompress(fileObj, {
                //         quality: 0.2
                //     }, function(base64Codes){
                //         //console.log("压缩后：" + base.length / 1024 + " " + base);
                //         var bl = convertBase64UrlToBlob(base64Codes);
                //         formData.append('file', fileObj);
                //         console.log(formData);
                //         formData.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
                //         console.log(formData);
                //     });
                // }else { //小于等于1M 原图上传
                //     formData.append('file', this.photo);
                // }

                BasicFunction.get_data("fileserver/upload?sign=abcdefg", function (res) {
                    try {
                        let imgURL = res.model;
                        if (res.ret === '10000') {
                            that.updateInfo(imgURL);
                        } else {
                            Toast.fail('上传图片失败，请检查网络');
                            that.loading = false;
                        }
                    } catch (e) {
                        console.warn(e);
                        Toast.fail('上传图片失败，请检查网络');
                        that.loading = false;
                    }
                }, formData);
            },
            updateInfo(image){
                let userId = localStorage.getItem('frontend-userid');
                let that = this;
                let useridentity = that.identityDo;
                useridentity.userWxAccount = that.wechat;
                useridentity.dormDistrict = that.dorId;
                useridentity.userSex = parseInt(that.radio);
                if(image != null){
                    useridentity.userSchoolCardPic = image;
                }
                let beforeImage = image;
                useridentity.userSchoolCardPic = image;
                useridentity.userReviewStatus = 100;
                useridentity.reviewerNote = "等待审核";
                useridentity.reviewerNoteToUser = "等待审核";
                BasicFunction.get_data("smartIdentity/updateBatch", function (response) {
                    // console.log(useridentity);
                    // console.log(response);
                    if (response.ret === "10000") {
                        // console.log('----- User Info -----');
                        if(beforeImage != null) {
                            that.identityUpload = true;
                            if (that.userUpload == true) {
                                Toast.success("注册成功");
                                that.$router.push('presentRegister');
                                return;
                            }
                        }
                    } else {
                        Toast.fail("注册失败，请检查网络");
                        that.loading = false;
                    }
                }, [useridentity]);

                let user = that.userDo;
                user.name = that.username;
                user.phone = that.phone;
                // console.log('----- Update User Info -----');
                // console.log(user);
                BasicFunction.get_data('smartUsers/updateBatch', function (res) {
                    // console.log(res);
                    if (res !== undefined && res.ret === '10000') {
                        that.userUpload = true;
                        if(that.identityUpload == true && beforeImage != null) {
                            Toast.success("注册成功");
                            that.$router.push('presentRegister');
                            return;
                        }
                    } else {
                        Toast.fail('注册失败，请稍后再试');
                        that.loading = false;
                    }
                }, [user]);
            },
            onSelect(item) {
                // 点击选项时默认不会关闭菜单，可以手动关闭
                this.show = false;
                this.dormitory = item.name;
                this.dorId = item.id;
            },
            onRead(e) {
                this.photo = e;
            }
        },
        created: function () {
            let userId = localStorage.getItem('frontend-userid');
            let that = this;
            if(userId == null || userId === undefined){
                this.$router.push('login');
                return;
            }
            BasicFunction.get_data('smartUsers/list?uid=' + userId, function (res) {
                if (res.ret === '10000') {
                    if(res.model === undefined || res.model == null || res.model.list == undefined || res.model.list.length <= 0){
                        localStorage.removeItem('frontend-userid');
                        that.$router.push('login');
                        return;
                    }
                    if (res.model.list[0].phone != null && res.model.list[0].phone.length !== 0) {
                        that.$router.push('presentRegister');
                        return;
                    }
                    that.userDo = res.model.list[0];
                }
            }, {});
            BasicFunction.get_data("smartIdentity/list?userId=" + userId, function (res) {
                try {
                    if (res.ret === '10000' && res.model !== undefined && res.model.list !== undefined && res.model.list.length > 0) {
                        that.identityDo = res.model.list[0];
                    } else {
                        localStorage.removeItem('frontend-userid');
                        that.loading = false;
                        that.$router.push('login');
                    }
                } catch (e) {
                    console.warn(e);
                    Toast.fail('获取信息缓慢，请检查网络或等一会再试吧！');
                    localStorage.removeItem('frontend-userid');
                    that.loading = false;
                    that.$router.push('login');
                }
            }, {});
        }
    }

    // 判断是否有emoji
    function isEmojiCharacter(substring) {
        for (var i = 0; i < substring.length; i++) {
            var hs = substring.charCodeAt(i);
            if (0xd800 <= hs && hs <= 0xdbff) {
                if (substring.length > 1) {
                    var ls = substring.charCodeAt(i + 1);
                    var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
                    if (0x1d000 <= uc && uc <= 0x1f77f) {
                        return true;
                    }
                }
            } else if (substring.length > 1) {
                var ls = substring.charCodeAt(i + 1);
                if (ls == 0x20e3) {
                    return true;
                }
            } else {
                if (0x2100 <= hs && hs <= 0x27ff) {
                    return true;
                } else if (0x2B05 <= hs && hs <= 0x2b07) {
                    return true;
                } else if (0x2934 <= hs && hs <= 0x2935) {
                    return true;
                } else if (0x3297 <= hs && hs <= 0x3299) {
                    return true;
                } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
                    || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
                    || hs == 0x2b50) {
                    return true;
                }
            }
        }
    }

    // 判断是否是数字
    function isNumber(str) {
        for (let i = 0; i < str.length; i++) {
            if (str[i] < '0' || str[i] > '9') return false;
        }
        return true;
    }

    /*
        三个参数
        file：一个是文件(类型是图片格式)，
        w：一个是文件压缩的后宽度，宽度越小，字节越小
        objDiv：一个是容器或者回调函数
        photoCompress()
         */
    function photoCompress(file, w, objDiv) {
        var ready = new FileReader();
        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.onload = function () {
            var re = this.result;
            canvasDataURL(re, w, objDiv)
        }
    }

    function canvasDataURL(path, obj, callback) {
        var img = new Image();
        img.src = path;
        img.onload = function () {
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }

    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     *            用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData) {
        var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }


    //上传文件方法
    function UpladFile() {
        var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
        var url = "后台图片上传接口"; // 接收上传文件的后台地址

        var form = new FormData(); // FormData 对象

        if (fileObj.size / 1024 > 1025) { //大于1M，进行压缩上传
            photoCompress(fileObj, {
                quality: 0.2
            }, function (base64Codes) {
                //console.log("压缩后：" + base.length / 1024 + " " + base);
                var bl = convertBase64UrlToBlob(base64Codes);
                form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
                xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
                xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
                xhr.onload = uploadComplete; //请求完成
                xhr.onerror = uploadFailed; //请求失败

                xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
                xhr.upload.onloadstart = function () {//上传开始执行方法
                    ot = new Date().getTime();   //设置上传开始时间
                    oloaded = 0;//设置上传开始时，以上传的文件大小为0
                };

                xhr.send(form); //开始上传，发送form数据
            });
        } else { //小于等于1M 原图上传
            form.append("file", fileObj); // 文件对象
            xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
            xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
            xhr.onload = uploadComplete; //请求完成
            xhr.onerror = uploadFailed; //请求失败

            xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
            xhr.upload.onloadstart = function () {//上传开始执行方法
                ot = new Date().getTime();   //设置上传开始时间
                oloaded = 0;//设置上传开始时，以上传的文件大小为0
            };

            xhr.send(form); //开始上传，发送form数据
        }
    }
</script>

<style scoped>
    p, h3 {
        color: #fd6740;
    }
    h3 {
        padding: 5px;
        border-bottom: solid 1px #e4e4e4;
    }
    .card {
        background-color: white;
        margin: 20px 20px;
        border: solid 1px #e4e4e4;
        padding: 15px;
        text-align: left;
    }

    .submit_button {
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fd6740;
        border-color: #fd6740;
        width: 85%;
    }
</style>