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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('Home.page_ib.item9')" />
        <view id="custom_IbTransfer" class="transfer-page">
            <view class="main-content">
                <!-- 步骤1：选择转出账户 -->
                <cwg-asset-tabs v-model="activeTab" :tabs="tabsConfig" />

                <!-- 步骤2：转账表单 -->
                <view class="box box-step2">
                    <view class="b-card">
                        <view class="card-top">
                            <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.TransferAccounts')">
                                            <uni-easyinput v-model="fromInfo" disabled
                                                :placeholder="t('placeholder.input')" @blur="validateAmount" />
                                        </uni-forms-item>
                                    </view>
                                    <view class="form-col">
                                        <!-- 转入账户 -->
                                        <uni-forms-item :label="toLabel" name="to"
                                            :error-message="deposittoErrorMessage">
                                            <cwg-combox v-model:value="form.to" :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.CurrencyType')" name="currency">
                                            <cwg-combox v-model:value="form.currency" :clearable="false"
                                                :options="currencyOptions" :placeholder="t('placeholder.choose')" />
                                        </uni-forms-item>
                                    </view>
                                    <view class="form-col">
                                        <!-- 转账金额 -->
                                        <uni-forms-item :label="t('Custom.Transfer.Amount')" name="amount"
                                            :error-message="amountErrorMessage">
                                            <uni-easyinput v-model="form.amount" :placeholder="t('placeholder.input')"
                                                @blur="validateAmount" />
                                        </uni-forms-item>
                                    </view>
                                </view>

                                <!-- 20%赠金-年中赠金 -->
                                <view class="form-row" v-if="tableData4TwoFlag">
                                    <view class="form-col-full">
                                        <uni-forms-item class="agree" name="agree5">
                                            <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" @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" name="agree6">
                                            <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">
                                        <button class="s-btn" type="primary" @click="toTransfer" :disabled="submitting">
                                            <span v-if="locale === 'es'">Enviar solicitud</span>
                                            <span v-else>{{ t('Btn.Submit') }}</span>
                                        </button>
                                    </view>
                                </view>
                            </uni-forms>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 失败弹窗 -->
            <cwg-error-popup v-model:visible="dialogError" @confirm="closeDia" />
            <!-- 成功弹窗 -->
            <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="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 } 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'

const userStore = useUserStore()
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 toLabel = computed(() => activeTab.value == '1' || activeTab.value == '2' ? t('Label.IntoAccount') : t('Ib.Transfer.IbAccountTransfer'))

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

// 响应式数据
const loginValue = ref('')
const flag = ref(false)
const responseMessage = ref('') // 弹窗响应信息
const giveLoginJoin = ref('')
const step2 = ref(false)
const amountLimits = reactive({
    minAmount: '',
    maxAmount: '',
})
const form = reactive({
    currency: 'USD',
    depositLogin: null,
    to: null,
    amount: '',
    agree5: false,
    agree6: 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) => {
                    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 formRef = ref(null)

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

// 转入账户列表
const depositDisplayList = computed(() => {
    if (activeTab.value != 3) {
        return toInfo.value.map(item => ({
            text: [item.login, item.platform, item.cId, item.balance, item.groupTypeName].filter(field => field !== null && field !== undefined && field !== '').join('-'),
            value: item.login
        }))
    } else {
        return agentInfo.value.map(item => ({
            text: `${item.ibNo} - ${item.name}`,
            value: item.id
        }))
    }
})

const fromInfo = ref('')
const toInfo = ref([])
const agentInfo = ref([])
//转出账户信息
const ransferInfo = async function () {
    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 {
        $pigeon.MessageError(res.msg);
    }
}
//转入账户信息
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 {
        $pigeon.MessageError(res.msg);
    }
}
//获取代理账户信息
const getAgentInfo = async function () {
    let res = await ibApi.ibTreeForTransfer({});
    if (res.code == Code.StatusOK) {
        agentInfo.value = res.data || [];
    } else {
        $pigeon.MessageError(res.msg);
    }
}

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

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

function closeDia() {
    formRef.value?.resetFields?.()
    step2.value = false
    loginValue.value = ''
    dialogCheck.value = false
    dialogVisible.value = false
    tableData4TwoFlag.value = false
    tableDataNewListFlag.value = false
    form.to = ''
    form.amount = ''
    form.withdrawLogin = ''
    form.agree5 = false
    form.agree6 = 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 {
            responseMessage.value = res.msg
            dialogCheck.value = true
            dialogVisible.value = false
            flag.value = false
        }
    } catch (error) {
        console.error('转账失败:', error)
        responseMessage.value = error.msg || t('Msg.Fail')
        dialogCheck.value = true
        dialogVisible.value = false
    } finally {
        submitting.value = false
        flag.value = false
        if (dialogCheckWait.value) dialogCheckWait.value = false
    }
}

async function Activity24nianzhongTwoInfo() {
    const res = await activityApi.Activity23nianzhongTwoInfo({})
    if (res.code == Code.StatusOK) {
        tableData4Two.value = res.data
    } else {
        $pigeon?.MessageError(res.msg)
    }
}
// 活动相关方法
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 {
        $pigeon?.MessageError(res.msg)
    }
}

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 {
        $pigeon?.MessageError(res.msg)
    }
}

async function getActivityExtensionGiveLoginJoin() {
    const res = await activityApi.ActivityExtensionGiveLoginJoin({
        login: form.to,
    })
    if (res.code == Code.StatusOK) {
        giveLoginJoin.value = res.data
    } else {
        $pigeon?.MessageError(res.msg)
        giveLoginJoin.value = ''
    }
}

// 监听 activeTab 变化
watch(activeTab, (newVal) => {
    if (newVal) {
        console.log(newVal, 1212);
        if (newVal == 3) {
            getAgentInfo()
        } else {
            ransferToInfo()
        }
        form.to = ''
        form.amount = ''
    }
})
// 
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, (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 {
                                    $pigeon?.MessageError(res.msg)
                                }
                            } 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
        dialogDontActive.value = true
    }

    ransferInfo();
    ransferToInfo();
    // Activity24nianzhongTwoInfo()
})

onLoad((options) => {
    if (options?.login) {
        loginValue.value = options.login
        step2.value = true
        form.withdrawLogin = 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);
                        margin-bottom: px2rpx(12);
                        font-weight: 600;

                        .iconfont {
                            font-size: px2rpx(18);
                            margin-right: px2rpx(8);
                            color: #409eff;
                        }
                    }

                    .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: #909399;
                background-color: #f9f9f9;
                padding: px2rpx(12);
                border-radius: px2rpx(4);
                border-left: px2rpx(2) solid #409eff;

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

    .s-btn {
        width: 100%;
        padding: px2rpx(12) px2rpx(20);
        border-radius: px2rpx(4);
        margin: px2rpx(10) 0;
        background-color: #409eff;
        color: #fff;
        border: none;
        font-size: px2rpx(15);
        font-weight: 500;
        cursor: pointer;

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

        &[disabled] {
            opacity: 0.6;
            cursor: not-allowed;
        }
    }
}

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