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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <uni-loading v-if="loading" />
        <view class="container" v-else>
            <view class="row">
                <view class="col-12">
                    <view class="border-0 card-header">
                        <view class="d-flex flex-wrap gap-3 align-items-center justify-content-between mb-3">
                            <h3 class="mb-0">{{ title }}</h3>
                        </view>
                    </view>
                </view>
                <view class="col-lg-12">
                    <view class="clearfix">
                        <view class="card">
                            <view class="card-header">
                                <view class="nav nav-underline card-header-tabs">

                                    <view class="nav-item" role="presentation" v-for="item in tabsConfig"
                                        :key="item.value" @click="activeTab = item.value">
                                        <view class="nav-link cursor-pointer"
                                            :class="{ 'active': item.value === activeTab }">{{
                                                item.text }}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="card-body">
                                <view class="tab-content">
                                    <view class="tab-pane fade show active" id="home" role="tabpanel"
                                        aria-labelledby="home-tab" tabindex="0">
                                        <uni-forms ref="formRef" :model="form" :rules="rules" label-width="300"
                                            label-position="top" validate-trigger="submit">
                                            <view class="row">
                                                <view class="col-lg-12">
                                                    <h5 class="bg-dark mb-4 p-2 text-white"><span
                                                            v-t="'Label.AgentNumber'"></span> ：<span
                                                            class="text-danger">{{
                                                                ibInfo.ibNo }}</span> <span
                                                            v-t="'Label.CommissionBalance'"></span>
                                                        <span>：</span><span class="text-danger">${{ balanceInt
                                                            }}.{{ balanceDecimal }}</span>
                                                    </h5>
                                                </view>




                                                <view class="col-lg-6">
                                                    <h5 class="mb-3">{{ toLabel }}</h5>

                                                    <uni-forms-item name="to" :error-message="deposittoErrorMessage"
                                                        class="mb-3">
                                                        <!-- <uni-forms-item name="to" :error-message="deposittoErrorMessage" class="form-select mb-3"></uni-forms-item> -->
                                                        <cwg-combox v-model:value="form.to" :clearable="false"
                                                            :options="depositDisplayList"
                                                            :placeholder="t('placeholder.choose')" />
                                                    </uni-forms-item>
                                                </view>
                                                <view class="col-lg-6 mb-3">
                                                    <h5 class="mb-3" v-t="'Custom.Transfer.Amount'"></h5>
                                                    <view class="form-col amount-box">
                                                        <!-- 转账金额 -->
                                                        <uni-forms-item 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 btn-danger waves-effect waves-light"
                                                            v-t="'State.All'" @click="setAllAmount">
                                                        </view>
                                                    </view>
                                                </view>
                                                <template v-if="activeTab != 3">
                                                    <!-- 20%赠金-年中赠金 -->
                                                    <view class="col-lg-12 mb-3" v-if="tableData4TwoFlag">
                                                        <uni-forms-item class="agree">
                                                            <checkbox-group :value="form.agree5 ? ['1'] : []"
                                                                @change="onAgree5Change">
                                                                <label class="checkbox">
                                                                    <checkbox value="1" :checked="form.agree5" />
                                                                    <text>{{
                                                                        t('news_add_field1.activitiesNZTwo.itemDeposit1')
                                                                    }}</text>

                                                                    <p
                                                                        style="margin-top: 10px;line-height: 1.5; font-size: 14px">
                                                                        <text class="crm-cursor"
                                                                            @click.stop="dialogCheckTip = true">{{
                                                                                t('Custom.Withdraw.Des') }}</text>
                                                                        <text>{{
                                                                            t('news_add_field1.activitiesNZTwo.itemDeposit2')
                                                                        }}</text>
                                                                        <text class="clause crm-cursor"
                                                                            style="text-decoration: underline;"
                                                                            @click.stop="dialogClauseNZTwo = true">{{
                                                                                t('news_add_field1.activitiesNZTwo.itemDeposit3')
                                                                            }}</text>
                                                                        <text>{{
                                                                            t('news_add_field1.activitiesNZTwo.itemDeposit4')
                                                                        }}</text>
                                                                    </p>

                                                                </label>
                                                            </checkbox-group>
                                                        </uni-forms-item>
                                                    </view>

                                                    <!-- 赠送活动 -->
                                                    <view class="col-lg-12 mb-3" v-if="tableDataNewListFlag">
                                                        <view class="form-col-full">
                                                            <uni-forms-item name="agree6">
                                                                <checkbox-group :value="form.agree6 ? ['1'] : []"
                                                                    @change="onAgree6Change">
                                                                    <label class="checkbox">
                                                                        <checkbox value="1" :checked="form.agree6" />
                                                                        <text @click.stop="dialogClauseNewList = true"
                                                                            style="text-decoration: underline;">{{
                                                                                tableDataNewList.title }}</text>
                                                                        <view
                                                                            style="margin-top: 10px; line-height: 1.5; font-size: 14px">
                                                                            <text> {{
                                                                                t('news_add_field1.activitiesNewList.item1')
                                                                            }}{{
                                                                                    t('news_add_field1.activitiesNewList.item2')
                                                                                }}</text>
                                                                        </view>

                                                                    </label>
                                                                </checkbox-group>
                                                            </uni-forms-item>
                                                        </view>
                                                    </view>
                                                </template>



                                                <view @click="toTransfer"
                                                    class="btn btn-danger waves-effect waves-light"><i
                                                        class="fi fi-rs-check"></i>
                                                    {{ t('Btn.Submit') }}
                                                </view>
                                            </view>
                                        </uni-forms>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </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" :showFooters="false" />
        <!-- 不参加活动弹出框 -->
        <cwg-dont-active-popup v-model:visible="dialogDontActive" :showFooters="true" @confirm="tosubmitConfirm" />
        <!-- 功能关闭弹出 -->
        <cwg-function-disabled-popup v-model:visible="InfoStatus5" :showFooters="true" @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" />
        <cwg-confirm-popup />
    </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 Config from '@/config/index'
import useUserStore from '@/stores/use-user-store'
import BonusAgreementPopup from './components/BonusAgreementPopup.vue'
import { useFilters } from '@/composables/useFilters'
const { numberFormat } = useFilters()
const userStore = useUserStore()
import { isAfterJuly28 } from '@/utils/dateUtils'
const ibInfo = computed(() => {
    return userStore?.userInfo?.ibInfo || {}
})
const { Code } = Config
const { t, locale } = useI18n()
const activeTab = ref(1)
const tabsConfig = computed(() => [
    { text: t('Ib.Transfer.CommissionTransfer'), value: 1, type: 'commission' },
    { text: t('Ib.Transfer.CommissionIssue'), value: 2, type: 'commissionIssue' },
    { text: t('Ib.Transfer.IbAccountTransfer'), value: 3, type: 'ib' },
])
const title = computed(() => tabsConfig.value.find(item => item.value == activeTab.value)?.text || '')

const toLabel = computed(() => activeTab.value == '1' || activeTab.value == '2' ? t('Label.IntoAccount') : t('Ib.Transfer.IntoAgentAccount'))

// 获取全局实例（用于访问 Session、$pigeon 等）
const { proxy } = getCurrentInstance()
const $pigeon = proxy?.$pigeon
import { useConfirm } from '@/hooks/useConfirm'
const confirm = useConfirm()
// 响应式数据
const loginValue = ref('')
const flag = ref(false)
const RES = ref('') // 弹窗响应信息
const giveLoginJoin = ref(null)
const step2 = ref(false)
const amountLimits = reactive({
    minAmount: '',
    maxAmount: '',
})
const form = reactive({
    currency: 'USD',
    depositLogin: null,
    to: null,
    amount: '',
    agree5: false,
    agree6: false,
})
const resetForm = async () => {
    await nextTick();
    formRef.value?.clearValidate();   // 再次清除可能因数据重置产生的新错误
    form.customBankCode = ""
    form.depositLogin = ""
    form.withdrawLogin = ""
    form.to = ""
    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 depositErrorMessage = ref('')
const depositLogin1ErrorMessage = ref('')
const amountErrorMessage = ref('')

// 表单验证规则
const rules = {
    withdrawLogin: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            },
        ],
    },
    to: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.select.empty')
            },
        ],
    },
    amount: {
        rules: [
            {
                required: true,
                errorMessage: t('vaildate.amount.format'),
            },
            {
                validateFunction: (rule, value, data, callback) => {
                    value = Number(value)
                    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'))
                    } else if (value > balance.value) {
                        callback(t('Label.LoginBalance') + '：$' + balance.value);
                    }
                    return true
                }
            },
        ],
    },
    agree5: {
        rules: [
            {
                validateFunction: (rule, value, data, callback) => {
                    if (form.agree5) {
                        return true;
                    } else {
                        callback(t('vaildate.agree.empty'));
                        return false;
                    }
                },
                trigger: 'change',
            },
        ],
    },
}
const onAgree5Change = (e) => {
    form.agree5 = e.detail.value.length > 0
}
const onAgree6Change = (e) => {
    form.agree6 = e.detail.value.length > 0
}
const balanceInt = computed(() => {
    return numberFormat(balance.value || 0, true)[0]
})
const balanceDecimal = computed(() => {
    return numberFormat(balance.value || 0, true)[1] || '00'
})
const balance = ref(0)
//获取基础信息
const getDateList = async () => {
    let res = await ibApi.IbData({});
    if (res.code == Code.StatusOK) {
        if (res.data != null) {
            balance.value = res.data.balance
        }
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
const setAllAmount = () => {
    form.amount = balance.value
    validateAmount()
}
function validateAmount() {
    const amount = Number(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
    }
    if (amount > balance.value) {
        amountErrorMessage.value = t('Label.LoginBalance') + '：$' + balance.value
        return false
    }
    amountErrorMessage.value = ''
    return true
}

// 模板引用
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'),
        '3': isAfterJuly28() ? '--' : t('AccountType.AgencyAccount'),
        '5': t('AccountType.SpeedAccount'),
        '6': t('AccountType.SpeedAccount'),
        '7': t('AccountType.StandardAccount'),
        '8': t('AccountType.CentAccount')
    }
    return typeMap[type] || ''
}
// 转入账户列表
const depositDisplayList = computed(() => {
    if (activeTab.value != 3) {
        return toInfo.value.map(item => ({
            text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${item.balance}`,
            value: item.login,
            disabled: item.status
        }))
    } else {
        return agentInfo.value.map(item => ({
            text: `${item.ibNo} - ${item.name}`,
            value: item.id
        }))
    }
})

const fromInfo = ref('')
const toInfo = ref([])
const agentInfo = ref([])
const loading = ref(false)

//转出账户信息
const ransferInfo = async function () {
    loading.value = true
    let res = await ibApi.agentBalanceTransferFrom({});
    if (res.code == Code.StatusOK) {
        fromInfo.value =
            res.data.ibNo +
            " - " +
            t("Custom.Deposit.AvailableBalance") +
            ": $" +
            (res.data.balance ? res.data.balance : 0);
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
    loading.value = false
}
//转入账户信息
const ransferToInfo = async function () {
    let res;
    // 佣金内转使用新接口 /account/dropdown
    if (activeTab.value == 1) {
        res = await ibApi.CustomDropdown({ platform: "" });
    } else {
        // 佣金下发和其他情况使用原接口
        res = await ibApi.agentTransferToList({});
    }
    if (res.code == Code.StatusOK) {
        toInfo.value = res.data || [];
        toInfo.value.forEach((item) => {
            if (item.closeFunctions && item.closeFunctions.length > 0) {
                const targetValues = ["7", "5", "9"];
                const hasTargetValue = item.closeFunctions.some(func => targetValues.includes(func));
                if (hasTargetValue) {
                    item.status = true;
                }
            }
        })

    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}
//获取代理账户信息
const getAgentInfo = async function () {
    let res = await ibApi.ibTreeForTransfer({});
    if (res.code == Code.StatusOK) {
        agentInfo.value = res.data || [];
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
    }
}

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 = ''
    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
        let api
        if (activeTab.value != 3) {
            api = ibApi.agentBalanceTransfer
        } else {
            api = ibApi.agentBalanceCommissionAdd
        }
        const res = await api({ ...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 || t('Msg.Fail')
        dialogCheck.value = true
        dialogVisible.value = false
    } finally {
        submitting.value = false
        flag.value = false
        resetForm()
        if (dialogCheckWait.value) dialogCheckWait.value = false
        getDateList()
        uni.$emit('updatePayment')
    }
}

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.to,
    })
    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.to,
    })
    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.to,
    })
    if (res.code == Code.StatusOK) {
        giveLoginJoin.value = res.data
    } else {
        uni.showToast({ title: res.msg, icon: 'none' })
        giveLoginJoin.value = ''
    }
}

// 监听 activeTab 变化
watch(activeTab, (newVal) => {
    if (newVal) {
        console.log(newVal, 1212);
        if (newVal == 3) {
            getAgentInfo()
        } else {
            ransferToInfo()
        }
        resetForm()
    }
})
// 
watch(loginValue, (newVal) => {
    if (newVal) {
        step2.value = true
        form.withdrawLogin = newVal
    }
})
watch(() => form.to, (newVal) => {
    if (activeTab.value == 3) {
        getAgentInfo()
    } else {
        togetActivity()
    }
})
// 监听 agree6 变化
watch(
    () => form.agree6,
    async (newVal) => {
        if (newVal && giveLoginJoin.value?.flag === false) {
            let tips = "";
            if (giveLoginJoin.value.promptType == 1) {
                tips = t("surplusList.item10");
            } else {
                tips = t("surplusList.item11");
            }
            // 根据 activityCategory 显示不同的操作按钮
            if (giveLoginJoin.value.activityCategory == 1) {
                try {
                    // 第一次弹窗：取消活动
                    await confirm({
                        title: t("Msg.SystemPrompt"),
                        content: tips,
                        confirmText: t("surplusList.item12"),
                        cancelText: t("Home.msg.item3"),
                    });

                    await new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true);
                        }, 300);
                    });
                    await confirm({
                        title: t("Msg.SystemPrompt"),
                        content: t("surplusList.item13"),
                        confirmText: t("Btn.Confirm"),
                        cancelText: t("Btn.Cancel"),
                    });
                    // 调用取消接口
                    const res = await activityApi.ActivityGiveCancel({
                        login: loginValue.value,
                    });

                    if (res.code == Code.StatusOK) {
                        MessageOK(res.msg || t("Msg.Success"));
                    } else {
                        MessageError(res.msg);
                    }
                } catch (error) {
                    // 任意一步取消 → 取消勾选
                    form.agree6 = false;
                }
            } else if (giveLoginJoin.value.activityCategory == 2) {
                try {
                    // 第一次弹窗：跳转
                    await confirm({
                        title: t("Msg.SystemPrompt"),
                        content: tips,
                        confirmText: "跳转",
                        cancelText: t("Btn.Cancel"),
                        showCancelButton: false,
                    });
                    await new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(true);
                        }, 300);
                    });
                    await confirm({
                        title: t("Msg.SystemPrompt"),
                        content: "是否跳转到对应活动取消",
                        confirmText: t("Btn.Confirm"),
                        cancelText: t("Btn.Cancel"),
                    });

                    // 跳转到月盈活动
                    uni.navigateTo({
                        path: "/pages/activity/monthly-list",
                    });
                } catch (error) {
                    // 取消 → 取消勾选
                    form.agree6 = false;
                }
            } else {
                // 默认情况
                try {
                    await confirm({
                        title: t("Msg.SystemPrompt"),
                        content: tips,
                        confirmText: t("Btn.Confirm"),
                        cancelText: t("Btn.Cancel"),
                    });
                } catch (error) {
                    form.agree6 = false;
                }
            }
        }
    }
);
onMounted(() => {
    if (getInfoStatus5.value) {
        InfoStatus5.value = true
    }
    getDateList()
    ransferInfo();
    ransferToInfo();
    // Activity24nianzhongTwoInfo()
})

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

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

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

    .amount-input {
        flex: 1;
    }

    .btn {
        margin-bottom: px2rpx(20);
    }
}

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

    .main-content {
        text-align: left;

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

            .b-card {
                border: 1px solid var(--bs-border-color);
                background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
                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(--bs-heading-color);
                        position: relative;
                        padding-left: 20px;

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

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

                    .balance-kg {
                        width: px2rpx(20);
                    }

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



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

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

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

    .picker-select {
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        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: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }

    .disabled-input {
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        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: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        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);
        }
    }
}

// 动画
@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);
        }


    }
}
</style>