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.
94 lines
2.5 KiB
94 lines
2.5 KiB
<script lang="ts" setup> |
|
import { useRoute } from 'vue-router' |
|
import { onMounted, ref } from 'vue' |
|
import { Card } from 'ant-design-vue' |
|
import { channelsAlipay, channelsMock, channelsWechat, descSchema } from './cashier.data' |
|
import { Description, useDescription } from '@/components/Description' |
|
import { getOrder } from '@/api/pay/order' |
|
|
|
const { query } = useRoute() |
|
|
|
const datas = ref() |
|
|
|
const [registerDesc] = useDescription({ |
|
schema: descSchema, |
|
data: datas, |
|
}) |
|
|
|
async function getInfo() { |
|
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号 |
|
const res = await getOrder(queryId) |
|
datas.value = res |
|
} |
|
|
|
/** 提交支付 */ |
|
function submit(channelCode: string) { |
|
console.info(channelCode) |
|
} |
|
|
|
/** 初始化 **/ |
|
onMounted(async () => { |
|
await getInfo() |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="p-4"> |
|
<Card title="支付信息"> |
|
<Description :column="3" @register="registerDesc" /> |
|
</Card> |
|
<Card title="支付" class="mt-4"> |
|
<p class="mb-4 text-lg text-dark-900"> |
|
选择支付宝支付 |
|
</p> |
|
<div class="flex"> |
|
<Card |
|
v-for="(alipay, index) in channelsAlipay" |
|
:key="index" |
|
hoverable |
|
class="mr-2 w-50 cursor-pointer pb-2 pt-2" |
|
@click="submit(alipay.code)" |
|
> |
|
<template #cover> |
|
<img alt="example" :src="alipay.icon" class="h-10 w-10"> |
|
</template> |
|
<Card.Meta :title="alipay.name" /> |
|
</Card> |
|
</div> |
|
<p class="mb-4 text-lg text-dark-900"> |
|
选择微信支付 |
|
</p> |
|
<div class="flex"> |
|
<Card |
|
v-for="(wechat, index) in channelsWechat" |
|
:key="index" |
|
hoverable |
|
class="mr-2 w-50 cursor-pointer pb-2 pt-2" |
|
@click="submit(wechat.code)" |
|
> |
|
<template #cover> |
|
<img alt="example" :src="wechat.icon" class="h-10 w-10"> |
|
</template> |
|
<Card.Meta :title="wechat.name" /> |
|
</Card> |
|
</div> |
|
<p class="mb-4 text-lg text-dark-900"> |
|
选择其它支付 |
|
</p> |
|
<div class="flex"> |
|
<Card |
|
v-for="(mock, index) in channelsMock" |
|
:key="index" |
|
hoverable |
|
class="mr-2 w-50 cursor-pointer pb-2 pt-2" |
|
@click="submit(mock.code)" |
|
> |
|
<template #cover> |
|
<img alt="example" :src="mock.icon" class="h-10 w-10"> |
|
</template> |
|
<Card.Meta :title="mock.name" /> |
|
</Card> |
|
</div> |
|
</Card> |
|
</div> |
|
</template>>
|
|
|