feat(auth): 新增实名认证页面,支持大陆居民和非大陆居民认证
This commit is contained in:
scout
parent
d27e5268f3
commit
c93a7fcb93
@ -1,37 +1,119 @@
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const showPicker = ref(false);
|
||||
const pickerValue = ref([]);
|
||||
const gender = ref('男')
|
||||
const birthday = ref('')
|
||||
const birthdayDate = ref([])
|
||||
const showBirthdayPicker = ref(false)
|
||||
const minDate = new Date(1950, 0, 1)
|
||||
const maxDate = new Date(2025, 12, 31)
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns = computed(() => [
|
||||
{ text: t('realAuth.male'), value: t('realAuth.male') },
|
||||
{ text: t('realAuth.female'), value: t('realAuth.female') },
|
||||
]);
|
||||
const onConfirm = ({ selectedValues, selectedOptions }) => {
|
||||
pickerValue.value = selectedValues
|
||||
gender.value = selectedOptions[0].text
|
||||
showPicker.value = false
|
||||
}
|
||||
const onBirthdayConfirm = (value) => {
|
||||
console.log(value)
|
||||
birthdayDate.value = value.selectedValues
|
||||
birthday.value = value.selectedValues.join('-')
|
||||
showBirthdayPicker.value = false
|
||||
}
|
||||
definePageMeta({
|
||||
title: '实名认证',
|
||||
i18n: 'realAuth.title',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="px-[31px] bg-#fff w-100vw h-100vh pt-[46px]">
|
||||
<van-tabs>
|
||||
<van-tab title="大陆居民" class="pt-[80px]">
|
||||
<div class="text-[#BDBDBD] text-[16px] mb-[34px]">请填写身份证相关信息</div>
|
||||
<div class="mb-[100px]">
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field label="身份证号" clearable placeholder="请输入身份证号"></van-field>
|
||||
<div class="px-[31px] bg-#fff w-100vw h-100vh pt-[46px]">
|
||||
<van-tabs animated swipeable>
|
||||
<van-tab :title="$t('realAuth.cnTab')" class="pt-[80px]">
|
||||
<div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.cnTabDesc') }}</div>
|
||||
<div class="mb-[100px]">
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.idCard')" clearable
|
||||
:placeholder="$t('realAuth.idCardPlaceholder')"></van-field>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field label="姓名" clearable placeholder="请输入姓名"></van-field>
|
||||
<div class="flex justify-between">
|
||||
<van-button style="width: 151px;height: 48px" color="#E9F1F8">
|
||||
<div class="text-#2B53AC text-16px">{{ $t('realAuth.cancel') }}</div>
|
||||
</van-button>
|
||||
<van-button style="width: 151px;height: 48px" color="#2B53AC">
|
||||
<div class="text-#FFFFFF text-16px">{{ $t('realAuth.confirm') }}</div>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<van-button style="width: 151px;height: 48px" color="#E9F1F8">
|
||||
<div class="text-#2B53AC text-16px">取消</div>
|
||||
</van-button>
|
||||
<van-button style="width: 151px;height: 48px" color="#2B53AC">
|
||||
<div class="text-#FFFFFF text-16px">确定</div>
|
||||
</van-button>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab title="非大陆居民">内容 2</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab :title="$t('realAuth.otherTab')" class="pt-[80px]">
|
||||
<div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.otherTabDesc') }}</div>
|
||||
<div class="mb-[100px]">
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field v-model="gender" is-link readonly name="picker" :label="$t('realAuth.gender')"
|
||||
@click="showPicker = true" />
|
||||
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field v-model="birthday" is-link readonly name="birthdayPicker" :label="$t('realAuth.birthday')"
|
||||
:placeholder="$t('realAuth.birthdayPlaceholder')" @click="showBirthdayPicker = true" />
|
||||
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.adress')" clearable
|
||||
:placeholder="$t('realAuth.adressPlaceholder')"></van-field>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.bank')" clearable :placeholder="$t('realAuth.bankPlaceholder')"></van-field>
|
||||
</div>
|
||||
<div class="border-b-[1.7px] mt-[8px]">
|
||||
<van-field :label="$t('realAuth.bankCard')" clearable
|
||||
:placeholder="$t('realAuth.bankCardPlaceholder')"></van-field>
|
||||
</div>
|
||||
<div class="flex justify-between mt-[100px]">
|
||||
<van-button style="width: 151px;height: 48px" color="#E9F1F8">
|
||||
<div class="text-#2B53AC text-16px">{{ $t('realAuth.cancel') }}</div>
|
||||
</van-button>
|
||||
<van-button style="width: 151px;height: 48px" color="#2B53AC">
|
||||
<div class="text-#FFFFFF text-16px">{{ $t('realAuth.confirm') }}</div>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
|
||||
<van-picker :columns="columns" :model-value="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" />
|
||||
</van-popup>
|
||||
<van-popup v-model:show="showBirthdayPicker" destroy-on-close position="bottom">
|
||||
<van-date-picker v-model="birthdayDate" :min-date="minDate" :max-date="maxDate"
|
||||
@cancel="showBirthdayPicker = false" @confirm="onBirthdayConfirm" />
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.van-tabs__line){
|
||||
:deep(.van-tabs__line) {
|
||||
height: 2px;
|
||||
width: 107px;
|
||||
}
|
||||
|
||||
:deep(.van-cell) {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user