<template>
    <div class="page">
        <div class="tabs">
            <div class="text1">实名认证已完成</div>
            <div class="text2">
                <span>账户实名认证后不能修改</span>
            </div>
        </div>
        <div class="info">
            <div class="text1">姓名</div>
            <div class="text2">{{ form.realName }}</div>
        </div>
        <div class="info">
            <div class="text1">手机号码</div>
            <div class="text2">{{ form.phone }}</div>
        </div>
        <div class="info">
            <div class="text1">电子邮箱</div>
            <div class="text2">{{ form.email }}</div>
        </div>
        <div class="info">
            <div class="text1">身份证号</div>
            <div class="text2">{{ form.idNo }}</div>
        </div>
        <div class="info">
            <div class="text1">身份证照片</div>
            <div class="text2">已上传</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {}
        };
    },
    mounted() {
        this.$http
            .post(
                '/identityAuth/all',
                {
                    query: {
                        userId: this.$store.state.userInfo.id
                    }
                },
                { body: 'json' }
            )
            .then(res => {
                if (!res.empty) {
                    this.form = res.content[0];
                }
            });
    }
};
</script>
<style lang="less" scoped>
.page {
    padding: 10px 16px 150px;
}
.tabs {
    padding-bottom: 12px;
    .text1 {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
    }
    .text2 {
        font-size: 12px;
        color: #939599;
        line-height: 22px;
        margin-top: 4px;
    }
}

.info {
    display: flex;
    align-items: center;
    height: 70px;
    position: relative;
    .text1 {
        font-size: 14px;
        font-weight: bold;
        color: #939599;
        line-height: 24px;
        min-width: 90px;
    }

    .text2 {
        font-size: 16px;
        color: #939599;
        line-height: 24px;
    }

    &:not(:last-child) {
        &::after {
            content: '';
            position: absolute;
            left: 90px;
            right: 0px;
            bottom: 0;
            height: 1px;
            background-color: #202122;
        }
    }
}
</style>
