MTP20_WEB_GLOBAL/src/packages/gstj/views/holdbank/holdsign/Index.vue

<template>
    <app-view class="bank-sign g-form">
        <template #header>
            <app-navbar title="代扣签约申请" />
        </template>
        <div class="bank-sign__container" v-if="signinfo">
            <CellGroup>
                <Cell title="用户编号" :value="signinfo?.jfhm" />
                <Cell title="账户签约状态" :value="getSignStatusName(signinfo?.accountsignstatus ?? 1)" />
                <!-- <Cell title="一次扣费限额" :value="handleNoneValue(signinfo?.yckfxe)" /> -->
                <Cell title="协议签署日期" :value="handleNoneValue(signinfo?.xyqsrq)" />
                <Cell title="协议生效日期" :value="handleNoneValue(signinfo?.xysxrq)" />
                <Cell title="扣款单位时间" :value="getGt_kksjdwName(signinfo?.kksjdw)" />
                <Cell title="扣款时间步长" :value="handleNoneValue(signinfo?.kksjbc)" />
                <!-- <Cell title="扣款周期内扣费限额" :value="handleNoneValue(signinfo?.kkzqnkfxe)" />
                <Cell title="扣费周期内限制笔数" :value="handleNoneValue(signinfo?.kkzqnxzbs)" /> -->
            </CellGroup>
        </div>
        <div class="bank-sign__empty" v-else>
            <Empty description="您还未添加签约账户" />
        </div>
        <template #footer>
            <div class="g-form__footer inset">
                <Button type="warning" round block @click="onCancelSumit"
                    v-if="signStatus === SignStatus.Signed">解约</Button>
                <Button type="danger" round block @click="openComponent('apply')"
                    v-if="[SignStatus.Unsigned, SignStatus.Rescinded].includes(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, shallowRef } from 'vue'
import { CellGroup, Cell, Button, Empty, showFailToast } from 'vant'
import { useComponent } from '@/hooks/component'
import { queryGetGtwithholdsigninfo } from '@/services/api/bank'
import { useRequest } from '@/hooks/request'
import { getSignStatusName, SignStatus, getGt_kksjdwName } from '@/constants/bank'
import { fullloading, dialog } from '@/utils/vant'
import { useNavigation } from '@mobile/router/navigation'
import { useDoYJF_WithholdSignOut } from '@/business/bank'
import { handleNoneValue } from '@/filters'

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

const { router } = useNavigation()
const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
    run()
})
const signStatus = shallowRef(SignStatus.Unsigned)
const { onSubmit } = useDoYJF_WithholdSignOut()
const signinfo = shallowRef<Model.GTWithHoldSignInfoRsp>()

const { run } = useRequest(queryGetGtwithholdsigninfo, {
    onSuccess: (res) => {
        /// 签约状态
        if (res.data.length != 0) {
            signStatus.value = res.data[0].accountsignstatus
            console.log(signStatus.value)
            /// 签约信息
            signinfo.value = res.data[0]
        }
    }
})

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

</script>

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