.

src/views/oms/order/orderDetail.vue

@@ -180,80 +180,292 @@
         </el-row>
       </div>
 <div style="margin-top: 20px">
+    <!-- 使用 svg-icon 组件展示一个图标，设置图标类名为 "marker"，并指定图标颜色 -->
     <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+    <!-- 展示一段文本，应用 "font-small" 类名，用于设置较小字体样式，文本内容为 "操作信息" -->
     <span class="font-small">操作信息</span>
 </div>
+<!-- 使用 el-table 组件展示表格数据，设置了一些样式属性、引用以及绑定数据等 -->
 <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">
             {{scope.row.operateMan}}
         </template>
     </el-table-column>
+    <!-- 定义表格列，展示 "操作时间" 信息，设置列宽度、文本对齐方式，通过调用 formatTime 方法格式化时间后展示 -->
     <el-table-column label="操作时间"  width="160" align="center">
         <template slot-scope="scope">
             {{formatTime(scope.row.createTime)}}
         </template>
     </el-table-column>
+    <!-- 定义表格列，展示 "订单状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatStatus 过滤器对状态进行格式化后展示 -->
     <el-table-column label="订单状态"  width="120" align="center">
         <template slot-scope="scope">
             {{scope.row.orderStatus | formatStatus}}
         </template>
     </el-table-column>
+    <!-- 定义表格列，展示 "付款状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatPayStatus 过滤器对付款状态进行格式化后展示 -->
     <el-table-column label="付款状态"  width="120" align="center">
         <template slot-scope="scope">
             {{scope.row.orderStatus | formatPayStatus}}
         </template>
     </el-table-column>
+    <!-- 定义表格列，展示 "发货状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatDeliverStatus 过滤器对发货状态进行格式化后展示 -->
     <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">
             {{scope.row.note}}
         </template>
     </el-table-column>
 </el-table>
+<!-- 使用 el-card 组件包裹内容（此处 el-card 结束标签在后面代码中未完整展示，但推测是用于布局和样式统一等作用） -->
+<el-card>
+    <!-- el-dialog 组件用于创建一个对话框，用于修改收货人信息，设置对话框标题、绑定可见性以及宽度等属性 -->
+    <el-dialog title="修改收货人信息"
+               :visible.sync="receiverDialogVisible"
+               width="40%">
+        <!-- el-form 组件用于创建表单，绑定数据模型为 receiverInfo，设置表单引用以及标签宽度等属性 -->
+        <el-form :model="receiverInfo"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <!-- el-form-item 组件用于定义表单中的一项，此处展示 "收货人姓名" 输入框 -->
+            <el-form-item label="收货人姓名：">
+                <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
+            </el-form-item>
+            <!-- 类似上述，展示 "手机号码" 输入框 -->
+            <el-form-item label="手机号码：">
+                <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 展示 "邮政编码" 输入框 -->
+            <el-form-item label="邮政编码：">
+                <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
+                </el-input>
+            </el-form-item>
+            <!-- 使用 v-distpicker 组件（可能是用于地区选择的第三方组件），绑定省份、城市、地区数据，并监听 selected 事件 -->
+            <el-form-item label="所在区域：">
+                <v-distpicker :province="receiverInfo.receiverProvince"
+                              :city="receiverInfo.receiverCity"
+                              :area="receiverInfo.receiverRegion"
+                              @selected="onSelectRegion"></v-distpicker>
+            </el-form-item>
+            <!-- 展示 "详细地址" 输入框，设置为文本域类型，指定行数 -->
+            <el-form-item label="详细地址：">
+                <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <!-- 在对话框的 footer 插槽中定义两个按钮，一个用于取消（点击隐藏对话框），一个用于确定（点击调用 handleUpdateReceiverInfo 方法） -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="receiverDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- 另一个 el-dialog 组件，用于修改费用信息，同样设置标题、可见性绑定和宽度等属性 -->
+    <el-dialog title="修改费用信息"
+               :visible.sync="moneyDialogVisible"
+               width="40%">
+        <!-- 内部使用类名为 "table-layout" 的 div 进行布局，通过多个 el-row 和 el-col 组合展示费用相关信息表格形式 -->
+        <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">
+                    <el-input v-model.number="moneyInfo.freightAmount" size="mini"><template slot="prepend">￥</template></el-input>
+                </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">
+                    <el-input v-model.number="moneyInfo.discountAmount" size="mini"><template slot="prepend">-￥</template></el-input>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.totalAmount+moneyInfo.freightAmount}}</span>
+                </el-col>
+                <el-col :span="6" class="table-cell">
+                    <span class="color-danger">￥{{order.payAmount+moneyInfo.freightAmount-moneyInfo.discountAmount}}</span>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 在对话框的 footer 插槽中同样定义取消和确定按钮，确定按钮点击调用 handleUpdateMoneyInfo 方法 -->
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="moneyDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于发送站内信，设置相关属性 -->
+    <el-dialog title="发送站内信"
+               :visible.sync="messageDialogVisible"
+               width="40%">
+        <el-form :model="message"
+                 ref="receiverInfoForm"
+                 label-width="150px">
+            <el-form-item label="标题：">
+                <el-input v-model="message.title" style="width: 200px"></el-input>
+            </el-form-item>
+            <el-form-item label="内容：">
+                <el-input v-model="message.content" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="messageDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleSendMessage">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于关闭订单，设置相关属性 -->
+    <el-dialog title="关闭订单"
+               :visible.sync="closeDialogVisible"
+               width="40%">
+        <el-form :model="closeInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="closeInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="closeDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- el-dialog 组件用于备注订单，设置相关属性 -->
+    <el-dialog title="备注订单"
+               :visible.sync="markOrderDialogVisible"
+               width="40%">
+        <el-form :model="markInfo"
+                 label-width="150px">
+            <el-form-item label="操作备注：">
+                <el-input v-model="markInfo.note" type="textarea" rows="3">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="markOrderDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
+        </span>
+    </el-dialog>
+    <!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
+    <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
 </el-card>
+</div>
+</template>
+<div style="margin-top: 20px">
+    <!-- 使用 svg-icon 组件展示一个图标，设置图标类名为 "marker"，并指定图标颜色 -->
+    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
+    <!-- 展示一段文本，应用 "font-small" 类名，用于设置较小字体样式，文本内容为 "操作信息" -->
+    <span class="font-small">操作信息</span>
+</div>
+<!-- 使用 el-table 组件展示表格数据，设置了一些样式属性、引用以及绑定数据等 -->
+<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">
+            {{scope.row.operateMan}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "操作时间" 信息，设置列宽度、文本对齐方式，通过调用 formatTime 方法格式化时间后展示 -->
+    <el-table-column label="操作时间"  width="160" align="center">
+        <template slot-scope="scope">
+            {{formatTime(scope.row.createTime)}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "订单状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatStatus 过滤器对状态进行格式化后展示 -->
+    <el-table-column label="订单状态"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.orderStatus | formatStatus}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "付款状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatPayStatus 过滤器对付款状态进行格式化后展示 -->
+    <el-table-column label="付款状态"  width="120" align="center">
+        <template slot-scope="scope">
+            {{scope.row.orderStatus | formatPayStatus}}
+        </template>
+    </el-table-column>
+    <!-- 定义表格列，展示 "发货状态" 信息，设置列宽度、文本对齐方式，通过管道符调用 formatDeliverStatus 过滤器对发货状态进行格式化后展示 -->
+    <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">
+            {{scope.row.note}}
+        </template>
+    </el-table-column>
+</el-table>
+<!-- 使用 el-card 组件包裹内容（此处 el-card 结束标签在后面代码中未完整展示，但推测是用于布局和样式统一等作用） -->
+<el-card>
+    <!-- el-dialog 组件用于创建一个对话框，用于修改收货人信息，设置对话框标题、绑定可见性以及宽度等属性 -->
     <el-dialog title="修改收货人信息"
                :visible.sync="receiverDialogVisible"
                width="40%">
+        <!-- el-form 组件用于创建表单，绑定数据模型为 receiverInfo，设置表单引用以及标签宽度等属性 -->
         <el-form :model="receiverInfo"
                  ref="receiverInfoForm"
                  label-width="150px">
+            <!-- el-form-item 组件用于定义表单中的一项，此处展示 "收货人姓名" 输入框 -->
             <el-form-item label="收货人姓名：">
                 <el-input v-model="receiverInfo.receiverName" style="width: 200px"></el-input>
             </el-form-item>
+            <!-- 类似上述，展示 "手机号码" 输入框 -->
             <el-form-item label="手机号码：">
                 <el-input v-model="receiverInfo.receiverPhone" style="width: 200px">
                 </el-input>
             </el-form-item>
+            <!-- 展示 "邮政编码" 输入框 -->
             <el-form-item label="邮政编码：">
                 <el-input v-model="receiverInfo.receiverPostCode" style="width: 200px">
                 </el-input>
             </el-form-item>
+            <!-- 使用 v-distpicker 组件（可能是用于地区选择的第三方组件），绑定省份、城市、地区数据，并监听 selected 事件 -->
             <el-form-item label="所在区域：">
                 <v-distpicker :province="receiverInfo.receiverProvince"
                               :city="receiverInfo.receiverCity"
                               :area="receiverInfo.receiverRegion"
                               @selected="onSelectRegion"></v-distpicker>
             </el-form-item>
+            <!-- 展示 "详细地址" 输入框，设置为文本域类型，指定行数 -->
             <el-form-item label="详细地址：">
                 <el-input v-model="receiverInfo.receiverDetailAddress" type="textarea" rows="3">
                 </el-input>
             </el-form-item>
         </el-form>
+        <!-- 在对话框的 footer 插槽中定义两个按钮，一个用于取消（点击隐藏对话框），一个用于确定（点击调用 handleUpdateReceiverInfo 方法） -->
         <span slot="footer" class="dialog-footer">
             <el-button @click="receiverDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="handleUpdateReceiverInfo">确 定</el-button>
         </span>
     </el-dialog>
+    <!-- 另一个 el-dialog 组件，用于修改费用信息，同样设置标题、可见性绑定和宽度等属性 -->
     <el-dialog title="修改费用信息"
                :visible.sync="moneyDialogVisible"
                width="40%">
+        <!-- 内部使用类名为 "table-layout" 的 div 进行布局，通过多个 el-row 和 el-col 组合展示费用相关信息表格形式 -->
         <div class="table-layout">
             <el-row>
                 <el-col :span="6" class="table-cell-title">商品合计</el-col>
@@ -288,11 +500,13 @@
                 </el-col>
             </el-row>
         </div>
+        <!-- 在对话框的 footer 插槽中同样定义取消和确定按钮，确定按钮点击调用 handleUpdateMoneyInfo 方法 -->
         <span slot="footer" class="dialog-footer">
             <el-button @click="moneyDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="handleUpdateMoneyInfo">确 定</el-button>
         </span>
     </el-dialog>
+    <!-- el-dialog 组件用于发送站内信，设置相关属性 -->
     <el-dialog title="发送站内信"
                :visible.sync="messageDialogVisible"
                width="40%">
@@ -312,6 +526,7 @@
             <el-button type="primary" @click="handleSendMessage">确 定</el-button>
         </span>
     </el-dialog>
+    <!-- el-dialog 组件用于关闭订单，设置相关属性 -->
     <el-dialog title="关闭订单"
                :visible.sync="closeDialogVisible"
                width="40%">
@@ -327,6 +542,7 @@
             <el-button type="primary" @click="handleCloseOrder">确 定</el-button>
         </span>
     </el-dialog>
+    <!-- el-dialog 组件用于备注订单，设置相关属性 -->
     <el-dialog title="备注订单"
                :visible.sync="markOrderDialogVisible"
                width="40%">
@@ -342,177 +558,19 @@
             <el-button type="primary" @click="handleMarkOrder">确 定</el-button>
         </span>
     </el-dialog>
+    <!-- 使用 logistics-dialog 组件（自定义组件），双向绑定 visible 属性（推测用于控制显示隐藏） -->
     <logistics-dialog v-model="logisticsDialogVisible"></logistics-dialog>
+</el-card>
 </div>
 </template>
+
   <script>
-  import {getOrderDetail,updateReceiverInfo,updateMoneyInfo,closeOrder,updateOrderNote,deleteOrder} from '@/api/order';
+      {
-  import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
+          // 定义一个对象（可能是某个 Vue 组件实例相关的方法集合等，从代码结构推测）
-  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 {
-    name: 'orderDetail',
-    components: { VDistpicker, LogisticsDialog},
-    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
-      }
-    },
-    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;
-        }
-      },
-      formatLongText(value) {
-        if(value===undefined||value===null||value===''){
-          return '暂无';
-        }else if(value.length>8){
-          return value.substr(0, 8) + '...';
-        }else{
-          return value;
-        }
-      },
-      formatPayType(value) {
-        if (value === 1) {
-          return '支付宝';
-        } else if (value === 2) {
-          return '微信';
-        } else {
-          return '未支付';
-        }
-      },
-      formatSourceType(value) {
-        if (value === 1) {
-          return 'APP订单';
-        } else {
-          return 'PC订单';
-        }
-      },
-      formatOrderType(value) {
-        if (value === 1) {
-          return '秒杀订单';
-        } else {
-          return '正常订单';
-        }
-      },
-      formatAddress(order) {
-        let str = order.receiverProvince;
-        if (order.receiverCity != null) {
-          str += "  " + order.receiverCity;
-        }
-        str += "  " + order.receiverRegion;
-        str += "  " + order.receiverDetailAddress;
-        return str;
-      },
-      formatStatus(value) {
-        if (value === 1) {
-          return '待发货';
-        } else if (value === 2) {
-          return '已发货';
-        } else if (value === 3) {
-          return '已完成';
-        } else if (value === 4) {
-          return '已关闭';
-        } else if (value === 5) {
-          return '无效订单';
-        } else {
-          return '待付款';
-        }
-      },
-      formatPayStatus(value) {
-        if (value === 0) {
-          return '未支付';
-        } else if(value===4){
-          return '已退款';
-        }else{
-          return '已支付';
-        }
-      },
-      formatDeliverStatus(value) {
-        if (value === 0||value === 1) {
-          return '未发货';
-        } else {
-          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;
-        }
-      }
-    },
-    methods: {
-      onSelectRegion(data){
-        this.receiverInfo.receiverProvince=data.province.value;
-        this.receiverInfo.receiverCity=data.city.value;
-        this.receiverInfo.receiverRegion=data.area.value;
-      },
-      formatTime(time) {
-        if (time == null || time === '') {
-          return '';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      },
-      formatStepStatus(value) {
-        if (value === 1) {
-          //待发货
-          return 2;
-        } else if (value === 2) {
-          //已发货
-          return 3;
-        } else if (value === 3) {
-          //已完成
-          return 4;
-        }else {
-          //待付款、已关闭、无限订单
-          return 1;
-        }
-      },
           showUpdateReceiverDialog() {
+              // 将 receiverDialogVisible 属性设置为 true，表示显示更新收货信息的对话框（可能用于控制界面显示隐藏）
               this.receiverDialogVisible = true;
+              // 构建 receiverInfo 对象，将当前订单（this.order）的各项收货相关信息赋值给它
               this.receiverInfo = {
                   orderId: this.order.id,
                   receiverName: this.order.receiverName,
@@ -526,17 +584,24 @@
               }
           },
           handleUpdateReceiverInfo() {
+              // 弹出一个确认框，询问用户是否要修改收货信息，设置确认按钮文本、取消按钮文本以及提示框类型为警告类型
               this.$confirm('是否要修改收货信息?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 调用 updateReceiverInfo 函数（假设是用于向服务器发送修改收货信息请求的函数），传入 receiverInfo 对象
+                  // 并在请求成功后执行 then 回调函数中的逻辑
                   updateReceiverInfo(this.receiverInfo).then(response => {
+                      // 将 receiverDialogVisible 属性设置为 false，隐藏更新收货信息的对话框
                       this.receiverDialogVisible = false;
+                      // 弹出一个消息提示框，显示修改成功的提示信息，类型为成功类型
                       this.$message({
                           type: 'success',
                           message: '修改成功!'
                       });
+                      // 调用 getOrderDetail 函数（假设是用于获取订单详细信息的函数），传入当前订单的 id
+                      // 并在获取成功后将返回的数据赋值给 this.order，用于更新页面展示的订单信息
                       getOrderDetail(this.id).then(response => {
                           this.order = response.data;
                       });
@@ -544,24 +609,35 @@
               });
           },
           showUpdateMoneyDialog() {
+              // 将 moneyDialogVisible 属性设置为 true，表示显示更新费用信息的对话框（同样可能用于控制界面显示隐藏）
               this.moneyDialogVisible = true;
+              // 设置 moneyInfo 对象中的 orderId 属性为当前订单的 id
               this.moneyInfo.orderId = this.order.id;
+              // 设置 moneyInfo 对象中的 freightAmount 属性为当前订单的运费金额
               this.moneyInfo.freightAmount = this.order.freightAmount;
+              // 设置 moneyInfo 对象中的 discountAmount 属性为当前订单的折扣金额
               this.moneyInfo.discountAmount = this.order.discountAmount;
+              // 设置 moneyInfo 对象中的 status 属性为当前订单的状态
               this.moneyInfo.status = this.order.status;
           },
           handleUpdateMoneyInfo() {
+              // 弹出确认框，询问用户是否要修改费用信息，设置相关按钮文本和提示框类型
               this.$confirm('是否要修改费用信息?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 调用 updateMoneyInfo 函数（推测用于向服务器发送修改费用信息请求），传入 moneyInfo 对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
                   updateMoneyInfo(this.moneyInfo).then(response => {
+                      // 将 moneyDialogVisible 属性设置为 false，隐藏更新费用信息的对话框
                       this.moneyDialogVisible = false;
+                      // 弹出成功消息提示框，显示修改成功信息
                       this.$message({
                           type: 'success',
                           message: '修改成功!'
                       });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
                       getOrderDetail(this.id).then(response => {
                           this.order = response.data;
                       });
@@ -569,17 +645,23 @@
               });
           },
           showMessageDialog() {
+              // 将 messageDialogVisible 属性设置为 true，用于显示消息对话框（可能是发送站内信相关的对话框）
               this.messageDialogVisible = true;
+              // 将 message 对象中的 title 属性设置为 null，可能用于初始化或清空标题内容
               this.message.title = null;
+              // 将 message 对象中的 content 属性设置为 null，可能用于初始化或清空内容
               this.message.content = null;
           },
           handleSendMessage() {
+              // 弹出确认框，询问用户是否要发送站内信，配置相关按钮文本和提示框类型
               this.$confirm('是否要发送站内信?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 将 messageDialogVisible 属性设置为 false，隐藏消息对话框
                   this.messageDialogVisible = false;
+                  // 弹出成功消息提示框，显示发送成功的提示信息
                   this.$message({
                       type: 'success',
                       message: '发送成功!'
@@ -587,25 +669,37 @@
               });
           },
           showCloseOrderDialog() {
+              // 将 closeDialogVisible 属性设置为 true，用于显示关闭订单的对话框
               this.closeDialogVisible = true;
+              // 将 closeInfo 对象中的 note 属性设置为 null，可能用于初始化备注内容（关闭订单相关备注）
               this.closeInfo.note = null;
+              // 将 closeInfo 对象中的 id 属性设置为当前的 id（推测是订单 id）
               this.closeInfo.id = this.id;
           },
           handleCloseOrder() {
+              // 弹出确认框，询问用户是否要关闭订单，配置按钮文本和提示框类型
               this.$confirm('是否要关闭?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建查询参数（可能用于向服务器传递关闭订单相关参数）
                   let params = new URLSearchParams();
+                  // 向 params 中添加参数 "ids"，值为包含当前订单 id 的数组（这里格式可能要根据后端要求，可能是用于批量操作订单关闭的参数形式）
                   params.append("ids", [this.closeInfo.id]);
+                  // 向 params 中添加参数 "note"，值为 closeInfo 对象中的 note（关闭订单的备注内容）
                   params.append("note", this.closeInfo.note);
+                  // 调用 closeOrder 函数（推测用于向服务器发送关闭订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
                   closeOrder(params).then(response => {
+                      // 将 closeDialogVisible 属性设置为 false，隐藏关闭订单的对话框
                       this.closeDialogVisible = false;
+                      // 弹出成功消息提示框，显示订单关闭成功的提示信息
                       this.$message({
                           type: 'success',
                           message: '订单关闭成功!'
                       });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
                       getOrderDetail(this.id).then(response => {
                           this.order = response.data;
                       });
@@ -613,26 +707,39 @@
               });
           },
           showMarkOrderDialog() {
+              // 将 markOrderDialogVisible 属性设置为 true，用于显示备注订单的对话框
               this.markOrderDialogVisible = true;
+              // 将 markInfo 对象中的 id 属性设置为当前订单的 id
               this.markInfo.id = this.id;
+              // 将 closeOrder 对象（这里可能是笔误，也许应该是 markInfo）中的 note 属性设置为 null，初始化备注内容
               this.closeOrder.note = null;
           },
           handleMarkOrder() {
+              // 弹出确认框，询问用户是否要备注订单，配置相关按钮文本和提示框类型
               this.$confirm('是否要备注订单?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建向服务器传递备注订单相关参数的对象
                   let params = new URLSearchParams();
+                  // 向 params 中添加参数 "id"，值为 markInfo 对象中的 id（订单 id）
                   params.append("id", this.markInfo.id);
+                  // 向 params 中添加参数 "note"，值为 markInfo 对象中的 note（备注内容）
                   params.append("note", this.markInfo.note);
+                  // 向 params 中添加参数 "status"，值为当前订单的状态
                   params.append("status", this.order.status);
+                  // 调用 updateOrderNote 函数（推测用于向服务器发送备注订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
                   updateOrderNote(params).then(response => {
+                      // 将 markOrderDialogVisible 属性设置为 false，隐藏备注订单的对话框
                       this.markOrderDialogVisible = false;
+                      // 弹出成功消息提示框，显示订单备注成功的提示信息
                       this.$message({
                           type: 'success',
                           message: '订单备注成功!'
                       });
+                      // 调用 getOrderDetail 函数获取订单详细信息，成功后更新 this.order
                       getOrderDetail(this.id).then(response => {
                           this.order = response.data;
                       });
@@ -640,75 +747,114 @@
               });
           },
           handleDeleteOrder() {
+              // 弹出确认框，询问用户是否要进行删除订单操作，配置相关按钮文本和提示框类型
               this.$confirm('是否要进行该删除操作?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning'
               }).then(() => {
+                  // 创建一个 URLSearchParams 对象，用于构建向服务器传递删除订单相关参数的对象
                   let params = new URLSearchParams();
+                  // 向 params 中添加参数 "ids"，值为包含当前订单 id 的数组（同样可能用于批量操作，这里单订单就是只含一个 id）
                   params.append("ids", [this.id]);
+                  // 调用 deleteOrder 函数（推测用于向服务器发送删除订单请求），传入构建好的参数对象
+                  // 在请求成功后的 then 回调中执行后续逻辑
                   deleteOrder(params).then(response => {
+                      // 弹出成功消息提示框，显示删除成功的提示信息，并设置提示框显示时长为 1000 毫秒（1 秒）
                       this.$message({
                           message: '删除成功！',
                           type: 'success',
                           duration: 1000
                       });
+                      // 使用路由对象（this.$router）返回上一页（可能是回到订单列表页等相关页面）
                       this.$router.back();
                   });
               })
           },
           showLogisticsDialog() {
+              // 将 logisticsDialogVisible 属性设置为 true，用于显示物流相关的对话框（可能展示物流信息等）
               this.logisticsDialogVisible = true;
           }
       }
-  }
   </script>
 <style scoped>
+    /* 定义类名为 detail-container 的样式规则，用于设置某个容器的样式 */
    .detail-container {
+        /* 设置宽度为页面宽度的 80% */
         width: 80%;
+        /* 设置内边距，上下左右均为 20 像素 */
         padding: 20px 20px 20px 20px;
+        /* 设置外边距，上下为 20 像素，左右自动居中 */
         margin: 20px auto;
     }
 
+    /* 定义类名为 operate-container 的样式规则，用于设置操作相关容器的样式 */
    .operate-container {
+        /* 设置背景颜色 */
         background: #F2F6FC;
+        /* 设置高度为 80 像素 */
         height: 80px;
+        /* 设置外边距，上外边距为 -20 像素，左右外边距为 -20 像素，下外边距为 0 像素 */
         margin: -20px -20px 0;
+        /* 设置行高为 80 像素，用于垂直居中内容 */
         line-height: 80px;
     }
 
+    /* 定义类名为 operate-button-container 的样式规则，用于设置操作按钮容器的样式 */
    .operate-button-container {
+        /* 让容器向右浮动 */
         float: right;
+        /* 设置右外边距为 20 像素 */
         margin-right: 20px
     }
 
+    /* 定义类名为 table-layout 的样式规则，可能用于设置表格布局相关的样式 */
    .table-layout {
+        /* 设置上外边距为 20 像素 */
         margin-top: 20px;
+        /* 设置左边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-left: 1px solid #DCDFE6;
+        /* 设置上边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-top: 1px solid #DCDFE6;
     }
 
+    /* 定义类名为 table-cell 的样式规则，可能用于设置表格单元格的样式 */
    .table-cell {
+        /* 设置高度为 60 像素 */
         height: 60px;
+        /* 设置行高为 40 像素，用于控制单元格内文本的垂直对齐等 */
         line-height: 40px;
+        /* 设置右边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-right: 1px solid #DCDFE6;
+        /* 设置下边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-bottom: 1px solid #DCDFE6;
+        /* 设置内边距为 10 像素 */
         padding: 10px;
+        /* 设置字体大小为 14 像素 */
         font-size: 14px;
+        /* 设置字体颜色 */
         color: #606266;
+        /* 设置文本水平居中 */
         text-align: center;
+        /* 当内容超出单元格范围时，隐藏超出部分 */
         overflow: hidden;
     }
 
+    /* 定义类名为 table-cell-title 的样式规则，可能用于设置表格标题单元格的样式 */
    .table-cell-title {
+        /* 设置右边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-right: 1px solid #DCDFE6;
+        /* 设置下边框样式，为 1 像素宽的实线，颜色为 #DCDFE6 */
         border-bottom: 1px solid #DCDFE6;
+        /* 设置内边距为 10 像素 */
         padding: 10px;
+        /* 设置背景颜色 */
         background: #F2F6FC;
+        /* 设置文本水平居中 */
         text-align: center;
+        /* 设置字体大小为 14 像素 */
         font-size: 14px;
+        /* 设置字体颜色 */
         color: #303133;
     }
 </style>
-
-