diff --git a/src/views/oms/apply/applyDetail.vue b/src/views/oms/apply/applyDetail.vue
index 68f2807..4eadbc1 100644
--- a/src/views/oms/apply/applyDetail.vue
+++ b/src/views/oms/apply/applyDetail.vue
@@ -2,386 +2,622 @@
   <div class="detail-container">
     <el-card shadow="never">
       <span class="font-title-medium">退货商品</span>
-      <el-table
+
+
+<!-- 
+    使用el-table组件来展示表格数据。
+    border属性用于给表格添加边框，使其样式上更清晰的显示表格结构。
+    class="standard-margin" 用于给这个表格元素添加一个自定义的类名，通过这个类名可以在CSS中定义相应的外边距等样式规则，以控制表格在页面中的布局显示效果。
+    ref="productTable" 是给这个表格元素添加一个引用标识，方便在Vue实例的JavaScript代码中通过this.$refs.productTable来获取这个表格组件的实例，进而可以调用它的一些方法或者访问它的属性等。
+    :data="productList" 是使用Vue的指令将名为productList的数据绑定到表格组件上，这个productList应该是在Vue实例的数据对象中定义好的数组类型的数据，表格组件会基于这个数据来渲染每一行的内容。
+-->
+<el-table
         border
         class="standard-margin"
         ref="productTable"
         :data="productList">
-        <el-table-column label="商品图片" width="160" align="center">
-          <template slot-scope="scope">
-            <img style="height:80px" :src="scope.row.productPic">
-          </template>
-        </el-table-column>
-        <el-table-column label="商品名称" align="center">
-          <template slot-scope="scope">
-            <span class="font-small">{{scope.row.productName}}</span><br>
-            <span class="font-small">品牌：{{scope.row.productBrand}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="价格/货号" width="180" align="center">
-          <template slot-scope="scope">
-            <span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
-            <span class="font-small">货号：NO.{{scope.row.productId}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="属性" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.productAttr}}</template>
-        </el-table-column>
-        <el-table-column label="数量" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.productCount}}</template>
-        </el-table-column>
-        <el-table-column label="小计" width="100" align="center">
-          <template slot-scope="scope">￥{{totalAmount}}</template>
-        </el-table-column>
-      </el-table>
-      <div style="float:right;margin-top:15px;margin-bottom:15px">
+    <!-- 这里可以添加<el-table-column>等子组件来定义表格的具体列信息，比如列标题、列对应的数据字段等 -->
+</el-table>
+
+
+
+<!-- 
+    el-table-column组件用于定义el-table中的列信息。
+    label="商品图片" 属性指定了该列在表格头部显示的标题名称为“商品图片”，这样用户就能直观知晓这一列所代表的数据含义。
+    width="160" 属性设置了该列的宽度为160像素，通过设置合适的宽度可以让表格各列布局更加合理、美观，避免内容显示过于拥挤或稀疏。
+    align="center" 属性将该列中的内容在水平方向上进行居中对齐，使展示效果更加整齐、规范，符合常见的页面布局审美要求。
+-->
+<el-table-column label="商品图片" width="160" align="center">
+    <!-- 
+        template标签结合slot-scope="scope" 是一种在表格列中自定义内容渲染的方式。
+        slot-scope="scope" 这里的scope是一个包含了当前行数据等相关信息的对象，通过它可以访问到当前行对应的数据。
+    -->
+    <template slot-scope="scope">
+        <!-- 
+            img标签用于在表格单元格中展示图片。
+            style="height:80px" 是内联样式，用于设置图片的高度为80像素，以此来统一该列中图片展示的高度，达到整齐美观的视觉效果。
+            :src="scope.row.productPic" 是使用Vue的绑定语法，将src属性绑定到scope.row.productPic上，也就是从scope对象中获取当前行（row）对应的商品图片的路径（productPic）信息，从而正确地显示对应的商品图片。
+        -->
+        <img style="height:80px" :src="scope.row.productPic">
+    </template>
+</el-table-column>
+
+
+
+<!-- 
+    el-table-column 组件用于在 el-table 中定义具体的列信息。
+    label="商品名称" 属性设定了此列在表格头部所显示的标题文字为“商品名称”，方便用户明确该列所展示的数据内容大致范围。
+    align="center" 属性将该列单元格内的内容在水平方向进行居中对齐，让表格内的数据呈现更加规整、美观，符合常规的页面排版视觉效果要求。
+-->
+<el-table-column label="商品名称" align="center">
+    <!-- 
+        template 标签结合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格内容展示方式的常用手段。
+        slot-scope="scope" 这里定义的 scope 是一个包含了当前行诸多相关信息的对象，借助它可以访问到当前行（对应表格中的一行数据）的具体数据情况。
+    -->
+    <template slot-scope="scope">
+        <!-- 
+            span 标签在这里用于包裹文本内容，使其可以灵活地设置样式以及在 HTML 结构中进行布局。
+            class="font-small" 给 span 标签添加了一个名为“font-small”的类名，通常是在项目的 CSS 文件（或者是内联样式所在的样式作用域内）中定义了对应的字体大小等样式规则，以此来让文本以较小的字体呈现，可能是为了在表格单元格内更合理地展示信息，避免文字过大而影响整体布局美观性。
+            {{scope.row.productName}} 这是 Vue 中的插值表达式，它会将 scope 对象中 row 属性下的 productName 字段对应的值渲染显示出来，也就是展示当前行对应的商品名称信息。
+        -->
+        <span class="font-small">{{scope.row.productName}}</span><br>
+        <!-- 
+            这里同样使用 span 标签结合类名“font-small”来包裹文本内容，用于控制文本的样式呈现。
+            “品牌：{{scope.row.productBrand}}”中的插值表达式 {{scope.row.productBrand}} 用于获取并显示当前行对应的商品品牌信息，前面添加“品牌：”这样的固定文字，是为了更清晰地告知用户后面跟着的是商品的品牌内容，整体在表格单元格内更直观地展示商品相关的关键信息。
+        -->
+        <span class="font-small">品牌：{{scope.row.productBrand}}</span>
+    </template>
+</el-table-column>
+
+
+
+
+<!-- 
+    el-table-column 组件用于在 el-table 中定义特定的列信息，以此来控制表格每列的展示内容、样式等相关属性。
+    label="价格/货号" 属性用于指定该列在表格头部显示的标题内容为“价格/货号”，使用这样的标题可以简洁地告知用户这一列将会呈现商品的价格以及货号相关信息。
+    width="180" 属性设置了此列的宽度为 180 像素，通过合理设置列宽，能够让表格整体的布局更加协调、美观，避免不同列的内容显示出现过宽或过窄等影响阅读体验的情况。
+    align="center" 属性使得该列单元格内的所有内容在水平方向上进行居中对齐，确保数据展示整齐、规范，符合常规页面设计中对于表格数据排版的美观要求。
+-->
+<el-table-column label="价格/货号" width="180" align="center">
+    <!-- 
+        template 标签配合 slot-scope="scope" 的写法，是在 Element UI 组件的表格列中自定义单元格具体内容呈现方式的常见做法。
+        slot-scope="scope" 这里定义的 scope 是一个包含了当前行各项相关信息的对象，借助它可以访问到当前行（也就是对应表格中的某一行完整数据）的各个数据字段情况。
+    -->
+    <template slot-scope="scope">
+        <!-- 
+            span 标签用于包裹具体的文本内容，通过添加类名等操作，可以方便地为其设置样式，同时在 HTML 结构里实现灵活的布局效果。
+            class="font-small" 给 span 标签添加了一个名为“font-small”的类名，一般情况下，在项目的 CSS 样式文件或者所在的样式作用域内，会针对这个类名预先定义相应的样式规则，例如设置较小的字体大小等，目的是为了让文本以更合适的尺寸在表格单元格内进行展示，避免字体过大占据过多空间而影响整体的布局美观程度。
+            “价格：￥{{scope.row.productRealPrice}}”中的插值表达式 {{scope.row.productRealPrice}} 会从 scope 对象中 row 属性下对应的 productRealPrice 字段获取值，并将其渲染显示出来，在前面添加“价格：￥”这样的固定文本描述，能更清晰地向用户表明后面跟着的是商品的具体价格信息，整体呈现出商品价格的展示形式。
+        -->
+        <span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
+        <!-- 
+            同样使用 span 标签并添加“font-small”类名来控制文本样式，保持和前面价格展示文本在样式上的一致性。
+            “货号：NO.{{scope.row.productId}}”里的插值表达式 {{scope.row.productId}} 用于获取并展示当前行对应的商品货号信息，在前面添加“货号：NO.”的固定文本，是为了更直观地告知用户后面显示的是商品的货号，让用户可以更清晰地分辨出不同的数据内容，符合良好的信息展示规范。
+        -->
+        <span class="font-small">货号：NO.{{scope.row.productId}}</span>
+    </template>
+</el-table-column>
+
+
+
+
+<!-- 
+    以下是一系列用于定义 el-table 中不同列信息的 el-table-column 组件。
+
+    第一个 el-table-column 组件，用于定义展示“属性”信息的列。
+    label="属性" 属性指定了该列在表格头部显示的标题为“属性”，方便用户知晓此列所呈现的数据范畴。
+    width="180" 属性将该列的宽度设置为 180 像素，通过合理设定宽度，使表格布局更显协调美观，避免列宽不合适影响整体展示效果。
+    align="center" 属性让该列单元格内的内容在水平方向上居中对齐，确保数据排列整齐规范，符合常规的页面设计审美要求。
+    其内部 template 标签结合 slot-scope="scope" 来获取当前行数据，并展示相应内容。具体来说，{{scope.row.productAttr}} 这个插值表达式会从 scope 对象中 row 属性下的 productAttr 字段获取值，并渲染显示出来，也就是在单元格中展示当前行对应的商品属性信息。
+-->
+<el-table-column label="属性" width="180" align="center">
+    <template slot-scope="scope">{{scope.row.productAttr}}</template>
+</el-table-column>
+<!-- 
+    第二个 el-table-column 组件，用于定义展示“数量”信息的列。
+    label="数量" 属性设定该列在表格头部的标题为“数量”，清晰表明此列所展示的数据内容。
+    width="100" 属性将列宽设定为 100 像素，同样是为了优化表格整体的布局效果，让各列宽度适配展示内容的多少。
+    align="center" 属性使得该列内容在水平方向居中对齐，增强表格数据展示的规整性。
+    内部 template 标签中通过 {{scope.row.productCount}} 插值表达式，从 scope 对象的 row 属性下的 productCount 字段获取对应的值，并将其展示在单元格中，实现当前行商品数量信息的呈现。
+-->
+<el-table-column label="数量" width="100" align="center">
+    <template slot-scope="scope">{{scope.row.productCount}}</template>
+</el-table-column>
+<!-- 
+    第三个 el-table-column 组件，用于定义展示“小计”信息的列。
+    label="小计" 属性指定了该列在表格头部显示的标题是“小计”，让用户明白此处展示的是经过一定计算后的金额小计数据。
+    width="100" 属性将该列宽度设为 100 像素，以适配表格布局，使各列看起来疏密得当。
+    align="center" 属性保证该列内容在水平方向上居中对齐，提升整体展示的美观度。
+    内部 template 标签里的 {{totalAmount}} 插值表达式，这里推测 totalAmount 应该是在 Vue 实例的 data 或者 computed 等相关属性中定义好的一个变量（可能是基于商品的单价、数量等计算得出的小计金额），会将其对应的值渲染显示出来，用于展示每一行对应的金额小计情况。
+-->
+<el-table-column label="小计" width="100" align="center">
+    <template slot-scope="scope">￥{{totalAmount}}</template>
+</el-table-column>
+</el-table>
+
+
+
+
+    <div style="float:right;margin-top:15px;margin-bottom:15px">
         <span class="font-title-medium">合计：</span>
         <span class="font-title-medium color-danger">￥{{totalAmount}}</span>
       </div>
     </el-card>
-    <el-card shadow="never" class="standard-margin">
-      <span class="font-title-medium">服务单信息</span>
-      <div class="form-container-border">
+
+
+
+ <!-- 
+    使用 el-card 组件来创建一个卡片式的布局容器，shadow="never" 属性表示该卡片不显示阴影效果，class="standard-margin" 用于给卡片添加一个自定义的类名，通过这个类名可以在 CSS 中定义相应的外边距等样式规则，以控制卡片在页面中的布局显示效果，此卡片用于展示服务单相关信息。
+-->
+<el-card shadow="never" class="standard-margin">
+    <!-- 
+        使用 span 标签展示一个标题文本，class="font-title-medium" 给 span 标签添加了一个类名，用于设置该标题的字体样式（推测是中等大小的字体，具体样式由项目中对应的 CSS 规则定义），文本内容为“服务单信息”，用于明确下方展示内容的主题。
+    -->
+    <span class="font-title-medium">服务单信息</span>
+    <!-- 
+        div 标签作为一个容器，添加了 class="form-container-border" 类名（推测用于设置边框等样式来区分不同的信息块），内部包含多个 el-row 和 el-col 组件用于布局服务单的各项具体信息。
+    -->
+    <div class="form-container-border">
+        <!-- 
+            el-row 组件用于创建行布局，在 Element UI 的栅格系统中，多个 el-col 组件放置在 el-row 内来划分列，实现灵活的页面布局。
+            以下是第一组 el-row 和 el-col 组件，用于展示“服务单号”信息。
+        -->
         <el-row>
-          <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
+            <!-- 
+                el-col 组件用于定义列，:span="6" 表示该列占 6 份（在默认 24 份的栅格系统中），class="form-border form-left-bg font-small" 给该列添加了类名，用于设置边框、背景（可能是左边栏的背景色用于区分左右内容）以及字体大小（较小字体，同样具体样式由对应 CSS 规则定义），文本内容为“服务单号”，作为该信息项的标题显示在左边栏。
+            -->
+            <el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
+            <!-- 
+                此 el-col 组件占 18 份，用于展示服务单号的具体值，通过插值表达式 {{orderReturnApply.id}} 从 orderReturnApply 对象的 id 属性获取对应的值并渲染显示，class="form-border font-small" 用于设置边框和较小字体样式。
+            -->
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
         </el-row>
+        <!-- 
+            以下是第二组 el-row 和 el-col 组件，用于展示“申请状态”信息，结构和功能与展示“服务单号”类似，不同之处在于展示的值通过管道符（|）使用了 formatStatus 过滤器（推测是在 Vue 实例中定义好的，用于对状态值进行格式化处理，比如转换为更友好的文字描述等）。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
         </el-row>
+        <!-- 
+            以下是第三组 el-row 和 el-col 组件，用于展示“订单编号”信息，除了通过插值表达式 {{orderReturnApply.orderSn}} 展示订单编号具体值外，还添加了一个 el-button 组件。
+            el-button 组件的 type="text" 表示是文本样式按钮（外观上更简洁，类似普通文本链接效果），size="small" 表示小尺寸按钮，@click="handleViewOrder" 绑定了点击事件，点击该按钮会调用 Vue 实例中定义的 handleViewOrder 方法，用于实现查看订单的相关操作。
+            对应列设置了 height 和 line-height 样式来控制高度和行高，使布局更美观。
+        -->
         <el-row>
-          <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
-          </el-col>
-          <el-col class="form-border font-small" :span="18" style="height:50px">
-            {{orderReturnApply.orderSn}}
-            <el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
-          </el-col>
+            <el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
+            </el-col>
+            <el-col class="form-border font-small" :span="18" style="height:50px">
+                {{orderReturnApply.orderSn}}
+                <el-button type="text" size="small" @click="handleViewOrder">查看</el-button>
+            </el-col>
         </el-row>
+        <!-- 
+            以下是第四组 el-row 和 el-col 组件，用于展示“申请时间”信息，通过插值表达式 {{orderReturnApply.createTime | formatTime}} 展示申请时间具体值，使用了 formatTime 过滤器（推测用于将时间格式进行格式化，比如转换为指定的日期时间格式等）。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
         </el-row>
+        <!-- 
+            以下是第五组 el-row 和 el-col 组件，用于展示“用户账号”信息，通过插值表达式 {{orderReturnApply.memberUsername}} 展示用户账号具体值。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
         </el-row>
+        <!-- 
+            以下是第六组 el-row 和 el-col 组件，用于展示“联系人”信息，通过插值表达式 {{orderReturnApply.returnName}} 展示联系人具体值。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
         </el-row>
+        <!-- 
+            以下是第七组 el-row 和 el-col 组件，用于展示“联系电话”信息，通过插值表达式 {{orderReturnApply.returnPhone}} 展示联系电话具体值。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
         </el-row>
+        <!-- 
+            以下是第八组 el-row 和 el-col 组件，用于展示“退货原因”信息，通过插值表达式 {{orderReturnApply.reason}} 展示退货原因具体值。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
         </el-row>
+        <!-- 
+            以下是第九组 el-row 和 el-col 组件，用于展示“问题描述”信息，通过插值表达式 {{orderReturnApply.description}} 展示问题描述具体值。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
         </el-row>
+        <!-- 
+            以下是第十组 el-row 和 el-col 组件，用于展示“凭证图片”信息，el-col 列设置了 height 样式控制高度，内部使用 v-for 指令对 proofPics 数组进行循环遍历（推测 proofPics 是一个包含图片路径等信息的数组），对于每个元素 item，通过 :src="item" 将其作为图片的 src 属性值，展示对应的图片，图片设置了 width 和 height 样式控制大小为 80px×80px。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
-          </el-col>
-          <el-col class="form-border font-small" :span="18" style="height:100px">
-            <img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
-          </el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
+            </el-col>
+            <el-col class="form-border font-small" :span="18" style="height:100px">
+                <img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
+            </el-col>
         </el-row>
-      </div>
-      <div class="form-container-border">
+    </div>
+    <!-- 
+        以下又是一个添加了 class="form-container-border" 类名的 div 容器，用于展示另一部分服务单相关信息，内部同样由多个 el-row 和 el-col 组件构成。
+    -->
+    <div class="form-container-border">
+        <!-- 
+            以下是第一组 el-row 和 el-col 组件，用于展示“订单金额”信息，通过插值表达式 ￥{{totalAmount}} 展示订单金额具体值（前面添加“￥”符号表示人民币金额）。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
-          <el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
+            <el-col class="form-border font-small" :span="18">￥{{totalAmount}}</el-col>
         </el-row>
+        <!-- 
+            以下是第二组 el-row 和 el-col 组件，用于展示“确认退款金额”信息，除了展示固定的“￥”符号外，还使用了 el-input 组件。
+            el-input 组件的 size="small" 表示小尺寸输入框，v-model="updateStatusParam.returnAmount" 使用双向数据绑定，将输入框的值与 Vue 实例中 updateStatusParam 对象的 returnAmount 属性进行绑定，方便数据的获取和更新，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定输入框是否可用（如果状态不是 0 则不可用），并设置了 width 样式控制宽度以及 margin-left 样式控制左边距。
+        -->
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
-          </el-col>
-          <el-col class="form-border font-small" style="height:52px" :span="18">
-            ￥
-            <el-input size="small" v-model="updateStatusParam.returnAmount"
-                      :disabled="orderReturnApply.status!==0"
-                      style="width:200px;margin-left: 10px"></el-input>
-          </el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
+            </el-col>
+            <el-col class="form-border font-small" style="height:52px" :span="18">
+                ￥
+                <el-input size="small" v-model="updateStatusParam.returnAmount"
+                          :disabled="orderReturnApply.status!==0"
+                          style="width:200px;margin-left: 10px"></el-input>
+            </el-col>
         </el-row>
+        <!-- 
+            以下 v-show="orderReturnApply.status!==3" 指令根据服务单申请状态是否不等于 3 来决定是否显示内部包含的元素，用于在特定状态下展示相关信息，内部是一组与选择收货相关的 el-row 和 el-col 组件。
+        -->
         <div v-show="orderReturnApply.status!==3">
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
-          </el-col>
-          <el-col class="form-border font-small" style="height:52px" :span="18">
-            <el-select size="small"
-                       style="width:200px"
-                       :disabled="orderReturnApply.status!==0"
-                       v-model="updateStatusParam.companyAddressId">
-              <el-option v-for="address in companyAddressList"
-                         :key="address.id"
-                         :value="address.id"
-                         :label="address.addressName">
-              </el-option>
-            </el-select>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
-          <el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
-        </el-row>
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
-          <el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
-        </el-row>
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
-          <el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
-        </el-row>
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
-          <el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
-        </el-row>
+            <!-- 
+                以下是第一组用于展示“选择收货点”信息的 el-row 和 el-col 组件，el-col 中使用 el-select 组件来创建一个下拉选择框。
+                el-select 组件的 size="small" 表示小尺寸下拉框，style="width:200px" 设置宽度，:disabled="orderReturnApply.status!==0" 根据服务单申请状态是否为 0 来决定下拉框是否可用，v-model="updateStatusParam.companyAddressId" 通过双向数据绑定将选择的值与 Vue 实例中 updateStatusParam 对象的 companyAddressId 属性进行绑定，内部通过 v-for 指令循环遍历 companyAddressList 数组（推测是包含收货点地址信息的数组），为每个元素 address 创建一个 el-option 选项，通过 :key、:value 和 :label 属性分别设置选项的唯一标识、对应的值以及显示的文本内容。
+            -->
+            <el-row>
+                <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
+                </el-col>
+                <el-col class="form-border font-small" style="height:52px" :span="18">
+                    <el-select size="small"
+                               style="width:200px"
+                               :disabled="orderReturnApply.status!==0"
+                               v-model="updateStatusParam.companyAddressId">
+                        <el-option v-for="address in companyAddressList"
+                                   :key="address.id"
+                                   :value="address.id"
+                                   :label="address.addressName">
+                        </el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+            <!-- 
+                以下是第二组用于展示“收货人姓名”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.name}} 展示收货人姓名具体值（推测 currentAddress 是当前选择或关联的收货地址对象）。
+            -->
+            <el-row>
+                <el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
+                <el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
+            </el-row>
+            <!-- 
+                以下是第三组用于展示“所在区域”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress | formatRegion}} 展示所在区域具体值，使用了 formatRegion 过滤器（推测用于对地址区域信息进行格式化处理，使其显示更规范等）。
+            -->
+            <el-row>
+                <el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
+                <el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
+            </el-row>
+            <!-- 
+                以下是第四组用于展示“详细地址”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.detailAddress}} 展示详细地址具体值。
+            -->
+            <el-row>
+                <el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
+                <el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
+            </el-row>
+            <!-- 
+                以下是第五组用于展示“联系电话”信息的 el-row 和 el-col 组件，通过插值表达式 {{currentAddress.phone}} 展示联系电话具体值。
+            -->
+            <el-row>
+                <el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
+                <el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
+            </el-row>
         </div>
-      </div>
-      <div class="form-container-border" v-show="orderReturnApply.status!==0">
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
-        </el-row>
+    </div>
+    <!-- 
+        以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status!==0" 根据服务单申请状态是否不等于 0 来决定是否显示的 div 容器，内部包含用于展示“处理人员”“处理时间”“处理备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
+    -->
+    <div class="form-container-border" v-show="orderReturnApply.status!==0">
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
         </el-row>
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
         </el-row>
-      </div>
-      <div class="form-container-border" v-show="orderReturnApply.status===2">
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
         </el-row>
+    </div>
+    <!-- 
+        以下是一个添加了 class="form-container-border" 类名且通过 v-show="orderReturnApply.status===2" 根据服务单申请状态是否等于 2 来决定是否显示的 div 容器，内部包含用于展示“收货人员”“收货时间”“收货备注”等相关信息的 el-row 和 el-col 组件，结构和功能与前面类似，时间相关的值使用对应的时间格式化过滤器进行处理。
+    -->
+    <div class="form-container-border" v-show="orderReturnApply.status===2">
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
         </el-row>
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
-          <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
         </el-row>
-      </div>
-      <div class="form-container-border" v-show="orderReturnApply.status===0">
-        <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
-          <el-col class="form-border font-small" :span="18">
-            <el-input  size="small" v-model="updateStatusParam.handleNote" style="width:200px;margin-left: 10px"></el-input>
-          </el-col>
-        </el-row>
-      </div>
-      <div class="form-container-border" v-show="orderReturnApply.status===1">
         <el-row>
-          <el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
-          <el-col class="form-border font-small" :span="18">
-            <el-input  size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
-          </el-col>
+            <el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
+            <el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
         </el-row>
-      </div>
-      <div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===0">
-        <el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
-        <el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
-      </div>
-      <div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===1">
-        <el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
-      </div>
+    </div>
+
+
+
+
     </el-card>
   </div>
 </template>
+
+
 <script>
-  import {getApplyDetail,updateApplyStatus} from '@/api/returnApply';
-  import {fetchList} from '@/api/companyAddress';
-  import {formatDate} from '@/utils/date';
-
-  const defaultUpdateStatusParam = {
-    companyAddressId: null,
-    handleMan: 'admin',
-    handleNote: null,
-    receiveMan: 'admin',
-    receiveNote: null,
-    returnAmount: 0,
-    status: 0
-  };
-  const defaultOrderReturnApply = {
-    id: null,
-    orderId: null,
-    companyAddressId: null,
-    productId: null,
-    orderSn: null,
-    createTime: null,
-    memberUsername: null,
-    returnAmount: null,
-    returnName: null,
-    returnPhone: null,
-    status: null,
-    handleTime: null,
-    productPic: null,
-    productName: null,
-    productBrand: null,
-    productAttr: null,
-    productCount: null,
-    productPrice: null,
-    productRealPrice: null,
-    reason: null,
-    description: null,
-    proofPics: null,
-    handleNote: null,
-    handleMan: null,
-    receiveMan: null,
-    receiveTime: null,
-    receiveNote: null
-  };
-  export default {
-    name: 'returnApplyDetail',
-    data() {
-      return {
+    // 从 @/api/returnApply 文件中导入 getApplyDetail 和 updateApplyStatus 函数，推测这两个函数用于获取服务申请详情以及更新申请状态，可能是与后端 API 进行交互的接口调用函数
+    import {getApplyDetail, updateApplyStatus} from '@/api/returnApply';
+    // 从 @/api/companyAddress 文件中导入 fetchList 函数，可能用于获取公司地址列表相关数据，同样是和后端 API 交互的函数
+    import {fetchList} from '@/api/companyAddress';
+    // 从 @/utils/date 文件中导入 formatDate 函数，推测用于对日期格式进行格式化处理
+    import {formatDate} from '@/utils/date';
+
+    // 定义一个名为 defaultUpdateStatusParam 的常量对象，用于设置更新申请状态时的默认参数值
+    const defaultUpdateStatusParam = {
+        companyAddressId: null,
+        handleMan: 'admin',
+        handleNote: null,
+        receiveMan: 'admin',
+        receiveNote: null,
+        returnAmount: 0,
+        status: 0
+    };
+    // 定义一个名为 defaultOrderReturnApply 的常量对象，用于设置服务单申请相关信息的默认值，包含了各种可能的字段，如订单编号、创建时间、用户账号等，初始都设为 null 或默认值
+    const defaultOrderReturnApply = {
         id: null,
-        orderReturnApply: Object.assign({},defaultOrderReturnApply),
-        productList: null,
+        orderId: null,
+        companyAddressId: null,
+        productId: null,
+        orderSn: null,
+        createTime: null,
+        memberUsername: null,
+        returnAmount: null,
+        returnName: null,
+        returnPhone: null,
+        status: null,
+        handleTime: null,
+        productPic: null,
+        productName: null,
+        productBrand: null,
+        productAttr: null,
+        productCount: null,
+        productPrice: null,
+        productRealPrice: null,
+        reason: null,
+        description: null,
         proofPics: null,
-        updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
-        companyAddressList: null
-      }
-    },
-    created() {
-      this.id = this.$route.query.id;
-      this.getDetail();
-    },
-    computed: {
-      totalAmount() {
-        if (this.orderReturnApply != null) {
-          return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
-        } else {
-          return 0;
-        }
-      },
-      currentAddress() {
-        console.log("currentAddress()");
-        let id = this.updateStatusParam.companyAddressId;
-        if(this.companyAddressList==null)return {};
-        for (let i = 0; i < this.companyAddressList.length; i++) {
-          let address = this.companyAddressList[i];
-          if (address.id === id) {
-            return address;
-          }
-        }
-        return null;
-      }
-    },
-    filters: {
-      formatStatus(status) {
-        if (status === 0) {
-          return "待处理";
-        } else if (status === 1) {
-          return "退货中";
-        } else if (status === 2) {
-          return "已完成";
-        } else {
-          return "已拒绝";
-        }
-      },
-      formatTime(time) {
-        if (time == null || time === '') {
-          return 'N/A';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatRegion(address) {
-        let str = address.province;
-        if (address.city != null) {
-          str += "  " + address.city;
-        }
-        str += "  " + address.region;
-        return str;
-      }
-    },
-    methods: {
-      handleViewOrder(){
-        this.$router.push({path:'/oms/orderDetail',query:{id:this.orderReturnApply.orderId}});
-      },
-      getDetail() {
-        getApplyDetail(this.id).then(response => {
-          console.log("getDetail")
-          this.orderReturnApply = response.data;
-          this.productList = [];
-          this.productList.push(this.orderReturnApply);
-          if (this.orderReturnApply.proofPics != null) {
-            this.proofPics = this.orderReturnApply.proofPics.split(",")
-          }
-          //退货中和完成
-          if(this.orderReturnApply.status===1||this.orderReturnApply.status===2){
-            this.updateStatusParam.returnAmount=this.orderReturnApply.returnAmount;
-            this.updateStatusParam.companyAddressId=this.orderReturnApply.companyAddressId;
-          }
-          this.getCompanyAddressList();
-        });
-      },
-      getCompanyAddressList() {
-        fetchList().then(response => {
-          console.log("getCompanyAddressList()")
-          this.companyAddressList = response.data;
-          for (let i = 0; i < this.companyAddressList.length; i++) {
-            if (this.companyAddressList[i].receiveStatus === 1&&this.orderReturnApply.status===0) {
-              this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
+        handleNote: null,
+        handleMan: null,
+        receiveMan: null,
+        receiveTime: null,
+        receiveNote: null
+    };
+
+    // 定义并导出一个 Vue 组件，组件名为 returnApplyDetail
+    export default {
+        name: 'returnApplyDetail',
+        // Vue 组件的 data 函数，用于返回组件的初始数据对象
+        data() {
+            return {
+                // 用于存储服务单的唯一标识，初始设为 null，可能后续从路由参数等地方获取具体值
+                id: null,
+                // 通过 Object.assign 创建一个 orderReturnApply 对象的副本，初始值基于 defaultOrderReturnApply 的默认设置，用于存储服务单申请的详细信息
+                orderReturnApply: Object.assign({}, defaultOrderReturnApply),
+                // 用于存储商品列表相关数据，初始设为 null
+                productList: null,
+                // 用于存储凭证图片相关数据（可能是图片路径数组等形式），初始设为 null
+                proofPics: null,
+                // 通过 Object.assign 创建一个 updateStatusParam 对象的副本，初始值基于 defaultUpdateStatusParam 的默认设置，用于存储更新服务单状态时的相关参数
+                updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
+                // 用于存储公司地址列表数据，初始设为 null
+                companyAddressList: null
+            }
+        },
+        // created 生命周期钩子函数，在组件实例创建完成后立即调用
+        created() {
+            // 从当前路由的查询参数中获取名为 id 的参数值，并赋值给组件的 id 属性，用于后续获取对应服务单详情等操作
+            this.id = this.$route.query.id;
+            // 调用 getDetail 方法，用于获取服务单的详细信息
+            this.getDetail();
+        },
+        // computed 属性，用于定义计算属性，其值会根据依赖的数据自动计算更新
+        computed: {
+            // 定义名为 totalAmount 的计算属性，用于计算订单的总金额
+            totalAmount() {
+                // 先判断 orderReturnApply 对象是否不为 null，避免空指针等问题
+                if (this.orderReturnApply!= null) {
+                    // 根据服务单申请中的商品实际单价（productRealPrice）和商品数量（productCount）相乘来计算总金额
+                    return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
+                } else {
+                    // 如果 orderReturnApply 为 null，则返回 0 作为默认的总金额值
+                    return 0;
+                }
+            },
+            // 定义名为 currentAddress 的计算属性，用于获取当前选择的公司地址信息
+            currentAddress() {
+                console.log("currentAddress()");
+                // 获取 updateStatusParam 中存储的公司地址 ID
+                let id = this.updateStatusParam.companyAddressId;
+                // 如果公司地址列表为 null，直接返回一个空对象，避免后续操作出现问题
+                if (this.companyAddressList == null) return {};
+                // 遍历公司地址列表
+                for (let i = 0; i < this.companyAddressList.length; i++) {
+                    let address = this.companyAddressList[i];
+                    // 查找与当前存储的地址 ID 匹配的地址对象
+                    if (address.id === id) {
+                        return address;
+                    }
+                }
+                // 如果未找到匹配的地址，返回 null
+                return null;
+            }
+        },
+        // filters 属性，用于定义过滤器函数，可在模板中对数据进行格式化处理
+        filters: {
+            // 定义名为 formatStatus 的过滤器函数，用于将服务单申请状态的数字值转换为对应的文字描述
+            formatStatus(status) {
+                if (status === 0) {
+                    return "待处理";
+                } else if (status === 1) {
+                    return "退货中";
+                } else if (status === 2) {
+                    return "已完成";
+                } else {
+                    return "已拒绝";
+                }
+            },
+            // 定义名为 formatTime 的过滤器函数，用于将时间数据（可能是时间戳等格式）格式化为指定的日期时间字符串格式
+            formatTime(time) {
+                if (time == null || time === '') {
+                    return 'N/A';
+                }
+                let date = new Date(time);
+                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+            },
+            // 定义名为 formatRegion 的过滤器函数，用于将地址对象中的省份、城市、区域等信息拼接成一个完整的区域描述字符串
+            formatRegion(address) {
+                let str = address.province;
+                if (address.city!= null) {
+                    str += "  " + address.city;
+                }
+                str += "  " + address.region;
+                return str;
+            }
+        },
+        // methods 属性，用于定义组件的各种方法，这些方法可以在组件的模板中通过事件绑定等方式调用
+        methods: {
+            // 定义 handleViewOrder 方法，用于处理查看订单的操作
+            handleViewOrder() {
+                // 使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到 /oms/orderDetail 路径，并传递当前服务单对应的订单 ID 作为查询参数，以便在订单详情页面展示对应的订单信息
+                this.$router.push({path: '/oms/orderDetail', query: {id: this.orderReturnApply.orderId}});
+            },
+            // 定义 getDetail 方法，用于获取服务单的详细信息
+            getDetail() {
+                console.log("getDetail")
+                // 调用 getApplyDetail 函数（从 API 导入的函数），传入当前服务单的 ID，获取服务单详情数据
+                getApplyDetail(this.id).then(response => {
+                    // 将获取到的服务单详情数据赋值给 orderReturnApply 属性，用于在组件中展示相关信息
+                    this.orderReturnApply = response.data;
+                    // 初始化商品列表为空数组
+                    this.productList = [];
+                    // 将服务单详情数据作为唯一元素添加到商品列表中，可能后续会有对商品列表进一步处理的逻辑（虽然此处看起来有点奇怪，可能需要根据实际业务需求确认是否合理）
+                    this.productList.push(this.orderReturnApply);
+                    // 如果服务单详情中的凭证图片数据（proofPics）不为 null，将其以逗号分隔的字符串形式转换为数组，赋值给 proofPics 属性，方便后续在模板中展示图片等操作
+                    if (this.orderReturnApply.proofPics!= null) {
+                        this.proofPics = this.orderReturnApply.proofPics.split(",")
+                    }
+                    // 如果服务单申请状态为 1（退货中）或 2（已完成），将服务单详情中的退款金额和公司地址 ID 赋值给更新状态的参数对象，可能用于在对应状态下展示或后续操作中使用这些数据
+                    if (this.orderReturnApply.status === 1 || this.orderReturnApply.status === 2) {
+                        this.updateStatusParam.returnAmount = this.orderReturnApply.returnAmount;
+                        this.updateStatusParam.companyAddressId = this.orderReturnApply.companyAddressId;
+                    }
+                    // 调用 getCompanyAddressList 方法，用于获取公司地址列表数据
+                    this.getCompanyAddressList();
+                });
+            },
+            // 定义 getCompanyAddressList 方法，用于获取公司地址列表数据
+            getCompanyAddressList() {
+                console.log("getCompanyAddressList()")
+                // 调用 fetchList 函数（从 API 导入的函数）获取公司地址列表数据
+                fetchList().then(response => {
+                    // 将获取到的公司地址列表数据赋值给 companyAddressList 属性，用于在组件中展示相关选项或进行其他关联操作
+                    this.companyAddressList = response.data;
+                    // 遍历公司地址列表
+                    for (let i = 0; i < this.companyAddressList.length; i++) {
+                        // 如果当前地址的接收状态为 1（具体含义需根据业务定义）且服务单申请状态为 0（待处理），将当前地址的 ID 赋值给更新状态参数对象中的公司地址 ID，可能用于默认选择某个合适的收货地址等操作
+                        if (this.companyAddressList[i].receiveStatus === 1 && this.orderReturnApply.status === 0) {
+                            this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
+                        }
+                    }
+                });
+            },
+            // 定义 handleUpdateStatus 方法，用于处理更新服务单状态的操作
+            handleUpdateStatus(status) {
+                // 将传入的状态值赋值给更新状态参数对象的 status 属性，用于后续提交更新请求时使用
+                this.updateStatusParam.status = status;
+                // 使用 $confirm 组件（可能是 Element UI 等提供的确认框组件）弹出确认提示框，询问用户是否要进行此操作，设置确认按钮文本、取消按钮文本以及提示框类型等属性
+                this.$confirm('是否要进行此操作?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    // 如果用户点击确认按钮，调用 updateApplyStatus 函数（从 API 导入的函数），传入服务单 ID 和更新状态参数对象，向后端发送更新服务单状态的请求
+                    updateApplyStatus(this.id, this.updateStatusParam).then(response => {
+                        // 使用 $message 组件（可能是 Element UI 等提供的消息提示组件）显示操作成功的提示信息，设置提示信息类型、具体内容以及显示时长等属性
+                        this.$message({
+                            type: 'success',
+                            message: '操作成功!',
+                            duration: 1000
+                        });
+                        // 使用 $router.back() 方法进行路由回退，回到上一个页面，可能是在操作完成后返回相关列表页面等
+                        this.$router.back();
+                    });
+                });
             }
-          }
-        });
-      },
-      handleUpdateStatus(status){
-        this.updateStatusParam.status=status;
-        this.$confirm('是否要进行此操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
-            this.$message({
-              type: 'success',
-              message: '操作成功!',
-              duration:1000
-            });
-            this.$router.back();
-          });
-        });
-      }
+        }
     }
-  }
 </script>
+
+
+
+
+
+
 <style scoped>
-  .detail-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 1080px;
-    padding: 35px 35px 15px 35px;
-    margin: 20px auto;
-  }
-
-  .standard-margin {
-    margin-top: 15px;
-  }
-  .form-border {
-    border-right: 1px solid #DCDFE6;
-    border-bottom: 1px solid #DCDFE6;
-    padding: 10px;
-  }
-
-  .form-container-border {
-    border-left: 1px solid #DCDFE6;
-    border-top: 1px solid #DCDFE6;
-    margin-top: 15px;
-  }
-
-  .form-left-bg {
-    background: #F2F6FC;
-  }
-</style>
+    /* 定义名为 detail-container 的类选择器样式，设置其定位为绝对定位，水平方向铺满整个父容器（left: 0; right: 0;），宽度为 1080 像素，设置内边距以及外边距，用于布局和样式展示，可能是整个服务单详情页面的主要容器样式 */
+   .detail-container {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 1080px;
+        padding: 35px 35px 15px 35px;
+        margin: 20px auto;
+    }
 
+    /* 定义名为 standard-margin 的类选择器样式，设置顶部外边距为 15 像素，用于给某些元素添加统一的间距，使页面布局更美观 */
+   .standard-margin {
+        margin-top: 15px;
+    }
 
+    /* 定义名为 form-border 的类选择器样式，设置右边框和下边框为 1 像素的实线，颜色为 #DCDFE6，同时设置内边距，用于给表单相关的元素添加边框和合适的内边距，使其展示更清晰、美观 */
+   .form-border {
+        border-right: 1px solid #DCDFE6;
+        border-bottom: 1px solid #DCDFE6;
+        padding: 10px;
+    }
+
+    /* 定义名为 form-container-border 的类选择器样式，设置左边框和上边框为 1 像素的实线，颜色为 #DCDFE6，同时设置顶部外边距，用于给包含表单元素的容器添加边框，区分不同的信息块 */
+   .form-container-border {
+        border-left: 1px solid #DCDFE6;
+        border-top: 1px solid #DCDFE6;
+        margin-top: 15px;
+    }
+
+    /* 定义名为 form-left-bg 的类选择器样式，设置背景颜色为 #F2F6FC，可能用于给表单左边栏等特定区域设置背景色，起到区分和美化的作用 */
+   .form-left-bg {
+        background: #F2F6FC;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/oms/apply/index.vue b/src/views/oms/apply/index.vue
index b4ec938..ef928b8 100644
--- a/src/views/oms/apply/index.vue
+++ b/src/views/oms/apply/index.vue
@@ -1,275 +1,380 @@
-<template> 
-  <div class="app-container">
-    <el-card class="filter-container" shadow="never">
-      <div>
-        <i class="el-icon-search"></i>
-        <span>筛选搜索</span>
-        <el-button
-          style="float:right"
-          type="primary"
-          @click="handleSearchList()"
-          size="small">
-          查询搜索
-        </el-button>
-        <el-button
-          style="float:right;margin-right: 15px"
-          @click="handleResetSearch()"
-          size="small">
-          重置
-        </el-button>
-      </div>
-      <div style="margin-top: 15px">
-        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <el-form-item label="输入搜索：">
-            <el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
-          </el-form-item>
-          <el-form-item label="处理状态：">
-            <el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
-              <el-option v-for="item in statusOptions"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
+<template>
+    <!-- 整个页面内容的容器，添加了 app-container 类名，用于整体布局和样式控制 -->
+    <div class="app-container">
+        <!-- 使用 el-card 组件创建一个卡片式的容器，用于放置筛选搜索相关的内容，设置 shadow="never" 表示不显示阴影效果，添加了 filter-container 类名用于样式定制 -->
+        <el-card class="filter-container" shadow="never">
+            <div>
+                <!-- 使用 el-icon-search 图标类（Element UI 提供的图标）展示一个搜索图标，用于提示用户此处是筛选搜索功能区域 -->
+                <i class="el-icon-search"></i>
+                <!-- 展示一个文本标签，内容为“筛选搜索”，用于明确此区域的功能 -->
+                <span>筛选搜索</span>
+                <!-- 使用 el-button 组件创建一个按钮，设置样式为右浮动（float:right），按钮类型为 primary（通常是主要操作按钮的样式），绑定了点击事件 handleSearchList()，点击按钮会调用该方法，按钮尺寸为 small（小尺寸按钮），按钮文本为“查询搜索”，用于触发查询搜索的操作 -->
+                <el-button
+                        style="float:right"
+                        type="primary"
+                        @click="handleSearchList()"
+                        size="small">
+                    查询搜索
+                </el-button>
+                <!-- 使用 el-button 组件创建一个按钮，设置样式为右浮动且距离右边有 15 像素的外边距（float:right;margin-right: 15px），绑定了点击事件 handleResetSearch()，点击按钮会调用该方法，按钮尺寸为 small，按钮文本为“重置”，用于将筛选搜索的条件重置为默认状态 -->
+                <el-button
+                        style="float:right;margin-right: 15px"
+                        @click="handleResetSearch()"
+                        size="small">
+                    重置
+                </el-button>
+            </div>
+            <div style="margin-top: 15px">
+                <!-- 使用 el-form 组件创建一个表单，设置 :inline="true" 表示表单为行内表单（各表单项在一行内排列），:model="listQuery" 将表单数据与 listQuery 对象进行双向绑定，size="small" 表示表单尺寸为小尺寸，label-width="140px" 设置表单标签的宽度为 140 像素，用于布局表单各项输入框和选择框等元素 -->
+                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+                    <!-- el-form-item 组件用于定义表单中的每一项，此处的标签文本为“输入搜索：”，用于提示用户此项的功能 -->
+                    <el-form-item label="输入搜索：">
+                        <!-- 使用 el-input 组件创建一个输入框，通过 v-model="listQuery.id" 将输入框的值与 listQuery 对象中的 id 属性进行双向绑定，添加了 input-width 类名（推测用于设置宽度等样式，在 CSS 部分有定义），placeholder="服务单号" 设置输入框的占位提示文本为“服务单号”，用户可在此输入服务单号相关内容进行搜索 -->
+                        <el-input v-model="listQuery.id" class="input-width" placeholder="服务单号"></el-input>
+                    </el-form-item>
+                    <el-form-item label="处理状态：">
+                        <!-- 使用 el-select 组件创建一个下拉选择框，通过 v-model="listQuery.status" 将选择框选中的值与 listQuery 对象中的 status 属性进行双向绑定，placeholder="全部" 设置占位提示文本为“全部”，clearable 表示可以清空选择框的值，添加了 input-width 类名用于样式设置，内部通过 v-for 指令循环遍历 statusOptions 数组（在 Vue 实例的 data 或其他地方定义），为每个元素创建一个 el-option 选项，用于展示不同的处理状态选项供用户选择 -->
+                        <el-select v-model="listQuery.status" placeholder="全部" clearable class="input-width">
+                            <el-option v-for="item in statusOptions"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="申请时间：">
+                        <!-- 使用 el-date-picker 组件创建一个日期选择器，添加了 input-width 类名用于样式设置，通过 v-model="listQuery.createTime" 将选择的日期值与 listQuery 对象中的 createTime 属性进行双向绑定，value-format="yyyy-MM-dd" 定义日期选择器返回的日期格式为“yyyy-MM-dd”，type="date" 表示选择器类型为日期选择（只选择年月日），placeholder="请选择时间" 设置占位提示文本，用户可在此选择申请时间进行筛选 -->
+                        <el-date-picker
+                                class="input-width"
+                                v-model="listQuery.createTime"
+                                value-format="yyyy-MM-dd"
+                                type="date"
+                                placeholder="请选择时间">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="操作人员：">
+                        <!-- 使用 el-input 组件创建一个输入框，通过 v-model="listQuery.handleMan" 将输入框的值与 listQuery 对象中的 handleMan 属性进行双向绑定，添加了 input-width 类名用于样式设置，placeholder="全部" 设置占位提示文本为“全部”，用户可在此输入操作人员相关内容进行搜索 -->
+                        <el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
+                    </el-form-item>
+                    <el-form-item label="处理时间：">
+                        <!-- 使用 el-date-picker 组件创建一个日期选择器，与上面申请时间的日期选择器类似，通过 v-model="listQuery.handleTime" 将选择的日期值与 listQuery 对象中的 handleTime 属性进行双向绑定，用于选择处理时间进行筛选 -->
+                        <el-date-picker
+                                class="input-width"
+                                v-model="listQuery.handleTime"
+                                value-format="yyyy-MM-dd"
+                                type="date"
+                                placeholder="请选择时间">
+                        </el-date-picker>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-card>
+        <!-- 使用 el-card 组件创建一个卡片式的容器，添加了 operate-container 类名用于样式定制，内部只展示了一个图标和一个文本标签，用于提示此区域是关于数据列表相关内容，但目前看起来只是一个标题性质的展示，可能后续会添加更多相关操作按钮等元素 -->
+        <el-card class="operate-container" shadow="never">
+            <i class="el-icon-tickets"></i>
+            <span>数据列表</span>
+        </el-card>
+        <!-- 创建一个 div 容器，添加了 table-container 类名用于样式控制，用于放置数据表格相关内容 -->
+        <div class="table-container">
+            <!-- 使用 el-table 组件创建一个表格，ref="returnApplyTable" 给表格添加一个引用标识，方便在 Vue 实例的 JavaScript 代码中通过 this.$refs.returnApplyTable 来获取这个表格组件的实例，:data="list" 将表格的数据与 list 数组（在 Vue 实例中定义，用于存储要展示的数据列表）进行绑定，设置表格宽度为 100%铺满父容器，绑定了 @selection-change 事件，当表格行的选择状态改变时会调用 handleSelectionChange 方法，v-loading="listLoading" 根据 listLoading 的值（布尔类型，用于表示是否正在加载数据）来显示或隐藏加载动画，border 属性给表格添加边框，使表格样式更清晰 -->
+            <el-table ref="returnApplyTable"
+                      :data="list"
+                      style="width: 100%;"
+                      @selection-change="handleSelectionChange"
+                      v-loading="listLoading" border>
+                <!-- 使用 el-table-column 组件定义表格的列，type="selection" 表示此列为选择列（用于勾选表格行），width="60" 设置列宽为 60 像素，align="center" 将列内容在水平方向居中对齐 -->
+                <el-table-column type="selection" width="60" align="center"></el-table-column>
+                <el-table-column label="服务单号" width="180" align="center">
+                    <!-- 在表格列中使用 template 结合 slot-scope="scope" 的方式自定义单元格内容的展示，通过插值表达式 {{scope.row.id}} 从 scope 对象中 row 属性下的 id 字段获取对应的值并渲染显示，也就是展示每一行对应的服务单号信息 -->
+                    <template slot-scope="scope">{{scope.row.id}}</template>
+                </el-table-column>
+                <el-table-column label="申请时间" width="180" align="center">
+                    <!-- 同样使用 template 和 slot-scope 自定义单元格内容展示，通过插值表达式 {{scope.row.createTime | formatTime}} 展示申请时间信息，使用了 formatTime 过滤器（在 Vue 实例的 filters 中定义，用于将时间格式进行格式化处理）对时间数据进行处理后再展示 -->
+                    <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
+                </el-table-column>
+                <el-table-column label="用户账号" align="center">
+                    <!-- 通过插值表达式 {{scope.row.memberUsername}} 展示每一行对应的用户账号信息，从 scope 对象中获取相关数据 -->
+                    <template slot-scope="scope">{{scope.row.memberUsername}}</template>
+                </el-table-column>
+                <el-table-column label="退款金额" width="180" align="center">
+                    <!-- 通过插值表达式 ￥{{scope.row | formatReturnAmount}} 展示退款金额信息，使用了 formatReturnAmount 过滤器（在 Vue 实例的 filters 中定义，用于根据业务逻辑计算并返回退款金额的值，可能是基于商品价格、数量等因素计算）对数据进行处理后再展示，前面添加“￥”符号表示人民币金额 -->
+                    <template slot-scope="scope">￥{{scope.row | formatReturnAmount}}</template>
+                </el-table-column>
+                <el-table-column label="申请状态" width="180" align="center">
+                    <!-- 通过插值表达式 {{scope.row.status | formatStatus}} 展示申请状态信息，使用了 formatStatus 过滤器（在 Vue 实例的 filters 中定义，用于将状态的数字值转换为对应的文字描述，使展示更友好易懂）对状态数据进行处理后再展示 -->
+                    <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
+                </el-table-column>
+                <el-table-column label="处理时间" width="180" align="center">
+                    <!-- 通过插值表达式 {{scope.row.handleTime | formatTime}} 展示处理时间信息，使用 formatTime 过滤器对时间数据进行格式化处理后展示 -->
+                    <template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
+                </el-table-column>
+                <el-table-column label="操作" width="180" align="center">
+                    <template slot-scope="scope">
+                        <!-- 在表格列的单元格中使用 el-button 组件创建一个按钮，设置按钮尺寸为 mini（最小尺寸按钮），绑定了点击事件 handleViewDetail(scope.$index, scope.row)，点击按钮会调用该方法并传入当前行的索引（scope.$index）和当前行的数据对象（scope.row），按钮文本为“查看详情”，用于跳转到对应服务单的详情页面查看详细信息 -->
+                        <el-button
+                                size="mini"
+                                @click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <!-- 创建一个 div 容器，添加了 batch-operate-container 类名用于样式控制，用于放置批量操作相关的元素，如下拉选择框和按钮等 -->
+        <div class="batch-operate-container">
+            <!-- 使用 el-select 组件创建一个下拉选择框，设置尺寸为 small，通过 v-model="operateType" 将选择框选中的值与 operateType 属性进行双向绑定，placeholder="批量操作" 设置占位提示文本，用于选择要进行的批量操作类型，内部通过 v-for 指令循环遍历 operateOptions 数组（在 Vue 实例的 data 中定义），为每个元素创建一个 el-option 选项，展示不同的批量操作选项供用户选择 -->
+            <el-select
+                    size="small"
+                    v-model="operateType" placeholder="批量操作">
+                <el-option
+                        v-for="item in operateOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                </el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="申请时间：">
-            <el-date-picker
-              class="input-width"
-              v-model="listQuery.createTime"
-              value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="请选择时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="操作人员：">
-            <el-input v-model="listQuery.handleMan" class="input-width" placeholder="全部"></el-input>
-          </el-form-item>
-          <el-form-item label="处理时间：">
-            <el-date-picker
-              class="input-width"
-              v-model="listQuery.handleTime"
-              value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="请选择时间">
-            </el-date-picker>
-          </el-form-item>
-        </el-form>
-      </div>
-    </el-card>
-    <el-card class="operate-container" shadow="never">
-      <i class="el-icon-tickets"></i>
-      <span>数据列表</span>
-    </el-card>
-    <div class="table-container">
-      <el-table ref="returnApplyTable"
-                :data="list"
-                style="width: 100%;"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading" border>
-        <el-table-column type="selection" width="60" align="center"></el-table-column>
-        <el-table-column label="服务单号" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
-        </el-table-column>
-        <el-table-column label="申请时间" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
-        </el-table-column>
-        <el-table-column label="用户账号" align="center">
-          <template slot-scope="scope">{{scope.row.memberUsername}}</template>
-        </el-table-column>
-        <el-table-column label="退款金额" width="180" align="center">
-          <template slot-scope="scope">￥{{scope.row | formatReturnAmount}}</template>
-        </el-table-column>
-        <el-table-column label="申请状态" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
-        </el-table-column>
-        <el-table-column label="处理时间" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.handleTime | formatTime}}</template>
-        </el-table-column>
-        <el-table-column label="操作" width="180" align="center">
-          <template slot-scope="scope">
+            <!-- 使用 el-button 组件创建一个按钮，设置样式距离左边有 20 像素的外边距（margin-left: 20px），添加了 search-button 类名（推测用于样式设置，虽然 CSS 部分未看到具体样式定义），绑定了点击事件 handleBatchOperate()，点击按钮会调用该方法，按钮类型为 primary，按钮尺寸为 small，按钮文本为“确定”，用于触发批量操作的执行 -->
             <el-button
-            size="mini"
-            @click="handleViewDetail(scope.$index, scope.row)">查看详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+                    style="margin-left: 20px"
+                    class="search-button"
+                    @click="handleBatchOperate()"
+                    type="primary"
+                    size="small">
+                确定
+            </el-button>
+        </div>
+        <!-- 创建一个 div 容器，添加了 pagination-container 类名用于样式控制，用于放置分页相关的组件 -->
+        <div class="pagination-container">
+            <!-- 使用 el-pagination 组件创建分页器，background 属性表示给分页按钮等添加背景色，绑定了 @size-change 事件和 @current-change 事件，分别在页面大小改变和当前页码改变时调用 handleSizeChange 方法和 handleCurrentChange 方法，layout 属性定义分页器的布局显示哪些元素（如总条数、每页条数选择、上一页、页码、下一页、跳转到指定页等），:current-page.sync="listQuery.pageNum" 通过双向绑定将当前页码与 listQuery 对象中的 pageNum 属性关联起来，:page-size="listQuery.pageSize" 将每页显示的条数与 listQuery 对象中的 pageSize 属性关联起来，:page-sizes="[5,10,15]" 定义可选择的每页条数的选项数组，:total="total" 将总数据条数与 total 属性关联起来，用于分页功能的展示和交互 -->
+            <el-pagination
+                    background
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    layout="total, sizes,prev, pager, next,jumper"
+                    :current-page.sync="listQuery.pageNum"
+                    :page-size="listQuery.pageSize"
+                    :page-sizes="[5,10,15]"
+                    :total="total">
+            </el-pagination>
+        </div>
     </div>
-    <div class="batch-operate-container">
-      <el-select
-        size="small"
-        v-model="operateType" placeholder="批量操作">
-        <el-option
-          v-for="item in operateOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
-        </el-option>
-      </el-select>
-      <el-button
-        style="margin-left: 20px"
-        class="search-button"
-        @click="handleBatchOperate()"
-        type="primary"
-        size="small">
-        确定
-      </el-button>
-    </div>
-    <div class="pagination-container">
-      <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        layout="total, sizes,prev, pager, next,jumper"
-        :current-page.sync="listQuery.pageNum"
-        :page-size="listQuery.pageSize"
-        :page-sizes="[5,10,15]"
-        :total="total">
-      </el-pagination>
-    </div>
-  </div>
 </template>
+
+
+
+
+
+
+
+
 <script>
-  import {formatDate} from '@/utils/date';
-  import {fetchList,deleteApply} from '@/api/returnApply';
-  const defaultListQuery = {
-    pageNum: 1,
-    pageSize: 10,
-    id: null,
-    receiverKeyword: null,
-    status: null,
-    createTime: null,
-    handleMan: null,
-    handleTime: null
-  };
-  const defaultStatusOptions=[
-    {
-      label: '待处理',
-      value: 0
-    },
-    {
-      label: '退货中',
-      value: 1
-    },
-    {
-      label: '已完成',
-      value: 2
-    },
-    {
-      label: '已拒绝',
-      value: 3
-    }
-  ];
-  export default {
-    name:'returnApplyList',
-    data() {
-      return {
-        listQuery:Object.assign({},defaultListQuery),
-        statusOptions: Object.assign({},defaultStatusOptions),
-        list:null,
-        total:null,
-        listLoading:false,
-        multipleSelection:[],
-        operateType:1,
-        operateOptions: [
-          {
-            label: "批量删除",
+    // 从项目的 @/utils/date 文件中导入 formatDate 函数，该函数大概率是用于对日期数据进行格式化处理，使其符合特定的显示格式要求
+    import {formatDate} from '@/utils/date';
+    // 从 @/api/returnApply 文件中导入 fetchList 和 deleteApply 这两个函数，fetchList 函数通常用于向后台发起请求获取服务申请列表相关的数据，deleteApply 函数则可能是用于向后台发送删除服务申请的请求，它们都是和后端 API 进行交互的重要接口调用函数
+    import {fetchList, deleteApply} from '@/api/returnApply';
+
+    // 定义一个名为 defaultListQuery 的常量对象，用于设置获取服务申请列表时的默认查询参数。
+    // 各属性含义如下：
+    // pageNum: 表示当前页码，初始值设为 1，代表默认显示第一页数据。
+    // pageSize: 表示每页显示的数据条数，初始设为 10，即默认每页展示 10 条服务申请相关记录。
+    // id: 用于根据服务单号进行筛选查询，初始设为 null，意味着一开始没有特定的服务单号筛选条件。
+    // receiverKeyword: 可能是与接收者相关的搜索关键字，初始为 null，暂未设置具体筛选内容。
+    // status: 用于按服务申请的处理状态进行筛选，初始设为 null，也就是不做状态筛选。
+    // createTime: 按申请时间进行筛选的字段，初始值 null 表示无申请时间筛选条件。
+    // handleMan: 根据操作人员进行筛选的字段，初始为 null，未指定操作人员筛选条件。
+    // handleTime: 用于依据处理时间来筛选服务申请记录，同样初始设为 null，无此方面的筛选要求。
+    const defaultListQuery = {
+        pageNum: 1,
+        pageSize: 10,
+        id: null,
+        receiverKeyword: null,
+        status: null,
+        createTime: null,
+        handleMan: null,
+        handleTime: null
+    };
+
+    // 定义一个名为 defaultStatusOptions 的常量数组，用于配置服务申请处理状态的可选项。
+    // 数组中的每个元素都是一个对象，对象包含 'label'（用于在前端界面上显示给用户看的文字描述，比如 '待处理'）和 'value'（对应后台存储或业务逻辑中使用的实际数值，如 0 代表待处理状态）两个属性。
+    const defaultStatusOptions = [
+        {
+            label: '待处理',
+            value: 0
+        },
+        {
+            label: '退货中',
             value: 1
-          }
-        ],
-      }
-    },
-    created(){
-      this.getList();
-    },
-    filters:{
-      formatTime(time) {
-        if(time==null||time===''){
-          return 'N/A';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatStatus(status){
-        for(let i=0;i<defaultStatusOptions.length;i++){
-          if(status===defaultStatusOptions[i].value){
-            return defaultStatusOptions[i].label;
-          }
-        }
-      },
-      formatReturnAmount(row){
-        return row.productRealPrice*row.productCount;
-      }
-    },
-    methods:{
-      handleSelectionChange(val){
-        this.multipleSelection = val;
-      },
-      handleResetSearch() {
-        this.listQuery = Object.assign({}, defaultListQuery);
-      },
-      handleSearchList() {
-        this.listQuery.pageNum = 1;
-        this.getList();
-      },
-      handleViewDetail(index,row){
-        this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
-      },
-      handleBatchOperate(){
-        if(this.multipleSelection==null||this.multipleSelection.length<1){
-          this.$message({
-            message: '请选择要操作的申请',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
+        },
+        {
+            label: '已完成',
+            value: 2
+        },
+        {
+            label: '已拒绝',
+            value: 3
         }
-        if(this.operateType===1){
-          //批量删除
-          this.$confirm('是否要进行删除操作?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            let params = new URLSearchParams();
-            let ids=[];
-            for(let i=0;i<this.multipleSelection.length;i++){
-              ids.push(this.multipleSelection[i].id);
+    ];
+
+    // 定义并导出一个名为 returnApplyList 的 Vue 组件
+    export default {
+        name:'returnApplyList',
+        // data 函数用于返回组件的初始数据对象，定义了组件中用到的各种数据及其初始值
+        data() {
+            return {
+                // 通过 Object.assign 创建 listQuery 对象的副本，初始值参照 defaultListQuery 的设置，后续这个对象会根据用户在界面上的筛选操作动态变化，用于向后台请求服务申请列表时传递相应的查询参数
+                listQuery: Object.assign({}, defaultListQuery),
+                // 同样通过 Object.assign 创建 statusOptions 对象的副本，初始值基于 defaultStatusOptions，用于在前端界面展示可供用户选择的服务申请处理状态下拉选项
+                statusOptions: Object.assign({}, defaultStatusOptions),
+                // 用于存储从后台获取到的服务申请列表数据，初始设为 null，等调用 fetchList 函数获取到数据后再进行赋值
+                list: null,
+                // 用于保存服务申请列表的总数据条数，初始值为 null，在获取列表数据时会一同获取总条数并赋值，以便用于分页等相关功能展示
+                total: null,
+                // 布尔类型的变量，用于表示当前是否正在加载数据，初始设为 false，在调用获取数据的函数（如 fetchList）时会将其设为 true，数据加载完成后再设回 false，方便在界面上展示加载动画等反馈给用户
+                listLoading: false,
+                // 用于存储用户在表格中多选的服务申请记录数据，初始为空数组，每当表格行的选择状态改变时（通过 handleSelectionChange 方法更新），这个数组会相应更新，记录被选中的行数据
+                multipleSelection: [],
+                // 用于绑定批量操作类型下拉选择框选中的值，初始设为 1，可能对应着默认的批量操作类型（比如当前代码中只定义了批量删除操作，值为 1 就代表批量删除），用户可通过下拉选择框改变其值来选择不同的批量操作
+                operateType: 1,
+                // 定义批量操作的可选项数组，每个元素是一个对象，包含 'label'（显示给用户的操作名称，这里是 "批量删除"）和 'value'（对应操作的标识值，这里批量删除对应的值为 1）属性，用于在前端界面展示可供用户选择的批量操作下拉选项
+                operateOptions: [
+                    {
+                        label: "批量删除",
+                        value: 1
+                    }
+                ],
+            }
+        },
+        // created 生命周期钩子函数，在组件实例被创建后立即执行，这里主要调用了 getList 方法，目的是在组件初始化时就去获取服务申请列表数据，确保页面展示时有初始数据可用
+        created() {
+            this.getList();
+        },
+        // filters 属性用于定义过滤器函数，这些函数可以在模板中对相应的数据进行格式化处理后再展示给用户
+        filters: {
+            // 定义名为 formatTime 的过滤器函数，用于将时间格式的数据进行格式化。
+            // 如果传入的时间参数 time 为 null 或者空字符串（即没有有效的时间数据），则返回 'N/A'，表示无可用时间信息。
+            // 若 time 有值，就通过 new Date(time) 将其转换为 JavaScript 的 Date 对象，再调用导入的 formatDate 函数（前面从 @/utils/date 文件导入的）按照 'yyyy-MM-dd hh:mm:ss' 的格式进行格式化，并返回格式化后的时间字符串。
+            formatTime(time) {
+                if (time == null || time === '') {
+                    return 'N/A';
+                }
+                let date = new Date(time);
+                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+            },
+            // 定义名为 formatStatus 的过滤器函数，用于将服务申请的状态数值转换为对应的文字描述。
+            // 它会遍历 defaultStatusOptions 数组，对比传入的 status 参数值和数组中每个元素的 value 值，如果相等，就返回该元素对应的 label 值（即对应的文字描述），以此实现状态数值到文字的转换，方便在前端界面更友好地展示状态信息。
+            formatStatus(status) {
+                for (let i = 0; i < defaultStatusOptions.length; i++) {
+                    if (status === defaultStatusOptions[i].value) {
+                        return defaultStatusOptions[i].label;
+                    }
+                }
+            },
+            // 定义名为 formatReturnAmount 的过滤器函数，用于计算并返回服务申请中对应的退款金额。
+            // 它通过获取传入的 row 对象（通常是服务申请记录相关的数据对象）中的 productRealPrice（商品实际价格）和 productCount（商品数量）属性值，并将两者相乘，得到退款金额后返回，这样在前端模板中就能方便地展示计算后的退款金额数据了。
+            formatReturnAmount(row) {
+                return row.productRealPrice * row.productCount;
+            }
+        },
+        // methods 属性用于定义组件中的各种方法，这些方法可以在模板中通过事件绑定等方式被调用，以实现各种交互逻辑和业务功能
+        methods: {
+            // 定义 handleSelectionChange 方法，用于处理表格行选择状态改变的事件。
+            // 参数 val 就是当前表格行选择状态改变后的值（通常是一个包含被选中行数据的数组），将这个值直接赋值给 multipleSelection 属性，使得 multipleSelection 能实时更新为当前用户在表格中选中的服务申请记录数据，方便后续进行批量操作等逻辑处理。
+            handleSelectionChange(val) {
+                this.multipleSelection = val;
+            },
+            // 定义 handleResetSearch 方法，用于重置筛选搜索的条件。
+            // 它将 listQuery 对象重新赋值为 defaultListQuery 的副本，也就是把所有筛选条件恢复到初始的默认状态，这样用户下次进行搜索时就相当于从初始状态重新开始筛选服务申请记录了。
+            handleResetSearch() {
+                this.listQuery = Object.assign({}, defaultListQuery);
+            },
+            // 定义 handleSearchList 方法，用于触发搜索服务申请列表的操作。
+            // 首先将 listQuery 对象中的 pageNum 属性重置为 1，确保搜索结果从第一页开始展示，然后调用 getList 方法，该方法会根据当前 listQuery 中的筛选条件向后台请求服务申请列表数据，并更新界面上的列表展示以及相关分页等信息。
+            handleSearchList() {
+                this.listQuery.pageNum = 1;
+                this.getList();
+            },
+            // 定义 handleViewDetail 方法，用于处理查看服务申请详情的操作。
+            // 参数 index 表示当前点击查看详情的行在表格中的索引位置，row 则是该行对应的服务申请记录数据对象。
+            // 通过使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到 '/oms/returnApplyDetail' 路径，并将当前服务申请记录的 id（从 row.id 获取）作为查询参数传递过去，以便在详情页面能根据这个 id 获取并展示对应的服务申请详细信息。
+            handleViewDetail(index, row) {
+                this.$router.push({path: '/oms/returnApplyDetail', query: {id: row.id}})
+            },
+            // 定义 handleBatchOperate 方法，用于处理批量操作的逻辑。
+            // 首先判断 multipleSelection 是否为 null 或者其长度小于 1，即用户是否没有选择任何要操作的服务申请记录，如果是这种情况，就通过 $message 组件（可能是 Element UI 等提供的消息提示组件）弹出一个警告类型的提示消息，告知用户需要选择要操作的申请，然后直接返回，不再执行后续批量操作的逻辑。
+            // 如果用户选择了要操作的记录且 operateType 等于 1（当前代码中代表批量删除操作），则会弹出一个确认框（通过 $confirm 组件，同样可能是 Element UI 等提供的确认框组件）询问用户是否要进行删除操作，确认框设置了确认按钮文本、取消按钮文本以及提示框类型等属性。
+            // 如果用户点击确认按钮，会进行以下操作：
+            // 1. 创建一个 URLSearchParams 对象，用于构建向后台发送请求时的参数格式（通常用于处理 URL 中的查询参数等情况）。
+            // 2. 循环遍历 multipleSelection 数组，将每个被选中服务申请记录的 id 提取出来存放到 ids 数组中。
+            // 3. 使用 params.append("ids", ids) 将 ids 数组添加到 URLSearchParams 对象中，形成符合后台接口要求的参数格式。
+            // 4. 调用 deleteApply 函数，传入构建好的 params 参数，向后台发送批量删除服务申请的请求，在请求成功的回调函数中（then 部分），再次调用 getList 方法，用于重新获取最新的服务申请列表数据（因为删除操作后列表数据会有变化），同时通过 $message 组件弹出一个成功类型的提示消息，告知用户删除成功。
+            handleBatchOperate() {
+                if (this.multipleSelection == null || this.multipleSelection.length < 1) {
+                    this.$message({
+                        message: '请选择要操作的申请',
+                        type: 'warning',
+                        duration: 1000
+                    });
+                    return;
+                }
+                if (this.operateType === 1) {
+                    //批量删除
+                    this.$confirm('是否要进行删除操作?', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning'
+                    }).then(() => {
+                        let params = new URLSearchParams();
+                        let ids = [];
+                        for (let i = 0; i < this.multipleSelection.length; i++) {
+                            ids.push(this.multipleSelection[i].id);
+                        }
+                        params.append("ids", ids);
+                        deleteApply(params).then(response => {
+                            this.getList();
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                        });
+                    })
+                }
+            },
+            // 定义 handleSizeChange 方法，用于处理每页显示数据条数改变的事件。
+            // 参数 val 就是用户选择的新的每页显示条数的值，首先将 listQuery 对象中的 pageNum 属性重置为 1，确保在改变每页条数后从第一页开始展示数据，然后将 listQuery 的 pageSize 属性更新为 val（新的每页条数），最后调用 getList 方法，根据新的查询参数重新获取服务申请列表数据并更新界面展示。
+            handleSizeChange(val) {
+                this.listQuery.pageNum = 1;
+                this.listQuery.pageSize = val;
+                this.getList();
+            },
+            // 定义 handleCurrentChange 方法，用于处理当前页码改变的事件。
+            // 参数 val 是用户切换到的新的页码值，直接将 listQuery 对象中的 pageNum 属性更新为 val，然后调用 getList 方法，根据新的页码去获取对应的服务申请列表数据并更新界面展示，实现分页功能的页面数据切换。
+            handleCurrentChange(val) {
+                this.listQuery.pageNum = val;
+                this.getList();
+            },
+            // 定义 getList 方法，用于获取服务申请列表数据。
+            // 首先将 listLoading 属性设为 true，表示开始加载数据，这样在界面上可以通过绑定这个属性来展示加载动画等提示用户正在获取数据。
+            // 然后调用 fetchList 函数，传入 listQuery 对象作为查询参数向后台发起请求获取服务申请列表数据，在请求成功的回调函数（then 部分）中：
+            // 1. 将 listLoading 属性设回 false，表示数据加载完成，隐藏加载动画。
+            // 2. 将获取到的服务申请列表数据赋值给 list 属性，用于在前端界面的表格等组件中展示具体的服务申请记录信息。
+            // 3. 将获取到的服务申请列表总数据条数赋值给 total 属性，以便分页组件等能根据总条数正确展示分页信息。
+            getList() {
+                this.listLoading = true;
+                fetchList(this.listQuery).then(response => {
+                    this.listLoading = false;
+                    this.list = response.data.list;
+                    this.total = response.data.total;
+                });
             }
-            params.append("ids",ids);
-            deleteApply(params).then(response=>{
-              this.getList();
-              this.$message({
-                type: 'success',
-                message: '删除成功!'
-              });
-            });
-          })
         }
-      },
-      handleSizeChange(val){
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val){
-        this.listQuery.pageNum = val;
-        this.getList();
-      },
-      getList(){
-        this.listLoading=true;
-        fetchList(this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
-        });
-      }
     }
-  }
 </script>
+
+
+
 <style scoped>
+    /* 定义了一个名为.input-width 的类选择器样式，用于设置元素的宽度为 203 像素。
+    在 HTML 模板中，那些添加了这个类名的元素（比如某些输入框等）就会应用这个宽度样式，起到统一控制相关元素宽度，使页面布局更规整的作用 */
   .input-width {
-    width: 203px;
-  }
+        width: 203px;
+    }
 </style>
 
-
diff --git a/src/views/oms/apply/reason.vue b/src/views/oms/apply/reason.vue
index 9ff88f1..b78d556 100644
--- a/src/views/oms/apply/reason.vue
+++ b/src/views/oms/apply/reason.vue
@@ -104,6 +104,14 @@
     </el-dialog>
   </div>
 </template>
+
+
+
+
+
+
+
+
 <script>
   import {formatDate} from '@/utils/date';
   import {fetchList,deleteReason,updateStatus,addReason,getReasonDetail,updateReason} from '@/api/returnReason';
@@ -264,6 +272,9 @@
     }
   }
 </script>
+
+
+
 <style scoped>
   .input-width {
     width: 80%;
diff --git a/src/views/oms/order/components/logisticsDialog.vue b/src/views/oms/order/components/logisticsDialog.vue
index 4b7facf..66a33cc 100644
--- a/src/views/oms/order/components/logisticsDialog.vue
+++ b/src/views/oms/order/components/logisticsDialog.vue
@@ -1,12 +1,26 @@
-<template> 
+<template>
+  <!-- el-dialog组件用于创建一个对话框，这里用于展示订单跟踪相关内容 -->
+  <!-- title属性设置对话框的标题为"订单跟踪" -->
+  <!-- :visible.sync是双向绑定属性，用于控制对话框的显示与隐藏，绑定到组件实例中的visible属性 -->
+  <!-- :before-close绑定了一个关闭前的处理函数handleClose，用于在关闭对话框时执行一些操作 -->
+  <!-- width属性设置对话框的宽度为页面宽度的40% -->
   <el-dialog title="订单跟踪"
              :visible.sync="visible"
              :before-close="handleClose"
              width="40%">
+    <!-- el-steps组件用于创建竖向排列的步骤条，用于展示订单物流的各个步骤 -->
+    <!-- direction="vertical"表示步骤条竖向排列 -->
+    <!-- :active="6"表示默认激活第6个步骤（索引从0开始计数） -->
+    <!-- finish-status="success"表示已完成的步骤显示为成功状态（通常有相应的样式体现） -->
+    <!-- space="50px"设置每个步骤之间的间距为50像素 -->
     <el-steps direction="vertical"
               :active="6"
               finish-status="success"
               space="50px">
+      <!-- 使用v-for指令循环遍历logisticsList数组，为每个元素创建一个el-step组件，用于展示物流的单个步骤 -->
+      <!-- :key属性绑定唯一标识，这里用item.name，便于Vue进行高效的DOM更新 -->
+      <!-- :title属性绑定步骤的标题，对应item.name -->
+      <!-- :description属性绑定步骤的描述信息，对应item.time -->
       <el-step  v-for="item in logisticsList"
                 :key="item.name"
                 :title="item.name"
@@ -15,6 +29,7 @@
   </el-dialog>
 </template>
 <script>
+  // 定义一个默认的物流列表数组，包含了订单物流各个阶段的信息，每个对象有name（步骤名称）和time（对应时间）属性
   const defaultLogisticsList=[
     {name: '订单已提交，等待付款',time:'2017-04-01 12:00:00 '},
     {name: '订单付款成功',time:'2017-04-01 12:00:00 '},
@@ -26,14 +41,17 @@
   ];
   export default {
     name:'logisticsDialog',
+    // 定义一个名为value的属性，类型为布尔值，用于接收父组件传递过来的值，这里用于控制对话框显示隐藏相关逻辑
     props: {
       value: Boolean
     },
     computed:{
       visible: {
+        // get方法，用于获取visible属性的值，返回从父组件传入的value值，实现数据的读取
         get() {
           return this.value;
         },
+        // set方法，用于设置visible属性的值，当外部修改visible时，同时更新value的值，实现双向绑定的效果
         set(visible){
           this.value=visible;
         }
@@ -41,19 +59,20 @@
     },
     data() {
       return {
+        // 将默认的物流列表进行浅拷贝赋值给logisticsList，这样在组件内部对logisticsList操作不会影响到外部传入的默认数据
         logisticsList:Object.assign({},defaultLogisticsList)
       }
     },
     methods:{
+      // 自定义方法emitInput，用于触发名为'input'的事件，并传递参数val，通常用于和父组件进行数据交互，通知父组件数据的变化情况
       emitInput(val) {
         this.$emit('input', val)
       },
+      // 处理对话框关闭的方法，当调用该方法时，通过emitInput方法传递false值，通知父组件将对话框隐藏（通常是通过改变绑定的visible属性实现）
       handleClose(){
         this.emitInput(false);
       }
     }
   }
 </script>
-<style></style>
-
-
+<style></style>
\ No newline at end of file
diff --git a/src/views/oms/order/deliverOrderList.vue b/src/views/oms/order/deliverOrderList.vue
index cc89b2f..dbaef8e 100644
--- a/src/views/oms/order/deliverOrderList.vue
+++ b/src/views/oms/order/deliverOrderList.vue
@@ -1,99 +1,134 @@
-<template> 
-  <div class="app-container">
-    <el-card class="operate-container" shadow="never">
-      <i class="el-icon-tickets"></i>
-      <span>发货列表</span>
-    </el-card>
-    <div class="table-container">
-      <el-table ref="deliverOrderTable"
-                style="width: 100%;"
-                :data="list" border>
-        <el-table-column label="订单编号" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.orderSn}}</template>
-        </el-table-column>
-        <el-table-column label="收货人" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.receiverName}}</template>
-        </el-table-column>
-        <el-table-column label="手机号码" width="160" align="center">
-          <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
-        </el-table-column>
-        <el-table-column label="邮政编码" width="160" align="center">
-          <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
-        </el-table-column>
-        <el-table-column label="收货地址" align="center">
-          <template slot-scope="scope">{{scope.row.address}}</template>
-        </el-table-column>
-        <el-table-column label="配送方式" width="160" align="center">
-          <template slot-scope="scope">
-            <el-select placeholder="请选择物流公司"
-                       v-model="scope.row.deliveryCompany"
-                       size="small">
-              <el-option v-for="item in companyOptions"
-                         :key="item"
-                         :label="item"
-                         :value="item">
-              </el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="物流单号" width="180" align="center">
-          <template slot-scope="scope">
-            <el-input size="small" v-model="scope.row.deliverySn"></el-input>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="margin-top: 15px;text-align: center">
-        <el-button @click="cancel">取消</el-button>
-        <el-button @click="confirm" type="primary">确定</el-button>
-      </div>
+<template>
+    <!-- 整个页面内容的外层容器，添加了 app-container 类名，用于整体的布局控制以及样式应用，可能在对应的 CSS 文件中有相关样式定义 -->
+    <div class="app-container">
+        <!-- 使用 el-card 组件创建一个卡片式的容器，添加了 operate-container 类名用于特定样式定制，设置 shadow="never" 表示该卡片不显示阴影效果，内部包含一个图标和一个文本标签，用于提示此区域是和“发货列表”相关的内容 -->
+        <el-card class="operate-container" shadow="never">
+            <i class="el-icon-tickets"></i>
+            <span>发货列表</span>
+        </el-card>
+        <!-- 创建一个 div 容器，添加了 table-container 类名用于样式控制，用于放置包含发货信息的表格以及相关操作按钮等内容 -->
+        <div class="table-container">
+            <!-- 使用 el-table 组件创建一个表格，ref="deliverOrderTable" 给表格添加了一个引用标识，方便在 Vue 实例的 JavaScript 代码中通过 this.$refs.deliverOrderTable 来获取这个表格组件的实例，设置表格宽度为 100%以铺满父容器，通过 :data="list" 将表格要展示的数据与 list 数组（在 Vue 实例的 data 中定义）进行绑定，border 属性用于给表格添加边框，使其样式更清晰、美观 -->
+            <el-table ref="deliverOrderTable"
+                      style="width: 100%;"
+                      :data="list" border>
+                <!-- 使用 el-table-column 组件定义表格的列，label="订单编号" 设置该列在表头显示的标题为“订单编号”，width="180" 设置列宽为 180 像素，align="center" 将列内容在水平方向上进行居中对齐，内部使用 template 结合 slot-scope="scope" 的方式来自定义单元格内容展示，通过插值表达式 {{scope.row.orderSn}} 从 scope 对象中 row 属性下的 orderSn 字段获取对应的值并渲染显示，也就是展示每一行对应的订单编号信息 -->
+                <el-table-column label="订单编号" width="180" align="center">
+                    <template slot-scope="scope">{{scope.row.orderSn}}</template>
+                </el-table-column>
+                <el-table-column label="收货人" width="180" align="center">
+                    <template slot-scope="scope">{{scope.row.receiverName}}</template>
+                </el-table-column>
+                <el-table-column label="手机号码" width="160" align="center">
+                    <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
+                </el-table-column>
+                <el-table-column label="邮政编码" width="160" align="center">
+                    <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
+                </el-table-column>
+                <el-table-column label="收货地址" align="center">
+                    <template slot-scope="scope">{{scope.row.address}}</template>
+                </el-table-column>
+                <el-table-column label="配送方式" width="160" align="center">
+                    <template slot-scope="scope">
+                        <!-- 在表格列的单元格中使用 el-select 组件创建一个下拉选择框，placeholder="请选择物流公司" 设置下拉框的占位提示文本，v-model="scope.row.deliveryCompany" 通过双向数据绑定将选择框选中的值与当前行数据对象（scope.row）中的 deliveryCompany 属性进行绑定，方便数据的更新与获取，size="small" 表示下拉框为小尺寸，内部通过 v-for 指令循环遍历 companyOptions 数组（在 Vue 实例的 data 中定义，用于存储物流公司名称列表），为每个元素创建一个 el-option 选项，:key、:label 和 :value 都设置为当前元素，也就是每个选项的唯一标识、显示文本以及对应的值都为物流公司名称，用于展示可供选择的物流公司选项 -->
+                        <el-select placeholder="请选择物流公司"
+                                   v-model="scope.row.deliveryCompany"
+                                   size="small">
+                            <el-option v-for="item in companyOptions"
+                                       :key="item"
+                                       :label="item"
+                                       :value="item">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column label="物流单号" width="180" align="center">
+                    <template slot-scope="scope">
+                        <!-- 在表格列的单元格中使用 el-input 组件创建一个输入框，size="small" 表示输入框为小尺寸，v-model="scope.row.deliverySn" 通过双向数据绑定将输入框的值与当前行数据对象（scope.row）中的 deliverySn 属性进行绑定，方便输入物流单号后的数据更新与获取 -->
+                        <el-input size="small" v-model="scope.row.deliverySn"></el-input>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <!-- 创建一个 div 容器，设置顶部外边距为 15 像素（margin-top: 15px），文本水平居中（text-align: center），用于放置操作按钮，包括“取消”和“确定”按钮 -->
+            <div style="margin-top: 15px;text-align: center">
+                <!-- 使用 el-button 组件创建一个按钮，绑定了 click 事件，点击按钮会调用 cancel 方法（在 Vue 实例的 methods 中定义），按钮文本为“取消”，用于取消当前操作并返回上一个页面等相关逻辑 -->
+                <el-button @click="cancel">取消</el-button>
+                <!-- 使用 el-button 组件创建一个按钮，绑定了 click 事件，点击按钮会调用 confirm 方法（在 Vue 实例的 methods 中定义），按钮类型为 primary（通常表示主要操作按钮，样式上会有相应突出显示），按钮文本为“确定”，用于触发发货操作等相关业务逻辑 -->
+                <el-button @click="confirm" type="primary">确定</el-button>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
+
+
+
 <script>
-  import {deliveryOrder} from '@/api/order'
-  const defaultLogisticsCompanies=["顺丰快递","圆通快递","中通快递","韵达快递"];
-  export default {
-    name: 'deliverOrderList',
-    data() {
-      return {
-        list:[],
-        companyOptions:defaultLogisticsCompanies
-      }
-    },
-    created(){
-      this.list= this.$route.query.list;
-      //当list不为数组时转换为数组
-      if(this.list instanceof Array===false){
-        this.list=[];
-      }
-    },
-    methods:{
-      cancel(){
-        this.$router.back();
-      },
-      confirm(){
-        this.$confirm('是否要进行发货操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deliveryOrder(this.list).then(response=>{
-            this.$router.back();
-            this.$message({
-              type: 'success',
-              message: '发货成功!'
-            });
-          });
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消发货'
-          });
-        });
-      }
+    // 从项目的 @/api/order 文件中导入 deliveryOrder 函数，推测这个函数用于向后台 API 发送发货相关的请求，比如将发货信息提交给后台进行处理等，是与后端进行交互的重要接口调用函数
+    import {deliveryOrder} from '@/api/order'
+    // 定义一个名为 defaultLogisticsCompanies 的常量数组，用于存储默认的物流公司名称列表，这里包含了“顺丰快递”“圆通快递”“中通快递”“韵达快递”等常见的物流公司名称，在表格的配送方式下拉选择框中会展示这些选项供用户选择物流公司
+    const defaultLogisticsCompanies = ["顺丰快递", "圆通快递", "中通快递", "韵达快递"];
+
+    // 定义并导出一个名为 deliverOrderList 的 Vue 组件
+    export default {
+        name: 'deliverOrderList',
+        // data 函数用于返回组件的初始数据对象，定义了组件中用到的各种数据及其初始值
+        data() {
+            return {
+                // 用于存储发货相关的订单信息列表，初始设为空数组，后续可能会通过路由参数等方式获取具体数据并赋值，用于在表格中展示发货信息
+                list: [],
+                // 通过将 defaultLogisticsCompanies 数组直接赋值给 companyOptions 属性，用于存储物流公司选项列表，供表格中配送方式下拉选择框使用，展示可供选择的物流公司名称
+                companyOptions: defaultLogisticsCompanies
+            }
+        },
+        // created 生命周期钩子函数，在组件实例创建完成后立即执行，这里主要进行了对 list 数据的初始化操作
+        created() {
+            // 从当前路由的查询参数中获取名为 list 的参数值，并赋值给组件的 list 属性，尝试获取发货相关的订单信息列表数据，但这个数据应该是符合一定格式要求的（比如数组形式），所以下面还有进一步的判断处理
+            this.list = this.$route.query.list;
+            // 判断 list 是否不是数组类型（通过 instanceof Array 判断），如果不是数组，就将 list 重新赋值为空数组，避免后续操作出现问题，保证 list 属性始终是一个数组，用于表格数据展示等相关逻辑
+            if (this.list instanceof Array === false) {
+                this.list = [];
+            }
+        },
+        // methods 属性用于定义组件中的各种方法，这些方法可以在模板中通过事件绑定等方式被调用，以实现各种交互逻辑和业务功能
+        methods: {
+            // 定义 cancel 方法，用于处理取消操作的逻辑，通过 Vue Router 的 $router.back() 方法实现路由回退，也就是返回上一个页面，通常用于用户不想进行发货操作，点击“取消”按钮时执行的逻辑
+            cancel() {
+                this.$router.back();
+            },
+            // 定义 confirm 方法，用于处理确认发货操作的逻辑
+            confirm() {
+                // 使用 $confirm 组件（可能是 Element UI 等提供的确认框组件）弹出一个确认提示框，询问用户是否要进行发货操作，设置了确认按钮文本为“确定”，取消按钮文本为“取消”，提示框类型为 warning（可能会有相应的警告样式提示用户谨慎操作）
+                this.$confirm('是否要进行发货操作?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    // 如果用户点击确认按钮，调用 deliveryOrder 函数（前面从 API 导入的函数），传入 list 数组（包含要发货的订单信息），向后台发送发货请求，在请求成功的回调函数（then 部分）中：
+                    // 1. 通过 $router.back() 方法进行路由回退，返回上一个页面，可能是在发货成功后回到发货列表页面或者相关的订单管理页面等。
+                    // 2. 使用 $message 组件（可能是 Element UI 等提供的消息提示组件）弹出一个成功类型的提示消息，告知用户发货成功，展示友好的操作反馈给用户。
+                    deliveryOrder(this.list).then(response => {
+                        this.$router.back();
+                        this.$message({
+                            type: 'success',
+                            message: '发货成功!'
+                        });
+                    });
+                }).catch(() => {
+                    // 如果用户在确认提示框中点击了取消按钮，或者请求过程中出现异常被捕获到（通过 catch 块），会使用 $message 组件弹出一个信息类型的提示消息，告知用户已取消发货，同样是给用户一个操作反馈，让用户知晓当前操作的结果。
+                    this.$message({
+                        type: 'info',
+                        message: '已取消发货'
+                    });
+                });
+            }
+        }
     }
-  }
 </script>
+
+
+
+
+
 <style></style>
 
 
diff --git a/src/views/oms/order/index.vue b/src/views/oms/order/index.vue
index 6479a64..d0e5883 100644
--- a/src/views/oms/order/index.vue
+++ b/src/views/oms/order/index.vue
@@ -1,183 +1,279 @@
-<template> 
-  <div class="app-container">
-    <el-card class="filter-container" shadow="never">
-      <div>
-        <i class="el-icon-search"></i>
-        <span>筛选搜索</span>
-        <el-button
-          style="float:right"
-          type="primary"
-          @click="handleSearchList()"
-          size="small">
-          查询搜索
-        </el-button>
-        <el-button
-          style="float:right;margin-right: 15px"
-          @click="handleResetSearch()"
-          size="small">
-          重置
-        </el-button>
-      </div>
-      <div style="margin-top: 15px">
-        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <el-form-item label="输入搜索：">
-            <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
-          </el-form-item>
-          <el-form-item label="收货人：">
-            <el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
-          </el-form-item>
-          <el-form-item label="提交时间：">
-            <el-date-picker
-              class="input-width"
-              v-model="listQuery.createTime"
-              value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="请选择时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="订单状态：">
-            <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
-              <el-option v-for="item in statusOptions"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="订单分类：">
-            <el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
-              <el-option v-for="item in orderTypeOptions"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="订单来源：">
-            <el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
-              <el-option v-for="item in sourceTypeOptions"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
-      </div>
-    </el-card>
+<template>
+    <!-- 这是整个页面内容的外层容器，使用了名为 "app-container" 的类名，通常用于统一管理页面内各部分元素的整体布局与样式，不过具体样式需要查看对应的 CSS 文件中针对该类名的定义 -->
+    <div class="app-container">
+        <!-- 这是一个用于筛选搜索功能的卡片式容器，使用了 Element UI 的 el-card 组件，添加了 "filter-container" 类名用于特定样式定制，同时设置了 shadow="never" 属性，意味着该卡片不会显示阴影效果，使其外观更简洁清爽 -->
+        <el-card class="filter-container" shadow="never">
+            <div>
+                <!-- 这里使用了 Element UI 提供的图标类 "el-icon-search"，用于展示一个搜索图标，直观地向用户提示此区域与搜索相关的功能 -->
+                <i class="el-icon-search"></i>
+                <!-- 展示一个文本标签，内容为 "筛选搜索"，明确告知用户这个区域主要用于进行筛选和搜索操作 -->
+                <span>筛选搜索</span>
+                <!-- 创建一个 "查询搜索" 按钮，使用了 Element UI 的 el-button 组件。
+                样式上设置为右浮动（float:right），使其在水平方向靠右排列；类型设置为 "primary"，这种类型的按钮通常在页面中表示主要的操作按钮，会有比较突出的样式（比如颜色更鲜艳等）；绑定了 @click="handleSearchList()" 点击事件，意味着当用户点击这个按钮时，会调用 Vue 实例中定义的 handleSearchList 方法来执行相应的查询搜索逻辑；按钮尺寸设置为 "small"（即小尺寸按钮）。 -->
+                <el-button
+                        style="float:right"
+                        type="primary"
+                        @click="handleSearchList()"
+                        size="small">
+                    查询搜索
+                </el-button>
+                <!-- 创建一个 "重置" 按钮，同样使用 el-button 组件。
+                样式设置为右浮动且距离右边有 15 像素的外边距（float:right;margin-right: 15px），用于控制其在水平方向上的准确位置；绑定了 @click="handleResetSearch()" 点击事件，点击时会调用 Vue 实例中定义的 handleResetSearch 方法，该方法通常用于将筛选搜索的条件恢复到初始状态；按钮尺寸也是 "small"。 -->
+                <el-button
+                        style="float:right;margin-right: 15px"
+                        @click="handleResetSearch()"
+                        size="small">
+                    重置
+                </el-button>
+            </div>
+            <div style="margin-top: 15px">
+                <!-- 使用 el-form 组件创建一个表单，用于容纳各种筛选搜索的输入项和选择项。
+                设置了 :inline="true"，表示这个表单是行内表单，即表单内的各个表单项会尽量在同一行内排列（前提是空间足够）；:model="listQuery" 将表单的数据与 Vue 实例中的 listQuery 对象进行双向绑定，这样用户在表单中输入或选择的值会实时更新到 listQuery 对象中，同时 listQuery 对象中对应的值变化时，表单也会相应更新显示；size="small" 设定了表单整体的尺寸为小尺寸；label-width="140px" 明确了表单中每个表单项标签部分的宽度为 140 像素，有助于控制表单的整体布局美观度。 -->
+                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+                    <!-- 这是表单中的一个表单项，用于输入搜索订单编号。
+                    使用 el-form-item 组件来定义表单中的每一项，此处设置标签文本为 "输入搜索："，用于提示用户该项的作用。
+                    内部嵌套了 el-input 组件来创建实际的输入框，通过 v-model="listQuery.orderSn" 将输入框中用户输入的值与 Vue 实例中 listQuery 对象的 orderSn 属性进行双向绑定，这样用户输入的订单编号内容会实时更新到 orderSn 属性里，方便后续根据这个值进行查询筛选操作。同时，给输入框添加了 "input-width" 类名（推测在外部 CSS 文件中有对应的样式定义，可能是用于控制输入框的宽度等样式属性），placeholder="订单编号" 则设置了输入框的占位提示文本，引导用户在此输入订单编号相关内容进行搜索。 -->
+                    <el-form-item label="输入搜索：">
+                        <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
+                    </el-form-item>
+                    <!-- 这是另一个表单项，用于输入搜索收货人相关信息。
+                    el-form-item 的标签文本设置为 "收货人："，用于提示用户该项的用途。
+                    内部的 el-input 组件通过 v-model="listQuery.receiverKeyword" 与 listQuery 对象的 receiverKeyword 属性进行双向绑定，用户可以在这个输入框中输入收货人姓名或者手机号码等内容，用于根据收货人相关信息进行搜索筛选，placeholder="收货人姓名/手机号码" 给出了相应的输入提示信息。 -->
+                    <el-form-item label="收货人：">
+                        <el-input v-model="listQuery.receiverKeyword" class="input-width" placeholder="收货人姓名/手机号码"></el-input>
+                    </el-form-item>
+                    <!-- 这个表单项用于选择订单的提交时间。
+                    使用了 el-date-picker 组件创建日期选择器，添加了 "input-width" 类名（同样推测在外部 CSS 中有对应样式，可能控制宽度等外观属性），通过 v-model="listQuery.createTime" 与 listQuery 对象的 createTime 属性进行双向绑定，使得用户在日期选择器中选择的日期值能够实时更新到 createTime 属性中，方便后续基于提交时间进行筛选查询。value-format="yyyy-MM-dd" 定义了日期选择器返回的日期格式为 "yyyy-MM-dd"（也就是常见的年 - 月 - 日的格式），type="date" 明确了这个选择器的类型是仅选择日期（不包含具体时间部分），placeholder="请选择时间" 提示用户在此处进行时间选择操作。 -->
+                    <el-form-item label="提交时间：">
+                        <el-date-picker
+                                class="input-width"
+                                v-model="listQuery.createTime"
+                                value-format="yyyy-MM-dd"
+                                type="date"
+                                placeholder="请选择时间">
+                        </el-date-picker>
+                    </el-form-item>
+                    <!-- 此表单项用于选择订单状态。
+                    使用 el-select 组件创建一个下拉选择框，通过 v-model="listQuery.status" 与 listQuery 对象的 status 属性进行双向绑定，这样用户选择的下拉框中的值会实时更新到 status 属性中，方便后续根据所选状态进行筛选。添加了 "input-width" 类名用于样式设置（比如宽度等外观方面），placeholder="全部" 设置了下拉框的占位提示文本，表示默认情况下显示所有选项，clearable 属性使得下拉框可以被清空选择内容，方便用户重新选择。
+                    内部通过 v-for 指令循环遍历 statusOptions 数组（这个数组应该在 Vue 实例的 data 或者其他地方进行定义，里面包含了各种可供选择的订单状态选项数据，每个元素应该是一个包含 label 和 value 属性的对象，用于显示的文本和对应实际的值），为每个元素创建一个 el-option 选项，用于展示不同的订单状态供用户选择。 -->
+                    <el-form-item label="订单状态：">
+                        <el-select v-model="listQuery.status" class="input-width" placeholder="全部" clearable>
+                            <el-option v-for="item in statusOptions"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 这个表单项用于选择订单分类，结构和上面的订单状态表单项类似。
+                    el-select 通过 v-model="listQuery.orderType" 与 listQuery 对象的 orderType 属性进行双向绑定，placeholder="全部" 作为下拉框的占位提示文本，默认显示全部选项。内部通过 v-for 循环遍历 orderTypeOptions 数组（同样需要在 Vue 实例的其他地方进行定义，里面包含了各种订单分类的选项数据）创建 el-option 选项，以此展示不同的订单分类供用户选择，方便根据订单分类进行筛选操作。 -->
+                    <el-form-item label="订单分类：">
+                        <el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
+                            <el-option v-for="item in orderTypeOptions"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <!-- 此表单项用于选择订单来源，同样采用 el-select 组件结合相关属性和指令来实现。
+                    通过 v-model="listQuery.sourceType" 与 listQuery 对象的 sourceType 属性双向绑定，以便将用户选择的值实时更新到对应属性中。placeholder="全部" 设置下拉框的占位提示文本，显示默认全部选项。内部通过 v-for 循环遍历 sourceTypeOptions 数组（在 Vue 实例的其他地方定义，包含了各种订单来源的选项数据）创建 el-option 选项，展示不同的订单来源供用户选择，用于后续基于订单来源进行筛选操作。 -->
+                    <el-form-item label="订单来源：">
+                        <el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
+                            <el-option v-for="item in sourceTypeOptions"
+                                       :key="item.value"
+                                       :label="item.label"
+                                       :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-card>
+
+
+
+
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
     </el-card>
-    <div class="table-container">
-      <el-table ref="orderTable"
-                :data="list"
-                style="width: 100%;"
-                @selection-change="handleSelectionChange"
-                v-loading="listLoading" border>
+
+  <div class="table-container">
+    <!-- 使用 el-table 组件创建一个表格，ref="orderTable" 给表格定义了一个引用标识，方便在 Vue 实例的 JavaScript 代码中通过 this.$refs.orderTable 来获取该表格组件实例，进而进行一些操作（比如操作表格的滚动、获取选中行等）。
+    :data="list" 表示将表格展示的数据与 Vue 实例中的 list 数组进行绑定，表格会根据 list 数组里的数据动态渲染行内容。
+    style="width: 100%;" 设置表格宽度占满其所在的父容器宽度，确保充分利用空间展示数据。
+    @selection-change="handleSelectionChange" 绑定了一个事件监听器，当表格行的选择状态（如勾选、取消勾选行）发生改变时，会触发名为 handleSelectionChange 的方法（这个方法应该在 Vue 实例的 methods 选项中定义）来处理相应逻辑，比如更新已选中行的数据集合等。
+    v-loading="listLoading" 根据 listLoading 变量的值（布尔类型，通常在 Vue 实例的 data 中定义）来决定是否显示加载动画，如果 listLoading 为 true，表格会显示加载动画，用于提示用户数据正在加载中，反之则不显示。
+    border 属性给表格添加边框，使表格的样式更清晰，便于区分行列等信息。 -->
+    <el-table ref="orderTable"
+              :data="list"
+              style="width: 100%;"
+              @selection-change="handleSelectionChange"
+              v-loading="listLoading" border>
+        <!-- 这是表格的一列，用于实现行选择功能，type="selection" 表示该列是一个选择列，会显示复选框供用户勾选选择对应的表格行，width="60" 设置该列的宽度为 60 像素，使复选框有合适的展示空间，align="center" 将列内容（即复选框）在水平方向上居中对齐，让表格看起来更整齐美观。 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 定义表格的一列，用于展示编号信息，label="编号" 设置该列在表头显示的标题为“编号”，width="80" 设定列宽为 80 像素，控制列的宽度以适配整体表格布局，align="center" 将列内文本内容在水平方向居中对齐，让展示更规整。
+        通过 <template slot-scope="scope">{{scope.row.id}}</template> 来自定义该列单元格内容的展示，这里利用了 Vue 的作用域插槽（slot-scope）特性，scope 是一个包含了当前行数据等相关信息的对象，scope.row 表示当前行的数据对象，{{scope.row.id}} 则是使用插值表达式从当前行数据对象中获取 id 属性的值并渲染展示在单元格内，也就是展示每一行对应的编号信息。 -->
         <el-table-column label="编号" width="80" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+            <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 这列用于展示订单编号信息，和上述“编号”列类似，表头标题通过 label="订单编号" 设置为“订单编号”，width="180" 设定更宽的列宽（根据实际需求，订单编号可能需要更多展示空间），同样水平居中对齐内容（align="center"），通过 <template slot-scope="scope">{{scope.row.orderSn}}</template> 从当前行数据对象中获取 orderSn 属性的值展示出来，呈现每一行对应的订单编号内容。 -->
         <el-table-column label="订单编号" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.orderSn}}</template>
+            <template slot-scope="scope">{{scope.row.orderSn}}</template>
         </el-table-column>
+        <!-- 该列展示订单的提交时间信息，表头显示为“提交时间”（label="提交时间"），列宽设定为 180 像素（width="180"）并水平居中对齐（align="center"）。
+        在单元格内容展示上，通过 <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template> 使用了 Vue 的过滤器（filter）机制，formatCreateTime 是一个自定义的过滤器（应该在 Vue 实例的 filters 选项中定义），它会对 scope.row.createTime 的值（原始的时间格式数据，比如时间戳或者某种格式的日期时间字符串等）进行格式化处理，然后将处理后的结果展示在单元格内，使得时间展示更符合用户期望的格式，便于查看。 -->
         <el-table-column label="提交时间" width="180" align="center">
-          <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
+            <template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
         </el-table-column>
+        <!-- 这列用于展示用户账号信息，表头为“用户账号”（label="用户账号"），内容在水平方向居中对齐（align="center"），通过 <template slot-scope="scope">{{scope.row.memberUsername}}</template> 直接从当前行数据对象中获取 memberUsername 属性的值并展示出来，呈现每一行对应的用户账号内容。 -->
         <el-table-column label="用户账号" align="center">
-          <template slot-scope="scope">{{scope.row.memberUsername}}</template>
+            <template slot-scope="scope">{{scope.row.memberUsername}}</template>
         </el-table-column>
+        <!-- 此列展示订单金额信息，表头显示“订单金额”（label="订单金额"），设置列宽为 120 像素（width="120"）并居中对齐（align="center"），通过 <template slot-scope="scope">￥{{scope.row.totalAmount}}</template> 在获取当前行数据对象中 totalAmount 属性的值基础上，在前面添加“￥”符号，以明确表示金额为人民币金额的形式展示在单元格内，方便用户直观知晓订单的金额情况。 -->
         <el-table-column label="订单金额" width="120" align="center">
-          <template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
+            <template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
         </el-table-column>
+        <!-- 该列用于展示支付方式信息，表头为“支付方式”（label="支付方式"），列宽 120 像素（width="120"）且水平居中对齐（align="center"），通过 <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template> 使用了名为 formatPayType 的自定义过滤器（在 Vue 实例的 filters 中定义）对 scope.row.payType 的值（可能是代表支付方式的数字代码、缩写等）进行转换处理，将其变为更易理解的文字描述等形式后展示在单元格内，让用户能清楚知道订单的支付方式详情。 -->
         <el-table-column label="支付方式" width="120" align="center">
-          <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
+            <template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
         </el-table-column>
+        <!-- 这列展示订单来源信息，表头设置为“订单来源”（label="订单来源"），列宽 120 像素（width="120"）并居中对齐（align="center"），通过 <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template> 利用名为 formatSourceType 的自定义过滤器（在 Vue 实例的 filters 里定义）对 scope.row.sourceType 的值（原始的订单来源相关数据，可能不太直观的表示形式）进行格式化处理，转换为更清晰易懂的内容展示在单元格内，便于用户了解订单是从哪里来的。 -->
         <el-table-column label="订单来源" width="120" align="center">
-          <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
+            <template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
         </el-table-column>
+        <!-- 此列展示订单状态信息，表头为“订单状态”（label="订单状态"），列宽 120 像素（width="120"）且水平居中对齐（align="center"），通过 <template slot-scope="scope">{{scope.row.status | formatStatus}}</template> 使用名为 formatStatus 的自定义过滤器（在 Vue 实例的 filters 中定义）对 scope.row.status 的值（可能是数字等表示状态的原始值）进行转换，将其变为对应的文字描述等更直观的形式展示在单元格内，方便用户快速知晓订单当前所处的状态情况。 -->
         <el-table-column label="订单状态" width="120" align="center">
-          <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
+            <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
         </el-table-column>
+        <!-- 这是用于展示针对订单的各种操作按钮的列，表头标题设置为“操作”（label="操作"），列宽设定为 200 像素（width="200"）并水平居中对齐（align="center"），在单元格内通过 <template slot-scope="scope">...</template> 定义了多个操作按钮，每个按钮都绑定了对应的点击事件以及根据不同条件通过 v-show 指令来控制显示与否，实现了根据订单状态进行操作权限控制的功能。 -->
         <el-table-column label="操作" width="200" align="center">
-          <template slot-scope="scope">
-            <el-button
-              size="mini"
-              @click="handleViewOrder(scope.$index, scope.row)"
-            >查看订单</el-button>
-            <el-button
-              size="mini"
-              @click="handleCloseOrder(scope.$index, scope.row)"
-              v-show="scope.row.status===0">关闭订单</el-button>
-            <el-button
-              size="mini"
-              @click="handleDeliveryOrder(scope.$index, scope.row)"
-              v-show="scope.row.status===1">订单发货</el-button>
-            <el-button
-              size="mini"
-              @click="handleViewLogistics(scope.$index, scope.row)"
-              v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
-            <el-button
-              size="mini"
-              type="danger"
-              @click="handleDeleteOrder(scope.$index, scope.row)"
-              v-show="scope.row.status===4">删除订单</el-button>
-          </template>
+            <template slot-scope="scope">
+                <!-- “查看订单”按钮，使用 el-button 组件创建，设置按钮尺寸为“mini”（最小尺寸按钮），使其在表格单元格内展示更紧凑，不会占据过多空间。
+                通过 @click="handleViewOrder(scope.$index, scope.row)" 绑定了点击事件，当点击该按钮时会调用名为 handleViewOrder 的方法（在 Vue 实例的 methods 中定义），并传入当前行的索引（scope.$index）和当前行的数据对象（scope.row）作为参数，该方法通常用于实现跳转到对应订单的详情页面查看详细信息等相关逻辑。 -->
+                <el-button
+                        size="mini"
+                        @click="handleViewOrder(scope.$index, scope.row)"
+                >查看订单</el-button>
+                <!-- “关闭订单”按钮，同样尺寸为“mini”，通过 @click="handleCloseOrder(scope.$index, scope.row)" 绑定点击事件，点击时会调用 handleCloseOrder 方法（在 Vue 实例的 methods 中定义）用于执行关闭订单相关的业务逻辑。
+                通过 v-show="scope.row.status===0" 根据当前行订单的状态（scope.row.status）是否等于 0 来决定是否显示该按钮，只有当订单状态为 0 时，该按钮才会显示在表格单元格内，以此实现根据业务规则对操作按钮进行权限控制，避免在不符合条件时出现误操作等情况。 -->
+                <el-button
+                        size="mini"
+                        @click="handleCloseOrder(scope.$index, scope.row)"
+                        v-show="scope.row.status===0">关闭订单</el-button>
+                <!-- “订单发货”按钮，按钮尺寸“mini”，绑定点击事件 handleDeliveryOrder(scope.$index, scope.row)，点击会调用 handleDeliveryOrder 方法来执行订单发货相关的业务逻辑。
+                通过 v-show="scope.row.status===1" 根据订单状态是否为 1 来控制其显示与否，只有订单状态为 1 时该按钮才会显示，确保只有在符合发货条件的订单行对应的单元格中才展示该按钮，符合业务流程要求。 -->
+                <el-button
+                        size="mini"
+                        @click="handleDeliveryOrder(scope.$index, scope.row)"
+                        v-show="scope.row.status===1">订单发货</el-button>
+                <!-- “订单跟踪”按钮，尺寸为“mini”，绑定点击事件 handleViewLogistics(scope.$index, scope.row)，点击会调用 handleViewLogistics 方法来实现查看订单物流跟踪相关的功能。
+                通过 v-show="scope.row.status===2||scope.row.status===3" 根据订单状态是否为 2 或者 3 来决定是否显示，当订单状态处于这两种情况之一时，按钮才会在对应的表格单元格内显示出来，用于在合适的业务阶段提供物流跟踪查看的操作入口。 -->
+                <el-button
+                        size="mini"
+                        @click="handleViewLogistics(scope.$index, scope.row)"
+                        v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
+                <!-- “删除订单”按钮，尺寸“mini”，按钮类型设置为“danger”（通常这种类型的按钮表示危险操作，在样式上会有比较明显的提示，比如红色背景等），绑定点击事件 handleDeleteOrder(scope.$index, scope.row)，点击会调用 handleDeleteOrder 方法来执行删除订单相关的业务逻辑。
+                通过 v-show="scope.row.status===4" 根据订单状态是否为 4 来控制显示与否，只有当订单状态为 4 时该按钮才会出现在对应的表格单元格内，避免误删等不合理的操作，符合业务对删除订单的权限控制要求。 -->
+                <el-button
+                        size="mini"
+                        type="danger"
+                        @click="handleDeleteOrder(scope.$index, scope.row)"
+                        v-show="scope.row.status===4">删除订单</el-button>
+            </template>
         </el-table-column>
-      </el-table>
-    </div>
-    <div class="batch-operate-container">
-      <el-select
-        size="small"
-        v-model="operateType" placeholder="批量操作">
+    </el-table>
+</div>
+
+
+<div class="batch-operate-container">
+    <!-- 使用 el-select 组件创建一个下拉选择框，用于选择批量操作的类型，size="small" 设置下拉框的尺寸为小尺寸，使其在页面中展示更紧凑，占用空间较小。
+    v-model="operateType" 将下拉框选中的值与 Vue 实例中的 operateType 属性进行双向绑定，这样用户选择的操作类型会实时更新到 operateType 属性中，同时 operateType 属性值变化时，下拉框也会相应更新显示。
+    placeholder="批量操作" 设置了下拉框的占位提示文本，当没有选择任何选项时，会显示该文本提示用户进行选择。 -->
+    <el-select
+            size="small"
+            v-model="operateType" placeholder="批量操作">
+        <!-- 通过 v-for 指令循环遍历 operateOptions 数组（这个数组应该在 Vue 实例的 data 选项中定义，里面包含了各种批量操作的选项数据，每个元素通常是一个包含 label 和 value 属性的对象，label 用于显示的文本描述，value 对应实际的值），为每个元素创建一个 el-option 选项，用于展示不同的批量操作供用户选择。
+        :key="item.value" 为每个选项设置了唯一的 key 值，这在 Vue 的虚拟 DOM 渲染机制中很重要，有助于提高渲染效率和正确更新 DOM 元素，这里使用选项的 value 值作为 key。
+        :label="item.label" 和 :value="item.value" 分别设置了选项显示的文本内容和对应实际的值，使得下拉框能正确展示和获取用户选择的批量操作选项。 -->
         <el-option
-          v-for="item in operateOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value">
+                v-for="item in operateOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
         </el-option>
-      </el-select>
-      <el-button
-        style="margin-left: 20px"
-        class="search-button"
-        @click="handleBatchOperate()"
-        type="primary"
-        size="small">
+    </el-select>
+    <!-- 创建一个“确定”按钮，使用 el-button 组件，设置样式使其距离左边有 20 像素的外边距（style="margin-left: 20px"），添加了 "search-button" 类名（虽然这里没看到具体对应的 CSS 样式，但推测是用于给按钮添加特定的样式效果，比如改变背景色、边框样式等），绑定了点击事件 handleBatchOperate()，点击该按钮会调用 handleBatchOperate 方法（在 Vue 实例的 methods 中定义）来执行用户选择的批量操作相关的业务逻辑，按钮类型设置为 "primary"（表示主要操作按钮，样式上会比较突出，比如颜色更鲜艳等），尺寸为 "small"（小尺寸按钮）。 -->
+    <el-button
+            style="margin-left: 20px"
+            class="search-button"
+            @click="handleBatchOperate()"
+            type="primary"
+            size="small">
         确定
-      </el-button>
-    </div>
-    <div class="pagination-container">
-      <el-pagination
+    </el-button>
+</div>
+
+<div class="pagination-container">
+    <!-- 使用 Element UI 的 el-pagination 组件来创建一个分页器，用于对相关数据（通常是表格展示的数据等）进行分页展示与操作管理。 -->
+    <el-pagination
+        <!-- 设置 background 属性，该属性会为分页器的各个按钮等元素添加背景颜色，使其在页面上更加醒目、易于查看和操作，提升用户交互体验。 -->
         background
+        <!-- 绑定 @size-change 事件，当用户通过分页器上的每页显示数量选择功能（例如从每页显示 5 条数据切换为每页显示 10 条数据）改变了每页显示的数据条数时，会触发名为 handleSizeChange 的方法（这个方法应该在对应的 Vue 实例的 methods 选项中定义），在该方法中可以编写相应的逻辑，比如根据新的每页条数去重新请求后端数据、更新页面上表格或列表展示的数据等操作。 -->
         @size-change="handleSizeChange"
+        <!-- 绑定 @current-change 事件，当用户点击分页器上的上一页、下一页按钮或者直接切换页码（比如从第 1 页切换到第 2 页）时，会触发名为 handleCurrentChange 的方法（同样在 Vue 实例的 methods 中定义），以便执行相关逻辑，像根据新的页码去获取对应的数据并更新页面中表格等组件所展示的数据内容。 -->
         @current-change="handleCurrentChange"
+        <!-- 通过 layout 属性来定义分页器的布局结构，这里设置为 "total, sizes,prev, pager, next,jumper"，具体含义如下：
+        - "total"：表示在分页器上会显示数据的总条数信息，让用户清楚知道当前数据的总体规模。
+        - "sizes"：会展示一个下拉框，用于提供不同的每页可显示数据条数的选项，用户可以从中选择想要的每页显示条数，此处配置的可选项由后面的 :page-sizes 属性来决定。
+        - "prev"：对应分页器中的上一页按钮，方便用户向前翻页查看前面的数据。
+        - "pager"：表示页码按钮所在的区域，会显示多个页码按钮（具体显示哪些页码会根据总页数等情况有相应的逻辑来确定），用户可以点击页码直接跳转到对应的页面。
+        - "next"：是下一页按钮，用于向后翻页查看后续的数据。
+        - "jumper"：提供了一个输入框，用户可以直接在里面输入想要跳转的页码数字，然后回车即可快速跳转到指定页码对应的页面，进一步增强了分页操作的便捷性。 -->
         layout="total, sizes,prev, pager, next,jumper"
+        <!-- 将分页器的当前页码与 Vue 实例中 listQuery 对象的 pageNum 属性进行双向绑定，并且使用了.sync 修饰符。这意味着当分页器上的当前页码发生变化时（比如用户点击了下一页按钮），会同步更新 listQuery.pageNum 的值；反过来，当在 Vue 实例中其他地方修改了 listQuery.pageNum 的值时，分页器的当前页码显示也会相应更新，便于在与后端交互获取数据等操作中，根据当前页码准确地获取对应的数据。 -->
         :current-page.sync="listQuery.pageNum"
+        <!-- 将分页器每页显示的数据条数与 listQuery 对象的 pageSize 属性进行绑定，使得分页器的每页显示数量设置与 listQuery.pageSize 的值保持一致，并且可以通过修改 listQuery.pageSize 的值来动态改变分页器每页实际显示的条数，常用于配合页面数据展示需求以及与后端交互传递每页数据量参数等场景。 -->
         :page-size="listQuery.pageSize"
+        <!-- 通过 :page-sizes 属性设置每页可显示数据条数的具体可选值，这里配置为一个数组 [5,10,15]，也就是在分页器的 "sizes" 下拉框中，用户可以选择每页显示 5 条、10 条或者 15 条数据，提供了灵活的每页数据量选择功能，以满足不同用户查看数据的习惯和需求。 -->
         :page-sizes="[5,10,15]"
+        <!-- 将数据的总条数与 Vue 实例中的 total 属性进行绑定，用于告知分页器当前数据的总量情况，分页器会依据这个总条数以及其他相关设置（如每页条数、当前页码等）来正确地展示分页相关的按钮、页码等元素，确保分页功能的准确性。 -->
         :total="total">
-      </el-pagination>
-    </div>
-    <el-dialog
-      title="关闭订单"
-      :visible.sync="closeOrder.dialogVisible" width="30%">
-      <span style="vertical-align: top">操作备注：</span>
-      <el-input
+    </el-pagination>
+</div>
+
+<el-dialog
+    <!-- 设置对话框的标题为 "关闭订单"，这个标题会显示在对话框的顶部，用于提示用户该对话框的主要功能和用途。 -->
+    title="关闭订单"
+    <!-- 通过 :visible.sync="closeOrder.dialogVisible" 将对话框的显示隐藏状态与 Vue 实例中 closeOrder 对象的 dialogVisible 属性进行双向绑定，意味着当 dialogVisible 的值为 true 时，对话框会显示出来；当修改 dialogVisible 的值为 false 时，对话框就会隐藏。这种双向绑定方便在 Vue 实例的其他代码中（比如点击按钮等操作触发的方法里）控制对话框的显示和隐藏。 -->
+    :visible.sync="closeOrder.dialogVisible" width="30%">
+    <span style="vertical-align: top">操作备注：</span>
+    <!-- 使用 el-input 组件创建一个文本输入框，并且设置为多行文本输入框（type="textarea"），方便用户输入较多的文字内容。
+    通过 style="width: 80%" 设置输入框的宽度占父容器宽度的 80%，使其在对话框中有合适的展示宽度；:rows="5" 指定了文本框默认显示的行数为 5 行，不过用户可以根据实际输入内容的多少进行上下滚动查看和编辑；placeholder="请输入内容" 则是设置了输入框的占位提示文本，提示用户在此处输入相关的操作备注信息；v-model="closeOrder.content" 将输入框中用户输入的内容与 Vue 实例中 closeOrder 对象的 content 属性进行双向绑定，这样用户输入的备注内容会实时更新到 content 属性中，方便后续获取和使用该备注信息（比如提交到后端保存等操作）。 -->
+    <el-input
         style="width: 80%"
         type="textarea"
         :rows="5"
         placeholder="请输入内容"
         v-model="closeOrder.content">
-      </el-input>
-      <span slot="footer" class="dialog-footer">
+    </el-input>
+    <span slot="footer" class="dialog-footer">
+        <!-- 创建一个 "取消" 按钮，使用 el-button 组件，通过 @click="closeOrder.dialogVisible = false" 绑定了点击事件，当用户点击该按钮时，会将 closeOrder.dialogVisible 的值设置为 false，从而实现隐藏当前对话框的功能，用于取消关闭订单相关的操作或者关闭对话框不再进行后续操作等情况。 -->
         <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
+        <!-- 创建一个 "确定" 按钮，类型设置为 "primary"（通常表示主要的、重要的操作按钮，样式上会比较突出，比如颜色更鲜艳等），通过 @click="handleCloseOrderConfirm" 绑定了点击事件，点击该按钮会调用名为 handleCloseOrderConfirm 的方法（在 Vue 实例的 methods 中定义），该方法一般用于执行真正的关闭订单操作，比如向后端发送关闭订单的请求，同时携带用户在文本输入框中填写的操作备注等信息，完成关闭订单这一业务流程的相关逻辑。 -->
         <el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
-      </span>
-    </el-dialog>
+    </span>
+</el-dialog>
+
+
     <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
   </div>
 </template>
+
+
+
+
 <script>
   import {fetchList,closeOrder,deleteOrder} from '@/api/order'
   import {formatDate} from '@/utils/date';
@@ -192,268 +288,465 @@
     sourceType: null,
     createTime: null,
   };
-  export default {
+
+
+export default {
     name: "orderList",
-    components:{LogisticsDialog},
+    components: {LogisticsDialog},
     data() {
-      return {
-        listQuery: Object.assign({}, defaultListQuery),
-        listLoading: true,
-        list: null,
-        total: null,
-        operateType: null,
-        multipleSelection: [],
-        closeOrder:{
-          dialogVisible:false,
-          content:null,
-          orderIds:[]
-        },
-        statusOptions: [
-          {
-            label: '待付款',
-            value: 0
-          },
-          {
-            label: '待发货',
-            value: 1
-          },
-          {
-            label: '已发货',
-            value: 2
-          },
-          {
-            label: '已完成',
-            value: 3
-          },
-          {
-            label: '已关闭',
-            value: 4
-          }
-        ],
-        orderTypeOptions: [
-          {
-            label: '正常订单',
-            value: 0
-          },
-          {
-            label: '秒杀订单',
-            value: 1
-          }
-        ],
-        sourceTypeOptions: [
-          {
-            label: 'PC订单',
-            value: 0
-          },
-          {
-            label: 'APP订单',
-            value: 1
-          }
-        ],
-        operateOptions: [
-          {
-            label: "批量发货",
-            value: 1
-          },
-          {
-            label: "关闭订单",
-            value: 2
-          },
-          {
-            label: "删除订单",
-            value: 3
-          }
-        ],
-        logisticsDialogVisible:false
-      }
+        return {
+            listQuery: Object.assign({}, defaultListQuery),
+            listLoading: true,
+            list: null,
+            total: null,
+            operateType: null,
+            multipleSelection: [],
+            closeOrder: {
+                dialogVisible: false,
+                content: null,
+                orderIds: []
+            },
+            statusOptions: [
+                // 订单状态选项数组，每个元素是一个包含 label（显示文本）和 value（对应实际值）的对象，用于下拉选择框展示订单的不同状态
+                {
+                    label: '待付款',
+                    value: 0
+                },
+                {
+                    label: '待发货',
+                    value: 1
+                },
+                {
+                    label: '已发货',
+                    value: 2
+                },
+                    {
+                    label: '已完成',
+                    value: 3
+                },
+                {
+                    label: '已关闭',
+                    value: 4
+                }
+            ],
+            orderTypeOptions: [
+                // 订单类型选项数组，类似订单状态选项，用于展示不同的订单类型
+                {
+                    label: '正常订单',
+                    value: 0
+                },
+                {
+                    label: '秒杀订单',
+                    value: 1
+                }
+            ],
+            sourceTypeOptions: [
+                // 订单来源选项数组，用于展示订单是来自 PC 还是 APP 等不同来源
+                {
+                    label: 'PC订单',
+                    value: 0
+                },
+                {
+                    label: 'APP订单',
+                    value: 1
+                }
+            ],
+            operateOptions: [
+                // 批量操作选项数组，定义了可进行的批量操作类型，如批量发货、关闭订单、删除订单等
+                {
+                    label: "批量发货",
+                    value: 1
+                },
+                {
+                    label: "关闭订单",
+                    value: 2
+                },
+                {
+                    label: "删除订单",
+                    value: 3
+                }
+            ],
+            logisticsDialogVisible: false
+        }
     },
+
+
+
+
     created() {
       this.getList();
     },
-    filters: {
-      formatCreateTime(time) {
+
+
+filters: {
+    // formatCreateTime 过滤器，用于格式化订单的创建时间，使其以特定格式展示给用户，增强时间显示的可读性
+    formatCreateTime(time) {
+        // 将传入的时间参数 time（可能是时间戳或者其他格式的日期时间表示形式）转换为 JavaScript 的 Date 对象，方便后续进行日期格式化操作
         let date = new Date(time);
+        // 调用 formatDate 函数（该函数应该是从外部引入的工具函数，用于按照指定格式处理日期）对转换后的 Date 对象进行格式化，指定格式为 'yyyy-MM-dd hh:mm:ss'，也就是年-月-日 时:分:秒的格式，然后将格式化后的结果返回，以便在模板中使用该过滤器时能展示出符合要求的时间格式
         return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatPayType(value) {
+    },
+    // formatPayType 过滤器，作用是将代表支付方式的数值转换为对应的文字描述，让用户更直观地了解支付方式详情
+    formatPayType(value) {
+        // 判断传入的 value 值，如果值等于 1，表示对应的支付方式是支付宝，此时返回 '支付宝' 字符串
         if (value === 1) {
-          return '支付宝';
+            return '支付宝';
+        // 如果 value 值等于 2，说明支付方式是微信，返回 '微信' 字符串
         } else if (value === 2) {
-          return '微信';
+            return '微信';
+        // 如果 value 不是 1 也不是 2，代表其他未知或者未支付的情况，返回 '未支付' 字符串
         } else {
-          return '未支付';
+            return '未支付';
         }
-      },
-      formatSourceType(value) {
+    },
+    // formatSourceType 过滤器，用于将表示订单来源的数值转换为更通俗易懂的文字形式，便于用户知晓订单来自何处
+    formatSourceType(value) {
+        // 当传入的 value 值等于 1 时，意味着订单来源是 APP，返回 'APP订单' 字符串
         if (value === 1) {
-          return 'APP订单';
+            return 'APP订单';
+        // 若 value 不等于 1，即代表订单来源是其他情况（这里按逻辑应该是 PC 端等情况），返回 'PC订单' 字符串
         } else {
-          return 'PC订单';
+            return 'PC订单';
         }
-      },
-      formatStatus(value) {
+    },
+    // formatStatus 过滤器，把代表订单状态的数值转换为对应的文字状态描述，使用户一眼就能明白订单当前所处的状态
+    formatStatus(value) {
+        // 如果传入的 value 值等于 1，说明订单处于待发货状态，返回 '待发货' 字符串
         if (value === 1) {
-          return '待发货';
+            return '待发货';
+        // 若 value 等于 2，代表订单已发货，返回 '已发货' 字符串
         } else if (value === 2) {
-          return '已发货';
+            return '已发货';
+        // 当 value 等于 3 时，表示订单已完成，返回 '已完成' 字符串
         } else if (value === 3) {
-          return '已完成';
+            return '已完成';
+        // 若 value 等于 4，意味着订单已关闭，返回 '已关闭' 字符串
         } else if (value === 4) {
-          return '已关闭';
+            return '已关闭';
+        // 如果 value 等于 5，代表订单是无效订单，返回 '无效订单' 字符串
         } else if (value === 5) {
-          return '无效订单';
+            return '无效订单';
+        // 如果 value 不属于上述任何情况，默认返回 '待付款' 字符串，说明订单处于待付款状态
         } else {
-          return '待付款';
+            return '待付款';
         }
-      },
     },
-    methods: {
-      handleResetSearch() {
+},
+
+
+
+methods: {
+    // handleResetSearch 方法用于重置搜索筛选的条件
+    handleResetSearch() {
+        // 通过 Object.assign 创建一个新的对象，将 defaultListQuery 的所有属性和值复制到 this.listQuery 中，
+        // 使得 listQuery 恢复到初始的默认状态，这样用户就可以重新进行筛选搜索操作，
+        // 常用于绑定到页面上的“重置”按钮点击事件。
         this.listQuery = Object.assign({}, defaultListQuery);
-      },
-      handleSearchList() {
+    },
+
+    // handleSearchList 方法用于处理查询搜索操作
+    handleSearchList() {
+        // 将 listQuery 对象中的 pageNum 属性设置为 1，意味着每次进行新的搜索时，都从第一页数据开始获取，
+        // 这是一种常见的做法，确保每次搜索展示的是完整符合条件的第一页数据内容。
         this.listQuery.pageNum = 1;
+        // 调用 getList 方法，该方法负责向后端发起请求获取符合当前 listQuery 中设置的筛选条件的订单列表数据，
+        // 通常会绑定到页面的“查询搜索”按钮的点击事件上，触发实际的数据查询操作。
         this.getList();
-      },
-      handleSelectionChange(val){
+    },
+
+    // handleSelectionChange 方法用于处理表格行选择状态改变的情况
+    handleSelectionChange(val) {
+        // 当表格（例如使用了 Element UI 的 el-table 组件）中的行选择状态发生改变（比如用户勾选或取消勾选行）时，
+        // 该方法会被触发，参数 val 是一个包含当前所有被选中行数据的集合（具体的数据结构取决于表格绑定的数据格式）。
+        // 这里直接将 val 赋值给 multipleSelection 属性，使得组件内可以记录用户在表格中多选的行数据（通常是多个订单信息），
+        // 方便后续进行批量操作等相关逻辑处理。
         this.multipleSelection = val;
-      },
-      handleViewOrder(index, row){
-        this.$router.push({path:'/oms/orderDetail',query:{id:row.id}})
-      },
-      handleCloseOrder(index, row){
-        this.closeOrder.dialogVisible=true;
-        this.closeOrder.orderIds=[row.id];
-      },
-      handleDeliveryOrder(index, row){
+    },
+
+    // handleViewOrder 方法用于处理查看单个订单详情的操作
+    handleViewOrder(index, row) {
+        // 使用 Vue Router 的 $router.push 方法进行路由跳转，跳转到路径为 '/oms/orderDetail' 的页面，
+        // 并且通过查询参数（query）传递当前订单的 id（从参数 row 中获取，row 代表当前行的数据对象），
+        // 以便目标页面（订单详情页）可以根据接收到的 id 去获取并展示对应的订单详细信息，
+        // 通常会绑定到表格中每行对应的“查看订单”按钮的点击事件上。
+        this.$router.push({path: '/oms/orderDetail', query: {id: row.id}})
+    },
+
+    // handleCloseOrder 方法用于处理关闭单个订单的操作
+    handleCloseOrder(index, row) {
+        // 将 closeOrder 对象中的 dialogVisible 属性设置为 true，这样就会显示关闭订单的对话框（例如使用 Element UI 的 el-dialog 组件实现的对话框），
+        // 提示用户进行相关操作（如填写备注等），用于开启关闭订单的操作流程。
+        this.closeOrder.dialogVisible = true;
+        // 把当前要关闭的订单的 id（从 row.id 获取）放入 closeOrder.orderIds 数组中，
+        // 后续在提交关闭订单请求时可以使用这个数组来指定要关闭的订单，为关闭订单操作做准备。
+        this.closeOrder.orderIds = [row.id];
+    },
+
+    // handleDeliveryOrder 方法用于处理单个订单发货操作
+    handleDeliveryOrder(index, row) {
+        // 调用 covertOrder 方法，传入当前行的订单数据 row，该方法会对订单数据进行整理转换（比如整合收货地址等信息，生成适合发货操作使用的数据格式），
+        // 并将返回的结果赋值给 listItem。
         let listItem = this.covertOrder(row);
-        this.$router.push({path:'/oms/deliverOrderList',query:{list:[listItem]}})
-      },
-      handleViewLogistics(index, row){
-        this.logisticsDialogVisible=true;
-      },
-      handleDeleteOrder(index, row){
-        let ids=[];
+        // 通过 $router.push 进行路由跳转，跳转到路径为 '/oms/deliverOrderList' 的页面，
+        // 并通过查询参数传递包含 listItem 的数组（虽然这里只有一个元素，但格式上符合可能接收多个发货订单数据的情况），
+        // 方便在发货列表页面基于传递过去的数据进行发货相关的业务操作，
+        // 一般会绑定到表格中每行对应的“订单发货”按钮的点击事件上。
+        this.$router.push({path: '/oms/deliverOrderList', query: {list: [listItem]}})
+    },
+
+    // handleViewLogistics 方法用于处理显示订单物流信息对话框的操作
+    handleViewLogistics(index, row) {
+        // 当用户点击表格中某一行对应的“订单跟踪”按钮时触发该方法，
+        // 通过将 logisticsDialogVisible 属性设置为 true，使得对应的物流对话框（例如自定义的 logistics-dialog 组件实现的对话框）显示出来，
+        // 用户可以在对话框中查看该订单的物流信息等内容。
+        this.logisticsDialogVisible = true;
+    },
+
+    // handleDeleteOrder 方法用于处理删除单个订单的操作
+    handleDeleteOrder(index, row) {
+        // 创建一个空数组 ids，用于存放要删除订单的 id。
+        let ids = [];
+        // 将当前要删除订单的 id（通过 row.id 获取）添加到 ids 数组中。
         ids.push(row.id);
+        // 调用 deleteOrder 方法并传入 ids 数组，由 deleteOrder 方法去执行与后端交互的删除订单相关逻辑，
+        // 向服务器发送请求删除指定 id 的订单，通常绑定到表格中每行对应的“删除订单”按钮的点击事件上。
         this.deleteOrder(ids);
-      },
-      handleBatchOperate(){
-        if(this.multipleSelection==null||this.multipleSelection.length<1){
-          this.$message({
-            message: '请选择要操作的订单',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
-        }
-        if(this.operateType===1){
-          //批量发货
-          let list=[];
-          for(let i=0;i<this.multipleSelection.length;i++){
-            if(this.multipleSelection[i].status===1){
-              list.push(this.covertOrder(this.multipleSelection[i]));
-            }
-          }
-          if(list.length===0){
+    },
+
+    // handleBatchOperate 方法用于处理批量操作
+    handleBatchOperate() {
+        // 首先判断 multipleSelection 是否为空（即用户是否在表格中选择了要操作的订单），
+        // 如果为空，则通过 $message 弹出一个提示消息，告知用户需要选择要操作的订单，然后直接返回，不执行后续操作，
+        // 避免在没有选择订单的情况下执行无效的批量操作。
+        if (this.multipleSelection == null || this.multipleSelection.length < 1) {
             this.$message({
-              message: '选中订单中没有可以发货的订单',
-              type: 'warning',
-              duration: 1000
+                message: '请选择要操作的订单',
+                type: 'warning',
+                duration: 1000
             });
             return;
-          }
-          this.$router.push({path:'/oms/deliverOrderList',query:{list:list}})
-        }else if(this.operateType===2){
-          //关闭订单
-          this.closeOrder.orderIds=[];
-          for(let i=0;i<this.multipleSelection.length;i++){
-            this.closeOrder.orderIds.push(this.multipleSelection[i].id);
-          }
-          this.closeOrder.dialogVisible=true;
-        }else if(this.operateType===3){
-          //删除订单
-          let ids=[];
-          for(let i=0;i<this.multipleSelection.length;i++){
-            ids.push(this.multipleSelection[i].id);
-          }
-          this.deleteOrder(ids);
         }
-      },
-      handleSizeChange(val){
+
+        // 根据 operateType 的值来区分不同的批量操作类型
+        if (this.operateType === 1) {
+            // 批量发货逻辑部分
+
+            // 创建一个空数组 list，用于存放整理好的可以发货的订单数据（经过 covertOrder 方法转换后的格式）。
+            let list = [];
+            // 遍历 multipleSelection 数组（即用户多选的订单数据集合），
+            for (let i = 0; i < this.multipleSelection.length; i++) {
+                // 对于每个订单，判断其 status 属性是否等于 1（代表处于待发货状态，符合发货条件），
+                if (this.multipleSelection[i].status === 1) {
+                    // 如果是，则调用 covertOrder 方法对该订单数据进行转换（整理出适合发货操作的数据格式）并添加到 list 数组中。
+                    list.push(this.covertOrder(this.multipleSelection[i]));
+                }
+            }
+            // 如果 list 数组最终长度为 0，说明没有符合发货条件的订单，
+            // 通过 $message 弹出提示消息告知用户，然后返回，不进行后续的路由跳转等操作。
+            if (list.length === 0) {
+                this.$message({
+                    message: '选中订单中没有可以发货的订单',
+                    type: 'warning',
+                    duration: 1000
+                });
+                return;
+            }
+            // 如果有符合条件的订单，通过 $router.push 进行路由跳转，跳转到 '/oms/deliverOrderList' 路径对应的页面，
+            // 并将 list 数组作为查询参数传递过去，以便在发货列表页面进行批量发货相关操作。
+            this.$router.push({path: '/oms/deliverOrderList', query: {list: list}})
+        } else if (this.operateType === 2) {
+            // 关闭订单逻辑部分
+
+            // 先清空 closeOrder.orderIds 数组，为存放要批量关闭的订单 id 做准备。
+            this.closeOrder.orderIds = [];
+            // 遍历 multipleSelection 数组，将每个订单的 id 依次添加到 closeOrder.orderIds 数组中，
+            for (let i = 0; i < this.multipleSelection.length; i++) {
+                this.closeOrder.orderIds.push(this.multipleSelection[i].id);
+            }
+            // 将 closeOrder.dialogVisible 属性设置为 true，显示关闭订单的对话框，
+            // 准备进行批量关闭订单的后续操作（比如填写备注等）。
+            this.closeOrder.dialogVisible = true;
+        } else if (this.operateType === 3) {
+            // 删除订单逻辑部分
+
+            // 创建一个空数组 ids，用于存放要批量删除订单的 id。
+            let ids = [];
+            // 遍历 multipleSelection 数组，把每个订单的 id 都添加到 ids 数组中。
+            for (let i = 0; i < this.multipleSelection.length; i++) {
+                ids.push(this.multipleSelection[i].id);
+            }
+            // 调用 deleteOrder 方法并传入 ids 数组，执行与后端交互的批量删除订单相关逻辑，
+            // 向服务器发送请求删除这些指定 id 的订单。
+            this.deleteOrder(ids);
+        }
+    },
+
+    // handleSizeChange 方法用于处理分页器每页显示数据条数改变的情况
+    handleSizeChange(val) {
+        // 绑定在分页器组件（例如 Element UI 的 el-pagination 组件）的 @size-change 事件上，
+        // 当用户通过分页器改变每页显示的数据条数时（val 就是新的每页显示条数）触发。
+        // 首先将 listQuery 对象中的 pageNum 属性重置为 1，因为改变每页条数后通常需要从第一页开始重新加载数据，
+        // 以展示符合新的每页条数设置的数据内容。
         this.listQuery.pageNum = 1;
+        // 将 listQuery 的 pageSize 属性更新为新的每页条数 val，使得后续获取数据时按照新的每页条数进行请求。
         this.listQuery.pageSize = val;
+        // 最后调用 getList 方法，向后端发起请求获取符合新的分页条件（新的每页条数和第一页）的订单列表数据，
+        // 用于更新页面上表格展示的数据。
         this.getList();
-      },
-      handleCurrentChange(val){
+    },
+
+    // handleCurrentChange 方法用于处理分页器当前页码改变的情况
+    handleCurrentChange(val) {
+        // 绑定在分页器的 @current-change 事件上，当用户切换当前页码（val 为新的页码值）时触发。
+        // 它会将 listQuery 对象中的 pageNum 属性更新为新的页码值 val，
+        // 然后调用 getList 方法，向后端请求获取对应页码的订单列表数据，使得页面上的表格能够展示出对应页码的订单信息，
+        // 实现分页查看订单列表的功能。
         this.listQuery.pageNum = val;
         this.getList();
-      },
-      handleCloseOrderConfirm() {
+    },
+
+    // handleCloseOrderConfirm 方法用于确认关闭订单操作
+    handleCloseOrderConfirm() {
+        // 首先检查 closeOrder.content 是否为空（即用户在关闭订单对话框中填写的操作备注是否为空），
+        // 如果为空，则通过 $message 弹出提示消息告知用户操作备注不能为空，然后返回，不执行后续操作，
+        // 因为关闭订单可能需要填写备注信息来说明关闭原因等情况，所以要确保备注有内容。
         if (this.closeOrder.content == null || this.closeOrder.content === '') {
-          this.$message({
-            message: '操作备注不能为空',
-            type: 'warning',
-            duration: 1000
-          });
-          return;
+            this.$message({
+                message: '操作备注不能为空',
+                type: 'warning',
+                duration: 1000
+            });
+            return;
         }
+
+        // 创建一个 URLSearchParams 对象 params，用于构建请求参数，它可以方便地将数据以键值对的形式组织起来，
+        // 适合在 HTTP 请求中传递参数给后端。
         let params = new URLSearchParams();
+        // 将 closeOrder.orderIds（要关闭的订单 id 数组）添加到 params 中，键为 'ids'，
+        // 这样后端可以通过获取这个参数来知晓需要关闭哪些订单。
         params.append('ids', this.closeOrder.orderIds);
+        // 将 closeOrder.content（操作备注内容）添加到 params 中，键为 'note'，把备注信息也传递给后端，
+        // 后端可以根据这些信息进行相应的业务处理（比如记录关闭原因等）。
         params.append('note', this.closeOrder.content);
-        closeOrder(params).then(response=>{
-          this.closeOrder.orderIds=[];
-          this.closeOrder.dialogVisible=false;
-          this.getList();
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-            duration: 1000
-          });
+
+        // 调用 closeOrder 函数（该函数应该是与后端 API 交互的方法，用于发送关闭订单的请求）并传入 params，
+        // 当请求成功后，在 then 回调函数中执行后续操作。
+        closeOrder(params).then(response => {
+            // 先清空 closeOrder.orderIds 数组，因为对应的订单已经关闭，不需要再保留这些 id 信息了。
+            this.closeOrder.orderIds = [];
+            // 将 closeOrder.dialogVisible 设置为 false，以关闭关闭订单的对话框，完成关闭订单的操作流程，界面恢复到初始状态。
+            this.closeOrder.dialogVisible = false;
+            // 调用 getList 方法重新获取订单列表数据，因为订单列表数据发生了变化（有订单被关闭了），需要更新展示，
+            // 使得页面上显示的订单信息能及时反映最新的后端数据情况。
+            this.getList();
+            // 通过 $message 弹出提示消息告知用户 '修改成功'，消息类型设置为 'success'，
+            // 一般这种类型的消息在页面上会以比较友好的样式（比如绿色背景等）展示给用户，让用户明确操作结果。
+            this.$message({
+                message: '修改成功',
+                type: 'success',
+                duration: 1000
+            });
         });
-      },
-      getList() {
+    },
+
+    // getList 方法用于获取订单列表数据
+    getList() {
+        // 将 listLoading 属性设置为 true，这通常用于控制页面上是否显示加载动画（例如在表格上方显示一个加载提示框等），
+        // 表示正在获取数据，给用户一个数据正在加载的视觉提示，提升用户体验。
         this.listLoading = true;
+        // 调用 fetchList 函数（应该是与后端 API 交互的方法，用于向服务器请求订单列表数据，传递的参数是 listQuery，
+        // 即包含了当前的筛选条件、页码、每页数据量等信息），当 fetchList 请求成功后，会执行 then 回调函数中的代码逻辑。
         fetchList(this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
+            // 将 listLoading 属性设置为 false，停止加载动画显示，表明数据获取完成。
+            this.listLoading = false;
+            // 从响应数据（response.data）中提取出订单列表数据赋值给 list 属性，
+            // 用于在页面的表格中展示订单信息，使得用户可以看到获取到的订单详情。
+            this.list = response.data.list;
+            // 同时提取出数据的总条数赋值给 total 属性，总条数可用于分页器等组件展示相关信息（如显示总共有多少条数据、共多少页等），
+            // 辅助实现分页功能以及让用户对数据总量有直观了解。
+            this.total = response.data.total;
         });
-      },
-      deleteOrder(ids){
-        this.$confirm('是否要进行该删除操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let params = new URLSearchParams();
-          params.append("ids",ids);
-          deleteOrder(params).then(response=>{
+    }
+}
+
+
+
+// deleteOrder 方法用于处理删除订单的操作，接收一个包含要删除订单的 id 数组作为参数（ids）
+deleteOrder(ids) {
+    // 使用 $confirm 方法弹出一个确认对话框，向用户询问是否要进行删除操作。
+    // 对话框中显示的提示信息为 '是否要进行该删除操作?'，标题为 '提示'。
+    // 同时配置了对话框的按钮文本，确认按钮显示为 '确定'，取消按钮显示为 '取消'，并且将对话框的类型设置为 'warning'，
+    // 通常这种类型的对话框会以比较醒目的样式（如颜色等方面）展示，用于提醒用户此操作的重要性，因为删除操作一般是不可逆的。
+    this.$confirm('是否要进行该删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 创建一个 URLSearchParams 对象，用于构建要发送给后端的请求参数。
+        // URLSearchParams 常用于将数据以键值对的形式进行组织，方便在 HTTP 请求中传递参数。
+        let params = new URLSearchParams();
+        // 将传入的 ids 数组（包含要删除订单的 id）添加到 params 对象中，键为 'ids'，
+        // 这样后端可以通过获取这个参数来知晓需要删除哪些订单，符合常见的接口参数传递规范。
+        params.append("ids", ids);
+
+        // 调用名为 deleteOrder 的函数（此处应该是与后端 API 进行交互的方法，用于向服务器发送删除订单的请求），并传入构建好的参数 params。
+        // 当后端成功处理删除请求并返回响应后，会执行 then 回调函数中的代码逻辑。
+        deleteOrder(params).then(response => {
+            // 通过 $message 方法弹出一个提示消息，告知用户 '删除成功！'，消息类型设置为 'success'，
+            // 一般这种类型的消息在页面上会以比较友好的样式（比如绿色背景等）展示给用户，让用户明确操作结果。
+            // 并且设置消息显示的时长为 1000 毫秒（即 1 秒），之后消息会自动消失。
             this.$message({
-              message: '删除成功！',
-              type: 'success',
-              duration: 1000
+                message: '删除成功！',
+                type: 'success',
+                duration: 1000
             });
+            // 调用 getList 方法，该方法用于重新获取订单列表数据。
+            // 因为执行了删除订单操作后，订单列表的数据已经发生了变化，所以需要重新获取最新的订单列表数据，
+            // 以便页面上展示的订单信息能及时更新，保持与后端数据的一致性。
             this.getList();
-          });
-        })
-      },
-      covertOrder(order){
-        let address=order.receiverProvince+order.receiverCity+order.receiverRegion+order.receiverDetailAddress;
-        let listItem={
-          orderId:order.id,
-          orderSn:order.orderSn,
-          receiverName:order.receiverName,
-          receiverPhone:order.receiverPhone,
-          receiverPostCode:order.receiverPostCode,
-          address:address,
-          deliveryCompany:null,
-          deliverySn:null
-        };
-        return listItem;
-      }
+        });
+    })
+}
+
+// covertOrder 方法用于将原始的订单数据对象进行格式转换，整理出符合特定业务需求（比如可能用于发货等操作场景）的数据格式
+covertOrder(order) {
+    // 将订单对象中的省、市、区以及详细地址字段拼接起来，组成一个完整的收货地址字符串。
+    // 这样做可能是为了在后续的业务处理中更方便地使用完整的收货地址信息，例如传递给物流相关模块等。
+    let address = order.receiverProvince + order.receiverCity + order.receiverRegion + order.receiverDetailAddress;
+
+    // 创建一个新的对象 listItem，用于存放整理后的订单相关信息，这些信息将以一种更规范、更符合后续业务操作需求的格式存在。
+    let listItem = {
+        // 从原始订单数据对象中获取订单的唯一标识符（id），赋值给 listItem 的 orderId 属性，方便后续通过该标识对订单进行区分和操作。
+        orderId: order.id,
+        // 获取原始订单的编号，赋值给 listItem 的 orderSn 属性，订单编号在很多业务场景（如查询、跟踪等）中都具有重要作用。
+        orderSn: order.orderSn,
+        // 获取原始订单中收件人的姓名，赋值给 listItem 的 receiverName 属性，用于明确收件人信息。
+        receiverName: order.receiverName,
+        // 获取原始订单中收件人的电话号码，赋值给 listItem 的 receiverPhone 属性，方便联系收件人等业务操作（比如物流配送时联系收件人）。
+        receiverPhone: order.receiverPhone,
+        // 获取原始订单中收件人地址的邮政编码，赋值给 listItem 的 receiverPostCode 属性，邮政编码也是收货地址信息的一部分，在物流等场景可能会用到。
+        receiverPostCode: order.receiverPostCode,
+        // 将前面拼接好的完整收货地址赋值给 listItem 的 address 属性，使得整理后的订单数据中包含完整且方便使用的收货地址信息。
+        address: address,
+        // 初始化发货公司相关信息为 null，可能表示当前还未确定发货公司或者该信息有待后续填充，具体取决于业务流程中何时设置这个值。
+        deliveryCompany: null,
+        // 初始化发货单号相关信息为 null，同样可能是因为在这个阶段还没有生成发货单号，后续在实际发货等操作时会更新这个值。
+        deliverySn: null
+    };
+
+    // 返回整理好格式的 listItem 对象，以便在调用该方法的地方可以获取到转换后符合要求的订单数据，用于进一步的业务处理（比如传递给其他模块进行发货操作等）。
+    return listItem;
+}
+
+
     }
-  }
+  
 </script>
+
+
+
+
+
 <style scoped>
   .input-width {
     width: 203px;
diff --git a/src/views/oms/order/orderDetail.vue b/src/views/oms/order/orderDetail.vue
index c857042..f9032b6 100644
--- a/src/views/oms/order/orderDetail.vue
+++ b/src/views/oms/order/orderDetail.vue
@@ -9,215 +9,302 @@
         <el-step title="完成评价" :description="formatTime(order.commentTime)"></el-step>
       </el-steps>
     </div>
-    <el-card shadow="never" style="margin-top: 15px">
-      <div class="operate-container">
+
+
+<el-card shadow="never" style="margin-top: 15px">
+    <!-- el-card 组件用于创建一个卡片式的布局区域，设置阴影为 "never" 表示无阴影效果，同时设置顶部外边距为 15px，使卡片在页面中有一定的间隔 -->
+    <div class="operate-container">
+        <!-- 这是一个操作按钮的容器 div，用于放置与订单操作相关的各种按钮 -->
         <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
+        <!-- 展示一个危险提示图标（el-icon-warning），并通过设置类名 "color-danger" 使其呈现出特定的危险提示颜色（通常为红色相关色系），同时设置左边距为 20px，用于引起用户对订单状态相关内容的关注 -->
         <span class="color-danger">当前订单状态：{{order.status | formatStatus}}</span>
-        <div class="operate-button-container" v-show="order.status===0">
-          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
-          <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
-          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
-          <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
-          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+        <!-- 展示当前订单状态，使用了名为 "formatStatus" 的过滤器（应该是在 Vue 实例的 filters 选项中定义的）对 "order.status" 进行格式化处理，将原始的状态值转换为更友好、易读的文字描述形式展示给用户 -->
+
+        <!-- 根据订单不同状态展示不同操作按钮的逻辑，以下是订单状态为 0 时的操作按钮区域 -->
+        <div class="operate-button-container" v-show="order.status === 0">
+            <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
+            <!-- "修改收货人信息" 按钮，尺寸设置为 "mini"（小型按钮），通过 @click 绑定 "showUpdateReceiverDialog" 方法（应该在 Vue 实例的 methods 中定义），点击该按钮会触发相应方法，用于打开修改收货人信息的对话框 -->
+            <el-button size="mini" @click="showUpdateMoneyDialog">修改费用信息</el-button>
+            <!-- "修改费用信息" 按钮，同样为小型按钮，点击触发 "showUpdateMoneyDialog" 方法，用于打开修改费用相关信息的对话框 -->
+            <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+            <!-- "发送站内信" 按钮，点击后触发 "showMessageDialog" 方法，打开用于编写并发送站内信的对话框 -->
+            <el-button size="mini" @click="showCloseOrderDialog">关闭订单</el-button>
+            <!-- "关闭订单" 按钮，点击触发 "showCloseOrderDialog" 方法，打开关闭订单相关操作的对话框 -->
+            <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+            <!-- "备注订单" 按钮，点击触发 "showMarkOrderDialog" 方法，打开用于给订单添加备注信息的对话框 -->
         </div>
-        <div class="operate-button-container" v-show="order.status===1">
-          <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
-          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
-          <el-button size="mini">取消订单</el-button>
-          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+
+        <!-- 订单状态为 1 时的操作按钮区域 -->
+        <div class="operate-button-container" v-show="order.status === 1">
+            <el-button size="mini" @click="showUpdateReceiverDialog">修改收货人信息</el-button>
+            <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+            <el-button size="mini">取消订单</el-button>
+            <!-- "取消订单" 按钮，尺寸为 "mini"，此处未明确绑定点击事件对应的方法（可能在对应的 Vue 实例 methods 中补充完整，或者点击直接执行默认的取消订单逻辑） -->
+            <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
         </div>
-        <div class="operate-button-container" v-show="order.status===2||order.status===3">
-          <el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
-          <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
-          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+
+        <!-- 订单状态为 2 或者 3 时的操作按钮区域 -->
+        <div class="operate-button-container" v-show="order.status === 2 || order.status === 3">
+            <el-button size="mini" @click="showLogisticsDialog">订单跟踪</el-button>
+            <!-- "订单跟踪" 按钮，点击触发 "showLogisticsDialog" 方法，打开用于查看订单物流信息、跟踪物流状态的对话框 -->
+            <el-button size="mini" @click="showMessageDialog">发送站内信</el-button>
+            <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
         </div>
-        <div class="operate-button-container" v-show="order.status===4">
-          <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
-          <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
+
+        <!-- 订单状态为 4 时的操作按钮区域 -->
+        <div class="operate-button-container" v-show="order.status === 4">
+            <el-button size="mini" @click="handleDeleteOrder">删除订单</el-button>
+            <!-- "删除订单" 按钮，点击触发 "handleDeleteOrder" 方法（在 Vue 实例 methods 中定义），执行删除当前订单的相关逻辑 -->
+            <el-button size="mini" @click="showMarkOrderDialog">备注订单</el-button>
         </div>
-      </div>
-      <div style="margin-top: 20px">
+    </div>
+
+    <div style="margin-top: 20px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">基本信息</span>
-      </div>
-      <div class="table-layout">
+    </div>
+    <!-- 展示一个标题区域，使用 svg-icon 组件展示一个图标（图标类名为 "marker"），并设置图标颜色为 #606266，同时展示文字 "基本信息"，用于提示下方即将展示的是订单的基本信息内容 -->
+
+    <div class="table-layout">
+        <!-- 创建一个类名为 "table-layout" 的 div，用于构建类似表格形式的布局，方便展示订单基本信息的各个字段 -->
         <el-row>
-          <el-col :span="4" class="table-cell-title">订单编号</el-col>
-          <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
-          <el-col :span="4" class="table-cell-title">用户账号</el-col>
-          <el-col :span="4" class="table-cell-title">支付方式</el-col>
-          <el-col :span="4" class="table-cell-title">订单来源</el-col>
-          <el-col :span="4" class="table-cell-title">订单类型</el-col>
+            <!-- el-row 组件用于创建一行布局，在这个表格布局中用于放置各个列（el-col）组件 -->
+            <el-col :span="4" class="table-cell-title">订单编号</el-col>
+            <!-- el-col 组件用于定义列，设置 :span 属性为 4，表示该列占整行宽度的 1/6（假设一行总分为 24 份，span 为 4 即占 4/24），同时设置类名 "table-cell-title" 用于样式上区分标题列，此处展示 "订单编号" 标题 -->
+            <el-col :span="4" class="table-cell-title">发货单流水号</el-col>
+            <el-col :span="4" class="table-cell-title">用户账号</el-col>
+            <el-col :span="4" class="table-cell-title">支付方式</el-col>
+            <el-col :span="4" class="table-cell-title">订单来源</el-col>
+            <el-col :span="4" class="table-cell-title">订单类型</el-col>
         </el-row>
         <el-row>
-          <el-col :span="4" class="table-cell">{{order.orderSn}}</el-col>
-          <el-col :span="4" class="table-cell">暂无</el-col>
-          <el-col :span="4" class="table-cell">{{order.memberUsername}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.payType | formatPayType}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.sourceType | formatSourceType}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.orderType | formatOrderType}}</el-col>
+            <el-col :span="4" class="table-cell">{{order.orderSn}}</el-col>
+            <!-- 对应 "订单编号" 列展示具体的订单编号值，通过双花括号绑定 "order.orderSn" 变量来显示订单编号信息 -->
+            <el-col :span="4" class="table-cell">暂无</el-col>
+            <el-col :span="4" class="table-cell">{{order.memberUsername}}</el-col>
+            <el-col :span="4" class="table-cell">{{order.payType | formatPayType}}</el-col>
+            <!-- 对于 "支付方式" 列，使用名为 "formatPayType" 的过滤器对 "order.payType" 进行格式化，将可能是数字等原始格式的支付方式表示转换为如 "支付宝"、"微信" 等更直观的文字描述形式展示 -->
+            <el-col :span="4" class="table-cell">{{order.sourceType | formatSourceType}}</el-col>
+            <!-- 对 "订单来源" 列，使用 "formatSourceType" 过滤器将 "order.sourceType" 转换为易懂的文字形式（比如 "APP 订单"、"PC 订单" 等）进行展示 -->
+            <el-col :span="4" class="table-cell">{{order.orderType | formatOrderType}}</el-col>
+            <!-- 对 "订单类型" 列，使用 "formatOrderType" 过滤器（同样需在 filters 中定义）对 "order.orderType" 进行格式化展示 -->
         </el-row>
         <el-row>
-          <el-col :span="4" class="table-cell-title">配送方式</el-col>
-          <el-col :span="4" class="table-cell-title">物流单号</el-col>
-          <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
-          <el-col :span="4" class="table-cell-title">订单可得优币</el-col>
-          <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
-          <el-col :span="4" class="table-cell-title">活动信息</el-col>
+            <el-col :span="4" class="table-cell-title">配送方式</el-col>
+            <el-col :span="4" class="table-cell-title">物流单号</el-col>
+            <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>
+            <el-col :span="4" class="table-cell-title">订单可得优币</el-col>
+            <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>
+            <el-col :span="4" class="table-cell-title">活动信息</el-col>
         </el-row>
         <el-row>
-          <el-col :span="4" class="table-cell">{{order.deliveryCompany | formatNull}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.deliverySn | formatNull}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.autoConfirmDay}}天</el-col>
-          <el-col :span="4" class="table-cell">{{order.integration}}</el-col>
-          <el-col :span="4" class="table-cell">{{order.growth}}</el-col>
-          <el-col :span="4" class="table-cell">
-            <el-popover
-              placement="top-start"
-              title="活动信息"
-              width="200"
-              trigger="hover"
-              :content="order.promotionInfo">
-              <span slot="reference">{{order.promotionInfo | formatLongText}}</span>
-            </el-popover>
-          </el-col>
+            <el-col :span="4" class="table-cell">{{order.deliveryCompany | formatNull}}</el-col>
+            <!-- 对 "配送方式" 列，使用 "formatNull" 过滤器（可能用于处理空值等情况，将空值转换为合适的显示内容）对 "order.deliveryCompany" 进行处理后展示 -->
+            <el-col :span="4" class="table-cell">{{order.deliverySn | formatNull}}</el-col>
+            <el-col :span="4" class="table-cell">{{order.autoConfirmDay}}天</el-col>
+            <el-col :span="4" class="table-cell">{{order.integration}}</el-col>
+            <el-col :span="4" class="table-cell">{{order.growth}}</el-col>
+            <el-col :span="4" class="table-cell">
+                <el-popover
+                        placement="top-start"
+                        title="活动信息"
+                        width="200"
+                        trigger="hover"
+                        :content="order.promotionInfo">
+                    <!-- 使用 el-popover 组件创建一个弹出框，设置弹出位置为 "top-start"（左上角弹出），标题为 "活动信息"，宽度为 200px，触发方式为 "hover"（鼠标悬停时触发），通过 :content 绑定 "order.promotionInfo" 属性来设置弹出框显示的具体活动信息内容 -->
+                    <span slot="reference">{{order.promotionInfo | formatLongText}}</span>
+                    <!-- 在弹出框的触发区域（slot="reference"）展示活动信息内容，同时使用 "formatLongText" 过滤器（可能用于处理较长文本的展示格式等情况）对 "order.promotionInfo" 进行格式化处理后展示 -->
+                </el-popover>
+            </el-col>
         </el-row>
-      </div>
-      <div style="margin-top: 20px">
+    </div>
+
+    <div style="margin-top: 20px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">收货人信息</span>
-      </div>
-      <div class="table-layout">
+    </div>
+    <!-- 再次展示一个标题区域，提示下方即将展示的是订单的收货人信息内容，同样使用 svg-icon 组件展示图标并设置颜色 -->
+
+    <div class="table-layout">
         <el-row>
-          <el-col :span="6" class="table-cell-title">收货人</el-col>
-          <el-col :span="6" class="table-cell-title">手机号码</el-col>
-          <el-col :span="6" class="table-cell-title">邮政编码</el-col>
-          <el-col :span="6" class="table-cell-title">收货地址</el-col>
+            <el-col :span="6" class="table-cell-title">收货人</el-col>
+            <el-col :span="6" class="table-cell-title">手机号码</el-col>
+            <el-col :span="6" class="table-cell-title">邮政编码</el-col>
+            <el-col :span="6" class="table-cell-title">收货地址</el-col>
         </el-row>
         <el-row>
-          <el-col :span="6" class="table-cell">{{order.receiverName}}</el-col>
-          <el-col :span="6" class="table-cell">{{order.receiverPhone}}</el-col>
-          <el-col :span="6" class="table-cell">{{order.receiverPostCode}}</el-col>
-          <el-col :span="6" class="table-cell">{{order | formatAddress}}</el-col>
+            <el-col :span="6" class="table-cell">{{order.receiverName}}</el-col>
+            <el-col :span="6" class="table-cell">{{order.receiverPhone}}</el-col>
+            <el-col :span="6" class="table-cell">{{order.receiverPostCode}}</el-col>
+            <el-col :span="6" class="table-cell">{{order | formatAddress}}</el-col>
+            <!-- 对于 "收货地址" 列，使用 "formatAddress" 过滤器（在 filters 中定义）对整个 "order" 对象进行处理，提取并拼接相关地址信息后展示完整的收货地址 -->
         </el-row>
-      </div>
-      <div style="margin-top: 20px">
+    </div>
+
+    <div style="margin-top: 20px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">商品信息</span>
-      </div>
-      <el-table
-        ref="orderItemTable"
-        :data="order.orderItemList"
-        style="width: 100%;margin-top: 20px" border>
+    </div>
+    <!-- 展示标题区域，提示下方是订单包含的商品信息内容 -->
+
+    <el-table
+            ref="orderItemTable"
+            :data="order.orderItemList"
+            style="width: 100%;margin-top: 20px" border>
+        <!-- 使用 el-table 组件展示商品信息列表，设置 ref 属性为 "orderItemTable"（方便后续在 Vue 实例中通过 $refs 访问该表格组件），通过 :data 绑定 "order.orderItemList" 作为表格数据来源（即订单中包含的各个商品项信息列表），设置表格宽度为 100%，顶部外边距为 20px，并且显示边框 -->
         <el-table-column label="商品图片" width="120" align="center">
-          <template slot-scope="scope">
-            <img :src="scope.row.productPic" style="height: 80px">
-          </template>
+            <!-- 定义表格列，设置标签（label）为 "商品图片"，列宽度为 120px，内容居中显示（align="center"） -->
+            <template slot-scope="scope">
+                <!-- 通过 slot-scope 获取每行数据对应的作用域对象（scope），从其中的 row 对象（代表当前行数据）中获取 "productPic" 属性来展示商品图片，设置图片高度为 80px -->
+                <img :src="scope.row.productPic" style="height: 80px">
+            </template>
         </el-table-column>
         <el-table-column label="商品名称" align="center">
-          <template slot-scope="scope">
-            <p>{{scope.row.productName}}</p>
-            <p>品牌：{{scope.row.productBrand}}</p>
-          </template>
+            <template slot-scope="scope">
+                <p>{{scope.row.productName}}</p>
+                <p>品牌：{{scope.row.productBrand}}</p>
+                <!-- 在该列中展示商品名称以及商品品牌信息，通过双花括号分别绑定 "scope.row.productName" 和 "scope.row.productBrand" 来显示具体内容 -->
+            </template>
         </el-table-column>
         <el-table-column label="价格/货号" width="120" align="center">
-          <template slot-scope="scope">
-            <p>价格：￥{{scope.row.productPrice}}</p>
-            <p>货号：{{scope.row.productSn}}</p>
-          </template>
+            <template slot-scope="scope">
+                <p>价格：￥{{scope.row.productPrice}}</p>
+                <p>货号：{{scope.row.productSn}}</p>
+                <!-- 展示商品的价格（格式化为带人民币符号 "￥" 的形式）和货号信息，分别绑定对应的行数据属性 -->
+            </template>
         </el-table-column>
         <el-table-column label="属性" width="120" align="center">
-          <template slot-scope="scope">
-            {{scope.row.productAttr | formatProductAttr}}
-          </template>
+            <template slot-scope="scope">
+                {{scope.row.productAttr | formatProductAttr}}
+                <!-- 对商品属性列，使用 "formatProductAttr" 过滤器对 "scope.row.productAttr" 进行格式化处理后展示商品的属性信息 -->
+            </template>
         </el-table-column>
         <el-table-column label="数量" width="120" align="center">
-          <template slot-scope="scope">
-            {{scope.row.productQuantity}}
-          </template>
+            <template slot-scope="scope">
+                {{scope.row.productQuantity}}
+                <!-- 展示商品的数量信息，直接绑定对应的行数据属性 -->
+            </template>
         </el-table-column>
         <el-table-column label="小计" width="120" align="center">
-          <template slot-scope="scope">
-            ￥{{scope.row.productPrice*scope.row.productQuantity}}
-          </template>
+            <template slot-scope="scope">
+                ￥{{scope.row.productPrice * scope.row.productQuantity}}
+                <!-- 计算并展示商品的小计金额，通过将商品价格（scope.row.productPrice）与数量（scope.row.productQuantity）相乘得到小计金额，并格式化为带人民币符号的形式展示 -->
+            </template>
         </el-table-column>
-      </el-table>
-      <div style="float: right;margin: 20px">
+    </el-table>
+
+    <div style="float: right;margin: 20px">
         合计：<span class="color-danger">￥{{order.totalAmount}}</span>
-      </div>
-      <div style="margin-top: 60px">
+    </div>
+    <!-- 在页面右侧通过浮动布局（float: right）展示订单商品的合计金额，设置外边距为 20px，并通过类名 "color-danger" 使金额文字呈现突出显示的颜色（通常为红色相关色系），金额值绑定 "order.totalAmount" 变量来显示 -->
+
+    <div style="margin-top: 60px">
         <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
         <span class="font-small">费用信息</span>
-      </div>
-      <div class="table-layout">
-        <el-row>
-          <el-col :span="6" class="table-cell-title">商品合计</el-col>
-          <el-col :span="6" class="table-cell-title">运费</el-col>
-          <el-col :span="6" class="table-cell-title">优惠券</el-col>
-          <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
-          <el-col :span="6" class="table-cell">￥{{order.freightAmount}}</el-col>
-          <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
-          <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell-title">活动优惠</el-col>
-          <el-col :span="6" class="table-cell-title">折扣金额</el-col>
-          <el-col :span="6" class="table-cell-title">订单总金额</el-col>
-          <el-col :span="6" class="table-cell-title">应付款金额</el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
-          <el-col :span="6" class="table-cell">-￥{{order.discountAmount}}</el-col>
-          <el-col :span="6" class="table-cell">
-            <span class="color-danger">￥{{order.totalAmount+order.freightAmount}}</span>
-          </el-col>
-          <el-col :span="6" class="table-cell">
-            <span class="color-danger">￥{{order.payAmount+order.freightAmount-order.discountAmount}}</span>
-          </el-col>
-        </el-row>
-      </div>
-      <div style="margin-top: 20px">
-        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
-        <span class="font-small">操作信息</span>
-      </div>
-      <el-table style="margin-top: 20px;width: 100%"
-                ref="orderHistoryTable"
-                :data="order.historyList" border>
-        <el-table-column label="操作者"  width="120" align="center">
-          <template slot-scope="scope">
+    </div>
+    <!-- 展示标题区域，提示下方即将展示的是订单的费用信息相关内容 -->
+
+
+
+ <div class="table-layout">
+    <!-- 创建一个类名为 "table-layout" 的 div 容器，用于构建类似表格形式的布局，方便展示订单相关费用信息的各个字段 -->
+    <el-row>
+        <!-- el-row 组件用于创建一行布局，在这个表格布局中用于放置各个列（el-col）组件 -->
+        <el-col :span="6" class="table-cell-title">商品合计</el-col>
+        <!-- el-col 组件用于定义列，设置 :span 属性为 6，表示该列占整行宽度的 1/4（假设一行总分为 24 份，span 为 6 即占 6/24），同时设置类名 "table-cell-title" 用于样式上区分标题列，此处展示 "商品合计" 标题，用于提示下方对应列展示的是商品金额总计相关信息 -->
+        <el-col :span="6" class="table-cell-title">运费</el-col>
+        <el-col :span="6" class="table-cell-title">优惠券</el-col>
+        <el-col :span="6" class="table-cell-title">积分抵扣</el-col>
+    </el-row>
+    <el-row>
+        <el-col :span="6" class="table-cell">￥{{order.totalAmount}}</el-col>
+        <!-- 对应 "商品合计" 列展示具体的商品总金额数值，通过双花括号绑定 "order.totalAmount" 变量来显示订单中商品金额总计信息，并且格式化为带有人民币符号 "￥" 的形式展示 -->
+        <el-col :span="6" class="table-cell">￥{{order.freightAmount}}</el-col>
+        <!-- 对应 "运费" 列展示运费金额数值，绑定 "order.freightAmount" 变量并添加人民币符号展示具体运费金额 -->
+        <el-col :span="6" class="table-cell">-￥{{order.couponAmount}}</el-col>
+        <!-- 对应 "优惠券" 列展示优惠券抵扣的金额数值，由于是抵扣金额，所以前面添加负号表示扣除，绑定 "order.couponAmount" 变量展示具体抵扣金额数值 -->
+        <el-col :span="6" class="table-cell">-￥{{order.integrationAmount}}</el-col>
+        <!-- 对应 "积分抵扣" 列展示积分抵扣的金额数值，同样添加负号表示扣除，通过绑定 "order.integrationAmount" 变量展示具体积分抵扣的金额数 -->
+    </el-row>
+    <el-row>
+        <el-col :span="6" class="table-cell-title">活动优惠</el-col>
+        <el-col :span="6" class="table-cell-title">折扣金额</el-col>
+        <el-col :span="6" class="table-cell-title">订单总金额</el-col>
+        <el-col :span="6" class="table-cell-title">应付款金额</el-col>
+    </el-row>
+    <el-row>
+        <el-col :span="6" class="table-cell">-￥{{order.promotionAmount}}</el-col>
+        <!-- 对应 "活动优惠" 列展示活动优惠的金额数值，添加负号表示扣除，绑定 "order.promotionAmount" 变量展示具体活动优惠的金额数 -->
+        <el-col :span="6" class="table-cell">-￥{{order.discountAmount}}</el-col>
+        <!-- 对应 "折扣金额" 列展示折扣相关的金额数值，添加负号表示扣除，绑定 "order.discountAmount" 变量展示具体折扣金额数值 -->
+        <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.totalAmount + order.freightAmount}}</span>
+            <!-- 对应 "订单总金额" 列计算并展示订单的总金额，其数值是商品合计金额（order.totalAmount）与运费（order.freightAmount）相加得到，使用双花括号进行计算并展示，同时通过类名 "color-danger" 使该金额文字呈现突出显示的颜色（通常为红色相关色系），以便用户更直观地看到重要金额数据 -->
+        </el-col>
+        <el-col :span="6" class="table-cell">
+            <span class="color-danger">￥{{order.payAmount + order.freightAmount - order.discountAmount}}</span>
+            <!-- 对应 "应付款金额" 列计算并展示订单最终的应付款金额，其计算逻辑是原本应付款金额（order.payAmount）加上运费（order.freightAmount）再减去折扣金额（order.discountAmount），同样通过双花括号进行计算并展示，使用 "color-danger" 类名突出显示该金额文字 -->
+        </el-col>
+    </el-row>
+</div>
+
+
+
+
+
+<div style="margin-top: 20px">
+    <!-- 设置一个顶部外边距为20px的div容器，用于在页面布局上与上方内容隔开一定距离 -->
+    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+    <!-- 使用svg-icon组件展示一个图标，其图标类名为"marker"，并通过style属性将图标颜色设置为#606266，用于起到一定的标识作用 -->
+    <span class="font-small">操作信息</span>
+    <!-- 展示一段文字"操作信息"，并且通过设置类名"font-small"，可能是将文字字体设置为较小字号，以此提示下方要展示的是订单相关操作信息的内容 -->
+</div>
+<el-table style="margin-top: 20px;width: 100%"
+          ref="orderHistoryTable"
+          :data="order.historyList" border>
+    <!-- 使用el-table组件来展示一个表格，设置顶部外边距为20px，宽度为100%（即占满父容器宽度），并添加了ref属性值为"orderHistoryTable"（方便后续在Vue实例中通过$refs来获取这个表格组件实例，进行一些额外的操作，比如调用组件的方法、获取组件状态等），同时通过:data绑定了"order.historyList"，意味着表格的数据来源是订单对象中的历史记录列表数据，并且设置表格显示边框 -->
+    <el-table-column label="操作者"  width="120" align="center">
+        <!-- 定义表格中的一列，设置该列的表头标签（label）为"操作者"，宽度为120px，内容在单元格中居中显示（align="center"） -->
+        <template slot-scope="scope">
+            <!-- 通过slot-scope定义一个作用域插槽，获取当前行数据对应的作用域对象scope，从其中的row对象（代表当前行的具体数据对象）里获取operateMan属性值，用于展示操作该订单的人员相关信息 -->
             {{scope.row.operateMan}}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作时间"  width="160" align="center">
-          <template slot-scope="scope">
+        </template>
+    </el-table-column>
+    <el-table-column label="操作时间"  width="160" align="center">
+        <template slot-scope="scope">
             {{formatTime(scope.row.createTime)}}
-          </template>
-        </el-table-column>
-        <el-table-column label="订单状态"  width="120" align="center">
-          <template slot-scope="scope">
+            <!-- 同样通过作用域插槽获取当前行数据，使用名为"formatTime"的过滤器（应该是在Vue实例的filters选项中定义的）对当前行数据中的createTime属性（代表操作发生的时间）进行格式化处理，将原始的时间数据格式转换为更易读、友好的展示形式，比如将时间戳转换为"yyyy-MM-dd HH:mm:ss"这样的常见日期时间格式展示给用户 -->
+        </template>
+    </el-table-column>
+    <el-table-column label="订单状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="付款状态"  width="120" align="center">
-          <template slot-scope="scope">
+            <!-- 利用作用域插槽获取当前行数据，使用名为"formatStatus"的过滤器对当前行数据中的orderStatus属性（代表订单当时所处的状态）进行格式化，将可能是数字、代码等形式的状态表示转换为直观易懂的文字描述，例如将数字1转换为"已支付"等类似友好的文字状态展示给用户 -->
+        </template>
+    </el-table-column>
+    <el-table-column label="付款状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatPayStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="发货状态"  width="120" align="center">
-          <template slot-scope="scope">
+            <!-- 通过作用域插槽获取当前行数据，使用名为"formatPayStatus"的过滤器对当前行数据中的orderStatus属性进行处理，将其转换为关于付款情况的清晰文字描述，比如将对应状态码转换为"已付款"、"未付款"等便于用户理解的付款状态表述 -->
+        </template>
+    </el-table-column>
+    <el-table-column label="发货状态"  width="120" align="center">
+        <template slot-scope="scope">
             {{scope.row.orderStatus | formatDeliverStatus}}
-          </template>
-        </el-table-column>
-        <el-table-column label="备注" align="center">
-          <template slot-scope="scope">
+            <!-- 借助作用域插槽获取当前行数据，使用名为"formatDeliverStatus"的过滤器对当前行数据中的orderStatus属性进行格式化，将其转变为能够直观体现发货情况的文字描述，例如转换为"已发货"、"未发货"等发货状态相关的表述展示给用户 -->
+        </template>
+    </el-table-column>
+    <el-table-column label="备注" align="center">
+        <template slot-scope="scope">
             {{scope.row.note}}
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
+            <!-- 通过作用域插槽拿到当前行数据，直接展示当前行数据中的note属性值，用于显示该次操作对应的备注信息内容，方便用户了解每次操作的一些额外说明情况 -->
+        </template>
+    </el-table-column>
+</el-table>
+</el-card>
+
+
+
     <el-dialog title="修改收货人信息"
                :visible.sync="receiverDialogVisible"
                width="40%">
@@ -251,6 +338,10 @@
       <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
       </span>
     </el-dialog>
+
+
+
+
     <el-dialog title="修改费用信息"
                :visible.sync="moneyDialogVisible"
                width="40%">
@@ -345,186 +436,350 @@
     <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
   </div>
 </template>
+
+
+
 <script>
-  import {getOrderDetail,updateReceiverInfo,updateMoneyInfo,closeOrder,updateOrderNote,deleteOrder} from '@/api/order';
-  import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
-  import {formatDate} from '@/utils/date';
-  import VDistpicker from 'v-distpicker';
-  const defaultReceiverInfo = {
-    orderId:null,
-    receiverName:null,
-    receiverPhone:null,
-    receiverPostCode:null,
-    receiverDetailAddress:null,
-    receiverProvince:null,
-    receiverCity:null,
-    receiverRegion:null,
-    status:null
-  };
-  export default {
+    // 从'@/api/order'模块中导入多个函数，这些函数大概率是用于与后端 API 进行交互，以实现和订单相关的各种操作。
+    // 例如，getOrderDetail 可能用于获取订单详细信息，updateReceiverInfo 用于更新收货人信息，updateMoneyInfo 用于更新费用相关信息，
+    // closeOrder 用于关闭订单，updateOrderNote 用于更新订单备注，deleteOrder 用于删除订单。
+    import {getOrderDetail, updateReceiverInfo, updateMoneyInfo, closeOrder, updateOrderNote, deleteOrder} from '@/api/order';
+
+    // 从'@/views/oms/order/components/logisticsDialog'路径导入 LogisticsDialog 组件，这个组件可能是用于展示订单物流相关信息的对话框组件，
+    // 后续可以在当前组件中使用该组件来实现物流信息展示等交互功能。
+    import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
+
+    // 从'@/utils/date'模块中导入 formatDate 函数，该函数通常用于对日期数据进行格式化处理，
+    // 比如将后端返回的时间戳格式数据转换为常见的年月日、时分秒等便于阅读的日期时间格式，方便在页面上展示给用户。
+    import {formatDate} from '@/utils/date';
+
+    // 导入 VDistpicker 组件，这个组件可能是一个用于选择地区（如省、市、区）的下拉选择器组件，
+    // 可以方便用户在修改收货人信息等场景下选择收货地址相关的区域信息。
+    import VDistpicker from 'v-distpicker';
+
+    // 定义一个名为 defaultReceiverInfo 的常量对象，它用于表示默认的收货人信息。
+    // 其中各个属性初始值都设置为 null，比如 orderId 可能用于关联对应的订单编号，receiverName 表示收货人姓名，receiverPhone 是收货人电话号码等，
+    // 后续可以基于这个默认对象结构去填充真实的收货人信息数据，或者在重置相关信息时恢复到这个初始状态。
+    const defaultReceiverInfo = {
+        orderId: null,
+        receiverName: null,
+        receiverPhone: null,
+        receiverPostCode: null,
+        receiverDetailAddress: null,
+        receiverProvince: null,
+        receiverCity: null,
+        receiverRegion: null,
+        status: null
+    };
+</script>
+
+  
+export default {
+    // 组件的名称，用于在 Vue 实例或其他组件中进行识别和引用，这里组件名为 'orderDetail'，方便后续例如在路由配置等场景中关联到这个具体的组件。
     name: 'orderDetail',
-    components: { VDistpicker, LogisticsDialog},
+
+    // components 选项用于注册在当前组件中要使用的子组件，这里注册了 VDistpicker 和 LogisticsDialog 两个组件。
+    // 意味着在这个组件的模板部分可以直接使用这两个组件标签来构建页面的交互元素，就像使用 Vue 内置的组件（如 el-button 等）一样方便。
+    components: { VDistpicker, LogisticsDialog },
+
+    // data 函数是 Vue 组件中用于定义组件内部数据的地方，返回的对象中的属性就是组件可以使用的数据变量，并且这些数据是响应式的，
+    // 即当它们的值发生改变时，与之绑定的 DOM 元素会自动更新（如果在模板中有绑定相关数据的话）。
     data() {
-      return {
-        id: null,
-        order: {},
-        receiverDialogVisible:false,
-        receiverInfo:Object.assign({},defaultReceiverInfo),
-        moneyDialogVisible:false,
-        moneyInfo:{orderId:null, freightAmount:0, discountAmount:0,status:null},
-        messageDialogVisible:false,
-        message: {title:null, content:null},
-        closeDialogVisible:false,
-        closeInfo:{note:null,id:null},
-        markOrderDialogVisible:false,
-        markInfo:{note:null},
-        logisticsDialogVisible:false
-      }
+        return {
+            // 用于存储订单的唯一标识符，初始值设置为 null，可能后续通过路由参数、接口返回等方式获取到具体订单的 id 值并赋值给它，
+            // 以便用于获取对应订单的详细信息等操作。
+            id: null,
+
+            // 用于存储订单的详细信息对象，初始时是一个空对象，后续通过调用相关接口（比如前面导入的 getOrderDetail 函数）获取到具体的订单数据后，
+            // 会将数据填充到这个对象中，然后在模板中通过绑定这个对象的各个属性来展示订单的详细内容（如订单编号、收货人信息、商品信息等）。
+            order: {},
+
+            // 用于控制修改收货人信息对话框的显示与隐藏，初始值为 false，表示对话框默认是隐藏状态，
+            // 当用户点击相关操作按钮（如在模板中绑定了点击事件触发显示该对话框的按钮）时，会将这个值设置为 true 来显示对话框，关闭对话框时再设置回 false。
+            receiverDialogVisible: false,
+
+            // 用于存储收货人信息相关的数据对象，通过 Object.assign({}, defaultReceiverInfo) 进行初始化，
+            // 这样它会拥有和 defaultReceiverInfo 相同的结构，并且初始值都是 null 或对应的默认值，后续在打开修改收货人信息对话框后，
+            // 用户输入或修改的值会更新到这个对象中，以便最后进行保存等操作时使用更新后的信息。
+            receiverInfo: Object.assign({}, defaultReceiverInfo),
+
+            // 用于控制修改费用信息对话框的显示与隐藏，初始值为 false，作用和 receiverDialogVisible 类似，控制对应对话框的显示状态。
+            moneyDialogVisible: false,
+
+            // 用于存储与费用信息相关的数据对象，包含了订单编号（orderId）、运费（freightAmount，初始值设为 0）、折扣金额（discountAmount，初始值设为 0）等属性，
+            // 同样在打开修改费用信息对话框后，用户修改的值会更新到这些属性上，方便后续将修改后的数据提交到后端进行保存等操作。
+            moneyInfo: {orderId: null, freightAmount: 0, discountAmount: 0, status: null},
+
+            // 用于控制发送站内信对话框的显示与隐藏，初始值为 false，控制相应对话框是否展示给用户操作。
+            messageDialogVisible: false,
+
+            // 用于存储站内信相关的信息对象，包含标题（title）和内容（content）两个属性，初始值都为 null，
+            // 用户在打开发送站内信对话框后，在输入框中输入的标题和内容会分别绑定到这两个属性上，之后可以通过相关方法将这些信息发送出去。
+            message: {title: null, content: null},
+
+            // 用于控制关闭订单对话框的显示与隐藏，初始值为 false，决定关闭订单相关对话框的展示与否。
+            closeDialogVisible: false,
+
+            // 用于存储关闭订单相关的信息对象，包含操作备注（note）和订单编号（id）两个属性，note 初始值为 null，
+            // 用户在关闭订单对话框中填写的备注信息会更新到 note 属性上，id 可能后续通过其他方式关联到要关闭的订单编号，用于提交关闭订单请求时传递必要信息。
+            closeInfo: {note: null, id: null},
+
+            // 用于控制备注订单对话框的显示与隐藏，初始值为 false，控制备注订单对话框的显示情况。
+            markOrderDialogVisible: false,
+
+            // 用于存储备注订单的信息对象，目前只包含操作备注（note）属性，初始值为 null，用户在备注订单对话框中输入的备注内容会赋值到这个属性上，
+            // 然后可以通过相关方法将备注信息更新到后端保存起来。
+            markInfo: {note: null},
+
+            // 用于控制物流信息对话框（由 LogisticsDialog 组件展示）的显示与隐藏，初始值为 false，当用户点击查看物流等相关操作按钮时，
+            // 会将这个值设置为 true 来显示物流信息对话框，展示订单的物流跟踪等相关内容。
+            logisticsDialogVisible: false
+        }
     },
+
+
+
     created() {
       this.id = this.list = this.$route.query.id;
       getOrderDetail(this.id).then(response => {
         this.order = response.data;
       });
     },
-    filters: {
-      formatNull(value) {
-        if(value===undefined||value===null||value===''){
-          return '暂无';
-        }else{
-          return value;
+
+
+
+ filters: {
+    // formatNull 过滤器
+    formatNull(value) {
+        // 判断传入的值（value）是否为 undefined（未定义）、null（空值）或者是空字符串，如果满足这些条件之一，
+        // 则返回 '暂无'，用于在页面展示时替代那些没有实际值的数据，给用户一个直观的提示。
+        if (value === undefined || value === null || value === '') {
+            return '暂无';
+        } else {
+            // 如果传入的值不符合上述空值的判断条件，就直接返回原传入的值，保持数据原样展示。
+            return value;
         }
-      },
-      formatLongText(value) {
-        if(value===undefined||value===null||value===''){
-          return '暂无';
-        }else if(value.length>8){
-          return value.substr(0, 8) + '...';
-        }else{
-          return value;
+    },
+
+    // formatLongText 过滤器
+    formatLongText(value) {
+        // 同样先判断传入的值是否为 undefined、null 或者是空字符串，如果是，则返回 '暂无'，用于在没有具体文本内容时展示合适提示信息。
+        if (value === undefined || value === null || value === '') {
+            return '暂无';
+        } else if (value.length > 8) {
+            // 如果传入的文本长度大于 8 个字符，就截取前 8 个字符，并在后面拼接上 '...'，实现文本的截断显示，
+            // 避免过长文本在页面上显示不美观或者占用过多空间，同时又能让用户大致了解文本的开头部分内容。
+            return value.substr(0, 8) + '...';
+        } else {
+            // 如果文本长度小于等于 8 个字符，直接返回原文本内容进行展示。
+            return value;
         }
-      },
-      formatPayType(value) {
+    },
+
+    // formatPayType 过滤器
+    formatPayType(value) {
+        // 根据传入的支付方式对应的值（value）进行判断，这里假设 1 代表支付宝支付方式，
+        // 如果传入值为 1，则返回 '支付宝'，将数字代码形式转换为直观的文字描述形式展示给用户。
         if (value === 1) {
-          return '支付宝';
+            return '支付宝';
         } else if (value === 2) {
-          return '微信';
+            // 假设 2 代表微信支付方式，若传入值为 2，则返回 '微信'，同样将代码转换为易读的文字表述。
+            return '微信';
         } else {
-          return '未支付';
+            // 如果传入的值不是 1 或 2，说明可能是其他未明确或者代表未支付的情况，返回 '未支付'，给用户一个清晰的支付状态提示。
+            return '未支付';
         }
-      },
-      formatSourceType(value) {
+    },
+
+    // formatSourceType 过滤器
+    formatSourceType(value) {
+        // 判断传入的订单来源对应的值（value），如果为 1，假设代表是来自 APP 端下的订单，
+        // 则返回 'APP订单'，将数字标识转换为有意义的文字描述，方便用户理解订单的来源渠道。
         if (value === 1) {
-          return 'APP订单';
+            return 'APP订单';
         } else {
-          return 'PC订单';
+            // 如果传入值不是 1，说明可能是其他来源（比如这里默认其他情况为 PC 端下的订单），返回 'PC订单'，以友好的文字形式展示订单来源信息。
+            return 'PC订单';
         }
-      },
-      formatOrderType(value) {
+    },
+
+    // formatOrderType 过滤器
+    formatOrderType(value) {
+        // 根据传入的订单类型对应的值（value）进行判断，若值为 1，假设代表是秒杀订单类型，
+        // 则返回 '秒杀订单'，将内部的订单类型代码转换为更易理解的文字表述展示给用户。
         if (value === 1) {
-          return '秒杀订单';
+            return '秒杀订单';
         } else {
-          return '正常订单';
+            // 如果不是 1，说明是其他常规的订单类型，返回 '正常订单'，让用户能清晰知晓订单所属的类型情况。
+            return '正常订单';
         }
-      },
-      formatAddress(order) {
+    },
+
+    // formatAddress 过滤器
+    formatAddress(order) {
+        // 先获取订单对象（order）中的省（receiverProvince）信息，并赋值给变量 str，作为收货地址拼接的起始部分。
         let str = order.receiverProvince;
-        if (order.receiverCity != null) {
-          str += "  " + order.receiverCity;
+        if (order.receiverCity!= null) {
+            // 如果订单对象中的市（receiverCity）信息不为空，就在 str 后面拼接上市的信息，并添加两个空格作为间隔，使地址展示更清晰。
+            str += "  " + order.receiverCity;
         }
+        // 接着在 str 后面拼接上区（receiverRegion）信息，并添加两个空格间隔，继续完善收货地址内容。
         str += "  " + order.receiverRegion;
+        // 最后拼接上详细地址（receiverDetailAddress）信息，完成整个收货地址的拼接操作。
         str += "  " + order.receiverDetailAddress;
+        // 返回拼接好的完整收货地址字符串，用于在页面上展示给用户查看。
         return str;
-      },
-      formatStatus(value) {
+    },
+
+    // formatStatus 过滤器
+    formatStatus(value) {
+        // 根据传入的订单状态对应的值（value）进行不同情况的判断，若值为 1，代表订单处于待发货状态，
+        // 则返回 '待发货'，将数字状态码转换为直观的文字状态描述展示给用户。
         if (value === 1) {
-          return '待发货';
+            return '待发货';
         } else if (value === 2) {
-          return '已发货';
+            // 如果值为 2，代表订单已发货，返回 '已发货'，以易读的文字告知用户订单的当前发货情况。
+            return '已发货';
         } else if (value === 3) {
-          return '已完成';
+            // 若值为 3，代表订单已完成整个流程，返回 '已完成'，清晰地展示订单的最终状态。
+            return '已完成';
         } else if (value === 4) {
-          return '已关闭';
+            // 当值为 4，代表订单已被关闭，返回 '已关闭'，提示用户该订单已关闭的情况。
+            return '已关闭';
         } else if (value === 5) {
-          return '无效订单';
+            // 若值为 5，假设代表订单是无效的（比如不符合某些业务规则等原因导致无效），返回 '无效订单'，让用户了解订单的有效性情况。
+            return '无效订单';
         } else {
-          return '待付款';
+            // 如果传入的值不属于上述已明确的几种状态码情况，默认返回 '待付款'，提示用户订单可能处于等待付款的初始状态。
+            return '待付款';
         }
-      },
-      formatPayStatus(value) {
+    },
+
+    // formatPayStatus 过滤器
+    formatPayStatus(value) {
+        // 根据传入的付款状态对应的值（value）进行判断，若值为 0，代表订单未支付，
+        // 则返回 '未支付'，将数字付款状态标识转换为易懂的文字描述展示给用户。
         if (value === 0) {
-          return '未支付';
-        } else if(value===4){
-          return '已退款';
-        }else{
-          return '已支付';
+            return '未支付';
+        } else if (value === 4) {
+            // 若值为 4，假设代表订单已进行了退款操作，返回 '已退款'，清晰告知用户付款方面的这一状态情况。
+            return '已退款';
+        } else {
+            // 如果传入的值不是 0 或 4，说明订单处于已支付的其他正常情况，返回 '已支付'，让用户知晓付款状态。
+            return '已支付';
         }
-      },
-      formatDeliverStatus(value) {
-        if (value === 0||value === 1) {
-          return '未发货';
+    },
+
+    // formatDeliverStatus 过滤器
+    formatDeliverStatus(value) {
+        // 判断传入的发货状态对应的值（value），如果值为 0 或者 1，这里假设这两种情况都代表订单未发货，
+        // 则返回 '未发货'，将数字发货状态标识转换为直观的文字表述展示给用户。
+        if (value === 0 || value === 1) {
+            return '未发货';
         } else {
-          return '已发货';
+            // 如果传入的值不是 0 或 1，说明订单已发货，返回 '已发货'，告知用户发货情况。
+            return '已发货';
         }
-      },
-      formatProductAttr(value){
-        if(value==null){
-          return '';
-        }else{
-          let attr = JSON.parse(value);
-          let result='';
-          for(let i=0;i<attr.length;i++){
-            result+=attr[i].key;
-            result+=":";
-            result+=attr[i].value;
-            result+=";";
-          }
-          return result;
+    },
+
+    // formatProductAttr 过滤器
+    formatProductAttr(value) {
+        if (value == null) {
+            // 先判断传入的商品属性值（value）是否为空，如果为空，则直接返回空字符串，用于在页面展示时对应位置不显示任何内容。
+            return '';
+        } else {
+            // 如果商品属性值不为空，先将其通过 JSON.parse 方法解析为 JavaScript 对象数组（假设传入的 value 原本是符合 JSON 格式的字符串），
+            // 因为可能商品属性是以 JSON 字符串形式存储的，解析后方便后续操作。
+            let attr = JSON.parse(value);
+            let result = '';
+            for (let i = 0; i < attr.length; i++) {
+                // 遍历解析后的属性对象数组，将每个属性对象中的键（key）和值（value）拼接起来，格式为 "键:值;"，并依次添加到 result 字符串中。
+                result += attr[i].key;
+                result += ":";
+                result += attr[i].value;
+                result += ";";
+            }
+            // 循环结束后，返回拼接好的包含所有商品属性信息的字符串，用于在页面上展示商品的详细属性情况。
+            return result;
         }
-      }
+    }
+}
+
+
+
+
+methods: {
+    // onSelectRegion 方法
+    onSelectRegion(data) {
+        // 此方法用于处理地区选择器（可能是用于选择收货地址的省、市、区）选中后的逻辑。
+        // 将传入的 data（包含了选中的省、市、区相关信息）中的省信息赋值给 receiverInfo 对象的 receiverProvince 属性，更新收货地址中的省份信息。
+        this.receiverInfo.receiverProvince = data.province.value;
+        // 将选中的市信息赋值给 receiverInfo 对象的 receiverCity 属性，更新收货地址中的城市信息。
+        this.receiverInfo.receiverCity = data.city.value;
+        // 将选中的区信息赋值给 receiverInfo 对象的 receiverRegion 属性，更新收货地址中的区信息。
+        this.receiverInfo.receiverRegion = data.area.value;
     },
-    methods: {
-      onSelectRegion(data){
-        this.receiverInfo.receiverProvince=data.province.value;
-        this.receiverInfo.receiverCity=data.city.value;
-        this.receiverInfo.receiverRegion=data.area.value;
-      },
-      formatTime(time) {
+
+
+ // formatTime 方法
+    formatTime(time) {
+        // 判断传入的时间参数（time）是否为空（null 或者空字符串），如果为空，则直接返回空字符串，
+        // 用于在页面展示时间的地方显示为空，避免出现异常情况。
         if (time == null || time === '') {
-          return '';
+            return '';
         }
+        // 如果时间参数不为空，使用 JavaScript 的 Date 构造函数将传入的时间数据（可能是时间戳等格式）转换为 Date 对象，
+        // 方便后续进行日期时间格式的处理。
         let date = new Date(time);
+        // 调用外部引入的 formatDate 函数（应该是用于格式化日期时间的工具函数），将 Date 对象按照 'yyyy-MM-dd hh:mm:ss' 的格式进行格式化，
+        // 并返回格式化后的日期时间字符串，用于在页面上以友好的格式展示时间信息。
         return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatStepStatus(value) {
+    },
+
+
+    // formatStepStatus 方法
+    formatStepStatus(value) {
+        // 根据传入的订单状态值（value）进行不同情况的判断，以确定在步骤展示组件（如前面模板中的 el-steps 组件）中对应的激活步骤索引。
         if (value === 1) {
-          //待发货
-          return 2;
+            // 如果订单状态值为 1，这里假设代表某种特定情况（比如订单已支付等待发货等），对应 '待发货' 状态，返回 2，
+            // 意味着在步骤展示组件中激活第二个步骤（索引从 0 开始，所以返回 2 即激活第三个步骤），用于直观展示订单当前处于的流程步骤位置。
+            return 2;
         } else if (value === 2) {
-          //已发货
-          return 3;
+            // 若值为 2，假设代表已发货状态，返回 3，即激活第四个步骤，展示订单已进入发货后的流程阶段。
+            return 3;
         } else if (value === 3) {
-          //已完成
-          return 4;
-        }else {
-          //待付款、已关闭、无限订单
-          return 1;
+            // 当值为 3，假设代表订单已完成的状态，返回 4，激活最后一个步骤，体现订单已走完整个流程。
+            return 4;
+        } else {
+            // 对于其他情况（比如待付款、已关闭、无效订单等状态，这里统一当作初始或非核心流程阶段的情况），返回 1，
+            // 激活第一个步骤，展示订单处于流程的起始或其他特定情况的步骤位置。
+            return 1;
         }
-      },
-      showUpdateReceiverDialog(){
-        this.receiverDialogVisible=true;
-        this.receiverInfo={
-          orderId:this.order.id,
-          receiverName:this.order.receiverName,
-          receiverPhone:this.order.receiverPhone,
-          receiverPostCode:this.order.receiverPostCode,
-          receiverDetailAddress:this.order.receiverDetailAddress,
-          receiverProvince:this.order.receiverProvince,
-          receiverCity:this.order.receiverCity,
-          receiverRegion:this.order.receiverRegion,
-          status:this.order.status
+    },
+
+ // showUpdateReceiverDialog 方法
+    showUpdateReceiverDialog() {
+        // 将控制修改收货人信息对话框显示状态的 receiverDialogVisible 属性设置为 true，
+        // 这样在页面上对应的对话框就会显示出来，供用户进行收货人信息的修改操作。
+        this.receiverDialogVisible = true;
+        // 初始化 receiverInfo 对象，将当前订单（this.order）中的相关收货人信息（如姓名、电话、地址等）赋值给 receiverInfo，
+        // 以便在对话框中展示已有的收货人信息，方便用户基于现有信息进行修改，同时也关联了订单编号和订单状态等信息到 receiverInfo 对象中。
+        this.receiverInfo = {
+            orderId: this.order.id,
+            receiverName: this.order.receiverName,
+            receiverPhone: this.order.receiverPhone,
+            receiverPostCode: this.order.receiverPostCode,
+            receiverDetailAddress: this.order.receiverDetailAddress,
+            receiverProvince: this.order.receiverProvince,
+            receiverCity: this.order.receiverCity,
+            receiverRegion: this.order.receiverRegion,
+            status: this.order.status
         }
-      },
+    },
+
+
+
+
       handleUpdateReceiverInfo(){
         this.$confirm('是否要修改收货信息?', '提示', {
           confirmButtonText: '确定',
@@ -543,6 +798,11 @@
           });
         });
       },
+
+
+
+
+
       showUpdateMoneyDialog(){
         this.moneyDialogVisible=true;
         this.moneyInfo.orderId=this.order.id;
@@ -568,6 +828,10 @@
           });
         });
       },
+
+
+
+      
       showMessageDialog(){
         this.messageDialogVisible=true;
         this.message.title=null;
@@ -639,30 +903,61 @@
           });
         });
       },
-      handleDeleteOrder(){
-        this.$confirm('是否要进行该删除操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let params = new URLSearchParams();
-          params.append("ids",[this.id]);
-          deleteOrder(params).then(response=>{
+
+
+  // handleDeleteOrder 方法，用于处理删除订单的相关逻辑操作
+handleDeleteOrder() {
+    // 使用 $confirm 组件（通常是基于 Vue 的弹出确认框组件，例如 Element UI 中的 confirm 弹框）弹出一个确认提示框，
+    // 向用户询问是否要进行删除订单的操作，提示框的标题为 '是否要进行该删除操作?'，提示框的整体标题为 '提示'，
+    // 确认按钮文字设置为 '确定'，取消按钮文字设置为 '取消'，并且将提示框的类型设置为 'warning'（一般是一种带有警告意味的样式，比如黄色背景等，用于提示用户谨慎操作）。
+    this.$confirm('是否要进行该删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 如果用户在弹出的确认提示框中点击了 '确定' 按钮，就执行以下逻辑
+
+        // 创建一个 URLSearchParams 对象，这个对象常用于构建 URL 查询参数，通常在向后端发送 HTTP 请求（比如 GET、POST 等请求方式）时，
+        // 用于携带相关参数信息传递给后端接口。
+        let params = new URLSearchParams();
+
+        // 使用 append 方法向 params 对象中添加名为 'ids' 的参数，其值是一个包含当前订单编号（this.id）的数组形式。
+        // 这里假设后端的删除订单接口接收的订单编号参数是以数组形式传递的，即使当前可能只删除一个订单，也按照这种格式传递，方便后端统一处理多个订单删除的情况（如果接口支持的话）。
+        params.append("ids", [this.id]);
+
+        // 调用外部导入的 deleteOrder 函数（应该是用于向后端发送删除订单请求的 API 函数），并将构建好的参数对象 params 作为参数传递进去，
+        // 向后端发起删除订单的请求，等待后端处理并返回响应结果。
+        deleteOrder(params).then(response => {
+            // 当后端返回响应，并且表示删除订单操作成功后（具体成功的判断可能在 deleteOrder 函数内部或者依据后端返回的数据格式来确定），
+            // 使用 $message 组件（一般是基于 Vue 的消息提示框组件，例如 Element UI 中的消息提示框）弹出一个提示消息，告知用户订单删除成功。
+            // 设置消息的内容为 '删除成功！'，消息类型为 'success'（通常这种类型的消息会以绿色背景等表示成功的样式展示给用户），
+            // 同时设置消息的显示时长为 1000 毫秒（即 1 秒），让提示消息展示 1 秒后自动消失，给用户一个明确的操作反馈。
             this.$message({
-              message: '删除成功！',
-              type: 'success',
-              duration: 1000
+                message: '删除成功！',
+                type: 'success',
+                duration: 1000
             });
+
+            // 使用 $router.back() 方法（假设基于 Vue Router 实现了路由功能），让页面导航回上一个页面，
+            // 比如从订单详情页面删除订单成功后，返回订单列表页面等，实现页面的跳转回到用户操作之前的合理页面位置。
             this.$router.back();
-          });
-        })
-      },
-      showLogisticsDialog(){
-        this.logisticsDialogVisible=true;
-      }
+        });
+    })
+},
+
+// showLogisticsDialog 方法，用于控制物流信息对话框的显示与隐藏
+showLogisticsDialog() {
+    // 将控制物流信息对话框显示状态的 logisticsDialogVisible 属性设置为 true，
+    // 这样在页面上对应的物流信息对话框就会显示出来，方便用户查看订单的物流相关信息（比如快递单号、物流状态等内容）。
+    this.logisticsDialogVisible = true;
+}
     }
   }
 </script>
+
+
+
+
 <style scoped>
   .detail-container {
     width: 80%;
@@ -700,6 +995,8 @@
     overflow: hidden;
   }
 
+
+
   .table-cell-title {
     border-right: 1px solid #DCDFE6;
     border-bottom: 1px solid #DCDFE6;
diff --git a/src/views/oms/order/setting.vue b/src/views/oms/order/setting.vue
index 144edda..79b9bcd 100644
--- a/src/views/oms/order/setting.vue
+++ b/src/views/oms/order/setting.vue
@@ -1,127 +1,207 @@
-<template> 
-  <el-card class="form-container" shadow="never">
-    <el-form :model="orderSetting"
-             ref="orderSettingForm"
-             :rules="rules"
-             label-width="150px">
-      <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
-        <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
-          <template slot="append">分</template>
-        </el-input>
-        <span class="note-margin">未付款，订单自动关闭</span>
-      </el-form-item>
-      <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
-        <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
-          <template slot="append">分</template>
-        </el-input>
-        <span class="note-margin">未付款，订单自动关闭</span>
-      </el-form-item>
-      <el-form-item label="发货超过：" prop="confirmOvertime">
-        <el-input v-model="orderSetting.confirmOvertime" class="input-width">
-          <template slot="append">天</template>
-        </el-input>
-        <span class="note-margin">未收货，订单自动完成</span>
-      </el-form-item>
-      <el-form-item label="订单完成超过：" prop="finishOvertime">
-        <el-input v-model="orderSetting.finishOvertime" class="input-width">
-          <template slot="append">天</template>
-        </el-input>
-        <span class="note-margin">自动结束交易，不能申请售后</span>
-      </el-form-item>
-      <el-form-item label="订单完成超过：" prop="commentOvertime">
-        <el-input v-model="orderSetting.commentOvertime" class="input-width">
-          <template slot="append">天</template>
-        </el-input>
-        <span class="note-margin">自动五星好评</span>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          @click="confirm('orderSettingForm')"
-          type="primary">提交</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
+<template>
+    <!-- 使用 el-card 组件创建一个卡片式的布局容器，设置类名为 "form-container"，阴影效果为 "never"（即无阴影），用于包裹整个订单设置的表单内容 -->
+    <el-card class="form-container" shadow="never">
+        <!-- 使用 el-form 组件创建表单，绑定表单数据模型为 "orderSetting"，设置表单的引用名为 "orderSettingForm"（方便后续通过 $refs 来获取表单实例进行验证等操作），
+             同时通过 :rules 绑定验证规则对象 "rules"，设置表单标签的宽度为 150px，用于统一表单中各个表单项标签的显示宽度 -->
+        <el-form :model="orderSetting"
+                 ref="orderSettingForm"
+                 :rules="rules"
+                 label-width="150px">
+            <!-- 以下是各个表单项（el-form-item）的定义，每个表单项对应一个订单设置的时间相关配置 -->
+
+            <!-- 秒杀订单超时未付款自动关闭的时间设置表单项 -->
+            <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
+                <!-- 使用 el-input 组件创建一个输入框，通过 v-model 双向绑定 "orderSetting.flashOrderOvertime" 数据，意味着用户在输入框中输入的值会实时更新到这个数据属性中，
+                     同时设置输入框的类名为 "input-width"，用于控制输入框的宽度样式（在后面的 <style> 部分定义了该类对应的宽度为 50%） -->
+                <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
+                    <!-- 使用 slot="append" 定义一个后置插槽，在输入框后面添加一个文本内容 "分"，用于提示用户输入的时间单位是分钟 -->
+                    <template slot="append">分</template>
+                </el-input>
+                <!-- 展示一个提示文本，设置类名为 "note-margin"（在后面 <style> 部分定义了该类的左边距样式），用于提示用户该项设置对应的业务含义，即秒杀订单超过设定时间未付款会自动关闭 -->
+                <span class="note-margin">未付款，订单自动关闭</span>
+            </el-form-item>
+
+            <!-- 正常订单超时未付款自动关闭的时间设置表单项，结构和上面秒杀订单的类似 -->
+            <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
+                <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
+                    <template slot="append">分</template>
+                </el-input>
+                <span class="note-margin">未付款，订单自动关闭</span>
+            </el-form-item>
+
+            <!-- 发货后超时未收货自动完成订单的时间设置表单项 -->
+            <el-form-item label="发货超过：" prop="confirmOvertime">
+                <el-input v-model="orderSetting.confirmOvertime" class="input-width">
+                    <template slot="append">天</template>
+                </el-input>
+                <span class="note-margin">未收货，订单自动完成</span>
+            </el-form-item>
+
+            <!-- 订单完成后超时自动结束交易且不能申请售后的时间设置表单项 -->
+            <el-form-item label="订单完成超过：" prop="finishOvertime">
+                <el-input v-model="orderSetting.finishOvertime" class="input-width">
+                    <template slot="append">天</template>
+                </el-input>
+                <span class="note-margin">自动结束交易，不能申请售后</span>
+            </el-form-item>
+
+            <!-- 订单完成后超时自动给予五星好评的时间设置表单项 -->
+            <el-form-item label="订单完成超过：" prop="commentOvertime">
+                <el-input v-model="orderSetting.commentOvertime" class="input-width">
+                    <template slot="append">天</template>
+                </el-input>
+                <span class="note-margin">自动五星好评</span>
+            </el-form-item>
+
+            <!-- 定义一个提交按钮的表单项 -->
+            <el-form-item>
+                <!-- 使用 el-button 组件创建一个按钮，设置按钮的点击事件为调用 "confirm('orderSettingForm')" 方法（在后面的 methods 中定义），按钮类型为 "primary"（通常是主要的、突出显示的按钮样式），按钮文字为 "提交" -->
+                <el-button
+                        @click="confirm('orderSettingForm')"
+                        type="primary">提交</el-button>
+            </el-form-item>
+        </el-form>
+    </el-card>
 </template>
+
+
+
+
+
+
 <script>
-  import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting';
-  const defaultOrderSetting = {
-    id: null,
-    flashOrderOvertime: 0,
-    normalOrderOvertime: 0,
-    confirmOvertime: 0,
-    finishOvertime: 0,
-    commentOvertime: 0
-  };
-  const checkTime = (rule, value, callback) => {
-    if (!value) {
-      return callback(new Error('时间不能为空'));
-    }
-    console.log("checkTime",value);
-    let intValue = parseInt(value);
-    if (!Number.isInteger(intValue)) {
-      return callback(new Error('请输入数字值'));
-    }
-    callback();
-  };
-  export default {
-    name: 'orderSetting',
-    data() {
-      return {
-        orderSetting: Object.assign({}, defaultOrderSetting),
-        rules: {
-          flashOrderOvertime:{validator: checkTime, trigger: 'blur' },
-          normalOrderOvertime:{validator: checkTime, trigger: 'blur' },
-          confirmOvertime: {validator: checkTime, trigger: 'blur' },
-          finishOvertime: {validator: checkTime, trigger: 'blur' },
-          commentOvertime:{validator: checkTime, trigger: 'blur' }
+    // 从 '@/api/orderSetting' 模块中导入两个函数，getOrderSetting 函数大概率用于获取订单设置的相关信息，updateOrderSetting 函数用于将修改后的订单设置信息提交更新到后端
+    import {getOrderSetting, updateOrderSetting} from '@/api/orderSetting';
+
+    // 定义一个名为 defaultOrderSetting 的常量对象，用于表示订单设置的默认数据结构和初始值。
+    // 包含了各个时间设置项的初始值都为 0（如秒杀订单超时时间、正常订单超时时间等）以及一个用于标识的 id 属性初始值设为 null，
+    // 后续可以基于这个默认结构来填充实际获取到的数据或者重置相关设置数据。
+    const defaultOrderSetting = {
+        id: null,
+        flashOrderOvertime: 0,
+        normalOrderOvertime: 0,
+        confirmOvertime: 0,
+        finishOvertime: 0,
+        commentOvertime: 0
+    };
+
+    // 定义一个名为 checkTime 的函数，用于作为表单输入框的验证规则函数。
+    // 接收三个参数：rule（当前验证规则对象，包含了一些验证相关的配置信息），value（输入框中用户输入的值），callback（用于回调告知验证结果的函数）
+    const checkTime = (rule, value, callback) => {
+        // 判断用户输入的值是否为空，如果为空，就通过 callback 函数返回一个 Error 对象，并传入错误提示信息 '时间不能为空'，
+        // 这样在表单验证时就会显示相应的错误提示给用户，告知输入不符合要求。
+        if (!value) {
+            return callback(new Error('时间不能为空'));
         }
-      }
-    },
-    created(){
-      this.getDetail();
-    },
-    methods:{
-      confirm(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$confirm('是否要提交修改?', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
-              updateOrderSetting(1,this.orderSetting).then(response=>{
-                this.$message({
-                  type: 'success',
-                  message: '提交成功!',
-                  duration:1000
+        console.log("checkTime", value);
+        // 将用户输入的值尝试转换为整数（使用 parseInt 函数），并将转换后的结果赋值给 intValue 变量。
+        let intValue = parseInt(value);
+        // 判断转换后的结果是否是一个有效的整数（使用 Number.isInteger 函数进行判断），如果不是整数，
+        // 则通过 callback 函数返回一个 Error 对象，并传入错误提示信息 '请输入数字值'，提示用户输入的内容必须是数字类型。
+        if (!Number.isInteger(intValue)) {
+            return callback(new Error('请输入数字值'));
+        }
+        // 如果上述验证都通过，即输入的值不为空且是整数，就调用 callback 函数，不传入任何参数，表示验证通过。
+        callback();
+    };
+
+    // 导出一个 Vue 组件的配置对象，用于定义名为 'orderSetting' 的 Vue 组件相关属性和方法。
+    export default {
+        // 组件的名称，用于在 Vue 实例或其他组件中进行识别和引用，这里组件名为 'orderSetting'。
+        name: 'orderSetting',
+
+        // data 函数用于定义组件内部的响应式数据，返回的对象中的属性可以在组件的模板、方法等地方使用，并且数据变化会自动更新相关绑定的 DOM 元素。
+        data() {
+            return {
+                // 使用 Object.assign 方法将 defaultOrderSetting 对象的属性复制到 orderSetting 对象中，
+                // 初始化 orderSetting 对象，使其具有默认的订单设置数据结构和初始值，后续获取到实际数据或者用户修改数据都会更新这个对象。
+                orderSetting: Object.assign({}, defaultOrderSetting),
+                // 定义表单验证规则对象 rules，其中每个属性对应一个表单项的验证规则配置，
+                // 通过 validator 属性指定具体的验证函数（这里都使用了前面定义的 checkTime 函数），trigger 属性设置触发验证的时机为 'blur'（即输入框失去焦点时触发验证）。
+                rules: {
+                    flashOrderOvertime: {validator: checkTime, trigger: 'blur'},
+                    normalOrderOvertime: {validator: checkTime, trigger: 'blur'},
+                    confirmOvertime: {validator: checkTime, trigger: 'blur'},
+                    finishOvertime: {validator: checkTime, trigger: 'blur'},
+                    commentOvertime: {validator: checkTime, trigger: 'blur'}
+                }
+            }
+        },
+
+        // created 生命周期钩子函数，在组件实例被创建后立即调用，这里调用了 getDetail 方法（在下面的 methods 中定义），
+        // 用于获取订单设置的初始详细信息，以便填充到页面的表单中展示给用户查看或者进行后续修改操作。
+        created() {
+            this.getDetail();
+        },
+
+        // 定义组件的各种方法，用于处理组件中的业务逻辑。
+        methods: {
+            // confirm 方法，用于处理提交表单的相关逻辑，接收一个参数 formName，用于指定要验证的表单引用名（这里传入的是 'orderSettingForm'，对应前面 el-form 组件设置的 ref 属性值）。
+            confirm(formName) {
+                // 通过 $refs[formName] 获取到表单实例（这里就是前面定义的 'orderSettingForm' 对应的表单对象），然后调用 validate 方法进行表单验证，
+                // validate 方法接收一个回调函数作为参数，回调函数接收一个参数 valid，表示表单验证的结果（true 表示验证通过，false 表示验证不通过）。
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        // 如果表单验证通过，使用 $confirm 组件（通常是基于 Vue 的弹出确认框组件，例如 Element UI 中的 confirm 弹框）弹出一个确认提示框，
+                        // 向用户询问是否要提交修改，提示框的标题为 '是否要提交修改?'，整体标题为 '提示'，确认按钮文字设置为 '确定'，取消按钮文字设置为 '取消'，类型设置为 'warning'（一般是带有警告意味的样式）。
+                        this.$confirm('是否要提交修改?', '提示', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            // 如果用户在弹出的确认提示框中点击了 '确定' 按钮，调用 updateOrderSetting 函数（前面导入的用于更新订单设置的 API 函数），
+                            // 传入参数 1（这里参数 1 的含义可能根据后端接口要求而定，也许是代表某个固定的配置标识等情况）和当前的订单设置数据对象（this.orderSetting），
+                            // 向后端发送更新订单设置的请求，等待后端处理并返回响应结果。
+                            updateOrderSetting(1, this.orderSetting).then(response => {
+                                // 当后端返回响应并且更新成功后（具体成功的判断可能在 updateOrderSetting 函数内部或者依据后端返回的数据格式来确定），
+                                // 使用 $message 组件（一般是基于 Vue 的消息提示框组件，例如 Element UI 中的消息提示框）弹出一个成功提示消息，告知用户提交成功，
+                                // 设置消息类型为 'success'（通常是绿色背景等表示成功的样式），消息内容为 '提交成功!'，显示时长为 1000 毫秒（1 秒），给用户操作反馈后自动消失。
+                                this.$message({
+                                    type: 'success',
+                                    message: '提交成功!',
+                                    duration: 1000
+                                });
+                            })
+                        });
+                    } else {
+                        // 如果表单验证不通过，使用 $message 组件弹出一个警告提示消息，告知用户提交参数不合法，设置消息类型为 'warning'（一般是黄色背景等表示警告的样式），
+                        // 提示用户检查输入的参数是否符合要求。
+                        this.$message({
+                            message: '提交参数不合法',
+                            type: 'warning'
+                        });
+                        return false;
+                    }
                 });
-              })
-            });
-          } else {
-            this.$message({
-              message: '提交参数不合法',
-              type: 'warning'
-            });
-            return false;
-          }
-        });
-      },
-      getDetail(){
-        getOrderSetting(1).then(response=>{
-          this.orderSetting=response.data;
-        })
-      }
+            },
+
+            // getDetail 方法，用于获取订单设置的详细信息，调用前面导入的 getOrderSetting 函数（用于获取订单设置信息的 API 函数），
+            // 传入参数 1（同样参数 1 的含义依据后端接口要求而定），等待后端返回订单设置数据，然后将返回的数据赋值给 orderSetting 对象，
+            // 这样页面上绑定 orderSetting 对象的表单输入框等元素就能展示出最新获取到的订单设置信息了。
+            getDetail() {
+                getOrderSetting(1).then(response => {
+                    this.orderSetting = response.data;
+                })
+            }
+        }
     }
-  }
 </script>
+
+
+
+
+
+
 <style scoped>
-  .input-width {
-    width: 50%;
-  }
+    /* 定义一个类名为 "input-width" 的样式规则，设置元素的宽度为 50%，用于控制前面模板中 el-input 组件输入框的宽度，使其在页面上展示的宽度占父容器的一半 */
+   .input-width {
+        width: 50%;
+    }
 
-  .note-margin {
-    margin-left: 15px;
-  }
+    /* 定义一个类名为 "note-margin" 的样式规则，设置元素的左边距为 15px，用于控制前面模板中那些提示文本（span 元素）的左边距，使其与输入框等元素有一定的间隔，布局更加美观清晰 */
+   .note-margin {
+        margin-left: 15px;
+    }
 </style>