THJ_Mobile/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="primary" @click="$router.push({ name: 'add-banksign' })" round>添加签约账户</Button>
        </div>
        <template #footer>
            <div class="g-form__footer" v-if="bankInfo">
                <Button type="warning" round block @click="formSubmit">解约</Button>
                <Button type="primary" round block @click="routerTo('add-banksign')">修改</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { CellGroup, Cell, Button, Empty, Toast } from 'vant'
import { fullloading, dialog } from '@/utils/vant'
import { getSignStatusName } from '@/constants/bank'
import { useDoCancelBankSign } from '@/business/bank'
import { useNavigation } from '@/hooks/navigation'

const { cancelSubmit, bankInfo } = useDoCancelBankSign()
const { router, routerTo } = useNavigation()

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

</script>

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