feat: 初始化
This commit is contained in:
@ -0,0 +1,35 @@
|
||||
.bankCardWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 92px;
|
||||
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 {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 15px;
|
||||
height: 100%;
|
||||
.addText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view class="bankCardWrapper">
|
||||
<!-- <view class="decoration">-->
|
||||
<!-- <view class="left"></view>-->
|
||||
<!-- <view class="right"></view>-->
|
||||
<!-- </view>-->
|
||||
<view class="bankCardContent">
|
||||
<image @click="onClick" src="/static/user/add.png" mode="aspectFit" style="width: 44px; height: 44px; cursor: pointer"></image>
|
||||
<view class="addText">
|
||||
<!-- <image src="/static/user/bankCard.png" mode="aspectFit" style="width: 22px; height: 17px"></image>-->
|
||||
<text>{{ addText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AddBankCard',
|
||||
props: {
|
||||
onClick: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
addText: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
data() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
105
pages/user/financialInformation/components/bankCard/index.scss
Normal file
105
pages/user/financialInformation/components/bankCard/index.scss
Normal file
@ -0,0 +1,105 @@
|
||||
.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 14px 20px 12px;
|
||||
.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;
|
||||
font-size: 10px;
|
||||
}
|
||||
.bankType {
|
||||
color: #333333;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.toVerifyBtn {
|
||||
color: #29bbe4;
|
||||
}
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
|
||||
.controlsIcon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: #F7F8FA;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
167
pages/user/financialInformation/components/bankCard/index.vue
Normal file
167
pages/user/financialInformation/components/bankCard/index.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="bankCardWrapper">
|
||||
<!-- <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>
|
||||
<image v-if="values.bank_standby_1 == 'B1'" src="/static/user/yhzh.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
|
||||
<image v-else src="/static/user/szhb.svg" mode="aspectFit" style="width: 36px; height: 36px"></image>
|
||||
</view>
|
||||
<text v-if="values.bank_standby_1 == 'B1'" class="bankType">{{ $t('form.bankAccount.label') }}</text>
|
||||
<text v-else class="bankType">{{ $t('form.personalData.financialInformation.digitalCurrency.label') }}</text>
|
||||
<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"-->
|
||||
<!-- class="toVerifyBtn"-->
|
||||
<!-- @click.stop="() => toVerify(values)"-->
|
||||
<!-- >-->
|
||||
<!-- {{ this.$t('form.personalData.financialInformation.bankStatus.toVerify') }}-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<view class="controls">
|
||||
<view class="controlsIcon" @click="onClick" ><image src="/static/user/edit.svg" mode="aspectFit" style="width: 14px; height: 14px"></image></view>
|
||||
<view v-show="values.apply_status == 2" class="controlsIcon" @click="handleDeleteBank"><image src="/static/user/del.svg" mode="aspectFit" style="width: 12px; height: 12px"></image></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';
|
||||
import UploadImage from "../../../../../uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue";
|
||||
export default {
|
||||
name: 'BankCard',
|
||||
components: {UploadImage},
|
||||
props: {
|
||||
values: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({})
|
||||
},
|
||||
onClick: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
handleDeleteBank: {
|
||||
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')
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
inject: ["showDialog"],
|
||||
methods: {
|
||||
showDialog(bank = {}) {
|
||||
this.showDialog(bank);
|
||||
},
|
||||
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>
|
100
pages/user/financialInformation/index.scss
Normal file
100
pages/user/financialInformation/index.scss
Normal file
@ -0,0 +1,100 @@
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
.swiper {
|
||||
margin: 14px 0 18px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
column-gap: 6px;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.bankCardList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.detailModal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
.detailContent {
|
||||
padding: 0px 29px 0px;
|
||||
max-height: 500px;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
::v-deep.uni-subtitle {
|
||||
margin-bottom: 8px !important;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
::v-deep.uni-select {
|
||||
background: #F7F8FA !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.closeIcon {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 12px;
|
||||
color: #333333;
|
||||
padding: 12px;
|
||||
margin: 24px 0;
|
||||
box-shadow: -1px 0 5px 1px rgba(0, 0, 0, 0.1);
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 34px;
|
||||
}
|
||||
.value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #29bbe4;
|
||||
line-height: 52px;
|
||||
}
|
||||
}
|
||||
.btnsWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
.delBtn {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bankImgWrapper {
|
||||
margin-top: 20px;
|
||||
::v-deep .uni-file-picker {
|
||||
height: 100px;
|
||||
}
|
||||
::v-deep .uni-file-picker__container {
|
||||
height: 100px;
|
||||
}
|
||||
::v-deep .file-picker__box {
|
||||
padding-top: 0px;
|
||||
width: 100% !important;
|
||||
max-width: 152px;
|
||||
height: 100% !important;
|
||||
}
|
||||
::v-deep .uni-forms-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
441
pages/user/financialInformation/index.vue
Normal file
441
pages/user/financialInformation/index.vue
Normal file
@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:' + (show ? 'visible' : 'hidden')"></page-meta>
|
||||
<view>
|
||||
|
||||
|
||||
<view class="bankCardList">
|
||||
<view v-for="bank in rawBankList" :key="bank.id">
|
||||
<BankCard :values="bank" :onClick="() => showDialog(bank)" :handleDeleteBank="() => handleDeleteBank(bank.id)" />
|
||||
</view>
|
||||
<AddBankCard :onClick="() => showDialog()" addType="B1" :addText="$t('form.personalData.financialInformation.addBankCard')" />
|
||||
</view>
|
||||
|
||||
<uni-popup ref="alertDialog" :isMaskClick="false" type="bottom">
|
||||
<view class="detailModal">
|
||||
<uni-icons type="closeempty" size="17" class="closeIcon" @click="closeDialog"></uni-icons>
|
||||
<scroll-view :style="{ height: getType() === 'B1' ? '80vh' : '100%', paddingTop: '46px', boxSizing: 'border-box' }" scroll-y="true">
|
||||
<view class="detailContent">
|
||||
<uni-forms ref="addCardForm" :modelValue="addCardFormData" :rules="addCardFormRules">
|
||||
<uni-forms-item name="bank_type">
|
||||
<text class="uni-subtitle">{{ $t(`form.walletType.label`) }}</text>
|
||||
<uni-data-select
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
:localdata="bankTypeOptions"
|
||||
v-model="current"
|
||||
@change="bankTypeChange"
|
||||
></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_no">
|
||||
<text class="uni-subtitle" v-show="current === 1 || current === '1'">{{ $t(`form.personalData.financialInformation.bankNo.label_B1`) }}</text>
|
||||
<text class="uni-subtitle" v-show="current != 1">{{ $t(`form.personalData.financialInformation.bankNo.label_B2`) }}</text>
|
||||
<uni-easyinput :disabled="current != 1 && addCardFormData.apply_status == 0" trim="both" primaryColor="#29BBE4" v-model="addCardFormData.bank_no"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="first_name">
|
||||
<text class="uni-subtitle">{{ $t('form.firstName.label') }}</text>
|
||||
<uni-easyinput trim="both" primaryColor="#29BBE4" :disabled="addCardFormData.id" v-model="addCardFormData.first_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="last_name">
|
||||
<text class="uni-subtitle">{{ $t('form.lastName.label') }}</text>
|
||||
<uni-easyinput trim="both" primaryColor="#29BBE4" :disabled="addCardFormData.id" v-model="addCardFormData.last_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_name" v-show="current === 1 || current === '1'">
|
||||
<text class="uni-subtitle">{{ $t(`form.personalData.financialInformation.bankName.label_B1`) }}</text>
|
||||
<uni-easyinput trim="both" primaryColor="#29BBE4" v-model="addCardFormData.bank_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_sub_name" v-show="current === 1 || current === '1'">
|
||||
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankSubName.label') }}</text>
|
||||
<uni-easyinput trim="both" primaryColor="#29BBE4" v-model="addCardFormData.bank_sub_name"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="bank_remark" v-show="current === 1 || current === '1'">
|
||||
<text class="uni-subtitle">{{ $t('form.addressDetailed.label') }}</text>
|
||||
<uni-easyinput trim="both" primaryColor="#29BBE4" v-model="addCardFormData.bank_remark"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_swift" v-show="current === 1 || current === '1'">
|
||||
<text class="uni-subtitle">SWIFT/ABA/IBAN</text>
|
||||
<uni-easyinput trim="all" primaryColor="#29BBE4" v-model="addCardFormData.bank_swift"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_currency">
|
||||
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankCurrency.label') }}</text>
|
||||
<uni-data-select
|
||||
:placeholder="$t('form.pleaseSelect')"
|
||||
:emptyTips="$t('common.empty')"
|
||||
:localdata="currencyOptions"
|
||||
v-model="addCardFormData.bank_currency"
|
||||
:disabled="current != 1 &&addCardFormData.apply_status == 0"
|
||||
placement="top"
|
||||
></uni-data-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_img_0" v-if="needBankImg" >
|
||||
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankImg.label_B1') + $t('form.personalData.financialInformation.bankImg.front') }}</text>
|
||||
<view class="bankImgWrapper" >
|
||||
<uni-file-picker ref="bank_img_0" v-model="bankImg0" file-mediatype="image" mode="grid" :limit="1" @select="(e) => select(e, 'bank_img_0')" />
|
||||
<view style="max-width: 140px">
|
||||
<Progress :progress="bank_img_0_progress" :error="bank_img_0_error" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="bank_img_1" v-if="needBankImg" >
|
||||
<text class="uni-subtitle">{{ $t('form.personalData.financialInformation.bankImg.label_B1') + $t('form.personalData.financialInformation.bankImg.back') }}</text>
|
||||
<view class="bankImgWrapper" >
|
||||
<uni-file-picker ref="bank_img_1" v-model="bankImg1" file-mediatype="image" mode="grid" :limit="1" @select="(e) => select(e, 'bank_img_1')" />
|
||||
<view style="max-width: 140px">
|
||||
<Progress :progress="bank_img_1_progress" :error="bank_img_1_error" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="btnsWrapper" style="padding: 0 0px 30px">
|
||||
<!-- <button v-show="addCardFormData.id && !(this.current != 1)" class="primaryButton delBtn" :disabled="delBtnLoading" @click="handleDeleteBank">-->
|
||||
<!-- <image v-show="delBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>-->
|
||||
<!-- {{ $t('common.delete') }}-->
|
||||
<!-- </button>-->
|
||||
<button class="secondaryButton" @click="closeDialog">
|
||||
{{ $t('common.cancelText') }}
|
||||
</button>
|
||||
<button class="primaryButton" :disabled="bank_img_0_progress !== 100 || bank_img_1_progress !== 100 || submitBtnLoading" @click="handleAddBank">
|
||||
<image v-show="submitBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
|
||||
{{ $t('form.submit') }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BankCard from './components/bankCard/index.vue';
|
||||
import AddBankCard from './components/addBankCard/index.vue';
|
||||
import Segmented from '@/pages/components/segmented/index.vue';
|
||||
import { getBankList } from '@/services/user.ts';
|
||||
import { saveBank } from '@/services/user/completeInfo.ts';
|
||||
import { getDictByCode, getImgPath, imgUpload } from '@/services/common.ts';
|
||||
export default {
|
||||
name: 'FinancialInformation',
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
current: 1,
|
||||
B1Show:true,
|
||||
bankImg0: {
|
||||
// url: ''
|
||||
},
|
||||
bankImg1: {
|
||||
// url: ''
|
||||
},
|
||||
imgBaseUrl: '',
|
||||
bank_img_0_progress: 100,
|
||||
bank_img_1_progress: 100,
|
||||
bank_img_0_error: false,
|
||||
bank_img_1_error: false,
|
||||
rawBankList: [],
|
||||
B1BankList: [],
|
||||
B2BankList: [],
|
||||
B3BankList: [],
|
||||
bankTypeOptions: [{text:this.$t('form.bankAccount.label'),value:1},{text:this.$t('form.personalData.financialInformation.digitalCurrency.label'),value:2}],
|
||||
currencyOptions: [],
|
||||
addCardFormData: {},
|
||||
addCardFormRules: {
|
||||
bank_no: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseEnter')
|
||||
}
|
||||
]
|
||||
},
|
||||
first_name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseEnter')
|
||||
}
|
||||
]
|
||||
},
|
||||
last_name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseEnter')
|
||||
}
|
||||
]
|
||||
},
|
||||
bank_name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseEnter')
|
||||
}
|
||||
]
|
||||
},
|
||||
bank_sub_name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseEnter')
|
||||
}
|
||||
]
|
||||
},
|
||||
bank_currency: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.pleaseSelect')
|
||||
}
|
||||
]
|
||||
},
|
||||
bank_img_0: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.personalData.financialInformation.bankImg.required')
|
||||
}
|
||||
]
|
||||
},
|
||||
bank_img_1: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: this.$t('form.personalData.financialInformation.bankImg.required')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
currentBank: {},
|
||||
listLodaing: false,
|
||||
submitBtnLoading: false,
|
||||
delBtnLoading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
needBankImg() {
|
||||
if (this.addCardFormData && this.addCardFormData.bank_currency === 'CNY' && this.getType() === 'B1') {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bankTypeChange(val){
|
||||
this.current = val;
|
||||
},
|
||||
async getImgPathData() {
|
||||
const res = await getImgPath();
|
||||
if (res && res.code === 0) {
|
||||
this.imgBaseUrl = res.data;
|
||||
}
|
||||
},
|
||||
onClickItem(e) {
|
||||
if (this.current != e.currentIndex) {
|
||||
this.current = e.currentIndex;
|
||||
}
|
||||
},
|
||||
showDialog(bank = {}) {
|
||||
console.log(bank)
|
||||
this.addCardFormData = { ...bank };
|
||||
this.currentBank = { ...bank };
|
||||
this.bankImg0 = bank.bank_img_0 ? ({url: this.imgBaseUrl + bank.bank_img_0}) : {}
|
||||
this.bankImg1 = bank.bank_img_1 ? ({url: this.imgBaseUrl + bank.bank_img_1}) : {}
|
||||
this.current = bank.bank_standby_1 == 'B1' ? 1 : 2
|
||||
this.show = false;
|
||||
this.$refs.alertDialog.open();
|
||||
},
|
||||
closeDialog() {
|
||||
this.show = true;
|
||||
this.$refs.alertDialog.close();
|
||||
},
|
||||
getType() {
|
||||
if (this.current === 1) {
|
||||
return 'B1';
|
||||
} else if (this.current === 2) {
|
||||
return 'B2';
|
||||
} else if (this.current === 3) {
|
||||
return 'B3';
|
||||
} else {
|
||||
return this.currentBank?.bank_standby_1;
|
||||
}
|
||||
},
|
||||
filterB1BankList(bankList) {
|
||||
this.B1BankList = bankList.filter((bank) => bank.bank_standby_1 === 'B1');
|
||||
},
|
||||
filterB2BankList(bankList) {
|
||||
this.B2BankList = bankList.filter((bank) => bank.bank_standby_1 === 'B2');
|
||||
},
|
||||
filterB3BankList(bankList) {
|
||||
this.B3BankList = bankList.filter((bank) => bank.bank_standby_1 === 'B3');
|
||||
},
|
||||
async getBankListData() {
|
||||
this.listLodaing = true;
|
||||
const res = await getBankList();
|
||||
if (res && res.code === 0) {
|
||||
this.rawBankList = res.data ? res.data.filter(v => v.bank_standby_1 != 'B3') : [];
|
||||
this.filterB1BankList(this.rawBankList);
|
||||
this.filterB2BankList(this.rawBankList);
|
||||
// this.filterB3BankList(res.data);
|
||||
}
|
||||
this.listLodaing = false;
|
||||
},
|
||||
async getCurrency() {
|
||||
const res = await getDictByCode('currency_type');
|
||||
if (res && res.code === 0) {
|
||||
this.currencyOptions = res.data?.map((item) => ({
|
||||
text: item.fun_item_text,
|
||||
value: item.fun_item_code
|
||||
}));
|
||||
}
|
||||
},
|
||||
async handleDeleteBank(id) {
|
||||
uni.showModal({
|
||||
content: this.$t('modal.deleteBankCardContent'),
|
||||
confirmColor: '#4DC0E5',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
this.delBtnLoading = true;
|
||||
const res = await saveBank({
|
||||
bank: [],
|
||||
del_bank_id_arr: [id]
|
||||
});
|
||||
this.delBtnLoading = false;
|
||||
this.closeDialog();
|
||||
if (res && res.code === 0) {
|
||||
this.$nextTick(() => {
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'success',
|
||||
contentText: this.$t('common.success.action'),
|
||||
onClose() {
|
||||
this.getBankListData();
|
||||
this.currentBank = {};
|
||||
}
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'warning',
|
||||
contentText: res.msg ?? this.$t('common.error.sysError')
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async handleAddBank() {
|
||||
const calidateFields =
|
||||
this.getType() === 'B1'
|
||||
? (
|
||||
this.addCardFormData.bank_currency=='CNY'?
|
||||
['bank_type', 'bank_no', 'first_name', 'last_name', 'bank_name', 'bank_sub_name', 'bank_remark', 'bank_swift', 'bank_currency','bank_img_0','bank_img_1']:
|
||||
['bank_type', 'bank_no', 'first_name', 'last_name', 'bank_name', 'bank_sub_name', 'bank_remark', 'bank_swift', 'bank_currency']
|
||||
)
|
||||
: ['bank_type', 'bank_no', 'first_name', 'last_name', 'bank_currency'];
|
||||
this.$refs.addCardForm.validateField(calidateFields).then(async (fields) => {
|
||||
fields.bank_standby_1 = this.getType();
|
||||
let params = {
|
||||
bank: [
|
||||
{
|
||||
id: this.currentBank.id ?? ''
|
||||
}
|
||||
]
|
||||
};
|
||||
Object.keys(fields).forEach((key) => {
|
||||
if (fields[key] !== this.currentBank[key]) {
|
||||
params.bank[0][key] = {
|
||||
nv: fields[key] ?? '',
|
||||
ov: this.currentBank[key] ?? '',
|
||||
edit_power: 1,
|
||||
bank_no: fields.bank_no
|
||||
};
|
||||
}
|
||||
});
|
||||
this.submitBtnLoading = true;
|
||||
const res = await saveBank(params);
|
||||
this.submitBtnLoading = false;
|
||||
if (res && res.code === 0) {
|
||||
this.closeDialog();
|
||||
this.getBankListData();
|
||||
const type = this.getType();
|
||||
this.currentBank = {};
|
||||
// 0需要审核,1审核通过,请邮箱验证,2审核通过
|
||||
if (type === 'B1') {
|
||||
uni.navigateTo({
|
||||
url: `/pages/user/financialInformation/saveBankResult/index?resCode=${res.data}&type=${type}`
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/user/financialInformation/saveBankResult/index?resCode=${res.data}&type=${type}&wa=${fields.bank_no}¤cy=${
|
||||
fields.bank_currency
|
||||
}`
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.closeDialog();
|
||||
this.$nextTick(() => {
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'warning',
|
||||
contentText: res.msg ?? this.$t('common.error.sysError')
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
async select(e, field) {
|
||||
this[`${field}_progress`] = 0;
|
||||
this[`${field}_error`] = false;
|
||||
let step = 1;
|
||||
const timer = setInterval(() => {
|
||||
if (this[`${field}_progress`] > 85) {
|
||||
step = 0.1;
|
||||
} else if (this[`${field}_progress`] > 35) {
|
||||
step = 0.8;
|
||||
} else if (this[`${field}_progress`] > 15) {
|
||||
step = 0.4;
|
||||
}
|
||||
if (this[`${field}_progress`] + step > 98) {
|
||||
clearInterval(timer);
|
||||
return;
|
||||
}
|
||||
this[`${field}_progress`] += step;
|
||||
}, 34);
|
||||
this.$refs[field].files[0].progress = 100;
|
||||
const res = await imgUpload(e);
|
||||
if (res && res.code === 0) {
|
||||
this[`${field}_progress`] = 100;
|
||||
this.addCardFormData[field] = res.data?.imgNameList?.[0];
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: this.$t('common.success.uploadSuccess')
|
||||
});
|
||||
} else {
|
||||
this[`${field}_error`] = true;
|
||||
this.$cusModal.showModal({
|
||||
type: 'message',
|
||||
status: 'warning',
|
||||
contentText: res.msg ?? this.$t('common.error.uploadError')
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.getImgPathData();
|
||||
this.getBankListData();
|
||||
this.getCurrency();
|
||||
},
|
||||
components: {
|
||||
Segmented,
|
||||
BankCard,
|
||||
AddBankCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
26
pages/user/financialInformation/saveBankResult/index.scss
Normal file
26
pages/user/financialInformation/saveBankResult/index.scss
Normal file
@ -0,0 +1,26 @@
|
||||
.container {
|
||||
padding: 0 16px 24px;
|
||||
.pageTitle {
|
||||
margin: 14px 0 15px;
|
||||
}
|
||||
.resultContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
align-items: center;
|
||||
margin-top: 118px;
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.backBtn {
|
||||
width: 100%;
|
||||
margin-top: 116px;
|
||||
}
|
||||
.b2Info {
|
||||
padding-left: 52px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
73
pages/user/financialInformation/saveBankResult/index.vue
Normal file
73
pages/user/financialInformation/saveBankResult/index.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<NavBar />
|
||||
<view class="container">
|
||||
<view class="pageTitle">
|
||||
<PageTitle :title="$t('personal.personalData')" />
|
||||
</view>
|
||||
<view class="resultContent" >
|
||||
<image src="/static/user/underApproval.png" mode="aspectFit" style="width: 59px; height: 54px"></image>
|
||||
<text class="title">{{ $t('form.personalData.financialInformation.saveBankStatus.B1_0') }}</text>
|
||||
<button class="primaryButton backBtn" @click="back">{{ $t('common.back') }}</button>
|
||||
</view>
|
||||
<!-- <view class="resultContent" v-if="type === 'B1' && resCode === '1'">-->
|
||||
<!-- <image src="/static/success.png" mode="aspectFit" style="width: 59px; height: 54px"></image>-->
|
||||
<!-- <text class="title">{{ $t('form.personalData.financialInformation.saveBankStatus.B1_1') }}</text>-->
|
||||
<!-- <button class="primaryButton backBtn" @click="back">{{ $t('common.back') }}</button>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="resultContent" v-if="type === 'B1' && resCode === '2'">-->
|
||||
<!-- <image src="/static/success.png" mode="aspectFit" style="width: 59px; height: 54px"></image>-->
|
||||
<!-- <text class="title">{{ $t('form.personalData.financialInformation.saveBankStatus.B1_2') }}</text>-->
|
||||
<!-- <button class="primaryButton backBtn" @click="back">{{ $t('common.back') }}</button>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="resultContent" v-if="type === 'B2'">-->
|
||||
<!-- <image src="/static/success.png" mode="aspectFit" style="width: 59px; height: 54px"></image>-->
|
||||
<!-- <text class="title">{{ $t('form.personalData.financialInformation.saveBankStatus.B2') }}</text>-->
|
||||
<!-- <text class="b2Info">{{ $t('form.personalData.financialInformation.bankNo.label_B2') }}: {{ wa }}</text>-->
|
||||
<!-- <text class="b2Info">{{ $t('form.personalData.financialInformation.bankCurrency.label') }}: {{ currency }}</text>-->
|
||||
<!-- <button class="primaryButton backBtn" @click="back">{{ $t('common.back') }}</button>-->
|
||||
<!-- </view>-->
|
||||
<!-- <view class="resultContent" v-if="type === 'B3'">-->
|
||||
<!-- <image src="/static/success.png" mode="aspectFit" style="width: 59px; height: 54px"></image>-->
|
||||
<!-- <text class="title">{{ $t('form.personalData.financialInformation.saveBankStatus.B3') }}</text>-->
|
||||
<!-- <text class="b2Info">{{ $t('form.personalData.financialInformation.bankNo.label_B2') }}: {{ wa }}</text>-->
|
||||
<!-- <text class="b2Info">{{ $t('form.personalData.financialInformation.bankCurrency.label') }}: {{ currency }}</text>-->
|
||||
<!-- <button class="primaryButton backBtn" @click="back">{{ $t('common.back') }}</button>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
resCode: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '2'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'B1'
|
||||
},
|
||||
wa: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
currency: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
Reference in New Issue
Block a user