gypsy-crm-frontend-vu/pages/mine/components/BankInfoTab.vue

<template>
  <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>
                <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()"
                  v-if="cryptoWallets.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('blockchain.item2')}` }}</text>
                  </view>
                </button>
              </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 btn-gray" v-if="!editingId && item.authStatus !== 1"
                            @tap="startEdit(item)" v-t="'Btn.Editor'" />
                          <template v-if="editingId === item.id">
                            <view class="action-btn  btn-gray" @tap="saveBank(item)" v-t="'Btn.Save'" />
                            <view class="action-btn  btn-gray" @tap="cancelEdit()" v-t="'Btn.Cancel'" />
                          </template>
                          <view class="action-btn  btn-gray" @tap="confirmDelete(item)" v-t="'Btn.Delete'" />
                        </view>
                      </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-item>
                    </uni-col>
                    <uni-col :xs="24" class="mt-3">
                      <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>
                <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()"
                  v-if="unionpayCards.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.ChinaUnionPayCard')}` }}</text>
                  </view>
                </button>
              </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  btn-gray" v-if="!editingId && item.authStatus !== 1"
                          @tap="startEdit(item)" v-t="'Btn.Editor'" />
                        <template v-if="editingId === item.id">
                          <view class="action-btn  btn-gray" @tap="saveBank(item)" v-t="'Btn.Save'" />
                          <view class="action-btn  btn-gray" @tap="cancelEdit()" v-t="'Btn.Cancel'" />
                        </template>
                        <view class="action-btn btn-gray" @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="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" :disabled="editingId !== item.id"
                          :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" class="mt-3">
                      <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>
                <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()"
                  v-if="wireTransfers.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Title.BankWireTransfer')}` }}</text>
                  </view>
                </button>
              </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  btn-gray" v-if="!editingId && item.authStatus !== 1"
                          @tap="startEdit(item)" v-t="'Btn.Editor'" />
                        <template v-if="editingId === item.id">
                          <view class="action-btn  btn-gray" @tap="saveBank(item)" v-t="'Btn.Save'" />
                          <view class="action-btn  btn-gray" @tap="cancelEdit()" v-t="'Btn.Cancel'" />
                        </template>
                        <view class="action-btn  btn-gray" @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="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" class="mt-3">
                      <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>
                <button hover-class="" type="button" class="btn btn-danger btn-shadow waves-effect" @click="addBank()"
                  v-if="creditCards.length < 2">
                  <view class="d-flex align-items-center">
                    <cwg-icon name="crm-plus" :size="14" color="#fff" />
                    <text>{{ `${t('Btn.New')}${t('PersonalManagement.Label.CreditCard')}` }}</text>
                  </view>
                </button>
              </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  btn-gray" v-if="!editingId && item.authStatus !== 1"
                          @tap="startEdit(item)" v-t="'Btn.Editor'" />
                        <template v-if="editingId === item.id">
                          <view class="action-btn  btn-gray" @tap="saveBank(item)" v-t="'Btn.Save'" />
                          <view class="action-btn  btn-gray" @tap="cancelEdit()" v-t="'Btn.Cancel'" />
                        </template>
                        <view class="action-btn  btn-gray" @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="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" class="mt-3">
                      <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" :cancelText="t('Btn.Cancel')" :confirmText="t('Btn.Confirm')" />
  </uni-popup>
  <!-- 新增银行弹窗 -->
  <add-bank-dialog ref="addBankDialogRef" @success="addSuccess" />
  <!-- kyc认证弹窗 -->
  <kyc-auth-dialog ref="kycDialogRef" />
  <!-- 证件认证弹窗 -->
  <card-auth-dialog ref="cardDialogRef" />
  <cwg-global-popup />
</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'
import { usePopup } from '@/hooks/usePopup'

const { t, locale } = useI18n()

const { toast } = usePopup()

interface BankListType {
  key: string;
  label: string;
  icon: string;
}

interface BankInfo {
  id?: string;
  type: number;
  defaultBank: boolean;
  approveStatus?: number;
  authStatus?: number;
  blockchainName: string;
  walletAddress: string;
  photos?: string[];
  expiryYearMonth?: string;
  expiryYear?: string;
  expiryMonth?: string;

  [key: string]: any;
}

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: '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(() => {
  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') }]
  }
})
// 状态
const updateUrl = config.Host05
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({
  [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] || [])


// 弹出层ref
const deletePopup = ref(null)
const deleteTarget = ref(null)


// 开始编辑
const startEdit = (item) => {
  editingId.value = item.id
}

// 取消编辑
const cancelEdit = () => {
  editingId.value = null
  getBankInfo() // 重新加载数据
}

// 保存银行信息
const saveBank = async (item) => {

  if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletReviewing'))
    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) {
    uni.hideLoading()
    uni.showToast({
      title: error.msg || t('Msg.Fail'),
      icon: 'none',
    })
  }
}
// 删除
const confirmDelete = (item) => {
  if (selectedBankType.value === 'crypto' && item.approveStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletReviewing'))
    return
  }
  deleteTarget.value = item
  deletePopup.value.open()
}

// 关闭删除弹窗
const closeDeletePopup = () => {
  deletePopup.value.close()
  deleteTarget.value = null
}

// 执行删除
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) {
    uni.hideLoading()
    uni.showToast({
      title: error.msg,
      icon: 'none',
    })
    deletePopup.value.close()
  }
}
// 新增银行信息
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
  }
}

function openAddCrypto() {
  const wallets = cryptoWallets.value || []
  // 1️⃣ 没有钱包
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(4)
    return
  }
  // 2️⃣ 是否存在未认证钱包
  const hasUnAuth = wallets.some(
    item => item.authStatus === 0 || item.approveStatus === 1,
  )
  if (hasUnAuth) {
    toast(t('PersonalManagement.BlockchainWalletNotCertified'))
    return
  }
  // 3️⃣ 是否达到上限
  if (wallets.length >= 2) {
    toast(t('blockchain.item9'))
    return
  }
  // 4️⃣ 正常打开
  addBankDialogRef.value?.open(4)
}

function openAddUnionpay() {
  const wallets = unionpayCards.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(1)
    return
  }
  if (wallets.length >= 2) {
    toast(t('Msg.UnionPayCARDS'))
    return
  }
  addBankDialogRef.value?.open(1)
}

function openAddBank() {
  const wallets = wireTransfers.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(2)
    return
  }
  if (wallets.length >= 2) {
    toast(t('Msg.WireTransfers'))
    return
  }
  addBankDialogRef.value?.open(2)
}

function openAddCredit() {
  const wallets = creditCards.value || []
  if (wallets.length === 0) {
    addBankDialogRef.value?.open(3)
    return
  }
  addBankDialogRef.value?.open(3)
}

// 新增银行信息成功回调
const addSuccess = (e) => {
  if (selectedBankType.value === 'crypto') {
    openKycDialog(e)
  }
  getBankInfo()
}

// kyc认证和证件认证
const kycDialogRef = ref(null)
const cardDialogRef = ref(null)
// kyc认证
const doReady = (bankId, item) => {
  if (item.approveStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletReviewing'))
    return
  }
  if (item.authStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletNotCertified'))
    return
  }
  openKycDialog(bankId)
}

// 打开kyc认证弹窗
function openKycDialog(e) {
  kycDialogRef.value?.open(e)
}

// 打开证件认证弹窗
function openCardDialog(e, item) {
  if (item.approveStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletReviewing'))
    return
  }
  if (item.authStatus == 1) {
    toast(t('PersonalManagement.BlockchainWalletNotCertified'))
    return
  }
  cardDialogRef.value?.open(e, item)
}


// 掩码卡号
const maskCardNumber = (num) => {
  if (!num) return '--'
  if (num.length <= 4) return num
  return '**** **** **** ' + num.slice(-4)
}

// 获取银行列表
const getBankList = async () => {
  const res = await personalApi.BankList({})
  if (res.code === 200) {
    bankList.value = res.data
  }
}
// 文件更新处理
const handleFileUpdate = (newValue, item, field) => {
  item[field] = newValue
}

// 或者如果你需要在上传成功后做其他操作
const handleUploadComplete = (result, item, field) => {
  if (result.success) {
    console.log('上传完成:', result.paths)
    // 可以在这里做其他操作，比如保存到服务器
  }
}
// 获取银行信息
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)
        }
      })
    }
  } catch (error) {
    uni.showToast({
      title: error.msg || t('Msg.Fail'),
      icon: 'none',
    })
  }
}
// 获取银行信息
onMounted(() => {
  getBankList()
  getBankInfo()
})
</script>


<style scoped lang="scss">
@import "@/uni.scss";

.btn {
  margin: 0;
}

.user-form {
  margin-top: px2rpx(30);
}

:deep(.uni-row1) {
  .uni-col {}

  .uni-forms-item {
    min-height: px2rpx(79);
    margin-bottom: px2rpx(10);
  }

  .uni-easyinput__content {
    //background-color: var(--bs-secondary-bg) !important;
  }
}

.bank-menu {
  // background: #fff;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;

  &.card-header {
    padding: px2rpx(10) px2rpx(20);
  }

  .bank-menu-item {
    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: #f5f5f5;
      color: #000;
      border-radius: px2rpx(8);

      &:hover {
        background: var(--bs-link-hover-color-rgb);
        color: #333;
      }
    }

    &:hover {
      background: #f5f5f5;
      color: #333;
    }

    &.active:hover {
      background: #f5f5f5;
    }
  }
}

.bank-content {
  //border-radius: px2rpx(8);

  .bank-info {
    margin-bottom: px2rpx(20);

    .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);
      }

      .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;
          }

          &.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;

    gap: px2rpx(16);

    .photo-item {
      width: px2rpx(120);
      height: px2rpx(120);
      border-radius: px2rpx(8);
      overflow: hidden;
      background: #f3f4f6;

      .photo-preview {
        width: 100%;
        height: 100%;
      }
    }
  }

  .header-title {
    justify-content: space-between;
    padding: 0 0 px2rpx(20) 0;
  }

  .add-wallet-btn {
    height: px2rpx(40);
    background: var(--bs-secondary);
    color: #fff;
    border-radius: px2rpx(8);
    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;
              }
            }
          }
        }

        // 上传按钮
        .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;
          }
        }

        // 上传进度
        .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

  :deep(.cwg-combox) {
    .disabled-text {
      height: 100%;
    }

    height: 3rem;
  }
}
</style>