You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.8 KiB
125 lines
3.8 KiB
<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: 'PayOrderSubmit' }) |
|
|
|
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>
|
|
|