ソースを参照

```
feat(order): 添加支付功能并完善订单确认页面

- 在订单确认页面添加立即支付功能,绑定支付按钮点击事件
- 新增payNowFn方法处理支付逻辑,包括协议验证和支付成功提示
- 添加支付宝支付和对公支付方式选择功能
- 从vue-router导入useRouter并添加路由实例用于页面跳转
- 实现支付成功后页面回退功能

fix(learning-system): 未支付课程跳转到支付页面

- 在学习系统详情页添加支付检查逻辑
- 当用户未支付时,点击课程直接跳转到订单确认页面
- 传递课程ID参数到订单确认页面用于支付流程
```

zhangningning 1 ヶ月 前
コミット
abd295c925

+ 10 - 0
src/pages/LearningSystem/LearningSystemDetail.vue

@@ -113,6 +113,16 @@
     })
   };
   const goDetail = (item) => {
+    //如果未支付,跳转到支付页面
+    if(true){
+      router.push({
+        path: `/order-confirm`,
+        query: {
+          courseId: item.courseId,
+        }
+      })
+      return
+    }
     //增加参数名称
     router.push({
       path: `/learning-system/detail/course`,

+ 15 - 2
src/pages/order/orderConfirm.vue

@@ -97,7 +97,7 @@
         <div class="font_size18">需付金额:</div>
         <div class="font_size24 bold color_price">¥239.2</div>
       </div>
-      <div style="display: inline-block;" class="mt20">
+      <div style="display: inline-block;" class="mt20" @click="payNowFn">
         <div class="gap5 gradient border_radius_4 cursor-pointer zhifu">
           <img :src="qianbaoIcon" alt="" style="width:13px;height:15px">
           <div>{{$t('common.payNow')}}</div>
@@ -121,10 +121,11 @@ import qianbaoIcon from '@/assets/imgs/pay/qianbao.png'
 
 
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import DGTMessage from '@/utils/message'
 //获取参数
 const route = useRoute()
+const router = useRouter()
 const query = route.query;
 const id = ref(query.id || '');
 
@@ -135,6 +136,18 @@ const payWay = ref(1);//支付方式 1:支付宝支付 2:对公支付
 // 协议
 const agreement = ref(false);//是否同意协议
 
+// 立即支付
+const payNowFn = () => {
+  if(!agreement.value){
+    DGTMessage.warning('请先同意协议')
+    return
+  }
+  // 调用支付接口
+  DGTMessage.success('支付成功')
+  //回退
+  router.back()
+}
+
 
 
 </script>