admin-web-template/src/views/pay/cashier/index.vue

<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>>