支付模块重构完成

web/src/views/ChatPlus.vue

@@ -340,7 +340,7 @@
                                 <VideoPause />
                               </el-icon>
                             </el-button>
-                            <el-button @click="sendMessage" style="color: #754ff6" v-else>
+                            <el-button @click="sendMessage()" style="color: #754ff6" v-else>
                               <el-tooltip class="box-item" effect="dark" content="发送">
                                 <el-icon><Promotion /></el-icon>
                               </el-tooltip>
@@ -832,7 +832,7 @@ const sendSSERequest = async (message) => {
 }
 
 // 发送消息
-const sendMessage = (messageId) => {
+const sendMessage = (messageId = 0) => {
   if (!isLogin.value) {
     console.log('未登录')
     store.setShowLoginDialog(true)
@@ -895,7 +895,7 @@ const sendMessage = (messageId) => {
     tools: toolSelected.value,
     stream: stream.value,
     files: files.value,
-    last_msg_id: messageId,
+    last_msg_id: messageId || 0,
   })
 
   prompt.value = ''

web/src/views/Member.vue

@@ -35,69 +35,56 @@
         <div class="profile-bg"></div>
 
         <div class="product-box">
-          <!-- <div class="info" v-if="orderPayInfoText !== ''">
-            <el-alert type="success" show-icon :closable="false" effect="dark">
-              <strong>说明:</strong> {{ vipInfoText }}
-            </el-alert>
-          </div> -->
-
-          <el-row v-if="list.length > 0" :gutter="20" class="list-box">
-            <el-col v-for="item in list" :key="item" :span="6">
+          <el-row v-if="list.length > 0" :gutter="24" class="list-box">
+            <el-col
+              v-for="item in list"
+              :key="item"
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              class="product-col"
+            >
               <div class="product-item">
-                <div class="image-container">
-                  <el-image :src="vipImg" fit="cover" />
-                </div>
-                <div class="product-title">
-                  <span class="name">{{ item.name }}</span>
-                </div>
-                <div class="product-info">
-                  <div class="info-line">
-                    <span class="label">商品原价：</span>
-                    <span class="price"
-                      ><del>￥{{ item.price }}</del></span
-                    >
+                <div class="product-header">
+                  <div class="image-container">
+                    <el-image :src="vipImg" fit="cover" />
+                    <div class="image-overlay">
+                      <div class="vip-badge">热销</div>
+                    </div>
                   </div>
-                  <div class="info-line">
-                    <span class="label">优惠价：</span>
-                    <span class="discount">￥{{ item.discount }}</span>
+                  <div class="product-title">
+                    <h3 class="name">{{ item.name }}</h3>
+                    <p class="description">{{ item.description || '全模型通用算力' }}</p>
                   </div>
-                  <div class="info-line">
-                    <span class="label">有效期：</span>
-                    <span class="expire" v-if="item.days > 0">{{ item.days }}天</span>
-                    <span class="expire" v-else>长期有效</span>
+                </div>
+
+                <div class="product-content">
+                  <div class="price-section">
+                    <div class="price-info">
+                      <span class="currency">￥</span>
+                      <span class="price-value">{{ item.price }}</span>
+                    </div>
                   </div>
 
-                  <div class="info-line">
-                    <span class="label">算力值：</span>
-                    <span class="power">{{ item.power }}</span>
+                  <div class="features-list" v-if="item.features">
+                    <div class="feature-item" v-for="feature in item.features" :key="feature">
+                      <i class="iconfont icon-check"></i>
+                      <span>{{ feature }}</span>
+                    </div>
                   </div>
+                </div>
 
-                  <div class="pay-way">
-                    <span
-                      type="primary"
-                      v-for="payWay in payWays"
-                      @click="pay(item, payWay)"
-                      :key="payWay"
-                    >
-                      <el-button v-if="payWay.pay_type === 'alipay'" color="#15A6E8" circle>
-                        <i class="iconfont icon-alipay"></i>
-                      </el-button>
-                      <el-button v-else-if="payWay.pay_type === 'qqpay'" circle>
-                        <i class="iconfont icon-qq"></i>
-                      </el-button>
-                      <el-button v-else-if="payWay.pay_type === 'paypal'" class="paypal" round>
-                        <i class="iconfont icon-paypal"></i>
-                      </el-button>
-                      <el-button v-else-if="payWay.pay_type === 'jdpay'" color="#E1251B" circle>
-                        <i class="iconfont icon-jd-pay"></i>
-                      </el-button>
-                      <el-button v-else-if="payWay.pay_type === 'douyin'" class="douyin" circle>
-                        <i class="iconfont icon-douyin"></i>
-                      </el-button>
-                      <el-button v-else circle class="wechat" color="#67C23A">
-                        <i class="iconfont icon-wechat-pay"></i>
-                      </el-button>
-                    </span>
+                <div class="product-actions">
+                  <div class="payment-buttons">
+                    <button class="payment-btn wechat-btn" @click="wxPay(item)">
+                      <i class="iconfont icon-wechat-pay"></i>
+                      <span>微信支付</span>
+                    </button>
+                    <button class="payment-btn alipay-btn" @click="alipay(item)">
+                      <i class="iconfont icon-alipay"></i>
+                      <span>支付宝</span>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -154,23 +141,20 @@
       </el-dialog>
     </div>
 
+    <!--支付二维码-->
     <el-dialog
-      v-model="showDialog"
-      :show-close="false"
-      :close-on-click-modal="false"
-      hide-footer
-      width="auto"
+      v-model="showQrCode"
+      :show-close="true"
+      style="width: 334px; height: 368px"
       class="pay-dialog"
     >
-      <div v-if="qrImg !== ''">
-        <div class="product-info">
-          请使用微信扫码支付：<span class="price">￥{{ price }}</span>
+      <template #header>
+        <div class="flex items-center justify-center text-base">
+          <span style="color: var(--el-text-color-regular)">{{ title }}</span>
         </div>
-        <el-image :src="qrImg" fit="cover" />
-      </div>
-      <div style="padding-bottom: 10px; text-align: center">
-        <el-button type="success" @click="payCallback(true)">支付成功</el-button>
-        <el-button type="danger" @click="payCallback(false)">支付失败</el-button>
+      </template>
+      <div class="qr-container">
+        <el-image :src="qrImg" style="height: 300px; width: 300px" />
       </div>
     </el-dialog>
   </div>
@@ -188,7 +172,9 @@ import { useSharedStore } from '@/store/sharedata'
 import { httpGet, httpPost } from '@/utils/http'
 import { ElMessage } from 'element-plus'
 import QRCode from 'qrcode'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, onUnmounted } from 'vue'
+import { showLoading, closeLoading } from '@/utils/dialog'
+import { isMobile } from '@/utils/libs'
 
 const list = ref([])
 const vipImg = ref('/images/menu/member.png')
@@ -203,15 +189,13 @@ const isLogin = ref(false)
 const orderTimeout = ref(1800)
 const loading = ref(true)
 const loadingText = ref('加载中...')
-const orderPayInfoText = ref('')
 
-const payWays = ref([])
-const vipInfoText = ref('')
 const store = useSharedStore()
 const userOrderKey = ref(0)
-const showDialog = ref(false)
+const showQrCode = ref(false)
 const qrImg = ref('')
-const price = ref(0)
+const title = ref('')
+const handler = ref(null)
 
 onMounted(() => {
   checkSession()
@@ -236,68 +220,78 @@ onMounted(() => {
     .then((res) => {
       rewardImg.value = res.data['reward_img']
       enableReward.value = res.data['enabled_reward']
-      orderPayInfoText.value = res.data['order_pay_info_text']
       if (res.data['order_pay_timeout'] > 0) {
         orderTimeout.value = res.data['order_pay_timeout']
       }
-      vipInfoText.value = res.data['vip_info_text']
     })
     .catch((e) => {
       ElMessage.error('获取系统配置失败：' + e.message)
     })
-
-  httpGet('/api/payment/payWays')
-    .then((res) => {
-      payWays.value = res.data
-    })
-    .catch((e) => {
-      ElMessage.error('获取支付方式失败：' + e.message)
-    })
 })
 
-const pay = (product, payWay) => {
-  if (!isLogin.value) {
-    store.setShowLoginDialog(true)
-    return
-  }
-  loading.value = true
-  loadingText.value = '正在生成支付订单...'
-  let host = import.meta.env.VITE_API_HOST
-  if (host === '') {
-    host = `${location.protocol}//${location.host}`
-  }
-  httpPost(`${import.meta.env.VITE_API_HOST}/api/payment/doPay`, {
-    product_id: product.id,
-    pay_way: payWay.pay_way,
-    pay_type: payWay.pay_type,
-    user_id: user.value.id,
-    host: host,
-    device: 'jump',
+const selectedPid = ref(0)
+const wxPay = (product) => {
+  selectedPid.value = product.id
+  title.value = '请打开微信扫码支付'
+  generateOrder('wxpay')
+}
+
+const alipay = (product) => {
+  selectedPid.value = product.id
+  title.value = '请打开支付宝扫码支付'
+  generateOrder('alipay')
+}
+
+const generateOrder = (payWay) => {
+  showLoading('正在生成支付订单...')
+  // 生成支付订单
+  httpPost('/api/payment/create', {
+    pid: selectedPid.value,
+    pay_way: payWay,
+    domain: `${window.location.protocol}//${window.location.host}`,
+    device: isMobile() ? 'mobile' : 'pc',
   })
     .then((res) => {
-      showDialog.value = true
-      loading.value = false
-      if (payWay.pay_way === 'wechat') {
-        price.value = Number(product.discount)
-        QRCode.toDataURL(res.data, { width: 300, height: 300, margin: 2 }, (error, url) => {
+      closeLoading()
+
+      if (isMobile()) {
+        window.location.href = res.data.pay_url
+      } else {
+        QRCode.toDataURL(res.data.pay_url, { width: 300, height: 300, margin: 2 }, (error, url) => {
           if (error) {
             console.error(error)
           } else {
             qrImg.value = url
           }
         })
-      } else {
-        window.open(res.data, '_blank')
+        // 查询订单状态
+        if (handler.value) {
+          clearTimeout(handler.value)
+        }
+        handler.value = setTimeout(() => queryOrder(res.data.order_no), 3000)
+        showQrCode.value = true
       }
     })
     .catch((e) => {
-      setTimeout(() => {
-        ElMessage.error('生成支付订单失败：' + e.message)
-        loading.value = false
-      }, 500)
+      closeLoading()
+      ElMessage.error('生成支付订单失败：' + e.message)
     })
 }
 
+const queryOrder = async (orderNo) => {
+  const res = await httpGet('/api/order/query?order_no=' + orderNo)
+  if (res?.data.status === 2) {
+    // 订单支付成功
+    clearTimeout(handler.value)
+    ElMessage.success('支付成功')
+    showQrCode.value = false
+    // 更新用户积分
+    user.value.scores += res.data.credit
+  } else {
+    handler.value = setTimeout(() => queryOrder(orderNo), 3000)
+  }
+}
+
 const redeemCallback = (success) => {
   showRedeemVerifyDialog.value = false
 
@@ -306,15 +300,67 @@ const redeemCallback = (success) => {
   }
 }
 
-const payCallback = (success) => {
-  showDialog.value = false
-  if (success) {
-    userOrderKey.value += 1
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  if (handler.value) {
+    clearTimeout(handler.value)
+    handler.value = null
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
-@use '../assets/css/custom-scroll.scss' as *;
-@use '../assets/css/member.scss' as *;
+@use '@/assets/css/custom-scroll.scss' as *;
+@use '@/assets/css/member.scss' as *;
+
+// 支付弹窗样式优化
+.pay-dialog {
+  .qr-container {
+    text-align: center;
+    position: relative;
+
+    .qr-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .success-text {
+        background: #67c23a;
+        color: white;
+        border-radius: 4px;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// 支付按钮样式
+.pay-way {
+  .row {
+    margin: 0;
+
+    .col {
+      padding: 0 5px;
+
+      button {
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 14px;
+        font-weight: 500;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+  }
+}
 </style>

web/src/views/admin/Order.vue

@@ -42,14 +42,23 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="支付时间">
-          <template #default="scope">
-            <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>
-            <el-tag v-else>未支付</el-tag>
+        <el-table-column label="订单状态">
+          <template #default="{ row }">
+            <el-tag v-if="row.status === 2" type="success">已支付</el-tag>
+            <el-tag v-else-if="row.status === 3" type="danger">已关闭</el-tag>
+            <el-tag v-else type="warning">未支付</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="pay_method" label="支付渠道" />
-        <el-table-column prop="pay_name" label="支付名称" />
+
+        <!-- 支付时间 -->
+        <el-table-column label="支付时间">
+          <template #default="row">
+            <span>{{ dateFormat(row.pay_time) || '--' }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="pay_name" label="支付渠道" min-width="100" />
+        <el-table-column prop="channel_name" label="支付渠道" min-width="100" />
 
         <el-table-column label="操作" width="180">
           <template #default="scope">

web/src/views/admin/Product.vue

@@ -14,14 +14,7 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="price" label="商品原价" />
-        <el-table-column prop="discount" label="优惠价" />
-        <el-table-column prop="days" label="有效期(天)">
-          <template #default="scope">
-            <el-tag v-if="scope.row.days === 0">长期有效</el-tag>
-            <span v-else>{{ scope.row.days }}</span>
-          </template>
-        </el-table-column>
+        <el-table-column prop="price" label="商品价格" />
         <el-table-column prop="power" label="算力" />
         <el-table-column prop="sales" label="销量" />
         <el-table-column prop="enabled" label="启用状态">
@@ -55,18 +48,10 @@
           <el-input v-model="item.name" autocomplete="off" />
         </el-form-item>
 
-        <el-form-item label="商品原价：" prop="price">
+        <el-form-item label="商品价格：" prop="price">
           <el-input v-model="item.price" autocomplete="off" />
         </el-form-item>
 
-        <el-form-item label="优惠价：" prop="discount">
-          <el-input v-model="item.discount" autocomplete="off" />
-        </el-form-item>
-
-        <el-form-item label="有效期：" prop="days">
-          <el-input v-model.number="item.days" autocomplete="off" placeholder="会员有效期(天)" />
-        </el-form-item>
-
         <el-form-item label="算力：" prop="power">
           <el-input v-model.number="item.power" autocomplete="off" placeholder="增加算力值" />
         </el-form-item>