You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

266 lines
6.9 KiB

<template>
<v-page>
<v-header :title="$t('auth.a1')"></v-header>
<main class=" m-lg bg-panel-3 rounded-md p-x-md box-shadow">
<!-- 姓名 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.a9')}}</view>
<view class="input color-light">
<v-input v-model="form.realname" :placeholder="$t('auth.b0')"></v-input>
</view>
</view>
<!-- 出生日期 -->
<view class="form-item border-b p-md m-b-md" v-if="0">
<view class="label m-b-xs">{{$t('auth.d0')}}</view>
<view class="input color-light" >
<uni-datetime-picker
type="date"
:value="single"
start="1900-1-1"
end="2050-12-12"
@change="selectDate"
/>
</view>
</view>
<!-- 证件号类型 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.d1')}}</view>
<view class="input color-light" style="height: 30px;">
<v-picker :value="form.type" @change="selectType" :list="typeList" range-value="value" range-label="label">
<v-input disabled :value="activeType.label" :placeholder="$t('auth.d13')">
<template #right>
<van-icon class="color-default" name="arrow" />
</template>
</v-input>
</v-picker>
</view>
</view>
<!-- 证件号 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.b1')}}</view>
<view class="input color-light">
<v-input v-model="form.id_card" :placeholder="$t('auth.b2')"></v-input>
</view>
</view>
<!-- 居住地址 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.d5')}}</view>
<view class="input color-light">
<v-input v-model="form.address" :placeholder="$t('auth.d6')"></v-input>
</view>
</view>
<!-- 城市 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.d7')}}</view>
<view class="input color-light">
<v-input v-model="form.city" :placeholder="$t('auth.d8')"></v-input>
</view>
</view>
<!-- 邮政区号 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.d9')}}</view>
<view class="input color-light">
<v-input v-model="form.postal_code" :placeholder="$t('auth.d10')"></v-input>
</view>
</view>
<!-- 国籍区号 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.SelectAreaCode')}}</view>
<view class="input color-light" >
<v-picker :value="form.country_id" @change="selectCountry" :list="countryList" range-value="id" range-label="name2">
<v-input disabled :value="activeCountry.name2" :placeholder="$t('auth.SelectAreaCode')">
<template #right>
<van-icon class="color-default" name="arrow" />
</template>
</v-input>
</v-picker>
</view>
</view>
<!-- 电话 -->
<view class="form-item border-b p-md m-b-md">
<view class="label m-b-xs">{{$t('auth.d11')}}</view>
<view class="input color-light">
<v-input v-model="form.phone" :placeholder="$t('auth.d12')"></v-input>
</view>
</view>
<view class="p-md ">
<v-button block type="blue" class="w-max rounded-md" ref="btn" @click="primaryAuth">{{$t('auth.b3')}}</v-button>
</view>
</main>
<van-toast id="van-toast" />
</v-page>
</template>
<script>
import Profile from "@/api/profile";
import Member from "@/api/member";
export default {
data() {
return {
detail: {},
countryList: [],
form: {
realname: "",
birthday: "",
type: "2",
id_card: "",
address: "",
city: "",
postal_code: "",
country_id: "",
country_code: "",
phone: "",
},
single: "2023-06-3",
typeList: [
{
label: this.$t('auth.d2'),
value: 1,
},
{
label: this.$t('auth.d3'),
value: 2,
},
{
label: this.$t('auth.d4'),
value: 3,
},
]
};
},
computed: {
activeCountry() {
return (
this.countryList.find((item) => item.id == this.form.country_id) || {}
);
},
activeType(){
return (
this.typeList.find((item) => item.value == this.form.type) || {}
);
},
activeIndex(){
return this.countryList.findIndex((item) => item.id == this.form.country_id)
},
},
methods: {
getAuthInfo() {
Profile.getAuthInfo().then((res) => {
this.detail = res.data;
});
},
// 获取区号
getCountryCode() {
Member.getCountryCode()
.then((res) => {
// console.info(res)
this.countryList = res.data.map(item=>{
return {
...item,
name2: '+'+item.country_code+'('+item.name+')'
}
});
this.form.country_id = this.countryList[res.data.length-1].id;
})
.catch(() => {});
},
selectCountry(value) {
this.form.country_id = value
},
selectDate(value){
this.form.birthday = value;
},
selectType(value){
this.form.type = value;
},
// 认证
primaryAuth() {
let data = this.form;
data.country_code = this.activeCountry.country_code;
if(!data.realname){
uni.showToast({
title: this.$t('auth.b0'),
icon: 'none'
})
return;
}
if(!data.type){
uni.showToast({
title: this.$t('auth.d13')+this.$t('auth.d1'),
icon: 'none'
})
return;
}
if(!data.id_card){
uni.showToast({
title: this.$t('auth.b2'),
icon: 'none'
})
return;
}
if(!data.address){
uni.showToast({
title: this.$t('auth.d6'),
icon: 'none'
})
return;
}
if(!data.city){
uni.showToast({
title: this.$t('auth.d8'),
icon: 'none'
})
return;
}
if(!data.postal_code){
uni.showToast({
title: this.$t('auth.d10'),
icon: 'none'
})
return;
}
if(!data.country_id){
uni.showToast({
title: this.$t('auth.SelectAreaCode'),
icon: 'none'
})
return;
}
if(!data.phone){
uni.showToast({
title: this.$t('auth.d12'),
icon: 'none'
})
return;
}
Profile.primaryAuth(data,{btn:this.$refs.btn}).then((res) => {
this.$toast.success(this.$t('auth.b4'));
// this.$back();
uni.navigateBack({
delta: 1
})
}).catch(()=>{});
},
},
created() {
this.getAuthInfo();
this.getCountryCode();
},
onShow() {
let date = new Date;
this.single = date.getFullYear()+'-'+((date.getMonth()+1).toString().length==1?'0'+(date.getMonth()+1):(date.getMonth()+1))+'-'+date.getDate();
}
};
</script>
<style lang="scss" scoped>
.layout-page{
height: auto !important;
}
.uni-input-input{
font-size: 14px;
}
/deep/uni-input{
height: 24px;
font-size: 15px;
}
</style>