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.
336 lines
9.3 KiB
336 lines
9.3 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">
|
|
<view class="label m-b-xs">{{$t('auth.d0')}}</view>
|
|
<view class="input color-light" >
|
|
<!-- <uni-datetime-picker
|
|
:placeholder="$t('auth.d5')"
|
|
type="date"
|
|
:value="single"
|
|
@change="selectDate"
|
|
/> -->
|
|
<uni-datetime-picker class="color-light" type="date" :placeholder="$t('auth.d14')" :clear-icon="false" v-model="form.birthday" @maskClick="maskClick" />
|
|
</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" v-if="0">
|
|
<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" v-if="0">
|
|
<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;
|
|
// },
|
|
changeID(e){
|
|
console.log(e);
|
|
this.form.identification_type = this.id_range[e].text;
|
|
},
|
|
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.birthday){
|
|
uni.showToast({
|
|
title: this.$t('auth.d14'),
|
|
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;
|
|
}
|
|
|
|
/deep/.uni-date-x--border{
|
|
border: none;
|
|
}
|
|
/deep/.uni-date-x{
|
|
background-color: transparent;
|
|
// color: $plain;
|
|
}
|
|
/deep/.uni-date__x-input{
|
|
padding-left: 0px;
|
|
// color: grey;
|
|
}
|
|
/deep/.uni-select__selector{
|
|
background-color: $panel-3;
|
|
}
|
|
/deep/.uni-select__input-text{
|
|
color: $plain;
|
|
}
|
|
/deep/.uni-select__input-placeholder{
|
|
color: grey;
|
|
}
|
|
// 修改uni-datetime-picker的年月列表样式
|
|
.uni-picker-view-indicator, .uni-picker-view-mask{
|
|
background-color: rgba(255,255,255,0.5)!important;
|
|
}
|
|
// 修改uni-datetime-picker的年月列表样式,以下的修改无效
|
|
/deep/.uni-picker-view-indicator, /deep/uni-resize-sensor{
|
|
background-color: #fff;
|
|
}
|
|
/deep/.uni-picker-view-mask::before, uni-picker-view-column::before{
|
|
content: ''!important;
|
|
width: 100%!important;
|
|
height: 34px!important;
|
|
background: rgba(255,255,255,0.5)!important;
|
|
position: absolute!important;
|
|
top: calc(50% - 17px)!important;
|
|
border-top: 1px solid #c9c9c9!important;
|
|
border-bottom: 1px solid #c9c9c9!important;
|
|
}
|
|
::v-deep.uni-picker-view-mask::before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 34px;
|
|
background: rgba(255,255,255,0.5);
|
|
position: absolute;
|
|
top: calc(50% - 17px);
|
|
border-top: 1px solid #c9c9c9;
|
|
border-bottom: 1px solid #c9c9c9;
|
|
}
|
|
>>>.uni-picker-view-mask::before{
|
|
content: '';
|
|
width: 100%;
|
|
height: 34px;
|
|
background: rgba(255,255,255,0.5);
|
|
position: absolute;
|
|
top: calc(50% - 17px);
|
|
border-top: 1px solid #c9c9c9;
|
|
border-bottom: 1px solid #c9c9c9;
|
|
}
|
|
</style>
|
|
|