From f77570e5f0a34a484938eb459fdd1016392c65d0 Mon Sep 17 00:00:00 2001
From: Liuyujie <2268872166@qq.com>
Date: Tue, 17 Dec 2024 12:47:55 +0800
Subject: [PATCH] coupon

---
 src/views/sms/coupon/add.vue     |  19 +-
 src/views/sms/coupon/history.vue | 444 ++++++++++++++++++-------------
 src/views/sms/coupon/index.vue   | 317 +++++++++++++---------
 src/views/sms/coupon/update.vue  |  19 +-
 4 files changed, 478 insertions(+), 321 deletions(-)

diff --git a/src/views/sms/coupon/add.vue b/src/views/sms/coupon/add.vue
index e51fc1d..e381384 100644
--- a/src/views/sms/coupon/add.vue
+++ b/src/views/sms/coupon/add.vue
@@ -1,14 +1,21 @@
-<template> 
+<template>
+  <!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为false，可能用于区分添加或编辑操作 -->
   <coupon-detail :isEdit="false"></coupon-detail>
 </template>
+
 <script>
-  import CouponDetail from './components/CouponDetail'
-  export default {
-    name: 'addCoupon',
-    components: { CouponDetail }
-  }
+// 导入名为CouponDetail的组件，其定义在'./components/CouponDetail'文件中
+import CouponDetail from './components/CouponDetail';
+export default {
+  // 定义组件名称为addCoupon
+  name: 'addCoupon',
+  // 注册CouponDetail组件，使其能在模板中使用
+  components: { CouponDetail }
+}
 </script>
+
 <style scoped>
+<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
 </style>
 
 
diff --git a/src/views/sms/coupon/history.vue b/src/views/sms/coupon/history.vue
index 18a070d..9422889 100644
--- a/src/views/sms/coupon/history.vue
+++ b/src/views/sms/coupon/history.vue
@@ -1,45 +1,79 @@
-<template> 
+<template>
+  <!-- 整体的外层容器，用于布局包裹内部各部分内容 -->
   <div class="app-container">
+    <!-- 用于表格布局的容器 -->
     <div class="table-layout">
+      <!-- el-row行组件，里面放置多个列用于显示表格标题 -->
       <el-row>
+        <!-- el-col列组件，设置占4格宽度，显示名称标题 -->
         <el-col :span="4" class="table-cell-title">名称</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示优惠券类型标题 -->
         <el-col :span="4" class="table-cell-title">优惠券类型</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示可使用商品标题 -->
         <el-col :span="4" class="table-cell-title">可使用商品</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示使用门槛标题 -->
         <el-col :span="4" class="table-cell-title">使用门槛</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示面值标题 -->
         <el-col :span="4" class="table-cell-title">面值</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示状态标题 -->
         <el-col :span="4" class="table-cell-title">状态</el-col>
       </el-row>
+      <!-- el-row行组件，里面放置多个列用于显示对应优惠券的具体信息，使用了过滤器来格式化显示内容 -->
       <el-row>
+        <!-- el-col列组件，设置占4格宽度，显示优惠券名称 -->
         <el-col :span="4" class="table-cell">{{coupon.name}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示格式化后的优惠券类型 -->
         <el-col :span="4" class="table-cell">{{coupon.type | formatType}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示格式化后的可使用商品类型 -->
         <el-col :span="4" class="table-cell">{{coupon.useType | formatUseType}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，按格式显示使用门槛 -->
         <el-col :span="4" class="table-cell">满{{coupon.minPoint}}元可用</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示优惠券面值 -->
         <el-col :span="4" class="table-cell">{{coupon.amount}}元</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示格式化后的状态 -->
         <el-col :span="4" class="table-cell">{{coupon.endTime | formatStatus}}</el-col>
       </el-row>
+      <!-- el-row行组件，里面放置多个列用于显示表格另一部分标题 -->
       <el-row>
+        <!-- el-col列组件，设置占4格宽度，显示有效期标题 -->
         <el-col :span="4" class="table-cell-title">有效期</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示总发行量标题 -->
         <el-col :span="4" class="table-cell-title">总发行量</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示已领取标题 -->
         <el-col :span="4" class="table-cell-title">已领取</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示待领取标题 -->
         <el-col :span="4" class="table-cell-title">待领取</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示已使用标题 -->
         <el-col :span="4" class="table-cell-title">已使用</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示未使用标题 -->
         <el-col :span="4" class="table-cell-title">未使用</el-col>
       </el-row>
+      <!-- el-row行组件，里面放置多个列用于显示对应优惠券相关数量等具体信息，使用了日期格式化等过滤器 -->
       <el-row>
+        <!-- el-col列组件，设置占4格宽度，按格式显示有效期，使用了日期格式化过滤器 -->
         <el-col :span="4" class="table-cell" style="font-size: 13px">
           {{coupon.startTime|formatDate}}至{{coupon.endTime|formatDate}}
         </el-col>
+        <!-- el-col列组件，设置占4格宽度，显示总发行量 -->
         <el-col :span="4" class="table-cell">{{coupon.publishCount}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示已领取数量 -->
         <el-col :span="4" class="table-cell">{{coupon.receiveCount}}</el-col>
-        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.receiveCount}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，通过计算显示待领取数量 -->
+        <el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.receiveCount}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，显示已使用数量 -->
         <el-col :span="4" class="table-cell">{{coupon.useCount}}</el-col>
-        <el-col :span="4" class="table-cell">{{coupon.publishCount-coupon.useCount}}</el-col>
+        <!-- el-col列组件，设置占4格宽度，通过计算显示未使用数量 -->
+        <el-col :span="4" class="table-cell">{{coupon.publishCount - coupon.useCount}}</el-col>
       </el-row>
     </div>
+    <!-- 筛选搜索区域的卡片容器，设置无阴影效果 -->
     <el-card class="filter-container" shadow="never">
       <div>
+        <!-- 显示搜索图标 -->
         <i class="el-icon-search"></i>
+        <!-- 显示筛选搜索文字提示 -->
         <span>筛选搜索</span>
+        <!-- 用于触发查询搜索的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right"
           type="primary"
@@ -47,6 +81,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -55,8 +90,11 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 对应使用状态选择框的表单项 -->
           <el-form-item label="使用状态：">
+            <!-- 下拉选择框，双向绑定使用状态数据，设置占位提示等属性，通过循环生成下拉选项 -->
             <el-select v-model="listQuery.useStatus" placeholder="全部" clearable class="input-width">
               <el-option v-for="item in useTypeOptions"
                          :key="item.value"
@@ -65,41 +103,54 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <!-- 对应订单编号输入框的表单项 -->
           <el-form-item label="订单编号：">
+            <!-- 输入框，双向绑定订单编号数据，设置类名和占位提示 -->
             <el-input v-model="listQuery.orderSn" class="input-width" placeholder="订单编号"></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
+    <!-- 放置数据表格的容器 -->
     <div class="table-container">
+      <!-- 数据表格组件，绑定数据、设置宽度等属性以及加载状态 -->
       <el-table ref="couponHistoryTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- 显示优惠码的表格列 -->
         <el-table-column label="优惠码" width="160" align="center">
           <template slot-scope="scope">{{scope.row.couponCode}}</template>
         </el-table-column>
+        <!-- 显示领取会员的表格列 -->
         <el-table-column label="领取会员" width="140" align="center">
           <template slot-scope="scope">{{scope.row.memberNickname}}</template>
         </el-table-column>
+        <!-- 显示领取方式的表格列，使用过滤器格式化内容 -->
         <el-table-column label="领取方式" width="100" align="center">
           <template slot-scope="scope">{{scope.row.getType | formatGetType}}</template>
         </el-table-column>
+        <!-- 显示领取时间的表格列，使用日期格式化过滤器 -->
         <el-table-column label="领取时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatTime}}</template>
         </el-table-column>
+        <!-- 显示当前状态的表格列，使用过滤器格式化内容 -->
         <el-table-column label="当前状态" width="140" align="center">
           <template slot-scope="scope">{{scope.row.useStatus | formatCouponHistoryUseType}}</template>
         </el-table-column>
+        <!-- 显示使用时间的表格列，使用日期格式化过滤器 -->
         <el-table-column label="使用时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.useTime | formatTime}}</template>
         </el-table-column>
+        <!-- 显示订单编号的表格列，做了空值处理 -->
         <el-table-column label="订单编号" align="center">
           <template slot-scope="scope">{{scope.row.orderSn===null?'N/A':scope.row.orderSn}}</template>
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页组件的容器 -->
     <div class="pagination-container">
+      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -114,200 +165,231 @@
   </div>
 </template>
 <script>
-  import {formatDate} from '@/utils/date';
-  import {getCoupon} from '@/api/coupon';
-  import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
+// 从'@/utils/date'模块导入日期格式化相关的函数formatDate
+import {formatDate} from '@/utils/date';
+// 从'@/api/coupon'模块导入获取优惠券的函数getCoupon
+import {getCoupon} from '@/api/coupon';
+// 从'@/api/couponHistory'模块导入获取优惠券历史记录列表的函数，并起别名为fetchCouponHistoryList
+import {fetchList as fetchCouponHistoryList} from '@/api/couponHistory';
 
-  const defaultTypeOptions = [
-    {
-      label: '全场赠券',
-      value: 0
+// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
+const defaultTypeOptions = [
+  {
+    label: '全场赠券',
+    value: 0
+  },
+  {
+    label: '会员赠券',
+    value: 1
+  },
+  {
+    label: '购物赠券',
+    value: 2
+  },
+  {
+    label: '注册赠券',
+    value: 3
+  }
+];
+// 默认的列表查询参数对象，包含页码、每页数量、使用状态等初始值
+const defaultListQuery = {
+  pageNum: 1,
+  pageSize: 10,
+  useStatus: null,
+  orderSn: null,
+  couponId: null
+};
+// 默认的使用类型选项数组，包含未使用、已使用、已过期等状态及对应值
+const defaultUseTypeOptions = [
+  {
+    label: "未使用",
+    value: 0
+  },
+  {
+    label: "已使用",
+    value: 1
+  },
+  {
+    label: "已过期",
+    value: 2
+  }
+];
+
+export default {
+  name: 'couponHistoryList',
+  data() {
+    return {
+      // 优惠券相关数据，初始为空对象
+      coupon: {},
+      // 当前列表查询参数，初始为默认值副本
+      listQuery: Object.assign({}, defaultListQuery),
+      // 使用类型选项，初始为默认值副本
+      useTypeOptions: Object.assign({}, defaultUseTypeOptions),
+      // 优惠券历史记录列表数据，初始为null
+      list: null,
+      // 数据总条数，初始为null
+      total: null,
+      // 列表数据加载状态，初始为false
+      listLoading: false
+    }
+  },
+  created() {
+    // 获取优惠券数据，成功后赋值给coupon属性
+    getCoupon(this.$route.query.id).then(response => {
+      this.coupon = response.data;
+    });
+    // 设置列表查询参数中的优惠券id
+    this.listQuery.couponId = this.$route.query.id;
+    // 调用获取列表数据的方法
+    this.getList();
+  },
+  filters: {
+    // 根据值格式化优惠券类型显示文本的过滤器
+    formatType(type) {
+      for (let i = 0; i < defaultTypeOptions.length; i++) {
+        if (type === defaultTypeOptions[i].value) {
+          return defaultTypeOptions[i].label;
+        }
+      }
+      return '';
     },
-    {
-      label: '会员赠券',
-      value: 1
+    // 根据值格式化可使用商品类型显示文本的过滤器
+    formatUseType(useType) {
+      if (useType === 0) {
+        return '全场通用';
+      } else if (useType === 1) {
+        return '指定分类';
+      } else {
+        return '指定商品';
+      }
     },
-    {
-      label: '购物赠券',
-      value: 2
+    // 根据值格式化平台类型显示文本的过滤器
+    formatPlatform(platform) {
+      if (platform === 1) {
+        return '移动平台';
+      } else if (platform === 2) {
+        return 'PC平台';
+      } else {
+        return '全平台';
+      }
     },
-    {
-      label: '注册赠券',
-      value: 3
-    }
-  ];
-  const defaultListQuery = {
-    pageNum: 1,
-    pageSize: 10,
-    useStatus: null,
-    orderSn: null,
-    couponId: null
-  };
-  const defaultUseTypeOptions= [
-    {
-      label: "未使用",
-      value: 0
+    // 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
+    formatDate(time) {
+      if (time == null || time === '') {
+        return 'N/A';
+      }
+      let date = new Date(time);
+      return formatDate(date, 'yyyy-MM-dd')
     },
-    {
-      label: "已使用",
-      value: 1
+    // 根据结束时间判断并格式化状态显示文本的过滤器，对比当前时间判断是否过期
+    formatStatus(endTime) {
+      let now = new Date().getTime();
+      if (endTime > now) {
+        return '未过期'
+      } else {
+        return '已过期';
+      }
     },
-    {
-      label: "已过期",
-      value: 2
-    }
-  ];
-  export default {
-    name: 'couponHistoryList',
-    data() {
-      return {
-        coupon: {},
-        listQuery: Object.assign({}, defaultListQuery),
-        useTypeOptions:Object.assign({},defaultUseTypeOptions),
-        list:null,
-        total:null,
-        listLoading:false
+    // 根据值格式化领取方式显示文本的过滤器
+    formatGetType(type) {
+      if (type === 1) {
+        return '主动获取';
+      } else {
+        return '后台赠送';
+      }
+    },
+    // 根据值格式化优惠券历史记录使用类型显示文本的过滤器
+    formatCouponHistoryUseType(useType) {
+      if (useType === 0) {
+        return '未使用';
+      } else if (useType === 1) {
+        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')
     },
-    created() {
-      getCoupon(this.$route.query.id).then(response => {
-        this.coupon = response.data;
+  },
+  methods: {
+    // 获取优惠券历史记录列表的方法，设置加载状态为true，获取成功后更新数据及加载状态
+    getList() {
+      this.listLoading = true;
+      fetchCouponHistoryList(this.listQuery).then(response => {
+        this.listLoading = false;
+        this.list = response.data.list;
+        this.total = response.data.total;
       });
-      this.listQuery.couponId=this.$route.query.id;
+    },
+    // 重置搜索条件的方法，恢复为默认查询参数并设置优惠券id
+    handleResetSearch() {
+      this.listQuery = Object.assign({}, defaultListQuery);
+      this.listQuery.couponId = this.$route.query.id;
+    },
+    // 处理搜索列表的方法，重置页码后调用获取列表的方法
+    handleSearchList() {
+      this.listQuery.pageNum = 1;
       this.getList();
     },
-    filters: {
-      formatType(type) {
-        for (let i = 0; i < defaultTypeOptions.length; i++) {
-          if (type === defaultTypeOptions[i].value) {
-            return defaultTypeOptions[i].label;
-          }
-        }
-        return '';
-      },
-      formatUseType(useType) {
-        if (useType === 0) {
-          return '全场通用';
-        } else if (useType === 1) {
-          return '指定分类';
-        } else {
-          return '指定商品';
-        }
-      },
-      formatPlatform(platform) {
-        if (platform === 1) {
-          return '移动平台';
-        } else if (platform === 2) {
-          return 'PC平台';
-        } else {
-          return '全平台';
-        }
-      },
-      formatDate(time) {
-        if (time == null || time === '') {
-          return 'N/A';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd')
-      },
-      formatStatus(endTime) {
-        let now = new Date().getTime();
-        if (endTime > now) {
-          return '未过期'
-        } else {
-          return '已过期';
-        }
-      },
-      formatGetType(type) {
-        if(type===1){
-          return '主动获取';
-        }else{
-          return '后台赠送';
-        }
-      },
-      formatCouponHistoryUseType(useType) {
-        if (useType === 0) {
-          return '未使用';
-        } else if (useType === 1) {
-          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')
-      },
+    // 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
+    handleSizeChange(val) {
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
+      this.getList();
     },
-    methods: {
-      getList(){
-        this.listLoading=true;
-        fetchCouponHistoryList(this.listQuery).then(response=>{
-          this.listLoading=false;
-          this.list=response.data.list;
-          this.total=response.data.total;
-        });
-      },
-      handleResetSearch() {
-        this.listQuery = Object.assign({}, defaultListQuery);
-        this.listQuery.couponId=this.$route.query.id;
-      },
-      handleSearchList() {
-        this.listQuery.pageNum = 1;
-        this.getList();
-      },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
-      }
+    // 处理当前页码改变的方法，更新页码后调用获取列表的方法
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
     }
   }
+}
 </script>
-<style scoped>
-  .app-container {
-    width: 80%;
-    margin: 20px auto;
-  }
-
-  .filter-container {
-    margin-top: 20px;
-  }
-
-  .table-layout {
-    margin-top: 20px;
-    border-left: 1px solid #DCDFE6;
-    border-top: 1px solid #DCDFE6;
-  }
 
-  .table-cell {
-    height: 60px;
-    line-height: 40px;
-    border-right: 1px solid #DCDFE6;
-    border-bottom: 1px solid #DCDFE6;
-    padding: 10px;
-    font-size: 14px;
-    color: #606266;
-    text-align: center;
-    overflow: hidden;
-  }
-
-  .table-cell-title {
-    border-right: 1px solid #DCDFE6;
-    border-bottom: 1px solid #DCDFE6;
-    padding: 10px;
-    background: #F2F6FC;
-    text-align: center;
-    font-size: 14px;
-    color: #303133;
-  }
+<style scoped>
+<!-- 定义类名为app-container的样式，设置宽度、外边距使其水平居中 -->
+.app-container {
+  width: 80%;
+  margin: 20px auto;
+}
+<!-- 定义类名为filter-container的样式，设置上边距 -->
+.filter-container {
+  margin-top: 20px;
+}
+<!-- 定义类名为table-layout的样式，设置上边距、左边框、上边框 -->
+.table-layout {
+  margin-top: 20px;
+  border-left: 1px solid #DCDFE6;
+  border-top: 1px solid #DCDFE6;
+}
+<!-- 定义类名为table-cell的样式，设置高度、行高、边框、内边距、字体大小、颜色、文本对齐、溢出处理等属性 -->
+.table-cell {
+  height: 60px;
+  line-height: 40px;
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  overflow: hidden;
+}
+<!-- 定义类名为table-cell-title的样式，设置边框、内边距、背景色、文本对齐、字体大小、颜色等属性 -->
+.table-cell-title {
+  border-right: 1px solid #DCDFE6;
+  border-bottom: 1px solid #DCDFE6;
+  padding: 10px;
+  background: #F2F6FC;
+  text-align: center;
+  font-size: 14px;
+  color: #303133;
+}
 </style>
 
 
diff --git a/src/views/sms/coupon/index.vue b/src/views/sms/coupon/index.vue
index 9efd611..0939b86 100644
--- a/src/views/sms/coupon/index.vue
+++ b/src/views/sms/coupon/index.vue
@@ -1,9 +1,14 @@
-<template> 
+<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"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 用于重置筛选条件的按钮，绑定点击事件，设置样式等属性 -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,12 +25,18 @@
         </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.name" class="input-width" placeholder="优惠券名称"></el-input>
           </el-form-item>
+          <!-- 优惠券类型选择框的表单项 -->
           <el-form-item label="优惠券类型：">
+            <!-- 下拉选择框，双向绑定优惠券类型数据，设置占位提示等属性 -->
             <el-select v-model="listQuery.type" placeholder="全部" clearable class="input-width">
+              <!-- 通过循环生成下拉选项 -->
               <el-option v-for="item in typeOptions"
                          :key="item.value"
                          :label="item.label"
@@ -35,54 +47,72 @@
         </el-form>
       </div>
     </el-card>
+    <!-- 操作区域的卡片容器，设置无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
+      <!-- 用于触发添加操作的按钮，绑定点击事件 -->
       <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
     </el-card>
+    <!-- 放置数据表格的容器 -->
     <div class="table-container">
+      <!-- 数据表格组件，绑定数据、设置宽度等属性，还有选择改变等相关事件 -->
       <el-table ref="couponTable"
                 :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="100" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 显示优惠券名称的表格列 -->
         <el-table-column label="优惠劵名称" align="center">
           <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
+        <!-- 显示优惠券类型的表格列，使用过滤器格式化内容 -->
         <el-table-column label="优惠券类型" width="100" align="center">
           <template slot-scope="scope">{{scope.row.type | formatType}}</template>
         </el-table-column>
+        <!-- 显示可使用商品类型的表格列，使用过滤器格式化内容 -->
         <el-table-column label="可使用商品" width="100" align="center">
           <template slot-scope="scope">{{scope.row.useType | formatUseType}}</template>
         </el-table-column>
+        <!-- 显示使用门槛的表格列 -->
         <el-table-column label="使用门槛" width="140" align="center">
           <template slot-scope="scope">满{{scope.row.minPoint}}元可用</template>
         </el-table-column>
+        <!-- 显示面值的表格列 -->
         <el-table-column label="面值" width="100" align="center">
           <template slot-scope="scope">{{scope.row.amount}}元</template>
         </el-table-column>
+        <!-- 显示适用平台的表格列，使用过滤器格式化内容 -->
         <el-table-column label="适用平台" width="100" align="center">
           <template slot-scope="scope">{{scope.row.platform | formatPlatform}}</template>
         </el-table-column>
+        <!-- 显示有效期的表格列，使用日期格式化等过滤器 -->
         <el-table-column label="有效期" width="180" align="center">
           <template slot-scope="scope">{{scope.row.startTime|formatDate}}至{{scope.row.endTime|formatDate}}</template>
         </el-table-column>
+        <!-- 显示状态的表格列，使用过滤器根据结束时间判断并格式化状态 -->
         <el-table-column label="状态" width="100" align="center">
           <template slot-scope="scope">{{scope.row.endTime | formatStatus}}</template>
         </el-table-column>
+        <!-- 显示操作按钮的表格列 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
+            <!-- 查看按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleView(scope.$index, scope.row)">查看</el-button>
+            <!-- 编辑按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
               编辑</el-button>
+            <!-- 删除按钮，绑定点击事件 -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
@@ -90,7 +120,9 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页组件的容器 -->
     <div class="pagination-container">
+      <!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -105,147 +137,176 @@
   </div>
 </template>
 <script>
-  import {fetchList,deleteCoupon} from '@/api/coupon';
-  import {formatDate} from '@/utils/date';
-  const defaultListQuery = {
-    pageNum: 1,
-    pageSize: 10,
-    name: null,
-    type: null
-  };
-  const defaultTypeOptions=[
-    {
-      label: '全场赠券',
-      value: 0
+// 从'@/api/coupon'模块导入获取列表、删除优惠券相关的函数
+import {fetchList, deleteCoupon} from '@/api/coupon';
+// 从'@/utils/date'模块导入日期格式化相关的函数formatDate
+import {formatDate} from '@/utils/date';
+
+// 默认的列表查询参数对象，包含页码、每页数量、优惠券名称、类型等初始值
+const defaultListQuery = {
+  pageNum: 1,
+  pageSize: 10,
+  name: null,
+  type: null
+};
+// 默认的优惠券类型选项数组，包含全场赠券、会员赠券等类型及对应值
+const defaultTypeOptions = [
+  {
+    label: '全场赠券',
+    value: 0
+  },
+  {
+    label: '会员赠券',
+    value: 1
+  },
+  {
+    label: '购物赠券',
+    value: 2
+  },
+  {
+    label: '注册赠券',
+    value: 3
+  }
+];
+
+export default {
+  name: 'couponList',
+  data() {
+    return {
+      // 当前列表查询参数，初始为默认值副本
+      listQuery: Object.assign({}, defaultListQuery),
+      // 优惠券类型选项，初始为默认值副本
+      typeOptions: Object.assign({}, defaultTypeOptions),
+      // 优惠券列表数据，初始为null
+      list: null,
+      // 数据总条数，初始为null
+      total: null,
+      // 列表数据加载状态，初始为false
+      listLoading: false,
+      // 多选选中的记录，初始为空数组
+      multipleSelection: []
+    }
+  },
+  created() {
+    // 组件创建时调用，用于获取优惠券列表数据
+    this.getList();
+  },
+  filters: {
+    // 根据值格式化优惠券类型显示文本的过滤器
+    formatType(type) {
+      for (let i = 0; i < defaultTypeOptions.length; i++) {
+        if (type === defaultTypeOptions[i].value) {
+          return defaultTypeOptions[i].label;
+        }
+      }
+      return '';
+    },
+    // 根据值格式化可使用商品类型显示文本的过滤器
+    formatUseType(useType) {
+      if (useType === 0) {
+        return '全场通用';
+      } else if (useType === 1) {
+        return '指定分类';
+      } else {
+        return '指定商品';
+      }
     },
-    {
-      label: '会员赠券',
-      value: 1
+    // 根据值格式化适用平台显示文本的过滤器
+    formatPlatform(platform) {
+      if (platform === 1) {
+        return '移动平台';
+      } else if (platform === 2) {
+        return 'PC平台';
+      } else {
+        return '全平台';
+      }
     },
-    {
-      label: '购物赠券',
-      value: 2
+    // 格式化日期的过滤器，对传入时间进行处理，为空则返回特定文本，否则按指定格式返回格式化后的日期
+    formatDate(time) {
+      if (time == null || time === '') {
+        return 'N/A';
+      }
+      let date = new Date(time);
+      return formatDate(date, 'yyyy-MM-dd')
     },
-    {
-      label: '注册赠券',
-      value: 3
-    }
-  ];
-  export default {
-    name:'couponList',
-    data() {
-      return {
-        listQuery:Object.assign({},defaultListQuery),
-        typeOptions:Object.assign({},defaultTypeOptions),
-        list:null,
-        total:null,
-        listLoading:false,
-        multipleSelection:[]
+    // 根据结束时间判断并格式化优惠券状态显示文本的过滤器，对比当前时间判断是否过期
+    formatStatus(endTime) {
+      let now = new Date().getTime();
+      let endDate = new Date(endTime);
+      if (endDate > now) {
+        return '未过期'
+      } else {
+        return '已过期';
       }
+    }
+  },
+  methods: {
+    // 重置搜索条件的方法，恢复为默认查询参数
+    handleResetSearch() {
+      this.listQuery = Object.assign({}, defaultListQuery);
     },
-    created(){
+    // 处理搜索列表的方法，重置页码后调用获取列表的方法
+    handleSearchList() {
+      this.listQuery.pageNum = 1;
       this.getList();
     },
-    filters:{
-      formatType(type){
-        for(let i=0;i<defaultTypeOptions.length;i++){
-          if(type===defaultTypeOptions[i].value){
-            return defaultTypeOptions[i].label;
-          }
-        }
-        return '';
-      },
-      formatUseType(useType){
-        if(useType===0){
-          return '全场通用';
-        }else if(useType===1){
-          return '指定分类';
-        }else{
-          return '指定商品';
-        }
-      },
-      formatPlatform(platform){
-        if(platform===1){
-          return '移动平台';
-        }else if(platform===2){
-          return 'PC平台';
-        }else{
-          return '全平台';
-        }
-      },
-      formatDate(time){
-        if(time==null||time===''){
-          return 'N/A';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd')
-      },
-      formatStatus(endTime){
-        let now = new Date().getTime();
-        let endDate = new Date(endTime);
-        if(endDate>now){
-          return '未过期'
-        }else{
-          return '已过期';
-        }
-      }
+    // 处理多选选择改变的方法，更新多选选中的记录
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
     },
-    methods:{
-      handleResetSearch() {
-        this.listQuery = Object.assign({}, defaultListQuery);
-      },
-      handleSearchList() {
-        this.listQuery.pageNum = 1;
-        this.getList();
-      },
-      handleSelectionChange(val){
-        this.multipleSelection = val;
-      },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      handleCurrentChange(val) {
-        this.listQuery.pageNum = val;
-        this.getList();
-      },
-      handleAdd(){
-        this.$router.push({path: '/sms/addCoupon'})
-      },
-      handleView(index, row) {
-        this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
-      },
-      handleUpdate(index, row) {
-        this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
-      },
-      handleDelete(index, row) {
-        this.$confirm('是否进行删除操作?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          deleteCoupon(row.id).then(response=>{
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            });
-            this.getList();
+    // 处理每页显示数量改变的方法，重置页码，更新每页数量后调用获取列表的方法
+    handleSizeChange(val) {
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
+      this.getList();
+    },
+    // 处理当前页码改变的方法，更新页码后调用获取列表的方法
+    handleCurrentChange(val) {
+      this.listQuery.pageNum = val;
+      this.getList();
+    },
+    // 处理添加操作的方法，通过路由跳转至添加优惠券的页面
+    handleAdd() {
+      this.$router.push({path: '/sms/addCoupon'})
+    },
+    // 处理查看操作的方法，通过路由跳转至优惠券历史记录页面，并传递对应优惠券的id
+    handleView(index, row) {
+      this.$router.push({path: '/sms/couponHistory', query: {id: row.id}})
+    },
+    // 处理编辑操作的方法，通过路由跳转至编辑优惠券的页面，并传递对应优惠券的id
+    handleUpdate(index, row) {
+      this.$router.push({path: '/sms/updateCoupon', query: {id: row.id}})
+    },
+    // 处理删除操作的方法，弹出确认框，确认后调用删除函数，成功后提示并重新获取列表数据
+    handleDelete(index, row) {
+      this.$confirm('是否进行删除操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteCoupon(row.id).then(response => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
           });
-        })
-      },
-      getList(){
-        this.listLoading=true;
-        fetchList(this.listQuery).then(response=>{
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
+          this.getList();
         });
-      }
+      })
+    },
+    // 获取优惠券列表数据的方法，设置加载状态为true，获取成功后更新数据及加载状态
+    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>
+<!-- scoped属性使样式仅作用于当前组件。.input-width类设置元素宽度为203px。 -->
   .input-width {
     width: 203px;
   }
diff --git a/src/views/sms/coupon/update.vue b/src/views/sms/coupon/update.vue
index 490610b..8e524f4 100644
--- a/src/views/sms/coupon/update.vue
+++ b/src/views/sms/coupon/update.vue
@@ -1,14 +1,21 @@
-<template> 
+<template>
+  <!-- 在模板中使用了coupon-detail组件，并传递isEdit属性值为true，可能用于告知该组件当前处于编辑模式 -->
   <coupon-detail :isEdit="true"></coupon-detail>
 </template>
+
 <script>
-  import CouponDetail from './components/CouponDetail'
-  export default {
-    name: 'updateCoupon',
-    components: { CouponDetail }
-  }
+// 从'./components/CouponDetail'文件路径导入名为CouponDetail的组件
+import CouponDetail from './components/CouponDetail';
+export default {
+  // 定义当前组件名称为updateCoupon
+  name: 'updateCoupon',
+  // 注册CouponDetail组件，使其能在模板中使用
+  components: { CouponDetail }
+}
 </script>
+
 <style scoped>
+<!-- 带有scoped属性的style标签，里面样式仅作用于当前组件，目前为空 -->
 </style>