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="custom-deposit">
            <!-- 步骤1：选择账户 -->
            <view class="box box-step1">
                <view class="b-card">
                    <view class="card-top">
                        <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title1')
                            }}</text>
                        <cwg-combox :clearable="false" v-model:value="loginValue" :options="loginComboxOptions"
                            :placeholder="t('placeholder.choose')" @change="onAccountChange" />
                    </view>
                </view>
            </view>
            <!-- 步骤2：支付通道列表（卡片布局） -->
            <view class="box box-step2" v-if="step2">
                <view class="b-card">
                    <view class="card-top">
                        <text class="tit"><text class="iconfont icon-caret-right"></text>{{ t('Custom.Deposit.Title2')
                            }}</text>
                        <view v-for="(group, index) in sortedTableData" :key="index">
                            <view class="channelType" v-if="group.length" v-t="groupTitleMap[group[0].type]" />
                            <PaymentMethodsList :list="group" @select="isShowStep3" />
                        </view>
                        <view v-if="step3" class="reselect-btn">
                            <button class="s-btn reselect" type="primary" @click="showTable">{{
                                t('Custom.Deposit.Reselect') }}</button>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 步骤3：填写入金信息 -->
            <view class="box box-step3" v-if="step3">
                <view class="b-card">
                    <view class="card-top">
                        <!-- 注意事项（第一步确认） -->
                        <view v-if="!isStep3">
                            <view class="step3-attention">
                                <rich-text class="attention"
                                    :nodes="(locale === 'cn' || locale === 'zhHant') ? introduce.introduce : introduce.enIntroduce"></rich-text>
                                <view class="btn-bottom">
                                    <text class="btn crm-cursor" @click="isStep3Open()">{{ t('Btn.Confirm') }}</text>
                                </view>
                            </view>
                        </view>

                        <!-- 表单（确认后显示） -->
                        <uni-forms v-if="isStep3" ref="baseForm" :model="params" labelWidth="200" label-position="top"
                            class="base-info-form">
                            <uni-row class="demo-uni-row uni-row1">
                                <!-- 信用卡选择 -->
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
                                    v-if="channelData.confirmCreditCard == 1">
                                    <view class="add-back">
                                        <text>{{ t('PersonalManagement.Label.addCreditCard') }}</text>
                                        <text class="add-btn crm-cursor" @click="openAddBankCard">{{
                                            t('Custom.Withdraw.addBank1') }}</text>
                                    </view>
                                    <uni-forms-item :label="t('PersonalManagement.Label.addCreditCard')">
                                        <cwg-combox :clearable="false" v-model:value="myId" :options="creditCardOptions"
                                            :placeholder="t('placeholder.choose')" @change="onCreditCardChange" />
                                    </uni-forms-item>
                                </uni-col>

                                <!-- 银行选择（如有） -->
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="bankDate.length">
                                    <uni-forms-item :label="t('news_add_field.Label.Title4')">
                                        <cwg-combox :clearable="false" v-model:value="selectedBankIndex"
                                            :options="bankOptions" :placeholder="t('placeholder.choose')"
                                            @change="onBankChange" />
                                    </uni-forms-item>
                                </uni-col>

                                <!-- 特别提示（B2BINPAY） -->
                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                                    v-if="bankDate.length && channelData.code == 'B2BINPAY'">
                                    <text class="tit"><text class="iconfont iconi"></text>{{ t('Custom.Deposit.Des')
                                        }}</text>
                                </uni-col>

                                <!-- 电汇信息展示 -->
                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                                    v-if="['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.code)">
                                    <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                        t('Custom.Deposit.Title5') }}</text>
                                    <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>
                                </uni-col>

                                <!-- 数字货币信息展示 -->
                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
                                    v-if="channelData.code && channelData.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0">
                                    <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                        t('Custom.Deposit.DigitalAcc') }}</text>
                                    <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="Host85 + WireTransferAccount.url" mode="aspectFit"
                                                style="width: 100rpx; height: 100rpx;" />
                                        </view>
                                    </view>
                                </uni-col>

                                <!-- 表单字段：金额、预估金额、上传凭证、优惠码 -->
                                <uni-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                                    <text class="tit"><text class="iconfont icon-caret-right"></text>{{
                                        t('Custom.Deposit.Title3')
                                        }}</text>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                    <uni-forms-item
                                        :label="t('Custom.Deposit.Title3') + '(' + channelData.currency + ')'">
                                        <uni-easyinput type="number" v-model="params.amount" @input="onAmountInput"
                                            :placeholder="t('placeholder.input')" />
                                        <text class="error" v-if="amountError">{{ amountError }}</text>
                                    </uni-forms-item>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="channelData.rate">
                                    <uni-forms-item>
                                        <template #label>
                                            <view class="label-with-icon">
                                                <text>{{ t('Custom.Deposit.EstimatedAmount') + '(' +
                                                    channelData.transformCurrency + ')' }}</text>
                                                <text class="help-icon" @click="showEstimateHelp">?</text>
                                            </view>
                                        </template>
                                        <uni-easyinput v-model="params.amount1" disabled
                                            :placeholder="t('placeholder.input')" />
                                    </uni-forms-item>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-if="needUploadVoucher">
                                    <uni-forms-item :label="t('Custom.Deposit.UploadRemittanceVoucher')">
                                        <view class="upload-box">
                                            <button class="btn-upload" @click="chooseImage">{{ t('upload') }}</button>
                                            <image v-if="imageUrl" :src="imageUrl" mode="aspectFit"
                                                class="img-preview" />
                                        </view>
                                    </uni-forms-item>
                                </uni-col>
                                <uni-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                                    <uni-forms-item>
                                        <template #label>
                                            <view class="label-with-icon">
                                                <text v-t="'Custom.Deposit.PromoCode'" />
                                                <uni-tooltip placement="top" class="tooltip-content">
                                                    <view class="item">?</view>
                                                    <template #content>
                                                        <text v-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>
                                </uni-col>
                            </uni-row>

                            <!-- 活动勾选区域（完整保留所有原逻辑） -->
                            <view class="activities">
                                <!-- 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)">
                                        <label class="checkbox">
                                            <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" v-if="country == 'CN'">
                                            <p style="margin-bottom: 15px" v-if="isGuoQin">
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/100Bonus-en.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22_2') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23_2') }}</span>
                                            </p>
                                            <p style="margin-bottom: 15px" v-else>
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/100Bonus-en.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22_2') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23_2') }}</span>
                                            </p>
                                        </view>
                                        <view style="line-height: 1.5; font-size: 14px" v-if="country != 'CN'">
                                            <p style="margin-bottom: 15px">
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/100Bonus-en.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22_2') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23_2') }}</span>
                                            </p>
                                        </view>
                                    </template>
                                    <template v-if="!isSupportedCountry && ACCType != 8 && !isAfterSeptember30()">
                                        <label class="checkbox">
                                            <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" v-if="country == 'CN'">
                                            <p style="margin-bottom: 15px" v-if="isGuoQin">
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/${locale}.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23_1') }}</span>
                                            </p>
                                            <p style="margin-bottom: 15px" v-else>
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/${locale}.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23') }}</span>
                                            </p>
                                        </view>
                                        <view style="line-height: 1.5; font-size: 14px" v-if="country != 'CN'">
                                            <p style="margin-bottom: 15px">
                                                <span>{{ t('Custom.Deposit.agree21') }}</span>
                                                <span class="clause crm-cursor">
                                                    <a :href="`pdf/pdf4/${locale}.pdf`" style="color: black">{{
                                                        t('Custom.Deposit.agree22') }}</a>
                                                </span>
                                                <span>{{ t('Custom.Deposit.agree23_1') }}</span>
                                            </p>
                                        </view>
                                    </template>
                                </view>

                                <!-- 10%赠金-年中赠金 -->
                                <view v-if="tableData4Flag">
                                    <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">
                                        <p style="margin-bottom: 15px">
                                            <span>{{ t('news_add_field1.activitiesNZ.itemDeposit2') }}</span>
                                            <span class="clause crm-cursor" @click="dialogClauseNZ = true">{{
                                                t('news_add_field1.activitiesNZ.itemDeposit3') }}</span>
                                            <span>{{ t('news_add_field1.activitiesNZ.itemDeposit4') }}</span>
                                        </p>
                                    </view>
                                </view>

                                <!-- 20%赠金-年中赠金 -->
                                <view v-if="tableData4TwoFlag">
                                    <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">
                                        <p style="margin-bottom: 15px">
                                            <span>{{ t('news_add_field1.activitiesNZTwo.itemDeposit2') }}</span>
                                            <span class="clause crm-cursor" @click="dialogClauseNZTwo = true">{{
                                                t('news_add_field1.activitiesNZTwo.itemDeposit3') }}</span>
                                            <span>{{ t('news_add_field1.activitiesNZTwo.itemDeposit4') }}</span>
                                        </p>
                                    </view>
                                </view>

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

                                <!-- 20%赠金申请 -->
                                <view
                                    v-if="(ACCType == 1 || ACCType == 2 || ACCType == 5 || ACCType == 6 || ACCType == 7) && anshiClose">
                                    <label class="checkbox">
                                        <checkbox :checked="params.agree3" @click="params.agree3 = !params.agree3"
                                            :disabled="CheckExistSuccess" />
                                        <text>{{ t('news_add_field1.deposit.item3') }}</text>
                                    </label>
                                    <view style="line-height: 1.5; font-size: 14px">
                                        <p style="margin-bottom: 15px">
                                            <span>{{ t('news_add_field1.deposit.item4') }}</span>
                                            <span class="clause crm-cursor" @click="dialogClause1 = true">{{
                                                t('news_add_field1.deposit.item5')
                                                }}</span>
                                            <span>{{ t('news_add_field1.deposit.item6') }}</span>
                                        </p>
                                    </view>
                                </view>
                            </view>

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

            <!-- 弹窗组件（使用 uni-popup） -->
            <uni-popup ref="popupRef" type="center" :mask-click="false">
                <view class="popup-content" v-if="popupType === 'confirm'">
                    <text class="popup-title">{{ t('Home.page_customer.item2') }}</text>
                    <view class="popup-form">
                        <view class="popup-row"><text class="label">{{ t('Custom.Deposit.Title1') }}：</text><text>{{
                            selectedAccountLabel }}</text></view>
                        <view class="popup-row"><text class="label">{{ t('Custom.Deposit.Title2') }}：</text><text>{{
                            locale ==
                                'cn' ? channelData.name : channelData.enName }}</text></view>
                        <view class="popup-row" v-if="code"><text class="label">{{ t('news_add_field.Label.Title4')
                                }}：</text><text>{{ selectCodes }}</text></view>
                        <view class="popup-row"><text class="label">{{ t('Custom.Deposit.Title3') }}：</text><text>{{
                            params.amount
                                }}({{ channelData.currency }})</text></view>
                        <view class="popup-row" v-if="channelData.confirmName"><text class="label">{{ t('Label.Name')
                                }}：</text><text>{{ userName }}</text></view>
                        <view class="popup-row" v-if="channelData.confirmAreaCode">
                            <text class="label">{{ t('placeholder.phone') }}：</text>
                            <input class="small-input" v-model="dialogConfirmForm.confirmAreaCode" />
                            <text>-</text>
                            <input class="small-input" v-model="dialogConfirmForm.confirmPhone" />
                        </view>
                    </view>
                    <view class="popup-buttons">
                        <button @click="closePopup">{{ t('Btn.Cancel') }}</button>
                        <button type="primary" @click="submitDeposit">{{ t('Btn.Confirm') }}</button>
                    </view>
                </view>
                <view class="popup-content" v-else-if="popupType === 'result'">
                    <view class="result-icon" v-if="dialogSuccess"><text class="iconfont iconchenggong"></text></view>
                    <view class="result-icon" v-else><text class="iconfont iconjingshi"></text></view>
                    <text class="popup-text">{{ dialogMessage }}</text>
                    <view class="popup-buttons">
                        <button type="primary" @click="closeResultPopup">{{ t('Btn.Confirm') }}</button>
                        <button v-if="!dialogSuccess" @click="closeResultPopup">{{ t('Btn.Cancel') }}</button>
                    </view>
                </view>
                <view class="popup-content" v-else-if="popupType === 'wait'">
                    <text class="iconfont icondengdai"></text>
                    <text class="popup-text">{{ t('ApplicationDialog.Des38') }}</text>
                </view>
            </uni-popup>

            <!-- 其他弹窗（越南提示、年中赠金协议等）用 uni-popup 或 uni.showModal 模拟，因原结构复杂，保留基础 -->
            <!-- 越南用户提示弹窗 -->
            <uni-popup ref="vietnamPopup" type="center">
                <view class="popup-content" style="width: 600rpx;">
                    <text class="popup-title">{{ t('Home.page_customer.item2') }}</text>
                    <view class="popup-text" style="text-align: left; font-size: 24rpx; line-height: 1.6;">
                        <p><strong>Quý khách hàng thân mến:</strong></p>
                        <p>Trước khi giao dịch, chúng tôi xin nhắc nhở bạn rằng:</p>
                        <p>1. Vì có những rủi ro nhất định trong giao dịch, bạn nên đầu tư thích hợp theo kinh nghiệm
                            giao
                            dịch và
                            thu nhập liên quan của mình, thay vì sử dụng tiền vay từ người khác.</p>
                        <p>2. Dựa trên sự điều chỉnh đối với hệ thống kiểm soát rủi ro của ngân hàng, kênh nạp tiền có
                            thể
                            không
                            được hỗ trợ hoặc hạn mức giao dịch có thể không chính xác khi bạn sẵn sàng nạp tiền (đặc
                            biệt là
                            vào ban
                            đêm tại địa phương của bạn), vì vậy bạn nên sắp xếp vị thế giao dịch của mình và khoảng thời
                            gian nạp
                            tiền sao cho hợp lý để tránh những tổn thất không đáng có do bất kỳ sự chậm trễ nào trong
                            việc
                            nhận tiền
                            nạp.</p>
                        <p>Không bao giờ tiết lộ thông tin cá nhân nhạy cảm cho người gọi đến. CWG sẽ không bao giờ yêu
                            cầu
                            bất kỳ
                            thông tin cá nhân nhạy cảm nào từ bạn qua điện thoại hoặc email cũng như không cung cấp bất
                            kỳ
                            lời
                            khuyên đầu tư nào.</p>
                        <p>Trong trường hợp có bất kỳ vấn đề gì với khoản tiền nạp của bạn, vui lòng liên hệ với trung
                            tâm
                            dịch vụ
                            khách hàng chính thức của chúng tôi bất kỳ lúc nào.</p>
                        <p>Trân trọng,</p>
                    </view>
                    <view class="popup-buttons">
                        <button type="primary" @click="closeVietnamPopup">{{ t('Btn.Confirm') }}</button>
                    </view>
                </view>
            </uni-popup>

            <!-- 中国网银提示弹窗 -->
            <uni-popup ref="chinaUnionPayPopup" type="center">
                <view class="popup-content">
                    <text class="popup-text">{{ t('news_add_field1.deposit.item64') }}</text>
                    <view class="popup-buttons">
                        <button type="primary" @click="closeChinaUnionPayPopup">{{ t('Btn.Confirm') }}</button>
                        <button @click="closeChinaUnionPayPopup">{{ t('Btn.Cancel') }}</button>
                    </view>
                </view>
            </uni-popup>

            <!-- 不参加活动弹窗 -->
            <uni-popup ref="dontActivePopupRef" type="center">
                <view class="popup-content">
                    <text class="popup-text">{{ t('Custom.Withdraw.item9') }}</text>
                    <view class="popup-buttons">
                        <button type="primary" @click="confirmDontActive">{{ t('Btn.Confirm') }}</button>
                        <button @click="closeDontActivePopup">{{ t('Btn.Cancel') }}</button>
                    </view>
                </view>
            </uni-popup>

            <!-- 20%赠金协议 -->
            <uni-popup ref="clausePopup" type="center">
                <view class="popup-content" style="width: 700rpx;">
                    <text class="popup-title">{{ locale === 'cn' ? 'CWG 20%赠金入会礼' : '20% CASH BACK BONUS' }}</text>
                    <scroll-view scroll-y style="height: 400rpx;">
                        <rich-text :nodes="clauseContent" class="popup-text"></rich-text>
                    </scroll-view>
                    <view class="popup-buttons">
                        <button @click="closeClausePopup">{{ t('Btn.Cancel') }}</button>
                        <button type="primary" @click="closeClausePopup">{{ t('Btn.Confirm') }}</button>
                    </view>
                </view>
            </uni-popup>

            <!-- 抽屉组件 -->
            <drawer :dialogInfoTradingAdd="dialogInfoTradingAdd" :addType="openType" @closeAdd="closeAdd"
                @confirmToReload="confirmToReload" />
            <view class="crm_verified_info_mask" v-if="dialogInfoTradingAdd" @click="closeDiaAdd"></view>
        </view>
    </cwg-page-wrapper>

</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import useUserStore from '@/stores/use-user-store'
// import Drawer from '@/components/Drawer.vue'
import { customApi } from '@/service/custom'
import { financialApi } from '@/service/financial'
import { activityApi } from '@/service/activity'
import Config from '@/config/index'
// import tool from '@/global/tool'
import { initLink } from '@/utils/setUrl'
import isImageType from '@/global/isImageType'
import PaymentMethodsList from './components/PaymentMethodsList.vue'
const { t, locale } = useI18n()
const { Code, Host80, Host04 } = Config
const imgUrl = Host80
const Host85 = Host80

// 用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

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

// 国家和地区列表（完整）
const 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 groupTitleMap = {
    1: 'Custom.Deposit.Channel1',
    2: 'Custom.Deposit.Channel2',
    3: 'Custom.Deposit.Channel3',
    4: 'Custom.Deposit.Channel4',
    5: 'card.title'
}
// 响应式数据
const loginOptions = ref([])
const selectedAccountIndex = ref(-1)
const selectedAccountLabel = ref('')
const loginValue = ref(null)
const step2 = ref(false)
const step3 = ref(false)
const isStep3 = ref(false)
const tableData = reactive({
    International_Transfer: [],
    China_UnionPay: [],
    Digital_Currency: [],
    Electronic_Wallet: [],
    Ucard_Wallet: []
})
const channelData = ref({})
const introduce = ref({ introduce: '', enIntroduce: '' })
const bankDate = ref([])
const selectedBankIndex = ref(-1)
const selectedBankLabel = ref('')
const ruleForm = reactive({
    bankCredit: []
})
const params = reactive({
    amount: '',
    amount1: '',
    promoCode: '',
    agree2: false,
    agree3: false,
    agree4: false,
    agree5: false,
    agree6: false
})
const mAmount = reactive({ minAmount: '', maxAmount: '' })
const isChannel = ref(true)
const pictLoading = ref(false)
const dialogInfoTradingAdd = ref(false)
const openType = ref('')
const myId = ref(null)
const code = ref('')
const selectCodes = ref('')
const WireTransferAccount = ref({})
const imageUrl = ref('')
const imageUrl1 = ref('')
const requiteVoucherUrl = ref('')
const pictLoadingImg = ref(false)
const flag = ref(false)
const dialogSuccess = ref(false)
const dialogMessage = ref('')
const goPayLink = ref('')
const popupType = ref('')
const popupRef = ref(null)
const vietnamPopupRef = ref(null)
const chinaUnionPayPopupRef = ref(null)
const dontActivePopupRef = ref(null)
const clausePopupRef = ref(null)
const dialogConfirmForm = reactive({ confirmAreaCode: '', confirmPhone: '' })
const limitedStatus = ref(null)
const limitedStatusCheck = ref(false)
const ACCType = ref(null)
const CheckExistSuccess = ref(false)
const tableData4Flag = ref(false)
const tableData4 = ref({})
const tableData4TwoFlag = ref(false)
const tableData4Two = ref({})
const tableDataNewListFlag = ref(false)
const tableDataNewList = ref({})
const giveLoginJoin = ref('')
const anshiClose = ref(true)
const dialogChinaUnionPay = ref(false)
const dialogVietnamNotice = ref(false)
const tableDataNewYear24Flag = ref(false)
const tableDataNewYear24 = ref(false)
const NewYear24Data = reactive({ balance: 0, income: 0, rate: 0, index: 0 })
const amountError = ref('')
const selectedCreditIndex = ref(-1)
const selectedCreditLabel = ref('')

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: index
    }))
})

// 计算属性
const country = computed(() => userInfo.value?.customInfo?.country || '')
const userName = computed(() => {
    const info = userInfo.value?.customInfo
    if (!info) return ''
    return [info.firstName, info.middle, info.lastName].filter(Boolean).join(' ')
})
const areaCode = computed(() => userInfo.value?.customInfo?.areaCode)
const phone = computed(() => userInfo.value?.customInfo?.phone)
const isSupportedCountry = computed(() => {
    try {
        return countries.includes(country.value)
    } catch {
        return false
    }
})
const isGuoQin = computed(() => {
    // 国庆活动时间判断（保留原逻辑，时间判断需实现）
    let flag = false
    const startTime1 = "2024/10/01 00:00:00"
    const endTime1 = "2024/10/07 23:59:59"
    const timezone = 8
    const offset_GMT = new Date().getTimezoneOffset()
    const nowDate = new Date().getTime()
    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    const start = new Date(startTime1).getTime()
    const end = new Date(endTime1).getTime()
    if (now > start && now < end) flag = true
    return flag
})
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)
})
const needUploadVoucher = computed(() => {
    const codeVal = channelData.value.code
    return ['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(codeVal) ||
        (codeVal && codeVal.indexOf('DIGITAL_PAY_TYPE_KEY') === 0)
})

// 辅助函数
const groupTypeName = (type) => {
    const map = {
        '1': 'AccountType.ClassicAccount',
        '2': 'AccountType.SeniorAccount',
        '5': 'AccountType.SpeedAccount',
        '6': 'AccountType.SpeedAccount',
        '7': 'AccountType.StandardAccount',
        '8': 'AccountType.CentAccount'
    }
    return t(map[type] || '')
}
const groupCurrency = (type) => {
    const symbol = { GBP: '£', USD: '$', EUR: '€', USC: '￠' }[type] || '$'
    return `: ${symbol}`
}
const isAfterSeptember30 = () => {
    // 原逻辑，根据实际情况
    return true
}

// 接口调用（完整保留）
const getDateList = async () => {
    const res = await customApi.CustomDropdown({ platform: '' })
    if (res.code === Code.StatusOK) {
        loginOptions.value = res.data.map(item => ({
            ...item,
            label: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`
        }))
        const pages = getCurrentPages()
        const route = pages[pages.length - 1].$page?.options || {}
        if (route.login) {
            const found = loginOptions.value.find(opt => opt.login === Number(route.login))
            if (found) {
                selectedAccountIndex.value = loginOptions.value.indexOf(found)
                selectedAccountLabel.value = found.label
                loginValue.value = found.login
                step2.value = true
                get23nianzhongTwoLogin(loginValue.value)
                getActivityExtensionGiveLogin(loginValue.value)
                getActivityExtensionGiveLoginJoin(loginValue.value)
                ACCType.value = found.type
            }
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getDepositList = async () => {
    pictLoading.value = true
    const res = await financialApi.RemittanceChannelList({})
    if (res.code === Code.StatusOK) {
        tableData.International_Transfer = []
        tableData.China_UnionPay = []
        tableData.Digital_Currency = []
        tableData.Electronic_Wallet = []
        tableData.Ucard_Wallet = []
        res.data.forEach(item => {
            if (item.type == 1) tableData.International_Transfer.push(item)
            if (item.type == 2) tableData.China_UnionPay.push(item)
            if (item.type == 3) tableData.Digital_Currency.push(item)
            if (item.type == 4) tableData.Electronic_Wallet.push(item)
            if (item.type == 5) tableData.Ucard_Wallet.push(item)
        })
        pictLoading.value = false
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
        pictLoading.value = false
    }
}
const getBankList = async (row) => {
    const res = await financialApi.BankList({ channelCode: row.code })
    if (res.code === Code.StatusOK) {
        const data = res.data.map(j => ({
            ...j,
            minAmount: j.minAmount ?? row.minAmount,
            maxAmount: j.maxAmount ?? row.maxAmount,
            bankValid: row.bankValid,
            requestUrl: row.requestUrl
        }))
        bankDate.value = data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getBankInfo = async () => {
    const res = await financialApi.customBankList({})
    if (res.code === Code.StatusOK) {
        ruleForm.bankCredit = []
        res.data.forEach(item => {
            if (item.type == 3) {
                item.customBankCode = item.bankCode
                item.bankCode = null
                ruleForm.bankCredit.push(item)
                if (item.defaultBank) {
                    myId.value = item.id
                    // 填充表单（如需要）
                }
            }
        })
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getCheckExistSuccess = async () => {
    const res = await financialApi.depositCheckExistSuccess({})
    if (res.code == Code.StatusOK) CheckExistSuccess.value = res.data
    else uni.showToast({ title: res.msg, icon: 'none' })
}
const get23nianzhongTwoLogin = async (login) => {
    const res = await activityApi.Activity23nianzhongTwoLogin({ login })
    if (res.code == Code.StatusOK) {
        tableData4Two.value = res.data
        tableData4TwoFlag.value = res.data.show == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getActivityExtensionGiveLogin = async (login) => {
    const res = await activityApi.ActivityExtensionGiveLogin({ login })
    if (res.code == Code.StatusOK) {
        tableDataNewList.value = res.data
        tableDataNewListFlag.value = res.data.show == 1
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const getActivityExtensionGiveLoginJoin = async (login) => {
    const res = await activityApi.ActivityExtensionGiveLoginJoin({ login })
    if (res.code == Code.StatusOK) giveLoginJoin.value = res.data
    else uni.showToast({ title: res.msg, icon: 'none' })
}
const Activity24nianzhongInfo = async () => {
    const res = await activityApi.Activity23nianzhongInfo({})
    if (res.code == Code.StatusOK) {
        tableData4.value = res.data
        // 根据 show 和 useApply 设置 tableData4Flag，原逻辑有注释，按实际需要
        tableData4Flag.value = (res.data.show == 1 && res.data.useApply == 1)
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const Activity24nianzhongTwoInfo = async () => {
    const res = await activityApi.Activity23nianzhongTwoInfo({})
    if (res.code == Code.StatusOK) {
        tableData4Two.value = res.data
        tableData4TwoFlag.value = (res.data.show == 1 && res.data.useApply == 1)
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const ActivityRequiteInfo = async () => {
    const res = await activityApi.ActivityRequiteInfo({})
    if (res.code == Code.StatusOK) limitedStatus.value = res.data
}
const ActivityNewYear24 = async () => {
    const res = await activityApi.ActivityNewYear24({})
    if (res.code == Code.StatusOK) {
        tableDataNewYear24.value = res.data
        if (typeof res.data == 'object') {
            toIncome()
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const toIncome = () => {
    const balance = Number(tableDataNewYear24.value.balance) || 0
    const details = tableDataNewYear24.value.details || []
    for (let i = 0; i < details.length; i++) {
        const item = details[i]
        if (balance > item.min && balance <= item.max) {
            NewYear24Data.rate = item.rate
            NewYear24Data.index = i
            NewYear24Data.balance = (details[i + 1]?.min - balance).toFixed(2)
            NewYear24Data.income = (((details[i + 1]?.min * details[i + 1]?.rate) / 100 / 365) * 365).toFixed(2)
            tableDataNewYear24Flag.value = true
            break
        } else if (balance > item.min && balance >= item.max && item.max == 0) {
            tableDataNewYear24Flag.value = false
        }
    }
}
const isNewYear24Open = () => {
    const endTime1 = "2025/3/31 23:59:59"
    const startTime1 = "2025/1/1 00:00:00"
    const timezone = 2
    const offset_GMT = new Date().getTimezoneOffset()
    const nowDate = new Date().getTime()
    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    const start = new Date(startTime1).getTime()
    const end = new Date(endTime1).getTime()
    if (now < end && start < now) {
        ActivityNewYear24()
    }
}
const is20Open = () => {
    const endTime1 = "2023/04/30 23:59:59"
    const timezone = 2
    const offset_GMT = new Date().getTimezoneOffset()
    const nowDate = new Date().getTime()
    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    const end = new Date(endTime1).getTime()
    if (now > end) anshiClose.value = false
}

// 事件处理
const onAccountChange = (val) => {
    const item = loginOptions.value.find(opt => opt.login === val)
    if (item) {
        selectedAccountIndex.value = loginOptions.value.indexOf(item)
        selectedAccountLabel.value = item.label
        loginValue.value = item.login
        step2.value = true
        showTable()
        get23nianzhongTwoLogin(loginValue.value)
        getActivityExtensionGiveLogin(loginValue.value)
        getActivityExtensionGiveLoginJoin(loginValue.value)
        ACCType.value = item.type
    }
}
const showTable = () => {
    myId.value = null
    step3.value = false
    isStep3.value = false
    isChannel.value = true
    params.amount = ''
    params.amount1 = ''
    params.agree2 = false
    params.agree3 = false
    params.agree4 = false
    params.agree5 = false
    params.agree6 = false
    params.promoCode = ''
    imageUrl.value = ''
    imageUrl1.value = ''
    bankDate.value = []
    code.value = ''
    WireTransferAccount.value = {}
    introduce.value = { introduce: '', enIntroduce: '' }
    getDepositList()
}
const doShowStep3 = (row) => {
    if (row.confirmCreditCard == 1) {
        getBankInfo()
    }
    getCheckExistSuccess()
    if (row.bankValid && isChannel.value) {
        getBankList(row)
        isChannel.value = false
        step3.value = true
        channelData.value = row
        mAmount.minAmount = row.minAmount
        mAmount.maxAmount = row.maxAmount
    } else {
        step3.value = true
        bankDate.value = []
        channelData.value = row
        mAmount.minAmount = row.minAmount
        mAmount.maxAmount = row.maxAmount
    }
    // 重置 tableData 为当前选中项
    const typeMap = {
        1: 'International_Transfer',
        2: 'China_UnionPay',
        3: 'Digital_Currency',
        4: 'Electronic_Wallet',
        5: 'Ucard_Wallet'
    }
    const key = typeMap[row.type]
    if (key) {
        tableData[key] = [row]
        // 清空其他
        Object.keys(tableData).forEach(k => { if (k !== key) tableData[k] = [] })
    }
    introduce.value = { introduce: row.introduce, enIntroduce: row.enIntroduce }
    // 处理电汇/数字货币特有信息
    if (['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO', 'DIGITAL_PAY_TYPE_KEY'].some(prefix => row.code?.startsWith(prefix))) {
        let pro = []
        if (row.property) {
            try {
                pro = JSON.parse(row.property)
            } catch (e) {
                pro = JSON.parse('[' + row.property + ']')
            }
        }
        if (pro.length) {
            const index = Math.floor(Math.random() * pro.length)
            WireTransferAccount.value = pro[index]
        } else {
            WireTransferAccount.value = {}
        }
    }
}
const isShowStep3 = (row) => {
    if (row.kycChannel != 1) {
        doShowStep3(row)
    } else {
        // KYC 验证，原逻辑会调用 qrCode 方法，这里简化直接调用 doShowStep3（实际应实现验证）
        doShowStep3(row)
    }
}
const onBankChange = (idx) => {
    const item = bankDate.value[idx]
    if (item) {
        selectedBankIndex.value = idx
        selectedBankLabel.value = (locale.value === 'cn' || locale.value === 'zhHant') ? item.name : item.enName
        selectCodes.value = selectedBankLabel.value
        code.value = item.code
        mAmount.minAmount = item.minAmount || mAmount.minAmount
        mAmount.maxAmount = item.maxAmount || mAmount.maxAmount
        channelData.value.rate = item.rate || channelData.value.rate
        channelData.value.transformCurrency = item.currency || channelData.value.transformCurrency
    }
}
const onCreditCardChange = (val) => {
    const item = ruleForm.bankCredit.find(i => i.id === val)
    if (item) {
        selectedCreditIndex.value = ruleForm.bankCredit.indexOf(item)
        selectedCreditLabel.value = `${item.bankUname}-${item.bankCardNum}`
        myId.value = item.id
        // 填充表单（原 chooseBank 逻辑）
    }
}
const onAmountInput = (e) => {
    console.log(e, e.detail.value);
    const val = e.detail.value
    params.amount = val
    if (val && channelData.value.rate) {
        params.amount1 = (val * channelData.value.rate).toFixed(2)
    }
    // 金额校验
    if (val && (val < mAmount.minAmount || val > mAmount.maxAmount)) {
        amountError.value = `${t('vaildate.amount.amount')}${mAmount.minAmount} - ${mAmount.maxAmount}`
    } else if (val && !/^[1-9]\d*$/.test(val)) {
        amountError.value = t('vaildate.amount.format1')
    } else {
        amountError.value = ''
    }
}
const showEstimateHelp = () => {
    uni.showModal({ title: t('Custom.Deposit.des'), content: '', showCancel: false })
}
const chooseImage = () => {
    uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
            const tempFilePath = res.tempFilePaths[0]
            const ext = tempFilePath.split('.').pop().toLowerCase()
            if (!['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) {
                uni.showToast({ title: t('Msg.JPG'), icon: 'none' })
                return
            }
            uni.getFileInfo({
                filePath: tempFilePath,
                success: (info) => {
                    if (info.size > 3 * 1024 * 1024) {
                        uni.showToast({ title: t('Msg.3IMG'), icon: 'none' })
                        return
                    }
                    pictLoadingImg.value = true
                    uni.uploadFile({
                        url: Config.Host80 + '/common/upload',
                        filePath: tempFilePath,
                        name: 'file',
                        header: { 'Access-Token': Session.get('access_token') },
                        success: (uploadRes) => {
                            const resData = JSON.parse(uploadRes.data)
                            if (resData.code == 200) {
                                uni.showToast({ title: resData.msg, icon: 'success' })
                                imageUrl.value = resData.data
                                requiteVoucherUrl.value = resData.data
                            } else {
                                uni.showToast({ title: resData.msg, icon: 'none' })
                            }
                        },
                        fail: () => {
                            uni.showToast({ title: t('Msg.Fail'), icon: 'none' })
                        },
                        complete: () => {
                            pictLoadingImg.value = false
                        }
                    })
                }
            })
        }
    })
}
const isStep3Open = () => {
    isStep3.value = true
    if (tableData.China_UnionPay.length && tableData.China_UnionPay[0].type == 2) {
        const now = new Date()
        const hours = now.getHours()
        if (hours < 8 || hours >= 22) {
            chinaUnionPayPopupRef.value?.open()
        }
    }
}
const openAddBankCard = () => {
    if (ruleForm.bankCredit.length == 2) {
        uni.showModal({
            title: t('Msg.SystemPrompt'),
            content: t('Msg.WireTransfers'),
            showCancel: true,
            confirmText: t('Btn.Confirm'),
            cancelText: t('Btn.Cancel')
        })
    } else {
        openType.value = 'add_CreditCard'
        dialogInfoTradingAdd.value = true
    }
}
const closeAdd = (val) => { dialogInfoTradingAdd.value = val }
const confirmToReload = () => {
    dialogInfoTradingAdd.value = false
    getBankInfo()
}
const closeDiaAdd = () => { dialogInfoTradingAdd.value = false }

// 提交确认逻辑
const submitConfirm = () => {
    console.log(params, 121212);
    // 原 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) {
        // 已勾选普通活动，直接进入确认
        openConfirmDialog()
        return
    }
    if (tableData4Flag.value && params.agree4) {
        openConfirmDialog()
        return
    }
    if (tableData4TwoFlag.value && params.agree5) {
        openConfirmDialog()
        return
    }
    if (tableDataNewListFlag.value && params.agree6) {
        openConfirmDialog()
        return
    }
    if (limitedStatus.value && limitedStatusCheck.value) {
        openConfirmDialog()
        return
    }
    if ((ACCType.value == 1 || ACCType.value == 2 || ACCType.value == 5 || ACCType.value == 6 || ACCType.value == 7) && anshiClose.value && params.agree3) {
        openConfirmDialog()
        return
    }
    // 否则显示不参加活动弹窗
    dontActivePopupRef.value?.open()
}
const openConfirmDialog = () => {
    if (channelData.value.confirmCreditCard == 1 && !myId.value) {
        uni.showToast({ title: t('PersonalManagement.Label.selectCreditCard'), icon: 'none' })
        return
    }
    if (channelData.value.bankValid == 1 && !code.value) {
        uni.showToast({ title: t('vaildate.depositCurrency.empty'), icon: 'none' })
        return
    }
    if (needUploadVoucher.value && !imageUrl.value) {
        uni.showToast({ title: t('vaildate.depositVoucher.empty'), icon: 'none' })
        return
    }
    if (params.promoCode && (params.agree2 || params.agree3 || params.agree4 || params.agree5 || params.agree6)) {
        uni.showToast({ title: t('news_add_field.Des.item2'), icon: 'none' })
        return
    }
    if (!params.amount) {
        uni.showToast({ title: t('vaildate.input.empty'), icon: 'none' })
        return
    }
    if (amountError.value) {
        uni.showToast({ title: amountError.value, icon: 'none' })
        return
    }
    dialogConfirmForm.confirmAreaCode = areaCode.value
    dialogConfirmForm.confirmPhone = phone.value
    popupType.value = 'confirm'
    popupRef.value?.open()
}
const confirmDontActive = () => {
    dontActivePopupRef.value?.close()
    openConfirmDialog()
}
const closeDontActivePopup = () => {
    dontActivePopupRef.value?.close()
}
const closePopup = () => popupRef.value?.close()
const submitDeposit = () => {
    popupRef.value?.close()
    submit()
}
const submit = async () => {
    if (flag.value) return
    flag.value = true
    popupType.value = 'wait'
    popupRef.value?.open()

    try {
        let res = null
        if (['UNION_PAY_TELEGRAPHIC', 'UNION_PAY_TELEGRAPHIC_SPECIAL', 'UNION_PAY_TELEGRAPHIC_TWO'].includes(channelData.value.code)) {
            res = await financialApi.telegraphicPay({
                requiteVoucherUrl: imageUrl1.value,
                amount: params.amount,
                login: loginValue.value,
                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.value.code,
                bankMsg: WireTransferAccount.value.bankMsg || '',
                name: channelData.value.confirmName ? userName.value : null,
                areaCode: channelData.value.confirmAreaCode ? dialogConfirmForm.confirmAreaCode : null,
                phone: channelData.value.confirmPhone ? dialogConfirmForm.confirmPhone : null,
                ip: sessionStorage.getItem('CLIENT')
            })
        } else if (channelData.value.code && channelData.value.code.indexOf('DIGITAL_PAY_TYPE_KEY') === 0) {
            res = await financialApi.digitalPay({
                requiteVoucherUrl: imageUrl1.value,
                amount: params.amount,
                login: loginValue.value,
                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: sessionStorage.getItem('CLIENT')
            })
        } else {
            let url = channelData.value.bankValid == 1
                ? `${channelData.value.requestUrl}/${loginValue.value}/${params.amount}/${code.value}/${params.agree2 ? 1 : 0}`
                : `${channelData.value.requestUrl}/${loginValue.value}/${params.amount}/${params.agree2 ? 1 : 0}`
            res = await financialApi.PayBankCode(url, {
                requiteVoucherUrl: imageUrl1.value,
                promoCode: params.promoCode,
                name: channelData.value.confirmName ? userName.value : null,
                areaCode: channelData.value.confirmAreaCode ? dialogConfirmForm.confirmAreaCode : null,
                phone: channelData.value.confirmPhone ? dialogConfirmForm.confirmPhone : null,
                activityPercentageGive: params.agree3 ? 1 : 0,
                activityMidyearTenPercentGive: params.agree4 ? 1 : 0,
                activityTwoPercentGive: params.agree5 ? 1 : 0,
                activityGive: params.agree6 ? 1 : 0,
                ip: sessionStorage.getItem('CLIENT')
            })
        }
        popupRef.value?.close()
        if (res.code == Code.StatusOK) {
            const data = res.data
            if (data.type == 1) {
                goPayLink.value = data.result
                window.open(data.result)
                showResult(true, t('ApplicationDialog.Des1'))
            } else if (data.type == 2) {
                let token = Session.get('access_token')
                // token = tool.tokenReplace(token)
                goPayLink.value = Host04 + `/finance/deposit/get?serial=${data.result}&Access-Token=${token}`
                window.open(goPayLink.value)
                showResult(true, t('ApplicationDialog.Des1'))
            } else if (data.type == 5) {
                uni.showModal({
                    title: t('Msg.SystemPrompt'),
                    content: t('PersonalManagement.Label.item2'),
                    showCancel: true,
                    confirmText: t('Btn.Cancel'),
                    cancelText: t('Btn.Confirm'),
                    success: (modalRes) => {
                        if (modalRes.cancel) {
                            goPayLink.value = data.result
                            window.open(goPayLink.value)
                            showResult(true, t('ApplicationDialog.Des1'))
                        }
                    }
                })
            } else if (data.type == 8) {
                goPayLink.value = Host04 + data.result
                window.open(goPayLink.value)
                showResult(true, t('ApplicationDialog.Des1'))
            } else if (data.type == 9) {
                goPayLink.value = setCardUrl(data.result)
                window.open(goPayLink.value)
                showResult(true, t('ApplicationDialog.Des1'))
            } else if (data.type == 10) {
                goPayLink.value = Host80 + '/pay/onchainpay.html?params=' + data.result
                window.open(goPayLink.value)
                showResult(true, t('ApplicationDialog.Des1'))
            } else {
                showResult(true, t('ApplicationDialog.Des1'))
            }
        } else {
            showResult(false, res.msg)
        }
    } catch (err) {
        popupRef.value?.close()
        showResult(false, t('Msg.Fail'))
    }
    flag.value = false
}
const setCardUrl = (serial) => {
    const token = Session.get('access_token')
    const params = `${token}/${locale.value}/${serial}/1/pay`
    return initLink({ link: imgUrl + '/pay/paycard.html', params })
}
const showResult = (success, msg) => {
    dialogSuccess.value = success
    dialogMessage.value = msg
    popupType.value = 'result'
    popupRef.value?.open()
}
const closeResultPopup = () => {
    popupRef.value?.close()
    if (dialogSuccess.value) {
        showTable()
        step2.value = false
        step3.value = false
        isStep3.value = false
        selectedAccountIndex.value = -1
        selectedAccountLabel.value = ''
        loginValue.value = null
    }
}
const closeVietnamPopup = () => vietnamPopupRef.value?.close()
const closeChinaUnionPayPopup = () => chinaUnionPayPopupRef.value?.close()
const closeClausePopup = () => clausePopupRef.value?.close()
const clauseContent = computed(() => {
    // 根据语言返回协议内容，原代码有大量 html，此处简化，实际应保留
    return `<div>协议内容...</div>`
})

// 越南用户提示
const showVietnamNotice = () => {
    if (country.value === 'VN') {
        vietnamPopupRef.value?.open()
    }
}

// 监听账户切换（watch value 原代码，改为 watch loginValue）
watch(() => loginValue.value, (newVal) => {
    if (newVal) {
        step2.value = true
        showTable()
    }
})
watch(() => params.amount, (newVal) => {
    if (newVal && channelData.value.rate) {
        params.amount1 = (newVal * channelData.value.rate).toFixed(2)
    }
})
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.agree2 = false
        params.agree3 = false
        params.agree5 = false
        params.agree6 = false
    }
})
watch(() => params.agree5, (newVal) => {
    if (newVal) {
        params.agree2 = false
        params.agree3 = false
        params.agree4 = false
        params.agree6 = false
    }
})
watch(() => params.agree6, (newVal) => {
    if (newVal) {
        params.agree2 = false
        params.agree3 = 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) {
                uni.showModal({
                    title: t('Msg.SystemPrompt'),
                    content: tips,
                    showCancel: true,
                    confirmText: t('surplusList.item12'),
                    cancelText: t('Home.msg.item3'),
                    success: (modalRes) => {
                        if (modalRes.confirm) {
                            uni.showModal({
                                title: t('Msg.SystemPrompt'),
                                content: t('surplusList.item13'),
                                showCancel: true,
                                confirmText: t('Btn.Confirm'),
                                cancelText: t('Btn.Cancel'),
                                success: async (res) => {
                                    if (res.confirm) {
                                        const cancelRes = await activityApi.ActivityGiveCancel({ login: loginValue.value })
                                        if (cancelRes.code == Code.StatusOK) {
                                            uni.showToast({ title: cancelRes.msg || t('Msg.Success'), icon: 'success' })
                                        } else {
                                            uni.showToast({ title: cancelRes.msg, icon: 'none' })
                                        }
                                    } else {
                                        params.agree6 = false
                                    }
                                }
                            })
                        } else {
                            params.agree6 = false
                        }
                    }
                })
            } else if (giveLoginJoin.value?.activityCategory == 2) {
                uni.showModal({
                    title: t('Msg.SystemPrompt'),
                    content: tips,
                    showCancel: true,
                    confirmText: '跳转',
                    cancelText: t('Btn.Cancel'),
                    success: (modalRes) => {
                        if (modalRes.confirm) {
                            uni.showModal({
                                title: t('Msg.SystemPrompt'),
                                content: '是否跳转到对应活动取消',
                                showCancel: true,
                                confirmText: t('Btn.Confirm'),
                                cancelText: t('Btn.Cancel'),
                                success: (res) => {
                                    if (res.confirm) {
                                        uni.navigateTo({ url: '/pages/customer/monthly/list' })
                                    } else {
                                        params.agree6 = false
                                    }
                                }
                            })
                        } else {
                            params.agree6 = false
                        }
                    }
                })
            } else {
                uni.showModal({
                    title: t('Msg.SystemPrompt'),
                    content: tips,
                    showCancel: true,
                    confirmText: t('Btn.Confirm'),
                    cancelText: t('Btn.Cancel')
                })
            }
        }
    }
})

// 生命周期
onLoad(() => {
    getDateList()
    getDepositList()
    is20Open()
    isNewYear24Open()
    ActivityRequiteInfo()
    Activity24nianzhongInfo()
    Activity24nianzhongTwoInfo()
    showVietnamNotice()
})
</script>

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

.custom-deposit {

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

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

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

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

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

                    position: relative;
                    padding-left: 20px;

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

            .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: var(--color-navy-900);
        color: #fff;
        border-radius: px2rpx(12);
        font-size: px2rpx(16);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        margin-top: px2rpx(30);
        transition: all 0.2s;

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

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

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

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

            &:active {
                opacity: 0.7;
            }
        }
    }

    .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(--color-navy-900);
                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);
        padding: px2rpx(16);
        margin-bottom: px2rpx(20);

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

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

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

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

    .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 */

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

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

            .uni-easyinput__content-input {
                height: px2rpx(44) !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(--color-navy-900);
            display: block;
        }

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

        .popup-form {
            background: var(--color-zinc-50);
            border-radius: px2rpx(12);
            padding: px2rpx(16);
            margin-bottom: px2rpx(24);
            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(--color-navy-900);
                    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: var(--color-navy-900);
                    color: #fff;
                }

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

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

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

                &.iconchenggong {
                    color: #52c41a;
                }

                &.iconjingshi {
                    color: #faad14;
                }

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

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

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