gypsy-crm-frontend-vu/pages/customer/withdrawal.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <view class="custom-withdraw">
      <!-- 标题 -->
      <!-- <view class="crm-title-box">
        <text class="tit">{{ t('Custom.Withdraw.Title') }}</text>
      </view> -->

      <!-- 步骤1：选择账户 -->
      <view class="box box-step1">
        <view class="b-card">
          <view class="card-top">
            <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title11') }}</text>
            <view class="base-info-form">
              <view class="uni-row2">
                <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                  :placeholder="t('placeholder.choose')" @change="onAccountChange" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 步骤2：支付通道列表 -->
      <view class="box box-step2" v-if="step2">
        <view class="b-card">
          <view class="card-top">
            <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title22') }}</text>
            <view v-for="(group, groupKey) in tableData" :key="groupKey">
              <!-- 通道分组标题 -->
              <view class="channelType" v-if="group.length" v-t="groupTitleMap[groupKey]" />
              <PaymentMethodsList :list="group" @select="isShowStep3" />
            </view>
            <view v-if="step3" class="reselect-btn">
              <button class="s-btn reselect" type="primary" @click="showTable">{{ t('Custom.Deposit.Reselect')
                }}</button>
            </view>
          </view>
        </view>
      </view>

      <!-- 步骤3：填写出金信息 -->
      <view class="box box-step3" v-if="step3">
        <view class="b-card">
          <view class="card-top">
            <!-- 注意事项 -->
            <view v-if="!isStep3" class="step3-attention">
              <rich-text class="attention" :nodes="isZh ? introduce.introduce : introduce.enIntroduce"></rich-text>
              <view class="btn-bottom">
                <text class="btn crm-cursor" @click="isStep3 = true">{{ t('Btn.Confirm') }}</text>
              </view>
            </view>

            <!-- 表单 -->
            <uni-forms ref="baseForm" :model="form" labelWidth="200" label-position="top" v-if="isStep3"
              class="base-info-form">
              <uni-row class="demo-uni-row uni-row1">
                <!-- 银行选择（针对有银行列表的通道） -->
                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="bankDate.length">
                  <uni-forms-item :label="t('Custom.Withdraw.Title5')">
                    <cwg-combox :clearable="false" v-model:value="selectedBankIndex" :options="bankOptions"
                      :placeholder="t('placeholder.choose')" @change="onBankChange" />
                  </uni-forms-item>
                </uni-col>

                <!-- 电子钱包地址输入 -->
                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                  v-if="['CHANNEL_TYPE_WALLET', 'UCARD_WALLET', 'CHANNEL_TYPE_ALI_WALLET'].includes(channelData.type)">
                  <uni-forms-item :label="getWalletLabel">
                    <uni-easyinput :clearable="false" v-model="form.address" :placeholder="t('placeholder.input')" />
                  </uni-forms-item>
                </uni-col>

                <!-- 数字货币选择（从已保存地址中选择） -->
                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="channelData.type === 'DIGITAL_CURRENCY'">
                  <view class="add-back">
                    <text>{{ t('blockchain.item10') }}</text>
                    <text class="add-btn crm-cursor" @click="openAddBankCard('add_bankBlockchain')">{{
                      t('Custom.Withdraw.addBank1') }}</text>
                  </view>
                  <uni-forms-item :label="t('blockchain.item10')">
                    <cwg-combox :clearable="false" v-model:value="selectedDigitalIndex" :options="digitalOptions"
                      :placeholder="t('placeholder.choose')" @change="onDigitalCurrencyChange"
                      :disabled="!ruleForm.bankBlockchain.length" />
                  </uni-forms-item>
                  <uni-row>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                      <uni-forms-item :label="t('blockchain.item3')">
                        <uni-easyinput disabled v-model="form.addressName" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                      <uni-forms-item :label="t('blockchain.item4')">
                        <uni-easyinput disabled v-model="form.address" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.addressProve">
                      <uni-forms-item :label="t('blockchain.item5')">
                        <view class="proof">
                          <template v-if="form.addressProve && (form.addressProve.slice(-3).toLowerCase() === 'pdf')">
                            <a :href="imgUrl + form.addressProve" target="_blank" class="state crm_state_blue">PDF</a>
                          </template>
                          <image v-else :src="imgUrl + form.addressProve" mode="aspectFit"
                            style="width: 100rpx; height: 100rpx;" @click="previewImage(imgUrl + form.addressProve)" />
                        </view>
                      </uni-forms-item>
                    </uni-col>
                  </uni-row>
                  <text class="tit"><text class="iconfont iconi"></text>{{ t('Custom.Deposit.Des') }}</text>
                </uni-col>

                <!-- 银行卡/信用卡选择 -->
                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                  v-if="['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD'].includes(channelData.type)">
                  <view class="add-back" v-if="channelData.type === 'BANK_TELEGRAPHIC'">
                    <text>{{ t('Custom.Withdraw.addWire') }}</text>
                    <text class="add-btn crm-cursor" @click="openAddBankCard('add_wireTransfer')">{{
                      t('Custom.Withdraw.addBank1') }}</text>
                  </view>
                  <view class="add-back" v-else-if="channelData.type === 'BANK'">
                    <text>{{ t('Custom.Withdraw.addBank') }}</text>
                    <text class="add-btn crm-cursor" @click="openAddBankCard('add_bankCard')">{{
                      t('Custom.Withdraw.addBank1')
                    }}</text>
                  </view>
                  <view class="add-back" v-else-if="channelData.type === 'CHANNEL_TYPE_CARD'">
                    <text>{{ t('PersonalManagement.Label.addCreditCard') }}</text>
                    <text class="add-btn crm-cursor" @click="openAddBankCard('add_CreditCard')">{{
                      t('Custom.Withdraw.addBank1') }}</text>
                  </view>

                  <uni-forms-item :label="t('placeholder.choose')">
                    <cwg-combox :clearable="false" v-model:value="selectedBankCardIndex" :options="bankCardOptions"
                      :placeholder="t('placeholder.choose')" @change="onBankCardChange" />
                  </uni-forms-item>

                  <!-- 通用银行信息展示 -->
                  <uni-row>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.bankUname">
                      <uni-forms-item :label="t('Custom.Withdraw.UserName')">
                        <uni-easyinput disabled v-model="form.bankUname" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.bankCardNum">
                      <uni-forms-item :label="t('Custom.Withdraw.BankCardNum')">
                        <uni-easyinput disabled v-model="form.bankCardNum" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.bankName">
                      <uni-forms-item :label="t('Custom.Withdraw.BankName')">
                        <uni-easyinput disabled v-model="form.bankName" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.bankBranchName">
                      <uni-forms-item :label="t('Custom.Withdraw.bankBranchName')">
                        <uni-easyinput disabled v-model="form.bankBranchName" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.swiftCode">
                      <uni-forms-item :label="t('Custom.Withdraw.swiftCode')">
                        <uni-easyinput disabled v-model="form.swiftCode" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.customBankCode">
                      <uni-forms-item :label="t('Custom.Withdraw.bankCode')">
                        <uni-easyinput disabled v-model="form.customBankCode" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="form.bankAddr">
                      <uni-forms-item :label="t('Custom.Withdraw.bankAddr')">
                        <uni-easyinput disabled v-model="form.bankAddr" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                      v-if="channelData.type === 'BANK_TELEGRAPHIC' && form.agencyNo">
                      <uni-forms-item label="Account Agency NO">
                        <uni-easyinput v-model="form.agencyNo" />
                      </uni-forms-item>
                    </uni-col>
                    <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                      v-if="channelData.type === 'BANK_TELEGRAPHIC' && form.cpf">
                      <uni-forms-item label="CPF">
                        <uni-easyinput v-model="form.cpf" />
                      </uni-forms-item>
                    </uni-col>
                  </uni-row>
                </uni-col>

                <!-- 出金金额 -->
                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="channelData.type !== 'BANK_TELEGRAPHIC'">
                  <uni-forms-item :label="t('Custom.Withdraw.Title3') + '(' + channelData.currency + ')'">
                    <uni-easyinput v-model="form.amount" type="number" @input="onAmountInput" />
                  </uni-forms-item>
                </uni-col>
                <template v-else>
                  <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <uni-forms-item :label="t('Custom.Withdraw.CurrencyType')">
                      <cwg-combox :clearable="false" v-model:value="form.currency"
                        :options="[{ text: 'USD', value: 'USD' }]" @change="(val) => form.currency = val" />
                    </uni-forms-item>
                  </uni-col>
                  <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                    <uni-forms-item :label="t('Custom.Withdraw.amount')">
                      <uni-easyinput v-model="form.amount" type="number" @input="onAmountInput" />
                    </uni-forms-item>
                  </uni-col>
                </template>

              </uni-row>

              <!-- 协议同意 -->
              <view class="agree">
                <label class="checkbox">
                  <checkbox :checked="form.agree2" @click="form.agree2 = !form.agree2" />
                  <text class="crm-cursor" style="text-decoration: underline;" @click="dialogCheckTip = true">{{
                    t('Custom.Withdraw.Des') }}</text>
                </label>
              </view>
              <view class="agree" v-if="dialogTipsIsShow">
                <label class="checkbox">
                  <checkbox :checked="form.agree3" @click="form.agree3 = !form.agree3" />
                  <text>* {{ t('Custom.Withdraw.item1') }}<br>{{ t('Custom.Withdraw.item1_1') }}<br>{{
                    t('Custom.Withdraw.item1_2') }}</text>
                </label>
              </view>

              <button class="s-btn" type="primary" @click="openTips">{{ t('Btn.Submit') }}</button>
            </uni-forms>
          </view>
        </view>
      </view>

      <!-- 弹窗：确认信息 -->
      <uni-popup ref="confirmPopup" type="center" :mask-click="false">
        <view class="popup-content">
          <text class="popup-title">{{ t('Home.page_customer.item3') }}</text>
          <view class="popup-form">
            <view class="popup-row"><text class="label">{{ t('Custom.Deposit.Title11') }}：</text><text>{{ loginValue
                }}</text></view>
            <view class="popup-row"><text class="label">{{ t('Custom.Deposit.Title22') }}：</text><text>{{ (t('lang') ===
              'cn' || t('lang') === 'zhHant') ? channelData.name : channelData.enName }}</text></view>
            <view class="popup-row"><text class="label">{{ t('Custom.Withdraw.Title3') }}：</text><text>{{ form.amount
                }}({{
                  channelData.currency }})</text></view>
            <view class="popup-row"><text class="label">{{ t('Custom.Withdraw.item7') }}：</text><text
                v-if="FreeNumber > 0 && dialogConfirmFee > 0"><text style="text-decoration:line-through">${{
                  dialogConfirmFee
                  }}</text> $0.00</text><text v-else>${{ dialogConfirmFee }}</text></view>
          </view>
          <view class="popup-buttons">
            <button @click="closeConfirmPopup">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="submitConfirm">{{ t('Btn.Confirm') }}</button>
          </view>
        </view>
      </uni-popup>

      <!-- 弹窗：提交前警告 -->
      <uni-popup ref="warningPopup" type="center">
        <view class="popup-content">
          <text class="popup-text">{{ t('Custom.Withdraw.item2') }}</text>
          <view class="popup-buttons">
            <button @click="closeWarningPopup">{{ t('Custom.Withdraw.item4') }}</button>
            <button type="primary" @click="submitAfterWarning">{{ t('Custom.Withdraw.item3') }}</button>
          </view>
        </view>
      </uni-popup>

      <!-- 弹窗：结果 -->
      <uni-popup ref="resultPopup" type="center" :mask-click="false">
        <view class="popup-content">
          <view class="result-icon" v-if="dialogSuccess"><text class="iconfont iconchenggong"></text></view>
          <view class="result-icon" v-else><text class="iconfont iconjingshi"></text></view>
          <text class="popup-text">{{ dialogMessage }}</text>
          <view class="popup-buttons">
            <button type="primary" @click="closeResultPopup">{{ t('Btn.Confirm') }}</button>
            <button v-if="!dialogSuccess" @click="closeResultPopup">{{ t('Btn.Cancel') }}</button>
          </view>
        </view>
      </uni-popup>

      <!-- 弹窗：条款 -->
      <uni-popup ref="tipPopup" type="center">
        <view class="popup-content">
          <rich-text class="popup-text"
            :nodes="(t('lang') === 'cn' || t('lang') === 'zhHant') ? introduce.introduce : introduce.enIntroduce"></rich-text>
          <view class="popup-buttons">
            <button @click="closeTipPopup">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="closeTipPopup">{{ t('Btn.Confirm') }}</button>
          </view>
        </view>
      </uni-popup>

      <!-- 弹窗：等待 -->
      <uni-popup ref="waitPopup" type="center" :mask-click="false">
        <view class="popup-content">
          <text class="iconfont icondengdai"></text>
          <text class="popup-text">{{ t('ApplicationDialog.Des38') }}</text>
        </view>
      </uni-popup>

      <!-- 弹窗：验证码 -->
      <uni-popup ref="codePopup" type="center">
        <view class="popup-content">
          <text class="popup-title">{{ t('signup.form.code') }}</text>
          <input class="code-input" v-model="emailCode" :placeholder="t('signup.form.code')" />
          <view class="code-timer" @click="getCode">{{ getCodeString }}</view>
          <view class="popup-buttons">
            <button @click="closeCodePopup">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="submitCode">{{ t('Btn.Confirm') }}</button>
          </view>
        </view>
      </uni-popup>

      <!-- 抽屉：新增/修改银行信息 -->
      <!-- <drawer :dialogInfoTradingAdd="dialogInfoTradingAdd" :addType="openType" @closeAdd="closeAdd"
      @confirmToReload="confirmToReload" /> -->
    </view>
  </cwg-page-wrapper>

</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
import { customApi } from '@/service/custom'
import { financialApi } from '@/service/financial'
// import {ServiceA} from '@/service/activity'
import Config from '@/config/index'
import Decimal from 'decimal.js'
// import Drawer from '@/components/Drawer.vue' // 假设抽屉组件已存在
import PaymentMethodsList from './components/PaymentMethodsList.vue'

const { t, locale } = useI18n()

const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))

const loginComboxOptions = computed(() => {
  return loginOptions.value.map((item, index) => ({
    text: item.label,
    value: item.login
  }))
})

const bankOptions = computed(() => {
  return bankDate.value.map((item, index) => ({
    text: isZh.value ? item.name : item.enName,
    value: index
  }))
})

const digitalOptions = computed(() => {
  return ruleForm.bankBlockchain.map((item, index) => ({
    text: `${item.addressName}-${item.address}`,
    value: index
  }))
})

const bankCardOptions = computed(() => {
  return bankList.value.map((item, index) => ({
    text: getBankLabel(item),
    value: index
  }))
})

const getWalletLabel = computed(() => {
  if (channelData.value.type === 'CHANNEL_TYPE_WALLET') return t('Custom.Withdraw.Title7')
  if (channelData.value.type === 'UCARD_WALLET') return t('card.title')
  if (channelData.value.type === 'CHANNEL_TYPE_ALI_WALLET') return t('Label.AliAccout')
  return ''
})

const { Code, Host80 } = Config
const imgUrl = Host80

// 工具函数
const Session = {
  get: (key, parse = false) => {
    const val = uni.getStorageSync(key)
    return parse ? JSON.parse(val) : val
  },
  set: (key, val) => uni.setStorageSync(key, val)
}

// 分组标题映射
const groupTitleMap = {
  'Ucard_Wallet': 'card.title',
  'Digital_Currency': 'Custom.Deposit.Channel3',
  'China_UnionPay': 'Custom.Deposit.Channel2',
  'Electronic_Wallet': 'Custom.Deposit.Channel4',
  'International_Transfer': 'Custom.Deposit.Channel1',
  'CHANNEL_TYPE_CARD': 'PersonalManagement.Label.CreditCard',
  'CHANNEL_TYPE_ALI_WALLET': 'Label.Ali'
}
// 数据
const loginOptions = ref([])
const selectedAccountIndex = ref(-1)
const selectedAccountLabel = ref('')
const loginValue = ref(null)
const step2 = ref(false)
const step3 = ref(false)
const isStep3 = ref(false)
const tableData = ref({
  Ucard_Wallet: [],
  Digital_Currency: [],
  China_UnionPay: [],
  Electronic_Wallet: [],
  International_Transfer: [],
  CHANNEL_TYPE_CARD: [],
  CHANNEL_TYPE_ALI_WALLET: []
})
const channelData = ref({})
const introduce = ref({ introduce: '', enIntroduce: '' })
const bankDate = ref([])
const selectedBankIndex = ref(-1)
const selectedBankLabel = ref('')
const ruleForm = reactive({
  bankInfo: [],
  bankWrit: [],
  xykInfo: [],
  bankBlockchain: []
})
const form = reactive({
  currency: 'USD',
  amount: '',
  amount1: '',
  agree2: false,
  agree3: false,
  address: '',
  addressName: '',
  addressProve: '',
  bankUname: '',
  bankCardNum: '',
  bankName: '',
  bankBranchName: '',
  swiftCode: '',
  customBankCode: '',
  bankAddr: '',
  agencyNo: '',
  cpf: ''
})
const myId = ref(null)
const bankList = computed(() => {
  if (channelData.value.type === 'BANK') return ruleForm.bankInfo
  if (channelData.value.type === 'BANK_TELEGRAPHIC') return ruleForm.bankWrit
  if (channelData.value.type === 'CHANNEL_TYPE_CARD') return ruleForm.xykInfo
  return []
})
const selectedBankCardIndex = ref(-1)
const selectedBankCardLabel = ref('')
const selectedDigitalIndex = ref(-1)
const selectedDigitalLabel = ref('')
const mAmount = reactive({ minAmount: '', maxAmount: '' })
const FreeNumber = ref(0)
const isFree = ref(false)
const dialogTipsIsShow = ref(true)
const dialogConfirmFee = ref(0)

// 弹窗引用
const confirmPopup = ref(null)
const warningPopup = ref(null)
const resultPopup = ref(null)
const tipPopup = ref(null)
const waitPopup = ref(null)
const codePopup = ref(null)

// 结果状态
const dialogSuccess = ref(false)
const dialogMessage = ref('')

// 验证码
const emailCode = ref('')
const getCodeString = ref('')
let timer = null
let countdown = 59

// 抽屉
const dialogInfoTradingAdd = ref(false)
const openType = ref('')

// 其他
const pictLoading = ref(false)
const isChannel = ref(true)
const bankPayType = ref('')
const requestUrl = ref('')
const RES = ref('')
const flag = ref(false)

// 方法
const getDateList = async () => {
  const res = await customApi.CustomDropdown({ platform: '' })
  if (res.code === Code.StatusOK) {
    loginOptions.value = res.data.map(item => ({
      ...item,
      label: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`
    }))
    const route = getCurrentPages().pop().$page.options
    if (route.login) {
      const found = loginOptions.value.find(opt => opt.login === Number(route.login))
      if (found) {
        selectedAccountIndex.value = loginOptions.value.indexOf(found)
        selectedAccountLabel.value = found.label
        loginValue.value = found.login
        step2.value = true
      }
    }
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const groupTypeName = (type) => {
  const map = {
    '1': 'AccountType.ClassicAccount',
    '2': 'AccountType.SeniorAccount',
    '5': 'AccountType.SpeedAccount',
    '6': 'AccountType.SpeedAccount',
    '7': 'AccountType.StandardAccount',
    '8': 'AccountType.CentAccount'
  }
  return t(map[type] || '')
}

const groupCurrency = (type) => {
  const symbol = { GBP: '£', USD: '$', EUR: '€', USC: '￠' }[type] || '$'
  return `: ${symbol}`
}

const getDepositList = async () => {
  pictLoading.value = true
  const res = await financialApi.RemitChannelList({})
  if (res.code === Code.StatusOK) {
    const groups = {
      Ucard_Wallet: [],
      Digital_Currency: [],
      China_UnionPay: [],
      Electronic_Wallet: [],
      International_Transfer: [],
      CHANNEL_TYPE_CARD: [],
      CHANNEL_TYPE_ALI_WALLET: []
    }
    res.data.forEach(item => {
      if (item.type === 'UCARD_WALLET') groups.Ucard_Wallet.push(item)
      if (item.type === 'DIGITAL_CURRENCY') groups.Digital_Currency.push(item)
      if (item.type === 'BANK') groups.China_UnionPay.push(item)
      if (item.type === 'CHANNEL_TYPE_WALLET') groups.Electronic_Wallet.push(item)
      if (item.type === 'BANK_TELEGRAPHIC') groups.International_Transfer.push(item)
      if (item.type === 'CHANNEL_TYPE_CARD') groups.CHANNEL_TYPE_CARD.push(item)
      if (item.type === 'CHANNEL_TYPE_ALI_WALLET') groups.CHANNEL_TYPE_ALI_WALLET.push(item)
    })
    tableData.value = groups
    pictLoading.value = false
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
    pictLoading.value = false
  }
}

const getBankList = async (row) => {
  const res = await financialApi.BankList({ channelCode: row.code })
  if (res.code === Code.StatusOK) {
    const data = res.data.map(j => ({
      ...j,
      minAmount: j.minAmount ?? row.minAmount,
      maxAmount: j.maxAmount ?? row.maxAmount,
      payType: row.code
    }))
    bankDate.value = data
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const getBankInfo = async () => {
  const res = await financialApi.customBankList({})
  if (res.code === Code.StatusOK) {
    ruleForm.bankInfo = []
    ruleForm.bankWrit = []
    ruleForm.xykInfo = []
    ruleForm.bankBlockchain = []
    res.data.forEach(item => {
      item.customBankCode = item.bankCode
      item.bankCode = null
      if (item.type === 1) ruleForm.bankInfo.push(item)
      else if (item.type === 2) ruleForm.bankWrit.push(item)
      else if (item.type === 3) {
        item.expiryYearMonth = `${item.expiryYear}/${item.expiryMonth}`
        ruleForm.xykInfo.push(item)
      } else if (item.type === 4) ruleForm.bankBlockchain.push(item)
    })
    // 如果有默认选中
    const findDefault = (list, type) => list.find(b => b.defaultBank && b.type === type)
    const defaultBank = findDefault(ruleForm.bankInfo, 1)
    const defaultWire = findDefault(ruleForm.bankWrit, 2)
    const defaultCard = findDefault(ruleForm.xykInfo, 3)
    const defaultDigital = findDefault(ruleForm.bankBlockchain, 4)
    if (channelData.value.type === 'BANK' && defaultBank) selectBankCard(defaultBank)
    if (channelData.value.type === 'BANK_TELEGRAPHIC' && defaultWire) selectBankCard(defaultWire)
    if (channelData.value.type === 'CHANNEL_TYPE_CARD' && defaultCard) selectBankCard(defaultCard)
    if (channelData.value.type === 'DIGITAL_CURRENCY' && defaultDigital && defaultDigital.authStatus === 1) selectDigital(defaultDigital)
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const selectBankCard = (item) => {
  const index = bankList.value.findIndex(b => b.id === item.id)
  if (index !== -1) {
    selectedBankCardIndex.value = index
    selectedBankCardLabel.value = getBankLabel(item)
    Object.assign(form, item)
  }
}

const selectDigital = (item) => {
  const index = ruleForm.bankBlockchain.findIndex(b => b.id === item.id)
  if (index !== -1) {
    selectedDigitalIndex.value = index
    selectedDigitalLabel.value = `${item.addressName}-${item.address}`
    form.addressName = item.addressName
    form.address = item.address
    form.addressProve = item.addressProve
  }
}

const getBankLabel = (item) => {
  if (channelData.value.type === 'BANK' || channelData.value.type === 'BANK_TELEGRAPHIC') {
    return `${item.bankName}-${item.bankCardNum}`
  } else if (channelData.value.type === 'CHANNEL_TYPE_CARD') {
    return item.bankCardNum
  }
  return ''
}

const getFreeNumber = async () => {
  if (!isFree.value) return
  const res = await financialApi.remainingReductionNumber({})
  if (res.code === Code.StatusOK) {
    FreeNumber.value = res.data || 0
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const isNewYear24Open = () => {
  // 简化，原逻辑是判断活动时间
  // 根据需求决定是否保留
}

// 事件处理
const onAccountChange = (val) => {
  const item = loginOptions.value.find(opt => opt.login === val)
  if (item) {
    selectedAccountIndex.value = loginOptions.value.indexOf(item)
    selectedAccountLabel.value = item.label
    loginValue.value = item.login
    step2.value = true
    showTable()
  }
}

const showTable = () => {
  myId.value = null
  step3.value = false
  isStep3.value = false
  isChannel.value = true
  getDepositList()
  Object.assign(form, { currency: 'USD', amount: '', amount1: '', agree2: false, agree3: false, address: '', addressName: '', addressProve: '', bankUname: '', bankCardNum: '', bankName: '', bankBranchName: '', swiftCode: '', customBankCode: '', bankAddr: '', agencyNo: '', cpf: '' })
  if (bankDate.value.length) bankDate.value = []
  selectedBankIndex.value = -1
  selectedBankLabel.value = ''
  selectedBankCardIndex.value = -1
  selectedBankCardLabel.value = ''
  selectedDigitalIndex.value = -1
  selectedDigitalLabel.value = ''
}

const isShowStep3 = (row) => {
  if (row.bankValid && isChannel.value) {
    getBankList(row)
    isChannel.value = false
    step3.value = true
    channelData.value = row
    mAmount.minAmount = row.minAmount
    mAmount.maxAmount = row.maxAmount
  } else {
    step3.value = true
    bankDate.value = []
    channelData.value = row
    mAmount.minAmount = row.minAmount
    mAmount.maxAmount = row.maxAmount
  }
  if (row.code === 'UNION_PAY_TELEGRAPHIC') {
    // WireTransferAccount = JSON.parse(row.property) 暂略
  }
  if (['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD', 'DIGITAL_CURRENCY'].includes(row.type)) {
    getBankInfo()
    form.login = loginValue.value
    form.payType = row.code
    bankPayType.value = row.code
  }
  // 重新组织 tableData 只显示当前选中项
  const newGroups = {
    Ucard_Wallet: [],
    Digital_Currency: [],
    China_UnionPay: [],
    Electronic_Wallet: [],
    International_Transfer: [],
    CHANNEL_TYPE_CARD: [],
    CHANNEL_TYPE_ALI_WALLET: []
  }
  if (row.type === 'UCARD_WALLET') newGroups.Ucard_Wallet = [row]
  if (row.type === 'DIGITAL_CURRENCY') newGroups.Digital_Currency = [row]
  if (row.type === 'BANK') newGroups.China_UnionPay = [row]
  if (row.type === 'CHANNEL_TYPE_WALLET') newGroups.Electronic_Wallet = [row]
  if (row.type === 'BANK_TELEGRAPHIC') newGroups.International_Transfer = [row]
  if (row.type === 'CHANNEL_TYPE_CARD') newGroups.CHANNEL_TYPE_CARD = [row]
  if (row.type === 'CHANNEL_TYPE_ALI_WALLET') newGroups.CHANNEL_TYPE_ALI_WALLET = [row]
  tableData.value = newGroups
  introduce.value = { introduce: row.introduce, enIntroduce: row.enIntroduce }
}

const onBankChange = (val) => {
  const index = val
  const item = bankDate.value[index]
  if (item) {
    selectedBankIndex.value = index
    selectedBankLabel.value = (t('lang') === 'cn' || t('lang') === 'zhHant') ? item.name : item.enName
    channelData.value.rate = item.rate
    channelData.value.transformCurrency = item.currency
    channelData.value.feeTypeBank = item.feeType
    channelData.value.freeBank = item.free
    channelData.value.feeAmountBank = item.feeAmount
  }
}

const onBankCardChange = (val) => {
  const index = val
  const item = bankList.value[index]
  if (item) {
    selectedBankCardIndex.value = index
    selectedBankCardLabel.value = getBankLabel(item)
    Object.assign(form, item)
  }
}

const onDigitalCurrencyChange = (val) => {
  const index = val
  const item = ruleForm.bankBlockchain[index]
  if (item && item.authStatus === 1) {
    selectedDigitalIndex.value = index
    selectedDigitalLabel.value = `${item.addressName}-${item.address}`
    form.addressName = item.addressName
    form.address = item.address
    form.addressProve = item.addressProve
  } else if (item && item.authStatus === 0) {
    uni.showToast({ title: t('Msg.item11'), icon: 'none' })
    selectedDigitalIndex.value = -1
    selectedDigitalLabel.value = ''
  }
}

const onAmountInput = (val) => {
  // val is the value from uni-easyinput
  if (val && channelData.value.rate) {
    if (isFree.value) {
      let feeAmount = 0
      if (channelData.value.feeTypeBank) {
        if (channelData.value.feeTypeBank === 1) feeAmount = Number(val) * (Number(channelData.value.freeBank || 0) / 100)
        else if (channelData.value.feeTypeBank === 2) feeAmount = Number(channelData.value.feeAmountBank || 0)
      } else {
        if (channelData.value.feeType === 1) feeAmount = Number(val) * (Number(channelData.value.free || 0) / 100)
        else if (channelData.value.feeType === 2) feeAmount = Number(channelData.value.feeAmount || 0)
      }
      if (FreeNumber.value > 0) {
        form.amount1 = new Decimal(Number(val)).mul(Number(channelData.value.rate || 0)).toNumber()
      } else {
        form.amount1 = new Decimal(Number(val)).sub(Number(feeAmount || 0)).mul(Number(channelData.value.rate || 0)).toNumber()
      }
    } else {
      form.amount1 = (val * channelData.value.rate).toFixed(2)
    }
    if (['CNY', 'THB', 'VND'].includes(channelData.value.transformCurrency)) {
      form.amount1 = parseInt(form.amount1)
    }
  }
}

const openTips = () => {
  // 校验
  if (channelData.value.type === 'DIGITAL_CURRENCY' && !myId.value) {
    uni.showToast({ title: t('blockchain.item11'), icon: 'none' })
    return
  }
  if (['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD'].includes(channelData.value.type) && !selectedBankCardIndex.value !== -1) {
    uni.showToast({ title: t('vaildate.withdrawBank.empty'), icon: 'none' })
    return
  }
  // 金额校验
  if (!form.amount) {
    uni.showToast({ title: t('vaildate.input.empty'), icon: 'none' })
    return
  }
  if (Number(form.amount) < Number(mAmount.minAmount) || Number(form.amount) > Number(mAmount.maxAmount)) {
    uni.showToast({ title: `${t('vaildate.amount.amount')}${mAmount.minAmount} - ${mAmount.maxAmount}`, icon: 'none' })
    return
  }
  if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(form.amount)) {
    uni.showToast({ title: t('vaildate.amount.format'), icon: 'none' })
    return
  }
  if (!form.agree2) {
    uni.showToast({ title: t('vaildate.agree.empty'), icon: 'none' })
    return
  }
  if (dialogTipsIsShow.value && !form.agree3) {
    uni.showToast({ title: t('vaildate.agree.empty'), icon: 'none' })
    return
  }

  if (dialogTipsIsShow.value) {
    warningPopup.value.open()
  } else {
    // 直接提交，先弹出确认框
    prepareConfirm()
  }
}

const prepareConfirm = () => {
  // 计算手续费
  let feeAmount = 0
  if (channelData.value.feeTypeBank) {
    if (channelData.value.feeTypeBank === 1) feeAmount = Number(form.amount) * (Number(channelData.value.freeBank || 0) / 100)
    else if (channelData.value.feeTypeBank === 2) feeAmount = Number(channelData.value.feeAmountBank || 0)
  } else {
    if (channelData.value.feeType === 1) feeAmount = Number(form.amount) * (Number(channelData.value.free || 0) / 100)
    else if (channelData.value.feeType === 2) feeAmount = Number(channelData.value.feeAmount || 0)
  }
  dialogConfirmFee.value = feeAmount
  confirmPopup.value.open()
}

const submitConfirm = () => {
  confirmPopup.value.close()
  submit()
}

const submitAfterWarning = () => {
  warningPopup.value.close()
  prepareConfirm()
}

const submit = async () => {
  if (flag.value) return
  flag.value = true
  waitPopup.value.open()

  const params = {
    login: loginValue.value,
    payType: channelData.value.code,
    ...form
  }

  // 根据不同通道类型调用不同接口
  let res = null
  if (channelData.value.type === 'DIGITAL_CURRENCY') {
    if (!emailCode.value) {
      waitPopup.value.close()
      codePopup.value.open()
      flag.value = false
      return
    }
    params.emailCode = emailCode.value
    res = await financialApi.WithdrawAapplyDigitalCurrency(channelData.value.requestUrl, params)
  } else if (['CHANNEL_TYPE_WALLET', 'UCARD_WALLET', 'CHANNEL_TYPE_ALI_WALLET'].includes(channelData.value.type)) {
    res = await financialApi.WithdrawAapplyDigitalCurrency(channelData.value.requestUrl, params)
  } else if (['BANK', 'BANK_TELEGRAPHIC', 'CHANNEL_TYPE_CARD'].includes(channelData.value.type)) {
    res = await financialApi.WithdrawApplyBank(channelData.value.requestUrl, params)
  }

  waitPopup.value.close()
  if (res && res.code === Code.StatusOK) {
    dialogSuccess.value = true
    dialogMessage.value = t('ApplicationDialog.Des1')
    resultPopup.value.open()
  } else {
    dialogSuccess.value = false
    dialogMessage.value = res?.msg || t('ApplicationDialog.Des2')
    resultPopup.value.open()
  }
  flag.value = false
}

const getCode = async () => {
  if (getCodeString.value !== t('signup.form.getCode')) return
  const res = await financialApi.withdrawCode({})
  if (res.code === Code.StatusOK) {
    uni.showToast({ title: t('Msg.CodeSuccess'), icon: 'none' })
    startCountdown()
  } else {
    uni.showToast({ title: res.msg, icon: 'none' })
  }
}

const startCountdown = () => {
  getCodeString.value = `${t('signup.form.waitCode1')}${countdown}${t('signup.form.waitCode2')}`
  timer = setInterval(() => {
    countdown--
    if (countdown <= 0) {
      clearInterval(timer)
      timer = null
      countdown = 59
      getCodeString.value = t('signup.form.getCode')
    } else {
      getCodeString.value = `${t('signup.form.waitCode1')}${countdown}${t('signup.form.waitCode2')}`
    }
  }, 1000)
}

const submitCode = () => {
  if (!emailCode.value) {
    uni.showToast({ title: t('vaildate.code.empty'), icon: 'none' })
    return
  }
  codePopup.value.close()
  submit()
}

const openAddBankCard = (type) => {
  openType.value = type
  dialogInfoTradingAdd.value = true
}

const closeAdd = (val) => {
  dialogInfoTradingAdd.value = val
}

const confirmToReload = () => {
  dialogInfoTradingAdd.value = false
  getBankInfo()
}

const closeConfirmPopup = () => confirmPopup.value.close()
const closeWarningPopup = () => warningPopup.value.close()
const closeResultPopup = () => {
  resultPopup.value.close()
  if (dialogSuccess.value) {
    // 重置状态
    showTable()
    step2.value = false
    step3.value = false
    isStep3.value = false
    selectedAccountIndex.value = -1
    selectedAccountLabel.value = ''
    loginValue.value = null
  }
}
const closeTipPopup = () => tipPopup.value.close()
const closeCodePopup = () => codePopup.value.close()

// 预览图片
const previewImage = (url) => {
  uni.previewImage({ urls: [url] })
}

// 生命周期
onLoad(() => {
  getDateList()
  getFreeNumber()
  isNewYear24Open()
  // 计算 isFree 时间判断，原逻辑略
  isFree.value = true // 根据实际需求
  getDepositList()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

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

.custom-withdraw {
  background: var(--color-zinc-50);
  min-height: 100vh;

  .box {
    margin-bottom: px2rpx(20);

    .b-card {
      background: #fff;
      border-radius: px2rpx(12);
      padding: px2rpx(20);
      box-shadow: 0 px2rpx(4) px2rpx(12) rgba(0, 0, 0, 0.03);

      .card-top {
        .tit {
          font-size: px2rpx(16);
          font-weight: 600;
          margin-bottom: px2rpx(16);
          display: flex;
          align-items: center;
          color: var(--color-navy-900);
          position: relative;
          padding-left: 20px;

          &:after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 8px solid currentColor;
          }

          .iconfont {
            margin-right: px2rpx(8);
            color: var(--color-primary);
            font-size: px2rpx(18);
          }
        }
      }

      .channelType {
        font-size: px2rpx(15);
        font-weight: 600;
        margin: px2rpx(24) 0 px2rpx(12);
        color: var(--color-navy-700);
        padding-left: px2rpx(8);
        border-left: px2rpx(4) solid var(--color-primary);
      }
    }
  }

  .reselect-btn {
    margin-top: px2rpx(20);
    display: flex;
    justify-content: flex-end;
  }

  .s-btn {
    &.reselect {
      background-color: var(--color-zinc-100);
      color: var(--color-navy-700);
      border: none;
      font-size: px2rpx(14);
      padding: px2rpx(8) px2rpx(20);
      border-radius: px2rpx(8);

      &:active {
        background-color: var(--color-zinc-200);
      }
    }

    &[type="primary"] {
      width: 100%;
      height: px2rpx(48);
      background: var(--color-navy-900);
      color: #fff;
      border-radius: px2rpx(12);
      font-size: px2rpx(16);
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      margin-top: px2rpx(30);
      transition: all 0.2s;

      &:active {
        transform: scale(0.98);
        background: var(--color-navy-800);
      }
    }
  }

  .add-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: px2rpx(12);
    padding: px2rpx(12) px2rpx(16);
    background: var(--color-zinc-100);
    border-radius: px2rpx(8);

    text {
      font-size: px2rpx(14);
      color: var(--color-navy-700);
      font-weight: 500;
    }

    .add-btn {
      color: var(--color-primary);
      font-weight: 600;
      text-decoration: underline;

      &:active {
        opacity: 0.7;
      }
    }
  }

  .proof {
    margin-top: px2rpx(8);
    border: px2rpx(1) dashed var(--color-zinc-300);
    border-radius: px2rpx(8);
    padding: px2rpx(8);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-zinc-50);

    .state {
      padding: px2rpx(4) px2rpx(12);
      border-radius: px2rpx(4);
      font-size: px2rpx(12);
      font-weight: bold;
    }
  }

  .agree {
    margin: px2rpx(24) 0;
    display: flex;
    align-items: flex-start;

    .checkbox {
      display: flex;
      align-items: flex-start;
      gap: px2rpx(8);

      :deep(uni-checkbox .uni-checkbox-input) {
        border-radius: px2rpx(4);
        width: px2rpx(18);
        height: px2rpx(18);
      }

      text {
        font-size: px2rpx(13);
        color: var(--color-zinc-500);
        line-height: 1.5;
      }
    }
  }

  .step3-attention {
    background: var(--color-error-50, #fff1f0);
    border-radius: px2rpx(12);
    padding: px2rpx(16);
    margin-bottom: px2rpx(20);

    .attention {
      font-size: px2rpx(14);
      color: var(--color-error-600, #cf1322);
      line-height: 1.6;
    }

    .btn-bottom {
      margin-top: px2rpx(20);
      display: flex;
      justify-content: center;

      .btn {
        background: var(--color-error-600, #cf1322);
        color: #fff;
        padding: px2rpx(10) px2rpx(48);
        border-radius: px2rpx(24);
        font-size: px2rpx(15);
        font-weight: 700;
        box-shadow: 0 px2rpx(4) px2rpx(10) rgba(207, 19, 34, 0.2);
        transition: all 0.2s;

        &:active {
          transform: scale(0.96);
          opacity: 0.8;
        }
      }
    }
  }

  :deep(.base-info-form) {
    .uni-row1 {
      .uni-col {
        padding: 0 px2rpx(10) !important;
      }

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

      .uni-select,
      .uni-combox,
      .uni-easyinput__content,
      .uni-date-editor--x {
        border: none !important;
        background-color: var(--color-zinc-100) !important;
        border-radius: px2rpx(8) !important;
      }

      .uni-date-x {
        border: none !important;
        background-color: rgba(195, 195, 195, 0) !important;
      }

      .uni-easyinput__content-input {
        height: px2rpx(44) !important;
      }
    }
  }

  /* 弹窗样式美化 */
  :deep(.uni-popup__wrapper) {
    .popup-content {
      background-color: #fff;
      border-radius: px2rpx(20);
      padding: px2rpx(24);
      width: px2rpx(320);

      .popup-title {
        font-size: px2rpx(18);
        font-weight: 700;
        text-align: center;
        margin-bottom: px2rpx(20);
        color: var(--color-navy-900);
        display: block;
      }

      .popup-text {
        font-size: px2rpx(14);
        line-height: 1.6;
        color: var(--color-zinc-600);
        margin-bottom: px2rpx(20);
        display: block;
      }

      .popup-form {
        background: var(--color-zinc-50);
        border-radius: px2rpx(12);
        padding: px2rpx(16);
        margin-bottom: px2rpx(24);

        .popup-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: px2rpx(12);
          font-size: px2rpx(14);

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: var(--color-zinc-500);
          }

          text:not(.label) {
            color: var(--color-navy-900);
            font-weight: 500;
          }
        }
      }

      .popup-buttons {
        display: flex;
        gap: px2rpx(12);

        button {
          flex: 1;
          height: px2rpx(44);
          border-radius: px2rpx(10);
          font-size: px2rpx(15);
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;

          &[type="primary"] {
            background: var(--color-navy-900);
            color: #fff;
          }

          &:not([type="primary"]) {
            background: var(--color-zinc-100);
            color: var(--color-zinc-600);
          }
        }
      }

      .result-icon {
        display: flex;
        justify-content: center;
        margin-bottom: px2rpx(16);

        .iconfont {
          font-size: px2rpx(48);

          &.iconchenggong {
            color: #52c41a;
          }

          &.iconjingshi {
            color: #faad14;
          }

          &.icondengdai {
            color: var(--color-primary);
            animation: rotate 2s linear infinite;
          }
        }
      }

      .code-input {
        background: var(--color-zinc-100);
        border: none;
        border-radius: px2rpx(8);
        padding: px2rpx(12);
        margin-bottom: px2rpx(12);
        font-size: px2rpx(15);
      }

      .code-timer {
        color: var(--color-primary);
        font-size: px2rpx(13);
        text-align: right;
        margin-bottom: px2rpx(20);
        font-weight: 500;
      }
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>