MTP20_WEB_GLOBAL/src/packages/mobile/views/bank/sign/Index.vue

<template>
    <app-view class="bank-sign g-form">
        <template #header>
            <app-navbar title="签约账户管理" />
        </template>
        <div class="bank-sign__container" v-if="bankInfo">
            <CellGroup>
                <Cell title="开户银行" :value="bankInfo.bankname" />
                <Cell title="银行卡号" :value="bankInfo.bankaccountno" />
                <template v-if="bankInfo.signstatus === SignStatus.Signed">
                    <Cell title="姓名" :value="bankInfo.bankaccountname" />
                    <Cell title="手机号码" :value="bankInfo.mobilephone" v-if="bankInfo.mobilephone" />
                </template>
                <Cell title="支行名称" v-if="bankInfo.branchbankname != ''" :value="bankInfo.branchbankname" />
                <Cell title="状态" :value="getSignStatusName(bankInfo.signstatus)" />
            </CellGroup>
        </div>
        <div class="bank-sign__empty" v-else>
            <Empty description="您还未添加签约账户" />
            <Button type="danger" @click="showComponent(false)" round>添加签约账户</Button>
        </div>
        <template #footer>
            <div class="g-form__footer inset" v-if="bankInfo">
                <Button type="danger" round block @click="showComponent(true)"
                    v-if="[SignStatus.Unsigned, SignStatus.Refuse].includes(bankInfo.signstatus)">重新签约</Button>
                <Button type="warning" round block @click="formSubmit"
                    v-if="bankInfo.signstatus === SignStatus.Signed && cusBank?.canrelease === 1">解约</Button>
                <Button type="danger" round block @click="beforeShowComponent"
                    v-if="bankInfo.signstatus === SignStatus.Signed && cusBank?.canmodifysigninfo === 1">修改</Button>
            </div>
        </template>
        <component ref="componentRef" v-bind="{ isedit }" :is="componentMap.get(componentId)" @closed="closeComponent"
            v-if="componentId" />
    </app-view>
</template>

<script lang="ts" setup>
import { onActivated, defineAsyncComponent, ref } from 'vue'
import { CellGroup, Cell, Button, Empty, showFailToast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { useComponent } from '@/hooks/component'
import { getSignStatusName, SignStatus } from '@/constants/bank'
import { useDoCancelBankSign } from '@/business/bank'
import { useNavigation } from '@mobile/router/navigation'
import { useRequest } from '@/hooks/request'
import { queryCusBankSignBank } from '@/services/api/bank'
import { useUserStore } from '@/stores'
import { shallowRef } from 'vue'

const componentMap = new Map<string, unknown>([
    ['edit', defineAsyncComponent(() => import('./components/edit/Index.vue'))],
])

const useStore = useUserStore()
const cusBank = shallowRef<Model.CusBankSignBankRsp>()
const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => formRefresh())
const { cancelSubmit, formRefresh, bankInfo } = useDoCancelBankSign()
const { router } = useNavigation()
/// 是否修改
const isedit = ref(false)

/// 查询托管银行信息
useRequest(queryCusBankSignBank, {
    onSuccess: (res) => {
        /// 签约状态
        if (res.data.length != 0) {
            cusBank.value = res.data[0]
        }
    }
})

const formSubmit = () => {
    dialog({
        message: '确认解约？',
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            cancelSubmit().then(() => {
                hideLoading()
                dialog('解约提交成功，请稍后确认结果。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                showFailToast(err)
            })
        })
    })
}

const showComponent = (isEdit: boolean) => {
    isedit.value = isEdit
    openComponent('edit')
}

const beforeShowComponent = () => {
    if (bankInfo.value?.cusbankid === 'jdjs') {
        dialog('请先发函到结算中心修改信息后再修改，否则将会影响充值、提现。').then(() => {
            showComponent(true)
        })
    } else {
        showComponent(true)
    }
}

onActivated(() => {
    useStore.getUserData()
    formRefresh()
})
</script>

<style lang="less">
@import './index.less';
</style>