模拟了微信支付功能

pages/course/createCourseOrder/createCourseOrder.js

@@ -9,11 +9,15 @@ Page({
     courseId: 0, // 课程id
     courseObj: '', // 课程对象
     globalImgUrl, // 全局图片
+    isMaskVisible: false
   },
 
   // 创建订单方法
   createOrder() {
     const { courseId } = this.data;
+      // 1. 显示遮罩，阻止二次点击
+  this.setData({ isMaskVisible: true });
+    wx.showLoading({ title: '正在创建订单...' });
     let orderId ;
     wx.request({
       url: baseUrl + '/courseOrder/add',
@@ -25,16 +29,88 @@ Page({
         Authorization :wx.getStorageSync('token'),
       },
       success : res => {
-        console.log(res);
-        this.setData({
-          orderId: res.data.data
-        })
-        wx.navigateTo({
-          url: `/pages/course/orderDetail/orderDetail?id=${this.data.orderId}`,
-        })
+        orderId = res.data.data
+        this.setData({ orderId })
+        wx.hideLoading();
+        if (res.data.code === 1) {
+          this.showIsPayModal(orderId)
+        } else {
+            // 下单失败，关闭遮罩
+          this.setData({ isMaskVisible: false });
+          wx.showModal({
+            title: '下单失败',
+            content: res.data.message || '下单失败',
+            showCancel: false,
+            confirmText: '知道了'
+          });
+        }
+      },
+      fail: () => {
+        wx.hideLoading();
+        this.setData({ isMaskVisible: false });
+        wx.showToast({ title: '网络错误，下单失败', icon: 'none' });
       }
     })
-    
+  },
+  showIsPayModal(orderId) {
+    wx.showModal({
+      title: '下单成功',
+      content: '您确定要支付吗？',
+      cancelText: '取消',
+      confirmText: '确定',
+      success: (res) => {
+        if (res.confirm) {
+          this.payOrder(orderId);
+        } else if (res.cancel) {
+          wx.navigateTo({
+            url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
+            success: res => {
+              // 先把遮罩关掉
+              this.setData({ isMaskVisible: false });
+          }
+          });
+        }
+      },
+      fail: () => {
+        wx.hideLoading();
+        wx.showToast({
+          title: '网络错误，下单失败',
+          icon: 'none'
+        });
+      }
+    });
+  },
+  payOrder(orderId) {
+     // 同样先显示遮罩
+  this.setData({ isMaskVisible: true });
+    wx.showLoading({ title: '支付中...'});
+    wx.request({
+      url: baseUrl + '/courseOrder/payment',
+      method: 'POST',
+      header: { Authorization: wx.getStorageSync('token') },
+      data: { id: orderId },
+      success: res => {
+        wx.hideLoading();
+        if (res.data.code === 1) {
+          // 支付成功，跳转详情页
+          wx.navigateTo({
+            url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
+            success: res => {
+                // 先把遮罩关掉
+                this.setData({ isMaskVisible: false });
+            }
+          });
+        } else {
+          this.setData({ isMaskVisible: false });
+          wx.showToast({ title: res.data.message || '支付失败', icon: 'none' });
+        }
+      },
+      fail: () => {
+        wx.hideLoading();
+        this.setData({ isMaskVisible: false });
+        wx.showToast({ title: '网络错误，支付失败', icon: 'none' });
+      }
+    });
   },
 
   // 获取课程详情

pages/course/createCourseOrder/createCourseOrder.wxml

@@ -38,9 +38,11 @@
   <view class="footer">
     <view class="flex-row justify-between items-center section_4">
       <text class="font text_5">应付￥{{ courseObj.discountPrice }}</text>
-      <view class="flex-col justify-center items-center text-wrapper" bind:tap="createOrder">
+      <view class="flex-col justify-center items-center text-wrapper" bindtap="createOrder">
         <text class="font text_6">立即支付</text>
       </view>
     </view>
   </view>
+
+  <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
 </view>

pages/course/createCourseOrder/createCourseOrder.wxss

@@ -7,6 +7,14 @@
 .ml-1 {
   margin-left: 1.88rpx;
 }
+/* app.wxss 或 当前页面 .wxss */
+.page-mask {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+}
 .page {
   background-color: #f7f7f7;
   width: 100%;