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.
118 lines
3.8 KiB
118 lines
3.8 KiB
<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="w-30 h-28 mt-3 pb-3" @click="submit(item.code)"> |
|
<template #cover> |
|
<img class="w-40px h-40px mt-2" :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="w-30 h-28 pt-3 pb-3"> |
|
<template #cover> |
|
<img class="w-40px h-40px mt-2" :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="w-30 h-28 pt-3 pb-3"> |
|
<template #cover> |
|
<img class="w-40px h-40px mt-2" :src="icons[item.code]" /> |
|
<p class="mt-3 text-center"> {{ item.name }} </p> |
|
</template> |
|
</Card> |
|
</ListItem> |
|
</template> |
|
</List> |
|
</Card> |
|
</div> |
|
</template> |
|
<script lang="ts" setup name="PayOrderSubmit"> |
|
import { ref, onMounted } from 'vue' |
|
import { Card, List } from 'ant-design-vue' |
|
import { Description } from '@/components/Description' |
|
import { descSchema } from './submit.data' |
|
import { getOrder, submitOrder } from '@/api/pay/order' |
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
|
import { useRoute } from 'vue-router' |
|
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' |
|
|
|
const ListItem = List.Item |
|
|
|
const icons = { |
|
alipay_qr: alipay_qr, |
|
alipay_app: alipay_app, |
|
alipay_wap: alipay_wap, |
|
alipay_pc: alipay_pc, |
|
alipay_bar: alipay_bar, |
|
wx_app: wx_app, |
|
wx_lite: wx_lite, |
|
wx_pub: wx_pub, |
|
mock: 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 getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)) { |
|
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>
|
|
|