Browse Source

feat: pay

main
xingyu 2 years ago
parent
commit
a5f3cfb4f9
  1. 81
      src/enums/systemEnum.ts
  2. 2
      src/views/pay/cashier/cashier.data.ts
  3. 124
      src/views/pay/cashier/index.vue

81
src/enums/systemEnum.ts

@ -128,7 +128,7 @@ export const PayChannelEnum = {
}
/**
*
*
*/
export const PayDisplayModeEnum = {
URL: {
@ -143,6 +143,9 @@ export const PayDisplayModeEnum = {
QR_CODE: {
mode: 'qr_code',
},
APP: {
mode: 'app',
},
}
/**
@ -168,81 +171,7 @@ export const PayOrderStatusEnum = {
},
CLOSED: {
status: 20,
name: '支付关闭',
},
}
/**
*
*/
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: '退款关闭',
name: '未支付',
},
}

2
src/views/pay/cashier/cashier.data.ts

@ -77,6 +77,7 @@ export const channelsAlipay = [
code: 'alipay_bar',
},
]
export const channelsWechat = [
{
name: '微信公众号支付',
@ -104,6 +105,7 @@ export const channelsWechat = [
code: 'wx_bar',
},
]
export const channelsMock = [
{
name: '模拟支付',

124
src/views/pay/cashier/index.vue

@ -1,125 +1,5 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Card, List } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import { descSchema } from './submit.data'
import { Description } from '@/components/Description'
import { getOrder, submitOrder } from '@/api/pay/order'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import alipay_qr from '@/assets/images/pay/icon/alipay_qr.svg'
import alipay_app from '@/assets/images/pay/icon/alipay_app.svg'
import alipay_wap from '@/assets/images/pay/icon/alipay_wap.svg'
import alipay_pc from '@/assets/images/pay/icon/alipay_pc.svg'
import alipay_bar from '@/assets/images/pay/icon/alipay_bar.svg'
import wx_app from '@/assets/images/pay/icon/wx_app.svg'
import wx_lite from '@/assets/images/pay/icon/wx_lite.svg'
import wx_pub from '@/assets/images/pay/icon/wx_pub.svg'
import mock from '@/assets/images/pay/icon/mock.svg'
defineOptions({ name: 'PayCashier' })
const ListItem = List.Item
const icons = {
alipay_qr,
alipay_app,
alipay_wap,
alipay_pc,
alipay_bar,
wx_app,
wx_lite,
wx_pub,
mock,
}
const { query } = useRoute()
const orderData = ref()
const aliPayChannels = ref<any[]>([])
const wxPayChannels = ref<any[]>([])
const otherPayChannels = ref<any[]>([])
function initPayChannels() {
//
for (const dict of getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE, 'string')) {
const payChannel = {
name: dict.label,
code: dict.value as string,
}
if (payChannel.code.startsWith('wx_'))
wxPayChannels.value.push(payChannel)
else if (payChannel.code.startsWith('alipay_'))
aliPayChannels.value.push(payChannel)
else if (payChannel.code)
otherPayChannels.value.push(payChannel)
}
}
async function getDetail() {
const queryId = query.id as unknown as number
if (!queryId)
return
const res = await getOrder(queryId)
orderData.value = res
}
function submit(channelCode) {
submitOrder({ id: query.id as unknown as number, channelCode })
}
onMounted(async () => {
await initPayChannels()
await getDetail()
})
</script>
<template>
<div>
<Card>
<Description :bordered="false" :column="3" :data="orderData" :schema="descSchema" />
</Card>
<Card class="mt-4 justify-center">
<List :grid="{ column: 8 }" header="选择支付宝支付" :data-source="aliPayChannels">
<template #renderItem="{ item }">
<ListItem>
<Card hoverable class="mt-3 h-28 w-30 pb-3" @click="submit(item.code)">
<template #cover>
<img class="mt-2 h-40px w-40px" :src="icons[item.code]">
<p class="mt-3 text-center">
{{ item.name }}
</p>
</template>
</Card>
</ListItem>
</template>
</List>
<List :grid="{ column: 8 }" class="mt-4" header="选择微信支付" :data-source="wxPayChannels">
<template #renderItem="{ item }">
<ListItem>
<Card hoverable class="h-28 w-30 pb-3 pt-3">
<template #cover>
<img class="mt-2 h-40px w-40px" :src="icons[item.code]">
<p class="mt-3 text-center">
{{ item.name }}
</p>
</template>
</Card>
</ListItem>
</template>
</List>
<List :grid="{ column: 8 }" class="mt-4" header="选择其它支付" :data-source="otherPayChannels">
<template #renderItem="{ item }">
<ListItem>
<Card hoverable class="h-28 w-30 pb-3 pt-3">
<template #cover>
<img class="mt-2 h-40px w-40px" :src="icons[item.code]">
<p class="mt-3 text-center">
{{ item.name }}
</p>
</template>
</Card>
</ListItem>
</template>
</List>
</Card>
待开发
</div>
</template>
</template>>