webb2b/src/packages/pc/views/customs/exit/components/payment/index.vue

<!-- 交易服务-出境检测-确认付款 -->
<template>
    <app-drawer title="确认付款" :width="800" v-model:show="show" :loading="loading" :refresh="refresh">
        <el-descriptions :column="2" border v-if="details">
            <el-descriptions-item label="单据编号">{{ selectedRow.orderidstr }}</el-descriptions-item>
            <el-descriptions-item label="综合服务费">{{ details.servicefee }}</el-descriptions-item>
            <el-descriptions-item label="代缴物流保险费">{{ details.logisticsfee }}</el-descriptions-item>
            <el-descriptions-item label="GIA检测费">{{ details.giarmbfee }}</el-descriptions-item>
            <el-descriptions-item label="海关税费">{{ details.customsfee }}</el-descriptions-item>
            <el-descriptions-item label="汇款银行手续费">{{ details.bankfee }}</el-descriptions-item>
            <el-descriptions-item label="其它费用">{{ details.otherfee }}</el-descriptions-item>
            <el-descriptions-item label="总共">{{ details.settleamount }}</el-descriptions-item>
            <el-descriptions-item label="预收款">{{ details.advanceamount }}</el-descriptions-item>
            <el-descriptions-item label="应收\退款">{{ arrearage.toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="结算费用详情文件">请下载文件“付款通知书(结算费用).pdf”</el-descriptions-item>
            <el-descriptions-item label="账户可用余额" v-if="arrearage >= 0">{{
                avaiableMoney.toFixed(2)
            }}</el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <el-button @click="onCancel(false)" plain>取消</el-button>
            <el-button type="primary" :disabled="disabled" @click="onSubmit">确认</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useAccountStore } from '@/stores'
import { useCJJCOrderOperate, useCJJCMemberOperate } from '@/business/customs/exit'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const props = defineProps({
    selectedRow: {
        type: Object as PropType<Ermcp.GZCJJCOrderRsp>,
        required: true
    },
})

const { details, getGzcjjcorderoperate } = useCJJCOrderOperate(props.selectedRow)
const { loading, formData, formSubmit } = useCJJCMemberOperate(props.selectedRow.orderidstr)
const { avaiableMoney } = useAccountStore()
const show = shallowRef(true)
const refresh = shallowRef(false)

// 应收\退款
const arrearage = computed(() => {
    const { settleamount = 0, advanceamount = 0 } = details.value ?? {}
    return settleamount - advanceamount
})

const disabled = computed(() => {
    return arrearage.value > avaiableMoney.value
})

const onCancel = (isRefresh = false) => {
    show.value = false
    refresh.value = isRefresh
}

const onSubmit = () => {
    formData.OperateType = 5
    formSubmit().then(() => {
        ElMessage.success('提交成功')
        onCancel(true)
    }).catch((err) => {
        ElMessage.error('提交失败：' + err)
    })
}

getGzcjjcorderoperate()
</script>