|
|
@@ -1,385 +1,402 @@
|
|
|
<template>
|
|
|
- <view class="user-form crm-form">
|
|
|
- <uni-row class="demo-uni-row uni-row1">
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
|
|
|
- <view class="bank-menu">
|
|
|
- <view v-for="item in bankTypes" :key="item.key" class="bank-menu-item"
|
|
|
- :class="{ active: selectedBankType === item.key }" @click="selectedBankType = item.key">
|
|
|
- <image class="bank-icon" :src="item.icon" mode="widthFix" />
|
|
|
- <text>{{ item.label }}</text>
|
|
|
- </view>
|
|
|
+ <view class="user-form crm-form">
|
|
|
+ <uni-row class="demo-uni-row uni-row1">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <view class="card">
|
|
|
+ <view class="bank-menu card-header">
|
|
|
+ <view v-for="item in bankTypes" :key="item.key" class="bank-menu-item"
|
|
|
+ :class="{ active: selectedBankType === item.key }" @click="selectedBankType = item.key">
|
|
|
+ <!-- <image class="bank-icon" :src="item.icon" mode="widthFix" />-->
|
|
|
+ <text>{{ item.label }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="card-body">
|
|
|
+ <view class="bank-content" v-if="selectedBankType === 'crypto'">
|
|
|
+ <view class="d-flex flex-wrap align-items-center header-title mb-3 card-header">
|
|
|
+ <view class="h4">
|
|
|
+ {{ t('blockchain.item2') }}
|
|
|
</view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
|
|
|
- <view class="bank-content" v-if="selectedBankType === 'crypto'">
|
|
|
- <view class="bank-info" v-for="(item, index) in cryptoWallets" :key="item.id">
|
|
|
- <view class="card-header">
|
|
|
- <view class="bank-header">
|
|
|
- <uni-row style="width: 100%;">
|
|
|
- <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
- <view class="bank-title">
|
|
|
- <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
|
|
|
- <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
|
|
|
- <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
- <view class="actions">
|
|
|
- <view class="bank-actions">
|
|
|
- <view class="action-btn bg-secondary" v-if="item.authStatus == 0"
|
|
|
- type="primary" v-t="'State.ToCertified'"
|
|
|
- @click="doReady(item.id, item)" />
|
|
|
- <view class="action-btn bg-secondary" v-if="item.authStatus == 0"
|
|
|
- type="primary" @click="openCardDialog(item.id, item)"
|
|
|
- v-t="'PersonalManagement.CardVerify.Title'" />
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="bank-actions">
|
|
|
- <view class="action-btn bg-secondary"
|
|
|
- v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
- v-t="'Btn.Editor'" />
|
|
|
- <template v-if="editingId === item.id">
|
|
|
- <view class="action-btn bg-secondary" @tap="saveBank(item)"
|
|
|
- v-t="'Btn.Save'" />
|
|
|
- <view class="action-btn bg-secondary" @tap="cancelEdit()"
|
|
|
- v-t="'Btn.Cancel'" />
|
|
|
- </template>
|
|
|
- <view class="action-btn delete" @tap="confirmDelete(item)"
|
|
|
- v-t="'Btn.Delete'" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
- <uni-row class="demo-uni-row">
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('blockchain.item3')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.addressName"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('blockchain.item4')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.address"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
|
|
|
- v-if="item.cardFiles && item.cardFiles.length">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
|
|
|
- <view class="photo-upload">
|
|
|
- <view v-for="(file, idx) in item.cardFiles" :key="idx" class="photo-item">
|
|
|
- <image class="photo-preview" :src="updateUrl + file.path"
|
|
|
- mode="aspectFill" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item class="checkbox-item">
|
|
|
- <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
- multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- <view class="add-wallet-btn" @click="addBank()" v-if="cryptoWallets.length < 2">
|
|
|
- <text>+</text>
|
|
|
- <text>添加加密货币钱包</text>
|
|
|
- </view>
|
|
|
+ <view class="add-wallet-btn" @click="addBank()" v-if="cryptoWallets.length < 2">
|
|
|
+ <text>+</text>
|
|
|
+ <text>{{ `${t('Btn.New')}${t('blockchain.item2')}` }}</text>
|
|
|
</view>
|
|
|
- <view class="bank-content" v-if="selectedBankType === 'unionpay'">
|
|
|
- <view class="bank-info" v-for="(item, index) in unionpayCards" :key="item.id">
|
|
|
- <view class="card-header">
|
|
|
- <view class="bank-header">
|
|
|
- <uni-row style="width: 100%;">
|
|
|
- <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
- <view class="bank-title">
|
|
|
- <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
|
|
|
- <text>{{ currentBankType?.label }}{{ index + 1 }} </text>
|
|
|
- <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
- <view class="bank-actions">
|
|
|
- <view class="action-btn bg-secondary"
|
|
|
- v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
- v-t="'Btn.Editor'" />
|
|
|
- <template v-if="editingId === item.id">
|
|
|
- <view class="action-btn bg-secondary" @tap="saveBank(item)"
|
|
|
- v-t="'Btn.Save'" />
|
|
|
- <view class="action-btn bg-secondary" @tap="cancelEdit()"
|
|
|
- v-t="'Btn.Cancel'" />
|
|
|
- </template>
|
|
|
- <view class="action-btn delete" @tap="confirmDelete(item)"
|
|
|
- v-t="'Btn.Delete'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in cryptoWallets" :key="item.id">
|
|
|
+ <view class="bank-header card-header">
|
|
|
+ <uni-row style="width: 100%;">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
|
|
|
+ <view class="bank-title">
|
|
|
+ <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <view class="actions">
|
|
|
+ <view class="bank-actions">
|
|
|
+ <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
|
|
|
+ type="primary" v-t="'State.ToCertified'"
|
|
|
+ @click="doReady(item.id, item)" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark" v-if="item.authStatus == 0"
|
|
|
+ type="primary" @click="openCardDialog(item.id, item)"
|
|
|
+ v-t="'PersonalManagement.CardVerify.Title'" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark"
|
|
|
+ v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
+ v-t="'Btn.Editor'" />
|
|
|
+ <template v-if="editingId === item.id">
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
|
|
|
+ v-t="'Btn.Save'" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
|
|
|
+ v-t="'Btn.Cancel'" />
|
|
|
+ </template>
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="confirmDelete(item)"
|
|
|
+ v-t="'Btn.Delete'" />
|
|
|
</view>
|
|
|
- <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
- <uni-row class="demo-uni-row">
|
|
|
- <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
- <uni-forms-item>
|
|
|
- <cwg-file-picker-wrapper v-model="item.bankFront"
|
|
|
- :editable="editingId === item.id" :limit="1" uploadUrl="/custom/bank/upload"
|
|
|
- :baseUrl="updateUrl" :imageWidth="150" :imageHeight="150" uploadText="点击上传"
|
|
|
- replaceText="点击替换" noImageText="暂无图片"
|
|
|
- :showPreviewDelete="editingId === item.id"
|
|
|
- @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
|
|
|
- <cwg-combox :clearable="false" :filterable="true" v-model:value="item.bankName"
|
|
|
- :options="bankOptions" :placeholder="t('placeholder.choose')"
|
|
|
- :disabled="editingId !== item.id" @change="onStateChange" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankBranchName"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :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 class="checkbox-item">
|
|
|
- <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
- multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
-
|
|
|
- </uni-row>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- <view class="add-wallet-btn" @click="addBank()" v-if="unionpayCards.length < 2">
|
|
|
- <text>+</text>
|
|
|
- <text>添加中国银联卡</text>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
</view>
|
|
|
- <view class="bank-content" v-if="selectedBankType === 'bank'">
|
|
|
- <view class="bank-info" v-for="(item, index) in wireTransfers" :key="item.id">
|
|
|
- <view class="card-header">
|
|
|
- <view class="bank-header">
|
|
|
- <uni-row style="width: 100%;">
|
|
|
- <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
- <view class="bank-title">
|
|
|
- <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
|
|
|
- <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
|
|
|
- <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
- <view class="bank-actions">
|
|
|
- <view class="action-btn bg-secondary"
|
|
|
- v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
- v-t="'Btn.Editor'" />
|
|
|
- <template v-if="editingId === item.id">
|
|
|
- <view class="action-btn bg-secondary" @tap="saveBank(item)"
|
|
|
- v-t="'Btn.Save'" />
|
|
|
- <view class="action-btn bg-secondary" @tap="cancelEdit()"
|
|
|
- v-t="'Btn.Cancel'" />
|
|
|
- </template>
|
|
|
- <view class="action-btn delete" @tap="confirmDelete(item)"
|
|
|
- v-t="'Btn.Delete'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
+ <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
+ <uni-row class="card-body custom-row" :gutter="20">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
+ <uni-forms-item :label="t('blockchain.item3')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.addressName"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
+ <uni-forms-item :label="t('blockchain.item4')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.address"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
|
|
|
+ v-if="item.cardFiles && item.cardFiles.length">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
|
|
|
+ <view class="photo-upload">
|
|
|
+ <view v-for="(file, idx) in item.cardFiles" :key="idx" class="photo-item">
|
|
|
+ <image class="photo-preview" :src="updateUrl + file.path"
|
|
|
+ mode="aspectFill" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
- <uni-row class="demo-uni-row">
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankName"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankAddr"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')"
|
|
|
- :disabled="editingId !== item.id" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.swiftCode"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')"
|
|
|
- :disabled="editingId !== item.id" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.BankCode')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankCode"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')"
|
|
|
- :disabled="editingId !== item.id" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item
|
|
|
- :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.agencyNo"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')"
|
|
|
- :disabled="editingId !== item.id" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item class="checkbox-item">
|
|
|
- <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
- multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- <view class="add-wallet-btn" @click="addBank()" v-if="wireTransfers.length < 2">
|
|
|
- <text>+</text>
|
|
|
- <text>添加银行电汇</text>
|
|
|
- </view>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item class="checkbox-item">
|
|
|
+ <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1" multiple
|
|
|
+ :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </uni-forms>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-content" v-if="selectedBankType === 'unionpay'">
|
|
|
+ <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
|
|
|
+ <view class="h4">
|
|
|
+ {{ t('PersonalManagement.Title.ChinaUnionPayCard') }}
|
|
|
</view>
|
|
|
- <view class="bank-content" v-if="selectedBankType === 'credit'">
|
|
|
- <view class="bank-info" v-for="(item, index) in creditCards" :key="item.id">
|
|
|
- <view class="card-header">
|
|
|
- <view class="bank-header">
|
|
|
- <uni-row style="width: 100%;">
|
|
|
- <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
- <view class="bank-title">
|
|
|
- <cwg-icon v-if="item.defaultBank" name="crm-star" color="#ea2027" />
|
|
|
- <text>{{ currentBankType?.label }} {{ index + 1 }} </text>
|
|
|
- <text v-if="item.defaultBank" v-t="'PersonalManagement.Title.Default'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
- <view class="bank-actions">
|
|
|
- <view class="action-btn bg-secondary"
|
|
|
- v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
- v-t="'Btn.Editor'" />
|
|
|
- <template v-if="editingId === item.id">
|
|
|
- <view class="action-btn bg-secondary" @tap="saveBank(item)"
|
|
|
- v-t="'Btn.Save'" />
|
|
|
- <view class="action-btn bg-secondary" @tap="cancelEdit()"
|
|
|
- v-t="'Btn.Cancel'" />
|
|
|
- </template>
|
|
|
- <view class="action-btn delete" @tap="confirmDelete(item)"
|
|
|
- v-t="'Btn.Delete'" />
|
|
|
- </view>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
- <uni-row class="demo-uni-row">
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
- :placeholder="t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.expiryYearMonth"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <uni-forms-item :label="t('CVV')">
|
|
|
- <uni-easyinput :clearable="false" v-model="item.cvv"
|
|
|
- :disabled="editingId !== item.id"
|
|
|
- :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
- <uni-col :xs="24">
|
|
|
- <uni-forms-item class="checkbox-item">
|
|
|
- <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
- multiple :localdata="hobbys" />
|
|
|
- </uni-forms-item>
|
|
|
- </uni-col>
|
|
|
-
|
|
|
- </uni-row>
|
|
|
- </uni-forms>
|
|
|
- </view>
|
|
|
- <view class="add-wallet-btn" @click="addBank()">
|
|
|
- <text>+</text>
|
|
|
- <text>添加信用卡</text>
|
|
|
- </view>
|
|
|
+ <view class="add-wallet-btn" @click="addBank()" v-if="unionpayCards.length < 2">
|
|
|
+ <text>+</text>
|
|
|
+ <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.ChinaUnionPayCard')}` }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in unionpayCards" :key="item.id">
|
|
|
+ <view class="bank-header card-header">
|
|
|
+ <uni-row style="width: 100%;">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <view class="bank-title">
|
|
|
+ <text>{{ currentBankType?.label }}{{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <view class="bank-actions">
|
|
|
+ <view class="action-btn bg-secondary btn-dark"
|
|
|
+ v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
+ v-t="'Btn.Editor'" />
|
|
|
+ <template v-if="editingId === item.id">
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
|
|
|
+ v-t="'Btn.Save'" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
|
|
|
+ v-t="'Btn.Cancel'" />
|
|
|
+ </template>
|
|
|
+ <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
|
|
|
+ v-t="'Btn.Delete'" />
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
+ <uni-row class="demo-uni-row" :gutter="20">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
|
|
|
+ <cwg-combox :clearable="false" :filterable="true" v-model:value="item.bankName"
|
|
|
+ :options="bankOptions" :placeholder="t('placeholder.choose')"
|
|
|
+ :disabled="editingId !== item.id" @change="onStateChange" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.AccountOpeningBranch')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankBranchName"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CertificationPhoto')">
|
|
|
+ <cwg-file-picker-wrapper
|
|
|
+ v-model="item.bankFront"
|
|
|
+ :delIcon="editingId === item.id"
|
|
|
+ :limit="1"
|
|
|
+ uploadUrl="/custom/bank/upload"
|
|
|
+ :baseUrl="updateUrl"
|
|
|
+ :imageWidth="120"
|
|
|
+ :imageHeight="120"
|
|
|
+ uploadText="点击上传"
|
|
|
+ replaceText="点击替换" noImageText="暂无图片"
|
|
|
+ :showPreviewDelete="editingId === item.id"
|
|
|
+ @update:modelValue="(val) => handleFileUpdate(val, item, 'bankFront')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item class="checkbox-item">
|
|
|
+ <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
+ multiple :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+
|
|
|
+ </uni-row>
|
|
|
+ </uni-forms>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="bank-content" v-if="selectedBankType === 'bank'">
|
|
|
+ <view class="d-flex flex-wrap align-items-center card-header header-title mb-3">
|
|
|
+ <view class="h4">
|
|
|
+ {{ t('PersonalManagement.Title.BankWireTransfer') }}
|
|
|
+ </view>
|
|
|
+ <view class="add-wallet-btn" @click="addBank()" v-if="wireTransfers.length < 2">
|
|
|
+ <text>+</text>
|
|
|
+ <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.BankWireTransfer')}` }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in wireTransfers" :key="item.id">
|
|
|
+ <view class="bank-header card-header ">
|
|
|
+ <uni-row style="width: 100%;">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <view class="bank-title">
|
|
|
+ <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <view class="bank-actions">
|
|
|
+ <view class="action-btn bg-secondary btn-dark"
|
|
|
+ v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
+ v-t="'Btn.Editor'" />
|
|
|
+ <template v-if="editingId === item.id">
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
|
|
|
+ v-t="'Btn.Save'" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
|
|
|
+ v-t="'Btn.Cancel'" />
|
|
|
+ </template>
|
|
|
+ <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
|
|
|
+ v-t="'Btn.Delete'" />
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
+ <uni-row class="demo-uni-row">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccountName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre de la red' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAccount')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección de la billetera' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankName"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el nombre del banco' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankAddress')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankAddr"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca la dirección del banco' : t('placeholder.input')"
|
|
|
+ :disabled="editingId !== item.id" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.SwiftBIC')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.swiftCode"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el SWIFT/BIC' : t('placeholder.input')"
|
|
|
+ :disabled="editingId !== item.id" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.BankCode')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankCode"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el código del banco' : t('placeholder.input')"
|
|
|
+ :disabled="editingId !== item.id" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item
|
|
|
+ :label="locale == 'es' ? 'Número de sucursal (opcional)' : 'Account Agency NO'">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.agencyNo"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el número de sucursal' : t('placeholder.input')"
|
|
|
+ :disabled="editingId !== item.id" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item class="checkbox-item">
|
|
|
+ <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
+ multiple :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </uni-forms>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="bank-content" v-if="selectedBankType === 'credit'">
|
|
|
+ <view class="d-flex flex-wrap align-items-center header-title card-header mb-3">
|
|
|
+ <view class="h4">
|
|
|
+ {{ t('PersonalManagement.Label.CreditCard') }}
|
|
|
</view>
|
|
|
- </uni-col>
|
|
|
- </uni-row>
|
|
|
- </view>
|
|
|
- <!-- 删除确认弹窗 -->
|
|
|
- <uni-popup ref="deletePopup" type="dialog">
|
|
|
- <uni-popup-dialog :title="t('Msg.SystemPrompt')" :content="t('Msg.Delete')" @confirm="deleteBank"
|
|
|
- @close="closeDeletePopup" />
|
|
|
- </uni-popup>
|
|
|
- <!-- 新增银行弹窗 -->
|
|
|
- <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
|
|
|
- <!-- kyc认证弹窗 -->
|
|
|
- <kyc-auth-dialog ref="kycDialogRef" />
|
|
|
- <!-- 证件认证弹窗 -->
|
|
|
- <card-auth-dialog ref="cardDialogRef" />
|
|
|
+ <view class="add-wallet-btn" @click="addBank()" v-if="creditCards.length < 2">
|
|
|
+ <text>+</text>
|
|
|
+ <text>{{ `${t('Btn.New')}${t('PersonalManagement.Label.CreditCard')}` }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bank-info bg-gray bg-opacity-05 card" v-for="(item, index) in creditCards" :key="item.id">
|
|
|
+ <view class="bank-header card-header">
|
|
|
+ <uni-row style="width: 100%;">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <view class="bank-title">
|
|
|
+ <text>{{ currentBankType?.label }} {{ index + 1 }}</text>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <view class="bank-actions">
|
|
|
+ <view class="action-btn bg-secondary btn-dark"
|
|
|
+ v-if="!editingId && item.authStatus !== 1" @tap="startEdit(item)"
|
|
|
+ v-t="'Btn.Editor'" />
|
|
|
+ <template v-if="editingId === item.id">
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="saveBank(item)"
|
|
|
+ v-t="'Btn.Save'" />
|
|
|
+ <view class="action-btn bg-secondary btn-dark" @tap="cancelEdit()"
|
|
|
+ v-t="'Btn.Cancel'" />
|
|
|
+ </template>
|
|
|
+ <view class="action-btn delete btn-dark" @tap="confirmDelete(item)"
|
|
|
+ v-t="'Btn.Delete'" />
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <uni-forms :model="item" labelWidth="200" label-position="top">
|
|
|
+ <uni-row class="demo-uni-row" :gutter="20">
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccountName')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankUname" :disabled="true"
|
|
|
+ :placeholder="t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.CreditCardAccount')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.bankCardNum"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el número de tarjeta' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('PersonalManagement.Label.ExpirationYear')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.expiryYearMonth"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca MM/AA' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <uni-forms-item :label="t('CVV')">
|
|
|
+ <uni-easyinput :clearable="false" v-model="item.cvv"
|
|
|
+ :disabled="editingId !== item.id"
|
|
|
+ :placeholder="locale == 'es' ? 'Introduzca el CVV' : t('placeholder.input')" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+ <uni-col :xs="24">
|
|
|
+ <uni-forms-item class="checkbox-item">
|
|
|
+ <uni-data-checkbox :disabled="editingId !== item.id" v-model="item.defaultBank1"
|
|
|
+ multiple :localdata="hobbys" />
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-col>
|
|
|
+
|
|
|
+ </uni-row>
|
|
|
+ </uni-forms>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ </view>
|
|
|
+ <!-- 删除确认弹窗 -->
|
|
|
+ <uni-popup ref="deletePopup" type="dialog">
|
|
|
+ <uni-popup-dialog :title="t('Msg.SystemPrompt')" :content="t('Msg.Delete')" @confirm="deleteBank"
|
|
|
+ @close="closeDeletePopup" />
|
|
|
+ </uni-popup>
|
|
|
+ <!-- 新增银行弹窗 -->
|
|
|
+ <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
|
|
|
+ <!-- kyc认证弹窗 -->
|
|
|
+ <kyc-auth-dialog ref="kycDialogRef" />
|
|
|
+ <!-- 证件认证弹窗 -->
|
|
|
+ <card-auth-dialog ref="cardDialogRef" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { computed, ref, onMounted } from 'vue';
|
|
|
-import { useI18n } from 'vue-i18n';
|
|
|
-import { personalApi } from '@/service/personal';
|
|
|
-import KycAuthDialog from './KycAuthDialog.vue';
|
|
|
-import CardAuthDialog from './CardAuthDialog.vue';
|
|
|
-import AddBankDialog from '@/components/AddBankDialog.vue';
|
|
|
-import config from '@/config'
|
|
|
-import { BankType } from './bank'
|
|
|
-const { t, locale } = useI18n();
|
|
|
-interface BankListType {
|
|
|
+ import { computed, ref, onMounted } from 'vue'
|
|
|
+ import { useI18n } from 'vue-i18n'
|
|
|
+ import { personalApi } from '@/service/personal'
|
|
|
+ import KycAuthDialog from './KycAuthDialog.vue'
|
|
|
+ import CardAuthDialog from './CardAuthDialog.vue'
|
|
|
+ import AddBankDialog from '@/components/AddBankDialog.vue'
|
|
|
+ import config from '@/config'
|
|
|
+ import { BankType } from './bank'
|
|
|
+
|
|
|
+ const { t, locale } = useI18n()
|
|
|
+
|
|
|
+ interface BankListType {
|
|
|
key: string;
|
|
|
label: string;
|
|
|
icon: string;
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-interface BankInfo {
|
|
|
+ interface BankInfo {
|
|
|
id?: string;
|
|
|
type: number;
|
|
|
defaultBank: boolean;
|
|
|
@@ -391,677 +408,712 @@ interface BankInfo {
|
|
|
expiryYearMonth?: string;
|
|
|
expiryYear?: string;
|
|
|
expiryMonth?: string;
|
|
|
+
|
|
|
[key: string]: any;
|
|
|
-}
|
|
|
-const selectedBankType = ref<string>('crypto');
|
|
|
-const bankTypes = computed<BankListType[]>(() => [
|
|
|
+ }
|
|
|
+
|
|
|
+ const selectedBankType = ref<string>('crypto')
|
|
|
+ const bankTypes = computed<BankListType[]>(() => [
|
|
|
{ key: 'crypto', label: t('blockchain.item2'), icon: '/static/images/info/bank-info_1.png' },
|
|
|
- { key: 'unionpay', label: t('PersonalManagement.Title.ChinaUnionPayCard'), icon: '/static/images/info/bank-info_2.png' },
|
|
|
+ {
|
|
|
+ key: 'unionpay',
|
|
|
+ label: t('PersonalManagement.Title.ChinaUnionPayCard'),
|
|
|
+ icon: '/static/images/info/bank-info_2.png',
|
|
|
+ },
|
|
|
{ key: 'bank', label: t('PersonalManagement.Title.BankWireTransfer'), icon: '/static/images/info/bank-info_3.png' },
|
|
|
- { key: 'credit', label: t('PersonalManagement.Label.CreditCard'), icon: '/static/images/info/bank-info_4.png' }
|
|
|
-]);
|
|
|
-const currentBankType = computed(() => bankTypes.value.find((item: BankListType) => item.key === selectedBankType.value));
|
|
|
-const hobbys = computed(() => {
|
|
|
+ { key: 'credit', label: t('PersonalManagement.Label.CreditCard'), icon: '/static/images/info/bank-info_4.png' },
|
|
|
+ ])
|
|
|
+ const currentBankType = computed(() => bankTypes.value.find((item: BankListType) => item.key === selectedBankType.value))
|
|
|
+ const hobbys = computed(() => {
|
|
|
switch (selectedBankType.value) {
|
|
|
- case 'crypto':
|
|
|
- return [{ value: 1, text: t('blockchain.item8') }]
|
|
|
- case 'unionpay':
|
|
|
- return [{ value: 1, text: t('PersonalManagement.Title.DefaultBank') }]
|
|
|
- case 'bank':
|
|
|
- return [{ value: 1, text: t('PersonalManagement.Title.DefaultWire') }]
|
|
|
- case 'credit':
|
|
|
- return [{ value: 1, text: t('PersonalManagement.Title.DefaultCredit') }]
|
|
|
+ case 'crypto':
|
|
|
+ return [{ value: 1, text: t('blockchain.item8') }]
|
|
|
+ case 'unionpay':
|
|
|
+ return [{ value: 1, text: t('PersonalManagement.Title.DefaultBank') }]
|
|
|
+ case 'bank':
|
|
|
+ return [{ value: 1, text: t('PersonalManagement.Title.DefaultWire') }]
|
|
|
+ case 'credit':
|
|
|
+ return [{ value: 1, text: t('PersonalManagement.Title.DefaultCredit') }]
|
|
|
}
|
|
|
-});
|
|
|
-// 状态
|
|
|
-const updateUrl = config.Host80
|
|
|
-const editingId = ref(null)
|
|
|
-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 updateUrl = config.Host80
|
|
|
+ const editingId = ref(null)
|
|
|
+ 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 bankData = ref({
|
|
|
+ text: getLangName(item),
|
|
|
+ value: getLangName(item),
|
|
|
+ }))
|
|
|
+ }
|
|
|
+
|
|
|
+ const bankOptions = computed(() => createOptions(bankList.value, 'name'))
|
|
|
+ // 银行数据
|
|
|
+ const bankData = ref({
|
|
|
[BankType.CRYPTO]: [],
|
|
|
[BankType.UNIONPAY]: [],
|
|
|
[BankType.WIRE_TRANSFER]: [],
|
|
|
- [BankType.CREDIT_CARD]: []
|
|
|
-})
|
|
|
-
|
|
|
-// 计算属性 - 各类型银行列表
|
|
|
-const cryptoWallets = computed(() => bankData.value[BankType.CRYPTO] || [])
|
|
|
-const unionpayCards = computed(() => bankData.value[BankType.UNIONPAY] || [])
|
|
|
-const wireTransfers = computed(() => bankData.value[BankType.WIRE_TRANSFER] || [])
|
|
|
-const creditCards = computed(() => bankData.value[BankType.CREDIT_CARD] || [])
|
|
|
+ [BankType.CREDIT_CARD]: [],
|
|
|
+ })
|
|
|
|
|
|
+ // 计算属性 - 各类型银行列表
|
|
|
+ const cryptoWallets = computed(() => bankData.value[BankType.CRYPTO] || [])
|
|
|
+ const unionpayCards = computed(() => bankData.value[BankType.UNIONPAY] || [])
|
|
|
+ const wireTransfers = computed(() => bankData.value[BankType.WIRE_TRANSFER] || [])
|
|
|
+ const creditCards = computed(() => bankData.value[BankType.CREDIT_CARD] || [])
|
|
|
|
|
|
|
|
|
-// 弹出层ref
|
|
|
-const deletePopup = ref(null)
|
|
|
-const deleteTarget = ref(null)
|
|
|
+ // 弹出层ref
|
|
|
+ const deletePopup = ref(null)
|
|
|
+ const deleteTarget = ref(null)
|
|
|
|
|
|
|
|
|
-// 开始编辑
|
|
|
-const startEdit = (item) => {
|
|
|
+ // 开始编辑
|
|
|
+ const startEdit = (item) => {
|
|
|
editingId.value = item.id
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 取消编辑
|
|
|
-const cancelEdit = () => {
|
|
|
+ // 取消编辑
|
|
|
+ const cancelEdit = () => {
|
|
|
editingId.value = null
|
|
|
getBankInfo() // 重新加载数据
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 保存银行信息
|
|
|
-const saveBank = async (item) => {
|
|
|
+ // 保存银行信息
|
|
|
+ const saveBank = async (item) => {
|
|
|
|
|
|
if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包认证审核中",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包认证审核中',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
try {
|
|
|
- const params = { ...item }
|
|
|
- params.defaultBank = params.defaultBank1[0] ? 1 : 0
|
|
|
-
|
|
|
- if (params.type === BankType.CREDIT_CARD && params.expiryYearMonth) {
|
|
|
- const [year, month] = params.expiryYearMonth.split('/')
|
|
|
- params.expiryYear = year
|
|
|
- params.expiryMonth = month
|
|
|
- }
|
|
|
- const res = await personalApi.customBankUpdate(params)
|
|
|
- if (res.code === 200) {
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: t('Msg.Success'),
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- editingId.value = null
|
|
|
- getBankInfo()
|
|
|
- } else {
|
|
|
- throw new Error(res.msg)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
+ const params = { ...item }
|
|
|
+ params.defaultBank = params.defaultBank1[0] ? 1 : 0
|
|
|
+
|
|
|
+ if (params.type === BankType.CREDIT_CARD && params.expiryYearMonth) {
|
|
|
+ const [year, month] = params.expiryYearMonth.split('/')
|
|
|
+ params.expiryYear = year
|
|
|
+ params.expiryMonth = month
|
|
|
+ }
|
|
|
+ const res = await personalApi.customBankUpdate(params)
|
|
|
+ if (res.code === 200) {
|
|
|
uni.hideLoading()
|
|
|
uni.showToast({
|
|
|
- title: error.message || t('Msg.Fail'),
|
|
|
- icon: 'none'
|
|
|
+ title: t('Msg.Success'),
|
|
|
+ icon: 'success',
|
|
|
})
|
|
|
+ editingId.value = null
|
|
|
+ getBankInfo()
|
|
|
+ } else {
|
|
|
+ throw new Error(res.msg)
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: error.message || t('Msg.Fail'),
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
}
|
|
|
-}
|
|
|
-// 删除
|
|
|
-const confirmDelete = (item) => {
|
|
|
+ }
|
|
|
+ // 删除
|
|
|
+ const confirmDelete = (item) => {
|
|
|
if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: '加密钱包认证审核中',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包认证审核中',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
deleteTarget.value = item
|
|
|
deletePopup.value.open()
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 关闭删除弹窗
|
|
|
-const closeDeletePopup = () => {
|
|
|
+ // 关闭删除弹窗
|
|
|
+ const closeDeletePopup = () => {
|
|
|
deletePopup.value.close()
|
|
|
deleteTarget.value = null
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 执行删除
|
|
|
-const deleteBank = async () => {
|
|
|
+ // 执行删除
|
|
|
+ const deleteBank = async () => {
|
|
|
if (!deleteTarget.value) return
|
|
|
try {
|
|
|
- const res = await personalApi.customBankDelete({
|
|
|
- ids: [deleteTarget.value.id]
|
|
|
- })
|
|
|
- if (res.code === 200) {
|
|
|
- uni.hideLoading()
|
|
|
- uni.showToast({
|
|
|
- title: t('Msg.DeleteSuccess'),
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- deletePopup.value.close()
|
|
|
- deleteTarget.value = null
|
|
|
- getBankInfo()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.msg,
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
+ const res = await personalApi.customBankDelete({
|
|
|
+ ids: [deleteTarget.value.id],
|
|
|
+ })
|
|
|
+ if (res.code === 200) {
|
|
|
uni.hideLoading()
|
|
|
uni.showToast({
|
|
|
- title: error.msg,
|
|
|
- icon: 'none'
|
|
|
+ title: t('Msg.DeleteSuccess'),
|
|
|
+ icon: 'success',
|
|
|
})
|
|
|
deletePopup.value.close()
|
|
|
+ deleteTarget.value = null
|
|
|
+ getBankInfo()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showToast({
|
|
|
+ title: error.msg,
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ deletePopup.value.close()
|
|
|
}
|
|
|
-}
|
|
|
-// 新增银行信息
|
|
|
-const addBankDialogRef = ref(null);
|
|
|
-function addBank() {
|
|
|
+ }
|
|
|
+ // 新增银行信息
|
|
|
+ const addBankDialogRef = ref(null)
|
|
|
+
|
|
|
+ function addBank() {
|
|
|
switch (selectedBankType.value) {
|
|
|
- case 'crypto':
|
|
|
- openAddCrypto()
|
|
|
- break;
|
|
|
- case 'unionpay':
|
|
|
- openAddUnionpay()
|
|
|
- break;
|
|
|
- case 'bank':
|
|
|
- openAddBank()
|
|
|
- break;
|
|
|
- case 'credit':
|
|
|
- openAddCredit()
|
|
|
- break;
|
|
|
+ case 'crypto':
|
|
|
+ openAddCrypto()
|
|
|
+ break
|
|
|
+ case 'unionpay':
|
|
|
+ openAddUnionpay()
|
|
|
+ break
|
|
|
+ case 'bank':
|
|
|
+ openAddBank()
|
|
|
+ break
|
|
|
+ case 'credit':
|
|
|
+ openAddCredit()
|
|
|
+ break
|
|
|
}
|
|
|
-}
|
|
|
-function openAddCrypto() {
|
|
|
- const wallets = cryptoWallets.value || [];
|
|
|
+ }
|
|
|
+
|
|
|
+ function openAddCrypto() {
|
|
|
+ const wallets = cryptoWallets.value || []
|
|
|
// 1️⃣ 没有钱包
|
|
|
if (wallets.length === 0) {
|
|
|
- addBankDialogRef.value?.open(4);
|
|
|
- return;
|
|
|
+ addBankDialogRef.value?.open(4)
|
|
|
+ return
|
|
|
}
|
|
|
// 2️⃣ 是否存在未认证钱包
|
|
|
const hasUnAuth = wallets.some(
|
|
|
- item => item.authStatus === 0 || item.approveStatus === 1
|
|
|
- );
|
|
|
+ item => item.authStatus === 0 || item.approveStatus === 1,
|
|
|
+ )
|
|
|
if (hasUnAuth) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包未认证",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包未认证',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
// 3️⃣ 是否达到上限
|
|
|
if (wallets.length >= 2) {
|
|
|
- uni.showToast({
|
|
|
- title: t('blockchain.item9'),
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: t('blockchain.item9'),
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
// 4️⃣ 正常打开
|
|
|
- addBankDialogRef.value?.open(4);
|
|
|
-}
|
|
|
-function openAddUnionpay() {
|
|
|
- const wallets = unionpayCards.value || [];
|
|
|
+ addBankDialogRef.value?.open(4)
|
|
|
+ }
|
|
|
+
|
|
|
+ function openAddUnionpay() {
|
|
|
+ const wallets = unionpayCards.value || []
|
|
|
if (wallets.length === 0) {
|
|
|
- addBankDialogRef.value?.open(1);
|
|
|
- return;
|
|
|
+ addBankDialogRef.value?.open(1)
|
|
|
+ return
|
|
|
}
|
|
|
if (wallets.length >= 2) {
|
|
|
- uni.showToast({
|
|
|
- title: t('Msg.UnionPayCARDS'),
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: t('Msg.UnionPayCARDS'),
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- addBankDialogRef.value?.open(1);
|
|
|
-}
|
|
|
-function openAddBank() {
|
|
|
- const wallets = wireTransfers.value || [];
|
|
|
+ addBankDialogRef.value?.open(1)
|
|
|
+ }
|
|
|
+
|
|
|
+ function openAddBank() {
|
|
|
+ const wallets = wireTransfers.value || []
|
|
|
if (wallets.length === 0) {
|
|
|
- addBankDialogRef.value?.open(2);
|
|
|
- return;
|
|
|
+ addBankDialogRef.value?.open(2)
|
|
|
+ return
|
|
|
}
|
|
|
if (wallets.length >= 2) {
|
|
|
- uni.showToast({
|
|
|
- title: t('Msg.WireTransfers'),
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: t('Msg.WireTransfers'),
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- addBankDialogRef.value?.open(2);
|
|
|
-}
|
|
|
-function openAddCredit() {
|
|
|
- const wallets = creditCards.value || [];
|
|
|
+ addBankDialogRef.value?.open(2)
|
|
|
+ }
|
|
|
+
|
|
|
+ function openAddCredit() {
|
|
|
+ const wallets = creditCards.value || []
|
|
|
if (wallets.length === 0) {
|
|
|
- addBankDialogRef.value?.open(3);
|
|
|
- return;
|
|
|
+ addBankDialogRef.value?.open(3)
|
|
|
+ return
|
|
|
}
|
|
|
- addBankDialogRef.value?.open(3);
|
|
|
-}
|
|
|
-// 新增银行信息成功回调
|
|
|
-const addSuccess = (e) => {
|
|
|
+ addBankDialogRef.value?.open(3)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 新增银行信息成功回调
|
|
|
+ const addSuccess = (e) => {
|
|
|
if (selectedBankType.value === 'crypto') {
|
|
|
- openKycDialog(e)
|
|
|
+ openKycDialog(e)
|
|
|
}
|
|
|
- getBankInfo();
|
|
|
-}
|
|
|
-
|
|
|
-// kyc认证和证件认证
|
|
|
-const kycDialogRef = ref(null);
|
|
|
-const cardDialogRef = ref(null);
|
|
|
-// kyc认证
|
|
|
-const doReady = (bankId, item) => {
|
|
|
+ getBankInfo()
|
|
|
+ }
|
|
|
+
|
|
|
+ // kyc认证和证件认证
|
|
|
+ const kycDialogRef = ref(null)
|
|
|
+ const cardDialogRef = ref(null)
|
|
|
+ // kyc认证
|
|
|
+ const doReady = (bankId, item) => {
|
|
|
if (item.approveStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包认证审核中",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包认证审核中',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
if (item.authStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包已认证",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包已认证',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
openKycDialog(bankId)
|
|
|
-}
|
|
|
-// 打开kyc认证弹窗
|
|
|
-function openKycDialog(e) {
|
|
|
- kycDialogRef.value?.open(e);
|
|
|
-}
|
|
|
-// 打开证件认证弹窗
|
|
|
-function openCardDialog(e, item) {
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开kyc认证弹窗
|
|
|
+ function openKycDialog(e) {
|
|
|
+ kycDialogRef.value?.open(e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开证件认证弹窗
|
|
|
+ function openCardDialog(e, item) {
|
|
|
if (item.approveStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包认证审核中",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包认证审核中',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
if (item.authStatus == 1) {
|
|
|
- uni.showToast({
|
|
|
- title: "加密钱包已认证",
|
|
|
- icon: "none"
|
|
|
- });
|
|
|
- return;
|
|
|
+ uni.showToast({
|
|
|
+ title: '加密钱包已认证',
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- cardDialogRef.value?.open(e, item);
|
|
|
-}
|
|
|
+ cardDialogRef.value?.open(e, item)
|
|
|
+ }
|
|
|
|
|
|
|
|
|
-// 掩码卡号
|
|
|
-const maskCardNumber = (num) => {
|
|
|
+ // 掩码卡号
|
|
|
+ const maskCardNumber = (num) => {
|
|
|
if (!num) return '--'
|
|
|
if (num.length <= 4) return num
|
|
|
return '**** **** **** ' + num.slice(-4)
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 获取银行列表
|
|
|
-const getBankList = async () => {
|
|
|
+ // 获取银行列表
|
|
|
+ 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
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-// 或者如果你需要在上传成功后做其他操作
|
|
|
-const handleUploadComplete = (result, item, field) => {
|
|
|
+ // 或者如果你需要在上传成功后做其他操作
|
|
|
+ const handleUploadComplete = (result, item, field) => {
|
|
|
if (result.success) {
|
|
|
- console.log('上传完成:', result.paths)
|
|
|
- // 可以在这里做其他操作，比如保存到服务器
|
|
|
+ console.log('上传完成:', result.paths)
|
|
|
+ // 可以在这里做其他操作，比如保存到服务器
|
|
|
}
|
|
|
-}
|
|
|
-// 获取银行信息
|
|
|
-const getBankInfo = async () => {
|
|
|
+ }
|
|
|
+ // 获取银行信息
|
|
|
+ const getBankInfo = async () => {
|
|
|
try {
|
|
|
- const res = await personalApi.customBankList({})
|
|
|
- if (res.code === 200) {
|
|
|
- // 清空数据
|
|
|
- bankData.value = {
|
|
|
- [BankType.CRYPTO]: [],
|
|
|
- [BankType.UNIONPAY]: [],
|
|
|
- [BankType.WIRE_TRANSFER]: [],
|
|
|
- [BankType.CREDIT_CARD]: []
|
|
|
- }
|
|
|
- // 分类数据
|
|
|
- res.data.forEach(item => {
|
|
|
- item.defaultBank1 = item.defaultBank == 1 ? [1] : []
|
|
|
- if (item.type === BankType.UNIONPAY) {
|
|
|
- bankData.value[BankType.UNIONPAY].push(item)
|
|
|
- } else if (item.type === BankType.WIRE_TRANSFER) {
|
|
|
- bankData.value[BankType.WIRE_TRANSFER].push(item)
|
|
|
- } else if (item.type === BankType.CREDIT_CARD) {
|
|
|
- item.expiryYearMonth = item.expiryYear && item.expiryMonth
|
|
|
- ? `${item.expiryYear}/${item.expiryMonth}`
|
|
|
- : ''
|
|
|
- bankData.value[BankType.CREDIT_CARD].push(item)
|
|
|
- } else if (item.type === BankType.CRYPTO) {
|
|
|
- bankData.value[BankType.CRYPTO].push(item)
|
|
|
- }
|
|
|
- })
|
|
|
+ const res = await personalApi.customBankList({})
|
|
|
+ if (res.code === 200) {
|
|
|
+ // 清空数据
|
|
|
+ bankData.value = {
|
|
|
+ [BankType.CRYPTO]: [],
|
|
|
+ [BankType.UNIONPAY]: [],
|
|
|
+ [BankType.WIRE_TRANSFER]: [],
|
|
|
+ [BankType.CREDIT_CARD]: [],
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- uni.showToast({
|
|
|
- title: error.message || t('Msg.Fail'),
|
|
|
- icon: 'none'
|
|
|
+ // 分类数据
|
|
|
+ res.data.forEach(item => {
|
|
|
+ item.defaultBank1 = item.defaultBank == 1 ? [1] : []
|
|
|
+ if (item.type === BankType.UNIONPAY) {
|
|
|
+ bankData.value[BankType.UNIONPAY].push(item)
|
|
|
+ } else if (item.type === BankType.WIRE_TRANSFER) {
|
|
|
+ bankData.value[BankType.WIRE_TRANSFER].push(item)
|
|
|
+ } else if (item.type === BankType.CREDIT_CARD) {
|
|
|
+ item.expiryYearMonth = item.expiryYear && item.expiryMonth
|
|
|
+ ? `${item.expiryYear}/${item.expiryMonth}`
|
|
|
+ : ''
|
|
|
+ bankData.value[BankType.CREDIT_CARD].push(item)
|
|
|
+ } else if (item.type === BankType.CRYPTO) {
|
|
|
+ bankData.value[BankType.CRYPTO].push(item)
|
|
|
+ }
|
|
|
})
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ uni.showToast({
|
|
|
+ title: error.message || t('Msg.Fail'),
|
|
|
+ icon: 'none',
|
|
|
+ })
|
|
|
}
|
|
|
-}
|
|
|
-// 获取银行信息
|
|
|
-onMounted(() => {
|
|
|
+ }
|
|
|
+ // 获取银行信息
|
|
|
+ onMounted(() => {
|
|
|
getBankList()
|
|
|
- getBankInfo();
|
|
|
-});
|
|
|
+ getBankInfo()
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
|
|
|
-
|
|
|
<style scoped lang="scss">
|
|
|
@import "@/uni.scss";
|
|
|
-.user-form {
|
|
|
+
|
|
|
+ .user-form {
|
|
|
margin-top: px2rpx(30);
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-:deep(.uni-row1) {
|
|
|
+ :deep(.uni-row1) {
|
|
|
.uni-col {
|
|
|
- padding: 0 0 !important;
|
|
|
}
|
|
|
|
|
|
.uni-forms-item {
|
|
|
- min-height: px2rpx(79);
|
|
|
- margin-bottom: px2rpx(10);
|
|
|
+ min-height: px2rpx(79);
|
|
|
+ margin-bottom: px2rpx(10);
|
|
|
}
|
|
|
|
|
|
.uni-easyinput__content {
|
|
|
- border: none !important;
|
|
|
- background-color: var(--bs-secondary-bg) !important;
|
|
|
+ background-color: var(--bs-secondary-bg) !important;
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.bank-menu {
|
|
|
+ .bank-menu {
|
|
|
// background: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
overflow: hidden;
|
|
|
|
|
|
+ &.card-header {
|
|
|
+ padding: px2rpx(10) px2rpx(20);
|
|
|
+ }
|
|
|
+
|
|
|
.bank-menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: px2rpx(12);
|
|
|
- padding: px2rpx(10) px2rpx(16);
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid var(--bs-border-color);
|
|
|
- font-size: px2rpx(16);
|
|
|
- font-weight: 500;
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
- transition: all 0.3s;
|
|
|
- height: px2rpx(50);
|
|
|
+ flex: 1;
|
|
|
+ min-width: px2rpx(260);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ //gap: px2rpx(12);
|
|
|
+ padding: 0 px2rpx(16);
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--bs-emphasis-color);
|
|
|
+ transition: all 0.3s;
|
|
|
+ height: px2rpx(36);
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+
|
|
|
+ .bank-icon {
|
|
|
+ width: px2rpx(50);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: var(--bs-secondary);
|
|
|
+ color: #ffffff;
|
|
|
border-radius: px2rpx(8);
|
|
|
- margin-bottom: px2rpx(8);
|
|
|
-
|
|
|
- .bank-icon {
|
|
|
- width: px2rpx(50);
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: var(--bs-secondary);
|
|
|
- color: #ffffff;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- }
|
|
|
|
|
|
&:hover {
|
|
|
- background: var(--bs-link-hover-color-rgb);
|
|
|
- color: var(--bs-secondary);
|
|
|
+ background: var(--bs-link-hover-color-rgb);
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &.active:hover {
|
|
|
- background: #d11920;
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ background: var(--bs-link-hover-color-rgb);
|
|
|
+ color: var(--bs-secondary);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active:hover {
|
|
|
+ background: #d11920;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.bank-content {
|
|
|
- //background: #fff;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- padding: 0 px2rpx(24);
|
|
|
+ .bank-content {
|
|
|
+ //border-radius: px2rpx(8);
|
|
|
|
|
|
.bank-info {
|
|
|
- .bank-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: px2rpx(24);
|
|
|
- padding-bottom: px2rpx(16);
|
|
|
- border-bottom: 1px solid #f3f4f6;
|
|
|
+ .bank-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ //border-bottom: 1px solid #f3f4f6;
|
|
|
+
|
|
|
+ .bank-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: px2rpx(20);
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: px2rpx(32);
|
|
|
+ color: #1f2937;
|
|
|
+ //margin-bottom: px2rpx(20);
|
|
|
+ }
|
|
|
|
|
|
- .bank-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: px2rpx(20);
|
|
|
- font-weight: 600;
|
|
|
- color: #1f2937;
|
|
|
- margin-bottom: px2rpx(20);
|
|
|
- }
|
|
|
+ .actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
|
|
|
- .actions {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ @media screen and (max-width: 992px) {
|
|
|
+ .bank-actions {
|
|
|
+ justify-content: flex-start !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bank-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: px2rpx(20);
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ //margin-bottom: px2rpx(10);
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ padding: px2rpx(8) px2rpx(16);
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+ border-radius: px2rpx(4);
|
|
|
+ font-size: px2rpx(14);
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f3f4f6;
|
|
|
}
|
|
|
|
|
|
- .bank-actions {
|
|
|
- display: flex;
|
|
|
- gap: px2rpx(20);
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-bottom: px2rpx(10);
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- padding: px2rpx(8) px2rpx(16);
|
|
|
- border: 1px solid #d1d5db;
|
|
|
- border-radius: px2rpx(4);
|
|
|
- font-size: px2rpx(14);
|
|
|
- cursor: pointer;
|
|
|
- background: #fff;
|
|
|
- transition: all 0.3s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #f3f4f6;
|
|
|
- }
|
|
|
-
|
|
|
- &.delete {
|
|
|
- background: #ea2027;
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
- border-color: #ea2027;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background: #d11920;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &.delete {
|
|
|
+ background: var(--bs-btn-bg);
|
|
|
+ color: #fff;
|
|
|
+ border-color: var(--bs-btn-bg);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: var(--bs-btn-hover-bg);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.photo-upload {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- gap: px2rpx(16);
|
|
|
+ gap: px2rpx(16);
|
|
|
|
|
|
- .photo-item {
|
|
|
- width: px2rpx(120);
|
|
|
- height: px2rpx(120);
|
|
|
- border-radius: px2rpx(8);
|
|
|
- overflow: hidden;
|
|
|
- background: #f3f4f6;
|
|
|
+ .photo-item {
|
|
|
+ width: px2rpx(120);
|
|
|
+ height: px2rpx(120);
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ overflow: hidden;
|
|
|
+ background: #f3f4f6;
|
|
|
|
|
|
- .photo-preview {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ .photo-preview {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .add-wallet-btn {
|
|
|
- margin-top: px2rpx(24);
|
|
|
- height: px2rpx(48);
|
|
|
- background: #ea2027;
|
|
|
- color: #fff;
|
|
|
- border-radius: px2rpx(4);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: px2rpx(8);
|
|
|
- font-size: px2rpx(16);
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s;
|
|
|
+ .header-title {
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 0 px2rpx(20) 0;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- background: #d11920;
|
|
|
- }
|
|
|
+ .add-wallet-btn {
|
|
|
+ height: px2rpx(40);
|
|
|
+ background: var(--bs-secondary);
|
|
|
+ color: #fff;
|
|
|
+ border-radius: px2rpx(20);
|
|
|
+ padding: 0 px2rpx(20);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: px2rpx(8);
|
|
|
+ font-size: px2rpx(16);
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #d11920;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.bankFront {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- // 上传包装器
|
|
|
- .upload-wrapper {
|
|
|
- :deep(.uni-file-picker) {
|
|
|
- .file-picker__box {
|
|
|
- border: none;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- // 文件列表容器
|
|
|
- .file-picker__box-list {
|
|
|
- display: flex;
|
|
|
- gap: px2rpx(16);
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- // 已上传的文件项
|
|
|
- .file-picker__box-item {
|
|
|
- width: px2rpx(300) !important;
|
|
|
- height: px2rpx(300) !important;
|
|
|
- margin: 0;
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- // 图片预览
|
|
|
- .file-picker__box-item-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- // 删除按钮
|
|
|
- .file-picker__box-item-close {
|
|
|
- position: absolute;
|
|
|
- top: px2rpx(4);
|
|
|
- right: px2rpx(4);
|
|
|
- width: px2rpx(24);
|
|
|
- height: px2rpx(24);
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '×';
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
- font-size: px2rpx(28);
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .close-icon {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ // 上传包装器
|
|
|
+ .upload-wrapper {
|
|
|
+ :deep(.uni-file-picker) {
|
|
|
+ .file-picker__box {
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文件列表容器
|
|
|
+ .file-picker__box-list {
|
|
|
+ display: flex;
|
|
|
+ gap: px2rpx(16);
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ // 已上传的文件项
|
|
|
+ .file-picker__box-item {
|
|
|
+ width: px2rpx(300) !important;
|
|
|
+ height: px2rpx(300) !important;
|
|
|
+ margin: 0;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // 图片预览
|
|
|
+ .file-picker__box-item-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除按钮
|
|
|
+ .file-picker__box-item-close {
|
|
|
+ position: absolute;
|
|
|
+ top: px2rpx(4);
|
|
|
+ right: px2rpx(4);
|
|
|
+ width: px2rpx(24);
|
|
|
+ height: px2rpx(24);
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
|
|
|
- // 上传按钮
|
|
|
- .file-picker__box-add {
|
|
|
- width: px2rpx(300) !important;
|
|
|
- height: px2rpx(300) !important;
|
|
|
- margin: 0;
|
|
|
- border: 2rpx dashed #d1d5db;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- background: #f9fafb;
|
|
|
- transition: all 0.3s;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- border-color: #ea2027;
|
|
|
- background: #fef2f2;
|
|
|
- }
|
|
|
-
|
|
|
- // 自定义上传按钮内容
|
|
|
- .custom-upload-btn {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .plus {
|
|
|
- font-size: px2rpx(48);
|
|
|
- color: #9ca3af;
|
|
|
- line-height: 1;
|
|
|
- margin-bottom: px2rpx(8);
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- font-size: px2rpx(24);
|
|
|
- color: #6b7280;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 隐藏默认的加号
|
|
|
- .add-icon {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ content: '×';
|
|
|
+ color: var(--bs-emphasis-color);
|
|
|
+ font-size: px2rpx(28);
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
|
|
|
- // 上传进度
|
|
|
- .file-picker__box-progress {
|
|
|
- width: px2rpx(300);
|
|
|
- height: px2rpx(300);
|
|
|
- border-radius: px2rpx(8);
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- color: var(--bs-emphasis-color);
|
|
|
+ .close-icon {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传按钮
|
|
|
+ .file-picker__box-add {
|
|
|
+ width: px2rpx(300) !important;
|
|
|
+ height: px2rpx(300) !important;
|
|
|
+ margin: 0;
|
|
|
+ border: 2rpx dashed #d1d5db;
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ background: #f9fafb;
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
|
- // 图片预览
|
|
|
- .image-preview {
|
|
|
- .preview-image {
|
|
|
- width: px2rpx(300);
|
|
|
- height: px2rpx(300);
|
|
|
- border-radius: px2rpx(8);
|
|
|
- object-fit: cover;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
+ &:hover {
|
|
|
+ border-color: #ea2027;
|
|
|
+ background: #fef2f2;
|
|
|
}
|
|
|
|
|
|
- .no-image {
|
|
|
- width: px2rpx(300);
|
|
|
- height: px2rpx(300);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #f5f5f5;
|
|
|
- border-radius: px2rpx(8);
|
|
|
- color: var(--bs-heading-color);
|
|
|
+ // 自定义上传按钮内容
|
|
|
+ .custom-upload-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .plus {
|
|
|
+ font-size: px2rpx(48);
|
|
|
+ color: #9ca3af;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: px2rpx(8);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
font-size: px2rpx(24);
|
|
|
- border: 1px solid #e5e7eb;
|
|
|
+ color: #6b7280;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 隐藏默认的加号
|
|
|
+ .add-icon {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 上传进度
|
|
|
+ .file-picker__box-progress {
|
|
|
+ width: px2rpx(300);
|
|
|
+ height: px2rpx(300);
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ color: var(--bs-emphasis-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片预览
|
|
|
+ .image-preview {
|
|
|
+ .preview-image {
|
|
|
+ width: px2rpx(300);
|
|
|
+ height: px2rpx(300);
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ object-fit: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
}
|
|
|
+
|
|
|
+ .no-image {
|
|
|
+ width: px2rpx(300);
|
|
|
+ height: px2rpx(300);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-radius: px2rpx(8);
|
|
|
+ color: var(--bs-heading-color);
|
|
|
+ font-size: px2rpx(24);
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-row {
|
|
|
+ gap: px2rpx(20); // 使用 gap 替代 gutter
|
|
|
+ }
|
|
|
</style>
|
