页面调整，完善支付宝支付

src/components/BottomNav.vue

@@ -45,16 +45,16 @@
     <!-- 积分商城 -->
     <div 
       class="nav-item" 
-      :class="{ active: isActive('/myshop') }"
-      @click="handleNavClick('/myshop')"
+      :class="{ active: isActive('/shop') }"
+      @click="handleNavClick('/shop')"
     >
       <img 
         src="/imgs/bottomnav/jifenshangcheng.png"
         alt="积分商城" 
         class="nav-image"
-        :class="{ 'nav-image-active': isActive('/myshop') }"
+        :class="{ 'nav-image-active': isActive('/shop') }"
       />
-      <span class="nav-text" :class="{ 'nav-text-active': isActive('/myshop') }">积分商城</span>
+      <span class="nav-text" :class="{ 'nav-text-active': isActive('/shop') }">积分商城</span>
     </div>
     <!-- 个人中心 -->
     <div 
@@ -107,7 +107,7 @@ const backgroundImage = computed(() => {
     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':

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;
 }
 
 /* 热门资讯 */

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')"
           >
             <div class="payment-icon" style="color: #1677FF;">
               <svg viewBox="0 0 24 24" width="20" height="20">
@@ -273,7 +273,7 @@
           </div>
 
           <!-- 微信支付选项 -->
-          <div 
+          <!-- <div 
             class="payment-option" 
             :class="{ active: selectedPaymentMethod === 'wechat_h5' }"
             @click="selectPaymentMethod('wechat_h5')"
@@ -290,7 +290,7 @@
               <div class="payment-desc">使用微信进行支付（¥{{ getRMBPrice() }}）</div>
             </div>
             <el-icon class="check-icon" v-if="selectedPaymentMethod === 'wechat_h5'"><Check /></el-icon>
-          </div>
+          </div> -->
         </div>
       </div>
 
@@ -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()
 })
 

src/views/PayLoading.vue

@@ -267,6 +267,7 @@ const fetchOrderData = async () => {
 
 // 生命周期
 onMounted(() => {
+  localStorage.removeItem('pending_out_trade_no')
   fetchOrderData()
 })
 </script>

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;
 }
 
 /* 小图样式 */