246 lines
8.2 KiB
Vue
246 lines
8.2 KiB
Vue
<template>
|
|
<view>
|
|
<view class="authStatusList">
|
|
<view :class="[authStatus.email==0 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'email' ? 'active' : '']" @click="handleSelect('email')">
|
|
<view class="left">
|
|
<image class="icon" src="/static/user/email.svg" mode="aspectFit"></image>
|
|
<text>1.{{ $t('form.personalData.personalInformation.verifyEmail') }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<image class="icon" :src="authStatusMap.email?.[authStatus?.email]?.icon" mode="aspectFit"></image>
|
|
<text class="text" :style="{ color: authStatusMap.email?.[authStatus?.email]?.color }">{{ authStatusMap.email?.[authStatus?.email]?.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view :class="[authStatus.email == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'userInfo' ? 'active' : '']" @click="handleSelect('userInfo')">
|
|
<view class="left">
|
|
<image class="icon" src="/static/user/userInfo.svg" mode="aspectFit"></image>
|
|
<text>2.{{ $t('form.personalData.personalInformation.completePersonalInfo') }}</text>
|
|
</view>
|
|
<!-- <view class="right">
|
|
<image class="icon" src="/static/smallSuccess.png" mode="aspectFit"></image>
|
|
<text class="text">已验证</text>
|
|
</view> -->
|
|
</view>
|
|
<view :class="[authStatus.email == 1 && ifImprove == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'identity' ? 'active' : '']" @click="handleSelect('identity')">
|
|
<view class="left">
|
|
<image class="icon" src="/static/user/IDCard.svg" mode="aspectFit"></image>
|
|
<text>3.{{ $t('form.personalData.personalInformation.identityVerification') }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<image class="icon" :src="authStatusMap.identity?.[authStatus?.identity]?.icon" mode="aspectFit"></image>
|
|
<text class="text" :style="{ color: authStatusMap.identity?.[authStatus?.identity]?.color }">{{ authStatusMap.identity?.[authStatus?.identity]?.label }}</text>
|
|
</view>
|
|
</view>
|
|
<view :class="[authStatus.email == 1 && ifImprove == 1 ? 'authStatusItem' : 'authStatusItemDisable', selectedItem === 'address' ? 'active' : '']" @click="handleSelect('address')">
|
|
<view class="left">
|
|
<image class="icon" src="/static/user/position.svg" mode="aspectFit"></image>
|
|
<text>4.{{ $t('form.personalData.personalInformation.residentialVerification') }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<image class="icon" :src="authStatusMap.address?.[authStatus?.address]?.icon" mode="aspectFit"></image>
|
|
<text class="text" :style="{ color: authStatusMap.address?.[authStatus?.address]?.color }">{{ authStatusMap.address?.[authStatus?.address]?.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view>
|
|
<button class="primaryButton" v-show="getBtnVisible()" :disabled="getBtnDisabled()" @click="handleCheckOrComplete">
|
|
{{ getBtnText() }}
|
|
</button>
|
|
</view> -->
|
|
<view class="stepsWrapper">
|
|
<view class="steps">
|
|
<view :class="['stepItem', currentStep >= 1 ? 'active' : '']"></view>
|
|
<view :class="['stepItem', currentStep >= 2 ? 'active' : '']"></view>
|
|
<view :class="['stepItem', currentStep >= 3 ? 'active' : '']"></view>
|
|
</view>
|
|
<text>{{ $t('form.personalData.personalInformation.progress') + `${completePercent}` }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PersonalInformation',
|
|
props: {
|
|
authStatus: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
},
|
|
ifImprove:{
|
|
type: Number,
|
|
required: true,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
authStatusMap: {
|
|
address: {
|
|
0: {
|
|
label: this.$t('form.personalData.personalInformation.notVerified'),
|
|
icon: '/static/smallWarning.png',
|
|
color: '#FF5733',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
},
|
|
1: {
|
|
label: this.$t('form.personalData.personalInformation.verified'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: true,
|
|
btnText: this.$t('common.view'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
},
|
|
2: {
|
|
label: this.$t('form.personalData.personalInformation.underReview'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: true,
|
|
btnVisible: true
|
|
}
|
|
},
|
|
email: {
|
|
0: {
|
|
label: this.$t('form.personalData.personalInformation.notVerified'),
|
|
icon: '/static/smallWarning.png',
|
|
color: '#FF5733',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
},
|
|
1: {
|
|
label: this.$t('form.personalData.personalInformation.verified'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: true,
|
|
btnText: this.$t('common.view'),
|
|
btnDisabled: false,
|
|
btnVisible: false
|
|
}
|
|
},
|
|
userInfo: {
|
|
0: {
|
|
label: this.$t('form.personalData.personalInformation.notVerified'),
|
|
icon: '/static/smallWarning.png',
|
|
color: '#FF5733',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: true,
|
|
btnVisible: true
|
|
},
|
|
1: {
|
|
label: this.$t('form.personalData.personalInformation.verified'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: true,
|
|
btnText: this.$t('common.view'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
}
|
|
},
|
|
identity: {
|
|
0: {
|
|
label: this.$t('form.personalData.personalInformation.notVerified'),
|
|
icon: '/static/smallWarning.png',
|
|
color: '#FF5733',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
},
|
|
1: {
|
|
label: this.$t('form.personalData.personalInformation.verified'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: true,
|
|
btnText: this.$t('common.view'),
|
|
btnDisabled: false,
|
|
btnVisible: true
|
|
},
|
|
2: {
|
|
label: this.$t('form.personalData.personalInformation.underReview'),
|
|
icon: '/static/smallSuccess.png',
|
|
color: '#14CC9E',
|
|
proven: false,
|
|
btnText: this.$t('form.verifyNow'),
|
|
btnDisabled: true,
|
|
btnVisible: true
|
|
}
|
|
}
|
|
},
|
|
selectedItem: 'email'
|
|
};
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack();
|
|
},
|
|
getBtnDisabled() {
|
|
if ((this.selectedItem === 'identity' || this.selectedItem === 'address') && this.ifImprove == 0){
|
|
return true;
|
|
}
|
|
if (this.selectedItem === 'email' || (this.authStatus.email == 1)) {
|
|
if (this.selectedItem === 'address' && this.authStatus.identity == 0) {
|
|
return true;
|
|
}
|
|
return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.disabled ?? false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
getItemDisabled(item) {
|
|
if (this.selectedItem === 'email' || this.authStatus.email == 1) {
|
|
if (this.selectedItem === 'address' && this.authStatus.identity == 0) {
|
|
return true;
|
|
}
|
|
return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.disabled ?? false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
getBtnVisible() {
|
|
return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.btnVisible ?? true;
|
|
},
|
|
getProven() {
|
|
return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.proven ?? false;
|
|
},
|
|
getBtnText() {
|
|
return this.authStatusMap[this.selectedItem]?.[this.authStatus?.[this.selectedItem]]?.btnText ?? this.$t('common.view');
|
|
},
|
|
handleCheckOrComplete() {
|
|
uni.navigateTo({
|
|
url: `/pages/user/personalInformation/${this.selectedItem}/index?proven=${this.getProven()}&authStatus=${JSON.stringify(this.authStatus)}`
|
|
});
|
|
},
|
|
handleSelect(val) {
|
|
this.selectedItem = val;
|
|
if (this.getBtnVisible() && !this.getBtnDisabled()) {
|
|
this.handleCheckOrComplete()
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
currentStep() {
|
|
const keys = Object.keys(this.authStatus);
|
|
return keys.filter((key) => this.authStatus[key] === 1).length;
|
|
},
|
|
completePercent() {
|
|
const keys = Object.keys(this.authStatus);
|
|
return `${keys.filter((key) => this.authStatus[key] === 1).length} / ${keys.length}`;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|