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" />
                <Cell title="姓名" :value="bankInfo.bankaccountname" />
                <Cell title="支行名称" :value="bankInfo.branchbankname" />
                <Cell title="状态" :value="getSignStatusName(bankInfo.signstatus)" />
            </CellGroup>
        </div>
        <div class="bank-sign__empty" v-else>
            <Empty description="您还未添加签约账户" />
            <Button type="danger" @click="openComponent('edit')" round>添加签约账户</Button>
        </div>
        <template #footer>
            <div class="g-form__footer" v-if="bankInfo">
                <Button type="warning" round block @click="formSubmit"
                    v-if="bankInfo.signstatus === SignStatus.Signed">解约</Button>
                <Button type="danger" round block @click="openComponent('edit')"
                    v-if="[SignStatus.Unsigned, SignStatus.Refuse, SignStatus.Signed].includes(bankInfo.signstatus)">修改</Button>
            </div>
        </template>
        <component ref="componentRef" :is="componentMap.get(componentId)" @closed="closeComponent" v-if="componentId" />
    </app-view>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, onActivated } 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 '../../../router/navigation'

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

const { componentRef, componentId, openComponent, closeComponent } = useComponent()
const { cancelSubmit, bankInfo, formRefresh } = useDoCancelBankSign()
const { router } = useNavigation()

const formSubmit = () => {
    dialog({
        message: '确认解约？',
        showCancelButton: true
    }).then(() => {
        fullloading((hideLoading) => {
            cancelSubmit().then(() => {
                hideLoading()
                dialog('签约提交成功，请耐心等待审核。').then(() => {
                    router.back()
                })
            }).catch((err) => {
                showFailToast(err)
            })
        })
    })
}

onActivated(() => formRefresh())

</script>

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