zc_saas_h5/components/popup/index.vue

<template>
    <view class="popup">
        <u-popup v-model="popupPhotoShow" mode="bottom" border-radius="30" :mask-close-able='false'>
            <view class="popup_box">
                <view class="head">
                    <image src="/static/learn/photo_head.png" class="photo_head"></image>
                </view>
                <view class="warn">温馨提示</view>
                <view class="contents">
                    <view class="words">1、请保证摄像头正对自己，避免头像偏左或者偏右。</view>
                    <view class="words">2、请保证拍照环境光线充足（照片太暗或曝光会降低验证通过率）。</view>
                    <view class="words">3、请保证整个头像在人脸识别区域内，脸部无遮挡装饰物（佩戴眼镜会降低通过率）。</view>
                    <view class="words">4、如果下面视频中出现黑屏，摄像头可能被其他进程占用，请关闭其他调用摄像头的程序，重新刷新当前页面重新拍照识别。</view>
                </view>
                <view class="take_photo" @click="toTakePhoto()">
                    去拍照
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'popup',
    props: {
        popupPhotoShow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            // popupShow: false
        }
    },
    methods: {
        toTakePhoto() {
            this.$emit('takePhoto', true)
        },
    }
}
</script>

<style lang="scss" scoped>
.popup_box {
    width: 100%;
    height: 1100rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0rpx 40rpx;
    .photo_head {
        width: 240rpx;
        height: 240rpx;
        margin: 80rpx 0rpx 48rpx;
    }
    .warn {
        width: 100%;
        font-size: 36rpx;
        font-weight: bold;
        color: #222222;
        margin-bottom: 40rpx;
    }
    .words {
        font-size: 28rpx;
        color: #666666;
        line-height: 33rpx;
        margin-bottom: 24rpx;
    }
    .take_photo {
        width: 412rpx;
        height: 84rpx;
        line-height: 84rpx;
        text-align: center;
        background: #01C65A;
        border-radius: 16rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #FFFFFF;
        margin-top: 100rpx;
    }
}
</style>