code review:优化收银台的实现,解决 TODO
This commit is contained in:
parent
551ebbd41d
commit
7625e6757c
@ -22,16 +22,6 @@ export interface AppPageReqVO extends PageParam {
|
||||
createTime?: Date[]
|
||||
}
|
||||
|
||||
export interface AppExportReqVO {
|
||||
name?: string
|
||||
status?: number
|
||||
remark?: string
|
||||
payNotifyUrl?: string
|
||||
refundNotifyUrl?: string
|
||||
merchantName?: string
|
||||
createTime?: Date[]
|
||||
}
|
||||
|
||||
export interface AppUpdateStatusReqVO {
|
||||
id: number
|
||||
status: number
|
||||
@ -67,16 +57,7 @@ export const deleteApp = (id: number) => {
|
||||
return request.delete({ url: '/pay/app/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 导出支付应用
|
||||
export const exportApp = (params: AppExportReqVO) => {
|
||||
return request.download({ url: '/pay/app/export-excel', params })
|
||||
}
|
||||
|
||||
// 根据商ID称搜索应用列表
|
||||
export const getAppListByMerchantId = (merchantId: number) => {
|
||||
return request.get({ url: '/pay/app/list-merchant-id', params: { merchantId: merchantId } })
|
||||
}
|
||||
|
||||
// 获得支付应用列表
|
||||
export const getAppList = () => {
|
||||
return request.get({
|
||||
url: '/pay/app/list'
|
||||
|
@ -1,5 +1,6 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
// 获得支付通知明细
|
||||
export const getNotifyTaskDetail = (id) => {
|
||||
return request.get({
|
||||
url: '/pay/notify/get-detail?id=' + id
|
||||
|
@ -93,21 +93,11 @@ export const getOrderDetail = async (id: number) => {
|
||||
return await request.get({ url: '/pay/order/get-detail?id=' + id })
|
||||
}
|
||||
|
||||
// 新增支付订单
|
||||
export const createOrder = async (data: OrderVO) => {
|
||||
// 提交支付订单
|
||||
export const submitOrder = async (data: any) => {
|
||||
return await request.post({ url: '/pay/order/submit', data })
|
||||
}
|
||||
|
||||
// 修改支付订单
|
||||
export const updateOrder = async (data: OrderVO) => {
|
||||
return await request.put({ url: '/pay/order/update', data })
|
||||
}
|
||||
|
||||
// 删除支付订单
|
||||
export const deleteOrder = async (id: number) => {
|
||||
return await request.delete({ url: '/pay/order/delete?id=' + id })
|
||||
}
|
||||
|
||||
// 导出支付订单
|
||||
export const exportOrder = async (params: OrderExportReqVO) => {
|
||||
return await request.download({ url: '/pay/order/export-excel', params })
|
||||
|
@ -177,80 +177,6 @@ export const PayOrderStatusEnum = {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付订单回调状态枚举
|
||||
*/
|
||||
export const PayOrderNotifyStatusEnum = {
|
||||
NO: {
|
||||
status: 0,
|
||||
name: '未通知'
|
||||
},
|
||||
SUCCESS: {
|
||||
status: 10,
|
||||
name: '通知成功'
|
||||
},
|
||||
FAILURE: {
|
||||
status: 20,
|
||||
name: '通知失败'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付订单退款状态枚举
|
||||
*/
|
||||
export const PayOrderRefundStatusEnum = {
|
||||
NO: {
|
||||
status: 0,
|
||||
name: '未退款'
|
||||
},
|
||||
SOME: {
|
||||
status: 10,
|
||||
name: '部分退款'
|
||||
},
|
||||
ALL: {
|
||||
status: 20,
|
||||
name: '全部退款'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付退款订单状态枚举
|
||||
*/
|
||||
export const PayRefundStatusEnum = {
|
||||
CREATE: {
|
||||
status: 0,
|
||||
name: '退款订单生成'
|
||||
},
|
||||
SUCCESS: {
|
||||
status: 1,
|
||||
name: '退款成功'
|
||||
},
|
||||
FAILURE: {
|
||||
status: 2,
|
||||
name: '退款失败'
|
||||
},
|
||||
PROCESSING_NOTIFY: {
|
||||
status: 3,
|
||||
name: '退款中,渠道通知结果'
|
||||
},
|
||||
PROCESSING_QUERY: {
|
||||
status: 4,
|
||||
name: '退款中,系统查询结果'
|
||||
},
|
||||
UNKNOWN_RETRY: {
|
||||
status: 5,
|
||||
name: '状态未知,请重试'
|
||||
},
|
||||
UNKNOWN_QUERY: {
|
||||
status: 6,
|
||||
name: '状态未知,系统查询结果'
|
||||
},
|
||||
CLOSE: {
|
||||
status: 99,
|
||||
name: '退款关闭'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 商品 SPU 状态
|
||||
*/
|
||||
|
@ -130,13 +130,8 @@ export enum DICT_TYPE {
|
||||
BPM_OA_LEAVE_TYPE = 'bpm_oa_leave_type',
|
||||
|
||||
// ========== PAY 模块 ==========
|
||||
PAY_CHANNEL_WECHAT_VERSION = 'pay_channel_wechat_version', // 微信渠道版本
|
||||
PAY_CHANNEL_ALIPAY_SIGN_TYPE = 'pay_channel_alipay_sign_type', // 支付渠道支付宝算法类型
|
||||
PAY_CHANNEL_ALIPAY_MODE = 'pay_channel_alipay_mode', // 支付宝公钥类型
|
||||
PAY_CHANNEL_ALIPAY_SERVER_TYPE = 'pay_channel_alipay_server_type', // 支付宝网关地址
|
||||
PAY_CHANNEL_CODE = 'pay_channel_code', // 支付渠道编码类型
|
||||
PAY_CHANNEL_CODE_TYPE = 'pay_channel_code_type', // 支付渠道编码类型
|
||||
// PAY_ORDER_NOTIFY_STATUS = 'pay_order_notify_status', // 商户支付订单回调状态
|
||||
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
|
||||
PAY_ORDER_REFUND_STATUS = 'pay_order_refund_status', // 商户支付订单退款状态
|
||||
PAY_REFUND_ORDER_STATUS = 'pay_refund_order_status', // 退款订单状态
|
||||
|
@ -21,8 +21,8 @@
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付结果的回调地址" prop="payNotifyUrl">
|
||||
<el-input v-model="formData.payNotifyUrl" placeholder="请输入支付结果的回调地址" />
|
||||
<el-form-item label="支付结果的回调地址" prop="orderNotifyUrl">
|
||||
<el-input v-model="formData.orderNotifyUrl" placeholder="请输入支付结果的回调地址" />
|
||||
</el-form-item>
|
||||
<el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
|
||||
<el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
|
||||
@ -66,7 +66,7 @@ const formData = ref({
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
|
||||
payNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
|
||||
orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
|
||||
refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
@ -122,7 +122,7 @@ const resetForm = () => {
|
||||
name: undefined,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
remark: undefined,
|
||||
payNotifyUrl: undefined,
|
||||
orderNotifyUrl: undefined,
|
||||
refundNotifyUrl: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
|
@ -54,15 +54,6 @@
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['system:tenant:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
@ -392,20 +383,6 @@ const handleDelete = async (id: number) => {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await AppApi.exportApp(queryParams)
|
||||
download.excel(data, '支付应用信息.xls')
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据渠道编码判断渠道列表中是否存在
|
||||
*
|
||||
|
@ -5,15 +5,15 @@
|
||||
<el-descriptions-item label="支付单号">{{ payOrder.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商品标题">{{ payOrder.subject }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商品内容">{{ payOrder.body }}</el-descriptions-item>
|
||||
<el-descriptions-item label="支付金额"
|
||||
>¥{{ (payOrder.price / 100.0).toFixed(2) }}</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item label="创建时间">{{
|
||||
formatDate(payOrder.createTime)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="过期时间">{{
|
||||
formatDate(payOrder.expireTime)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="支付金额">
|
||||
¥{{ (payOrder.price / 100.0).toFixed(2) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">
|
||||
{{ formatDate(payOrder.createTime) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="过期时间">
|
||||
{{ formatDate(payOrder.expireTime) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
</el-card>
|
||||
|
||||
<!-- 展示形式:二维码 URL -->
|
||||
<el-dialog
|
||||
<Dialog
|
||||
:title="qrCode.title"
|
||||
v-model="qrCode.visible"
|
||||
width="350px"
|
||||
@ -69,10 +69,10 @@
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<qrcode-vue :value="qrCode.url" :size="310" level="L" />
|
||||
</el-dialog>
|
||||
</Dialog>
|
||||
|
||||
<!-- 展示形式:BarCode 条形码 -->
|
||||
<el-dialog
|
||||
<Dialog
|
||||
:title="barCode.title"
|
||||
v-model="barCode.visible"
|
||||
width="500px"
|
||||
@ -93,8 +93,9 @@
|
||||
type="danger"
|
||||
target="_blank"
|
||||
href="https://baike.baidu.com/item/条码支付/10711903"
|
||||
>(扫码枪/扫码盒)</el-link
|
||||
>
|
||||
(扫码枪/扫码盒)
|
||||
</el-link>
|
||||
扫码
|
||||
</div>
|
||||
</el-col>
|
||||
@ -105,21 +106,22 @@
|
||||
type="primary"
|
||||
@click="submit0(barCode.channelCode)"
|
||||
:disabled="barCode.value.length === 0"
|
||||
>确认支付</el-button
|
||||
>
|
||||
确认支付
|
||||
</el-button>
|
||||
<el-button @click="barCode.visible = false">取 消</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="PayCashier">
|
||||
<script lang="ts" setup>
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
import { getOrder, createOrder } from '@/api/pay/order'
|
||||
import { getOrder, submitOrder } from '@/api/pay/order'
|
||||
import { PayChannelEnum, PayDisplayModeEnum, PayOrderStatusEnum } from '@/utils/constants'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { formatDate } from '@/utils/formatTime'
|
||||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||
|
||||
// TODO: ugly
|
||||
// 导入图标
|
||||
import svg_alipay_pc from '@/assets/svgs/pay/icon/alipay_pc.svg'
|
||||
import svg_alipay_wap from '@/assets/svgs/pay/icon/alipay_wap.svg'
|
||||
import svg_alipay_app from '@/assets/svgs/pay/icon/alipay_app.svg'
|
||||
@ -132,11 +134,14 @@ import svg_wx_native from '@/assets/svgs/pay/icon/wx_native.svg'
|
||||
import svg_wx_bar from '@/assets/svgs/pay/icon/wx_bar.svg'
|
||||
import svg_mock from '@/assets/svgs/pay/icon/mock.svg'
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
defineOptions({ name: 'PayCashier' })
|
||||
|
||||
const id = ref(undefined) // 请假编号
|
||||
const message = useMessage() // 消息弹窗
|
||||
const route = useRoute() // 路由
|
||||
const { push, currentRoute } = useRouter() // 路由
|
||||
const { delView } = useTagsViewStore() // 视图操作
|
||||
|
||||
const id = ref(undefined) // 支付单号
|
||||
const returnUrl = ref<string | undefined>(undefined) // 支付完的回调地址
|
||||
const loading = ref(false) // 支付信息的 loading
|
||||
const payOrder = ref({}) // 支付信息
|
||||
@ -167,7 +172,6 @@ const channelsAlipay = [
|
||||
code: 'alipay_bar'
|
||||
}
|
||||
]
|
||||
|
||||
const channelsWechat = [
|
||||
{
|
||||
name: '微信公众号支付',
|
||||
@ -195,7 +199,6 @@ const channelsWechat = [
|
||||
code: 'wx_bar'
|
||||
}
|
||||
]
|
||||
|
||||
const channelsMock = [
|
||||
{
|
||||
name: '模拟支付',
|
||||
@ -220,14 +223,6 @@ const barCode = ref({
|
||||
visible: false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
id.value = route.query.id
|
||||
if (route.query.returnUrl) {
|
||||
returnUrl.value = decodeURIComponent(route.query.returnUrl)
|
||||
}
|
||||
getDetail()
|
||||
})
|
||||
|
||||
/** 获得支付信息 */
|
||||
const getDetail = () => {
|
||||
// 1.1 未传递订单编号
|
||||
@ -297,7 +292,7 @@ const submit = (channelCode) => {
|
||||
|
||||
const submit0 = (channelCode) => {
|
||||
submitLoading.value = true
|
||||
createOrder({
|
||||
submitOrder({
|
||||
id: id.value,
|
||||
channelCode: channelCode,
|
||||
returnUrl: location.href, // 支付成功后,支付渠道跳转回当前页;再由当前页,跳转回 {@link returnUrl} 对应的地址
|
||||
@ -308,7 +303,7 @@ const submit0 = (channelCode) => {
|
||||
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
clearQueryInterval()
|
||||
message.success('支付成功!')
|
||||
goReturnUrl()
|
||||
goReturnUrl('success')
|
||||
return
|
||||
}
|
||||
|
||||
@ -396,13 +391,13 @@ const createQueryInterval = () => {
|
||||
if (data.status === PayOrderStatusEnum.SUCCESS.status) {
|
||||
clearQueryInterval()
|
||||
message.success('支付成功!')
|
||||
goReturnUrl()
|
||||
goReturnUrl('success')
|
||||
}
|
||||
// 已取消
|
||||
if (data.status === PayOrderStatusEnum.CLOSED.status) {
|
||||
clearQueryInterval()
|
||||
message.error('支付已关闭!')
|
||||
goReturnUrl()
|
||||
goReturnUrl('close')
|
||||
}
|
||||
})
|
||||
}, 1000 * 2)
|
||||
@ -435,8 +430,7 @@ const goReturnUrl = (payResult) => {
|
||||
|
||||
// 未配置的情况下,只能关闭
|
||||
if (!returnUrl.value) {
|
||||
// TODO: dhb52 需要找到对应 $tab 功能
|
||||
// this.$tab.closePage()
|
||||
delView(unref(currentRoute))
|
||||
return
|
||||
}
|
||||
|
||||
@ -448,14 +442,21 @@ const goReturnUrl = (payResult) => {
|
||||
if (returnUrl.value.indexOf('http') === 0) {
|
||||
location.href = url
|
||||
} else {
|
||||
// TODO: dhb52 需要找到对应 $tab 功能
|
||||
// this.$tab.closePage(() => {
|
||||
// router.push({
|
||||
// path: url
|
||||
// })
|
||||
// })
|
||||
delView(unref(currentRoute))
|
||||
push({
|
||||
path: url
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
id.value = route.query.id
|
||||
if (route.query.returnUrl) {
|
||||
returnUrl.value = decodeURIComponent(route.query.returnUrl)
|
||||
}
|
||||
getDetail()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -464,7 +465,7 @@ const goReturnUrl = (payResult) => {
|
||||
margin-top: -10px;
|
||||
|
||||
.box {
|
||||
width: 130px;
|
||||
width: 160px;
|
||||
border: 1px solid #e6ebf5;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
Loading…
Reference in New Issue
Block a user