diff --git a/public/imgs/mainpage/dinglianghuoqu1.png b/public/imgs/mainpage/dinglianghuoqu1.png index 9ad0007..54d68d3 100644 Binary files a/public/imgs/mainpage/dinglianghuoqu1.png and b/public/imgs/mainpage/dinglianghuoqu1.png differ diff --git a/public/imgs/mainpage/dinglianghuoqu2.png b/public/imgs/mainpage/dinglianghuoqu2.png index ee38604..c389ec1 100644 Binary files a/public/imgs/mainpage/dinglianghuoqu2.png and b/public/imgs/mainpage/dinglianghuoqu2.png differ diff --git a/public/imgs/mainpage/huoqurongdou1.png b/public/imgs/mainpage/huoqurongdou1.png index 772e362..68fee2f 100644 Binary files a/public/imgs/mainpage/huoqurongdou1.png and b/public/imgs/mainpage/huoqurongdou1.png differ diff --git a/public/imgs/mainpage/huoqurongdou2.png b/public/imgs/mainpage/huoqurongdou2.png index fce0c08..68f4b54 100644 Binary files a/public/imgs/mainpage/huoqurongdou2.png and b/public/imgs/mainpage/huoqurongdou2.png differ diff --git a/public/imgs/mainpage/shangcheng1.png b/public/imgs/mainpage/shangcheng1.png index c525497..fc28b28 100644 Binary files a/public/imgs/mainpage/shangcheng1.png and b/public/imgs/mainpage/shangcheng1.png differ diff --git a/public/imgs/mainpage/shangcheng2.png b/public/imgs/mainpage/shangcheng2.png index 5abb7eb..64413aa 100644 Binary files a/public/imgs/mainpage/shangcheng2.png and b/public/imgs/mainpage/shangcheng2.png differ diff --git a/src/components/BottomNav.vue b/src/components/BottomNav.vue index 583ad18..c526f99 100644 --- a/src/components/BottomNav.vue +++ b/src/components/BottomNav.vue @@ -45,16 +45,16 @@
{ case '/mainpage': // return '/imgs/bottomnav/主页背景.png' return '/imgs/bottomnav/zhuye-background.png' - case '/myshop': + case '/shop': // return '/imgs/bottomnav/积分商城背景.png' return '/imgs/bottomnav/jifenshangcheng-background.png' case '/myprofile': diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue index 3476d8a..ff58105 100644 --- a/src/views/MainPage.vue +++ b/src/views/MainPage.vue @@ -526,33 +526,29 @@ export default { } .action-image1 { - width: 175%; + width: 100%; height: auto; max-width: 180px; object-fit: contain; border-radius: 8px; - margin-left: 50px; - margin-top: -5px; + margin-left: -10px; } .action-image2 { - width: 175%; + width: 120%; height: auto; max-width: 180px; object-fit: contain; border-radius: 8px; - margin-left: 12px; z-index: 1; } .action-image3 { - width: 175%; + width: 100%; height: auto; max-width: 180px; object-fit: contain; - border-radius: 8px; - margin-left: 20px; - margin-top: 0px; + margin-right: -10px; } .tips { @@ -569,7 +565,6 @@ export default { border-radius: 25px; box-shadow: 0 2px 8px rgba(67, 97, 238, 0.15); color: #22a7ff; - margin-top: -50px; } /* 热门资讯 */ diff --git a/src/views/Pay.vue b/src/views/Pay.vue index 52c61c7..2409fef 100644 --- a/src/views/Pay.vue +++ b/src/views/Pay.vue @@ -257,7 +257,7 @@ class="payment-option" :class="{ active: selectedPaymentMethod === 'alipay_wap' }" @click="selectPaymentMethod('alipay_wap')" - v-if="shouldShowPaymentMethod('alipay')" + v-if="shouldShowPaymentMethod('alipay_wap')" >
@@ -273,7 +273,7 @@
-
使用微信进行支付(¥{{ getRMBPrice() }})
- + --> @@ -394,7 +394,7 @@ import { Orange, Check } from '@element-plus/icons-vue' -import api, { buyAPI } from '@/utils/api' +import api, { buyAPI, paymentAPI } from '@/utils/api' import { getImageUrl } from '@/config' import { useUserStore } from '@/stores/user' @@ -656,19 +656,14 @@ const isPaymentMethodAvailable = (method) => { // 检查支付方式是否应该显示 const shouldShowPaymentMethod = (method) => { - // console.log(12345,method,items.value) - const can = ref(false) - // 检查商品是否支持所选支付方式 - items.value.forEach(item => { - item.paymentMethod.map(itemMethod => itemMethod === 'rongdou' ? 'beans' : itemMethod).forEach(itemMethod => { - // console.log(1234,itemMethod,method) - if (itemMethod === method) { - can.value = true - } - }) - }) - // console.log(111,can.value) - return can.value + const normalizeMethod = (m) => { + if (m === 'rongdou') return 'beans' + if (m === 'alipay') return 'alipay_wap' + if (m === 'wechatpay') return 'wechat_h5' + return m + } + const desired = normalizeMethod(method) + return items.value.some(item => Array.isArray(item.paymentMethod) && item.paymentMethod.map(normalizeMethod).includes(desired)) } const fetchPaymentData = async () => { @@ -717,7 +712,7 @@ const fetchPaymentData = async () => { beansAmount: totalBeansPrice, // 融豆金额 orderId: data.id || null, // 订单ID orderNo: data.order_no || '', // 订单号 - items: items + items: items.value } getCouponList() @@ -812,13 +807,20 @@ const confirmPayment = async () => { const response = await buyAPI.buy({ paymentMethod: selectedPaymentMethod.value, amount: Math.round(discountedRMB * 100), - couponRecordId: selectedCoupon.value || undefined + couponRecordId: selectedCoupon.value || undefined, + coupon_id: selectedCoupon.value || undefined, + returnUrl: `http://192.168.0.26:5173/frontend/pay/${paymentData.value.orderId}` }) if (response?.data?.success) { const payUrl = response.data.data?.payUrl + const outTradeNo = response.data.data?.outTradeNo + startPaymentStatusPolling(outTradeNo) + localStorage.setItem('pending_out_trade_no', outTradeNo) + // console.log(12345, response.data) if (payUrl) { window.location.href = payUrl + // const payWindow = window.open(payUrl, '_blank') return } else { throw new Error('未获取到支付链接') @@ -857,6 +859,54 @@ const confirmPayment = async () => { } } +const startPaymentStatusPolling = (outTradeNo) => { + const pollInterval = setInterval(async () => { + + try { + const response = await buyAPI.pay(outTradeNo,{ tradeType: 'ALIPAY_WAP' }) + // await buyAPI.test() + // console.log('查询支付状态响应:', response.data) + + if (response.data.success) { + const orderData = { + orderId: paymentData.value.orderId, + addressId: selectedAddress.value.id, + paymentMethod: 'alipay_wap', + pointsAmount: paymentData.value.pointsAmount, + beansAmount: paymentData.value.beansAmount, + couponRecordId: selectedCoupon.value || undefined + } + + const response = await api.post('/orders/confirm-payment', orderData) + ElMessage.success('发送请求!') + if (response.data.success) { + ElMessage.success('订单创建成功!') + router.push({ + path: '/payloading', + query: { orderId: paymentData.value.orderId } + }) + ElMessage.success('支付成功!') + localStorage.removeItem('pending_out_trade_no') + clearInterval(pollInterval) + } else { + localStorage.removeItem('pending_out_trade_no') + clearInterval(pollInterval) + ElMessage.error('支付失败,请重试') + } + } + } catch (error) { + console.error('查询支付状态失败:', error) + clearInterval(pollInterval) + }}, 3000) // 每3秒查询一次 + + // 5分钟后停止轮询 + setTimeout(() => { + clearInterval(pollInterval) + localStorage.removeItem('pending_out_trade_no') + ElMessage.warning('支付超时,请检查支付状态或重新支付') + }, 300000) +} + const getCouponList = async () => { try { const response = await api.get(`/coupon/user/${user.id}`) @@ -874,6 +924,9 @@ const getCouponList = async () => { // 页面初始化 onMounted(() => { + if (localStorage.getItem('pending_out_trade_no')) { + startPaymentStatusPolling(localStorage.getItem('pending_out_trade_no')) + } fetchPaymentData() }) diff --git a/src/views/PayLoading.vue b/src/views/PayLoading.vue index cff449e..013c8bd 100644 --- a/src/views/PayLoading.vue +++ b/src/views/PayLoading.vue @@ -267,6 +267,7 @@ const fetchOrderData = async () => { // 生命周期 onMounted(() => { + localStorage.removeItem('pending_out_trade_no') fetchOrderData() }) diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue index f4ca4a2..a4cacfa 100644 --- a/src/views/ProductDetail.vue +++ b/src/views/ProductDetail.vue @@ -410,6 +410,9 @@ const toggleDetails = () => { onMounted(() => { //getProductDetail() getUserPoints() + if (localStorage.getItem('pending_out_trade_no')) { + localStorage.removeItem('pending_out_trade_no') + } }) watch( @@ -488,11 +491,22 @@ watch( /* 小图容器样式 */ .small-images { - display: flex; - justify-content: center; + display: grid; + grid-auto-flow: column; /* 水平排列 */ + grid-auto-columns: max-content; /* 根据内容宽度 */ gap: 12px; margin-top: 16px; - flex-wrap: wrap; + overflow-x: auto; + overflow-y: hidden; + padding-bottom: 8px; + -webkit-overflow-scrolling: touch; + + scrollbar-width: none; + -ms-overflow-style: none; +} + +.small-images::-webkit-scrollbar { + display: none; } /* 小图样式 */