liuyg
2021-07-06 bc3fa8b523ed29cedb95b0936d5262574b7881b8
人脸识别,提交注册
1 files modified
183 ■■■■■ changed files
pages/registerUser/registerUser.vue 183 ●●●●● patch | view | raw | blame | history
pages/registerUser/registerUser.vue
@@ -1,11 +1,11 @@
<template>
    <view>
    <view class="registerUser">
        <u-form :model="form" ref="uForm">
            <u-form-item :label="item.title" :prop="item.froms" label-width="200" :left-icon="item.img" :required="true"
                v-for="(item, index) in list" :key="index">
                <u-input v-model="form[item.froms]" />
            </u-form-item>
            <u-form-item label="选择部门" left-icon="account-fill" label-width="200">
            <u-form-item style="display: none;" label="选择部门" left-icon="account-fill" label-width="200" :required="true">
                <u-input v-model="form.obj" type="select" :border="true" @click="show = true" />
                <u-action-sheet :list="objList" v-model="show" @click="objCallback"></u-action-sheet>
            </u-form-item>
@@ -17,29 +17,8 @@
                </u-radio-group>
            </u-form-item>
        </u-form>
        <view class="getFace">
            <u-popup v-model="showGetFace" mode="center" border-radius="14" width="80%">
                <view class="g-f-once">
                    <u-cell-item icon="account" title="姓名" :value="form.name" hover-class="none" :arrow="false">
                    </u-cell-item>
                    <u-cell-item icon="fingerprint" title="身份证" :value="form.carId" hover-class="none" :arrow="false">
                    </u-cell-item>
                    <!-- <br><br> -->
                    <view class="face-main">
                        <!-- <avue-video background="https://avuejs.com/images/face.png" width="100%" class="face-main"
                            @data-change="dataChange" ref="video">
                        </avue-video>
                        <br><br> -->
                        <!-- <button @click="startRecord" v-if="!flag" type="primary">开始录制</button> -->
                        <!-- <button type="danger" @click="stopRecord" v-else>停止录制</button> -->
                        <button type="default" @click="camera">录制</button>
                    </view>
                </view>
            </u-popup>
        </view>
        <u-button @click="showGetFace = true">人脸验证</u-button>
        <u-button @click="camera" :style="{backgroundColor:facebc,color:faceco,border: `1px solid ${facebc}`}">
            人脸验证{{faceMsg}}</u-button>
        <u-button @click="submit">提交</u-button>
    </view>
</template>
@@ -177,45 +156,88 @@
                    }],
                },
                showGetFace: false,
                faceState: -2,
                facebc: '#fff',
                faceco: '#000',
                faceMsg: ''
            };
        },
        methods: {
            camera() {
                let that = this;
                uni.showLoading({
                    title: '加载中'
                });
                var i = 0;
                var time = setTimeout(() => {
                    if (i == 0) {
                        uni.showToast({
                            title: '未进行验证!',
                            icon: "none",
                            duration: 1000
                        });
                        clearTimeout(time);
                        time = null;
                    } else {
                        // console.log('进行验证')
                    }
                }, 2000)
                uni.chooseImage({
                    count: 1, //默认9
                    sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
                    // sourceType: 'camera', //从相册选择
                    sourceType: ['camera', 'album'], //从相册选择
                    success: function(res) {
                        console.log('img', res)
                        i = 1;
                        var img = res.tempFiles;
                        console.log('img', img)
                        // imgToBase64(res)
                        var url = that.$store.state.piAPI + 'blade-user/faceCompare',
                            // var url = 'http://192.168.0.114:82/' + 'blade-user/faceCompare',
                            data = {
                                "name": that.form.name,
                                "idCardNo": that.form.carId
                            };
                        uni.uploadFile({
                            url: url,
                            filePath: img[0].path,
                            name: 'file',
                            formData: data,
                            success: (data) => {
                                if (data.statusCode == 200) {
                                    var data = JSON.parse(data.data);
                                    if (data.data.result == 0) {
                                        that.faceState = 1;
                                        uni.showToast({
                                            title: '人脸识别成功!',
                                            icon: "none",
                                            duration: 1000
                                        });
                                    } else {
                                        that.faceState = -1;
                                        uni.showToast({
                                            title: data.data.errMsg == "pic not has face" ?
                                                '未检测到人脸' : data.data.errMsg,
                                            icon: "none",
                                            duration: 1000
                                        });
                                    }
                                } else {
                                    that.faceState = 0;
                                    uni.showToast({
                                        title: '服务器连接失败!',
                                        icon: "none",
                                        duration: 1000
                                    });
                                }
                                console.log(data)
                            }
                        });
                    },
                    complete: function() {
                        console.log(4534)
                    }
                })
                // 图片转base64
                // function imgToBase64(data) {
                //     plus.zip.compressImage({
                //             src: data.tempFilePaths[0],
                //             dst: "_doc/a.jpg",
                //             overwrite: true,
                //             width: '1920px',
                //             height: '1080px',
                //             format: 'jpg',
                //             quality: 100
                //         },
                //         function(e) {
                //             let reader = new plus.io.FileReader();
                //             reader.readAsDataURL(e.target);
                //             reader.onloadend = function(e) {
                //                 //这是转成功的base64文件,需要正则去一下换行
                //                 let base64 = e.target.result.split(',')[1].replace(/[\r\n]/g, "")
                //                 iOCR(base64)
                //             };
                //         },
                //         function(err) {
                //             plus.nativeUI.alert('未知错误!', function() {});
                //         }
                //     );
                // }
            },
            startRecord() {
                this.flag = true;
@@ -235,22 +257,71 @@
            },
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                        console.log(this.form)
                    if (valid && this.faceState == 1) {
                        // console.log('验证通过');
                        console.log(this.form);
                        var d = this.form;
                        var url = 'http://s16s652780.51mypc.cn/api/zc/inster',
                            data = {
                                // deptid: ,
                                password: d.pass,
                                password2: d.passTwo,
                                phone: d.phone,
                                sex: d.sex == '男' ? 1 : 2,
                                sname: d.name,
                                username: d.user,
                            }
                        uni.request({
                            url: url,
                            method: 'POST',
                            data: data,
                            success: (res) => {
                                console.log(res)
                            }
                        })
                        // uni.showToast({
                        //     title: '提交成功!',
                        //     icon: "none",
                        //     duration: 1000
                        // });
                    } else {
                        console.log('验证失败');
                        // console.log('验证失败');
                        uni.showToast({
                            title: '确认信息无误后重试!',
                            icon: "none",
                            duration: 1000
                        });
                    }
                });
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        watch: {
            faceState() {
                // console.log(this.faceState);
                if (this.faceState == -1) {
                    this.facebc = '#ff7f29';
                    this.faceco = '#fff';
                    this.faceMsg = '(信息有误!请重新验证)';
                } else if (this.faceState == 1) {
                    this.facebc = '#15dd55';
                    this.faceMsg = '(验证成功!)';
                    this.faceco = '#fff';
                } else if (this.faceState == 0) {
                    this.facebc = '#f7f7f7';
                    this.faceco = '#000';
                    this.faceMsg = '(服务连接失败!)';
                }
            }
        }
    };
</script>
</script>
<style lang="scss" scoped>
    .face-main {}
    .registerUser {
        padding: 0 1.2rem;
    }
</style>