feat: 初始化
This commit is contained in:
George
@ -0,0 +1,85 @@
|
||||
.bankCardWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 174px;
|
||||
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);
|
||||
.decoration {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
flex-shrink: 0;
|
||||
.left {
|
||||
flex: 0 1 95px;
|
||||
background-color: #0f3675;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
background-color: #29bbe4;
|
||||
}
|
||||
}
|
||||
.bankCardContent {
|
||||
padding: 12px 12px 20px 34px;
|
||||
.cardTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.bankName {
|
||||
height: 28px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 28px;
|
||||
}
|
||||
.bankStatusWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
font-size: 12px;
|
||||
.bankStatus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0px 7px;
|
||||
min-width: 44px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.toVerifyBtn {
|
||||
color: #29bbe4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
flex-shrink: 0;
|
||||
height: 1px;
|
||||
background-color: #e5e5e5;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.bankCardDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 6px;
|
||||
width: 100%;
|
||||
.detailItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 11px;
|
||||
height: 17px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
.point {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
background-color: #0f3675;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
&>text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
147
pages/user/financialInformation/components/bankCard/index.vue
Normal file
147
pages/user/financialInformation/components/bankCard/index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user