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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Home.page_customer.item2')" />

        <view class="container">
            <uni-loading v-if="loading" />
            <view class="row" v-else>
                <!-- 电汇提示 -->
                <p v-if="isStep3 && ['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.code)"
                    class="text-secondary" v-t="'Custom.Deposit.Tips'" />
                <!-- 特别提示（B2BINPAY） -->
                <p v-if="isStep3 && bankOptions.length && channelData.code == 'B2BINPAY'" class="text-secondary"
                    v-t="'Custom.Deposit.Des'" />
                <view class="col-lg-8">
                    <view class="card">
                        <view class="border-0 card-header">

                            <uni-forms v-if="isStep3" ref="formRef" :model="params" :rules="rules" label-position="top"
                                validate-trigger="submit" :label-width="300" class="base-info-form">

                                <view class="row">
                                    <!-- 步骤1：选择账户 -->
                                    <view class="col-lg-6" v-if="step2">

                                        <h5 class="mb-3" v-t="'Custom.Deposit.Title1'"></h5>
                                        <uni-forms-item>
                                            <cwg-combox :clearable="false" v-model:value="loginValue"
                                                :options="loginComboxOptions"
                                                :placeholder="t('placeholder.choose')" /></uni-forms-item>
                                    </view>
                                    <!-- 步骤2：支付通道列表（卡片布局） -->
                                    <view class="col-lg-6" v-if="step2">
                                        <h5 class="mb-3" v-t="'Custom.Deposit.Title2'"></h5>
                                        <uni-forms-item>
                                            <cwg-combox :clearable="false" v-model:value="channelId"
                                                :options="channelListOptions" :placeholder="t('placeholder.choose')">
                                            </cwg-combox></uni-forms-item>
                                    </view>

                                    <!-- 信用卡选择区域 -->
                                    <view class="col-lg-6" v-if="isStep3 && channelData.confirmCreditCard == 1">
                                        <h5 class="mb-3" v-t="'PersonalManagement.Label.selectCreditCard'"></h5>
                                        <uni-forms-item>
                                            <cwg-combox :clearable="false" v-model:value="myId"
                                                :options="creditCardOptions" :placeholder="t('placeholder.choose')"
                                                @change="selectCode" />
                                        </uni-forms-item>
                                        <h6 class="add-back">
                                            <text>{{ t('PersonalManagement.Label.addCreditCard') }}</text>
                                            <text class="add-btn crm-cursor" @click="openAddBankCard">{{
                                                t('Custom.Withdraw.addBank1') }}</text>
                                        </h6>
                                    </view>
                                    <!-- 银行选择（如有） -->
                                    <view class="col-lg-6" v-if="isStep3 && bankOptions.length">
                                        <h5 class="mb-3" v-t="'news_add_field.Label.Title4'"></h5>
                                        <uni-forms-item>
                                            <cwg-combox :clearable="false" v-model:value="code" :options="bankOptions"
                                                :placeholder="t('placeholder.choose')" @change="selectCode" />
                                        </uni-forms-item>
                                    </view>
                                    <!-- 电汇信息展示 -->
                                    <view class="col-lg-6"
                                        v-if="isStep3 && ['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.code)">
                                        <h5 class="mb-3" v-t="'Custom.Deposit.Title5'"></h5>
                                        <view class="wire-transfer-account">
                                            <view class="row"><text class="label SpecialColor">{{
                                                t('Custom.Deposit.bankUname') }}</text><text
                                                    class="content SpecialColor">{{
                                                        WireTransferAccount.bankUname || '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label">{{ t('Custom.Deposit.bankName')
                                            }}</text><text class="content">{{ WireTransferAccount.bankName
                                                        ||
                                                        '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label SpecialColor">{{
                                                t('Custom.Deposit.bankCardNum') }}</text><text
                                                    class="content SpecialColor">{{
                                                        WireTransferAccount.bankCardNum || '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label">{{ t('Custom.Deposit.bankAddr')
                                            }}</text><text class="content">{{ WireTransferAccount.bankAddr
                                                        ||
                                                        '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label SpecialColor">{{
                                                t('Custom.Deposit.swiftCode') }}</text><text
                                                    class="content SpecialColor">{{
                                                        WireTransferAccount.swiftCode || '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label">{{ t('Custom.Deposit.bankCode')
                                            }}</text><text class="content">{{ WireTransferAccount.bankCode
                                                        ||
                                                        '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label SpecialColor">{{
                                                t('Custom.Recording.Note')
                                                    }}</text><text class="content SpecialColor">{{
                                                        WireTransferAccount.bankMsg || '--' }}</text></view>
                                        </view>
                                    </view>

                                    <!-- 数字货币信息展示 -->
                                    <!-- <view class="col-lg-6"
                                        v-if="isStep3 && channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0">
                                        <h5 class="mb-3" v-t="'Custom.Deposit.DigitalAcc'"></h5>
                                        <view class="wire-transfer-account">
                                            <view class="row"><text class="label SpecialColor">{{
                                                t('Custom.Deposit.DigitalName') }}</text><text
                                                    class="content SpecialColor">{{ WireTransferAccount.name
                                                        + '-' +
                                                        WireTransferAccount.type }}</text></view>
                                            <view class="row"><text class="label">{{ t('Custom.Withdraw.Title6')
                                                    }}</text><text class="content">{{ WireTransferAccount.address ||
                                                        '--'
                                                    }}</text></view>
                                            <view class="row"><text class="label">QR Code</text>
                                                <image :src="Host05 + WireTransferAccount.url" mode="aspectFit"
                                                    style="width: 100rpx; height: 100rpx;" />
                                            </view>
                                        </view>
                                    </view> -->
                                    <!-- 表单区域（含金额、预估金额、上传凭证、优惠码） -->
                                    <view class="col-lg-6">
                                        <h5 class="mb-3">
                                            {{ t('Custom.Deposit.Title3') + '(' + channelData.currency + ')' }}
                                        </h5>
                                        <!-- 金额输入 -->
                                        <view class="amount-box">
                                            <uni-forms-item name="amount" :error-message="amountErrorMessage"
                                                class="amount-input">
                                                <uni-easyinput type="number" v-model="params.amount"
                                                    :placeholder="t('placeholder.input')" @blur="validateAmount" />
                                            </uni-forms-item>
                                            <!-- <view class="btn" v-t="'State.All'" @click="setAllAmount"></view> -->
                                        </view>
                                    </view>

                                    <!-- 预估金额（若有汇率） -->
                                    <view class="col-lg-6" v-if="channelData.rate">
                                        <h5 class="mb-3">
                                            <view class="label-with-icon">
                                                <text>{{ t('Custom.Deposit.EstimatedAmount') + '(' +
                                                    channelData.transformCurrency + ')' }}</text>
                                                <uni-tooltip placement="right">
                                                    <view class="help-icon">ⓘ</view>
                                                    <template #content>
                                                        <text>{{ t('Custom.Deposit.des') }}</text>
                                                    </template>
                                                </uni-tooltip>
                                            </view>
                                        </h5>
                                        <uni-forms-item>
                                            <uni-easyinput v-model="params.amount1" disabled
                                                :placeholder="t('placeholder.input')" />
                                        </uni-forms-item>
                                    </view>
                                    <!-- 优惠码 -->
                                    <view class="col-lg-6">
                                        <h5 class="mb-3">
                                            <view class="label-with-icon">
                                                <text>{{ t('Custom.Deposit.PromoCode') }}</text>
                                                <uni-tooltip placement="right">
                                                    <view class="help-icon">ⓘ</view>
                                                    <template #content>
                                                        <text>{{ t('news_add_field.Des.item3') }}</text>
                                                    </template>
                                                </uni-tooltip>
                                            </view>
                                        </h5>
                                        <uni-forms-item name="promoCode">
                                            <uni-easyinput v-model="params.promoCode"
                                                :placeholder="t('placeholder.input')" />
                                        </uni-forms-item>
                                    </view>
                                    <!-- 上传汇款凭证（特定渠道） -->
                                    <view class="col-lg-6" v-if="
                                        channelData.code == 'UNION_PAY_TELEGRAPHIC' ||
                                        channelData.code == 'UNION_PAY_TELEGRAPHIC_SPECIAL' ||
                                        channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0 ||
                                        channelData.code == 'UNION_PAY_TELEGRAPHIC_TWO'
                                    ">
                                        <h5 class="mb-3" v-t="'Custom.Deposit.UploadRemittanceVoucher'"></h5>
                                        <uni-forms-item>
                                            <cwg-file-picker-wrapper v-model="imageUrl" :limit="1" :editable="true"
                                                :fileMediatype="'all'" uploadUrl="/wasabi/upload/file"
                                                :baseUrl="Host80" />
                                        </uni-forms-item>
                                    </view>

                                    <!-- ========== 赠金活动部分 ========== -->
                                    <!-- 10%赠金（年中赠金） -->
                                    <view v-if="tableData4Flag">
                                        <uni-forms-item class="agree" name="agree4">
                                            <label class="checkbox">
                                                <checkbox :checked="params.agree4"
                                                    @click="params.agree4 = !params.agree4" />
                                                <text>{{ t('news_add_field1.activitiesNZ.itemDeposit1')
                                                }}</text>
                                            </label>
                                            <view style="line-height: 1.5; font-size: 14px">
                                                <text>{{ t('news_add_field1.activitiesNZ.itemDeposit2')
                                                }}</text>
                                                <text class="clause crm-cursor" @click="dialogClauseNZ = true">{{
                                                    t('news_add_field1.activitiesNZ.itemDeposit3')
                                                }}</text>
                                                <text>{{ t('news_add_field1.activitiesNZ.itemDeposit4')
                                                }}</text>
                                            </view>
                                        </uni-forms-item>

                                    </view>

                                    <!-- 20%赠金（年中赠金） -->
                                    <view v-if="tableData4TwoFlag">
                                        <uni-forms-item class="agree" name="agree5">
                                            <label class="checkbox">
                                                <checkbox :checked="params.agree5"
                                                    @click="params.agree5 = !params.agree5" />
                                                <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit1')
                                                }}</text>
                                            </label>
                                            <view style="line-height: 1.5; font-size: 14px">
                                                <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit2')
                                                }}</text>
                                                <text class="clause crm-cursor" @click="dialogClauseNZTwo = true">{{
                                                    t('news_add_field1.activitiesNZTwo.itemDeposit3') }}</text>
                                                <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit4')
                                                }}</text>
                                            </view>
                                        </uni-forms-item>

                                    </view>

                                    <!-- 赠送活动（动态） -->
                                    <view v-if="tableDataNewListFlag">
                                        <uni-forms-item class="agree" name="agree6">
                                            <label>
                                                <checkbox :checked="params.agree6"
                                                    @click="params.agree6 = !params.agree6" />
                                                <text>{{ tableDataNewList.title }}</text>
                                            </label>
                                            <view style="line-height: 1.5; font-size: 14px">
                                                <text>{{ t('news_add_field1.activitiesNewList.item1') }}</text>
                                                <text class="clause crm-cursor" @click="dialogClauseNewList = true">{{
                                                    tableDataNewList.title }}</text>
                                                <text>{{ t('news_add_field1.activitiesNewList.item2') }}</text>
                                            </view>
                                        </uni-forms-item>

                                    </view>

                                    <!-- 20%赠金申请（特定账户类型） -->
                                    <view
                                        v-if="(ACCType == 1 || ACCType == 2 || ACCType == 5 || ACCType == 6 || ACCType == 7) && anshiClose">
                                        <uni-forms-item class="agree" name="agree3">
                                            <label class="checkbox">
                                                <checkbox :checked="params.agree3"
                                                    @click="params.agree3 = !params.agree3" />
                                                <text>{{ t('news_add_field1.deposit.item3') }}</text>
                                            </label>
                                            <view style="line-height: 1.5; font-size: 14px">
                                                <text>{{ t('news_add_field1.deposit.item4') }}</text>
                                                <text class="clause crm-cursor" @click="dialogClause1 = true">{{
                                                    t('news_add_field1.deposit.item5') }}</text>
                                                <text>{{ t('news_add_field1.deposit.item6') }}</text>
                                            </view>
                                        </uni-forms-item>

                                    </view>

                                    <!-- 普通10%赠金（非年中、非特定账户） -->
                                    <view
                                        v-if="!tableData4Flag && !tableData4TwoFlag && !tableDataNewListFlag && (country != 'CN' || (country == 'CN' && (ACCType == 1 || ACCType == 2 || ACCType == 7 || ACCType == 5 || ACCType == 6 || ACCType == 8))) && ACCType != 3">
                                        <template v-if="isSupportedCountry && (ACCType == 2 || ACCType == 7)">
                                            <uni-forms-item class="agree" name="agree2">
                                                <label>
                                                    <checkbox :checked="params.agree2"
                                                        @click="params.agree2 = !params.agree2" />
                                                    <text>{{ t('news_add_field1.deposit.item2_1') }}</text>
                                                </label>
                                                <view style="line-height: 1.5; font-size: 14px">
                                                    <text>{{ t('Custom.Deposit.agree21') }}</text>
                                                    <cwg-link type="pdf" title="Custom.Deposit.agree22_2"
                                                        :url="`pdf/pdf4/100Bonus-en.pdf`" style="color: black" />
                                                    <text>{{ t('Custom.Deposit.agree23_2') }}</text>
                                                </view>
                                            </uni-forms-item>

                                        </template>
                                        <template
                                            v-else-if="!isSupportedCountry && ACCType != 8 && !isAfterSeptember30()">
                                            <uni-forms-item class="agree" name="agree2">
                                                <label>
                                                    <checkbox :checked="params.agree2"
                                                        @click="params.agree2 = !params.agree2" />
                                                    <text>{{ t('news_add_field1.deposit.item1') }}</text>
                                                </label>
                                                <view style="line-height: 1.5; font-size: 14px">
                                                    <text>{{ t('Custom.Deposit.agree21') }}</text>
                                                    <cwg-link type="pdf" title="Custom.Deposit.agree22"
                                                        :url="`pdf/pdf4/${langCN}.pdf`" style="color: black" />
                                                    <text>{{ t('Custom.Deposit.agree23_1') }}</text>
                                                </view>
                                            </uni-forms-item>

                                        </template>
                                    </view>

                                    <button class="btn btn-dark waves-effect waves-light" @click="submitConfirm">{{
                                        t('Btn.Submit')
                                    }}</button>

                                </view>

                            </uni-forms>
                        </view>
                    </view>
                </view>
                <view class="col-lg-4">
                    <view class="tips" v-if="(introduce.introduce || introduce.enIntroduce)">
                        <view>
                            <cwg-rich-text class="attention"
                                :nodes="isZh ? introduce.introduce : introduce.enIntroduce" />
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <template v-if="step4">
            <uni-loading v-if="loading" />
            <view class="custom-deposit-container" v-else>
                <view class="custom-deposit">
                    <!-- 步骤1：选择账户 -->
                    <view class="box">
                        <view class="b-card">
                            <view class="card-top">
                                <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                    t('Custom.Deposit.Title1')
                                }}</text>
                                <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                                    :placeholder="t('placeholder.choose')" />
                            </view>
                        </view>
                    </view>
                    <!-- 步骤2：支付通道列表（卡片布局） -->
                    <view class="box" v-if="step2">
                        <view class="b-card">
                            <view class="card-top">
                                <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                    t('Custom.Deposit.Title2')
                                }}</text>
                                <cwg-combox :clearable="false" v-model:value="channelId" :options="channelListOptions"
                                    :placeholder="t('placeholder.choose')">
                                </cwg-combox>
                            </view>
                        </view>
                    </view>

                    <!-- 步骤3：填写入金信息 -->
                    <view class="box box-step3" v-if="step3">
                        <view class="b-card">
                            <view class="card-top">
                                <!-- 表单（确认后显示） -->
                                <uni-forms v-if="isStep3" ref="formRef" :model="params" :rules="rules"
                                    label-position="top" validate-trigger="submit" :label-width="300"
                                    class="base-info-form">


                                    <!-- 信用卡选择区域 -->
                                    <template v-if="isStep3 && channelData.confirmCreditCard == 1">
                                        <view>
                                            <view
                                                style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
                                                <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                                    t('PersonalManagement.Label.selectCreditCard') }}</text>
                                                <view class="add-back">
                                                    <text>{{ t('PersonalManagement.Label.addCreditCard') }}</text>
                                                    <text class="add-btn crm-cursor" @click="openAddBankCard">{{
                                                        t('Custom.Withdraw.addBank1') }}</text>
                                                </view>
                                            </view>
                                        </view>
                                        <view>
                                            <uni-forms-item>
                                                <cwg-combox :clearable="false" v-model:value="myId"
                                                    :options="creditCardOptions" :placeholder="t('placeholder.choose')"
                                                    @change="selectCode" />
                                            </uni-forms-item>
                                        </view>
                                    </template>


                                    <!-- 银行选择（如有） -->
                                    <template v-if="isStep3 && bankOptions.length">
                                        <view>
                                            <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                                t('news_add_field.Label.Title4')
                                            }}</text>
                                        </view>
                                        <view>
                                            <uni-forms-item>
                                                <cwg-combox :clearable="false" v-model:value="code"
                                                    :options="bankOptions" :placeholder="t('placeholder.choose')"
                                                    @change="selectCode" />
                                            </uni-forms-item>
                                        </view>
                                    </template>
                                    <!-- 特别提示（B2BINPAY） -->
                                    <view v-if="isStep3 && bankOptions.length && channelData.code == 'B2BINPAY'">
                                        <text class="tit" style="margin: 10px 0 20px"><text
                                                class="iconfont iconi"></text>{{
                                                    t('Custom.Deposit.Des') }}</text>
                                    </view>

                                    <!-- 电汇信息展示 -->
                                    <template
                                        v-if="isStep3 && ['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.code)">
                                        <view>
                                            <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                                t('Custom.Deposit.Title5') }}</text>
                                        </view>

                                        <view>
                                            <view class="wire-transfer-account">
                                                <view class="row"><text class="label SpecialColor">{{
                                                    t('Custom.Deposit.bankUname') }}</text><text
                                                        class="content SpecialColor">{{
                                                            WireTransferAccount.bankUname || '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label">{{ t('Custom.Deposit.bankName')
                                                }}</text><text class="content">{{ WireTransferAccount.bankName
                                                            ||
                                                            '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label SpecialColor">{{
                                                    t('Custom.Deposit.bankCardNum') }}</text><text
                                                        class="content SpecialColor">{{
                                                            WireTransferAccount.bankCardNum || '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label">{{ t('Custom.Deposit.bankAddr')
                                                }}</text><text class="content">{{ WireTransferAccount.bankAddr
                                                            ||
                                                            '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label SpecialColor">{{
                                                    t('Custom.Deposit.swiftCode') }}</text><text
                                                        class="content SpecialColor">{{
                                                            WireTransferAccount.swiftCode || '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label">{{ t('Custom.Deposit.bankCode')
                                                }}</text><text class="content">{{ WireTransferAccount.bankCode
                                                            ||
                                                            '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label SpecialColor">{{
                                                    t('Custom.Recording.Note')
                                                        }}</text><text class="content SpecialColor">{{
                                                            WireTransferAccount.bankMsg || '--' }}</text></view>
                                            </view>
                                        </view>
                                    </template>


                                    <!-- 数字货币信息展示 -->
                                    <template
                                        v-if="isStep3 && channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0">
                                        <view>
                                            <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                                t('Custom.Deposit.DigitalAcc') }}</text>
                                        </view>
                                        <view>
                                            <view class="wire-transfer-account">
                                                <view class="row"><text class="label SpecialColor">{{
                                                    t('Custom.Deposit.DigitalName') }}</text><text
                                                        class="content SpecialColor">{{ WireTransferAccount.name
                                                            + '-' +
                                                            WireTransferAccount.type }}</text></view>
                                                <view class="row"><text class="label">{{ t('Custom.Withdraw.Title6')
                                                }}</text><text class="content">{{ WireTransferAccount.address ||
                                                            '--'
                                                        }}</text></view>
                                                <view class="row"><text class="label">QR Code</text>
                                                    <image :src="Host05 + WireTransferAccount.url" mode="aspectFit"
                                                        style="width: 100rpx; height: 100rpx;" />
                                                </view>
                                            </view>
                                        </view>
                                    </template>
                                    <!-- 表单区域（含金额、预估金额、上传凭证、优惠码） -->
                                    <template v-if="isStep3">
                                        <view>
                                            <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                                t('Custom.Deposit.Title3') }}</text>
                                        </view>
                                        <view v-loading="pictLoadingImg">
                                            <!-- 金额输入 -->
                                            <view class="amount-box">
                                                <uni-forms-item
                                                    :label="t('Custom.Deposit.Title3') + '(' + channelData.currency + ')'"
                                                    name="amount" :error-message="amountErrorMessage"
                                                    class="amount-input">
                                                    <uni-easyinput type="number" v-model="params.amount"
                                                        :placeholder="t('placeholder.input')" @blur="validateAmount" />
                                                </uni-forms-item>
                                                <!-- <view class="btn" v-t="'State.All'" @click="setAllAmount"></view> -->
                                            </view>

                                            <!-- 预估金额（若有汇率） -->
                                            <view v-if="channelData.rate">
                                                <uni-forms-item>
                                                    <template #label>
                                                        <view class="label-with-icon">
                                                            <text>{{ t('Custom.Deposit.EstimatedAmount') + '(' +
                                                                channelData.transformCurrency || channelData.currency +
                                                                ')' }}</text>
                                                            <uni-tooltip placement="right">
                                                                <view class="help-icon">ⓘ</view>
                                                                <template #content>
                                                                    <text>{{ t('Custom.Deposit.des') }}</text>
                                                                </template>
                                                            </uni-tooltip>
                                                        </view>
                                                    </template>
                                                    <uni-easyinput v-model="params.amount1" disabled
                                                        :placeholder="t('placeholder.input')" />
                                                </uni-forms-item>
                                            </view>
                                            <!-- 优惠码 -->
                                            <view>
                                                <uni-forms-item name="promoCode">
                                                    <template #label>
                                                        <view class="label-with-icon">
                                                            <text>{{ t('Custom.Deposit.PromoCode') }}</text>
                                                            <uni-tooltip placement="right">
                                                                <view class="help-icon">ⓘ</view>
                                                                <template #content>
                                                                    <text>{{ t('news_add_field.Des.item3') }}</text>
                                                                </template>
                                                            </uni-tooltip>
                                                        </view>
                                                    </template>
                                                    <uni-easyinput v-model="params.promoCode"
                                                        :placeholder="t('placeholder.input')" />
                                                </uni-forms-item>
                                            </view>
                                            <!-- 上传汇款凭证（特定渠道） -->
                                            <view v-if="
                                                channelData.code == 'UNION_PAY_TELEGRAPHIC' ||
                                                channelData.code == 'UNION_PAY_TELEGRAPHIC_SPECIAL' ||
                                                channelData.code == 'UNION_PAY_TELEGRAPHIC_TWO'
                                            ">
                                                <uni-forms-item :label="t('Custom.Deposit.UploadRemittanceVoucher')">
                                                    <cwg-file-picker-wrapper v-model="imageUrl" :limit="1"
                                                        :editable="true" :fileMediatype="'all'"
                                                        uploadUrl="/wasabi/upload/file" :baseUrl="Host80" />
                                                </uni-forms-item>
                                            </view>



                                            <!-- 电汇提示 -->
                                            <view
                                                v-if="isStep3 && ['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.code)">
                                                <text>{{ t('Custom.Deposit.Tips') }}</text>
                                            </view>

                                            <!-- ========== 赠金活动部分 ========== -->
                                            <!-- 10%赠金（年中赠金） -->
                                            <view v-if="tableData4Flag">
                                                <uni-forms-item class="agree" name="agree4">
                                                    <label class="checkbox">
                                                        <checkbox :checked="params.agree4"
                                                            @click="params.agree4 = !params.agree4" />
                                                        <text>{{ t('news_add_field1.activitiesNZ.itemDeposit1')
                                                        }}</text>
                                                    </label>
                                                    <view style="line-height: 1.5; font-size: 14px">
                                                        <text>{{ t('news_add_field1.activitiesNZ.itemDeposit2')
                                                        }}</text>
                                                        <text class="clause crm-cursor"
                                                            @click="dialogClauseNZ = true">{{
                                                                t('news_add_field1.activitiesNZ.itemDeposit3')
                                                            }}</text>
                                                        <text>{{ t('news_add_field1.activitiesNZ.itemDeposit4')
                                                        }}</text>
                                                    </view>
                                                </uni-forms-item>

                                            </view>

                                            <!-- 20%赠金（年中赠金） -->
                                            <view v-if="tableData4TwoFlag">
                                                <uni-forms-item class="agree" name="agree5">
                                                    <label class="checkbox">
                                                        <checkbox :checked="params.agree5"
                                                            @click="params.agree5 = !params.agree5" />
                                                        <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit1')
                                                        }}</text>
                                                    </label>
                                                    <view style="line-height: 1.5; font-size: 14px">
                                                        <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit2')
                                                        }}</text>
                                                        <text class="clause crm-cursor"
                                                            @click="dialogClauseNZTwo = true">{{
                                                                t('news_add_field1.activitiesNZTwo.itemDeposit3') }}</text>
                                                        <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit4')
                                                        }}</text>
                                                    </view>
                                                </uni-forms-item>

                                            </view>

                                            <!-- 赠送活动（动态） -->
                                            <view v-if="tableDataNewListFlag">
                                                <uni-forms-item class="agree" name="agree6">
                                                    <label>
                                                        <checkbox :checked="params.agree6"
                                                            @click="params.agree6 = !params.agree6" />
                                                        <text>{{ tableDataNewList.title }}</text>
                                                    </label>
                                                    <view style="line-height: 1.5; font-size: 14px">
                                                        <text>{{ t('news_add_field1.activitiesNewList.item1') }}</text>
                                                        <text class="clause crm-cursor"
                                                            @click="dialogClauseNewList = true">{{
                                                                tableDataNewList.title }}</text>
                                                        <text>{{ t('news_add_field1.activitiesNewList.item2') }}</text>
                                                    </view>
                                                </uni-forms-item>

                                            </view>

                                            <!-- 20%赠金申请（特定账户类型） -->
                                            <view
                                                v-if="(ACCType == 1 || ACCType == 2 || ACCType == 5 || ACCType == 6 || ACCType == 7) && anshiClose">
                                                <uni-forms-item class="agree" name="agree3">
                                                    <label class="checkbox">
                                                        <checkbox :checked="params.agree3"
                                                            @click="params.agree3 = !params.agree3" />
                                                        <text>{{ t('news_add_field1.deposit.item3') }}</text>
                                                    </label>
                                                    <view style="line-height: 1.5; font-size: 14px">
                                                        <text>{{ t('news_add_field1.deposit.item4') }}</text>
                                                        <text class="clause crm-cursor" @click="dialogClause1 = true">{{
                                                            t('news_add_field1.deposit.item5') }}</text>
                                                        <text>{{ t('news_add_field1.deposit.item6') }}</text>
                                                    </view>
                                                </uni-forms-item>

                                            </view>

                                            <!-- 普通10%赠金（非年中、非特定账户） -->
                                            <view
                                                v-if="!tableData4Flag && !tableData4TwoFlag && !tableDataNewListFlag && (country != 'CN' || (country == 'CN' && (ACCType == 1 || ACCType == 2 || ACCType == 7 || ACCType == 5 || ACCType == 6 || ACCType == 8))) && ACCType != 3">
                                                <template v-if="isSupportedCountry && (ACCType == 2 || ACCType == 7)">
                                                    <uni-forms-item class="agree" name="agree2">
                                                        <label>
                                                            <checkbox :checked="params.agree2"
                                                                @click="params.agree2 = !params.agree2" />
                                                            <text>{{ t('news_add_field1.deposit.item2_1') }}</text>
                                                        </label>
                                                        <view style="line-height: 1.5; font-size: 14px">
                                                            <text>{{ t('Custom.Deposit.agree21') }}</text>
                                                            <cwg-link type="pdf" title="Custom.Deposit.agree22_2"
                                                                :url="`pdf/pdf4/100Bonus-en.pdf`"
                                                                style="color: black" />
                                                            <text>{{ t('Custom.Deposit.agree23_2') }}</text>
                                                        </view>
                                                    </uni-forms-item>

                                                </template>
                                                <template
                                                    v-else-if="!isSupportedCountry && ACCType != 8 && !isAfterSeptember30()">
                                                    <uni-forms-item class="agree" name="agree2">
                                                        <label>
                                                            <checkbox :checked="params.agree2"
                                                                @click="params.agree2 = !params.agree2" />
                                                            <text>{{ t('news_add_field1.deposit.item1') }}</text>
                                                        </label>
                                                        <view style="line-height: 1.5; font-size: 14px">
                                                            <text>{{ t('Custom.Deposit.agree21') }}</text>
                                                            <cwg-link type="pdf" title="Custom.Deposit.agree22"
                                                                :url="`pdf/pdf4/${langCN}.pdf`" style="color: black" />
                                                            <text>{{ t('Custom.Deposit.agree23_1') }}</text>
                                                        </view>
                                                    </uni-forms-item>

                                                </template>
                                            </view>
                                        </view>
                                    </template>
                                    <button class="btn btn-dark waves-effect waves-light" @click="submitConfirm">{{
                                        t('Btn.Submit')
                                    }}</button>
                                </uni-forms>
                            </view>
                        </view>
                    </view>

                </view>

                <view class="step3-attention">
                    <view class="tips" v-if="(introduce.introduce || introduce.enIntroduce)">
                        <view>
                            <cwg-rich-text class="attention"
                                :nodes="isZh ? introduce.introduce : introduce.enIntroduce" />
                        </view>
                    </view>
                </view>
            </view>
        </template>
        <!-- 不参加活动弹出框 -->
        <cwg-dont-active-popup v-model:visible="dialogDontActive" :showFooters="true" @confirm="tosubmitConfirm" />
        <!-- 新年24用户提示弹窗 -->
        <NewYear24Popup v-model:visible="tableDataNewYear24Flag" />
        <!-- 越南用户提示弹窗 -->
        <VietnamNoticePopup v-model:visible="dialogVietnamNotice" />
        <!-- 提交后确认弹窗 -->
        <cwg-check-confirm-popup v-model:visible="dialogCheckConfirm" :title="t('Home.page_customer.item2')"
            :channelData="channelData" :code="code" :selectCodes="selectCodes" :params="params" :userName="userName"
            :login="loginValue" :loginDoc="loginValueDoc" @confirm="submit" />
        <!--提交后的弹出框-->
        <CheckPopup v-model:visible="dialogCheckSuccess" :goPayLink="goPayLink" @close="closeDia" />
        <!-- 提交后失败弹窗 -->
        <cwg-error-popup v-model:visible="dialogCheckError" :responseMessage="RES" />
        <!-- 最后失败弹窗 -->
        <cwg-error-popup v-model:visible="dialogError" @confirm="closeDia" :responseMessage="RES" />
        <!-- 最后成功弹窗 -->
        <cwg-success-popup v-model:visible="dialogSuccess" @confirm="closeDia" />
        <!-- 等待弹窗 -->
        <cwg-wait-popup v-model:visible="dialogCheckWait" :showFooters="false" />
        <!-- 赠金协议 -->
        <ClausePopup v-model:visible="dialogClause" country="CN" :isGuoQin="isGuoQin" />
        <!-- 赠金协议20 -->
        <Clause20Popup v-model:visible="dialogClause1" />
        <!--  赠金协议10年中 -->
        <ClauseNZPopup v-model:visible="dialogClauseNZ" :title="t('news_add_field1.activitiesNZ.item6')"
            :startDate="tableData4.applicationStartTime" :endDate="tableData4.applicationEndTime" />
        <!-- 赠金协议20年中 -->
        <ClauseNZTwoPopup v-model:visible="dialogClauseNZTwo" :title="t('news_add_field1.activitiesNZTwo.item6')"
            :startDate="tableData4Two.applicationStartTime" :endDate="tableData4Two.applicationEndTime" />
        <!-- 赠送活动详情-协议 -->
        <ClauseNewListPopup v-model:visible="dialogClauseNewList" :content="tableDataNewList.content"
            :title="tableDataNewList.title" />
        <!--提交后完成弹出框-->
        <ChinaUnionPayPopup v-model:visible="dialogChinaUnionPay" />
        <!-- 重新提交弹窗 -->
        <DealResultPopup v-model:visible="dialogDealResult" :responseMessage="responseMessage"
            :title="dialogDealResultTitle" :initialData="dialogDealResult_form" :type="DealResultType"
            @confirm="submitDealResult" />
        <!-- KYC成功弹窗 -->
        <cwg-kyc-popup v-model:visible="dialogKyc" :qrText="text1" />
        <!-- 数字支付确认弹窗 -->
        <DigitalPayConfirmPopup v-model:visible="dialogDigitalPayConfirm" :WireTransferAccount="WireTransferAccount"
            @close="closeDigitalPayConfirm" @confirm="confirmDigitalPayModal" />
    </cwg-page-wrapper>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, nextTick, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
import useUserStore from '@/stores/use-user-store'
import { customApi } from '@/service/custom'
import { financialApi } from '@/service/financial'
import { activityApi } from '@/service/activity'
import Config from '@/config/index'
const { Code, Host80, Host04 } = Config
import { initLink } from '@/utils/setUrl'
import isImageType from '@/global/isImageType'
import PaymentMethodsList from './components/PaymentMethodsList.vue'
import CwgKycPopup from './components/KycPopup.vue'
import DealResultPopup from './components/DealResultPopup.vue'
import ChinaUnionPayPopup from './components/ChinaUnionPayPopup.vue'
import ClauseNewListPopup from './components/ClauseNewListPopup.vue'
import ClauseNZTwoPopup from './components/ClauseNZTwoPopup.vue'
import ClauseNZPopup from './components/ClauseNZPopup.vue'
import Clause20Popup from './components/Clause20Popup.vue'
import ClausePopup from './components/ClausePopup.vue'
import CheckPopup from './components/CheckPopup.vue'
import CwgCheckConfirmPopup from './components/DepositCheckConfirmPopup.vue'
import VietnamNoticePopup from './components/VietnamNoticePopup.vue'
import NewYear24Popup from './components/NewYear24Popup.vue'
import DigitalPayConfirmPopup from './components/digitalPayConfirmPopup.vue'
// 假设原有导入路径保持不变
import tool from "@/global/tool"
import { userToken } from '@/composables/config'
// import { createUploadRequest } from "@/lib/upload"
// 常量
const countries = [
    "DZ", "AO", "BJ", "BW", "BF", "CM", "CG", "CD", "CI", "DJ", "EG", "ET", "GA", "GM", "GH", "GN", "KE", "MG", "MW", "ML", "MR", "MA", "MZ", "NA", "NE", "NG", "RW", "SN", "SL", "SO", "ZA", "SS", "SD", "TZ", "TG", "TN", "UG", "ZM", "ZW", "LS", "BH", "IR", "IQ", "IL", "JO", "KW", "LB", "OM", "PS", "QA", "SA", "SY", "TR", "AE", "YE", "AR", "BO", "BR", "CL", "CO", "EC", "GY", "PY", "PE", "SR", "UY", "VE", "BZ", "CR", "SV", "GT", "HN", "NI", "PA", "AU", "CA", "AL", "AD", "AM", "AT", "AZ", "BY", "BE", "BA", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", "FR", "GE", "DE", "GR", "HU", "IS", "IE", "IT", "XK", "LV", "LI", "LT", "LU", "MT", "MD", "MC", "ME", "NL", "MK", "NO", "PL", "PT", "RO", "RU", "SM", "RS", "SK", "SI", "ES", "SE", "CH", "UA", "VA",
]
// 用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
// 获取全局 Session 等，假设它们挂载在 uni 或 global 上
const Session = {
    Get: (key, parse = false) => {
        const val = uni.getStorageSync(key)
        return parse ? JSON.parse(val) : val
    }
}
const handleFileUpdate = (val, type) => {
    if (type == '1') {
        params.requiteVoucherUrl = val
    }
}
const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))
function isPdf(url, image) {
    let res = !!url
    if (image) {
        return res && url.substr(-3, 3) == 'pdf' &&
            url.substr(-3, 3) == 'PDF'
    }
    return res && (url.substr(-3, 3) == 'pdf' ||
        url.substr(-3, 3) == 'PDF')
}
const $pigeon = {
    MessageError: (msg) => uni.showToast({ title: msg, icon: 'none' }),
    MessageOK: (msg) => uni.showToast({ title: msg, icon: 'success' }),
    MessageWarning: (msg) => uni.showToast({ title: msg, icon: 'none' }),
    MessageConfirm: (msg, title, confirmText, cancelText, onConfirm, onCancel, options = {}) => {
        uni.showModal({
            title,
            content: msg,
            confirmText,
            cancelText,
            success: (res) => {
                if (res.confirm) onConfirm && onConfirm()
                else if (res.cancel) onCancel && onCancel()
            }
        })
    }
}
const $route = { query: {} } // 需从外部注入

// 响应式数据
const loginValue = ref("")
const loginValueDoc = ref("")
const metaInfo = ref(null)
const text1 = ref("")
const dialogKyc = ref(false)
const requiteVoucherUrl = ref("")
const limitedStatus = ref(null)
const limitedStatusCheck = ref(false)
const pictLoadingImg = ref(false)
const flag = ref(false)
const RES = ref("")
const imgUrl = ref(Host80)
const Host05 = ref(Config.Host05)
const loginOptions = ref([])
const code = ref("")
const selectCodes = ref("")
const bankValid = ref("")
const requestUrl = ref("")
const isStep3 = ref(false)
const step2 = ref(false)
const step3 = ref(false)
const value = ref("")
const giveLoginJoin = ref("")

const openType = ref("")
const dialogInfoTradingAdd = ref(false)
const ruleForm = reactive({
    bankInfo: [],
    bankWrit: [],
    bankCredit: []
})
const bankInfoList = ref([])
const bank = ref("")
const myId = ref(null)
const bankPayType = ref("")
const form = reactive({})
const dialogDealResult = ref(false)
const dialogDealResult_form = reactive({})
const DealResultType = ref(null)
const DealResultResult = ref("")
const dialogDealResultTitle = ref("")
const anshiClose = ref(true)
const isChannel = ref(true)
const pictLoading = ref(false)
const tableData = reactive({
    International_Transfer: [],
    China_UnionPay: [],
    Digital_Currency: [],
    Electronic_Wallet: [],
    Ucard_Wallet: []
})
const tableData1 = reactive({
    International_Transfer: [],
    China_UnionPay: [],
    Digital_Currency: [],
    Electronic_Wallet: [],
    Ucard_Wallet: []
})
//通道table-选择前后
const activeTab = ref(1)
// 🔥 自动过滤掉空数据的 tab
const tabsConfig = computed(() => {
    const allTabs = [
        { text: t('Custom.Deposit.Channel3'), value: 1, type: 'Digital_Currency' },
        { text: t('Custom.Deposit.Channel2'), value: 2, type: 'China_UnionPay' },
        { text: t('Custom.Deposit.Channel4'), value: 3, type: 'Electronic_Wallet' },
        { text: t('Custom.Deposit.Channel1'), value: 4, type: 'International_Transfer' },
        { text: t('card.title'), value: 5, type: 'Ucard_Wallet' },
    ]
    // ✅ 只保留有数据的 tab
    return allTabs.filter(tab => {
        console.log(tableData1[tab.type], tab.type);
        return tableData1[tab.type]?.length > 0
    })
})
// 当前选中的 tab 项
const currentTab = computed(() => tabsConfig.value.find(t => t.value === activeTab.value))

// 当前要渲染的表格数据
const currentTableData = computed(() => {
    const type = currentTab.value?.type
    return type ? tableData[type] || [] : []
})
// ✅ 监听 tab 变化，自动选中第一个有数据的 tab
watch(
    tabsConfig,
    (newTabs) => {
        if (newTabs.length > 0) {
            activeTab.value = newTabs[0].value // 选中第一个
        }
    },
    { immediate: true }
)
watch(
    currentTab,
    (newTabs) => {
        // showTable()
    },
    { immediate: true }
)
const bankDate = ref([])
const channelData = reactive({})
const WireTransferAccount = reactive({})
const actionAdd1 = ref("")
const actionAdd2 = ref(Host04 + "/activity/requite/voucher/upload")
const imageUrl = ref("")
const imageUrl1 = ref("")
const introduce = reactive({
    introduce: "",
    enIntroduce: ""
})
const params = reactive({
    amount: "",
    amount1: "",
    promoCode: "",
    agree: false,
    agree2: false,
    agree3: false,
    agree4: false,
    agree5: false,
    agree6: false
})
const resetForm = () => {
    //表单重置后，需要手动重置一些状态
    params.amount = ""
    params.amount1 = ""
    params.promoCode = ""
    params.agree = false
    params.agree2 = false
    params.agree3 = false
    params.agree4 = false
    params.agree5 = false
    params.agree6 = false
    form.bankUname = undefined
    form.bankCardNum = undefined
    form.cvv = undefined
    form.expiryMonth = undefined
    form.expiryYear = undefined
    form.pin = undefined
    amountErrorMessage.value = ""
    requiteVoucherUrl.value = ""
    imageUrl.value = ""
    imageUrl1.value = ""
}
const formRef = ref(null)
const mAmount = reactive({
    minAmount: "",
    maxAmount: ""
})
const dialogCheck = ref(false)
const dialogVisible = ref(false)
const dialogCheckWait = ref(false)
const dialogCheckOK = ref(false)
const goPayLink = ref("")
const dialogCheckConfirm = ref(false)
const dialogCheckConfirm_form = reactive({
    confirmName: "",
    confirmAreaCode: "",
    confirmPhone: ""
})
const dialogClause = ref(false)
const dialogClause1 = ref(false)
const dialogClauseNZ = ref(false)
const dialogClauseNZTwo = ref(false)
const dialogClauseNewList = ref(false)
const ACCType = ref(null)
const CheckExistSuccess = ref(false)
const dialogChinaUnionPay = ref(false)
const tableData4Flag = ref(false)
const tableData4 = reactive({})
const tableData4TwoFlag = ref(false)
const tableData4Two = reactive({})
const tableDataNewListFlag = ref(false)
const tableDataNewList = reactive({})
const dialogDontActive = ref(false)
const dialogVietnamNotice = ref(false)
const tableDataNewYear24Flag = ref(false)
const tableDataNewYear24 = ref(false)

const rules = computed(() => ({
    amount: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.amount.format1'),
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    // 空值处理：直接报格式错误
                    if (!value) {
                        callback(t('vaildate.amount.format1'))
                        return false
                    }
                    // 范围校验
                    if (
                        mAmount.minAmount &&
                        mAmount.maxAmount &&
                        (Number(mAmount.minAmount) > Number(value) ||
                            Number(mAmount.maxAmount) < Number(value))
                    ) {
                        callback(
                            t('vaildate.amount.amount') +
                            mAmount.minAmount +
                            ' - ' +
                            mAmount.maxAmount
                        )
                        return false
                    }
                    // 正整数校验（原正则）
                    if (!/^[1-9]\d*$/.test(value)) {
                        callback(t('vaildate.amount.format1'))
                        return false
                    }
                    return true
                },
                trigger: 'change',
            },
        ],
    },
    agree: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.agree.empty'),
                trigger: 'change',
            },
        ],
    },
    confirmAreaCode: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    confirmPhone: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    myId: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty'),
                trigger: 'change',
            },
        ],
    },
    pin: {
        rules: [
            {
                required: true,
                errorMessage: t('PersonalManagement.Label.item1'),
                trigger: 'blur',
            },
        ],
    },
    phone: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    otp: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    state: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    city: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    country: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty'),
                trigger: 'change',
            },
        ],
    },
    address: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
    zipCode: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.input.empty'),
                trigger: 'blur',
            },
        ],
    },
}))
const amountErrorMessage = ref('')
const validateAmount = (value) => {
    const amount = params.amount
    if (!amount && amount !== 0) {
        amountErrorMessage.value = t('vaildate.amount.format1')
        return false
    }
    if (mAmount.minAmount && mAmount.maxAmount) {
        const min = Number(mAmount.minAmount);
        const max = Number(mAmount.maxAmount);
        const numValue = Number(amount);
        if (numValue < min || numValue > max) {
            amountErrorMessage.value = t('vaildate.amount.amount') + min + '-' + max
            return false
        }
    }
    if (!/^[1-9]\d*$/.test(amount)) {
        amountErrorMessage.value = t('vaildate.amount.format1')
        return false
    }
    amountErrorMessage.value = ''
    return true
}
const NewYear24Data = reactive({
    balance: 0,
    income: 0,
    rate: 0,
    index: 0
})
const AccessToken = computed(() => ({
    "Access-Token": Session.Get("access_token")
}))
const lang = computed(() => {
    return locale.value == "en" && document.body.clientWidth < 1200
})
const langCN = computed(() => locale.value)
const isSupportedCountry = computed(() => {
    try {
        const country = userInfo.value.customInfo.country
        return countries.includes(country)
    } catch {
        return false
    }
})
const country = computed(() => {
    return userInfo.value.customInfo.country
})
const userName = computed(() => {
    let first = userInfo.value.customInfo.firstName
    let last = userInfo.value.customInfo.lastName
    let middle = userInfo.value.customInfo.middle
    if (!first && !last && !middle) return false
    return (first ? first + " " : "") + (middle ? middle + " " : "") + (last ? last : "")
})
const areaCode = computed(() => userInfo.value.customInfo.areaCode)
const phone = computed(() => userInfo.value.customInfo.phone)
// 是否是国庆节
const isGuoQin = computed(() => {
    let flag = false
    let startTime1 = "2024/10/01 00:00:00"
    let endTime1 = "2024/10/07 23:59:59"
    let timezone = 8
    let offset_GMT = new Date().getTimezoneOffset()
    let nowDate = new Date().getTime()
    let now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    let end = new Date(endTime1).getTime()
    let start = new Date(startTime1).getTime()
    if (now > start && now < end) flag = true
    return flag
})
const groupTitleMap = {
    1: 'Custom.Deposit.Channel1',
    2: 'Custom.Deposit.Channel2',
    3: 'Custom.Deposit.Channel3',
    4: 'Custom.Deposit.Channel4',
    5: 'card.title'
}
// 排序表格数据
const sortedTableData = computed(() => {
    const order = [
        tableData.Digital_Currency,
        tableData.China_UnionPay,
        tableData.Electronic_Wallet,
        tableData.International_Transfer,
        tableData.Ucard_Wallet
    ]
    return order.filter(item => item && item.length > 0)
})



// 方法
const isAfterJuly21 = () => {
    const currentDate = new Date()
    const july21 = new Date(currentDate.getFullYear(), 6, 21)
    return currentDate >= july21
}
// 货币
const groupCurrency = (type) => {
    if (type == "GBP") return ": £"
    else if (type == "USD") return ": $"
    else if (type == "EUR") return ": €"
    else if (type == "USC") return ": ￠"
    else return ": $"
}
// 货币符号
const groupCurrency1 = (type) => {
    if (type == "GBP") return "£"
    else if (type == "USD") return "$"
    else if (type == "EUR") return "€"
    else if (type == "USC") return "￠"
    else return "$"
}
// 选择银行
const selectCode = (codeVal) => {
    bankDate.value.forEach(item => {
        if (item.code == codeVal) {
            selectCodes.value = lang.value == "cn" ? item.name : item.enName
            mAmount.minAmount = item.minAmount || mAmount.minAmount
            mAmount.maxAmount = item.maxAmount || mAmount.maxAmount
            channelData.rate = item.rate || channelData.rate
            channelData.transformCurrency = item.currency || channelData.transformCurrency
        }
    })
}
// 账户类型
const groupTypeName = (type) => {
    if (type == "1") return t("AccountType.ClassicAccount")
    else if (type == "2") return t("AccountType.SeniorAccount")
    else if (type == "5") return t("AccountType.SpeedAccount")
    else if (type == "6") return t("AccountType.SpeedAccount")
    else if (type == "7") return t("AccountType.StandardAccount")
    else if (type == "8") return t("AccountType.CentAccount")
}
const selectChange = () => {
    // 强制更新，在 Vue 3 中通常不需要
}
const handleProgress1 = () => {
    pictLoadingImg.value = true
}
const handleAvatarError1 = (err) => {
    let errorMessage = t("Msg.Fail")
    if (err && err.status) {
        switch (err.status) {
            case 400: errorMessage = t("Msg.UploadInvalidFormat"); break
            case 401: errorMessage = t("Msg.UploadUnauthorized"); break
            case 403: errorMessage = t("Msg.UploadForbidden"); break
            case 413: errorMessage = t("Msg.UploadFileTooLarge"); break
            case 500: errorMessage = t("Msg.UploadServerError"); break
            case 502:
            case 503:
            case 504: errorMessage = t("Msg.UploadNetworkError"); break
            default:
                if (err.message) errorMessage = err.message
                else if (err.response && err.response.data && err.response.data.msg) errorMessage = err.response.data.msg
        }
    } else if (err && err.message) {
        if (err.message.includes("Network Error") || err.message.includes("timeout")) errorMessage = t("Msg.UploadNetworkError")
        else if (err.message.includes("File too large")) errorMessage = t("Msg.UploadFileTooLarge")
        else errorMessage = err.message
    }
    $pigeon.MessageError(errorMessage)
    pictLoadingImg.value = false
}
const handleAvatarSuccess1 = (res) => {
    if (res.code == Code.StatusOK) {
        $pigeon.MessageOK(res.msg)
        imageUrl1.value = res.data
        requiteVoucherUrl.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
    pictLoadingImg.value = false
}
// 上传凭证前校验
const beforeAvatarUpload1 = (file) => {
    const isJPG = isImageType.checkFile(file.type)
    const isLt2M = isImageType.checkSize(file.size)
    if (!isJPG) $pigeon.MessageError(t("Msg.JPG"))
    if (!isLt2M) $pigeon.MessageError(t("Msg.3IMG"))
    return isJPG && isLt2M
}
// 上传凭证进度
const handleProgress = () => {
    pictLoadingImg.value = true
}
// 上传凭证失败
const handleAvatarError = (err) => {
    let errorMessage = t("Msg.Fail")
    if (err && err.status) {
        switch (err.status) {
            case 400: errorMessage = t("Msg.UploadInvalidFormat"); break
            case 401: errorMessage = t("Msg.UploadUnauthorized"); break
            case 403: errorMessage = t("Msg.UploadForbidden"); break
            case 413: errorMessage = t("Msg.UploadFileTooLarge"); break
            case 500: errorMessage = t("Msg.UploadServerError"); break
            case 502:
            case 503:
            case 504: errorMessage = t("Msg.UploadNetworkError"); break
            default:
                if (err.message) errorMessage = err.message
                else if (err.response && err.response.data && err.response.data.msg) errorMessage = err.response.data.msg
        }
    } else if (err && err.message) {
        if (err.message.includes("Network Error") || err.message.includes("timeout")) errorMessage = t("Msg.UploadNetworkError")
        else if (err.message.includes("File too large")) errorMessage = t("Msg.UploadFileTooLarge")
        else errorMessage = err.message
    }
    $pigeon.MessageError(errorMessage)
    pictLoadingImg.value = false
}
// 上传凭证
const handleUploadDeposit = (options) => {
    const originalUrl = actionAdd1.value || Config.Host80 + "/common/upload"
    return createUploadRequest(originalUrl, userToken.value, 1)(options)
}
// 上传凭证成功
const handleAvatarSuccess = (res) => {
    if (res.code == Code.StatusOK) {
        $pigeon.MessageOK(res.msg)
        imageUrl.value = res.data
        requiteVoucherUrl.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
    pictLoadingImg.value = false
}
// 上传凭证前校验
const beforeAvatarUpload = (file) => {
    const isJPG = isImageType.checkFile(file.type)
    const isLt2M = isImageType.checkSize(file.size)
    if (!isJPG) $pigeon.MessageError(t("Msg.JPG"))
    if (!isLt2M) $pigeon.MessageError(t("Msg.3IMG"))
    return isJPG && isLt2M
}
// 打开添加银行弹窗
const openAddBankCard = () => {
    if (ruleForm.bankCredit.length == 2) {
        $pigeon.MessageConfirm(
            t("Msg.WireTransfers"),
            t("Msg.SystemPrompt"),
            t("Btn.Confirm"),
            t("Btn.Cancel"),
            async () => { },
            () => { }
        )
    } else {
        openType.value = "add_CreditCard"
        dialogInfoTradingAdd.value = true
    }
}

const closeDiaAdd = () => {
    dialogInfoTradingAdd.value = false
}
// 关闭添加银行弹窗
const closeAdd = (val) => {
    dialogInfoTradingAdd.value = val
}
// 确认重新加载银行信息
const confirmToReload = () => {
    dialogInfoTradingAdd.value = false
    getBankInfo()
}
// 获取银行信息
const getBankInfo = async () => {
    let res = await financialApi.customBankList({})
    if (res.code == Code.StatusOK) {
        ruleForm.bankCredit = []
        res.data.forEach(item => {
            if (item.type == 3) {
                item.customBankCode = item.bankCode
                item.bankCode = null
                ruleForm.bankCredit.push(item)
            }
            if (item.defaultBank && item.type == 3) {
                myId.value = item.id
                form.bankUname = item.bankUname
                form.bankCardNum = item.bankCardNum
                form.cvv = item.cvv
                form.expiryMonth = item.expiryMonth
                form.expiryYear = item.expiryYear
                form.pin = item.pin
            }
        })
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
// 选择银行
const chooseBank = (item) => {
    if (formRef.value) formRef.value.clearValidate()
    form.bankUname = item.bankUname
    form.bankCardNum = item.bankCardNum
    form.cvv = item.cvv
    form.expiryMonth = item.expiryMonth
    form.expiryYear = item.expiryYear
    form.pin = item.pin
}

// 返回首页
const toHome = () => {
    uni.switchTab({ url: "/pages/customer/index" })
}
const dialogDigitalPayConfirm = ref(false)
// 提交确认信息弹窗
const submitConfirm = async () => {

    if (channelData.confirmCreditCard == 1 && !myId.value) {
        $pigeon.MessageWarning(t("PersonalManagement.Label.selectCreditCard"))
        return
    }
    if (channelData.bankValid == 1 && !code.value) {
        $pigeon.MessageWarning(t("vaildate.depositCurrency.empty"))
        return
    }
    if ((channelData.code == "UNION_PAY_TELEGRAPHIC" || channelData.code == "UNION_PAY_TELEGRAPHIC_SPECIAL" || channelData.code == "UNION_PAY_TELEGRAPHIC_TWO") && !imageUrl.value) {
        $pigeon.MessageWarning(t("vaildate.depositVoucher.empty"))
        return
    }
    if (params.promoCode && params.agree2) {
        $pigeon.MessageWarning(t("news_add_field.Des.item2"))
        return
    }
    if (params.promoCode && params.agree3) {
        $pigeon.MessageWarning(t("news_add_field.Des.item2"))
        return
    }
    if (params.promoCode && params.agree4) {
        $pigeon.MessageWarning(t("news_add_field.Des.item2"))
        return
    }
    if (params.promoCode && params.agree5) {
        $pigeon.MessageWarning(t("news_add_field.Des.item2"))
        return
    }
    if (params.promoCode && params.agree6) {
        $pigeon.MessageWarning(t("news_add_field.Des.item2"))
        return
    }
    // if (channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0 && !imageUrl.value) {
    //     $pigeon.MessageWarning(t("vaildate.depositVoucher.empty"))
    //     return
    // }

    try {
        if (formRef.value) {
            await formRef.value.validate()
            console.log(channelData, channelData.code, 12);
            if (
                channelData.code &&
                channelData.code.indexOf("DIGITAL_PAY_TYPE_KEY") === 0
            ) {
                imageUrl.value = "";
                dialogDigitalPayConfirm.value = true;
            } else {
                openDontActive();
            }
        }
    } catch (error) {
        if (error instanceof Array) {
            uni.showToast({ title: error[0].errorMessage, icon: 'none' });
            return
        } else {
            responseMessage.value = error.msg;
        }
    }

}
const confirmDigitalPayModal = (e) => {
    dialogDigitalPayConfirm.value = false;
    imageUrl.value = e;
    openDontActive();
}
// 关闭数字支付确认弹窗
const closeDigitalPayConfirm = () => {
    dialogDigitalPayConfirm.value = false;
}
// 打开不参加活动弹窗
const openDontActive = () => {
    if (!tableData4Flag.value && !tableData4TwoFlag.value && !tableDataNewListFlag.value && (country.value != "CN" || (country.value == "CN" && (ACCType.value == 1 || ACCType.value == 2 || ACCType.value == 7))) && ACCType.value != 3 && params.agree2) {
        tosubmitConfirm()
        return
    }
    if (tableData4Flag.value && params.agree4) {
        tosubmitConfirm()
        return
    }
    if (tableData4TwoFlag.value && params.agree5) {
        tosubmitConfirm()
        return
    }
    if (tableDataNewListFlag.value && params.agree6) {
        tosubmitConfirm()
        return
    }
    if (limitedStatus.value && limitedStatusCheck.value) {
        tosubmitConfirm()
        return
    }
    if ((ACCType.value == 1 || ACCType.value == 2 || ACCType.value == 5 || ACCType.value == 6 || ACCType.value == 7) && anshiClose.value && params.agree3) {
        tosubmitConfirm()
        return
    }
    tosubmitConfirm()
}
// 打开提交前信息弹窗
const tosubmitConfirm = () => {
    dialogDontActive.value = false
    dialogCheckConfirm_form.confirmAreaCode = areaCode.value
    dialogCheckConfirm_form.confirmPhone = phone.value
    dialogCheckConfirm.value = true
}
// 最后确认
const dialogSuccess = computed(() => dialogCheckOK.value && dialogVisible.value)
// 最后失败
const dialogError = computed(() => dialogCheckOK.value && !dialogVisible.value)
// 提交后确认
const dialogCheckSuccess = computed(() => dialogCheck.value && dialogVisible.value)
// 提交后失败
const dialogCheckError = computed(() => dialogCheck.value && !dialogVisible.value)

// 提交申请
const submit = async () => {
    if (flag.value) return
    flag.value = true
    dialogCheckConfirm.value = false
    dialogCheckWait.value = true
    try {
        if (channelData.code == "UNION_PAY_TELEGRAPHIC" || channelData.code == "UNION_PAY_TELEGRAPHIC_SPECIAL" || channelData.code == "UNION_PAY_TELEGRAPHIC_TWO") {
            let res = await financialApi.telegraphicPay({
                requiteVoucherUrl: imageUrl1.value,
                amount: params.amount,
                login: $route.query.login,
                voucherUrl: imageUrl.value,
                activityDeposit: params.agree2 ? 1 : 0,
                activityPercentageGive: params.agree3 ? 1 : 0,
                activityMidyearTenPercentGive: params.agree4 ? 1 : 0,
                activityTwoPercentGive: params.agree5 ? 1 : 0,
                activityGive: params.agree6 ? 1 : 0,
                promoCode: params.promoCode,
                code: channelData.code,
                bankMsg: WireTransferAccount.bankMsg || "",
                name: channelData.confirmName ? userName.value : null,
                areaCode: channelData.confirmAreaCode ? dialogCheckConfirm_form.confirmAreaCode : null,
                phone: channelData.confirmPhone ? dialogCheckConfirm_form.confirmPhone : null,
                ip: uni.getStorageSync("CLIENT")
            })
            dialogCheckWait.value = false
            if (res.code == Code.StatusOK) {
                imageUrl1.value = ""
                limitedStatusCheck.value = false
                dialogCheckOK.value = true
                dialogVisible.value = true
                flag.value = false
            } else {
                RES.value = res.msg
                dialogCheckOK.value = true
                dialogVisible.value = false
                flag.value = false
            }
        } else if (channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0) {
            let res = await financialApi.digitalPay({
                requiteVoucherUrl: imageUrl1.value,
                amount: params.amount,
                login: $route.query.login,
                voucherUrl: imageUrl.value,
                activityDeposit: params.agree2 ? 1 : 0,
                activityPercentageGive: params.agree3 ? 1 : 0,
                activityMidyearTenPercentGive: params.agree4 ? 1 : 0,
                activityTwoPercentGive: params.agree5 ? 1 : 0,
                activityGive: params.agree6 ? 1 : 0,
                promoCode: params.promoCode,
                ip: uni.getStorageSync("CLIENT")
            })
            dialogCheckWait.value = false
            if (res.code == Code.StatusOK) {
                dialogCheckOK.value = true
                dialogVisible.value = true
                flag.value = false
            } else {
                RES.value = res.msg
                dialogCheckOK.value = true
                dialogVisible.value = false
                flag.value = false
            }
        } else {
            let par = ""
            if (channelData.bankValid == 1) {
                par = `${channelData.requestUrl}/${loginValue.value}/${params.amount}/${code.value}/${(params.agree2 ? 1 : 0)}`
            } else {
                par = `${channelData.requestUrl}/${loginValue.value}/${params.amount}/${(params.agree2 ? 1 : 0)}`
            }
            let res = await financialApi.PayBankCode(par, {
                requiteVoucherUrl: imageUrl1.value,
                promoCode: params.promoCode,
                name: channelData.confirmName ? userName.value : null,
                areaCode: channelData.confirmAreaCode ? dialogCheckConfirm_form.confirmAreaCode : null,
                phone: channelData.confirmPhone ? dialogCheckConfirm_form.confirmPhone : null,
                activityPercentageGive: params.agree3 ? 1 : 0,
                activityMidyearTenPercentGive: params.agree4 ? 1 : 0,
                activityTwoPercentGive: params.agree5 ? 1 : 0,
                activityGive: params.agree6 ? 1 : 0,
                ip: uni.getStorageSync("CLIENT"),
                ...form
            })
            dialogCheckWait.value = false
            if (res.code == Code.StatusOK) {
                if (res.data && (res.data.type == 3 || res.data.type == 4 || res.data.type == 6 || res.data.type == 7)) {
                    dealResult(res.data)
                } else {
                    if (res.data.type == 1) {
                        goPayLink.value = res.data.result
                        window.open(res.data.result)
                    } else if (res.data.type == 2) {
                        let token = userToken.value["Access-Token"]
                        token = tool.tokenReplace(token)
                        goPayLink.value = `${Host04}/finance/deposit/get?serial=${res.data.result}&Access-Token=${token}`
                        window.open(goPayLink.value)
                    } else if (res.data.type == 5) {
                        $pigeon.MessageConfirm(
                            t("PersonalManagement.Label.item2"),
                            t("Msg.SystemPrompt"),
                            t("Btn.Cancel"),
                            t("Btn.Confirm"),
                            async () => { },
                            () => {
                                goPayLink.value = res.data.result
                                dialogCheck.value = true
                                dialogVisible.value = true
                                window.open(res.data.result)
                            }
                        )
                    } else if (res.data.type == 8) {
                        goPayLink.value = Host04 + res.data.result
                        window.open(goPayLink.value)
                    } else if (res.data.type == 9) {
                        goPayLink.value = setCardUrl(res.data.result)
                        window.open(goPayLink.value)
                    } else if (res.data.type == 10) {
                        goPayLink.value = Host80 + '/pay/onchainpay.html?params=' + res.data.result
                        window.open(goPayLink.value)
                    }
                    if (res.data.type != 5) {
                        dialogCheck.value = true
                        dialogVisible.value = true
                    }
                }
                flag.value = false
            } else {
                RES.value = res.msg
                dialogCheck.value = true
                dialogVisible.value = false
                flag.value = false
            }
        }
    } catch (error) {
        dialogCheckWait.value = false
        flag.value = false
        dialogCheckOK.value = true
        dialogVisible.value = false
        RES.value = error.msg
    }
}
const setCardUrl = (serial) => {
    let params = `${userToken.value["Access-Token"]}/${locale.value}/${serial}/1/pay`
    return initLink({ link: imgUrl.value + '/pay/paycard.html', params })
}
//处理申请返回result
const dealResult = (data) => {
    DealResultType.value = data.type
    DealResultResult.value = data.result
    if (data.type == 3) {
        dialogDealResult_form.pin = ""
    } else if (data.type == 4) {
        dialogDealResult_form.otp = ""
    } else if (data.type == 6) {
        dialogDealResult_form.state = userInfo.value.state
        dialogDealResult_form.city = userInfo.value.city
        dialogDealResult_form.country = (["cn", "zhHant"].indexOf(locale.value) != -1) ? userInfo.value.countryName : userInfo.value.countryEnName
        dialogDealResult_form.address = (userInfo.value.addressLines && userInfo.value.addressLines[0]) || ""
        dialogDealResult_form.zipCode = userInfo.value.zipCode
        dialogDealResultTitle.value = t("PersonalManagement.Label.item3")
    } else if (data.type == 7) {
        dialogDealResult_form.phone = userInfo.value.phone
        dialogDealResultTitle.value = t("PersonalManagement.Label.item4")
    }
    dialogDealResult.value = true
}
//重新提交
const submitDealResult = async () => {
    if (flag.value) return
    flag.value = true
    dialogCheckConfirm.value = false
    dialogCheckWait.value = true
    let par = Host04 + DealResultResult.value
    let dataList = {}
    if (DealResultType.value == 3) dataList = { pin: dialogDealResult_form.pin }
    else if (DealResultType.value == 4) dataList = { otp: dialogDealResult_form.otp }
    else if (DealResultType.value == 6) {
        dataList = {
            state: dialogDealResult_form.state,
            city: dialogDealResult_form.city,
            country: dialogDealResult_form.country,
            address: dialogDealResult_form.address,
            zipCode: dialogDealResult_form.zipCode
        }
    } else if (DealResultType.value == 7) dataList = { phone: dialogDealResult_form.phone }
    let res = await financialApi.PayDealResult(par, dataList)
    dialogCheckWait.value = false
    dialogDealResult.value = false
    if (res.code == Code.StatusOK) {
        if (res.data && (res.data.type == 3 || res.data.type == 4 || res.data.type == 6 || res.data.type == 7)) {
            dealResult(res.data)
        } else {
            if (res.data.type == 1) {
                goPayLink.value = res.data.result
                window.open(res.data.result)
            } else if (res.data.type == 2) {
                let token = userToken.value["Access-Token"]
                token = tool.tokenReplace(token)
                goPayLink.value = `${Host04}/finance/deposit/get?serial=${res.data.result}&Access-Token=${token}`
                window.open(goPayLink.value)
            } else if (res.data.type == 5) {
                $pigeon.MessageConfirm(
                    t("PersonalManagement.Label.item2"),
                    t("Msg.SystemPrompt"),
                    t("Btn.Cancel"),
                    t("Btn.Confirm"),
                    async () => { },
                    () => {
                        goPayLink.value = res.data.result
                        dialogCheck.value = true
                        dialogVisible.value = true
                        window.open(res.data.result)
                    }
                )
            } else if (res.data.type == 8) {
                goPayLink.value = Host04 + res.data.result
                window.open(goPayLink.value)
            } else if (res.data.type == 9) {
                dialogCheckOK.value = true
                dialogVisible.value = true
                flag.value = false
                return
            }
            if (res.data.type != 5) {
                dialogCheck.value = true
                dialogVisible.value = true
            }
        }
        flag.value = false
    } else {
        RES.value = res.msg
        dialogCheck.value = true
        dialogVisible.value = false
        flag.value = false
        dialogDealResult.value = false
    }
}
const closeDia = () => {
    dialogCheck.value = false
    dialogVisible.value = false
    dialogCheckOK.value = false
    showTable()
}
const isStep3Open = () => {
    isStep3.value = true
    //中国网银弹窗
    if (tableData.China_UnionPay.length && tableData.China_UnionPay[0].type == 2) {
        let timezone = 8
        let offset_GMT = new Date().getTimezoneOffset()
        let nowDate = new Date().getTime()
        let now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
        let newTime = now.getHours().toString()
        if ((newTime.length == 1 && newTime >= 0 && newTime < 8) || (newTime.length == 2 && newTime >= 22 && newTime < 24)) {
            dialogChinaUnionPay.value = true
        }
    }
}
// 判断是否在9月30日晚上12点之后，用于隐藏特定活动
const isAfterSeptember30 = () => {
    // const currentDate = new Date();
    // const september30 = new Date(
    //   currentDate.getFullYear(),
    //   8,
    //   30,
    //   23,
    //   59,
    //   59
    // ); // 月份从0开始，8表示9月，设置为23:59:59
    // return currentDate > september30;
    return true
}
const getMetaInfo = () => {
    metaInfo.value = window.getMetaInfo()
    metaInfo.value = { ...metaInfo.value, deviceType: "h5" }
}
//获取kyc二维码
const qrCode = async (depositChannelCode, row) => {
    getMetaInfo()
    let res = await activityApi.getWebsdkLink({
        depositChannelCode,
        metaInfo: metaInfo.value
    })
    if (res.code == Code.StatusOK) {
        if (res.data) {
            text1.value = JSON.parse(res.data).url
            dialogKyc.value = true
            flag.value = false
        } else {
            doShowStep3(row)
        }
    } else {
        flag.value = false
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const doShowStep3 = (row) => {
    if (row.confirmCreditCard == 1) getBankInfo()
    getCheckExistSuccess()
    if (row.bankValid && isChannel.value) {
        getBankList(row)
        isChannel.value = false
        step3.value = true
        Object.assign(channelData, row)
        console.log(channel.value, channelListOptions.value, channelData, 1112);
        mAmount.minAmount = row.minAmount
        mAmount.maxAmount = row.maxAmount
    } else {
        step3.value = true
        bankDate.value = []
        Object.assign(channelData, row)
        mAmount.minAmount = row.minAmount
        mAmount.maxAmount = row.maxAmount
    }
    tableData.International_Transfer = []
    tableData.China_UnionPay = []
    tableData.Digital_Currency = []
    tableData.Electronic_Wallet = []
    tableData.Ucard_Wallet = []
    if (row.type == 1) tableData.International_Transfer[0] = row
    if (row.type == 2) tableData.China_UnionPay[0] = row
    if (row.type == 3) tableData.Digital_Currency[0] = row
    if (row.type == 4) tableData.Electronic_Wallet[0] = row
    if (row.type == 5) tableData.Ucard_Wallet[0] = row
    introduce.introduce = row.introduce
    introduce.enIntroduce = row.enIntroduce
    if (row.code == "UNION_PAY_TELEGRAPHIC" || row.code == "UNION_PAY_TELEGRAPHIC_SPECIAL" || row.code == "UNION_PAY_TELEGRAPHIC_TWO" || (row.code && row.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0)) {
        let pro = []
        if (row.property && row.property.substring(0, 1) == "[") {
            pro = JSON.parse(row.property)
        } else if (row.property && row.property.substring(0, 1) != "[") {
            let proper = "[" + row.property + "]"
            pro = JSON.parse(proper)
        }
        let ind = pro.length
        if (ind) {
            let index = parseInt(Math.random() * ind + 1)
            Object.assign(WireTransferAccount, pro[index - 1])
            actionAdd1.value = Host80 + "/common/upload"
        } else {
            Object.assign(WireTransferAccount, {})
            actionAdd1.value = Host80 + "/common/upload"
        }
    }
}
//选择支付方式
const isShowStep3 = (row) => {
    if (row.kycChannel != 1) {
        doShowStep3(row)
    } else {
        qrCode(row.code, row)
    }
}
//更换支付方式
const showTable = () => {
    resetForm();
    dialogCheckWait.value = false;
    dialogVisible.value = false;
    flag.value = false;
    form.bankUname = undefined
    form.bankCardNum = undefined
    form.cvv = undefined
    form.expiryMonth = undefined
    form.expiryYear = undefined
    form.pin = undefined
    myId.value = null
    params.amount = ""
    params.amount1 = ""
    params.agree = false
    params.agree2 = false
    params.agree3 = false
    params.agree4 = false
    params.agree5 = false
    params.agree6 = false
    params.promoCode = ""
    isChannel.value = true
    imageUrl.value = ""
    requiteVoucherUrl.value = ""
    code.value = ""
    WireTransferAccount.bankMsg = ""
    introduce.introduce = ""
    introduce.enIntroduce = ""
}
const loginComboxOptions = computed(() => {
    return loginOptions.value.map((item) => ({
        text: item.label,
        value: item.login
    }))
})
const creditCardOptions = computed(() => {
    return ruleForm.bankCredit.map((item, index) => ({
        text: `${item.bankUname}-${item.bankCardNum}`,
        value: item.id
    }))
})

const bankOptions = computed(() => {
    return bankDate.value.map((item, index) => ({
        text: (locale.value === 'cn' || locale.value === 'zhHant') ? item.name : item.enName,
        value: item.code
    }))
})

// 获取账户信息
const getDateList = async () => {
    loading.value = true
    let 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 pages = getCurrentPages()
        const route = pages[pages.length - 1].$page?.options || {}
        if (route.login) {
            const found = loginOptions.value.find(opt => opt.login === Number(route.login))
            loginValue.value = found.login
            loginValueDoc.value = found.label
            step2.value = true
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
    loading.value = false
}
//获取入金通道
const getDepositList = async () => {
    pictLoading.value = true
    tableData.International_Transfer = []
    tableData.China_UnionPay = []
    tableData.Digital_Currency = []
    tableData.Electronic_Wallet = []
    tableData.Ucard_Wallet = []
    let res = await financialApi.RemittanceChannelList({})
    if (res.code == Code.StatusOK) {
        res.data.forEach(item => {
            if (item.type == 1) tableData.International_Transfer.push(item), tableData1.International_Transfer.push(item)
            if (item.type == 2) tableData.China_UnionPay.push(item), tableData1.China_UnionPay.push(item)
            if (item.type == 3) tableData.Digital_Currency.push(item), tableData1.Digital_Currency.push(item)
            if (item.type == 4) tableData.Electronic_Wallet.push(item), tableData1.Electronic_Wallet.push(item)
            if (item.type == 5) tableData.Ucard_Wallet.push(item), tableData1.Ucard_Wallet.push(item)
        })
        pictLoading.value = false
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
        pictLoading.value = false
    }
}
//获取银行列表
const getBankList = async (row) => {
    let res = await financialApi.BankList({ channelCode: row.code })
    try {
        if (res.code == Code.StatusOK) {
            let bank = res.data
            let data = []
            bank.forEach(j => {
                if (!j.minAmount && j.minAmount != 0) j.minAmount = row.minAmount
                if (!j.maxAmount && j.maxAmount != 0) j.maxAmount = row.maxAmount
                j.bankValid = row.bankValid
                j.requestUrl = row.requestUrl
                data.push(j)
            })
            bankDate.value = data
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (error) {
        uni.showToast({ title: error.msg, icon: 'none' })
    }
}

//获取20赠金活动信息
const getCheckExistSuccess = async () => {
    let res = await financialApi.depositCheckExistSuccess({})
    if (res.code == Code.StatusOK) {
        CheckExistSuccess.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
//20赠金是否到期-4月30号23:59:59的时候关闭申请
const is20Open = () => {
    let endTime1 = "2023/04/30 23:59:59"
    let timezone = 2
    let offset_GMT = new Date().getTimezoneOffset()
    let nowDate = new Date().getTime()
    let now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    let end = new Date(endTime1).getTime()
    if (now > end) anshiClose.value = false
}
//限时活动
const ActivityRequiteInfo = async () => {
    let res = await activityApi.ActivityRequiteInfo({})
    if (res.code == Code.StatusOK) {
        limitedStatus.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
//2023年中赠金活动数据-10
const Activity24nianzhongInfo = async () => {
    let res = await activityApi.Activity23nianzhongInfo({})
    if (res.code == Code.StatusOK) {
        Object.assign(tableData4, res.data)
        // const Data4 = {
        //     "activityEndTime": null,
        //     "activityStartTime": null,
        //     "applicationEndTime": null,
        //     "applicationStartTime": null,
        //     "loginTypes": [5, 6],
        //     "show": 1,
        //     "useApply": 1
        // };
        // Object.assign(tableData4, Data4)
        // tableData4Flag.value = tableData4.show == 1 && tableData4.useApply == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
//2023年中赠金活动数据-20
const Activity24nianzhongTwoInfo = async () => {
    let res = await activityApi.Activity23nianzhongTwoInfo({})
    if (res.code == Code.StatusOK) {
        Object.assign(tableData4Two, res.data)
        // const Data4 = {
        //     "activityEndTime": null,
        //     "activityStartTime": null,
        //     "applicationEndTime": null,
        //     "applicationStartTime": null,
        //     "loginTypes": [5, 6],
        //     "show": 1,
        //     "useApply": 1
        // };
        // Object.assign(tableData4Two, Data4)
        // tableData4Flag.value = tableData4Two.show == 1 && tableData4Two.useApply == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
//2023年中赠金活动权限
const get23nianzhongTwoLogin = async (newVal) => {
    let res = await activityApi.Activity23nianzhongTwoLogin({ login: newVal })
    if (res.code == Code.StatusOK) {
        Object.assign(tableData4Two, res.data)
        tableData4TwoFlag.value = tableData4Two.show == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getActivityExtensionGiveLogin = async (newVal) => {
    let res = await activityApi.ActivityExtensionGiveLogin({ login: newVal })
    if (res.code == Code.StatusOK) {
        Object.assign(tableDataNewList, res.data)
        tableDataNewListFlag.value = tableDataNewList.show == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getActivityExtensionGiveLoginJoin = async (newVal) => {
    let res = await activityApi.ActivityExtensionGiveLoginJoin({ login: newVal })
    if (res.code == Code.StatusOK) {
        giveLoginJoin.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
        giveLoginJoin.value = ""
    }
}
//24新年庆典   开始
const isNewYear24Open = () => {
    let endTime1 = "2025/3/31 23:59:59"
    let startTime1 = "2025/1/1 00:00:00"
    let timezone = 2
    let offset_GMT = new Date().getTimezoneOffset()
    let nowDate = new Date().getTime()
    let now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    let end = new Date(endTime1).getTime()
    let start = new Date(startTime1).getTime()
    if (now < end && start < now) ActivityNewYear24()
}
const ActivityNewYear24 = async () => {
    let res = await activityApi.ActivityNewYear24({})
    if (res.code == Code.StatusOK) {
        tableDataNewYear24.value = res.data
        if (typeof tableDataNewYear24.value == "object") toIncome()
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const toIncome = () => {
    let balance = Number(tableDataNewYear24.value.balance) || 0
    tableDataNewYear24.value.details.forEach((item, index) => {
        if (balance > item.min && balance <= item.max) {
            NewYear24Data.rate = item.rate
            NewYear24Data.index = item.index
            NewYear24Data.balance = (Number(tableDataNewYear24.value.details[index + 1].min) - balance).toFixed(2)
            NewYear24Data.income = ((Number(tableDataNewYear24.value.details[index + 1].min) * Number(tableDataNewYear24.value.details[index + 1].rate) / 100 / 365) * 365).toFixed(2)
            tableDataNewYear24Flag.value = true
        } else if (balance > item.min && balance >= item.max && item.max == 0) {
            tableDataNewYear24Flag.value = false
        }
    })
}
//24新年庆典   结束

// 新改内容
// userStore.paymentChannel.value
// userStore.channelList.value
const channel = computed(() => userStore.paymentChannel)
const channelList = computed(() => userStore.channelList)
const channelListOptions = ref([])
const channelId = ref(null)
const loading = ref(false)
const setAllAmount = () => {
    const found = loginOptions.value.find(opt => opt.login === Number(loginValue.value))
    params.amount = parseInt(found.balance)
    validateAmount()
}
const allTabs = computed(() => {
    return {
        "Digital_Currency": t('Custom.Deposit.Channel3'),
        "China_UnionPay": t('Custom.Deposit.Channel2'),
        "Electronic_Wallet": t('Custom.Deposit.Channel4'),
        "International_Transfer": t('Custom.Deposit.Channel1'),
        "Ucard_Wallet": t('card.title'),
    }
})
function formatChannels(data) {
    const result = []
    // 遍历每个分类
    for (const key in data) {
        const list = data[key] || []
        // 插入分类标题（禁用项）
        if (list.length) {
            result.push({
                text: allTabs.value[key],
                value: key,
                disable: true
            })
        }
        list.forEach(item => {
            result.push({
                ...item,
                text: item.name,
                value: item.code
            })
        })
    }
    return result
}
// 生命周期
onMounted(() => {
    if (channelList.value) {
        channelListOptions.value = formatChannels(channelList.value)
    }
    channelId.value = channel.value


    getDateList()
    isStep3Open()
    setTimeout(() => {
        if (country.value === "VN") dialogVietnamNotice.value = true
        is20Open()
        // Activity24nianzhongInfo();
        // Activity24nianzhongTwoInfo();
        // dealResult({ "type": 7, "result": "/krad/pin?serial=123123" })
        isNewYear24Open()
        ActivityRequiteInfo()
    }, 800);
})
onUnmounted(() => {
    // userStore.savePaymentChannel('')
    // userStore.saveChannelList('')
})

watch(channelId, async (newVal) => {

    if (newVal) {
        showTable()
        let row = channelListOptions.value.find(item => item.code == newVal)
        console.log(newVal, channelListOptions, 12);
        console.log(row, 12);
        isShowStep3(row)
    }
});
watch(isStep3, async (newVal) => {
    if (newVal) {
        await nextTick();
        formRef.value?.clearValidate();
        resetForm();
        await nextTick();
        formRef.value?.clearValidate();
    }
});
// Watch
watch(loginValue, (login) => {
    if (login) {
        step3.value = true
        get23nianzhongTwoLogin(login);
        getActivityExtensionGiveLogin(login);
        getActivityExtensionGiveLoginJoin(login);
    }
})
watch(() => params.amount, (newVal) => {
    if (newVal && channelData.rate) {
        params.amount1 = (newVal * channelData.rate).toFixed(2)
    }
})
watch(() => imageUrl, (newVal) => {
    console.log(newVal, 12);
}, { deep: true })
watch(() => params.agree3, (newVal) => {
    if (newVal) {
        params.agree2 = false
        params.agree4 = false
        params.agree5 = false
        params.agree6 = false
    }
})
watch(() => params.agree2, (newVal) => {
    if (newVal) {
        params.agree3 = false
        params.agree4 = false
        params.agree5 = false
        params.agree6 = false
    }
})
watch(() => params.agree4, (newVal) => {
    if (newVal) {
        params.agree3 = false
        params.agree2 = false
        params.agree5 = false
        params.agree6 = false
    }
})
watch(() => params.agree5, (newVal) => {
    if (newVal) {
        params.agree3 = false
        params.agree2 = false
        params.agree4 = false
        params.agree6 = false
    }
})
watch(() => params.agree6, (newVal) => {
    if (newVal) {
        params.agree3 = false
        params.agree2 = false
        params.agree4 = false
        params.agree5 = false
        if (giveLoginJoin.value.flag == false) {
            let tips = ""
            if (giveLoginJoin.value.promptType == 1) tips = t("surplusList.item10")
            else tips = t("surplusList.item11")
            if (giveLoginJoin.value.activityCategory == 1) {
                $pigeon.MessageConfirm(
                    tips,
                    t("Msg.SystemPrompt"),
                    t("surplusList.item12"),
                    t("Home.msg.item3"),
                    () => {
                        $pigeon.MessageConfirm(
                            t("surplusList.item13"),
                            t("Msg.SystemPrompt"),
                            t("Btn.Confirm"),
                            t("Btn.Cancel"),
                            async () => {
                                try {
                                    const res = await activityApi.ActivityGiveCancel({ login: $route.query.login })
                                    if (res.code == Code.StatusOK) $pigeon.MessageOK(res.msg || t("Msg.Success"))
                                    else uni.showToast({ title: res.msg, icon: 'none' })
                                } catch (error) {
                                    $pigeon.MessageError(t("Msg.Fail"))
                                }
                            },
                            () => { params.agree6 = false }
                        )
                    },
                    () => { },
                    { showCancelButton: true }
                )
            } else if (giveLoginJoin.value.activityCategory == 2) {
                $pigeon.MessageConfirm(
                    tips,
                    t("Msg.SystemPrompt"),
                    "跳转",
                    t("Btn.Cancel"),
                    () => {
                        $pigeon.MessageConfirm(
                            "是否跳转到对应活动取消",
                            t("Msg.SystemPrompt"),
                            t("Btn.Confirm"),
                            t("Btn.Cancel"),
                            () => {
                                uni.navigateTo({ url: "/pages/customer/monthly/list" })
                            },
                            () => { params.agree6 = false }
                        )
                    },
                    () => { },
                    { showCancelButton: false }
                )
            } else {
                $pigeon.MessageConfirm(
                    tips,
                    t("Msg.SystemPrompt"),
                    t("Btn.Confirm"),
                    t("Btn.Cancel")
                )
            }
        }
    }
})
</script>

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

.custom-deposit {
    width: px2rpx(566);
    flex-shrink: 0;

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

        .tit {
            font-size: px2rpx(20);
            font-weight: 700;
            color: var(--bs-heading-color);
        }
    }

    .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(--bs-heading-color);

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

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

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

    .s-btn[type="primary"] {
        width: 100%;
        height: px2rpx(48);
        background-color: #cf1322;
        color: var(--bs-emphasis-color);
        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-color: #cf1322;
        }
    }

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

    .wire-transfer-account {
        background: var(--color-zinc-50);
        padding: px2rpx(16);
        border-radius: px2rpx(12);
        margin: px2rpx(16) 0;

        // .row {
        //     display: flex;
        //     margin-bottom: px2rpx(12);
        //     font-size: px2rpx(14);

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

        //     .label {
        //         width: px2rpx(120);
        //         color: var(--color-zinc-500);
        //     }

        //     .content {
        //         flex: 1;
        //         color: var(--bs-heading-color);
        //         font-weight: 500;
        //     }

        //     .SpecialColor {
        //         color: var(--color-error);
        //     }
        // }
    }

    .activities {
        margin: px2rpx(24) 0;

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

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

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

        .clause-text {
            font-size: px2rpx(13);
            color: var(--color-zinc-500);
            line-height: 1.6;
            padding-left: px2rpx(26);

            .clause {
                color: var(--color-primary);
                text-decoration: underline;
            }
        }
    }

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

        .tips {
            line-height: 1.8;
            font-size: px2rpx(12);
            color: var(--bs-heading-color);
            background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
            padding: px2rpx(12);
            border-radius: px2rpx(4);
            border-left: px2rpx(2) solid #cf1322;

            .title {
                font-weight: 600;
                margin-bottom: px2rpx(6);
                color: var(--bs-heading-color);
            }
        }

        .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 {
                color: var(--bs-emphasis-color);
                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;
                }
            }
        }
    }

    .upload-box {
        display: flex;
        align-items: center;
        gap: px2rpx(12);

        .btn-upload {
            background: var(--color-zinc-100);
            border: px2rpx(1) dashed var(--color-zinc-300);
            border-radius: px2rpx(8);
            height: px2rpx(44);
            font-size: px2rpx(14);
            color: var(--color-zinc-600);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 px2rpx(20);
        }

        .img-preview {
            width: px2rpx(44);
            height: px2rpx(44);
            border-radius: px2rpx(4);
            object-fit: cover;
        }
    }

    .label-with-icon {
        font-size: px2rpx(14);
        color: #606266;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 0 8px;
        height: px2rpx(36);
        line-height: 1.5715;
        text-align: left;
        /* #ifndef APP-NVUE */
        white-space: initial;
        /* #endif */


    }

    .tooltip-content {
        :deep(.uni-tooltip-popup) {
            background-color: #fff !important;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
            width: px2rpx(300) !important;
            color: var(--color-zinc-500);
            line-height: 1.6;
        }
    }

    .error {
        color: var(--color-error);
        font-size: px2rpx(12);
        margin-top: px2rpx(4);
        display: block;
    }

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

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

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

    .popup-content {
        background: #fff;
        border-radius: px2rpx(20);
        padding: px2rpx(24);
        width: px2rpx(320);
        text-align: center;

        .popup-title {
            font-size: px2rpx(18);
            font-weight: 700;
            margin-bottom: px2rpx(20);
            color: var(--bs-heading-color);
            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);
            text-align: left;

            .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);
                    font-weight: 500;
                }

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

                .small-input {
                    width: px2rpx(60);
                    background: #fff;
                    border: px2rpx(1) solid var(--color-zinc-200);
                    border-radius: px2rpx(4);
                    padding: 0 px2rpx(4);
                    height: px2rpx(24);
                    font-size: px2rpx(12);
                }
            }
        }

        .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-color: #cf1322;
                    color: var(--bs-emphasis-color);
                }

                &: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;
                }
            }
        }
    }

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

        to {
            transform: rotate(360deg);
        }
    }

    .avatar-uploader {
        border: 1px dashed;
        width: px2rpx(200);
        height: px2rpx(150);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /*float: left;*/
        //overflow: hidden;

    }

    :deep(.files-button) {
        .file-item {

            .icon,
            .avatar {
                width: px2rpx(200);
                height: px2rpx(150);
            }
        }
    }



}

.help-icon {
    margin-left: px2rpx(8);
    width: px2rpx(16);
    height: px2rpx(16);
    background: var(--color-zinc-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: px2rpx(12);
    color: var(--color-zinc-600);
    cursor: pointer;
}

.amount-box {
    display: flex;
    align-items: center;
    gap: px2rpx(12);

    .amount-input {
        flex: 1;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: px2rpx(14);
        margin-bottom: px2rpx(12);
        height: px2rpx(35);
        color: #fff;
        border-radius: px2rpx(4);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0 px2rpx(20);
        margin-top: px2rpx(21);
        cursor: pointer;
    }
}

.custom-deposit-container {
    width: 100%;
    display: flex;
    gap: px2rpx(60);
    justify-content: space-between;
}

@media (max-width: 992px) {
    .custom-deposit {
        width: 100%;
        margin-top: px2rpx(20);
    }

    .custom-deposit-container {
        display: flex;
        gap: px2rpx(30);
        flex-wrap: wrap;
    }
}
</style>