小程序提交

pages/course/courseOrderList/courseOrderList.js

@@ -1,88 +1,143 @@
+import { baseUrl } from "../../../request";
+
 // pages/course/courseOrderList/courseOrderList.js
 Page({
-  /**
-   * 页面的初始数据
-   */
   data: {
-    items: [null, null, null],
-    countDown: 30 * 60 , // 初始倒计时
-    countDownStr: ''         // 用于在视图中渲染的倒计时文本
+    orderList: [],              // 后端返回的订单列表
+    hasModalShown: false,   // 弹框只显示一次
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad(options) {
-    this.startCountDown();
+    this.fetchOrders();
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady() {},
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow() {},
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
   onHide() {
-    clearInterval(this.intervalId);
+    clearInterval(this._timer);
   },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
   onUnload() {
-    clearInterval(this.intervalId);
+    clearInterval(this._timer);
+  },
+  onShow() {
+    this.fetchOrders()
   },
 
-  /**
-   * 启动倒计时
-   */
-  startCountDown() {
-    this.updateCountDownStr();
-    this.intervalId = setInterval(() => {
-      let cd = this.data.countDown;
-      if (cd <= 1) {
-        clearInterval(this.intervalId);
-        this.setData({
-          countDown: 0,
-          countDownStr: '00分00秒'
-        });
-      } else {
-        cd--;
-        this.setData({ countDown: cd });
-        this.updateCountDownStr();
+  // 拉取后端接口
+  fetchOrders() {
+    wx.request({
+      url: baseUrl + '/courseOrder/query/list',  // 替换为真实接口
+      method: 'POST',
+      header: {
+        Authorization: wx.getStorageSync('token')
+      },
+      success: res => {
+        console.log('课程订单列表---->',res.data.data);
+        if (res.data.code === 1) {
+          const now = Date.now();
+          let list = res.data.data.map(item => {
+            // 计算从 createTime 到 now 剩余秒数
+            const createMs = new Date(item.createTime.replace(/-/g,'/')).getTime();
+            let diff = Math.floor((createMs + 30*60*1000 - now) / 1000);
+
+            // 只有“待支付”才需要倒计时、过期置“交易取消”
+            if (item.orderStatus === '待支付') {
+              if (diff <= 0) {
+                item.orderStatus = '交易取消';
+                diff = 0;
+                // 首次检测到过期就弹框
+                if (!this.data.hasModalShown) {
+                  wx.showModal({
+                    title: '提示',
+                    content: '订单超时未支付，已取消',
+                    showCancel: false
+                  });
+                  this.setData({ hasModalShown: true });
+                }
+              }
+              item.countDown = diff;
+              const m = Math.floor(diff / 60);
+              const s = diff % 60;
+              item.countDownStr = `${m}分${s < 10 ? '0'+s : s}秒`;
+            } else {
+              item.countDown = 0;
+              item.countDownStr = '';
+            }
+            return item;
+          });
+
+          this.setData({ orderList: list }, () => {
+            // 初始处理完后启动全局定时器
+            this.startTimer();
+          });
+
+        } else {
+          wx.showToast({ title: res.data.message || '获取失败', icon: 'none' });
+        }
+      },
+      fail: () => {
+        wx.showToast({ title: '网络错误', icon: 'none' });
       }
+    });
+  },
+
+  // 每秒更新所有待支付订单的倒计时
+  startTimer() {
+    this._timer = setInterval(() => {
+      const updated = this.data.orderList.map(item => {
+        if (item.orderStatus === '待支付' && item.countDown > 0) {
+          const cd = item.countDown - 1;
+          item.countDown = cd;
+          const m = Math.floor(cd / 60);
+          const s = cd % 60;
+          item.countDownStr = `${m}分${s < 10 ? '0'+s : s}秒`;
+
+          if (cd <= 0) {
+            item.orderStatus = '交易取消';
+            item.countDownStr = '';
+            if (!this.data.hasModalShown) {
+              wx.showModal({
+                title: '提示',
+                content: '订单超时未支付，已取消',
+                showCancel: false
+              });
+              this.setData({ hasModalShown: true });
+            }
+          }
+        }
+        return item;
+      });
+      this.setData({ orderList: updated });
     }, 1000);
   },
 
-  /**
-   * 更新倒计时显示字符串
-   */
-  updateCountDownStr() {
-    const minutes = Math.floor(this.data.countDown / 60);
-    const seconds = this.data.countDown % 60;
-    const str = `${minutes}分${seconds < 10 ? '0' + seconds : seconds}秒`;
-    this.setData({ countDownStr: str });
+  // 跳转订单详情
+  gotoOrderDetail(e) {
+    const orderId = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/course/orderDetail/orderDetail?id=${orderId}`,
+    })
   },
 
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh() {},
+  // 取消订单
+  cancelOrder() {
+    wx.showModal({
+      title: '取消订单',
+      content: '是否要取消订单？',
+      success: res => {
+        if (res.confirm) {
+          wx.request({
+            url: baseUrl + "/courseOrder/cancel",
+            method: 'POST',
+            data: { courseId: this.data.orderId },
+            header: { Authorization: wx.getStorageSync('token') },
+            success: () => this.getOrderDetail()
+          });
+        }
+      }
+    });
+  },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom() {},
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage() {}
+  // 支付订单
+  payOrder() {
+    // wx.navigateTo({ url: `/pages/pay/pay?orderId=${this.data.orderId}` });
+    wx.showToast({ title: '支付功能稍后开放', icon: 'none' });
+  },
 });

pages/course/courseOrderList/courseOrderList.wxml

@@ -1,21 +1,36 @@
 <!-- pages/course/courseOrderList/courseOrderList.wxml -->
 <view class="flex-col justify-start page">
   <view class="flex-col group_1">
-    <view class="flex-col list-item mt-17" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index">
+    <view 
+      class="flex-col list-item mt-17" 
+      wx:for="{{orderList}}" 
+      wx:for-item="item" 
+      wx:for-index="index" 
+      wx:key="item"
+      bind:tap="gotoOrderDetail"
+      data-id="{{ item.id }}"
+    >
       <view class="flex-row self-stretch group">
-        <text class="font text">订单号：202506191307440406460485418</text>
-        <text class="font_2 ml-37">待支付</text>
+        <text class="font text">订单号：{{item.orderNumber}}</text>
+        <text class="font_2 ml-37">{{ item.orderStatus }}</text>
       </view>
-      <text class="self-stretch font_3 text_2">区块链和加密数字货币(随报随学认证班)(随报随学认证班)</text>
-      <text class="self-end font_4 text_3">￥999.00</text>
-      <text class="self-end font_5 text_4">请在 {{countDownStr}} 内完成支付</text>
+
+      <text class="self-stretch font_3 text_2">{{ item.name }}</text>
+      <text class="self-end font_4 text_3">￥{{ item.totalAmount }}</text>
+
+      <!-- 倒计时，只在“待支付”时显示 -->
+      <text wx:if="{{ item.orderStatus === '待支付' }}" class="self-end font_5 text_4">
+        请在 {{ item.countDownStr }} 内完成支付
+      </text>
+
       <view class="flex-row justify-between items-center self-stretch group_2">
-        <text class="font_6 text_5">2025-06-17 13:00:33</text>
+        <text class="font_6 text_5">{{ item.createTime }}</text>
         <view class="flex-row">
-          <view class="flex-col justify-start items-center text-wrapper">
+          <!-- 仅待支付时可操作 -->
+          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper" catch:tap="cancelOrder">
             <text class="font_7">取消订单</text>
           </view>
-          <view class="flex-col justify-start items-center text-wrapper_2 ml-11">
+          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper_2 ml-11" catch:tap="payOrder">
             <text class="font_8">支付</text>
           </view>
         </view>

pages/course/courseOrderList/courseOrderList.wxss

@@ -4,13 +4,13 @@
   margin-top: 31.88rpx;
 }
 .ml-37 {
-  margin-left: 69.38rpx;
+  margin-left: 92.38rpx;
 }
 .ml-11 {
   margin-left: 20.63rpx;
 }
 .page {
-  padding: 26.25rpx 0 350.63rpx;
+  padding: 26.25rpx 0 50.63rpx;
   background-color: #f8f8f8;
   width: 100%;
   overflow-y: auto;
@@ -68,7 +68,7 @@
 .text_3 {
   margin-top: 58.09rpx;
   line-height: 22.76rpx;
-  margin-right: 50rpx; /* 向左移动：增加右侧间距 */
+  margin-right: 22rpx; /* 向左移动：增加右侧间距 */
 }
 .font_5 {
   font-size: 26.25rpx;
@@ -93,9 +93,9 @@
   line-height: 26.25rpx;
   color: #a1a1a1;
 }
-.text_5 {
+/* .text_5 {
   width: 206.25rpx;
-}
+} */
 .text-wrapper {
   padding: 10.8rpx 0 8.16rpx;
   background-color: #ffffff;