xiuhuwangqiu/bundle/face/face-info.vue

<template>
    <view class="content">
        <view class="title">请确保本人操作</view>
        <view class="desc">为了防范身份信息被冒用，保障资金安全，请保持正脸在取景框中根据屏幕指示完成识别</view>
        <view class="photo-box">
            <image src="https://xh.stnav.com/uploads/sport/face1.png" style="width: 280rpx; height: 350rpx;"></image>
        </view>
        <view>
            <view class="desc2">1.为了确保您账户的安全和真实性，我们需要对您进行身份验证；</view>
            <view class="desc3">2.请您本人亲自完成，请将脸部置于提示框内，并按提示做动作。</view>
        </view>

        <view class="photo-list" >
            <view class="photo-item">
                <view class="">
                    <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx;"></image>
                </view>
                <view class="">正对手机</view>
            </view>

            <view class="photo-item">
                <view class="">
                    <image src="https://xh.stnav.com/uploads/sport/face3.png" style="width: 90rpx; height: 90rpx;"></image>
                </view>
                <view class="">正对手机</view>
            </view>

            <view class="">
                <view class="photo-item">
                    <image src="https://xh.stnav.com/uploads/sport/face4.png" style="width: 90rpx; height: 90rpx;"></image>
                </view>
                <view class="">正对手机</view>
            </view>
        </view>

        <view class="photo-btn" @click="takePhoto">开始录入</view>
        <!-- <image v-if="imgSrc" :src="imgSrc" style="width: 200rpx; height: 200rpx; margin-top: 20rpx;"></image> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                order_id: 0,
                imgSrc: '',
                loadding: true,
            }
        },

        onLoad(args) {
            this.order_id = args.order_id || 0;
        },
        
        methods: {
            takePhoto() {
                let self = this
                console.log('take photo')
                uni.navigateTo({
                    url: `/bundle/face/face-photo?order_id=${this.order_id}`,
                    events:{
						data: (e) => {
							// self.imgSrc = path
                            self.uploadFile(e.path, e.order_id)
                            // const image = new Image();
                            // image.src = e.path;
                            // console.log("🚀 ~ image:", image)

                            // uni.redirectTo({
                            //     url: '/pages/order/cg-my-order'
                            // });
						}
					}
                });
            },

             /*上传图片*/
		    uploadFile: function(filePath, order_id) {
                console.log("🚀 ~ filePat1, order_id:", filePath)
                console.log("🚀 ~ filePat2, order_id:", order_id)
                let self = this;
                let params = {
                    token: uni.getStorageSync('token'),
                    app_id: self.getAppId()
                };
                uni.showLoading({
                    title: '图片上传中'
                });
                uni.uploadFile({
                    url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
                    filePath: filePath,
                    name: 'iFile',
                    formData: params,
                    success: function(res) {
                        uni.hideLoading();

                        let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
                        if (result.code === 1) {
                            setTimeout(() => {
                                uni.showLoading({
                                    title: '人脸录入中...'
                                });
                            }, 100);
                
                            console.log("🚀 ~ filePath, order_id2:", filePath, order_id)
                            self._post(
                                'haikang.createPerson/hikCreate',
                                {
                                    app_id: self.getAppId(),
                                    faceUrl: result.data.file_path,
                                    order_id: order_id
                                },
                                function(res) {
                                    console.log("🚀 ~ res:", res)
                                    uni.hideLoading();
                                    setTimeout(() => {
                                        uni.showToast({
                                            title: '操作成功',
                                            duration: 1500,
                                            icon: 'success'
                                        });
                                    }, 100);
                             
                                    setTimeout(() => {
                                        uni.redirectTo({
                                            url: '/pages/order/cg-my-order?type=2'
                                        });
                                    }, 800)
                                }
                            );
                            // self.imgSrc = result.data.file_path;
                        } else {
                            // self.showError(result.msg);
                        }
                    },
                    complete: function() {
                        uni.hideLoading();
                    }
                });
            },
        },
    }

</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .content {
        margin: 16rpx 60rpx 0;
        padding-bottom: 10rpx;
    }

    .title {
        font-size: 40rpx;
        color: #303133;
        line-height: 56rpx;
        text-align: center;
    }
    
    .desc {
        margin-top: 20rpx;
        text-align: left;
        font-size: 26rpx;
        color: #909399;
        line-height: 36rpx;
    }

    .photo-box {
        margin-top: 52rpx; 
        display: flex;
        justify-content: center;
    }

    .desc2, .desc3 {
        font-size: 28rpx;
        color: #606266;
        line-height: 40rpx;
    }

    .desc3 {
        margin-top: 20rpx;
    }

    .photo-list {
        margin: 70rpx 18rpx 0;
        display: flex;
        justify-content: space-between;
    }

    .photo-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & view:last-child {
            margin-top: 20rpx;
            color: #606266;
            line-height: 36rpx;
        }
    }

    .photo-btn {
        margin-top: 222rpx;
        width: 630rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 8rpx;
        background: #365A9A;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;
    }
</style>