源文件
This commit is contained in:
98
jeepay-ui-agent/src/views/order/pay/PayDetail.vue
Normal file
98
jeepay-ui-agent/src/views/order/pay/PayDetail.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" :footer="null">
|
||||
<div class="modal-title">入账订单详细</div>
|
||||
<div class="statistics-list" style="padding-bottom: 20px;">
|
||||
<div v-for="(item, index) in props.countDetailList[0] as any" :key="index" class="item item-box-title">
|
||||
<div v-if="item.type == 'line'" class="line" />
|
||||
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div v-if="item.title" class="amount">
|
||||
<a-tooltip v-if="item.title == '实付金额'">
|
||||
<template #title>{{ item.content }}元</template>
|
||||
<span class="amount-num">{{ item.content }}</span><span>元</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else>
|
||||
<template #title> - {{ item.content }}元</template>
|
||||
<span class="amount-num">-{{ item.content }}</span><span>元</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div v-if="item.count >= 0" class="detail">
|
||||
<span>{{ item.count }}笔</span>
|
||||
</div>
|
||||
<span class="item-box-title-border"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-list" style="padding-bottom: 55px;">
|
||||
<div v-for="(item, index) in props.countDetailList[1] as any" :key="index" class="item item-box-title">
|
||||
<div v-if="item.type == 'line'" class="line" />
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div v-if="item.title" class="amount">
|
||||
<a-tooltip v-if="item.title == '补贴金额'">
|
||||
<template #title> {{ item.content }}元</template>
|
||||
<span class="amount-num">{{ item.content }}</span><span>元</span>
|
||||
</a-tooltip>
|
||||
<a-tooltip v-else>
|
||||
<template #title>- {{ item.content }}元</template>
|
||||
<span class="amount-num">-{{ item.content }}</span><span>元</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div v-if="item.count >= 0" class="detail">
|
||||
<span>{{ item.count }}笔</span>
|
||||
</div>
|
||||
<span class="item-box-title-border"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close" @click=" visible = false">
|
||||
<a-button type="primary">知道了</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
const visible = ref<boolean>(false)
|
||||
|
||||
const props = defineProps({
|
||||
countDetailList: {type: Array, default: () => []},
|
||||
sucDetailList: {type: Array, default: () => []}
|
||||
})
|
||||
|
||||
const showModal = () => visible.value = true
|
||||
|
||||
defineExpose({showModal})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.modal-title, .modal-describe{
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.modal-title {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.amount {
|
||||
//max-width:150px;
|
||||
//overflow:hidden;
|
||||
//text-overflow:ellipsis;
|
||||
//white-space:nowrap;
|
||||
}
|
||||
.item-box-title{
|
||||
//width: 30%;
|
||||
}
|
||||
.item-box-title-border{
|
||||
//border-right: 1px solid #EFEFEF !important;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
447
jeepay-ui-agent/src/views/order/pay/PayLogDetail.vue
Normal file
447
jeepay-ui-agent/src/views/order/pay/PayLogDetail.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
v-model:visible="vdata.visible"
|
||||
width="50%"
|
||||
placement="right"
|
||||
:closable="true"
|
||||
:title="vdata.visible === true? '订单详情':''"
|
||||
@close="onClose"
|
||||
>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">订单信息</a-divider>
|
||||
<a-row justify="space-between" type="flex">
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="平台订单号">
|
||||
{{ vdata.detailData.payOrderId }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="通道订单号">
|
||||
{{ vdata.detailData.channelOrderNo??"--" }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="渠道订单号">
|
||||
{{ vdata.detailData.platformOrderNo??"--" }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="商户订单号">
|
||||
{{ vdata.detailData.mchOrderNo??"--" }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="落单订单号">
|
||||
{{ vdata.detailData.platformMchOrderNo??"--" }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础信息</a-divider>
|
||||
<a-row justify="space-between" type="flex">
|
||||
|
||||
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="商户简称">
|
||||
{{ vdata.detailData.mchName }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="商户号">
|
||||
{{ vdata.detailData.mchExtNo }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="门店名称">
|
||||
{{ vdata.detailData.storeName }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="门店编号">
|
||||
{{ vdata.detailData.storeId }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="应用名称">
|
||||
{{ vdata.detailData.appName }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="应用ID">
|
||||
{{ vdata.detailData.appId }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="用户名称">
|
||||
{{vdata.detailData.mchUserName}}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="用户ID">
|
||||
{{ vdata.detailData.mchNo }} [ {{vdata.detailData.mchUserPhone}} ]
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="服务商名称">
|
||||
{{ vdata.detailData.agentName }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="服务商号">
|
||||
{{ vdata.detailData.agentNo }} [ {{vdata.detailData.agentContactTel}} ]
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付金额（元）">
|
||||
<a-tag color="green">
|
||||
{{ vdata.detailData.amount/100 }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="订单状态">
|
||||
<span v-if="vdata.detailData.state !== 5 ">
|
||||
<a-tag
|
||||
:key="vdata.detailData.state"
|
||||
:color="vdata.detailData.state === 0?'blue':vdata.detailData.state === 1?'orange':vdata.detailData.state === 2?'green':vdata.detailData.state === 6?'':'volcano'"
|
||||
>
|
||||
{{ vdata.detailData.state === 0?'订单生成':vdata.detailData.state === 1?'支付中':vdata.detailData.state === 2?'支付成功':vdata.detailData.state === 3?'支付失败':vdata.detailData.state === 4?'已撤销':vdata.detailData.state === 6?'订单关闭':'未知' }}
|
||||
|
||||
</a-tag>
|
||||
</span>
|
||||
<span v-else-if="vdata.detailData.state === 5 ">
|
||||
<a-tag
|
||||
:key="vdata.detailData.refundState"
|
||||
:color="vdata.detailData.refundState === 0?'red':vdata.detailData.refundState === 1?'orange':vdata.detailData.refundState === 2?'red':'red'"
|
||||
>
|
||||
{{ vdata.detailData.refundState === 0?'':vdata.detailData.refundState === 1?'部分退款':vdata.detailData.refundState === 2?'全额退款':'未知' }}
|
||||
</a-tag>
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<!-- <a-col :sm="12">-->
|
||||
<!-- <a-descriptions><a-descriptions-item label="实际手续费"><a-tag color="pink">{{ vdata.detailData.mchFeeAmount/100 }}</a-tag></a-descriptions-item></a-descriptions>-->
|
||||
<!-- </a-col>-->
|
||||
|
||||
<!-- <a-col :sm="12">-->
|
||||
<!-- <a-descriptions><a-descriptions-item label="收单手续费"><a-tag color="pink">{{ vdata.detailData.mchOrderFeeAmount/100 }}</a-tag></a-descriptions-item></a-descriptions>-->
|
||||
<!-- </a-col>-->
|
||||
|
||||
|
||||
<!-- <a-col :sm="12">-->
|
||||
<!-- <a-descriptions><a-descriptions-item label="商家费率">{{ vdata.detailData.mchFeeRate }}</a-descriptions-item></a-descriptions>-->
|
||||
<!-- </a-col>-->
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions><a-descriptions-item label="收单费率">{{ vdata.detailData.mchFeeRateNum }}%</a-descriptions-item></a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<!-- <a-descriptions><a-descriptions-item label="收单手续费（元）">{{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.mchFeeRateNum }} = {{ (vdata.detailData.mchOrderFeeAmount / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>-->
|
||||
|
||||
收单手续费（元）
|
||||
<a-popover placement="top">
|
||||
<template #content>
|
||||
<p>收单手续费 = 实付金额 - * 收单费率</p>
|
||||
</template>
|
||||
<question-circle-outlined/>：
|
||||
</a-popover>
|
||||
{{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.mchFeeRateNum }} = {{ (vdata.detailData.mchOrderFeeAmount / 100).toFixed(2) }}
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions><a-descriptions-item label="垫资费率">{{ vdata.detailData.cashRate }}%</a-descriptions-item></a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
垫资手续费（元）
|
||||
<a-popover placement="top">
|
||||
<template #content>
|
||||
<p>垫资手续费 = 实付金额 - * 垫资费率</p>
|
||||
</template>
|
||||
<question-circle-outlined/>：
|
||||
</a-popover>
|
||||
{{ (vdata.detailData.findAmt / 100).toFixed(2) }} * {{ vdata.detailData.cashRate }} = {{ (vdata.detailData.cashFee / 100).toFixed(2) }}
|
||||
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="退款次数">
|
||||
{{ vdata.detailData.refundTimes }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="退款总额">
|
||||
<a-tag v-if="vdata.detailData.refundAmount" color="cyan">
|
||||
{{ (vdata.detailData.refundAmount / 100).toFixed(2)}}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions><a-descriptions-item label="优惠金额">￥{{ (vdata.detailData.discountAmt / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions><a-descriptions-item label="补贴金额">￥{{ (vdata.detailData.marketAmt / 100).toFixed(2) }}</a-descriptions-item></a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12" style="margin-bottom: 12px">
|
||||
预计入账金额
|
||||
<!-- <a-tooltip title="入账金额 = 实付金额 - 收单手续费 - 垫资手续费 - 退款总额" >-->
|
||||
<!-- <question-circle-outlined style="padding-right: 10px"/>：-->
|
||||
<!-- </a-tooltip>-->
|
||||
<a-popover placement="top">
|
||||
<template #content>
|
||||
<p>入账金额 = 实付金额 - 收单手续费 - 垫资手续费 - 退款总额</p>
|
||||
</template>
|
||||
<question-circle-outlined/>：
|
||||
</a-popover>
|
||||
{{vdata.detailData.findAmt / 100}} - {{vdata.detailData.mchOrderFeeAmount / 100}} - {{vdata.detailData.cashFee / 100}} - {{vdata.detailData.refundAmount / 100}} = {{ ((vdata.detailData.findAmt - vdata.detailData.mchOrderFeeAmount - vdata.detailData.cashFee - vdata.detailData.refundAmount + vdata.detailData.marketAmt) / 100).toFixed(2) }}
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12"></a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付错误码">
|
||||
{{ vdata.detailData.errCode }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付错误描述">
|
||||
{{ vdata.detailData.errMsg }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="买家备注">
|
||||
{{ vdata.detailData.buyerRemark }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="卖家备注">
|
||||
{{ vdata.detailData.sellerRemark }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="订单失效时间">
|
||||
{{ vdata.detailData.expiredTime }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="创建时间">
|
||||
{{ vdata.detailData.createdAt }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="更新时间">
|
||||
{{ vdata.detailData.updatedAt }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付成功时间">
|
||||
{{ vdata.detailData.successTime??"--" }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
|
||||
|
||||
|
||||
</a-row>
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">其他信息</a-divider>
|
||||
<a-row justify="space-between" type="flex">
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="商品标题">
|
||||
{{ vdata.detailData.subject }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="商品描述">
|
||||
{{ vdata.detailData.body }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="接口代码">
|
||||
{{ vdata.detailData.ifCode }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="货币代码">
|
||||
{{ vdata.detailData.currency }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付方式">
|
||||
{{ vdata.detailData.wayCode }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="客户端IP">
|
||||
{{ vdata.detailData.clientIp }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="用户标识">
|
||||
{{ vdata.detailData.channelUser }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="异步通知地址">
|
||||
{{ vdata.detailData.notifyUrl }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="页面跳转地址">
|
||||
{{ vdata.detailData.returnUrl }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">分账信息</a-divider>
|
||||
<a-row justify="start" type="flex">
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="订单分账模式">
|
||||
<span v-if="vdata.detailData.divisionMode == 0">该笔订单不允许分账</span>
|
||||
<span v-else-if="vdata.detailData.divisionMode == 1">支付成功按配置自动完成分账</span>
|
||||
<span v-else-if="vdata.detailData.divisionMode == 2">商户手动分账(解冻商户金额)</span>
|
||||
<span v-else>未知</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="分账状态">
|
||||
<a-tag v-if="vdata.detailData.divisionState == 0" color="blue">未发生分账</a-tag>
|
||||
<a-tag v-else-if="vdata.detailData.divisionState == 1" color="orange">待分账</a-tag>
|
||||
<a-tag v-else-if="vdata.detailData.divisionState == 2" color="red">分账处理中</a-tag>
|
||||
<a-tag v-else-if="vdata.detailData.divisionState == 3" color="green">任务已结束</a-tag>
|
||||
<a-tag v-else color="#f50">未知</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="12">
|
||||
<a-descriptions><a-descriptions-item label="最新分账发起时间">{{ vdata.detailData.divisionLastTime }}</a-descriptions-item></a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">扩展信息</a-divider>-->
|
||||
<!-- <a-row justify="start" type="flex">-->
|
||||
<!-- <a-col :sm="24">-->
|
||||
<!-- <span style="color: black;">扩展参数:</span>-->
|
||||
<!-- <a-form-item>-->
|
||||
<!-- <a-input-->
|
||||
<!-- v-model:value="vdata.detailData.extParam"-->
|
||||
<!-- type="textarea"-->
|
||||
<!-- disabled="disabled"-->
|
||||
<!-- style="height: 100px;color: black;margin-top: 10px;"-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<!-- </a-row>-->
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { API_URL_MCH_APPLYMENT_LIST, req } from '@/api/manage'
|
||||
import {defineProps,reactive, getCurrentInstance} from 'vue'
|
||||
const { $hasAgentEnt, $SYS_NAME_MAP } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
const props = defineProps({
|
||||
callbackFunc: { type: Function,default:null }
|
||||
})
|
||||
|
||||
const vdata:any = reactive({
|
||||
btnLoading: false,
|
||||
detailData: {}, // 数据对象
|
||||
recordId: null, // 更新对象ID
|
||||
visible: false, // 是否显示弹层/抽屉
|
||||
termNo: false, // 是否显示弹层/抽屉
|
||||
})
|
||||
|
||||
function show (data) { // 弹层打开事件
|
||||
vdata.detailData = data // 数据清空
|
||||
|
||||
vdata.visible = true
|
||||
}
|
||||
function onClose () {
|
||||
vdata.visible = false
|
||||
}
|
||||
defineExpose({
|
||||
show //抛出show函数给父组件
|
||||
})
|
||||
</script>
|
||||
1004
jeepay-ui-agent/src/views/order/pay/PayOrderList.vue
Normal file
1004
jeepay-ui-agent/src/views/order/pay/PayOrderList.vue
Normal file
File diff suppressed because it is too large
Load Diff
66
jeepay-ui-agent/src/views/order/pay/PaySucDetail.vue
Normal file
66
jeepay-ui-agent/src/views/order/pay/PaySucDetail.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" :footer="null">
|
||||
<div class="modal-title">成交订单详细</div>
|
||||
<div class="modal-describe">创建订单金额/笔数 = 成交订单金额/笔数 + 未付款订单金额/笔数</div>
|
||||
<div class="statistics-list" style="padding-bottom: 55px;">
|
||||
<div v-for="(item, index) in props.sucDetailList as any" :key="index" class="item">
|
||||
<div v-if="item.type == 'line'" class="line" />
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div v-if="item.title" class="amount">
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.content }}元</template>
|
||||
<span class="amount-num">{{ item.content }}</span><span>元</span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div v-if="item.count >= 0" class="detail">
|
||||
<span>{{ item.count }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close" @click=" visible = false">
|
||||
<a-button type="primary">知道了</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
const visible = ref<boolean>(false)
|
||||
|
||||
const props = defineProps({
|
||||
countDetailList: {type: Array, default: () => []},
|
||||
sucDetailList: {type: Array, default: () => []}
|
||||
})
|
||||
|
||||
const showModal = () => visible.value = true
|
||||
|
||||
defineExpose({showModal})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.modal-title, .modal-describe{
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.modal-title {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 1px solid #EFEFEF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.amount {
|
||||
max-width:150px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
</style>
|
||||
170
jeepay-ui-agent/src/views/order/pay/RefundModal.vue
Normal file
170
jeepay-ui-agent/src/views/order/pay/RefundModal.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
v-model:visible="vdata.visible"
|
||||
title="退款"
|
||||
:confirm-loading="vdata.confirmLoading"
|
||||
:closable="false"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付订单号">
|
||||
<a-tag color="purple">
|
||||
{{ vdata.detailData.payOrderId }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="支付金额">
|
||||
<a-tag color="green">
|
||||
{{ vdata.detailData.amount/100 }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
<a-col :sm="24">
|
||||
<a-descriptions>
|
||||
<a-descriptions-item label="可退金额">
|
||||
<a-tag color="pink">
|
||||
{{ nowRefundAmount }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form ref="refundInfo" :rules="rules" :model="vdata.refund">
|
||||
<a-form-item label="退款金额" name="refundAmount">
|
||||
<a-input-number v-model:value="vdata.refund.refundAmount" :precision="2" style="width:100%" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="退款原因" name="refundReason">
|
||||
<a-input v-model:value="vdata.refund.refundReason" type="textarea" autocomplete="off" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="支付密码" name="refundPassword">
|
||||
<a-input v-model:value="vdata.refund.refundPassword" maxlength="6" type="password" autocomplete="off" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { API_URL_PAY_ORDER_LIST, req, $payOrderRefund } from '@/api/manage'
|
||||
import {ref, onMounted, reactive, getCurrentInstance,computed} from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 获取全局函数
|
||||
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
|
||||
|
||||
const props = defineProps ({
|
||||
callbackFunc: { type: Function, default: () => () => ({}) }
|
||||
})
|
||||
|
||||
const refundInfo = ref()
|
||||
const vdata : any = reactive({
|
||||
refundErrorModal: null, // 退款错误信息的modal对象
|
||||
recordId: '',
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 16 },
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
detailData: {} as any,
|
||||
refund: {
|
||||
refundReason: '', // 退款原因
|
||||
refundAmount: '' // 退款金额
|
||||
} as any,
|
||||
|
||||
})
|
||||
|
||||
const rules = {
|
||||
refundReason: [{ min: 0, max: 256, required: true, trigger: 'blur', message: '请输入退款原因，最长不超过256个字符' }],
|
||||
refundPassword: [{required: true, trigger: 'blur', message: '请输入支付密码' }],
|
||||
refundAmount: [{ required: true, message: '请输入金额', trigger: 'blur',type:'number' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
console.log(value)
|
||||
|
||||
if (value < 0.01 || value > nowRefundAmount.value) {
|
||||
return Promise.reject('退款金额不能小于0.01并且不能大于可退金额')
|
||||
}else{
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
const nowRefundAmount = computed(()=>{
|
||||
return (vdata.detailData.amount - vdata.detailData.refundAmount) / 100
|
||||
})
|
||||
|
||||
defineExpose({show})
|
||||
function show (recordId) {
|
||||
if (refundInfo.value !== undefined) {
|
||||
refundInfo.value.resetFields()
|
||||
}
|
||||
vdata.recordId = recordId
|
||||
vdata.visible = true
|
||||
vdata.refund = {}
|
||||
|
||||
req.getById(API_URL_PAY_ORDER_LIST, recordId).then(res => {
|
||||
vdata.detailData = res
|
||||
})
|
||||
}
|
||||
function handleOk () {
|
||||
refundInfo.value.validate().then(valid =>{
|
||||
vdata.confirmLoading = true
|
||||
|
||||
// 退款接口
|
||||
$payOrderRefund(vdata.recordId, vdata.refund.refundAmount, vdata.refund.refundReason, vdata.refund.refundPassword).then(res => {
|
||||
vdata.visible = false // 关闭弹窗
|
||||
vdata.confirmLoading = false // 取消按钮转圈
|
||||
|
||||
if (res.state === 0 || res.state === 3) { // 订单生成 || 失败
|
||||
vdata.refundErrorModal = $infoBox.modalError('退款失败', buildModalText(res))
|
||||
} else if (res.state === 1) { // 退款中
|
||||
vdata.refundErrorModal = $infoBox.modalWarning('退款中', buildModalText(res))
|
||||
props.callbackFunc()
|
||||
} else if (res.state === 2) { // 退款成功
|
||||
$infoBox.message.success('退款成功')
|
||||
props.callbackFunc()
|
||||
} else {
|
||||
vdata.refundErrorModal = $infoBox.modalWarning('退款状态未知', buildModalText(res))
|
||||
}
|
||||
}).catch(() => {
|
||||
vdata.confirmLoading = false // 取消按钮转圈
|
||||
})
|
||||
})
|
||||
}
|
||||
function handleCancel (e) {
|
||||
vdata.visible = false
|
||||
}
|
||||
|
||||
// 跳转到退款列表函数
|
||||
function toRefundList () {
|
||||
vdata.refundErrorModal.destroy()
|
||||
router.push({
|
||||
path: '/refund',
|
||||
})
|
||||
}
|
||||
|
||||
function buildModalText (res) {
|
||||
return <div>
|
||||
{ res.errCode? <div>错误码：{res.errCode} </div> : '' }
|
||||
{ res.errMsg? <div>错误信息：{res.errMsg} </div> : '' }
|
||||
<div>请到<a onClick={ toRefundList }>退款列表</a>中查看详细信息</div>
|
||||
</div>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user