diff --git a/front-end/mall4uni/src/pages/orderList/orderList.scss b/front-end/mall4uni/src/pages/orderList/orderList.scss
index 8db702c..e4340c0 100644
--- a/front-end/mall4uni/src/pages/orderList/orderList.scss
+++ b/front-end/mall4uni/src/pages/orderList/orderList.scss
@@ -1,40 +1,50 @@
+<style scoped lang="scss" >
+/* 定义全局容器 */
 .container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #f4f4f4;
-  color: #333;
+  position: absolute; /* 绝对定位，相对于最近的非static祖先元素 */
+  width: 100%; /* 宽度占满整个父容器 */
+  height: 100%; /* 高度占满整个父容器 */
+  background-color: #f4f4f4; /* 背景颜色为浅灰色 */
+  color: #333; /* 默认文本颜色为深灰色 */
 }
+
+/* 订单标题栏 */
 .order-tit {
-  position: fixed;
-  top: 0;
-  display: flex;
-  justify-content: space-around;
-  z-index: 999;
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
-  background-color: #fff;
-  border-bottom: 2rpx solid #f4f4f4;
+  position: fixed; /* 固定定位，不随页面滚动而移动 */
+  top: 0; /* 紧贴页面顶部 */
+  display: flex; /* 使用弹性布局 */
+  justify-content: space-around; /* 子元素在主轴上均匀分布 */
+  z-index: 999; /* 设置堆叠顺序，确保标题栏位于最上层 */
+  width: 100%; /* 宽度占满整个屏幕 */
+  height: 100rpx; /* 高度为100个rpx（根据设备宽度自适应） */
+  line-height: 100rpx; /* 行高与高度一致，使文本垂直居中 */
+  background-color: #fff; /* 背景颜色为白色 */
+  border-bottom: 2rpx solid #f4f4f4; /* 下边框为浅灰色细线 */
   text {
-    display: block;
-    font-size: 28rpx;
-    color: 999;
-    width: 100rpx;
-    text-align: center;
+    display: block; /* 将文本块级化 */
+    font-size: 28rpx; /* 字体大小 */
+    color: #999; /* 文本颜色为浅灰色 */
+    width: 100rpx; /* 每个文本项宽度 */
+    text-align: center; /* 文本水平居中 */
   }
-  text.on {
-    border-bottom: 4rpx solid #eb2444;
-    color: #eb2444;
+
+  text.on { /* 当前选中的文本样式 */
+    border-bottom: 4rpx solid #eb2444; /* 底部有红色细线 */
+    color: #eb2444; /* 文本颜色为红色 */
   }
 }
+
+/* 主内容区 */
 .main {
-  padding-top: 15rpx;
+  padding-top: 15rpx; /* 上内边距，避免被固定标题栏遮挡 */
 }
+
+/* 商品项目 */
 .prod-item {
-  background-color: #fff;
-  margin-top: 15rpx;
-  font-size: 28rpx;
+  background-color: #fff; /* 背景颜色为白色 */
+  margin-top: 15rpx; /* 上外边距，与上方元素间隔 */
+  font-size: 28rpx; /* 默认字体大小 */
+
   .item-cont {
     .prod-pic {
       image {
@@ -43,172 +53,199 @@
         width: 100%;
         height: 100%;
       }
-      font-size: 0;
-      display: inline-block;
+
+      font-size: 0; /* 去除图片之间的空白 */
+      display: inline-block; /* 内联块状显示 */
       width: 160rpx;
       height: 160rpx;
-      overflow: hidden;
-      background: #fff;
-      margin-right: 16rpx;
+      overflow: hidden; /* 超出部分隐藏 */
+      background: #fff; /* 背景颜色为白色 */
+      margin-right: 16rpx; /* 右侧外边距，与文字部分间隔 */
     }
+
     .categories {
-      white-space: nowrap;
+      white-space: nowrap; /* 强制在同一行内显示 */
     }
-    display: flex;
-    align-items: center;
-    padding: 20rpx 30rpx;
-    border-radius: 10rpx;
-    display: -webkit-flex;
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    background: #fafafa;
+
+    display: flex; /* 使用弹性布局 */
+    align-items: center; /* 交叉轴上居中对齐 */
+    padding: 20rpx 30rpx; /* 内边距 */
+    border-radius: 10rpx; /* 圆角 */
+    background: #fafafa; /* 背景颜色 */
+
     .prod-info {
-      margin-left: 10rpx;
-      font-size: 28rpx;
-      width: 100%;
-      position: relative;
-      height: 160rpx;
-      -webkit-flex: 1;
-      -ms-flex: 1;
-      -webkit-box-flex: 1;
-      -moz-box-flex: 1;
-      flex: 1;
+      margin-left: 10rpx; /* 左侧内边距 */
+      font-size: 28rpx; /* 字体大小 */
+      width: 100%; /* 宽度占满剩余空间 */
+      position: relative; /* 相对定位 */
+      height: 160rpx; /* 高度 */
+      flex: 1; /* 占用剩余空间 */
+
       .prodname {
-        font-size: 28rpx;
-        line-height: 36rpx;
-        max-height: 86rpx;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        text-overflow: ellipsis;
-        word-break: break-all;
+        font-size: 28rpx; /* 字体大小 */
+        line-height: 36rpx; /* 行高 */
+        max-height: 86rpx; /* 最大高度 */
+        overflow: hidden; /* 超出部分隐藏 */
+        display: -webkit-box; /* WebKit浏览器兼容 */
+        -webkit-line-clamp: 2; /* 限制显示两行 */
+        -webkit-box-orient: vertical; /* 垂直排列 */
+        text-overflow: ellipsis; /* 超出部分以省略号表示 */
+        word-break: break-all; /* 允许在单词内部换行 */
       }
+
       .prod-info-cont {
-        color: #999;
-        line-height: 40rpx;
-        margin-top: 10rpx;
-        font-size: 22rpx;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        text-overflow: ellipsis;
-        word-break: break-all;
+        color: #999; /* 文本颜色为浅灰色 */
+        line-height: 40rpx; /* 行高 */
+        margin-top: 10rpx; /* 上外边距 */
+        font-size: 22rpx; /* 字体大小 */
+        overflow: hidden; /* 超出部分隐藏 */
+        display: -webkit-box; /* WebKit浏览器兼容 */
+        -webkit-line-clamp: 1; /* 限制显示一行 */
+        -webkit-box-orient: vertical; /* 垂直排列 */
+        text-overflow: ellipsis; /* 超出部分以省略号表示 */
+        word-break: break-all; /* 允许在单词内部换行 */
       }
     }
   }
+
   .order-num {
-    padding: 20rpx 30rpx;
-    display: flex;
-    justify-content: space-between;
-    font-size: 28rpx;
+    padding: 20rpx 30rpx; /* 内边距 */
+    display: flex; /* 使用弹性布局 */
+    justify-content: space-between; /* 子元素在主轴上两端对齐 */
+    font-size: 28rpx; /* 字体大小 */
+
     .clear-btn {
       width: 32rpx;
       height: 32rpx;
-      font-size: 0;
-      vertical-align: top;
-      margin-left: 42rpx;
-      position: relative;
+      font-size: 0; /* 去除按钮内的空白 */
+      vertical-align: top; /* 顶部对齐 */
+      margin-left: 42rpx; /* 左侧外边距 */
+      position: relative; /* 相对定位 */
+
       &::after {
         content: " ";
         display: block;
         position: absolute;
-        left: -10px;
+        left: -10rpx;
         top: 0rpx;
         width: 1px;
         height: 32rpx;
-        background: #ddd;
+        background: #ddd; /* 背景色为浅灰色 */
       }
+
       .clear-list-btn {
         width: 100%;
         height: 100%;
-        vertical-align: middle;
+        vertical-align: middle; /* 中间对齐 */
       }
     }
   }
+
   .total-num {
-    text-align: right;
-    padding: 20rpx 30rpx;
-    font-size: 28rpx;
+    text-align: right; /* 文本右对齐 */
+    padding: 20rpx 30rpx; /* 内边距 */
+    font-size: 28rpx; /* 字体大小 */
+
     .prodprice {
-      display: inline-block;
-      color: #333;
+      display: inline-block; /* 内联块状显示 */
+      color: #333; /* 文本颜色为深灰色 */
     }
+
     .prodcount {
-      margin-right: 20rpx;
+      margin-right: 20rpx; /* 右侧外边距 */
     }
   }
+
   .price-nums {
     .prodprice {
-      color: #333;
-      position: absolute;
-      bottom: 0;
+      color: #333; /* 文本颜色为深灰色 */
+      position: absolute; /* 绝对定位 */
+      bottom: 0; /* 紧贴底部 */
     }
+
     .prodcount {
-      position: absolute;
-      bottom: 5rpx;
-      right: 0;
-      color: #999;
-      font-family: verdana;
+      position: absolute; /* 绝对定位 */
+      bottom: 5rpx; /* 紧贴底部并留出一些间距 */
+      right: 0; /* 紧贴右侧 */
+      color: #999; /* 文本颜色为浅灰色 */
+      font-family: verdana; /* 字体家族 */
     }
   }
+
   .prod-foot {
-    border-top: 2rpx solid #e6e6e6;
+    border-top: 2rpx solid #e6e6e6; /* 顶部边框 */
+
     .total {
-      font-size: 25rpx;
-      margin-bottom: 20rpx;
-      padding-bottom: 20rpx;
-      border-bottom: 2rpx solid #e9eaec;
+      font-size: 25rpx; /* 字体大小 */
+      margin-bottom: 20rpx; /* 下外边距 */
+      padding-bottom: 20rpx; /* 下内边距 */
+      border-bottom: 2rpx solid #e9eaec; /* 底部边框 */
     }
+
     .btn {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+      display: flex; /* 使用弹性布局 */
+      align-items: center; /* 交叉轴上居中对齐 */
+      justify-content: flex-end; /* 主轴上右对齐 */
     }
   }
 }
+
+/* 订单状态 */
 .order-state {
-  display: flex;
-  align-items: center;
-  font-size: 24rpx;
+  display: flex; /* 使用弹性布局 */
+  align-items: center; /* 交叉轴上居中对齐 */
+  font-size: 24rpx; /* 字体大小 */
+
   .order-sts.red {
-    color: #eb2444;
+    color: #eb2444; /* 文本颜色为红色 */
   }
+
   .order-sts.gray {
-    color: #999;
+    color: #999; /* 文本颜色为浅灰色 */
   }
 }
+
+/* 其他按钮悬停效果 */
 .other-button-hover {
-  background-color: blue;
+  background-color: blue; /* 悬停时背景颜色为蓝色 */
 }
+
+/* 按钮悬停效果 */
 .button-hover {
-  background-color: red;
-  background-color: blue;
+  background-color: red; /* 悬停时背景颜色为红色 */
+  background-color: blue; /* 悬停时背景颜色为蓝色（后一个覆盖前一个） */
 }
+
+/* 按钮样式 */
 .button {
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
-  margin-left: 10px;
-  font-size: 26rpx;
-  background: #fff;
-  padding: 10rpx 30rpx;
-  border-radius: 80rpx;
-  border: 2rpx solid #e1e1e1;
+  margin-top: 20rpx; /* 上外边距 */
+  margin-bottom: 20rpx; /* 下外边距 */
+  margin-left: 10px; /* 左外边距 */
+  font-size: 26rpx; /* 字体大小 */
+  background: #fff; /* 背景颜色为白色 */
+  padding: 10rpx 30rpx; /* 内边距 */
+  border-radius: 80rpx; /* 圆角 */
+  border: 2rpx solid #e1e1e1; /* 边框 */
+
   &:last-child {
-    margin-right: 10rpx;
+    margin-right: 10rpx; /* 最后一个子元素的右外边距 */
   }
 }
+
+/* 警告按钮样式 */
 .button.warn {
-  color: #eb2444;
-  border-color: #eb2444;
+  color: #eb2444; /* 文本颜色为红色 */
+  border-color: #eb2444; /* 边框颜色为红色 */
 }
+
+/* 空状态样式 */
 .empty {
-  font-size: 24rpx;
-  margin-top: 100rpx;
-  text-align: center;
-  color: #999;
-  height: 300rpx;
-  line-height: 300rpx;
+  font-size: 24rpx; /* 字体大小 */
+  margin-top: 100rpx; /* 上外边距 */
+  text-align: center; /* 文本居中 */
+  color: #999; /* 文本颜色为浅灰色 */
+  height: 300rpx; /* 高度 */
+  line-height: 300rpx; /* 行高与高度一致，使文本垂直居中 */
 }
+
+</style >
diff --git a/front-end/mall4uni/src/pages/orderList/orderList.vue b/front-end/mall4uni/src/pages/orderList/orderList.vue
index 63a0ab5..5cdb49f 100644
--- a/front-end/mall4uni/src/pages/orderList/orderList.vue
+++ b/front-end/mall4uni/src/pages/orderList/orderList.vue
@@ -2,142 +2,89 @@
   <view class="container">
     <!-- 头部菜单 -->
     <view class="order-tit">
-      <text
-        data-sts="0"
-        :class="sts==0?'on':''"
-        @tap="onStsTap"
-      >
-        全部
-      </text>
-      <text
-        data-sts="1"
-        :class="sts==1?'on':''"
-        @tap="onStsTap"
-      >
-        待支付
-      </text>
-      <text
-        data-sts="2"
-        :class="sts==2?'on':''"
-        @tap="onStsTap"
-      >
-        待发货
-      </text>
-      <text
-        data-sts="3"
-        :class="sts==3?'on':''"
-        @tap="onStsTap"
-      >
-        待收货
-      </text>
-      <text
-        data-sts="5"
-        :class="sts==5?'on':''"
-        @tap="onStsTap"
-      >
-        已完成
+      <!-- 动态生成订单状态标签，点击切换显示不同状态的订单列表 -->
+      <text v-for="(status, index) in statuses"
+            :key="index"
+            :data-sts="status.value"
+            :class="sts === status.value ? 'on' : ''"
+            @tap="onStsTap">
+        {{ status.label }}
       </text>
     </view>
     <!-- end 头部菜单 -->
+
     <view class="main">
-      <view
-        v-if="list.length==0"
-        class="empty"
-      >
+      <!-- 如果订单列表为空，则显示提示信息 -->
+      <view v-if="list.length === 0" class="empty">
         还没有任何相关订单
       </view>
+
       <!-- 订单列表 -->
-      <block
-        v-for="(item, index) in list"
-        :key="index"
-      >
+      <block v-for="(item, index) in list" :key="index">
         <view class="prod-item">
+          <!-- 订单编号和状态 -->
           <view class="order-num">
             <text>订单编号：{{ item.orderNumber }}</text>
             <view class="order-state">
-              <text
-                :class="'order-sts  ' + (item.status==1?'red':'') + '  ' + ((item.status==5||item.status==6)?'gray':'')"
-              >
+              <!-- 根据订单状态动态设置文本颜色，并显示相应的状态 -->
+              <text :class="[
+                  'order-sts',
+                  item.status === 1 ? 'red' : '',
+                  (item.status === 5 || item.status === 6) ? 'gray' : ''
+                ]">
                 {{
-                  item.status == 1 ? '待支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待收货' : (item.status == 5 ? '已完成' : '已取消')))
+                  getStatusLabel(item.status)
                 }}
               </text>
 
-              <view
-                v-if="item.status==5 || item.status==6"
-                class="clear-btn"
-              >
-                <image
-                  src="@/static/images/icon/clear-his.png"
-                  class="clear-list-btn"
-                  :data-ordernum="item.orderNumber"
-                  @tap="delOrderList"
-                />
+              <!-- 已完成或已取消的订单显示清除按钮 -->
+              <view v-if="item.status === 5 || item.status === 6"
+                    class="clear-btn">
+                <image src="@/static/images/icon/clear-his.png"
+                       class="clear-list-btn"
+                       :data-ordernum="item.orderNumber"
+                       @tap="delOrderList" />
               </view>
             </view>
           </view>
 
           <!-- 商品列表 -->
-          <!-- 一个订单单个商品的显示 -->
-          <block v-if="item.orderItemDtos.length==1">
-            <block
-              v-for="(prod, index2) in item.orderItemDtos"
-              :key="index2"
-            >
+          <!-- 单个商品时直接显示商品详情 -->
+          <block v-if="item.orderItemDtos.length === 1">
+            <block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
               <view>
-                <view
-                  class="item-cont"
-                  :data-ordernum="item.orderNumber"
-                  @tap="toOrderDetailPage"
-                >
+                <view class="item-cont"
+                      :data-ordernum="item.orderNumber"
+                      @tap="toOrderDetailPage">
                   <view class="prod-pic">
                     <image :src="prod.pic" />
                   </view>
                   <view class="prod-info">
-                    <view class="prodname">
-                      {{ prod.prodName }}
-                    </view>
-                    <view class="prod-info-cont">
-                      {{ prod.skuName }}
-                    </view>
+                    <view class="prodname">{{ prod.prodName }}</view>
+                    <view class="prod-info-cont">{{ prod.skuName }}</view>
                     <view class="price-nums">
                       <text class="prodprice">
-                        <text class="symbol">
-                          ￥
-                        </text>
-                        <text class="big-num">
-                          {{ wxs.parsePrice(prod.price)[0] }}
-                        </text>
-                        <text class="small-num">
-                          .{{ wxs.parsePrice(prod.price)[1] }}
-                        </text>
-                      </text>
-                      <text class="prodcount">
-                        x{{ prod.prodCount }}
+                        <text class="symbol">￥</text>
+                        <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
+                        <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                       </text>
+                      <text class="prodcount">x{{ prod.prodCount }}</text>
                     </view>
                   </view>
                 </view>
               </view>
             </block>
           </block>
-          <!-- 一个订单多个商品时的显示 -->
+          <!-- 多个商品时使用横向滚动视图展示所有商品图片 -->
           <block v-else>
-            <view
-              class="item-cont"
-              :data-ordernum="item.orderNumber"
-              @tap="toOrderDetailPage"
-            >
-              <scroll-view
-                scroll-x="true"
-                scroll-left="0"
-                scroll-with-animation="false"
-                class="categories"
-              >
-                <block
-                  v-for="(prod, index2) in item.orderItemDtos"
-                  :key="index2"
-                >
+            <view class="item-cont"
+                  :data-ordernum="item.orderNumber"
+                  @tap="toOrderDetailPage">
+              <scroll-view scroll-x="true"
+                           scroll-left="0"
+                           scroll-with-animation="false"
+                           class="categories">
+                <block v-for="(prod, index2) in item.orderItemDtos" :key="index2">
                   <view class="prod-pic">
                     <image :src="prod.pic" />
                   </view>
@@ -146,60 +93,47 @@
             </view>
           </block>
 
+          <!-- 显示订单总价 -->
           <view class="total-num">
-            <text class="prodcount">
-              共1件商品
-            </text>
+            <text class="prodcount">共1件商品</text>
             <view class="prodprice">
               合计：
-              <text class="symbol">
-                ￥
-              </text>
-              <text class="big-num">
-                {{ wxs.parsePrice(item.actualTotal)[0] }}
-              </text>
-              <text class="small-num">
-                .{{ wxs.parsePrice(item.actualTotal)[1] }}
-              </text>
+              <text class="symbol">￥</text>
+              <text class="big-num">{{ wxs.parsePrice(item.actualTotal)[0] }}</text>
+              <text class="small-num">.{{ wxs.parsePrice(item.actualTotal)[1] }}</text>
             </view>
           </view>
-          <!-- end 商品列表 -->
+
+          <!-- 操作按钮 -->
           <view class="prod-foot">
             <view class="btn">
-              <text
-                v-if="item.status==1"
-                class="button"
-                :data-ordernum="item.orderNumber"
-                hover-class="none"
-                @tap="onCancelOrder"
-              >
+              <!-- 根据订单状态显示不同的操作按钮 -->
+              <text v-if="item.status === 1"
+                    class="button"
+                    :data-ordernum="item.orderNumber"
+                    hover-class="none"
+                    @tap="onCancelOrder">
                 取消订单
               </text>
-              <text
-                v-if="item.status==1"
-                class="button warn"
-                :data-ordernum="item.orderNumber"
-                hover-class="none"
-                @tap="normalPay"
-              >
+              <text v-if="item.status === 1"
+                    class="button warn"
+                    :data-ordernum="item.orderNumber"
+                    hover-class="none"
+                    @tap="normalPay">
                 付款
               </text>
-              <text
-                v-if="item.status==3 || item.status==5"
-                class="button"
-                :data-ordernum="item.orderNumber"
-                hover-class="none"
-                @tap="toDeliveryPage"
-              >
+              <text v-if="item.status === 3 || item.status === 5"
+                    class="button"
+                    :data-ordernum="item.orderNumber"
+                    hover-class="none"
+                    @tap="toDeliveryPage">
                 查看物流
               </text>
-              <text
-                v-if="item.status==3"
-                class="button warn"
-                :data-ordernum="item.orderNumber"
-                hover-class="none"
-                @tap="onConfirmReceive"
-              >
+              <text v-if="item.status === 3"
+                    class="button warn"
+                    :data-ordernum="item.orderNumber"
+                    hover-class="none"
+                    @tap="onConfirmReceive">
                 确认收货
               </text>
             </view>
@@ -208,217 +142,202 @@
       </block>
     </view>
   </view>
-  <!-- end 订单列表 -->
 </template>
 
 <script setup>
-const wxs = number()
+  import { ref, onMounted, onReachBottom } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import http from '@/utils/http'
+  import number from '@/wxs/number.wxs'
 
-const sts = ref(0)
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  if (options.sts) {
-    sts.value = options.sts
-    loadOrderData(options.sts, 1)
-  } else {
-    loadOrderData(0, 1)
-  }
-})
+  // 定义订单状态选项
+  const statuses = [
+    { label: '全部', value: 0 },
+    { label: '待支付', value: 1 },
+    { label: '待发货', value: 2 },
+    { label: '待收货', value: 3 },
+    { label: '已完成', value: 5 }
+  ]
 
-const current = ref(1)
-const pages = ref(0)
-/**
- * 页面上拉触底事件的处理函数
- */
-onReachBottom(() => {
-  if (current.value < pages.value) {
-    loadOrderData(sts.value, current.value + 1)
-  }
-})
+  // 当前选中的订单状态
+  const sts = ref(0)
 
-const list = ref([])
-/**
- * 加载订单数据
- */
-const loadOrderData = (sts, currentParam) => {
-  uni.showLoading() // 加载订单列表
-  http.request({
-    url: '/p/myOrder/myOrder',
-    method: 'GET',
-    data: {
-      current: currentParam,
-      size: 10,
-      status: sts
+  // 页面加载时处理函数
+  onLoad((options) => {
+    if (options.sts) {
+      sts.value = parseInt(options.sts)
     }
+    loadOrderData(sts.value, 1)
   })
-    .then(({ data }) => {
-      let listParam = []
-      if (data.current === 1) {
-        listParam = data.records
-      } else {
-        listParam = list.value
-        Array.prototype.push.apply(listParam, data.records)
+
+  // 分页参数
+  const current = ref(1)
+  const pages = ref(0)
+
+  // 订单列表数据
+  const list = ref([])
+
+  // 加载订单数据
+  const loadOrderData = (status, currentPage) => {
+    uni.showLoading() // 显示加载中提示
+    http.request({
+      url: '/p/myOrder/myOrder',
+      method: 'GET',
+      data: {
+        current: currentPage,
+        size: 10,
+        status: status
       }
-      list.value = listParam
-      pages.value = data.pages
-      current.value = data.current
-      uni.hideLoading()
     })
-}
+      .then(({ data }) => {
+        // 更新订单列表数据
+        let listParam = []
+        if (currentPage === 1) {
+          listParam = data.records
+        } else {
+          listParam = list.value
+          Array.prototype.push.apply(listParam, data.records)
+        }
+        list.value = listParam
+        pages.value = data.pages
+        current.value = currentPage
+        uni.hideLoading() // 隐藏加载中提示
+      })
+  }
 
-/**
- * 状态点击事件
- */
-const onStsTap = (e) => {
-  sts.value = e.currentTarget.dataset.sts
-  loadOrderData(sts.value, 1)
-}
+  // 状态点击事件
+  const onStsTap = (e) => {
+    const selectedStatus = e.currentTarget.dataset.sts
+    sts.value = parseInt(selectedStatus)
+    loadOrderData(sts.value, 1)
+  }
 
-/**
- * 查看物流
- */
-const toDeliveryPage = (e) => {
-  uni.navigateTo({
-    url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
-  })
-}
+  // 获取订单状态标签
+  const getStatusLabel = (status) => {
+    return statuses.find(s => s.value === status)?.label || '未知状态'
+  }
 
-/**
- * 取消订单
- */
-const onCancelOrder = (e) => {
-  const ordernum = e.currentTarget.dataset.ordernum
-  uni.showModal({
-    title: '',
-    content: '要取消此订单？',
-    confirmColor: '#3e62ad',
-    cancelColor: '#3e62ad',
-    cancelText: '否',
-    confirmText: '是',
+  // 查看物流
+  const toDeliveryPage = (e) => {
+    uni.navigateTo({
+      url: `/pages/express-delivery/express-delivery?orderNum=${e.currentTarget.dataset.ordernum}`
+    })
+  }
+
+  // 取消订单
+  const onCancelOrder = (e) => {
+    const ordernum = e.currentTarget.dataset.ordernum
+    uni.showModal({
+      title: '',
+      content: '要取消此订单？',
+      confirmColor: '#3e62ad',
+      cancelColor: '#3e62ad',
+      cancelText: '否',
+      confirmText: '是',
 
-    success (res) {
-      if (res.confirm) {
-        uni.showLoading({
-          mask: true
-        })
-        http.request({
-          url: '/p/myOrder/cancel/' + ordernum,
-          method: 'PUT',
-          data: {}
-        })
-          .then(() => {
-            loadOrderData(sts.value, 1)
-            uni.hideLoading()
+      success(res) {
+        if (res.confirm) {
+          uni.showLoading({ mask: true })
+          http.request({
+            url: `/p/myOrder/cancel/${ordernum}`,
+            method: 'PUT'
           })
+            .then(() => {
+              loadOrderData(sts.value, 1)
+              uni.hideLoading()
+            })
+        }
       }
-    }
-  })
-}
+    })
+  }
 
-/**
- * 模拟支付，直接提交成功
- * @param e
- */
-const normalPay = (e) => {
-  uni.showLoading({
-    mask: true
-  })
-  http.request({
-    url: '/p/order/normalPay',
-    method: 'POST',
-    data: {
-      orderNumbers: e.currentTarget.dataset.ordernum
-    }
-  })
-    .then(({ data }) => {
-      uni.hideLoading()
-      if (data) {
-        uni.showToast({
-          title: '模拟支付成功',
-          icon: 'none'
-        })
-        setTimeout(() => {
-          uni.navigateTo({
-            url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e.currentTarget.dataset.ordernum
-          })
-        }, 1200)
-      } else {
-        uni.showToast({
-          title: '支付失败！',
-          icon: 'none'
-        })
+  // 模拟支付，直接提交成功
+  const normalPay = (e) => {
+    uni.showLoading({ mask: true })
+    http.request({
+      url: '/p/order/normalPay',
+      method: 'POST',
+      data: {
+        orderNumbers: e.currentTarget.dataset.ordernum
       }
     })
-}
+      .then(({ data }) => {
+        uni.hideLoading()
+        if (data) {
+          uni.showToast({
+            title: '模拟支付成功',
+            icon: 'none'
+          })
+          setTimeout(() => {
+            uni.navigateTo({
+              url: `/pages/pay-result/pay-result?sts=1&orderNumbers=${e.currentTarget.dataset.ordernum}`
+            })
+          }, 1200)
+        } else {
+          uni.showToast({
+            title: '支付失败！',
+            icon: 'none'
+          })
+        }
+      })
+  }
 
-/**
- * 查看订单详情
- */
-const toOrderDetailPage = (e) => {
-  uni.navigateTo({
-    url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
-  })
-}
+  // 查看订单详情
+  const toOrderDetailPage = (e) => {
+    uni.navigateTo({
+      url: `/pages/order-detail/order-detail?orderNum=${e.currentTarget.dataset.ordernum}`
+    })
+  }
 
-/**
- * 确认收货
- */
-const onConfirmReceive = (e) => {
-  uni.showModal({
-    title: '',
-    content: '我已收到货？',
-    confirmColor: '#eb2444',
+  // 确认收货
+  const onConfirmReceive = (e) => {
+    uni.showModal({
+      title: '',
+      content: '我已收到货？',
+      confirmColor: '#eb2444',
 
-    success (res) {
-      if (res.confirm) {
-        uni.showLoading({
-          mask: true
-        })
-        http.request({
-          url: '/p/myOrder/receipt/' + e.currentTarget.dataset.ordernum,
-          method: 'PUT'
-        })
-          .then(() => {
-            loadOrderData(sts.value, 1)
-            uni.hideLoading()
+      success(res) {
+        if (res.confirm) {
+          uni.showLoading({ mask: true })
+          http.request({
+            url: `/p/myOrder/receipt/${e.currentTarget.dataset.ordernum}`,
+            method: 'PUT'
           })
+            .then(() => {
+              loadOrderData(sts.value, 1)
+              uni.hideLoading()
+            })
+        }
       }
-    }
-  })
-}
+    })
+  }
 
-/**
- * 删除已完成||已取消的订单
- * @param e
- */
-const delOrderList = (e) => {
-  uni.showModal({
-    title: '',
-    content: '确定要删除此订单吗？',
-    confirmColor: '#eb2444',
+  // 删除已完成或已取消的订单
+  const delOrderList = (e) => {
+    uni.showModal({
+      title: '',
+      content: '确定要删除此订单吗？',
+      confirmColor: '#eb2444',
 
-    success (res) {
-      if (res.confirm) {
-        const ordernum = e.currentTarget.dataset.ordernum
-        uni.showLoading()
+      success(res) {
+        if (res.confirm) {
+          const ordernum = e.currentTarget.dataset.ordernum
+          uni.showLoading()
 
-        http.request({
-          url: '/p/myOrder/' + ordernum,
-          method: 'DELETE'
-        })
-          .then(() => {
-            loadOrderData(sts.value, 1)
-            uni.hideLoading()
+          http.request({
+            url: `/p/myOrder/${ordernum}`,
+            method: 'DELETE'
           })
+            .then(() => {
+              loadOrderData(sts.value, 1)
+              uni.hideLoading()
+            })
+        }
       }
-    }
-  })
-}
-
+    })
+  }
 </script>
 
 <style scoped lang="scss">
-@use './orderList.scss';
+  @use './orderList.scss';
 </style>
diff --git a/front-end/mall4uni/src/pages/pay-result/pay-result.scss b/front-end/mall4uni/src/pages/pay-result/pay-result.scss
index eb8e3e3..f857c70 100644
--- a/front-end/mall4uni/src/pages/pay-result/pay-result.scss
+++ b/front-end/mall4uni/src/pages/pay-result/pay-result.scss
@@ -1,50 +1,92 @@
+/* 定义支付状态信息的样式 */
 .pay-sts {
+  /* 设置字体大小为40rpx */
   font-size: 40rpx;
+  /* 设置顶部外边距为100rpx，使支付状态信息与页面顶部有一定的间距 */
   margin-top: 100rpx;
+  /* 设置上下内边距为30rpx，左右内边距为0，确保文本有足够的内部空间 */
   padding: 30rpx 0;
+  /* 文本居中对齐 */
   text-align: center;
 }
+
+/* 当支付状态为失败时，设置文本颜色为红色（#f43530），以视觉上突出错误信息 */
 .pay-sts.fail {
   color: #f43530;
 }
+
+/* 当支付状态为成功时，设置文本颜色为绿色（#19be6b），表示操作成功 */
 .pay-sts.succ {
   color: #19be6b;
 }
+
+/* 定义按钮组的样式 */
 .btns {
+  /* 设置顶部外边距为50rpx，使按钮组与上方内容有一定的间距 */
   margin-top: 50rpx;
+  /* 文本居中对齐 */
   text-align: center;
+  /* 定义默认按钮样式 */
   .button {
+    /* 设置圆角半径为10rpx，使按钮看起来更加圆润 */
     border-radius: 10rpx;
+    /* 设置字体大小为28rpx */
     font-size: 28rpx;
+    /* 设置背景颜色为白色 */
     background: #fff;
+    /* 设置文本颜色为深灰色 */
     color: #333;
+    /* 设置上下内边距为20rpx，左右内边距为35rpx，确保按钮内的文本有足够的内部空间 */
     padding: 20rpx 35rpx;
+    /* 设置按钮宽度为300rpx，确保按钮在不同屏幕尺寸下都能保持一致的宽度 */
     width: 300rpx;
+    /* 设置左右外边距为20rpx，确保按钮之间有一定的间距 */
     margin: 0 20rpx;
+    /* 文本居中对齐 */
     text-align: center;
   }
+  /* 定义“查看订单”按钮的样式 */
   .button.checkorder {
+    /* 设置背景颜色为绿色（#19be6b），表示这是一个积极的操作 */
     background: #19be6b;
+    /* 设置文本颜色为白色 */
     color: #fff;
+    /* 设置底部外边距为20rpx，使按钮与其他元素之间有一定的间距 */
     margin-bottom: 20rpx;
+    /* 设置边框为2rpx宽的绿色实线 */
     border: 2rpx solid #19be6b;
   }
+  /* 定义“再次支付”按钮的样式 */
   .button.payagain {
+    /* 设置背景颜色为白色 */
     background: #fff;
+    /* 设置边框为2rpx宽的橙色实线 */
     border: 2rpx solid #f90;
+    /* 设置文本颜色为橙色 */
     color: #f90;
   }
+  /* 定义“继续购物”按钮的样式 */
   .button.shopcontinue {
+    /* 设置背景颜色为白色 */
     background: #fff;
+    /* 设置边框为2rpx宽的绿色实线 */
     border: 2rpx solid #19be6b;
+    /* 设置文本颜色为绿色 */
     color: #19be6b;
   }
 }
+
+/* 定义提示信息的样式 */
 .tips {
+  /* 设置字体大小为28rpx */
   font-size: 28rpx;
+  /* 设置文本颜色为浅灰色（#999），使提示信息显得不那么显眼 */
   color: #999;
+  /* 文本居中对齐 */
   text-align: center;
+  /* 定义警告信息的样式 */
   .warn {
+    /* 设置文本颜色为红色（#f43530），用于突出显示警告或错误信息 */
     color: #f43530;
   }
 }
diff --git a/front-end/mall4uni/src/pages/pay-result/pay-result.vue b/front-end/mall4uni/src/pages/pay-result/pay-result.vue
index 9dae116..aada750 100644
--- a/front-end/mall4uni/src/pages/pay-result/pay-result.vue
+++ b/front-end/mall4uni/src/pages/pay-result/pay-result.vue
@@ -1,52 +1,61 @@
 <template>
+  <!-- 定义页面的根容器 -->
   <view class="container">
+    <!-- 当支付状态为失败（sts == 0）时显示的内容 -->
     <view v-if="sts == 0">
+      <!-- 显示支付失败的状态信息 -->
       <view class="pay-sts fail">
         支付失败
       </view>
+
+      <!-- 提示用户在30分钟内完成付款，否则订单会被取消 -->
       <view class="tips">
         请在
-        <text class="warn">
-          30分钟
-        </text>内完成付款
+        <text class="warn">30分钟</text>内完成付款
       </view>
       <view class="tips">
         否则订单会被系统取消
       </view>
+
+      <!-- 按钮组，提供“查看订单”和“重新支付”的操作选项 -->
       <view class="btns">
-        <text
-          class="button checkorder"
-          @tap="toOrderList"
-        >
+        <!-- “查看订单”按钮，点击后跳转到订单列表页面 -->
+        <text class="button checkorder"
+              @tap="toOrderList">
           查看订单
         </text>
-        <text
-          class="button payagain"
-          @tap="payAgain"
-        >
+
+        <!-- “重新支付”按钮，点击后触发重新支付的操作 -->
+        <text class="button payagain"
+              @tap="payAgain">
           重新支付
         </text>
       </view>
     </view>
 
+    <!-- 当支付状态为成功（sts == 1）时显示的内容 -->
     <view v-if="sts == 1">
+      <!-- 显示支付成功的状态信息 -->
       <view class="pay-sts succ">
         支付成功
       </view>
+
+      <!-- 感谢用户的购买 -->
       <view class="tips">
         感谢您的购买
       </view>
+
+      <!-- 按钮组，提供“查看订单”和“继续购物”的操作选项 -->
       <view class="btns">
-        <text
-          class="button checkorder"
-          @tap="toOrderList"
-        >
+        <!-- “查看订单”按钮，点击后跳转到订单列表页面 -->
+        <text class="button checkorder"
+              @tap="toOrderList">
           查看订单
         </text>
-        <text
-          class="button shopcontinue"
-          @tap="toIndex"
-        >
+
+        <!-- “继续购物”按钮，点击后返回首页 -->
+        <text class="button shopcontinue"
+              @tap="toIndex">
           继续购物
         </text>
       </view>
@@ -55,56 +64,87 @@
 </template>
 
 <script setup>
-const sts = ref(0)
-const orderNumbers = ref('')
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  sts.value = options.sts
-  orderNumbers.value = options.orderNumbers
-})
-
-const toOrderList = () => {
-  uni.navigateTo({
-    url: '/pages/orderList/orderList?sts=0'
-  })
-}
-const toIndex = () => {
-  uni.switchTab({
-    url: '/pages/index/index'
-  })
-}
-const payAgain = () => {
-  uni.showLoading({
-    mask: true
-  })
-  http.request({
-    url: '/p/order/pay',
-    method: 'POST',
-    data: {
-      payType: 1,
-      orderNumbers: orderNumbers.value
-    }
-  })
-    .then(({ data }) => {
-      uni.hideLoading()
-      uni.requestPayment({
-        timeStamp: data.timeStamp,
-        nonceStr: data.nonceStr,
-        package: data.packageValue,
-        signType: data.signType,
-        paySign: data.paySign,
-        success: () => {
-          uni.redirectTo({
-            url: '/pages/pay-result/pay-result?sts=1&orderNum=' + orderNumbers.value
-          })
-        }
-      })
+  // 引入Vue的响应式数据ref
+  import { ref } from 'vue';
+  // 引入uni-app的API
+  import { onLoad, navigateTo, switchTab, showLoading, hideLoading, requestPayment, redirectTo } from '@dcloudio/uni-app';
+  // 引入HTTP请求模块（假设已经定义）
+  import http from '@/utils/http';
+
+  // 定义支付状态和订单号的响应式变量
+  const sts = ref(0); // 初始状态下设置为0，表示支付失败
+  const orderNumbers = ref(''); // 存储订单号
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad((options) => {
+    // 根据页面加载时传递的参数设置支付状态和订单号
+    sts.value = parseInt(options.sts, 10); // 将字符串转换为整数
+    orderNumbers.value = options.orderNumbers;
+  });
+
+  // 定义跳转到订单列表页面的方法
+  const toOrderList = () => {
+    navigateTo({
+      url: '/pages/orderList/orderList?sts=0' // 传递参数sts=0表示只显示未支付的订单
+    });
+  };
+
+  // 定义跳转到首页的方法
+  const toIndex = () => {
+    switchTab({
+      url: '/pages/index/index' // 跳转到首页
+    });
+  };
+
+  // 定义重新支付的方法
+  const payAgain = () => {
+    // 显示加载中提示框，防止用户多次点击
+    showLoading({
+      mask: true // 遮罩层，阻止用户交互
+    });
+
+    // 发起支付请求
+    http.request({
+      url: '/p/order/pay', // 支付接口URL
+      method: 'POST', // HTTP请求方法
+      data: {
+        payType: 1, // 支付类型（例如：1表示微信支付）
+        orderNumbers: orderNumbers.value // 传递订单号
+      }
     })
-}
+      .then(({ data }) => {
+        // 请求成功后隐藏加载中提示框
+        hideLoading();
+
+        // 发起微信支付请求
+        requestPayment({
+          timeStamp: data.timeStamp, // 时间戳
+          nonceStr: data.nonceStr, // 随机字符串
+          package: data.packageValue, // 包含预支付交易会话标识
+          signType: data.signType, // 签名类型
+          paySign: data.paySign, // 支付签名
+          success: () => {
+            // 支付成功后跳转到支付结果页面，并传递支付状态和订单号
+            redirectTo({
+              url: `/pages/pay-result/pay-result?sts=1&orderNum=${orderNumbers.value}`
+            });
+          },
+          fail: (err) => {
+            console.error('支付失败:', err);
+            // 可以在这里处理支付失败的情况，例如显示错误提示
+          }
+        });
+      })
+      .catch(err => {
+        console.error('发起支付请求失败:', err);
+        // 可以在这里处理发起支付请求失败的情况，例如显示错误提示
+      });
+  };
 </script>
 
 <style scoped lang="scss">
-@use './pay-result.scss';
+  /* 使用本地的SCSS文件来定义样式 */
+  @use './pay-result.scss';
 </style>