xl-mobile/src/pages/addPaymentAccount/index.vue

<script setup>
import {defineAsyncComponent, ref} from "vue";
import XNav from "../../components/XNav.vue";
import XNoticeBar from "../../components/XNoticeBar.vue";
import {onLoad} from "@dcloudio/uni-app";
import Api from "../../api/index.js";
import {showToast} from "../../utils/uils.js";

// #ifdef APP-PLUS
import AliPay from "./components/AliPay.vue";
import BankPay from "./components/BankPay.vue";
// #endif

// #ifndef APP-PLUS
const AliPay = defineAsyncComponent(() => import('./components/AliPay.vue'));
const BankPay = defineAsyncComponent(() => import('./components/BankPay.vue'));
// #endif

const id = ref(null);
const currentTab = ref(0);
const tabs = [
    {
        name: '支付宝账号',
        component: AliPay,
    },
    {
        name: '银行卡账号',
        component: BankPay,
    },
];

const change = (e) => {
    if (id.value) {
        showToast('无法修改类型');
        return;
    }
    currentTab.value = e.index;
}

onLoad((options) => {
    const {id: _id} = options;
    if (_id) {
        id.value = _id;
        Api.system.getWithdrawalInfo(id.value).then(({data}) => {
            currentTab.value = data.type - 1;
        });
    }
});
</script>

<template>
    <!-- 立即提现 -->
    <x-nav></x-nav>

    <x-notice-bar
        status="success"
        :tile="true"
        text-color="var(--primary-color)"
        :text="['平台承诺：所有信息仅用于打款，不会用作其他用途。为了您的资金安全，大额提现会通过第三方支付代发，请填写实名信息和银行卡进行验证。']">
    </x-notice-bar>

    <view class="bg-[#fff]">
        <tui-tabs
            :tabs="tabs"
            :currentTab="currentTab"
            @change="change"
            width="300">
        </tui-tabs>

        <Suspense>
            <template #default>
                <view class="px-[34rpx] !mt-[40rpx]">
                    <component :is="tabs[currentTab].component" :id="id"></component>
                </view>
            </template>

            <template #fallback>
                加载中...
            </template>
        </Suspense>
    </view>
</template>

<style scoped lang="scss">

</style>