diff --git a/front-end/mall4m/app.js b/front-end/mall4m/app.js
index dd66751..735b006 100644
--- a/front-end/mall4m/app.js
+++ b/front-end/mall4m/app.js
@@ -1,25 +1,32 @@
-//app.js
-var http = require("utils/http.js");
+// app.js 这是小程序应用的入口文件，用于定义整个小程序的全局配置、生命周期函数以及共享的数据等
+
+var http = require("utils/http.js"); // 引入名为http.js的工具模块，可能用于处理网络请求等相关功能
+
 App({
-  onLaunch: function () {
-    console.log('mall4j.v230313')
-    // http.getToken();
-    // wx.getSetting({
-    //   success(res) {
-    //     if (!res.authSetting['scope.userInfo']) {
-    //       wx.navigateTo({
-    //         url: '/pages/login/login',
-    //       })
-    //     }
-    //   }
-    // })
-  },
-  globalData: {
-    // 定义全局请求队列
-    requestQueue: [],
-    // 是否正在进行登陆
-    isLanding: true,
-    // 购物车商品数量
-    totalCartCount: 0
-  }
+    // onLaunch是小程序的生命周期函数，在小程序初始化完成时触发
+    onLaunch: function () {
+        console.log('mall4j.v230313'); // 在控制台打印出一个标识字符串，可能用于版本之类的标记
+        // http.getToken();  // 原本可能是用于获取令牌（token）的调用，目前被注释掉了，也许暂时不需要在启动时获取或者功能还未完善
+
+        // 以下是获取用户授权设置信息的代码块
+        wx.getSetting({
+            success(res) {
+                // 判断用户是否已经授权了'scope.userInfo'（用户信息相关权限），如果没有授权
+                if (!res.authSetting['scope.userInfo']) {
+                    // 则跳转到名为'/pages/login/login'的页面，引导用户进行登录授权操作
+                    wx.navigateTo({
+                        url: '/pages/login/login',
+                    })
+                }
+            }
+        })
+    },
+    globalData: {
+        // 定义全局请求队列，可用于存放待处理的请求等相关操作，初始化为一个空数组
+        requestQueue: [],
+        // 用于标记是否正在进行登录操作，初始值设为true，后续可根据实际登录状态进行修改
+        isLanding: true,
+        // 用于记录购物车中的商品总数量，初始值设为0，在购物车相关操作时可更新这个值
+        totalCartCount: 0
+    }
 })
\ No newline at end of file
diff --git a/front-end/mall4m/components/coupon/coupon.js b/front-end/mall4m/components/coupon/coupon.js
index 9f80b77..550db1d 100644
--- a/front-end/mall4m/components/coupon/coupon.js
+++ b/front-end/mall4m/components/coupon/coupon.js
@@ -1,63 +1,92 @@
 var http = require('../../utils/http.js');
+// 定义一个微信小程序的组件
 Component({
   /**
    * 组件的属性列表
+   * 用于接收外部传入的各种数据，来控制组件的展示和行为等
    */
   properties: {
+    // 优惠券相关信息的对象，包含如couponId等具体详情数据
     item: Object,
+    // 数字类型，可能用于区分优惠券的类型等，具体用途需结合业务场景判断
     type: Number,
+    // 布尔类型，可能用于判断是否处于某种订单相关的场景等，具体由外部传入决定
     order: Boolean,
+    // 布尔类型，用于判断优惠券是否可使用，外部传入设置该状态
     canUse: Boolean,
+    // 数字类型，可能表示优惠券的序号或者索引等，具体依业务而定
     index: Number,
+    // 数字类型，也许和展示时间相关的类型区分有关，具体功能要看业务逻辑
     showTimeType: Number
   },
 
   /**
    * 组件的初始数据
+   * 在这里初始化组件内部使用的数据状态
    */
   data: {
+    // 初始设置stsType的值为4，具体含义可能和后续的业务逻辑相关，比如商品分类筛选等
     stsType: 4
-
   },
   // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
-  attached: function() {
-    //console.log(this.data.item);
+  attached: function () {
+    // 打印当前组件中data里的item数据，方便调试查看传入的优惠券相关信息，可根据实际需求决定是否保留该语句
+    // console.log(this.data.item);
   },
   /**
    * 组件的方法列表
+   * 定义了组件内可调用的各种方法，用于实现不同的业务功能，如操作优惠券等
    */
   methods: {
+    // 接收优惠券的方法
     receiveCoupon() {
+      // 获取当前组件中data里item对象的couponId属性值，作为要接收的优惠券的ID
       var couponId = this.data.item.couponId;
+      // 使用引入的http模块发起一个POST请求，向服务端请求接收优惠券
       http.request({
+        // 请求的接口地址，用于接收优惠券的服务端接口
         url: "/p/myCoupon/receive",
+        // 请求方法为POST
         method: "POST",
+        // 将获取到的优惠券ID作为请求的数据发送给服务端，此处可能需根据服务端要求调整格式，比如包装成对象等
         data: couponId,
         callBack: () => {
+          // 获取当前组件中的优惠券对象（此处可能是为了更新其相关状态）
           var coupon = this.data.item;
+          // 将优惠券的可接收状态设置为false，表示已接收
           coupon.canReceive = false;
+          // 通过setData更新组件中data里的item数据，从而更新组件的展示状态等
           this.setData({
             item: coupon
           })
         }
       })
     },
+    // 查看优惠券的方法，会触发一个名为'checkCoupon'的自定义事件，并传递相关数据
     checkCoupon(e) {
+      // 触发名为'checkCoupon'的自定义事件，并传递当前组件的索引（之前定义的index属性），该语句被注释掉了，可能有其他考虑，比如更换了传递数据的方式
       // this.triggerEvent('checkCoupon', this.data.index);
+      // 触发名为'checkCoupon'的自定义事件，传递包含当前点击元素的优惠券ID（从事件对象的dataset中获取）的对象，用于在外部处理查看优惠券的相关逻辑
       this.triggerEvent('checkCoupon', {
         couponId: e.currentTarget.dataset.couponid
       });
     },
     /**
-     * 立即使用
+     * 立即使用优惠券的方法
+     * 用于导航到相应的商品分类页面，并携带优惠券相关信息作为参数，以展示可使用优惠券的商品等
      */
     useCoupon() {
+      // 构建要导航到的页面地址，先设置基础的商品分类页面路径，并添加stsType参数（初始值为4，有其特定业务含义）
       var url = '/pages/prod-classify/prod-classify?sts=' + this.data.stsType;
+      // 获取当前组件中data里item对象的couponId属性值，作为要传递的优惠券ID
       var id = this.data.item.couponId;
+      // 设置页面标题为"优惠券活动商品"，用于在导航到的页面展示等
       var title = "优惠券活动商品";
+      // 如果获取到了优惠券ID，则将其和标题作为参数添加到页面地址后面，方便目标页面根据这些参数展示相应内容
       if (id) {
         url += "&tagid=" + id + "&title=" + title;
       }
+      // 使用微信小程序的导航API，跳转到构建好的页面地址对应的页面
       wx.navigateTo({
         url: url
       })
diff --git a/front-end/mall4m/components/coupon/coupon.wxml b/front-end/mall4m/components/coupon/coupon.wxml
index d34e46c..663b72d 100644
--- a/front-end/mall4m/components/coupon/coupon.wxml
+++ b/front-end/mall4m/components/coupon/coupon.wxml
@@ -1,30 +1,49 @@
+<!-- 这是一个优惠券展示的视图组件，根据canUse属性的值来决定是否添加'gray'类名，从而控制优惠券的样式（比如是否为灰色不可用状态） -->
 <view class="coupon-item {{canUse?'':'gray'}}">
-  <view class='left'>
-    <view class="num" wx:if="{{item.couponType == 1}}">
-      ￥
-      <text class="coupon-price">{{item.reduceAmount}}</text>
+    <!-- 优惠券左边部分的视图容器，用于展示优惠券金额、折扣、使用条件等信息 -->
+    <view class='left'>
+        <!-- 当优惠券类型（couponType）为1时，展示固定金额优惠的相关信息 -->
+        <view class="num" wx:if="{{item.couponType == 1}}">
+            <!-- 先展示人民币符号 -->
+            ￥
+            <!-- 展示具体的优惠金额，金额数据从item对象的reduceAmount属性获取 -->
+            <text class="coupon-price">{{item.reduceAmount}}</text>
+        </view>
+        <!-- 当优惠券类型（couponType）为2时，展示折扣优惠的相关信息 -->
+        <view class="num" wx:if="{{item.couponType == 2}}">
+            <!-- 展示具体的折扣数值，折扣数据从item对象的couponDiscount属性获取 -->
+            <text class="coupon-price">{{item.couponDiscount}}</text>折
+        </view>
+        <!-- 展示优惠券的使用条件，满多少金额可用，金额数据从item对象的cashCondition属性获取 -->
+        <view class='condition'>
+            满{{item.cashCondition}}元可用
+        </view>
     </view>
-    <view class="num" wx:if="{{item.couponType == 2}}">
-      <text class="coupon-price">{{item.couponDiscount}}</text>折
+    <!-- 优惠券右边部分的视图容器，用于展示优惠券适用商品类型、有效期、领取/使用按钮等信息 -->
+    <view class='right'>
+        <!-- 展示优惠券适用商品类型相关的描述信息 -->
+        <view class="c-des">
+            <!-- 根据suitableProdType的值判断是通用还是指定商品可用，并展示相应文字描述 -->
+            <text class="c-type">{{item.suitableProdType==0?'通用':'商品'}}</text> {{item.suitableProdType==0?'全场通用':'指定商品可用'}}
+        </view>
+        <!-- 展示优惠券有效期相关的信息 -->
+        <view class="c-date">
+            <!-- 当showTimeType为1且优惠券类型（couponType）为2时，展示领券后多少天失效的信息，天数从item对象的validDays属性获取 -->
+            <text wx:if="{{showTimeType==1 && item.couponType==2}}" class="c-data-info">领券{{item.validDays}}天后失效</text>
+            <!-- 其他情况展示具体的开始时间到结束时间的有效期范围，时间数据分别从item对象的startTime和endTime属性获取 -->
+            <text wx:else class="c-data-info">{{item.startTime}}~{{item.endTime}}</text>
+            <!-- 当优惠券可领取（canReceive为true）且不在订单场景（!order为true）时，展示“立即领取”按钮，并绑定点击事件'receiveCoupon'，点击可触发领取优惠券的操作 -->
+            <text class="c-btn" wx:if="{{item.canReceive &&!order}}" bindtap='receiveCoupon'>立即领取</text>
+            <!-- 当优惠券不可领取（!item.canReceive为true）且不在订单场景（!order为true）时，展示“立即使用”按钮，并绑定点击事件'useCoupon'，点击可触发使用优惠券的操作 -->
+            <text class="c-btn get-btn" wx:if="{{!item.canReceive &&!order}}" bindtap='useCoupon'>立即使用</text>
+        </view>
+        <!-- 当处于订单场景（order为true）且优惠券可用（canUse为true）时，展示选择按钮（checkbox）用于选择该优惠券，同时绑定点击事件'checkCoupon'，并传递优惠券ID（从item对象的couponId属性获取）等相关数据 -->
+        <view wx:if="{{order && canUse}}" class="sel-btn">
+            <checkbox color="#eb2444" data-couponid="{{item.couponId}}" checked="{{item.choose}}" bindtap="checkCoupon"></checkbox>
+        </view>
     </view>
-    <view class='condition'>
-      满{{item.cashCondition}}元可用
-    </view>
-  </view>
-  <view class='right'>
-    <view class="c-des">
-      <text class="c-type">{{item.suitableProdType==0?'通用':'商品'}}</text> {{item.suitableProdType==0?'全场通用':'指定商品可用'}}
-    </view>
-    <view class="c-date">
-      <text wx:if="{{showTimeType==1 && item.couponType==2}}" class="c-data-info">领券{{item.validDays}}天后失效</text>
-      <text wx:else class="c-data-info">{{item.startTime}}~{{item.endTime}}</text>
-      <text class="c-btn" wx:if="{{item.canReceive && !order}}" bindtap='receiveCoupon'>立即领取</text>
-      <text class="c-btn get-btn" wx:if="{{!item.canReceive && !order}}" bindtap='useCoupon'>立即使用</text>
-    </view>
-    <view wx:if="{{order && canUse}}" class="sel-btn">
-      <checkbox color="#eb2444" data-couponid="{{item.couponId}}" checked="{{item.choose}}" bindtap="checkCoupon"></checkbox>
-    </view>
-  </view>
-  <image class="tag-img" src="../../images/icon/coupon-used.png" wx:if="{{type==1}}"></image>
-  <image class="tag-img" src="../../images/icon/coupon-ot.png" wx:if="{{type==2}}"></image>
+    <!-- 当优惠券类型（type）为1时，展示对应的标签图片（已使用的优惠券图标） -->
+    <image class="tag-img" src="../../images/icon/coupon-used.png" wx:if="{{type==1}}"></image>
+    <!-- 当优惠券类型（type）为2时，展示对应的标签图片（其他类型的优惠券图标，具体需看实际图标含义） -->
+    <image class="tag-img" src="../../images/icon/coupon-ot.png" wx:if="{{type==2}}"></image>
 </view>
\ No newline at end of file
diff --git a/front-end/mall4m/components/coupon/coupon.wxss b/front-end/mall4m/components/coupon/coupon.wxss
index 1b3ab14..6bc47b3 100644
--- a/front-end/mall4m/components/coupon/coupon.wxss
+++ b/front-end/mall4m/components/coupon/coupon.wxss
@@ -1,118 +1,220 @@
-.coupon-item{
+/* 优惠券项目整体的样式类，用于设置优惠券的整体外观和布局等相关样式 */
+.coupon-item {
+    /* 设置外边距，上下外边距为15px，左右外边距为0 */
     margin: 15px 0;
+    /* 设置相对定位，方便其内部元素基于它进行定位 */
     position: relative;
-    box-shadow: 1px 1px 3px rgba(0,0,0,0.15);
+    /* 添加阴影效果，水平和垂直方向偏移1px，模糊半径3px，颜色透明度为0.15的黑色阴影 */
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
+    /* 设置高度为95px */
     height: 95px;
+    /* 设置背景颜色为白色 */
     background: #fff;
 }
-.coupon-item .left{
-      float: left;
+
+/* 优惠券项目中左边部分的样式类，用于设置优惠券左边区域的样式，比如颜色、布局等 */
+.coupon-item.left {
+    /* 设置左浮动，使其在水平方向上向左排列 */
+    float: left;
+    /* 设置文字颜色为白色 */
     color: #fff;
+    /* 设置文本居中对齐 */
     text-align: center;
+    /* 添加左边框，为1px的虚线，颜色为白色 */
     border-left: 1px dashed #fff;
+    /* 设置上下内边距为20px，左右内边距为0 */
     padding: 20px 0;
-    background: -webkit-gradient(linear,left top,right top,from(#F45C43),to(#eb2444));
-    background: -o-linear-gradient(left,#F45C43,#eb2444);
-    background: linear-gradient(left,#F45C43,#eb2444);
-    background: -webkit-linear-gradient(left,#F45C43,#eb2444);
+    /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器兼容写法） */
+    background: -webkit-gradient(linear, left top, right top, from(#F45C43), to(#eb2444));
+    /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（opera浏览器兼容写法） */
+    background: -o-linear-gradient(left, #F45C43, #eb2444);
+    /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（标准写法） */
+    background: linear-gradient(left, #F45C43, #eb2444);
+    /* 设置背景渐变，从#F45C43到#eb2444的线性渐变（webkit内核浏览器另一种兼容写法） */
+    background: -webkit-linear-gradient(left, #F45C43, #eb2444);
+    /* 设置宽度为260rpx（rpx是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */
     width: 260rpx;
+    /* 设置高度为55px */
     height: 55px;
 }
-.coupon-item .left .num{
-  font-weight:600;
-  font-size:36rpx;
-  height:70rpx;
-  line-height:70rpx;
-  font-family:arial;
+
+/* 优惠券项目左边部分中金额数字的样式类，用于设置金额数字相关的样式，比如字体、大小、行高等 */
+.coupon-item.left.num {
+    /* 设置字体加粗，权重为600 */
+    font-weight: 600;
+    /* 设置字体大小为36rpx */
+    font-size: 36rpx;
+    /* 设置高度为70rpx */
+    height: 70rpx;
+    /* 设置行高为70rpx，使文字垂直居中 */
+    line-height: 70rpx;
+    /* 设置字体为arial字体 */
+    font-family: arial;
 }
-.coupon-item .left .num .coupon-price{
-      font-size: 72rpx;
+
+/* 优惠券项目左边部分中金额数字里优惠券价格的样式类，用于对优惠券价格的字体等样式进行单独设置 */
+.coupon-item.left.num.coupon-price {
+    /* 设置字体大小为72rpx */
+    font-size: 72rpx;
+    /* 设置行高为72rpx */
     line-height: 72rpx;
-        display: inline-block;
+    /* 设置为行内块元素，方便在同一行内进行布局调整等 */
+    display: inline-block;
+    /* 设置字体为arial字体 */
     font-family: arial;
 }
-.coupon-item .left .condition{
+
+/* 优惠券项目左边部分中使用条件的样式类，用于设置优惠券使用条件相关的文本样式，比如字体、大小、溢出处理等 */
+.coupon-item.left.condition {
+    /* 设置字体大小为28rpx */
     font-size: 28rpx;
+    /* 设置行高为28rpx */
     line-height: 28rpx;
+    /* 设置为块级元素 */
     display: block;
+    /* 文本超出一行时不换行 */
     white-space: nowrap;
+    /* 超出部分隐藏 */
     overflow: hidden;
+    /* 超出部分用省略号显示 */
     text-overflow: ellipsis;
+    /* 设置左右内边距各2px */
     padding: 0 2px;
+    /* 设置字体为arial字体 */
     font-family: arial;
 }
-.coupon-item .right{
-  margin-left: 280rpx;
+
+/* 优惠券项目中右边部分的样式类，用于设置优惠券右边区域的样式，比如边距、布局等 */
+.coupon-item.right {
+    /* 设置左边距为280rpx，使其与左边部分隔开一定距离 */
+    margin-left: 280rpx;
+    /* 设置上下左右内边距为5px */
     padding: 5px;
+    /* 设置相对定位，方便其内部元素基于它进行定位 */
     position: relative;
 }
-.coupon-item .right .c-des{
-  height: 30px;
+
+/* 优惠券项目右边部分中描述信息的样式类，用于设置描述信息相关的样式，比如高度、字体、溢出处理等 */
+.coupon-item.right.c-des {
+    /* 设置高度为30px */
+    height: 30px;
+    /* 设置字体大小为26rpx */
     font-size: 26rpx;
+    /* 设置行高为30px */
     line-height: 30px;
+    /* 超出部分隐藏 */
     overflow: hidden;
+    /* 设置字体加粗，权重为600 */
     font-weight: 600;
 }
-.coupon-item .right .c-des .c-type{
-  font-size: 24rpx;
+
+/* 优惠券项目右边部分中描述信息里类型的样式类，用于设置优惠券类型相关的样式，比如字体、背景色、圆角等 */
+.coupon-item.right.c-des.c-type {
+    /* 设置字体大小为24rpx */
+    font-size: 24rpx;
+    /* 设置背景颜色为淡红色系，用于突出显示类型 */
     background: #fdf0f0;
+    /* 设置文字颜色为红色系，与背景形成对比 */
     color: #eb2444;
+    /* 设置圆角半径为8px，使元素看起来更圆润 */
     border-radius: 8px;
-    padding:3px 10px;
+    /* 设置上下左右内边距分别为3px和10px */
+    padding: 3px 10px;
 }
-.coupon-item .right .c-date{
-  font-size: 24rpx;
-  margin-top:25px;
+
+/* 优惠券项目右边部分中日期信息的样式类，用于设置日期相关的样式，比如字体、外边距等 */
+.coupon-item.right.c-date {
+    /* 设置字体大小为24rpx */
+    font-size: 24rpx;
+    /* 设置上边距为25px，使其与上面的描述信息隔开一定距离 */
+    margin-top: 25px;
 }
-.coupon-item .right .c-date .c-data-info{
-  font-family: arial;
+
+/* 优惠券项目右边部分中日期信息里具体数据信息的样式类，用于设置日期具体数据相关的样式，比如字体 */
+.coupon-item.right.c-date.c-data-info {
+    /* 设置字体为arial字体 */
+    font-family: arial;
 }
-.coupon-item .right .c-date .c-btn{
+
+/* 优惠券项目右边部分中日期信息里按钮的样式类，用于设置按钮的通用样式，比如位置、字体、圆角、背景等 */
+.coupon-item.right.c-date.c-btn {
+    /* 设置绝对定位，使其可以精确地定位在父元素内的某个位置 */
     position: absolute;
-    bottom:0;
-    right:10px;
+    /* 定位到底部，距离底部0距离 */
+    bottom: 0;
+    /* 定位到右边，距离右边10px距离 */
+    right: 10px;
+    /* 设置文字颜色为白色 */
     color: #fff;
+    /* 设置字体大小为24rpx */
     font-size: 24rpx;
+    /* 设置字体为arial字体 */
     font-family: arial;
+    /* 设置圆角半径为14px，使按钮看起来更圆润 */
     border-radius: 14px;
-    padding:3px 7px;
-    /* background: -webkit-gradient(linear,left top,right top,from(#6c96da),to(#6b83d7));
-    background: -o-linear-gradient(left,#6c96da,#6b83d7);
-    background: linear-gradient(left,#6c96da,#6b83d7);
-    background: -webkit-linear-gradient(left,#6c96da,#6b83d7); */
+    /* 设置上下左右内边距分别为3px和7px */
+    padding: 3px 7px;
+    /* 设置背景渐变，从#6c96da到#6b83d7的线性渐变（webkit内核浏览器兼容写法），这里被注释掉了，可能有其他背景设置需求 */
+    /* background: -webkit-gradient(linear, left top, right top, from(#6c96da), to(#6b83d7));
+    background: -o-linear-gradient(left, #6c96da, #6b83d7);
+    background: linear-gradient(left, #6c96da, #6b83d7);
+    background: -webkit-linear-gradient(left, #6c96da, #6b83d7); */
+    /* 设置背景颜色为红色系 */
     background: #eb2444;
+    /* 设置边框为1px的实线，颜色为红色系 */
     border: 1px solid #eb2444;
 }
 
-.coupon-item .right .c-date .c-btn.get-btn{
-  background: #fff;
-  border: 1px solid #eb2444;
-  color:#eb2444;
+/* 优惠券项目右边部分中日期信息里获取按钮的样式类，用于对获取按钮这种特定按钮进行样式覆盖，比如背景、文字颜色等 */
+.coupon-item.right.c-date.c-btn.get-btn {
+    /* 设置背景颜色为白色 */
+    background: #fff;
+    /* 设置边框为1px的实线，颜色为红色系 */
+    border: 1px solid #eb2444;
+    /* 设置文字颜色为红色系 */
+    color: #eb2444;
 }
 
-.coupon-item.gray .left{
-  background: #bbb;
+/* 优惠券项目处于灰色状态时左边部分的样式类，用于对灰色状态下左边部分的背景等样式进行覆盖 */
+.coupon-item.gray.left {
+    /* 设置背景颜色为灰色 */
+    background: #bbb;
 }
 
-.coupon-item.gray .right .c-des .c-type{
-  background: #bbb;
+/* 优惠券项目处于灰色状态时右边部分中描述信息里类型的样式类，用于对灰色状态下类型的背景、文字颜色等样式进行覆盖 */
+.coupon-item.gray.right.c-des.c-type {
+    /* 设置背景颜色为灰色 */
+    background: #bbb;
+    /* 设置文字颜色为白色 */
     color: #fff;
 }
 
-.coupon-item.gray .right .c-date .c-btn{
-  display: none;
+/* 优惠券项目处于灰色状态时右边部分中日期信息里按钮的样式类，用于隐藏灰色状态下的按钮 */
+.coupon-item.gray.right.c-date.c-btn {
+    /* 设置为不显示 */
+    display: none;
 }
 
-.coupon-item .tag-img{
-  position: absolute;
-  top:0;
-  right:0;
-  width:120rpx;
-  height:120rpx;
+/* 优惠券项目中标签图片的样式类，用于设置标签图片的位置、大小等样式 */
+.coupon-item.tag-img {
+    /* 设置绝对定位，方便精确放置在父元素内的某个位置 */
+    position: absolute;
+    /* 定位到顶部，距离顶部0距离 */
+    top: 0;
+    /* 定位到右边，距离右边0距离 */
+    right: 0;
+    /* 设置宽度为120rpx */
+    width: 120rpx;
+    /* 设置高度为120rpx */
+    height: 120rpx;
 }
 
-.coupon-item .sel-btn{
-  position:absolute;
-  right:10px;
-  top:35px;
-}
+/* 优惠券项目中选择按钮的样式类，用于设置选择按钮的位置等样式 */
+.coupon-item.sel-btn {
+    /* 设置绝对定位，方便精确放置在父元素内的某个位置 */
+    position: absolute;
+    /* 定位到右边，距离右边10px距离 */
+    right: 10px;
+    /* 定位到顶部，距离顶部35px距离 */
+    top: 35px;
+}
\ No newline at end of file
diff --git a/front-end/mall4m/components/production/production.js b/front-end/mall4m/components/production/production.js
index 6d25792..009b9fd 100644
--- a/front-end/mall4m/components/production/production.js
+++ b/front-end/mall4m/components/production/production.js
@@ -1,30 +1,40 @@
 // components/production/production.js
+// 定义一个小程序组件，使用Component函数来创建，组件在小程序中是可复用的独立模块，有自己的属性、数据和方法等
 Component({
-  /**
-   * 组件的属性列表
-   */
-  properties: {
-    item:Object,
-    sts:Number,
-  },
-
+    /**
+     * 组件的属性列表
+     * 这里定义了组件外部可以传入的属性，相当于组件的输入参数，外部使用者可以通过设置这些属性来影响组件的展示或行为等。
+     */
+    properties: {
+        // item属性，类型为Object（对象），具体的对象结构和用途应该由组件的使用场景决定，外部可以传入一个对象数据给组件
+        item: Object,
+        // sts属性，类型为Number（数字），同样其具体含义取决于组件的业务逻辑，外部传入一个数字值给组件
+        sts: Number,
+    },
 
-  /**
-   * 组件的初始数据
-   */
-  data: {
 
-  },
+    /**
+     * 组件的初始数据
+     * 这里定义组件内部私有的数据，在组件的生命周期内可以对这些数据进行修改、操作，初始时可以为空对象，后续可根据业务逻辑添加相应的数据。
+     */
+    data: {
 
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    toProdPage: function (e) {
-      var prodid = e.currentTarget.dataset.prodid;
-      wx.navigateTo({
-        url: '/pages/prod/prod?prodid=' + prodid,
-      })
     },
-  }
-})
+
+    /**
+     * 组件的方法列表
+     * 这里定义了组件内部可以调用的方法，用于实现各种功能，比如响应事件、进行数据处理等。
+     */
+    methods: {
+        // toProdPage方法，用于处理跳转到产品详情页面的功能，通常是在某个用户交互事件触发时调用，比如点击某个元素等情况。
+        toProdPage: function (e) {
+            // 从事件对象e的currentTarget.dataset中获取名为prodid的数据，这个数据应该是在页面元素上通过自定义数据属性（data-*）绑定的产品ID相关信息
+            var prodid = e.currentTarget.dataset.prodid;
+            // 使用wx.navigateTo API进行页面跳转，跳转到名为'/pages/prod/prod'的页面，并将获取到的产品ID（prodid）作为查询参数传递过去，
+            // 这样目标页面可以根据这个参数获取并展示对应的产品详情信息。
+            wx.navigateTo({
+                url: '/pages/prod/prod?prodid=' + prodid,
+            })
+        },
+    }
+})
\ No newline at end of file
diff --git a/front-end/mall4m/components/production/production.wxml b/front-end/mall4m/components/production/production.wxml
index 6e8639f..299872f 100644
--- a/front-end/mall4m/components/production/production.wxml
+++ b/front-end/mall4m/components/production/production.wxml
@@ -1,19 +1,32 @@
-    <view class='prod-items' bindtap='toProdPage' data-prodid="{{item.prodId}}">
-      <view class='hot-imagecont'>
+<!-- 这是一个商品展示的视图组件，绑定了点击事件'toProdPage'，点击该组件会触发跳转到商品详情页面的操作，同时传递商品ID（从item对象的prodId属性获取）作为参数 -->
+<view class='prod-items' bindtap='toProdPage' data-prodid="{{item.prodId}}">
+    <!-- 用于展示商品图片的容器视图 -->
+    <view class='hot-imagecont'>
+        <!-- 展示商品图片，图片的路径从item对象的pic属性获取，设置了对应的图片样式类'hotsaleimg' -->
         <image src='{{item.pic}}' class='hotsaleimg' ></image>
-      </view>
-      <view class='hot-text'>
+    </view>
+    <!-- 用于展示商品相关文本信息的容器视图 -->
+    <view class='hot-text'>
+        <!-- 展示商品名称，商品名称数据从item对象的prodName属性获取 -->
         <view class='hotprod-text'>{{item.prodName}}</view>
+        <!-- 当sts的值等于6时，展示商品的评价数量以及好评率相关信息，数据分别从item对象的prodCommNumber和positiveRating属性获取 -->
         <view class='prod-info' wx:if='{{sts==6}}'>{{item.prodCommNumber}}评价 {{item.positiveRating}}%好评</view>
+        <!-- 用于展示商品价格等文本信息的容器视图 -->
         <view class='prod-text-info'>
-          <view class='price'>
-            <text wx:if='{{sts==2}}' class='deadline-price'>限时价</text>
-            <text class='symbol'>￥</text>
-            <text class='big-num'>{{wxs.parsePrice(item.price)[0]}}</text>
-            <text class='small-num'>.{{wxs.parsePrice(item.price)[1]}}</text>
-          </view>
+            <!-- 用于展示价格相关内容的容器视图 -->
+            <view class='price'>
+                <!-- 当sts的值等于2时，展示“限时价”的提示文本 -->
+                <text wx:if='{{sts==2}}' class='deadline-price'>限时价</text>
+                <!-- 展示人民币符号 -->
+                <text class='symbol'>￥</text>
+                <!-- 展示商品价格的整数部分，这里调用了wxs模块中的parsePrice函数对item对象的price属性进行处理，取处理结果的第一个元素作为整数部分展示 -->
+                <text class='big-num'>{{wxs.parsePrice(item.price)[0]}}</text>
+                <!-- 展示商品价格的小数部分，同样通过wxs模块的parsePrice函数取第二个元素来展示 -->
+                <text class='small-num'>.{{wxs.parsePrice(item.price)[1]}}</text>
+            </view>
         </view>
-      </view>
     </view>
+</view>
 
+<!-- 引入wxs模块，模块名为'wxs'，对应的wxs代码文件路径为'../../wxs/number.wxs'，这个模块可能包含了一些对数据进行处理的函数，比如此处用到的parsePrice函数 -->
 <wxs module="wxs" src="../../wxs/number.wxs" />
\ No newline at end of file
diff --git a/front-end/mall4m/components/production/production.wxss b/front-end/mall4m/components/production/production.wxss
index 1224342..b2d5d6b 100644
--- a/front-end/mall4m/components/production/production.wxss
+++ b/front-end/mall4m/components/production/production.wxss
@@ -1,66 +1,112 @@
+/* 导入上级目录下的 app.wxss 文件，用于引入一些全局样式或基础样式设置，使当前样式文件可以复用其中的样式规则 */
 @import "../../app.wxss";
+
+/* 商品展示项（prod-items）的样式类，用于设置商品展示区域整体的样式，如宽度、布局、背景色、内边距等 */
 .prod-items {
-  width: 375rpx;
-  float: left;
-  background: #fff;
-  padding-bottom: 20rpx;
-  box-sizing: border-box;
+    /* 设置宽度为 375rpx（rpx 是微信小程序中的自适应单位，会根据屏幕宽度自动换算） */
+    width: 375rpx;
+    /* 设置左浮动，使其在水平方向上按照浮动规则排列 */
+    float: left;
+    /* 设置背景颜色为白色 */
+    background: #fff;
+    /* 设置底部内边距为 20rpx，用于和内部元素隔开一定距离等 */
+    padding-bottom: 20rpx;
+    /* 设置盒模型为 border-box，这样设置内边距和边框不会增加元素的整体宽度 */
+    box-sizing: border-box;
 }
 
-prod:nth-child(2n-1) .prod-items {
-  padding: 20rpx 10rpx 10rpx 20rpx;
+/* 选择奇数位置（2n - 1）的 prod 元素下的 prod-items 元素的样式规则，用于对奇数位置商品展示项设置不同的内边距样式 */
+prod:nth-child(2n - 1).prod-items {
+    /* 设置上、右、下、左的内边距分别为 20rpx、10rpx、10rpx、20rpx，以调整内部元素布局和间距 */
+    padding: 20rpx 10rpx 10rpx 20rpx;
 }
 
-prod:nth-child(2n) .prod-items {
-  padding: 20rpx 20rpx 10rpx 10rpx;
+/* 选择偶数位置（2n）的 prod 元素下的 prod-items 元素的样式规则，用于对偶数位置商品展示项设置不同的内边距样式 */
+prod:nth-child(2n).prod-items {
+    /* 设置上、右、下、左的内边距分别为 20rpx、20rpx、10rpx、10rpx，以调整内部元素布局和间距 */
+    padding: 20rpx 20rpx 10rpx 10rpx;
 }
 
-.hot-imagecont .hotsaleimg {
- width:345rpx;
-height:345rpx;
-
+/* 商品展示项中热门图片容器（hot-imagecont）里图片（hotsaleimg）的样式类，用于设置商品图片的尺寸大小 */
+.hot-imagecont.hotsaleimg {
+    /* 设置图片宽度为 345rpx */
+    width: 345rpx;
+    /* 设置图片高度为 345rpx */
+    height: 345rpx;
 }
 
-.hot-text .hotprod-text {
-  height: 76rpx;
-  font-size: 28rpx;
-  display: -webkit-box;
-  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  color: #000;
+/* 商品展示项中热门文本（hot-text）里商品名称（hotprod-text）的样式类，用于设置商品名称相关的文本样式，如高度、字体大小、文本溢出处理等 */
+.hot-text.hotprod-text {
+    /* 设置高度为 76rpx */
+    height: 76rpx;
+    /* 设置字体大小为 28rpx */
+    font-size: 28rpx;
+    /* 使用-webkit-box 布局方式，这是一种弹性盒子布局的旧浏览器兼容写法，用于实现多行文本溢出省略显示的效果 */
+    display: -webkit-box;
+    /* 允许单词在边界处断开换行，避免文本过长出现显示问题 */
+    word-break: break-all;
+    /* 超出部分隐藏 */
+    overflow: hidden;
+    /* 超出部分用省略号显示 */
+    text-overflow: ellipsis;
+    /* 再次声明使用-webkit-box 布局方式，这是兼容写法的一部分 */
+    display: -webkit-box;
+    /* 设置显示的行数为 2 行，结合前面的属性实现文本最多显示 2 行并溢出省略的效果 */
+    -webkit-line-clamp: 2;
+    /* 设置盒子的排列方向为垂直方向，用于多行文本的布局控制 */
+    -webkit-box-orient: vertical;
+    /* 设置文本颜色为黑色 */
+    color: #000;
 }
 
-.prod-items .hot-imagecont {
-  border-radius: 8rpx;
-  text-align: center;
-  font-size: 0;
+/* 商品展示项中热门图片容器（hot-imagecont）的样式类，用于设置图片容器的样式，如圆角、文本对齐、字体大小等 */
+.prod-items.hot-imagecont {
+    /* 设置圆角半径为 8rpx，使图片容器看起来更圆润 */
+    border-radius: 8rpx;
+    /* 设置文本居中对齐，对于图片容器内可能有的文本元素生效 */
+    text-align: center;
+    /* 设置字体大小为 0，通常用于消除图片与其他内联元素之间的默认间距问题等 */
+    font-size: 0;
 }
 
-.prod-items .hot-text {
-  margin-top: 20rpx;
+/* 商品展示项中热门文本（hot-text）的样式类，用于设置热门文本区域整体的外边距等样式，使其与上面的图片容器隔开一定距离 */
+.prod-items.hot-text {
+    /* 设置上边距为 20rpx，与上面的图片容器拉开距离 */
+    margin-top: 20rpx;
 }
 
-.prod-items .hot-text .prod-info {
-  font-size: 20rpx;
-  color: #777;
-  margin-top: 8rpx;
+/* 商品展示项中热门文本（hot-text）里商品评价信息（prod-info）的样式类，用于设置商品评价相关的文本样式，如字体大小、颜色、外边距等 */
+.prod-items.hot-text.prod-info {
+    /* 设置字体大小为 20rpx */
+    font-size: 20rpx;
+    /* 设置文本颜色为灰色系，用于和其他主要信息区分开来，体现辅助信息的感觉 */
+    color: #777;
+    /* 设置上边距为 8rpx，与上面的商品名称等信息隔开一定距离 */
+    margin-top: 8rpx;
 }
 
-.prod-items .hot-text .prod-text-info {
-  position: relative;
-  height: 50rpx;
-  line-height: 70rpx;
-  font-family: Arial;
+/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）的样式类，用于设置商品价格信息区域整体的样式，如位置、高度、行高等 */
+.prod-items.hot-text.prod-text-info {
+    /* 设置相对定位，方便其内部元素基于它进行定位 */
+    position: relative;
+    /* 设置高度为 50rpx */
+    height: 50rpx;
+    /* 设置行高为 70rpx，用于调整文本在垂直方向上的位置等 */
+    line-height: 70rpx;
+    /* 设置字体为 Arial 字体 */
+    font-family: Arial;
 }
 
-.prod-items .hot-text .prod-text-info .price {
-  color: #eb2444;
+/* 商品展示项中热门文本（hot-text）里商品价格信息（prod-text-info）中价格（price）的样式类，用于设置价格文本的颜色，使其突出显示 */
+.prod-items.hot-text.prod-text-info.price {
+    /* 设置文本颜色为红色系，通常用于醒目地展示价格信息 */
+    color: #eb2444;
 }
-.deadline-price{
-  font-size: 22rpx;
-  margin-right: 5rpx;
+
+/* 商品展示项中限时价（deadline-price）的样式类，用于设置限时价文本的字体大小、外边距等样式 */
+.deadline-price {
+    /* 设置字体大小为 22rpx */
+    font-size: 22rpx;
+    /* 设置右边距为 5rpx，使其与旁边的价格等文本隔开一定距离 */
+    margin-right: 5rpx;
 }
\ No newline at end of file