uni-Identify-quality/pages/realName/realName.vue

<template>
    <view class="main">
        <view class="logo">
            <image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
        </view>
        <view class="container">
            <view class="head">
                <view style="display:flex; align-items: center;">
                    <view class="title">注册手机号</view>
                    <view :style="{ fontSize: '18rpx' }">*实名认证失败</view>
                    <!-- <view>*实名认证成功</view> -->
                </view>
                <view style="color:#7FA770;font-size:24rpx;margin-left:36rpx">此实名仅用于注册该小程序</view>
            </view>
            <view class="info">
                <view class="item">
                    <view class="name">手机号</view>
                    <u--input placeholder="请输入手机号" border="none" v-model="phone" @change="changePhone" clearable
                        type="number" @blur="checkPhone" @confirm="checkPhone"></u--input>
                </view>
                <view class="item">
                    <view class="name">身份证号</view>
                    <u--input placeholder="请输入身份证号" border="none" v-model="num" @change="changeNum" clearable
                        type="number"></u--input>
                </view>
            </view>
            <view class="card-box">
                <view class="color:#626262;font-size:28rpx">身份证照片</view>
                <view style="display: flex;justify-content:space-between;margin-top:20rpx">
                    <view class="card">
                        <view>
                            <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
                                :maxCount="1" width="250" height="150">
                                <image src="@/static/image/card.png" mode="scaleToFill"
                                    style="width: 270rpx;height: 158rpx;"></image>
                            </u-upload>
                        </view>
                        <view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证人像面</view>
                    </view>
                    <view class="card">
                        <view>
                            <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
                                :maxCount="1" width="250" height="150">
                                <image src="@/static/image/card2.png" mode="scaleToFill"
                                    style="width: 270rpx;height: 158rpx;"></image>
                            </u-upload>
                        </view>
                        <view style="color:#4E964D;font-size:20rpx;margin-top:20rpx">上传身份证国徽面</view>
                    </view>
                </view>
            </view>
            <view class="face">
                <view class="faceTitle">人脸识别</view>
                <view class="recognition">
                    <view style="color: #fff;margin-right:10rpx">前往认证</view>
                    <u-icon name="arrow-right-double" color="#fff"></u-icon>
                </view>
            </view>
            <view class="agreement">
                <u-checkbox-group v-model="checked" iconPlacement="left" placement="row" inactiveColor="#76C458">
                    <u-checkbox name="yes" shape="circle" activeColor="#76C458"></u-checkbox>
                    <view class="know">
                        已阅读并同意
                        <text @click="agreementHandle('service')">《用户协议》&《集保东西用户协议》</text>
                    </view>
                </u-checkbox-group>
            </view>
            <u-button text="完成注册" shape="circle" style="background-color: #76C458;width:284rpx;color:#fff" @click="completeRegistration"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            phone: "",
            num: "",
            checked: [],
        };
    },
    methods: {
        changePhone(value) {
            this.phone = value;
        },
        checkPhone(event) {
            if (event) {
                this.$common.vefTel(event);
            }
        },
        changeNum(value) {
            this.num = value;
        },
        completeRegistration(){
            if (!this.checked.length) return this.$common.msgToast("请阅读并勾选协议");

        }
    }
};
</script>

<style lang="scss" scoped>
/deep/.u-checkbox__icon-wrap--circle {
  width: 25upx !important;
  height: 25upx !important;
}
/deep/ .u-checkbox-label--left {
  margin-top: 20rpx;
}
.main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;

    .logo {
        height: 200rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .img {
            width: 124rpx;
            height: 72rpx;
        }
    }

    .container {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
        height: calc(100vh - 200upx);
        width: 100%;
        background: #fff;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding: 62rpx 32rpx;

        .head {
            .title {
                color: #626262;
                font-size: 40rpx;
                margin-left: 36rpx;
                font-weight: 600;
            }
        }

        .info {
            margin-top: 24rpx;

            .item {
                box-sizing: border-box;
                background: #f8f8f8;
                border-radius: 20rpx;
                width: 100%;
                height: 92rpx;
                display: flex;
                align-items: center;
                padding-left: 24rpx;
                margin-bottom: 20rpx;

                .name {
                    width: 200rpx;
                    height: 72rpx;
                    line-height: 72rpx;
                    border-right: 1rpx solid #d1d1d1;
                }

                /deep/ .u-input {
                    margin-left: 40rpx;
                }
            }
        }

        .card-box {
            width: 100%;
            height: 322rpx;
            background: #f8f8f8;
            padding: 32rpx 24rpx;
            box-sizing: border-box;

            .card {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
        }

        .face {
            margin-top: 20rpx;
            box-sizing: border-box;
            background: #f8f8f8;
            border-radius: 20rpx;
            width: 100%;
            height: 92rpx;
            display: flex;
            align-items: center;

            .faceTitle {
                width: 202rpx;
                height: 100%;
                padding: 26rpx 0 26rpx 24rpx;
                box-sizing: border-box;
            }

            .recognition {
                height: 92rpx;
                width: calc(100% - 202rpx);
                background: #76C458;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 0 20rpx 20rpx 0;
            }
        }

        .agreement {
            font-size: 28rpx;
            margin: 46rpx auto;
            .know {
                margin-top: 20upx;
                font-size: 28upx;
                color: #a6a6a6;

                text {
                    color: #76C458;
                }
            }
        }
    }
}
</style>