美化了样式

pages/course/courseOrderList/courseOrderList.wxml

@@ -1,42 +1,55 @@
 <!-- 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="{{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">订单号：{{item.orderNumber}}</text>
-        <text class="font_2">{{ item.orderStatus }}</text>
+<view class="page">
+
+<!-- 列表滚动区 -->
+<scroll-view scroll-y class="content no-scrollbar">
+
+  <!-- 空状态（可选） -->
+  <view wx:if="{{ !orderList || orderList.length === 0 }}" class="empty">
+    <image class="empty-img" src="./image/empty.png" mode="aspectFit" />
+    <text class="empty-text">暂无订单</text>
+  </view>
+
+  <!-- 订单卡片列表 -->
+  <view wx:for="{{ orderList }}"
+        wx:for-item="item"
+        wx:for-index="index"
+        wx:key="item.id"
+        class="card order-item"
+        bind:tap="gotoOrderDetail"
+        data-id="{{ item.id }}">
+
+    <!-- 顶部：订单号 + 状态徽标 -->
+    <view class="topline">
+      <text class="order-no">订单号：{{ item.orderNumber }}</text>
+      <view class="status-badge {{ item.orderStatus === '待支付' ? 'status-pending' : (item.orderStatus === '已支付' || item.orderStatus === '交易成功' ? 'status-success' : 'status-default') }}">
+        <text class="status-text">{{ item.orderStatus }}</text>
       </view>
+    </view>
 
-      <text class="self-stretch font_3 text_2">{{ item.name }}</text>
-      <text class="self-end font_4 text_3">￥{{ item.totalAmount }}</text>
+    <!-- 课程名称 -->
+    <text class="course-name ellipsis-2">{{ item.name }}</text>
 
-      <!-- 倒计时，只在“待支付”时显示 -->
-      <text wx:if="{{ item.orderStatus === '待支付' }}" class="self-end font_5 text_4">
-        请在 {{ item.countDownStr }} 内完成支付
-      </text>
+    <!-- 价格 + 倒计时（仅待支付显示） -->
+    <view class="price-line">
+      <text class="amount">￥{{ item.totalAmount }}</text>
+      <view wx:if="{{ item.orderStatus === '待支付' }}" class="countdown-pill">
+        <text class="countdown-text">请在 {{ item.countDownStr }} 内完成支付</text>
+      </view>
+    </view>
 
-      <view class="flex-row justify-between items-center self-stretch group_2">
-        <text class="font_6 text_5">{{ item.createTime }}</text>
-        <view class="flex-row">
-          <!-- 仅待支付时可操作 -->
-          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper" catch:tap="cancelOrder" data-id="{{ item.id }}">
-            <text class="font_7">取消订单</text>
-          </view>
-          <view wx:if="{{ item.orderStatus === '待支付' }}" class="flex-col justify-start items-center text-wrapper_2 ml-11" catch:tap="showIsPayModal"
-          data-order-id="{{ item.id }}">
-            <text class="font_8">支付</text>
-          </view>
-        </view>
+    <!-- 底部：下单时间 + 操作按钮（仅待支付显示） -->
+    <view class="bottomline">
+      <text class="ctime">{{ item.createTime }}</text>
+      <view class="actions" wx:if="{{ item.orderStatus === '待支付' }}">
+        <view class="btn btn-ghost" catch:tap="cancelOrder" data-id="{{ item.id }}">取消订单</view>
+        <view class="btn btn-primary" catch:tap="showIsPayModal" data-order-id="{{ item.id }}">支付</view>
       </view>
     </view>
   </view>
-  <view wx:if="{{isMaskVisible}}" class="page-mask"></view>
-</view>
+
+</scroll-view>
+
+<!-- 遮罩 -->
+<view wx:if="{{ isMaskVisible }}" class="page-mask"></view>
+</view>