feat: pay cashier

apps/web-antd/src/views/pay/cashier/index.vue

@@ -5,28 +5,58 @@ import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
 import { formatDate } from '@vben/utils';
 
-import { Card, Descriptions, message } from 'ant-design-vue';
+import {
+  Button,
+  Card,
+  Descriptions,
+  Input,
+  message,
+  QRCode,
+} from 'ant-design-vue';
 
-import { getOrder } from '#/api/pay/order';
+import { getOrder, submitOrder } from '#/api/pay/order';
-import { PayChannelEnum, PayOrderStatusEnum } from '#/utils/constants';
+import {
+  fenToYuan,
+  PayChannelEnum,
+  PayDisplayModeEnum,
+  PayOrderStatusEnum,
+} from '#/utils';
 
 import { channelsAlipay, channelsMock, channelsWechat } from './data';
-import Form from './modules/form.vue';
 
 defineOptions({ name: 'PayCashier' });
 
-const [FormModal, formModalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
-  connectedComponent: Form,
+  showConfirmButton: false,
   destroyOnClose: true,
 });
 
-const id = ref(); // 支付单号
-const returnUrl = ref<string>(); // 支付完的回调地址
 const route = useRoute();
-const router = useRouter();
+const { push } = useRouter(); // 路由
+const { closeCurrentTab } = useTabs();
+
+const id = ref(); // 支付单号
+const title = ref('支付订单');
+const returnUrl = ref<string>(); // 支付完的回调地址
+
 const payOrder = ref<PayOrderApi.Order>();
+const interval = ref<any>(undefined); // 定时任务，轮询是否完成支付
+
+/** 展示形式：二维码 */
+const qrCode = ref({
+  url: '',
+  visible: false,
+});
+
+/** 展示形式：条形码 */
+const barCode = ref({
+  channelCode: '',
+  value: '',
+  visible: false,
+});
 
 /** 获得支付信息 */
 async function getDetail() {
@@ -38,57 +68,227 @@ async function getDetail() {
   // 1.1 未传递订单编号
   if (!id.value) {
     message.error('未传递支付单号，无法查看对应的支付信息');
-    // goReturnUrl('cancel')
+    goReturnUrl('cancel');
     return;
   }
   const res = await getOrder(id.value);
   // 1.2 无法查询到支付信息
   if (!res) {
     message.error('支付订单不存在，请检查！');
-    // goReturnUrl('cancel')
+    goReturnUrl('cancel');
     return;
   }
   // 1.3 如果已支付、或者已关闭，则直接跳转
   if (res.status === PayOrderStatusEnum.SUCCESS.status) {
     message.success('支付成功');
-    // goReturnUrl('success')
+    goReturnUrl('success');
     return;
   } else if (res.status === PayOrderStatusEnum.CLOSED.status) {
     message.error('无法支付，原因：订单已关闭');
-    // goReturnUrl('close')
+    goReturnUrl('close');
     return;
   }
   payOrder.value = res;
 }
 
 function handlePay(channelCode: string) {
+  switch (channelCode) {
+    // 条形码支付，需要特殊处理
+    case PayChannelEnum.ALIPAY_BAR.code: {
+      title.value = '“支付宝”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
+    case PayChannelEnum.WX_BAR.code: {
+      title.value = '“微信”条码支付';
+      barCode.value = {
+        channelCode,
+        value: '',
+        visible: true,
+      };
+      modalApi.open();
+      break;
+    }
     // 微信公众号、小程序支付，无法在 PC 网页中进行
-  if (channelCode === PayChannelEnum.WX_PUB.code) {
+    case PayChannelEnum.WX_LITE.code: {
-    message.error('微信公众号支付：不支持 PC 网站');
-    return;
-  }
-  if (channelCode === PayChannelEnum.WX_LITE.code) {
       message.error('微信小程序：不支持 PC 网站');
-    return;
+      break;
     }
-  const data = {
+    case PayChannelEnum.WX_PUB.code: {
+      message.error('微信公众号支付：不支持 PC 网站');
+      break;
+    }
+    default: {
+      submit(channelCode);
+      break;
+    }
+  }
+}
+
+async function submit(channelCode: string) {
+  try {
+    const submitParam = {
       id: id.value,
       channelCode,
       returnUrl: location.href, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
+      ...buildSubmitParam(channelCode),
     };
-  formModalApi.setData(data).open();
+    const data = await submitOrder(submitParam);
+    // 直接返回已支付的情况，例如说扫码支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      message.success('支付成功！');
+      goReturnUrl('success');
+      return;
+    }
+
+    // 展示对应的界面
+    switch (data.displayMode) {
+      case PayDisplayModeEnum.APP.mode: {
+        displayApp(channelCode);
+        break;
+      }
+      case PayDisplayModeEnum.QR_CODE.mode: {
+        displayQrCode(channelCode, data);
+        break;
+      }
+      case PayDisplayModeEnum.URL.mode: {
+        displayUrl(data);
+        break;
+      }
+      // No default
+    }
+
+    // 打开轮询任务
+    createQueryInterval();
+  } finally {
+    // message.success('支付成功！')
+  }
 }
 
-function success(data?: { channelCode: string; data?: any }) {
+/** 构建提交支付的额外参数 */
-  if (!data) {
+function buildSubmitParam(channelCode: string) {
-    clearQueryInterval();
+  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
+  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+    return {
+      channelExtras: {
+        auth_code: barCode.value.value,
+      },
+    };
   }
-  if (data.channelCode === PayChannelEnum.ALIPAY_BAR.code) {
+  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
-    message.success('支付宝条码支付');
+  if (channelCode === PayChannelEnum.WX_BAR.code) {
-  } else if (data.channelCode === PayChannelEnum.WX_BAR.code) {
+    return {
-    message.success('微信条码支付');
+      channelExtras: {
+        authCode: barCode.value.value,
+      },
+    };
+  }
+  return {};
+}
+
+/** 提交支付后，URL 的展示形式 */
+function displayUrl(data: any) {
+  location.href = data.displayContent;
+}
+
+/** 提交支付后（扫码支付） */
+function displayQrCode(channelCode: string, data: any) {
+  title.value = '请使用手机浏览器“扫一扫”';
+  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
+    // 考虑到 WAP 测试，所以引导手机浏览器搞
+  } else if (channelCode.indexOf('alipay_') === 0) {
+    title.value = '请使用支付宝“扫一扫”扫码支付';
+  } else if (channelCode.indexOf('wx_') === 0) {
+    title.value = '请使用微信“扫一扫”扫码支付';
+  }
+  qrCode.value = {
+    url: data.displayContent,
+    visible: true,
+  };
+}
+
+/** 提交支付后（App） */
+function displayApp(channelCode: string) {
+  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
+    message.error('支付宝 App 支付：无法在网页支付！');
+  }
+  if (channelCode === PayChannelEnum.WX_APP.code) {
+    message.error('微信 App 支付：无法在网页支付！');
+  }
+}
+
+/** 轮询查询任务 */
+function createQueryInterval() {
+  if (interval.value) {
+    return;
+  }
+  interval.value = setInterval(async () => {
+    const data = await getOrder(id.value);
+    // 已支付
+    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
+      clearQueryInterval();
+      message.success('支付成功！');
+      goReturnUrl('success');
+    }
+    // 已取消
+    if (data.status === PayOrderStatusEnum.CLOSED.status) {
+      clearQueryInterval();
+      message.error('支付已关闭！');
+      goReturnUrl('close');
+    }
+  }, 1000 * 2);
+}
+
+/** 清空查询任务 */
+function clearQueryInterval() {
+  // 清空数据
+  qrCode.value = {
+    url: '',
+    visible: false,
+  };
+  barCode.value = {
+    channelCode: '',
+    value: '',
+    visible: false,
+  };
+  // 清空任务
+  clearInterval(interval.value);
+  interval.value = undefined;
+}
+
+/**
+ * 回到业务的 URL
+ *
+ * @param payResult 支付结果
+ *  ① success：支付成功
+ *  ② cancel：取消支付
+ *  ③ close：支付已关闭
+ */
+function goReturnUrl(payResult: string) {
+  // 清理任务
+  clearQueryInterval();
+
+  // 未配置的情况下，只能关闭
+  if (!returnUrl.value) {
+    closeCurrentTab();
+    return;
+  }
+
+  const url = returnUrl.value.includes('?')
+    ? `${returnUrl.value}&payResult=${payResult}`
+    : `${returnUrl.value}?payResult=${payResult}`;
+  // 如果有配置，且是 http 开头，则浏览器跳转
+  if (returnUrl.value.indexOf('http') === 0) {
+    location.href = url;
   } else {
-    message.success('支付成功');
+    closeCurrentTab();
+    push({ path: url });
   }
 }
 
@@ -98,8 +298,6 @@ onMounted(async () => {
 </script>
 <template>
   <Page auto-content-height>
-    <FormModal @success="success" />
-
     <Card class="mt-4">
       <Descriptions :column="3" :title="payOrder?.subject ?? '商品详情'">
         <Descriptions.Item label="支付单号">
@@ -112,7 +310,7 @@ onMounted(async () => {
           {{ payOrder?.body }}
         </Descriptions.Item>
         <Descriptions.Item label="支付金额">
-          {{ `￥${(payOrder?.price ? payOrder.price / 100.0 : 0).toFixed(2)}` }}
+          {{ `￥${fenToYuan(payOrder?.price || 0)}` }}
         </Descriptions.Item>
         <Descriptions.Item label="创建时间">
           {{ formatDate(payOrder?.createTime) }}
@@ -167,5 +365,26 @@ onMounted(async () => {
         </div>
       </div>
     </Card>
+    <Modal class="w-[40%]" :title="title">
+      <QRCode v-if="qrCode.visible" :value="qrCode.url" />
+      <Input
+        v-if="barCode.visible"
+        v-model:value="barCode.value"
+        placeholder="请输入条形码"
+        required
+      />
+      <div class="text-right" v-if="barCode.visible">
+        或使用
+        <Button
+          type="link"
+          danger
+          target="_blank"
+          href="https://baike.baidu.com/item/条码支付/10711903"
+        >
+          (扫码枪/扫码盒)
+        </Button>
+        扫码
+      </div>
+    </Modal>
   </Page>
 </template>

apps/web-antd/src/views/pay/cashier/modules/form.vue

@@ -1,155 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { Button, Input, message, QRCode } from 'ant-design-vue';
-
-import { submitOrder } from '#/api/pay/order';
-import {
-  PayChannelEnum,
-  PayDisplayModeEnum,
-  PayOrderStatusEnum,
-} from '#/utils';
-
-const emit = defineEmits(['success']);
-const title = ref('支付订单');
-const channelCode = ref('');
-const formData = ref();
-
-/** 展示形式：二维码 */
-const qrCode = ref({
-  url: '',
-  visible: false,
-});
-
-/** 展示形式：条形码 */
-const barCode = ref({
-  channelCode: '',
-  value: '',
-  visible: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    modalApi.lock();
-    try {
-      const submitParam = {
-        id: formData.value.id,
-        channelCode: formData.value.channelCode,
-        returnUrl: formData.value.returnUrl, // 支付成功后，支付渠道跳转回当前页；再由当前页，跳转回 {@link returnUrl} 对应的地址
-        ...buildSubmitParam(formData.value.channelCode),
-      };
-      const data = await submitOrder(submitParam);
-      // 直接返回已支付的情况，例如说扫码支付
-      if (data.status === PayOrderStatusEnum.SUCCESS.status) {
-        message.success('支付成功！');
-        emit('success');
-      }
-      // 展示对应的界面
-      switch (data.displayMode) {
-        case PayDisplayModeEnum.APP.mode: {
-          await modalApi.close();
-          emit('success', { channelCode });
-          break;
-        }
-        case PayDisplayModeEnum.QR_CODE.mode: {
-          await modalApi.close();
-          emit('success', { channelCode, data });
-          break;
-        }
-        case PayDisplayModeEnum.URL.mode: {
-          await modalApi.close();
-          emit('success', { channelCode, data });
-          break;
-        }
-        // No default
-      }
-    } catch (error) {
-      message.error(error as string);
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      formData.value = undefined;
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData();
-    if (!data || !data.id) {
-      return;
-    }
-    modalApi.lock();
-    formData.value = data;
-    try {
-      channelCode.value = formData.value.channelCode;
-      // 条形码支付，需要特殊处理
-      if (formData.value.channelCode === PayChannelEnum.ALIPAY_BAR.code) {
-        title.value = '“支付宝”条码支付';
-        barCode.value = {
-          channelCode: formData.value.channelCode,
-          value: formData.value.channelExtras.auth_code,
-          visible: true,
-        };
-      } else if (formData.value.channelCode === PayChannelEnum.WX_BAR.code) {
-        title.value = '“微信”条码支付';
-        barCode.value = {
-          channelCode: formData.value.channelCode,
-          value: formData.value.channelExtras.authCode,
-          visible: true,
-        };
-      }
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-
-/** 构建提交支付的额外参数 */
-function buildSubmitParam(channelCode: string) {
-  // ① 支付宝 BarCode 支付时，需要传递 authCode 条形码
-  if (channelCode === PayChannelEnum.ALIPAY_BAR.code) {
-    return {
-      channelExtras: {
-        auth_code: barCode.value.value,
-      },
-    };
-  }
-  // ② 微信 BarCode 支付时，需要传递 authCode 条形码
-  if (channelCode === PayChannelEnum.WX_BAR.code) {
-    return {
-      channelExtras: {
-        authCode: barCode.value.value,
-      },
-    };
-  }
-  return {};
-}
-
-</script>
-
-<template>
-  <Modal class="w-[600px]" :title="title">
-    <QRCode v-if="qrCode.visible" :value="qrCode.url" />
-    <Input
-      v-if="barCode.visible"
-      v-model:value="barCode.value"
-      placeholder="请输入条形码"
-      required
-    />
-    <div style="text-align: right" v-if="barCode.visible">
-      或使用
-      <Button
-        type="link"
-        danger
-        target="_blank"
-        href="https://baike.baidu.com/item/条码支付/10711903"
-      >
-        (扫码枪/扫码盒)
-      </Button>
-      扫码
-    </div>
-  </Modal>
-</template>