148 lines
3.9 KiB
Vue
148 lines
3.9 KiB
Vue
|
<template>
|
||
|
|
<view class="bankCardWrapper" @click="onClick">
|
||
|
|
<view class="decoration">
|
||
|
|
<view class="left"></view>
|
||
|
|
<view class="right"></view>
|
||
|
|
</view>
|
||
|
|
<view class="bankCardContent">
|
||
|
|
<view class="cardTitle">
|
||
|
|
<view class="bankName">{{ values.bank_name }}</view>
|
||
|
|
<view class="bankStatusWrapper">
|
||
|
|
<view
|
||
|
|
class="bankStatus"
|
||
|
|
:style="{
|
||
|
|
color: applyStatusMap[getStatus()]?.color,
|
||
|
|
backgroundColor: applyStatusMap[getStatus()]?.bgc
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
{{ applyStatusMap[getStatus()]?.text ?? '-' }}
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
v-if="values.bank_standby_1 !== 'B1' && Number(values.apply_status) === 0 && Number(values.verify_email) === 0"
|
||
|
|
class="toVerifyBtn"
|
||
|
|
@click.stop="() => toVerify(values)"
|
||
|
|
>
|
||
|
|
{{ this.$t('form.personalData.financialInformation.bankStatus.toVerify') }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="divider"></view>
|
||
|
|
<view class="bankCardDetails">
|
||
|
|
<view class="detailItem">
|
||
|
|
<view class="point"></view>
|
||
|
|
<text>{{ values.bank_no }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="detailItem">
|
||
|
|
<view class="point"></view>
|
||
|
|
<text>{{ values.bank_currency }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="detailItem">
|
||
|
|
<view class="point"></view>
|
||
|
|
<text>{{ values.bank_cards }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="detailItem" v-if="values.bank_standby_1 === 'B1'">
|
||
|
|
<view class="point"></view>
|
||
|
|
<text>{{ values.bank_sub_name }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { sendBankMail } from '@/services/user/completeInfo.ts';
|
||
|
|
export default {
|
||
|
|
name: 'BankCard',
|
||
|
|
props: {
|
||
|
|
values: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
onClick: {
|
||
|
|
type: Function,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
current: 0,
|
||
|
|
items: ['全部账户', this.$t('form.bankAccount.label'), this.$t('form.personalData.financialInformation.digitalCurrency.label')],
|
||
|
|
applyStatusMap: {
|
||
|
|
approved: {
|
||
|
|
color: 'rgba(67, 207, 124, 1)',
|
||
|
|
bgc: 'rgba(67, 207, 124, 0.2)',
|
||
|
|
text: this.$t('form.personalData.financialInformation.bankStatus.approved')
|
||
|
|
},
|
||
|
|
verified: {
|
||
|
|
color: 'rgba(67, 207, 124, 1)',
|
||
|
|
bgc: 'rgba(67, 207, 124, 0.2)',
|
||
|
|
text: this.$t('form.personalData.financialInformation.bankStatus.verified')
|
||
|
|
},
|
||
|
|
pending: {
|
||
|
|
color: 'rgba(255, 195, 0, 1)',
|
||
|
|
bgc: 'rgba(255, 195, 0, 0.2)',
|
||
|
|
text: this.$t('form.personalData.financialInformation.bankStatus.pending')
|
||
|
|
},
|
||
|
|
unverified: {
|
||
|
|
color: 'rgba(255, 195, 0, 1)',
|
||
|
|
bgc: 'rgba(255, 195, 0, 0.2)',
|
||
|
|
text: this.$t('form.personalData.financialInformation.bankStatus.unverified')
|
||
|
|
},
|
||
|
|
rejected: {
|
||
|
|
color: 'rgba(255, 87, 51, 1)',
|
||
|
|
bgc: 'rgba(255, 87, 51, 0.2)',
|
||
|
|
text: this.$t('form.personalData.financialInformation.bankStatus.rejected')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getStatus() {
|
||
|
|
if (this.values.bank_standby_1 === 'B1') {
|
||
|
|
switch (Number(this.values.apply_status)) {
|
||
|
|
case 0:
|
||
|
|
return 'approved';
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
return 'pending';
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
return 'rejected';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
switch (true) {
|
||
|
|
case Number(this.values.apply_status) === 0 && Number(this.values.verify_email) === 1:
|
||
|
|
return 'verified';
|
||
|
|
break;
|
||
|
|
case Number(this.values.apply_status) === 0 && Number(this.values.verify_email) === 0:
|
||
|
|
return 'unverified';
|
||
|
|
break;
|
||
|
|
case Number(this.values.apply_status) === 1:
|
||
|
|
return 'pending';
|
||
|
|
break;
|
||
|
|
case Number(this.values.apply_status) === 2:
|
||
|
|
return 'rejected';
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async toVerify(bank) {
|
||
|
|
const res = await sendBankMail({ id: bank.id });
|
||
|
|
if (res && res.code === 0) {
|
||
|
|
this.$cusModal.showModal({
|
||
|
|
type: 'message',
|
||
|
|
status: 'success',
|
||
|
|
contentText: this.$t('form.personalData.financialInformation.saveBankStatus.B1_1')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './index.scss';
|
||
|
|
</style>
|