From 1bb83df40b34ab861e29181c1758293e36e4e7b1 Mon Sep 17 00:00:00 2001 From: sunzhuangzhuang <961120009@qq.com> Date: Fri, 5 Sep 2025 16:53:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/index.js | 2 + src/stores/user.js | 2 + src/utils/api.js | 15 +++++++ src/views/Pay.vue | 83 ++++++++++++++++++++++++++++------ src/views/Payment.vue | 100 ++++++++++++++++++++++++++++------------- src/views/Register.vue | 4 -- vite.config.js | 1 + 7 files changed, 157 insertions(+), 50 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index febe8d9..ac86b83 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -300,6 +300,8 @@ router.beforeEach(async (to, from, next) => { } } else { // 普通用户页面认证逻辑 + console.log(userStore.isAuthenticated,'isAuthenticated'); + if (!userStore.isAuthenticated) { // 尝试从本地存储恢复登录状态 await userStore.checkAuth() diff --git a/src/stores/user.js b/src/stores/user.js index 5cb6528..a3b398c 100644 --- a/src/stores/user.js +++ b/src/stores/user.js @@ -99,6 +99,8 @@ export const useUserStore = defineStore('user', () => { if (response.data.success) { // 检查是否需要支付 if (response.data.needPayment) { + setToken(response.data.token) + setUser(response.data.user) // 需要支付的情况，返回成功状态和支付相关信息 return { success: true, diff --git a/src/utils/api.js b/src/utils/api.js index 120c199..7710f94 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -214,6 +214,21 @@ export const uploadAPI = { } } +// 支付相关API +export const paymentAPI = { + // 获取支付方式 + getMethods: () => request.get('/payment/methods'), + + // 创建支付订单 + createOrder: (data) => request.post('/payment/create-order', data), + + // 查询支付状态 + queryStatus: (outTradeNo) => request.get(`/payment/query-status/${outTradeNo}`), + + // 获取支付记录 + getOrders: (params = {}) => request.get('/payment/orders', { params }) +} + // 转账相关API export const transferAPI = { // 获取公户信息 diff --git a/src/views/Pay.vue b/src/views/Pay.vue index 3e6cd99..0ca9743 100644 --- a/src/views/Pay.vue +++ b/src/views/Pay.vue @@ -244,6 +244,25 @@ + + +
+
+ + + + +
+
+
支付宝支付
+
使用支付宝进行支付
+
+ +
@@ -347,7 +366,7 @@ const router = useRouter() const loading = ref(false) const paying = ref(false) -const selectedPaymentMethod = ref('') // 当前选择的支付方式 +const selectedPaymentMethod = ref('') // 支持微信支付和支付宝支付 const paymentData = ref({ totalAmount: 0, pointsAmount: 0, @@ -387,6 +406,15 @@ const selectPaymentMethod = async (method) => { const totalPointsPrice = paymentData.value.items.reduce((sum, item) => sum + (item.points_price * item.quantity), 0) const EXCHANGE_RATE = 10000 // 1融豆 = 10000积分 + // 支付宝支付和微信支付直接选择，不需要余额检查 + if (method === 'alipay_wap' || method === 'wechat_h5') { + selectedPaymentMethod.value = method + paymentData.value.totalAmount = totalPointsPrice + paymentData.value.pointsAmount = 0 + paymentData.value.beansAmount = 0 + return + } + // 检查支付方式是否可用 if (!isPaymentMethodAvailable(method)) { let message = '' @@ -646,17 +674,26 @@ const confirmPayment = async () => { } try { - // 根据商品价格显示确认信息 + // 根据支付方式和商品价格显示确认信息 let confirmMessage = '' - const totalPoints = paymentData.value.pointsAmount - const totalRongdou = paymentData.value.beansAmount - if (totalPoints > 0 && totalRongdou > 0) { - confirmMessage = `确认支付 ${totalPoints} 积分 + ${totalRongdou} 融豆？` - } else if (totalPoints === 0 && totalRongdou > 0) { - confirmMessage = `确认支付 ${totalRongdou} 融豆？` - } else if (totalRongdou === 0 && totalPoints > 0) { - confirmMessage = `确认支付 ${totalPoints} 积分？` + // 微信支付 + if (selectedPaymentMethod.value === 'wechat_h5') { + confirmMessage = '确认使用微信支付？' + } else if (selectedPaymentMethod.value === 'alipay_wap') { + confirmMessage = '确认使用支付宝支付？' + } else { + // 积分或融豆支付 + const totalPoints = paymentData.value.pointsAmount + const totalRongdou = paymentData.value.beansAmount + + if (totalPoints > 0 && totalRongdou > 0) { + confirmMessage = `确认支付 ${totalPoints} 积分 + ${totalRongdou} 融豆？` + } else if (totalPoints === 0 && totalRongdou > 0) { + confirmMessage = `确认支付 ${totalRongdou} 融豆？` + } else if (totalRongdou === 0 && totalPoints > 0) { + confirmMessage = `确认支付 ${totalPoints} 积分？` + } } await ElMessageBox.confirm( @@ -682,10 +719,30 @@ const confirmPayment = async () => { // 向后端发送订单支付请求 const response = await api.post('/orders/confirm-payment', orderData) - console.log(orderData) if (response.data.success) { - console.log(orderData) + // 微信支付 + if (selectedPaymentMethod.value === 'wechat_h5') { + // 获取支付URL并跳转 + const payUrl = response.data.data?.payUrl + if (payUrl) { + // 跳转到第三方支付页面 + window.location.href = payUrl + return // 不再执行后续代码 + } + } + + // 支付宝支付 + if (selectedPaymentMethod.value === 'alipay_wap') { + // 获取支付URL并跳转 + const payUrl = response.data.data?.payUrl + if (payUrl) { + // 跳转到支付宝支付页面 + window.location.href = payUrl + return // 不再执行后续代码 + } + } + ElMessage.success('订单创建成功！') // 跳转到PayLoading页面，传递订单ID @@ -696,11 +753,9 @@ const confirmPayment = async () => { } }) } else { - console.log(orderData) throw new Error(response.data.message || '创建订单失败') } } catch (error) { - console.log(orderData) if (error !== 'cancel') { ElMessage.error(error.message || '创建订单失败，请重试') } diff --git a/src/views/Payment.vue b/src/views/Payment.vue index 8fffd80..eaa9767 100644 --- a/src/views/Payment.vue +++ b/src/views/Payment.vue @@ -14,15 +14,28 @@
-
+
微信支付 -
- +
+ +
+
+ +
+
+ + + + +
+ 支付宝支付 +
+
@@ -58,17 +71,17 @@ import { useRoute, useRouter } from 'vue-router' import { ElMessage, ElMessageBox } from 'element-plus' import { Check, SuccessFilled, CircleCloseFilled, Loading } from '@element-plus/icons-vue' import { useUserStore } from '@/stores/user' -import api from '@/utils/api' +import api, { paymentAPI } from '@/utils/api' const route = useRoute() const router = useRouter() const userStore = useUserStore() // 响应式数据 -const selectedMethod = ref('wechat') +const selectedMethod = ref('wechat_h5') // 默认选择微信支付 const paymentLoading = ref(false) const paymentStatus = ref('') -const paymentAmount = ref(99) // 注册费用 +const paymentAmount = ref(399) // 注册费用 const userInfo = reactive({ userId: '', }) @@ -90,7 +103,8 @@ const getUserInfo = async () => { // 处理支付 const handlePayment = async () => { - if (!selectedMethod.value) { + // 验证支付方式 + if (!['wechat_h5', 'alipay_wap'].includes(selectedMethod.value)) { ElMessage.error('请选择支付方式') return } @@ -113,25 +127,28 @@ const handlePayment = async () => { throw new Error('无法获取用户信息，请重新登录') } - // 创建支付订单 - const response = await api.post('/wechat-pay/create-registration-order', { + // 创建统一支付订单 + const response = await paymentAPI.createOrder({ userId: userId, amount: paymentAmount.value, - description: '用户注册激活费用' - }, token ? { - headers: { - Authorization: `Bearer ${token}` - } - } : {}) + description: '用户注册激活费用', + paymentMethod: selectedMethod.value + }) if (response.data.success) { - const { h5_url, out_trade_no } = response.data.data + const { outTradeNo, payUrl } = response.data.data - // 跳转到微信H5支付页面 - window.location.href = h5_url + // 根据支付方式跳转到对应支付页面 + if (selectedMethod.value === 'wechat_h5') { + // 微信支付 - 跳转到支付页面 + window.location.href = payUrl + } else if (selectedMethod.value === 'alipay_wap') { + // 支付宝支付 - 跳转到支付页面 + window.location.href = payUrl + } // 开始轮询支付状态 - startPaymentStatusPolling(out_trade_no, token) + startPaymentStatusPolling(outTradeNo, token) } else { throw new Error(response.data.message || '创建支付订单失败') } @@ -148,16 +165,22 @@ const handlePayment = async () => { const startPaymentStatusPolling = (outTradeNo, token) => { const pollInterval = setInterval(async () => { try { - const response = await api.get(`/wechat-pay/query-status/${outTradeNo}`, token ? { - headers: { - Authorization: `Bearer ${token}` - } - } : {}) - - if (response.data.success) { - const status = response.data.data.trade_state + const response = await paymentAPI.queryStatus(outTradeNo, token) - if (status === 'SUCCESS') { + if (response.data.success) { + // 处理支付状态（微信和支付宝） + const data = response.data.data; + let isPaid = false; + + if (selectedMethod.value === 'wechat_h5') { + // 微信支付状态判断 + isPaid = data.trade_state === 'SUCCESS'; + } else if (selectedMethod.value === 'alipay_wap') { + // 支付宝支付状态判断 + isPaid = data.trade_status === 'TRADE_SUCCESS'; + } + + if (isPaid) { clearInterval(pollInterval) paymentStatus.value = 'success' ElMessage.success('支付成功！账户已激活') @@ -174,10 +197,23 @@ const startPaymentStatusPolling = (outTradeNo, token) => { router.push('/login') }, 2000) } - } else if (status === 'CLOSED' || status === 'REVOKED' || status === 'PAYERROR') { - clearInterval(pollInterval) - paymentStatus.value = 'failed' - ElMessage.error('支付失败，请重试') + } else { + // 检查支付失败状态 + let isFailed = false; + + if (selectedMethod.value === 'wechat_h5') { + // 微信支付失败状态 + isFailed = data.trade_state === 'CLOSED' || data.trade_state === 'REVOKED' || data.trade_state === 'PAYERROR'; + } else if (selectedMethod.value === 'alipay_wap') { + // 支付宝支付失败状态 + isFailed = data.trade_status === 'TRADE_CLOSED'; + } + + if (isFailed) { + clearInterval(pollInterval) + paymentStatus.value = 'failed' + ElMessage.error('支付失败，请重试') + } } } } catch (error) { diff --git a/src/views/Register.vue b/src/views/Register.vue index e5fc346..a9330ef 100644 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -467,10 +467,6 @@ const handleRegister = async () => { // 跳转到支付页面 router.push({ path: '/payment', - query: { - token: result.token, - userId: result.user.id - } }) } else { ElMessage.success('注册成功！请登录') diff --git a/vite.config.js b/vite.config.js index cd1c385..4ce0d23 100644 --- a/vite.config.js +++ b/vite.config.js @@ -11,6 +11,7 @@ export default defineConfig({ } }, server: { + host: '0.0.0.0', // 添加这一行 port: 5173, proxy: { '/api': {