gypsy-crm-frontend-vu/pages/ib/agent-transfer.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Home.page_ib.item9')" />
        <uni-loading v-if="loading" />
        <view id="custom_IbTransfer" class="transfer-page" v-else>
            <view class="main-content">
                <!-- 步骤1：选择转出账户 -->
                <view class="box box-step1">
                    <view class="b-card">
                        <view class="card-top">
                            <view class="card-row">
                                <view class="tit">
                                    <text class="iconfont icon-caret-right"></text>
                                    <span>{{ t('Custom.Transfer.Title1') }}</span>
                                </view>
                            </view>
                            <view class="card-row">
                                <cwg-combox v-model:value="loginValue" :clearable="false" :options="withdrawDisplayList"
                                    :placeholder="t('placeholder.choose')" />
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 步骤2：转账表单 -->
                <view class="box box-step2" v-if="step2">
                    <view class="b-card">
                        <view class="card-top">
                            <view class="card-row card-tit">
                                <view class="title-wrapper">
                                    <view class="tit">
                                        <text class="iconfont icon-caret-right"></text>
                                        <span>{{ t('Custom.Transfer.Title2') }}</span>
                                    </view>
                                </view>
                            </view>

                            <uni-forms ref="formRef" :model="form" :rules="rules" label-width="300" label-position="top"
                                validate-trigger="submit">

                                <view class="form-row">
                                    <view class="form-col">
                                        <!-- 转入账户 -->
                                        <uni-forms-item :label="t('Custom.Transfer.IntoAccount')" name="depositLogin">
                                            <cwg-combox v-model:value="form.depositLogin" :clearable="false"
                                                :options="depositDisplayList" :placeholder="t('placeholder.choose')" />
                                        </uni-forms-item>
                                    </view>

                                </view>
                                <view class="form-row">
                                    <view class="form-col">
                                        <!-- 确认转入账户 -->
                                        <uni-forms-item :label="t('Custom.Transfer.ConfirmIntoAccount')"
                                            name="depositLogin1">
                                            <cwg-combox v-model:value="form.depositLogin1" :clearable="false"
                                                :options="depositDisplayList" :placeholder="t('placeholder.choose')" />
                                        </uni-forms-item>
                                    </view>

                                </view>

                                <view class="form-row">
                                    <view class="form-col amount-box">
                                        <!-- 转账金额 -->
                                        <uni-forms-item :label="t('Custom.Transfer.Amount')" name="amount"
                                            :error-message="amountErrorMessage" class="amount-input">
                                            <uni-easyinput v-model="form.amount" :placeholder="t('placeholder.input')"
                                                @blur="validateAmount" />
                                        </uni-forms-item>
                                        <view class="btn" v-t="'State.All'" @click="setAllAmount"></view>
                                    </view>
                                </view>

                                <!-- 20%赠金-年中赠金 -->
                                <view class="form-row" v-if="tableData4TwoFlag">
                                    <view class="form-col-full">
                                        <uni-forms-item class="agree">
                                            <view class="agree-content">
                                                <checkbox :checked="form.agree5" @click="form.agree5 = !form.agree5" />
                                                <view class="agree-text">
                                                    <view class="agree-title">{{
                                                        t('news_add_field1.activitiesNZTwo.itemDeposit1') }}</view>
                                                </view>
                                            </view>
                                        </uni-forms-item>
                                        <view class="agree-detail">
                                            <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit2') }}</text>
                                            <text class="clause crm-cursor" style="text-decoration: underline;"
                                                @click="dialogClauseNZTwo = true">{{
                                                    t('news_add_field1.activitiesNZTwo.itemDeposit3') }}</text>
                                            <text>{{ t('news_add_field1.activitiesNZTwo.itemDeposit4') }}</text>
                                        </view>
                                    </view>
                                </view>

                                <!-- 赠送活动 -->
                                <view class="form-row" v-if="tableDataNewListFlag">
                                    <view class="form-col-full">
                                        <uni-forms-item class="agree">
                                            <view class="agree-content">
                                                <checkbox :checked="form.agree6" @click="form.agree6 = !form.agree6" />
                                                <view class="agree-text">
                                                    <view class="agree-title">{{ tableDataNewList.title }}</view>
                                                </view>
                                            </view>
                                        </uni-forms-item>
                                        <view class="agree-detail">
                                            <text>{{ t('news_add_field1.activitiesNewList.item1') }}</text>
                                            <text class="clause" @click="dialogClauseNewList = true">{{
                                                tableDataNewList.title }}</text>
                                            <text>{{ t('news_add_field1.activitiesNewList.item2') }}</text>
                                        </view>
                                    </view>
                                </view>

                                <view class="form-row">
                                    <view class="form-col-full">
                                        <uni-forms-item>
                                            <view class="tips">
                                                <view class="title">{{ t('Custom.Transfer.Tips') }}</view>
                                                <view>{{ t('Custom.Transfer.Tips1') }}</view>
                                                <view>{{ t('Custom.Transfer.Tips5') }}</view>
                                                <view>{{ t('Custom.Transfer.Tips3') }}</view>
                                                <view>{{ t('Custom.Transfer.Tips4') }}</view>
                                            </view>
                                        </uni-forms-item>
                                    </view>
                                </view>
                                <view class="form-row">
                                    <button class="s-btn reselect" type="primary" @click="toTransfer">{{ locale === 'es'
                                        ?
                                        'Enviar solicitud' : t('Btn.Submit') }}</button>
                                </view>
                            </uni-forms>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 失败弹窗 -->
            <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" type="center" :mask-click="false" :showFooters="false" />

            <!-- 不参加活动弹出框 -->
            <cwg-dont-active-popup v-model:visible="dialogDontActive" :showFooters="true" @confirm="tosubmitConfirm" />

            <!-- 功能关闭弹出 -->
            <cwg-function-disabled-popup v-model:visible="InfoStatus5" :showFooters="false" @confirm="toHome" />

            <!-- 赠金协议20年中 -->
            <BonusAgreementPopup v-model:visible="dialogClauseNZTwo" :title="t('news_add_field1.activitiesNZTwo.item6')"
                type="nzTwo" :tableData4Two="tableData4Two" />
            <!-- 赠送活动协议 -->
            <BonusAgreementPopup v-model:visible="dialogClauseNewList" :title="tableDataNewList.title"
                :content="tableDataNewList.content" type="newList" />
        </view>
    </cwg-page-wrapper>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { onLoad } from '@dcloudio/uni-app'
import { getCurrentInstance } from 'vue'
import { ibApi } from '@/service/ib'
import { activityApi } from '@/service/activity'
import { financialApi } from '@/service/financial'
import Config from '@/config/index'
import useUserStore from '@/stores/use-user-store'
import BonusAgreementPopup from './components/BonusAgreementPopup.vue'

const userStore = useUserStore()
const ibInfo = computed(() => {
    return userStore?.userInfo?.ibInfo || {}
})

const { Code } = Config
const { t, locale } = useI18n()

// 获取全局实例（用于访问 Session、$pigeon 等）
const { proxy } = getCurrentInstance()
const $pigeon = proxy?.$pigeon

// 响应式数据
const loginValue = ref(null)
const flag = ref(false)
const RES = ref('') // 弹窗响应信息
const giveLoginJoin = ref('')
const loginOptions = ref([])
const toOptions = ref([])
const step2 = ref(false)
const amountLimits = reactive({
    minAmount: '',
    maxAmount: '',
})
const form = reactive({
    currency: 'USD',
    depositLogin: null,
    depositLogin1: null,
    withdrawLogin: null,
    amount: '',
    agree5: false,
    agree6: false,
})

const resetForm = async () => {
    await nextTick();
    formRef.value?.clearValidate();   // 再次清除可能因数据重置产生的新错误
    form.customBankCode = ""
    form.depositLogin = null
    form.depositLogin1 = null
    form.withdrawLogin = null
    form.amount = ""
    form.agree5 = false
    form.agree6 = false
    amountErrorMessage.value = ""
    submitting.value = false
    flag.value = false
}

const dialogSuccess = computed(() => dialogCheck.value && dialogVisible.value)
const dialogError = computed(() => dialogCheck.value && !dialogVisible.value)
const dialogCheck = ref(false)
const dialogVisible = ref(false)
const dialogCheckWait = ref(false)
const InfoStatus5 = ref(false)
const dialogClauseNZTwo = ref(false)
const tableData4TwoFlag = ref(false)
const tableData4Two = ref({})
const dialogClauseNewList = ref(false)
const tableDataNewListFlag = ref(false)
const tableDataNewList = ref({})
const dialogDontActive = ref(false)
const submitting = ref(false)

// 错误信息
const amountErrorMessage = ref('')

// 表单验证规则
const rules = {
    withdrawLogin: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            },
        ],
    },
    depositLogin: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            },
        ],
    },
    depositLogin1: {
        rules: [
            {
                required: true,
                errorMessage: t('Custom.Transfer.ConfirmIntoAccount1')
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (value !== form.depositLogin) {
                        callback(t('Custom.Transfer.ConfirmIntoAccount1'))
                    }
                    return true
                }
            },
        ],
    },
    amount: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.amount.format'),
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (!value) {
                        callback(t('vaildate.amount.format'))
                    } else if (
                        amountLimits.minAmount &&
                        amountLimits.maxAmount &&
                        (parseFloat(amountLimits.minAmount) > parseFloat(value) ||
                            parseFloat(amountLimits.maxAmount) < parseFloat(value))
                    ) {
                        callback(t('vaildate.amount.amount') +
                            amountLimits.minAmount +
                            '-' +
                            amountLimits.maxAmount)
                    } else if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)) {
                        callback(t('vaildate.amount.format'))
                    }
                    return true
                }
            },
        ],
    }
}

function validateAmount() {
    const amount = form.amount
    if (!amount) {
        amountErrorMessage.value = t('vaildate.amount.format')
        return false
    }
    const numValue = parseFloat(amount)
    if (isNaN(numValue)) {
        amountErrorMessage.value = t('vaildate.amount.format')
        return false
    }
    if (amountLimits.minAmount && numValue < parseFloat(amountLimits.minAmount)) {
        amountErrorMessage.value = t('vaildate.amount.amount') + amountLimits.minAmount + '-' + amountLimits.maxAmount
        return false
    }
    if (amountLimits.maxAmount && numValue > parseFloat(amountLimits.maxAmount)) {
        amountErrorMessage.value = t('vaildate.amount.amount') + amountLimits.minAmount + '-' + amountLimits.maxAmount
        return false
    }
    if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(amount)) {
        amountErrorMessage.value = t('vaildate.amount.format')
        return false
    }
    amountErrorMessage.value = ''
    return true
}
const setAllAmount = () => {
    const found = loginOptions.value.find(opt => opt.login === Number(loginValue.value))
    form.amount = found.balance
    validateAmount()
}

// 模板引用
const formRef = ref(null)

// 计算属性
const getInfoStatus5 = computed(() => {
    if (ibInfo.value?.closeFunctions) {
        return ibInfo.value.closeFunctions.indexOf('5') !== -1
    }
    return false
})

// 单位类型
function groupCurrency(type) {
    const map = { GBP: ': £', USD: ': $', EUR: ': €', USC: ': ￠' }
    return map[type] || ': $'
}

function groupCurrency1(type) {
    const map = { GBP: '£', USD: '$', EUR: '€', USC: '￠' }
    return map[type] || '$'
}

// 账户类型
function groupTypeName(type) {
    const typeMap = {
        '1': t('AccountType.ClassicAccount'),
        '2': t('AccountType.SeniorAccount'),
        '5': t('AccountType.SpeedAccount'),
        '6': t('AccountType.SpeedAccount'),
        '7': t('AccountType.StandardAccount'),
        '8': t('AccountType.CentAccount')
    }
    return typeMap[type] || ''
}

// 转出账户列表
const withdrawDisplayList = computed(() => {
    return loginOptions.value.map(item => ({
        text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
        value: item.login,
        disable: item.closeFunctions?.indexOf('3') != -1 || item.closeFunctions?.indexOf('5') != -1
    }))
})

// 转入账户列表
const depositDisplayList = computed(() => {
    return toOptions.value.map(item => ({
        text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
        value: item.login
    }))
})

const currencyOptions = ref([{ value: 'USD', text: 'USD' }])

function toHome() {
    uni.navigateTo({ url: '/pages/ib/index' })
    InfoStatus5.value = false
}

function closeDia() {
    resetForm()
    formRef.value?.resetFields?.()
    step2.value = false
    loginValue.value = null
    dialogCheck.value = false
    dialogVisible.value = false
    tableData4TwoFlag.value = false
    tableDataNewListFlag.value = false
}

// 内转
async function toTransfer() {
    if (submitting.value) return
    try {
        const valid = await formRef.value?.validate()
        if (!valid) {
            console.log('表单验证失败')
            return
        }
        openDontActive()
    } catch (error) {
        console.error('验证失败:', error)
    }
}

// 打开不参加活动弹窗
function openDontActive() {
    tosubmitConfirm()
}

function tosubmitConfirm() {
    dialogDontActive.value = false
    transferConfig()
}
async function transferConfig() {
    if (submitting.value) return
    submitting.value = true
    try {
        if (flag.value) {
            return
        }
        flag.value = true
        form.activityTwoPercentGive = form.agree5 ? 1 : 0
        form.activityGive = form.agree6 ? 1 : 0
        dialogCheckWait.value = true
        const res = await ibApi.agentTransferApply({ ...form })
        dialogCheckWait.value = false
        if (res.code == Code.StatusOK) {
            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) {
        console.error('转账失败:', error)
        RES.value = error.msg
        dialogCheck.value = true
        dialogVisible.value = false
    } finally {
        resetForm()
        if (dialogCheckWait.value) dialogCheckWait.value = false
    }
}
// 取消
function cancle() {
    step2.value = false
    loginValue.value = null
}
// 获取账户信息
async function getDateList() {
    const res = await ibApi.CustomDropdown({ platform: '' })
    if (res.code == Code.StatusOK) {
        loginOptions.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const loading = ref(false)
// 获取转入账户信息
async function getToDateList() {
    loading.value = true
    const res = await ibApi.accountCustomList({})
    if (res.code == Code.StatusOK) {
        toOptions.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
    loading.value = false
}

// 获取内转数额区间
async function getAmount() {
    const res = await financialApi.transferInfo({})
    if (res.code == Code.StatusOK) {
        Object.assign(amountLimits, res.data)
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}

async function Activity24nianzhongTwoInfo() {
    const res = await activityApi.Activity23nianzhongTwoInfo({})
    if (res.code == Code.StatusOK) {
        tableData4Two.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
// 活动相关方法
function togetActivity() {
    get23nianzhongTwoLogin()
    getActivityExtensionGiveLogin()
    getActivityExtensionGiveLoginJoin()
}

async function get23nianzhongTwoLogin() {
    const res = await activityApi.Activity23nianzhongTwoLogin({
        login: form.depositLogin,
    })
    if (res.code == Code.StatusOK) {
        tableData4Two.value = res.data
        if (tableData4Two.value.show == 1) {
            tableData4TwoFlag.value = true
        } else if (tableData4Two.value.show == 0) {
            tableData4TwoFlag.value = false
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}

async function getActivityExtensionGiveLogin() {
    const res = await activityApi.ActivityExtensionGiveLogin({
        login: form.depositLogin,
    })
    if (res.code == Code.StatusOK) {
        tableDataNewList.value = res.data
        if (tableDataNewList.value.show == 1) {
            tableDataNewListFlag.value = true
        } else if (tableDataNewList.value.show == 0) {
            tableDataNewListFlag.value = false
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}

async function getActivityExtensionGiveLoginJoin() {
    const res = await activityApi.ActivityExtensionGiveLoginJoin({
        login: form.depositLogin,
    })
    if (res.code == Code.StatusOK) {
        giveLoginJoin.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
        giveLoginJoin.value = ''
    }
}

// 监听 loginValue 变化
watch(loginValue, (newVal) => {
    if (newVal != null) {
        step2.value = true
        form.withdrawLogin = Number(newVal)
        form.depositLogin = null
        form.depositLogin1 = null
        form.amount = ''
        form.agree5 = false
        form.agree6 = false
        amountErrorMessage.value = ''
    }
})
// 监听 loginValue 变化
watch(form.depositLogin, (newVal) => {
    if (newVal) {
        togetActivity()
    }
})

// 监听 agree6 变化
watch(() => form.agree6, (newVal) => {
    if (newVal && giveLoginJoin.value?.flag === false) {
        let tips = ''
        if (giveLoginJoin.value.promptType == 1) {
            tips = t('surplusList.item10')
        } else {
            tips = t('surplusList.item11')
        }

        return
        // 活动相关方法，后续需要在调整
        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: loginValue.value,
                                })
                                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'))
                            }
                        },
                        () => {
                            form.agree6 = false
                        }
                    )
                },
                () => {
                    form.agree6 = false
                }
            )
        } else {
            $pigeon?.MessageConfirm(
                tips,
                t('Msg.SystemPrompt'),
                t('Btn.Confirm'),
                t('Btn.Cancel'),
                () => { },
                () => {
                    form.agree6 = false
                }
            )
        }
    }
})
onMounted(() => {
    if (getInfoStatus5.value) {
        InfoStatus5.value = true
    }

    getDateList()
    getToDateList()
    getAmount()
    // Activity24nianzhongTwoInfo()
})

onLoad((options) => {
    if (options?.login) {
        loginValue.value = Number(options.login)
        step2.value = true
        form.withdrawLogin = Number(options.login)
    }
})
</script>

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

.transfer-page {
    width: 100%;
    padding-bottom: px2rpx(20);

    .main-content {
        text-align: left;

        .box {
            padding-top: px2rpx(5);
            color: #303133;

            .b-card {
                background-color: #fff;
                margin-bottom: px2rpx(10);
                border-radius: px2rpx(6);
                box-shadow: 0 px2rpx(1) px2rpx(6) 0 rgba(0, 0, 0, 0.05);

                &:hover {
                    box-shadow: 0 px2rpx(2) px2rpx(8) 0 rgba(0, 0, 0, 0.1);
                }

                .card-top {
                    padding: px2rpx(15) px2rpx(20);
                    box-sizing: border-box;

                    .card-row {
                        margin-bottom: px2rpx(12);

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

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

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

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

                    .title-wrapper {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }
        }

        .box-step2 {
            .form-row {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: px2rpx(12);
                gap: px2rpx(12);

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

                .form-col {
                    flex: 1;
                    min-width: px2rpx(140);

                    @media screen and (max-width: 991px) {
                        flex: 0 0 100%;
                        width: 100%;
                    }
                }

                .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);
                        color: var(--color-zinc-600);
                        margin-bottom: px2rpx(20);
                        height: px2rpx(35);
                        background-color: #cf1322;
                        color: #fff;
                        border-radius: px2rpx(4);
                        font-weight: 600;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: none;
                        padding: 0 px2rpx(20);
                        cursor: pointer;
                        margin-top: px2rpx(34);
                    }
                }

                .form-col-full {
                    width: 100%;
                    padding: 0 px2rpx(5);
                }
            }

            .tips {
                line-height: 1.8;
                font-size: px2rpx(12);
                color: #909399;
                background-color: #f9f9f9;
                padding: px2rpx(12);
                border-radius: px2rpx(4);
                border-left: px2rpx(2) solid #cf1322;

                .title {
                    font-weight: 600;
                    margin-bottom: px2rpx(6);
                    color: #606266;
                }
            }
        }
    }

    .picker-select {
        background-color: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        color: #606266;
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;

        &:hover {
            border-color: #409eff;
        }

        &.picker-disabled {
            background-color: #f5f7fa;
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }

    .disabled-input {
        background-color: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        color: #606266;
        width: 100%;
        box-sizing: border-box;
    }

    .m-input {
        background-color: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        width: 100%;
        box-sizing: border-box;

        &:focus {
            border-color: #409eff;
            outline: none;
            box-shadow: 0 0 0 px2rpx(1) rgba(64, 158, 255, 0.2);
        }
    }

    .popup-content {
        padding: px2rpx(30) px2rpx(20);
        text-align: center;
        min-width: px2rpx(250);
        max-width: 80%;
        margin: 0 auto;

        @media screen and (max-width: 991px) {
            min-width: 80%;
            max-width: 90%;
            margin: 0 px2rpx(10);
        }

        position: relative;

        .icon {
            .iconfont {
                font-size: px2rpx(60);
                display: block;
                margin: 0 auto;
            }

            .icon-chenggong {
                color: #67c23a;
            }

            .icon-jingshi {
                color: #f56c6c;
            }

            .icon-dengdai {
                color: #e6a23c;
            }
        }

        .des1 {
            font-weight: 600;
            font-size: px2rpx(16);
            margin: px2rpx(20) 0 px2rpx(15);
            color: #303133;
            line-height: 1.4;
            padding: 0 px2rpx(10);
        }

        .dialog-footer {
            display: flex;
            justify-content: center;
            gap: px2rpx(10);
            margin-top: px2rpx(10);

            @media (max-width: 750rpx) {
                flex-direction: column;
                align-items: center;
                gap: px2rpx(6);
            }

            button {
                min-width: px2rpx(90);
                padding: 0 px2rpx(12);
                border-radius: px2rpx(4);
                font-size: px2rpx(14);
                transition: all 0.3s ease;
                cursor: pointer;

                &[type="primary"] {
                    background-color: #409eff;
                    color: #fff;
                    border: none;

                    &:hover {
                        background-color: #66b1ff;
                        transform: translateY(px2rpx(-1));
                        box-shadow: 0 px2rpx(2) px2rpx(6) 0 rgba(64, 158, 255, 0.3);
                    }

                    &:active {
                        background-color: #3a8ee6;
                        transform: translateY(0);
                    }
                }

                &:not([type="primary"]) {
                    background-color: #fff;
                    border: 1px solid #dcdfe6;
                    color: #606266;

                    &:hover {
                        border-color: #409eff;
                        color: #409eff;
                        transform: translateY(px2rpx(-1));
                    }

                    &:active {
                        transform: translateY(0);
                    }
                }
            }
        }
    }

    .wait-popup {
        .des1 {
            margin-top: px2rpx(10);
        }

        .icon {
            .iconfont {
                animation: spin 1s linear infinite;
            }
        }
    }
}

// 动画
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(px2rpx(10));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

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

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

// 表单错误信息样式
.uni-forms-item__error {
    font-size: px2rpx(12);
    color: #f56c6c;
    margin-top: px2rpx(4);
}

// 适配不同屏幕尺寸（媒体查询中的 750rpx 保持不变）
@media (max-width: 750rpx) {
    .transfer-page {
        .main-content {
            padding: px2rpx(8);

            .box {
                .b-card {
                    .card-top {
                        padding: px2rpx(12) px2rpx(16);

                        .tit {
                            font-size: px2rpx(14);

                            .iconfont {
                                font-size: px2rpx(16);
                            }
                        }
                    }
                }
            }
        }

        .s-btn {
            font-size: px2rpx(14);
            padding: px2rpx(10) px2rpx(16);
        }

        .popup-content {
            padding: px2rpx(20) px2rpx(16);

            .icon {
                .iconfont {
                    font-size: px2rpx(50);
                }
            }

            .des1 {
                font-size: px2rpx(14);
                margin: px2rpx(15) 0 px2rpx(10);
            }

            .dialog-footer {
                button {
                    min-width: px2rpx(80);
                    font-size: px2rpx(13);
                }
            }
        }
    }
}
</style>