|
|
@@ -1,481 +1,571 @@
|
|
|
<template>
|
|
|
- <uni-popup ref="popupRef" type="center" background-color="#fff">
|
|
|
- <view class="dialog-container">
|
|
|
- <view class="dialog-header">
|
|
|
- <text class="dialog-title" v-t="typeMap[form.type]"></text>
|
|
|
- <view class="dialog-close" @click="close">
|
|
|
- <text>×</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <uni-forms ref="formRef" :rules="rules" :model="form" labelWidth="200" label-position="top"
|
|
|
- validate-trigger="submit" class="crm-form">
|
|
|
- <uni-row class="form-row uni-row1">
|
|
|
- <template v-if="form.type === 1">
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item>
|
|
|
- <cwg-file-picker v-model="form.bankFront" :editable="editingId === form.id" :limit="1"
|
|
|
- uploadUrl="/custom/bank/upload" :baseUrl="updateUrl" :imageWidth="150"
|
|
|
- :imageHeight="150" uploadText="点击上传" replaceText="点击替换" noImageText="暂无图片"
|
|
|
- :showPreviewDelete="editingId === form.id"
|
|
|
- @update:modelValue="(val) => handleFileUpdate(val, form, 'bankFront')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="username"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankName')" name="bankName">
|
|
|
- <cwg-combox :clearable="false" :filterable="true" v-model:value="form.bankName"
|
|
|
- :options="bankOptions" :placeholder="t('placeholder.choose')"
|
|
|
- @change="onStateChange" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')" name="bankCardNum">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')"
|
|
|
- name="bankBranchName">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankBranchName"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </template>
|
|
|
- <template v-if="form.type === 4">
|
|
|
- <!-- 区块链名称 -->
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item name="addressName" :label="t('blockchain.item3')">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.addressName"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <!-- 钱包地址 -->
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item name="address" :label="t('blockchain.item4')">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.address"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </template>
|
|
|
- <template v-if="form.type === 2">
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="username" :disabled="true"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')" name="bankCardNum">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankName')" name="bankName">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankName"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')" name="bankAddr">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankAddr"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')" name="swiftCode">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.swiftCode"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankCode')" name="bankCode">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankCode"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item
|
|
|
- :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.agencyNo"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </template>
|
|
|
- <template v-if="form.type === 3">
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="username" :disabled="true"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')" name="bankCardNum">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')"
|
|
|
- name="expiryYearMonth">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.expiryYearMonth"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item :label="t('CVV')">
|
|
|
- <uni-easyinput :clearable="false" v-model="form.cvv"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </template>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item class="checkbox-item" prop="defaultBank">
|
|
|
- <uni-data-checkbox v-model="form.defaultBank" multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </uni-forms>
|
|
|
- <view class="dialog-footer">
|
|
|
- <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>
|
|
|
- <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>
|
|
|
- </view>
|
|
|
+ <uni-popup ref="popupRef" type="center" background-color="#fff">
|
|
|
+ <view class="dialog-container">
|
|
|
+ <view class="dialog-header">
|
|
|
+ <text class="dialog-title" v-t="typeMap[form.type]"></text>
|
|
|
+ <view class="dialog-close" @click="close">
|
|
|
+ <text>×</text>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
+ </view>
|
|
|
+ <uni-forms ref="formRef" :rules="rules" :model="form" labelWidth="200" label-position="top"
|
|
|
+ validate-trigger="submit" class="crm-form">
|
|
|
+ <uni-row class="form-row uni-row1">
|
|
|
+ <template v-if="form.type === 1">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <uni-forms-item>
|
|
|
+ <cwg-file-picker-wrapper
|
|
|
+ v-model:value="form.bankFront"
|
|
|
+ :limit="1"
|
|
|
+ uploadUrl="/custom/bank/upload"
|
|
|
+ :baseUrl="updateUrl"
|
|
|
+ :imageWidth="200"
|
|
|
+ :imageHeight="200"
|
|
|
+ uploadText="点击上传"
|
|
|
+ replaceText="点击替换"
|
|
|
+ noImageText="暂无图片"
|
|
|
+ @update:modelValue="(val) => handleFileUpdate(val, form, 'bankFront')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <view class="qrcode">
|
|
|
+ <cwg-icon name="icon_mobile" :size="36"/>
|
|
|
+ <view class="qr-code-wrapper">
|
|
|
+ <image v-if="mobile" :src="mobile" mode="aspectFit" class="qr-image" @click="previewImage" />
|
|
|
+ <view v-else class="image-slot">
|
|
|
+ <uni-icons type="image" size="30" color="#ccc"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :span="24">
|
|
|
+ <view class="updatePrompt">
|
|
|
+ <text class="icon-tip">ⓘ</text>
|
|
|
+ <text>{{ t('Drawer.Content.UpdatePrompt')}}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
+ <uni-easyinput disabled v-model="username"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankName')" name="bankName">
|
|
|
+ <cwg-combox :clearable="false" :filterable="true" v-model:value="form.bankName"
|
|
|
+ :options="bankOptions" :placeholder="t('placeholder.choose')"
|
|
|
+ />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')" name="bankCardNum">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')"
|
|
|
+ name="bankBranchName">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankBranchName"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.type === 4">
|
|
|
+ <!-- 区块链名称 -->
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item name="addressName" :label="t('blockchain.item3')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.addressName"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <!-- 钱包地址 -->
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item name="address" :label="t('blockchain.item4')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.address"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.type === 2">
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="username" :disabled="true"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')" name="bankCardNum">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankName')" name="bankName">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankName"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')" name="bankAddr">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankAddr"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')" name="swiftCode">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.swiftCode"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankCode')" name="bankCode">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankCode"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item
|
|
|
+ :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.agencyNo"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.type === 3">
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="username" :disabled="true"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')" name="bankCardNum">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.bankCardNum"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')"
|
|
|
+ name="expiryYearMonth">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.expiryYearMonth"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item :label="t('CVV')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="form.cvv"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </template>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item class="checkbox-item" prop="defaultBank">
|
|
|
+ <uni-data-checkbox v-model="form.defaultBank" multiple :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </uni-forms>
|
|
|
+ <view class="dialog-footer">
|
|
|
+ <view class="btn btn-cancel" @click="close">{{ t('Btn.Cancel') }}</view>
|
|
|
+ <view class="btn btn-confirm" @click="submit">{{ t('Btn.Confirm') }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, nextTick, computed, onMounted } from 'vue';
|
|
|
-import { useI18n } from 'vue-i18n';
|
|
|
-import { personalApi } from '@/service/personal';
|
|
|
-import useUserStore from '@/stores/use-user-store'
|
|
|
-const userStore = useUserStore()
|
|
|
-const { t, locale } = useI18n();
|
|
|
-const typeMap = {
|
|
|
+ import { ref, nextTick, computed, onMounted } from 'vue'
|
|
|
+ import { useI18n } from 'vue-i18n'
|
|
|
+ import { personalApi } from '@/service/personal'
|
|
|
+ import useUserStore from '@/stores/use-user-store'
|
|
|
+ import config from '@/config'
|
|
|
+
|
|
|
+ const userStore = useUserStore()
|
|
|
+ const { t, locale } = useI18n()
|
|
|
+ const updateUrl = config.Host80
|
|
|
+ const typeMap = {
|
|
|
4: 'blockchain.item2',
|
|
|
1: 'PersonalManagement.Title.ChinaUnionPayCard',
|
|
|
2: 'PersonalManagement.Title.BankWireTransfer',
|
|
|
- 3: 'PersonalManagement.Label.CreditCard'
|
|
|
-}
|
|
|
-const username = computed(() => {
|
|
|
- let first = userStore?.userInfo?.customInfo.firstName;
|
|
|
- let middle = userStore?.userInfo?.customInfo.middle;
|
|
|
- let lastName = userStore?.userInfo?.customInfo
|
|
|
- .lastName;
|
|
|
- return (first ? first + " " : "") +
|
|
|
- (middle ? middle + " " : "") +
|
|
|
- (lastName ? lastName : "");
|
|
|
-})
|
|
|
-interface AddBankForm {
|
|
|
+ 3: 'PersonalManagement.Label.CreditCard',
|
|
|
+ }
|
|
|
+ const username = computed(() => {
|
|
|
+ let first = userStore?.userInfo?.customInfo.firstName
|
|
|
+ let middle = userStore?.userInfo?.customInfo.middle
|
|
|
+ let lastName = userStore?.userInfo?.customInfo.lastName
|
|
|
+ return (first ? first + ' ' : '') +
|
|
|
+ (middle ? middle + ' ' : '') +
|
|
|
+ (lastName ? lastName : '')
|
|
|
+ })
|
|
|
+
|
|
|
+ interface AddBankForm {
|
|
|
addressName: string;
|
|
|
address: string;
|
|
|
checkboxGroup: string[];
|
|
|
-}
|
|
|
-const hobbys = computed(() => {
|
|
|
+ }
|
|
|
+
|
|
|
+ const hobbys = computed(() => {
|
|
|
let value = [
|
|
|
- { value: 1, text: t('blockchain.item8') },
|
|
|
+ { value: 1, text: t('blockchain.item8') },
|
|
|
]
|
|
|
switch (form.value.type) {
|
|
|
- case 1:
|
|
|
- value = [
|
|
|
- { value: 1, text: t('PersonalManagement.Title.DefaultBank') },
|
|
|
- ]
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- value = [
|
|
|
- { value: 1, text: t('PersonalManagement.Title.DefaultWire') },
|
|
|
- ]
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- value = [
|
|
|
- { value: 1, text: t('PersonalManagement.Title.DefaultCredit') },
|
|
|
- ]
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- value = [
|
|
|
- { value: 1, text: t('blockchain.item8') },
|
|
|
- ]
|
|
|
- break;
|
|
|
+ case 1:
|
|
|
+ value = [
|
|
|
+ { value: 1, text: t('PersonalManagement.Title.DefaultBank') },
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ value = [
|
|
|
+ { value: 1, text: t('PersonalManagement.Title.DefaultWire') },
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ value = [
|
|
|
+ { value: 1, text: t('PersonalManagement.Title.DefaultCredit') },
|
|
|
+ ]
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ value = [
|
|
|
+ { value: 1, text: t('blockchain.item8') },
|
|
|
+ ]
|
|
|
+ break
|
|
|
}
|
|
|
return value
|
|
|
|
|
|
-});
|
|
|
-const emit = defineEmits(["success"]);
|
|
|
+ })
|
|
|
+ const emit = defineEmits(['success'])
|
|
|
|
|
|
-const popupRef = ref<any>(null);
|
|
|
-const formRef = ref<any>(null);
|
|
|
+ const popupRef = ref<any>(null)
|
|
|
+ const formRef = ref<any>(null)
|
|
|
|
|
|
-const form = ref<AddBankForm>({});
|
|
|
+ const form = ref({
|
|
|
+ bankFront:''
|
|
|
+ })
|
|
|
|
|
|
-const rules = computed(() => ({
|
|
|
+ const rules = computed(() => ({
|
|
|
bankName: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
bankCardNum: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'change',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
bankBranchName: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
bankAddr: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
swiftCode: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
bankCode: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
expiryYearMonth: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
addressName: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
address: {
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- errorMessage: t('vaildate.input.empty'),
|
|
|
- trigger: 'blur',
|
|
|
- },
|
|
|
- ],
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: t('vaildate.input.empty'),
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
-}));
|
|
|
+ }))
|
|
|
|
|
|
-// 打开弹窗
|
|
|
-const open = async (type: number) => {
|
|
|
+ // 打开弹窗
|
|
|
+ const open = async (type: number) => {
|
|
|
form.value = {}
|
|
|
- await nextTick();
|
|
|
- form.value.type = type;
|
|
|
+ await nextTick()
|
|
|
+ form.value.type = type
|
|
|
getBankList()
|
|
|
- popupRef.value?.open();
|
|
|
-};
|
|
|
-
|
|
|
-// 关闭弹窗
|
|
|
-const close = () => {
|
|
|
- popupRef.value?.close();
|
|
|
- resetForm();
|
|
|
-};
|
|
|
-
|
|
|
-// 重置表单
|
|
|
-const resetForm = () => {
|
|
|
- form.value = {};
|
|
|
- formRef.value?.clearValidate();
|
|
|
-};
|
|
|
-
|
|
|
-// 提交表单
|
|
|
-const submit = async () => {
|
|
|
+ if (type === 1) {
|
|
|
+ getMobileInfo()
|
|
|
+ }
|
|
|
+ popupRef.value?.open()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关闭弹窗
|
|
|
+ const close = () => {
|
|
|
+ popupRef.value?.close()
|
|
|
+ resetForm()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ const resetForm = () => {
|
|
|
+ form.value = {}
|
|
|
+ formRef.value?.clearValidate()
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ const submit = async () => {
|
|
|
try {
|
|
|
- // 校验表单
|
|
|
- await formRef.value?.validate();
|
|
|
- // 调用 API 添加钱包
|
|
|
- const submitData = {
|
|
|
- ...form.value,
|
|
|
- expiryYear: form.value?.expiryYearMonth ? form.value.expiryYearMonth.split("/")[0] : undefined,
|
|
|
- expiryMonth: form.value?.expiryYearMonth ? form.value.expiryYearMonth.split("/")[1] : undefined,
|
|
|
- defaultBank: form.value?.defaultBank && form.value?.defaultBank[0] ? 1 : 0,
|
|
|
- };
|
|
|
- let res = await personalApi.customBankAdd({
|
|
|
- bankUname: username.value,
|
|
|
- ...submitData,
|
|
|
- });
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({ title: t('Msg.Success'), icon: 'success' });
|
|
|
- emit("success", res.data);
|
|
|
- } else {
|
|
|
- uni.showToast({ title: res.msg || t('common.error'), icon: 'none' });
|
|
|
- }
|
|
|
- close();
|
|
|
+ // 校验表单
|
|
|
+ await formRef.value?.validate()
|
|
|
+ // 调用 API 添加钱包
|
|
|
+ const submitData = {
|
|
|
+ ...form.value,
|
|
|
+ expiryYear: form.value?.expiryYearMonth ? form.value.expiryYearMonth.split('/')[0] : undefined,
|
|
|
+ expiryMonth: form.value?.expiryYearMonth ? form.value.expiryYearMonth.split('/')[1] : undefined,
|
|
|
+ defaultBank: form.value?.defaultBank && form.value?.defaultBank[0] ? 1 : 0,
|
|
|
+ }
|
|
|
+ let res = await personalApi.customBankAdd({
|
|
|
+ bankUname: username.value,
|
|
|
+ ...submitData,
|
|
|
+ })
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({ title: t('Msg.Success'), icon: 'success' })
|
|
|
+ emit('success', res.data)
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: res.msg || t('common.error'), icon: 'none' })
|
|
|
+ }
|
|
|
+ close()
|
|
|
} catch (error) {
|
|
|
- console.log(error, 12121);
|
|
|
+ console.log(error, 12121)
|
|
|
|
|
|
- if (error instanceof Array) {
|
|
|
- uni.showToast({ title: error[0].errorMessage, icon: 'none' });
|
|
|
- return
|
|
|
- } else {
|
|
|
- uni.showToast({ title: error.msg || t('common.error'), icon: 'none' });
|
|
|
- }
|
|
|
+ if (error instanceof Array) {
|
|
|
+ uni.showToast({ title: error[0].errorMessage, icon: 'none' })
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: error.msg || t('common.error'), icon: 'none' })
|
|
|
+ }
|
|
|
}
|
|
|
-};
|
|
|
+ }
|
|
|
|
|
|
-const bankList = ref([])
|
|
|
-const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value));
|
|
|
-const getLangName = (item: any) => (isZh.value ? item.name : item.enName);
|
|
|
-const createOptions = (list: any[], valueKey = 'code') => {
|
|
|
+ const bankList = ref([])
|
|
|
+ const isZh = computed(() => ['cn', 'zh', 'zhHant'].includes(locale.value))
|
|
|
+ const getLangName = (item: any) => (isZh.value ? item.name : item.enName)
|
|
|
+ const createOptions = (list: any[], valueKey = 'code') => {
|
|
|
return list.map((item) => ({
|
|
|
- text: getLangName(item),
|
|
|
- value: getLangName(item)
|
|
|
- }));
|
|
|
-};
|
|
|
-
|
|
|
-const bankOptions = computed(() => createOptions(bankList.value, 'name'));
|
|
|
-// 获取银行列表
|
|
|
-const getBankList = async () => {
|
|
|
+ text: getLangName(item),
|
|
|
+ value: getLangName(item),
|
|
|
+ }))
|
|
|
+ }
|
|
|
+
|
|
|
+ const bankOptions = computed(() => createOptions(bankList.value, 'name'))
|
|
|
+ // 获取银行列表
|
|
|
+ const getBankList = async () => {
|
|
|
const res = await personalApi.BankList({})
|
|
|
if (res.code === 200) {
|
|
|
- bankList.value = res.data
|
|
|
+ bankList.value = res.data
|
|
|
}
|
|
|
-}
|
|
|
-// 文件更新处理
|
|
|
-const handleFileUpdate = (newValue, item, field) => {
|
|
|
+ }
|
|
|
+ // 文件更新处理
|
|
|
+ const handleFileUpdate = (newValue, item, field) => {
|
|
|
item[field] = newValue
|
|
|
-}
|
|
|
-// 暴露方法
|
|
|
-defineExpose({
|
|
|
+ }
|
|
|
+
|
|
|
+ const mobile = ref('')
|
|
|
+ // 获取二维码
|
|
|
+ const getMobileInfo = async () => {
|
|
|
+ try {
|
|
|
+ let res = await personalApi.CustomFileMobileFiles({}, {
|
|
|
+ responseType: 'arraybuffer',
|
|
|
+ })
|
|
|
+ mobile.value = 'data:image/png;base64,' + uni.arrayBufferToBase64(res)
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 预览二维码图片
|
|
|
+ const previewImage = () => {
|
|
|
+ if (mobile.value) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [mobile.value],
|
|
|
+ current: 0,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 暴露方法
|
|
|
+ defineExpose({
|
|
|
open,
|
|
|
- close
|
|
|
-});
|
|
|
+ close,
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-@import "@/uni.scss";
|
|
|
+ @import "@/uni.scss";
|
|
|
+ .qrcode {
|
|
|
+ display: flex;
|
|
|
+ align-items: end;
|
|
|
+ margin-bottom: px2rpx(20);
|
|
|
+ }
|
|
|
+ .qr-code-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: px2rpx(100);
|
|
|
+ height: px2rpx(100);
|
|
|
+ border: 1px dashed #dcdfe6;
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ background-color: #fafafa;
|
|
|
+ //margin: 0 auto;
|
|
|
+
|
|
|
+ .qr-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-slot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.dialog-container {
|
|
|
+ .dialog-container {
|
|
|
width: 80vw;
|
|
|
- max-width: px2rpx(800);
|
|
|
+ max-width: px2rpx(600);
|
|
|
max-height: 85vh;
|
|
|
padding: px2rpx(24);
|
|
|
overflow: hidden;
|
|
|
border-radius: px2rpx(12);
|
|
|
|
|
|
.dialog-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: px2rpx(24);
|
|
|
+ padding-bottom: px2rpx(16);
|
|
|
+ border-bottom: 1px solid #f3f4f6;
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+ font-size: px2rpx(18);
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1f2937;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-close {
|
|
|
+ width: px2rpx(32);
|
|
|
+ height: px2rpx(32);
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-bottom: px2rpx(24);
|
|
|
- padding-bottom: px2rpx(16);
|
|
|
- border-bottom: 1px solid #f3f4f6;
|
|
|
-
|
|
|
- .dialog-title {
|
|
|
- font-size: px2rpx(18);
|
|
|
- font-weight: 600;
|
|
|
- color: #1f2937;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ font-size: px2rpx(28);
|
|
|
+ color: #9ca3af;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
|
- .dialog-close {
|
|
|
- width: px2rpx(32);
|
|
|
- height: px2rpx(32);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: px2rpx(28);
|
|
|
- color: #9ca3af;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #1f2937;
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ color: #1f2937;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: px2rpx(12);
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-top: px2rpx(16);
|
|
|
+ border-top: 1px solid #f3f4f6;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ min-width: px2rpx(120);
|
|
|
+ padding: px2rpx(12) px2rpx(24);
|
|
|
+ border-radius: px2rpx(6);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ font-weight: 600;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ transition: all 0.3s;
|
|
|
display: flex;
|
|
|
- gap: px2rpx(12);
|
|
|
- justify-content: flex-end;
|
|
|
- padding-top: px2rpx(16);
|
|
|
- border-top: 1px solid #f3f4f6;
|
|
|
-
|
|
|
- .btn {
|
|
|
- min-width: px2rpx(120);
|
|
|
- padding: px2rpx(12) px2rpx(24);
|
|
|
- border-radius: px2rpx(6);
|
|
|
- font-size: px2rpx(14);
|
|
|
- font-weight: 600;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- transition: all 0.3s;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &.btn-cancel {
|
|
|
- background: #f3f4f6;
|
|
|
- color: #6b7280;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #e5e7eb;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- background: #d1d5db;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.btn-confirm {
|
|
|
- background: #ea2027;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #d11920;
|
|
|
- }
|
|
|
-
|
|
|
- &:active {
|
|
|
- background: #c01819;
|
|
|
- }
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &.btn-cancel {
|
|
|
+ background: #f3f4f6;
|
|
|
+ color: #6b7280;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #e5e7eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #d1d5db;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ &.btn-confirm {
|
|
|
+ background: #ea2027;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #d11920;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #c01819;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.crm-form {
|
|
|
- overflow-y: auto;
|
|
|
- max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ max-height: 70vh;
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
ljc