feat: 初始化
This commit is contained in:
George
245
pages/user/personalInformation/index.vue
Normal file
245
pages/user/personalInformation/index.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user