xingyu
2 years ago
14 changed files with 118 additions and 14 deletions
@ -1,5 +1,94 @@
|
||||
<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> |
||||
待开发 |
||||
<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>> |
||||
|
||||
Reference in new issue