From 5d0bdef65037e8398734885dd5dba16bb80f6763 Mon Sep 17 00:00:00 2001
From: qiube <18969599531@163.com>
Date: Mon, 22 Dec 2025 17:10:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(payment):=20=E6=96=B0=E5=A2=9E=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E8=AE=A2=E5=8D=95=E5=88=9B=E5=BB=BA=E5=92=8C=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=9F=A5=E8=AF=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加创建支付订单接口
- 添加查询订单状态接口
- 添加获取收银台页面URL方法
- 创建支付结果展示页面 PaymentResult.vue
- 实现订单信息展示和状态判断逻辑
- 添加支付成功、失败、审核中等状态显示
- 集成 Element Plus 的结果页组件和描述列表
- 实现继续支付和查询订单操作按钮
---
 src/api/payment.js          |  30 +++++++
 src/views/PaymentResult.vue | 171 ++++++++++++++++++++++++++++++++++++
 2 files changed, 201 insertions(+)
 create mode 100644 src/api/payment.js
 create mode 100644 src/views/PaymentResult.vue

diff --git a/src/api/payment.js b/src/api/payment.js
new file mode 100644
index 0000000..1ab2c68
--- /dev/null
+++ b/src/api/payment.js
@@ -0,0 +1,30 @@
+import request from './request'
+
+/**
+ * 创建支付订单
+ */
+export function createPaymentOrder(data) {
+  return request({
+    url: '/payment/checkout',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 查询订单状态
+ */
+export function getOrderStatus(merchantTransactionId) {
+  return request({
+    url: `/payment/order/${merchantTransactionId}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 获取收银台页面URL
+ */
+export function getCheckoutPageUrl(token) {
+  return `/api/payment/checkout/page?token=${token}`
+}
+
diff --git a/src/views/PaymentResult.vue b/src/views/PaymentResult.vue
new file mode 100644
index 0000000..444df52
--- /dev/null
+++ b/src/views/PaymentResult.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="payment-result">
+    <el-card>
+      <div class="result-container">
+        <el-result
+          :icon="resultIcon"
+          :title="resultTitle"
+          :sub-title="resultSubTitle"
+        >
+          <template #extra>
+            <el-descriptions :column="1" border>
+              <el-descriptions-item label="订单号">
+                {{ orderInfo.merchantTransactionId || '未知' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="交易流水号">
+                {{ orderInfo.transactionId || '暂无' }}
+              </el-descriptions-item>
+              <el-descriptions-item label="订单状态">
+                <el-tag :type="statusTagTypeComputed">{{ orderInfo.statusText }}</el-tag>
+              </el-descriptions-item>
+              <el-descriptions-item label="交易金额" v-if="orderInfo.amount">
+                {{ orderInfo.amount }} {{ orderInfo.currency }}
+              </el-descriptions-item>
+              <el-descriptions-item label="创建时间" v-if="orderInfo.createTime">
+                {{ orderInfo.createTime }}
+              </el-descriptions-item>
+            </el-descriptions>
+
+            <div class="action-buttons">
+              <el-button type="primary" @click="goToCreate">继续支付</el-button>
+              <el-button @click="goToQuery">查询订单</el-button>
+            </div>
+          </template>
+        </el-result>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { getOrderStatus } from '../api/payment'
+import { getStatusText, getStatusTagType } from '../utils/helpers'
+
+const route = useRoute()
+const router = useRouter()
+
+const orderInfo = ref({
+  merchantTransactionId: '',
+  transactionId: '',
+  status: '',
+  statusText: '',
+  amount: '',
+  currency: '',
+  createTime: ''
+})
+
+const resultIcon = computed(() => {
+  const status = orderInfo.value.status?.toUpperCase()
+  if (status === 'SUCCESS' || status === 'SUCCESSFUL') {
+    return 'success'
+  } else if (status === 'FAILED' || status === 'FAILURE') {
+    return 'error'
+  } else if (status === 'REVIEW') {
+    return 'warning'
+  }
+  return 'info'
+})
+
+const resultTitle = computed(() => {
+  const status = orderInfo.value.status?.toUpperCase()
+  if (status === 'SUCCESS' || status === 'SUCCESSFUL') {
+    return '支付成功'
+  } else if (status === 'FAILED' || status === 'FAILURE') {
+    return '支付失败'
+  } else if (status === 'REVIEW') {
+    return '订单审核中'
+  }
+  return '支付处理中'
+})
+
+const resultSubTitle = computed(() => {
+  const status = orderInfo.value.status?.toUpperCase()
+  if (status === 'SUCCESS' || status === 'SUCCESSFUL') {
+    return '您的订单已成功支付'
+  } else if (status === 'FAILED' || status === 'FAILURE') {
+    return '支付失败，请重试或联系客服'
+  } else if (status === 'REVIEW') {
+    return '您的订单正在审核中，请耐心等待'
+  }
+  return '订单正在处理中，请稍候'
+})
+
+const statusTagTypeComputed = computed(() => {
+  return getStatusTagType(orderInfo.value.status)
+})
+
+const loadOrderInfo = async () => {
+  const merchantTransactionId = route.query.merchantTransactionId
+  const status = route.query.status
+
+  if (!merchantTransactionId) {
+    // 如果没有订单号，只显示状态
+    orderInfo.value.status = status || 'UNKNOWN'
+    orderInfo.value.statusText = getStatusText(status)
+    return
+  }
+
+  try {
+    const response = await getOrderStatus(merchantTransactionId)
+    if (response.code === '0000' && response.data) {
+      orderInfo.value = {
+        merchantTransactionId: response.data.merchantTransactionId,
+        transactionId: response.data.transactionId || '',
+        status: response.data.status,
+        statusText: getStatusTextLocal(response.data.status),
+        amount: response.data.amount,
+        currency: response.data.currency,
+        createTime: response.data.createTime
+      }
+    } else {
+      ElMessage.error(response.message || '查询订单失败')
+    }
+  } catch (error) {
+    console.error('查询订单失败:', error)
+    // 如果查询失败，使用URL参数中的状态
+    orderInfo.value.merchantTransactionId = merchantTransactionId
+    orderInfo.value.status = status || 'UNKNOWN'
+    orderInfo.value.statusText = getStatusTextLocal(status)
+  }
+}
+
+const getStatusTextLocal = (status) => {
+  return getStatusText(status)
+}
+
+const goToCreate = () => {
+  router.push('/')
+}
+
+const goToQuery = () => {
+  router.push('/query')
+}
+
+onMounted(() => {
+  loadOrderInfo()
+})
+</script>
+
+<style scoped>
+.payment-result {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.result-container {
+  padding: 20px;
+}
+
+.action-buttons {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.action-buttons .el-button {
+  margin: 0 10px;
+}
+</style>
+