Merge branch 'qjh' of https://bdgit.educoder.net/pvtfxms7o/yudao

front-end/mall4uni/src/pages/prod-classify/prod-classify.scss

@@ -1,38 +1,48 @@
+/* 容器样式 */
 .container {
-  background: #f4f4f4;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
-  min-height: 100vh;
+  min-height: 100vh; /* 最小高度为视口高度，确保内容不满屏时也有足够的空间 */
-  padding: 7px;
+  padding: 7px; /* 内边距，给容器内的元素留出一定的空间 */
 }
+
+/* 固定在顶部的线条 */
 .line-fix {
-  width: 100%;
+  width: 100%; /* 线条宽度为100%，覆盖整个屏幕宽度 */
-  height: 2rpx;
+  height: 2rpx; /* 线条高度为2rpx（响应式单位），非常细的一条线 */
-  background: #e1e1e1;
+  background: #e1e1e1; /* 线条颜色为浅灰色 */
-  position: fixed;
+  position: fixed; /* 将线条固定在页面顶部，不会随页面滚动而移动 */
-  top: 0;
+  top: 0; /* 线条距离页面顶部0像素 */
 }
+
+/* 标题背景样式 */
 .tit-background {
-  width: 100%;
+  width: 100%; /* 背景宽度为100%，覆盖整个屏幕宽度 */
-  height: 20rpx;
+  height: 20rpx; /* 背景高度为20rpx（响应式单位） */
-  background: #f4f4f4;
+  background: #f4f4f4; /* 背景颜色为浅灰色 */
 }
+
+/* 商品列表样式 */
 .prod-list {
-  display: flex;
+  display: flex; /* 使用弹性布局，使子元素可以灵活排列 */
-  flex-wrap: wrap;
+  flex-wrap: wrap; /* 允许子元素换行显示 */
-  justify-content: space-between;
+  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
 }
+
+/* 深度选择器，用于修改子组件的样式 */
 :deep(.prod-items) {
-  display: inline-block;
+  display: inline-block; /* 将商品项设置为行内块级元素，允许在同一行中显示多个商品 */
-  width: 345rpx !important;
+  width: 345rpx !important; /* 设置商品项的宽度为345rpx，并使用!important确保优先级 */
-  &:nth-child(2n) {
+  &:nth-child(2n) { /* 对于每第二个商品项 */
-    margin-left: 30rpx;
+    margin-left: 30rpx; /* 左边距为30rpx，使第二列的商品与第一列保持一定间距 */
   }
 }
-/* 空 */
+
+/* 空状态提示样式 */
 .empty {
-  display: block;
+  display: block; /* 将空状态提示设置为块级元素 */
-  width: 100%;
+  width: 100%; /* 提示宽度为100%，覆盖整个父容器 */
-  font-size: 26rpx;
+  font-size: 26rpx; /* 字体大小为26rpx（响应式单位） */
-  color: #999;
+  color: #999; /* 文字颜色为浅灰色 */
-  margin-top: 20vh;
+  margin-top: 20vh; /* 上边距为视口高度的20%，将提示居中显示 */
-  text-align: center;
+  text-align: center; /* 文字水平居中 */
 }

front-end/mall4uni/src/pages/prod-classify/prod-classify.vue

@@ -1,16 +1,13 @@
 <template>
   <view class="container">
     <view>
-      <block
+      <!-- 使用v-for循环渲染商品列表 -->
-        v-for="(item, index) in prodList"
+      <block v-for="(item, index) in prodList" :key="index">
-        :key="index"
+        <!-- 将每个商品项传递给production组件 -->
-      >
         <production :item="item" />
       </block>
-      <view
+      <!-- 如果没有商品数据，则显示“暂无数据”的提示信息 -->
-        v-if="!prodList.length"
+      <view v-if="!prodList.length" class="empty">
-        class="empty"
-      >
         暂无数据
       </view>
     </view>
@@ -18,65 +15,66 @@
 </template>
 
 <script setup>
-const sts = ref(0)
+  // 定义响应式变量
-const title = ref('')
+  const sts = ref(0) // 商品状态标识符
-const current = ref(1)
+  const title = ref('') // 页面标题
-const size = ref(10)
+  const current = ref(1) // 当前页码
-const pages = ref(0)
+  const size = ref(10) // 每页显示的商品数量
-const tagid = ref(0)
+  const pages = ref(0) // 总页数
+  const tagid = ref(0) // 标签ID
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad((options) => {
+    // 初始化分页参数
     current.value = 1
     pages.value = 0
+    // 设置sts和title值
     sts.value = options.sts
     title.value = options.title ? options.title : ''
 
+    // 如果存在tagid选项，则设置标签ID
     if (options.tagid) {
       tagid.value = options.tagid
     }
 
+    // 根据sts和tagid设置页面导航栏标题
     if (sts.value == 0) {
-    if (options.tagid == 1) {
+      switch (options.tagid) {
-      uni.setNavigationBarTitle({
+        case '1':
-        title: '每日上新'
+          uni.setNavigationBarTitle({ title: '每日上新' })
-      })
+          break
-    } else if (options.tagid == 2) {
+        case '2':
-      uni.setNavigationBarTitle({
+          uni.setNavigationBarTitle({ title: '商城热卖' })
-        title: '商城热卖'
+          break
-      })
+        case '3':
-    } else if (options.tagid == 3) {
+          uni.setNavigationBarTitle({ title: '更多宝贝' })
-      uni.setNavigationBarTitle({
+          break
-        title: '更多宝贝'
-      })
       }
-  } else if (sts.value == 1) {
-    uni.setNavigationBarTitle({
-      title: '新品推荐'
-    })
-  } else if (sts.value == 2) {
-    uni.setNavigationBarTitle({
-      title: '限时特惠'
-    })
-  } else if (sts.value == 3) {
-    uni.setNavigationBarTitle({
-      title: '每日疯抢'
-    })
-  } else if (sts.value == 4) {
-    uni.setNavigationBarTitle({
-      title: '优惠券活动商品'
-    })
-  } else if (sts.value == 5) {
-    uni.setNavigationBarTitle({
-      title: '我的收藏商品'
-    })
     } else {
-    uni.setNavigationBarTitle({
+      switch (sts.value) {
-      title: title.value
+        case 1:
-    })
+          uni.setNavigationBarTitle({ title: '新品推荐' })
+          break
+        case 2:
+          uni.setNavigationBarTitle({ title: '限时特惠' })
+          break
+        case 3:
+          uni.setNavigationBarTitle({ title: '每日疯抢' })
+          break
+        case 4:
+          uni.setNavigationBarTitle({ title: '优惠券活动商品' })
+          break
+        case 5:
+          uni.setNavigationBarTitle({ title: '我的收藏商品' })
+          break
+        default:
+          uni.setNavigationBarTitle({ title: title.value })
+      }
     }
 
+    // 加载商品数据
     loadProdData(options)
   })
 
@@ -84,8 +82,9 @@ onLoad((options) => {
    * 页面上拉触底事件的处理函数
    */
   onReachBottom(() => {
+    // 如果当前页小于总页数，则增加页码并加载更多数据
     if (current.value < pages.value) {
-    current.value = current.value + 1
+      current.value++
       loadProdData()
     }
   })
@@ -96,6 +95,7 @@ onReachBottom(() => {
   const loadProdData = (options) => {
     const stsParam = sts.value
 
+    // 根据stsParam的值调用不同的商品获取方法
     if (stsParam == 0) {
       // 分组标签商品列表
       getTagProd()
@@ -120,9 +120,17 @@ const loadProdData = (options) => {
     }
   }
 
+  // 响应式变量用于存储商品列表
   const prodList = ref([])
+
+  /**
+   * 获取活动商品列表
+   */
   const getActProd = (url) => {
+    // 显示加载指示器
     uni.showLoading()
+
+    // 发送HTTP请求获取商品数据
     http.request({
       url,
       method: 'GET',
@@ -130,17 +138,18 @@ const getActProd = (url) => {
         current: current.value,
         size: size.value
       }
-  })
+    }).then(({ data }) => {
-    .then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
-        list = prodList.value
+        list = prodList.value.concat(data.records)
-        list = list.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
   }
@@ -149,7 +158,10 @@ const getActProd = (url) => {
    * 获取我的收藏商品
    */
   const getCollectionProd = () => {
+    // 显示加载指示器
     uni.showLoading()
+
+    // 发送HTTP请求获取收藏商品数据
     http.request({
       url: '/p/user/collection/prods',
       method: 'GET',
@@ -157,26 +169,30 @@ const getCollectionProd = () => {
         current: current.value,
         size: size.value
       }
-  })
+    }).then(({ data }) => {
-    .then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current == 1) {
         list = data.records
       } else {
-        list = prodList.value
+        list = prodList.value.concat(data.records)
-        list = list.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
   }
 
   /**
- * 获取标签列表
+   * 获取标签商品列表
    */
   const getTagProd = () => {
+    // 显示加载指示器
     uni.showLoading()
+
+    // 发送HTTP请求获取标签商品数据
     http.request({
       url: '/prod/prodListByTagId',
       method: 'GET',
@@ -185,16 +201,18 @@ const getTagProd = () => {
         current: current.value,
         size: size.value
       }
-  })
+    }).then(({ data }) => {
-    .then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
         list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
   }
@@ -203,7 +221,10 @@ const getTagProd = () => {
    * 获取优惠券商品列表
    */
   const getProdByCouponId = (id) => {
+    // 显示加载指示器
     uni.showLoading()
+
+    // 发送HTTP请求获取优惠券商品数据
     http.request({
       url: '/coupon/prodListByCouponId',
       method: 'GET',
@@ -212,21 +233,23 @@ const getProdByCouponId = (id) => {
         current: current.value,
         size: size.value
       }
-  })
+    }).then(({ data }) => {
-    .then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
         list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
   }
 </script>
 
 <style scoped lang="scss">
-@use './prod-classify.scss';
+  @use './prod-classify.scss'; /* 引入外部样式文件 */
 </style>

front-end/mall4uni/src/pages/prod/prod.scss

@@ -1,26 +1,35 @@
-.container {
+.c /* 容器样式，设置了背景颜色、高度为100%（相对于父元素），并且在底部留出150rpx的内边距 */
+container {
   background: #f4f4f4;
   height: 100%;
   padding-bottom: 150rpx;
 }
+
+/* 轮播图组件，设定了高度、宽度以及下边框。内部图片也设定了相同的高度和宽度以确保适应轮播图容器 */
 swiper {
   height: 750rpx;
   width: 100%;
   border-bottom: 2rpx solid #f8f8f8;
+
   image {
     height: 750rpx;
     width: 100%;
   }
 }
+
+/* 产品信息区域，设置了上下左右的内边距，相对定位，白色背景 */
 .prod-info {
   padding: 30rpx 30rpx 0 30rpx;
   position: relative;
   background: #fff;
 }
+
+/* 标题包装器，使用了相对定位来放置子元素，并定义了行高和右边距 */
 .tit-wrap {
   position: relative;
   line-height: 40rpx;
   padding-right: 104rpx;
+  /* 列元素，绝对定位在标题包装器的右上角，作为额外的信息展示，如收藏按钮等 */
   .col {
     position: absolute;
     top: 0;
@@ -30,12 +39,14 @@ swiper {
     font-size: 20rpx;
     padding-left: 20rpx;
     text-align: center;
+    /* 列内的图标，设置为块级元素并居中显示 */
     image {
       display: block;
       margin: auto;
       width: 40rpx;
       height: 40rpx;
     }
+    /* 在列元素左侧添加一条竖线装饰 */
     &::after {
       content: "";
       display: block;
@@ -49,11 +60,15 @@ swiper {
     }
   }
 }
+
+/* 产品标题，设定字体大小、颜色和右边距 */
 .prod-tit {
   font-size: 32rpx;
   color: #333;
   padding-right: 20rpx;
 }
+
+/* 销量段落，设置了背景色、行高、颜色、字体大小、上边距和右边距 */
 .sales-p {
   background: #fff;
   line-height: 40rpx;
@@ -62,29 +77,38 @@ swiper {
   margin-top: 6rpx;
   margin-right: 104rpx;
 }
+
+/* 产品价格部分，包含新旧价格对比 */
 .prod-price {
   font-size: 30rpx;
   height: 100rpx;
   line-height: 100rpx;
-}
+  /* 新价格的颜色、字体大小、加粗和右边距 */
   .price {
     color: #eb2444;
     font-size: 24rpx;
     font-weight: 600;
     margin-right: 30rpx;
   }
+  /* 新价格的数字部分，加大字体 */
   .price-num {
     font-size: 46rpx;
     font-weight: 400;
   }
+  /* 原价，较小字体，灰色，带删除线 */
   .ori-price {
     font-size: 25rpx;
     color: #999;
     text-decoration: line-through;
   }
+}
+
+/* 销量文字的颜色 */
 .sales {
   color: #999;
 }
+
+/* 更多选项按钮，绝对定位在右侧，设置了宽度、顶部位置、文本对齐、字体大小和颜色 */
 .more {
   position: absolute;
   right: 20rpx;
@@ -95,13 +119,15 @@ swiper {
   color: #999;
   letter-spacing: 1px;
 }
+
+/* SKU（库存保有单位）信息，设置了内边距、背景色、外边距、相对定位和行高 */
 .sku {
   padding: 20rpx;
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
-}
+  /* SKU标题，绝对定位在左上角，作为SKU信息的标签 */
   .sku-tit {
     position: absolute;
     display: inline-block;
@@ -111,6 +137,7 @@ swiper {
     top: 20rpx;
     color: #999;
   }
+  /* SKU内容，从标题右侧开始，单行显示，超出部分用省略号代替 */
   .sku-con {
     margin: 0 80rpx;
     white-space: nowrap;
@@ -119,25 +146,27 @@ swiper {
     font-size: 28rpx;
     font-weight: bold;
   }
+}
+
+/* 评论区包裹，设置了背景色、外边距、相对定位和行高 */
 .cmt-wrap {
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
-}
+  /* 评论区标题，较大字体，带有下边框，内边距 */
   .cmt-tit {
     font-size: 32rpx;
     position: relative;
     border-bottom: 1px solid #ddd;
     padding: 20rpx;
   }
-.cmt-t {
+  /* 评论区的好评率，红色字体，稍小字号 */
-  width: 300rpx;
-}
   .cmt-good {
     color: #eb2444;
     font-size: 24rpx;
   }
+  /* 评论数量，绝对定位在右上角，设置了字体大小和颜色 */
   .cmt-count {
     position: absolute;
     right: 20rpx;
@@ -145,6 +174,7 @@ swiper {
     font-size: 24rpx;
     color: #666;
   }
+  /* 展示更多评论的箭头图标，通过旋转创建 */
   .cmt-more {
     width: 20rpx;
     height: 20rpx;
@@ -154,13 +184,16 @@ swiper {
     margin-left: 10rpx;
     display: inline-block;
   }
+  /* 评论内容区，设置了左右内边距 */
   .cmt-cont {
     padding: 0 20rpx;
   }
+  /* 评论标签，设置了相对定位，允许内部元素浮动或绝对定位 */
   .cmt-tag {
     position: relative;
     padding: 14px 3px 0 0;
     margin: 0;
+    /* 每个标签，设置了背景色、内边距、圆角、行高、字体大小和颜色 */
     text {
       margin: 0 10px 10px 0;
       background: #fdf0f0;
@@ -170,17 +203,19 @@ swiper {
       border-radius: 3px;
       line-height: 25px;
       font-size: 12px;
-    font-family: -apple-system, Helvetica, sans-serif;
       color: #666;
-  }
+      /* 当标签被选中时，改变背景色和字体颜色 */
-  text.selected {
+      &.selected {
         color: #fff;
         background: #e93b3d;
       }
     }
+  }
+  /* 单条评论项，设置了相对定位，添加了底部边框 */
   .cmt-item {
     position: relative;
     padding: 10px 0;
+    /* 使用伪元素添加底部边框 */
     &::after {
       content: "";
       height: 0;
@@ -193,25 +228,27 @@ swiper {
       border-bottom-color: #e5e5e5;
     }
   }
-.cmt-items {
+  /* 评论列表为空时的提示 */
-  .empty {
+  .cmt-items .empty {
     display: block;
     font-size: 24rpx;
     text-align: center;
     color: #aaa;
     margin-top: 5vh;
   }
-}
+  /* 用户信息，设置了行高、底边距、字体大小 */
   .cmt-user {
     line-height: 25px;
     margin-bottom: 8px;
     font-size: 12px;
+    /* 用户头像，圆形，设置了宽度、高度、圆角和垂直对齐方式 */
     .user-img {
       width: 25px;
       height: 25px;
       border-radius: 50%;
       vertical-align: middle;
     }
+    /* 用户昵称，设置了左边距、显示方式、颜色、最大宽度和高度 */
     .nickname {
       margin-left: 10px;
       display: inline-block;
@@ -220,17 +257,20 @@ swiper {
       height: 25px;
       line-height: 27px;
     }
+    /* 评论日期，设置为右侧浮动，颜色和左边距 */
     .date {
       float: right;
       color: #999;
       margin-left: -60px;
     }
   }
+  /* 用户信息容器，使用flex布局，对齐项目中心，设置了宽度 */
   .cmt-user-info {
     display: flex;
     align-items: center;
     width: 400rpx;
   }
+  /* 评论内容，设置了溢出隐藏、文本溢出处理、弹性盒子模型属性、相对定位、行高、字体大小、边距、单词断开和最大高度 */
   .cmt-cnt {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -244,10 +284,12 @@ swiper {
     word-break: break-all;
     max-height: 126px;
   }
+  /* 评论中的商品属性展示，设置了高度、宽度和白空间处理 */
   .cmt-attr {
     height: 85px;
     width: 100%;
     white-space: nowrap;
+    /* 商品图片，设置了宽高、右边距、底边距、圆角和背景色 */
     image {
       display: inline-block;
       width: 80px;
@@ -258,10 +300,12 @@ swiper {
       background: #f3f3f3;
     }
   }
+  /* 查看更多评论按钮，居中对齐，设置了背景色、字体大小、内边距、边框、圆角 */
   .cmt-more-v {
     text-align: center;
     background-color: #fff;
     font-size: 12px;
+    /* 按钮文本，设置了高度、行高、字体大小、文本对齐、颜色、内边距、边框、圆角 */
     text {
       height: 25px;
       line-height: 25px;
@@ -275,6 +319,7 @@ swiper {
       display: inline-block;
     }
   }
+  /* 弹出层用于查看完整评论，设置了固定定位、z-index、背景色、内边距 */
   .cmt-popup {
     position: fixed;
     top: 0;
@@ -284,19 +329,23 @@ swiper {
     z-index: 998;
     background-color: #fff;
     padding-bottom: 98rpx;
+    /* 弹出层内的评论内容，设置了高度、溢出滚动 */
     .cmt-cont {
       height: calc(100% - 80rpx);
       overflow: auto;
     }
+    /* 弹出层内的评论内容，增加了行数限制和最大高度 */
     .cmt-cnt {
       -webkit-line-clamp: 20;
       max-height: 500px;
     }
+    /* 加载更多按钮，设置了字体大小、内边距、文本对齐、边距、边框、圆角 */
     .load-more {
       font-size: 14px;
       padding: 20px;
       text-align: center;
       margin-bottom: 10px;
+      /* 按钮文本，设置了边框、内边距、圆角和颜色 */
       text {
         border: 1px solid #ddd;
         padding: 5px 10px;
@@ -305,33 +354,45 @@ swiper {
       }
     }
   }
+}
+. /* 评论回复部分，设置了字体大小、上边框（虚线）、上下内边距 */
 .cmt-reply {
   font-size: 14px;
   border-top: 1px dashed #ddd;
   padding: 5px 0;
+  /* 回复标题，红色字体强调 */
   .reply-tit {
     color: #eb2444;
   }
 }
+
+/* 产品详情部分，设置了背景色、上外边距、相对定位和行高 */
 .prod-detail {
   background: #fff;
   margin-top: 20rpx;
   position: relative;
   line-height: 48rpx;
+  /* 详情图片，宽度设为750rpx并确保是块级元素显示 */
   image {
     width: 750rpx !important;
     display: block;
   }
 }
+
+/* 富文本组件内的图片，确保宽度为100%以适应父容器 */
 rich-text {
   image {
     width: 100% !important;
   }
 }
+
+/* 深度选择器，用于覆盖第三方组件或库的样式，确保图片宽度为100%并作为块级元素显示 */
 :deep(.img) {
   width: 100% !important;
   display: block;
 }
+
+/* 购物车底部固定栏，设置了固定位置、底部对齐、宽度、弹性布局、高度、z-index和阴影效果 */
 .cart-footer {
   position: fixed;
   bottom: 0;
@@ -342,6 +403,7 @@ rich-text {
   height: 98rpx;
   z-index: 999;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  /* 按钮，设置了相对定位、弹性增长、内容居中、宽度、背景色、字体大小和列式布局 */
   .btn {
     position: relative;
     display: flex;
@@ -352,6 +414,7 @@ rich-text {
     background-color: #fff;
     font-size: 28rpx;
     flex-flow: column;
+    /* 徽章，绝对定位的小圆圈，用于展示数字，如购物车商品数量 */
     .badge {
       position: absolute;
       top: 20rpx;
@@ -366,30 +429,37 @@ rich-text {
       font-size: 18rpx;
       color: #fff;
     }
+    /* 稍大一点的徽章 */
     .badge-1 {
       width: 36rpx;
     }
   }
+  /* 图标按钮，不随其他按钮拉伸，设置了固定宽度、字体大小和颜色 */
   .btn.icon {
     flex-grow: 0;
     flex-shrink: 0;
     width: 125rpx;
     font-size: 20rpx;
     color: #666;
+    /* 图标按钮内的图片，设置了宽度和高度 */
     image {
       width: 50rpx;
       height: 50rpx;
     }
   }
+  /* 购物车按钮，设置了背景色和文字颜色 */
   .btn.cart {
     background: #584e61;
     color: #fff;
   }
+  /* 立即购买按钮，设置了背景色和文字颜色 */
   .btn.buy {
     background: #eb2444;
     color: #fff;
   }
 }
+
+/* 关闭按钮，设置了颜色、圆角、行高、文本对齐、高度、宽度、字体大小、内边距、位置和伪元素内容 */
 .close {
   color: #aaa;
   border-radius: 12px;
@@ -402,15 +472,20 @@ rich-text {
   top: 10px;
   right: 10px;
   position: absolute;
+  /* 伪元素，设置关闭符号 */
   &::before {
     content: "\2716";
   }
 }
+
+/* 弹出层内容区，设置了最大高度、溢出滚动和左右内边距 */
 .popup-cnt {
   max-height: 429px;
   overflow: auto;
   padding: 0 10px;
 }
+
+/* SKU弹出层背景，设置了固定位置、全屏尺寸、z-index和半透明黑色背景 */
 .pup-sku {
   position: fixed;
   top: 0;
@@ -420,6 +495,8 @@ rich-text {
   z-index: 999;
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+/* SKU弹出层主要内容，绝对定位在屏幕底部，设置了宽度、最小和最大高度、白色背景 */
 .pup-sku-main {
   position: absolute;
   bottom: 0;
@@ -428,6 +505,8 @@ rich-text {
   max-height: 475px;
   background-color: #fff;
 }
+
+/* SKU弹出层头部，设置了相对定位、行高、字体大小、颜色、高度、内边距和背景色 */
 .pup-sku-header {
   position: relative;
   line-height: 46px;
@@ -437,6 +516,8 @@ rich-text {
   padding: 0 0 10px 110px;
   background-color: #fff;
 }
+
+/* SKU弹出层中的产品图片，设置了绝对定位、左上偏移、圆角、宽度、高度和垂直对齐 */
 .pup-sku-img {
   position: absolute;
   left: 10px;
@@ -447,6 +528,8 @@ rich-text {
   border: 0 none;
   vertical-align: top;
 }
+
+/* SKU弹出层价格，设置了行内块显示、高度、行高、颜色和字体大小 */
 .pup-sku-price {
   display: inline-block;
   height: 40px;
@@ -454,9 +537,13 @@ rich-text {
   color: #e4393c;
   font-size: 10px;
 }
+
+/* SKU弹出层价格整数部分，加大字体 */
 .pup-sku-price-int {
   font-size: 16px;
 }
+
+/* SKU弹出层属性描述，允许单词断开，设置了字体大小、颜色、行高、右边距、溢出隐藏、文本溢出处理和弹性盒子模型属性 */
 .pup-sku-prop {
   word-break: break-all;
   font-size: 12px;
@@ -468,17 +555,22 @@ rich-text {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+  /* 属性描述中的文本，设置了颜色和右边距 */
   text {
     color: #999;
     margin-right: 5px;
   }
 }
+
+/* SKU弹出层主体内容，设置了盒模型属性、最大高度、下内边距和溢出滚动 */
 .pup-sku-body {
   box-sizing: border-box;
   max-height: 379px;
   padding-bottom: 100px;
   overflow: auto;
 }
+
+/* SKU区域，设置了字体大小、颜色、内外边距和高度 */
 .pup-sku-area {
   .sku-kind {
     font-size: 12px;
@@ -487,11 +579,14 @@ rich-text {
     height: 40px;
     line-height: 40px;
   }
+  /* SKU选择项容器，设置了溢出隐藏和底边距 */
   .sku-choose {
     overflow: hidden;
     margin-bottom: 3px;
   }
 }
+
+/* SKU选择项，设置了行内块显示、内边距、最小和最大宽度、高度、文本对齐、左边距、底边距、圆角、颜色、背景色和字体大小 */
 .sku-choose-item {
   display: inline-block;
   padding: 0 10px;
@@ -508,23 +603,31 @@ rich-text {
   background-color: #f7f7f7;
   font-size: 14px;
 }
+
+/* 当SKU选择项被选中时，改变背景色和字体颜色 */
 .sku-choose-item.active {
   background-color: #eb2444;
   color: #fff;
 }
+
+/* 当SKU选择项不可用时，改变背景色和字体颜色 */
 .sku-choose-item.gray {
   background-color: #f9f9f9;
   color: #ddd;
 }
+
+/* SKU弹出层数量选择部分，设置了内边距和字体大小 */
 .pup-sku-count {
   padding: 0 10px 13px;
   font-size: 12px;
+  /* 数量名称标签，设置了颜色、高度、行高和宽度 */
   .count-name {
     color: #999;
     height: 31px;
     line-height: 31px;
     width: 100rpx;
   }
+  /* 数量选择器包裹，设置了相对定位、宽度、浮动和垂直对齐 */
   .num-wrap {
     position: relative;
     z-index: 0;
@@ -533,11 +636,13 @@ rich-text {
     vertical-align: middle;
     display: flex;
   }
+  /* 输入框包裹，设置了相对定位、宽度、z-index和左右内边距 */
   .text-wrap {
     position: relative;
     width: 45px;
     z-index: 0;
     margin: 0 1px;
+    /* 输入框，设置了高度、宽度、颜色、背景、字体大小、文本对齐、无边框和背景色 */
     input {
       height: 30px;
       width: 100%;
@@ -550,8 +655,11 @@ rich-text {
     }
   }
 }
+
+/* 数量选择器的减号和加号按钮，设置了相对定位、最大最小宽度、高度、行高、背景色、文本对齐、圆角 */
 .num-wrap {
-  .minus {
+  .minus,
+  .plus {
     position: relative;
     max-width: 30px;
     min-width: 30px;
@@ -559,20 +667,18 @@ rich-text {
     line-height: 30px;
     background: #f7f7f7;
     text-align: center;
+  }
+  /* 减号按钮，设置了左上和左下圆角 */
+  .minus {
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   }
+  /* 加号按钮，设置了右上和右下圆角 */
   .plus {
-    position: relative;
-    max-width: 30px;
-    min-width: 30px;
-    height: 30px;
-    line-height: 30px;
-    background: #f7f7f7;
-    text-align: center;
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
   }
+  /* 行元素，创建加号的横线，设置了圆角、绝对定位、顶部和左侧偏移、宽度、高度和背景色 */
   .row {
     border-radius: 20px;
     position: absolute;
@@ -584,6 +690,7 @@ rich-text {
     height: 2px;
     background-color: #ccc;
   }
+  /* 列元素，创建加号的竖线，设置了圆角、绝对定位、顶部和左侧偏移、宽度、高度和背景色 */
   .col {
     border-radius: 20px;
     position: absolute;
@@ -596,6 +703,8 @@ rich-text {
     background-color: #999;
   }
 }
+
+/* SKU弹出层底部固定栏，设置了固定位置、底部对齐、宽度、弹性布局、高度、z-index和阴影效果 */
 .pup-sku-footer {
   position: fixed;
   bottom: 0;
@@ -606,6 +715,7 @@ rich-text {
   height: 98rpx;
   z-index: 999;
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+  /* 按钮，设置了相对定位、弹性增长、内容居中、宽度、背景色、字体大小和列式布局 */
   .btn {
     position: relative;
     display: flex;
@@ -617,10 +727,12 @@ rich-text {
     font-size: 28rpx;
     flex-flow: column;
   }
+  /* 购物车按钮，设置了背景色和文字颜色 */
   .btn.cart {
     background: #584e61;
     color: #fff;
   }
+  /* 立即购买按钮，设置了背景色和文字颜色 */
   .btn.buy {
     background: #eb2444;
     color: #fff;

front-end/mall4uni/src/pages/prod/prod.vue

@@ -1,260 +1,157 @@
 <template>
-  <!-- 商品详情 -->
+  <!-- 商品详情页面容器 -->
   <view class="container">
-    <!-- 轮播图 -->
+    <!-- 轮播图组件，用于展示商品图片 -->
-    <swiper
+    <swiper :indicator-dots="indicatorDots"          <!-- 是否显示指示点 -->
-      :indicator-dots="indicatorDots"
+      :autoplay="autoplay"                     <!-- 是否自动播放 -->
-      :autoplay="autoplay"
+      :indicator-color="indicatorColor"        <!-- 未选中指示点的颜色 -->
-      :indicator-color="indicatorColor"
+      :interval="interval"                     <!-- 自动切换时间间隔 -->
-      :interval="interval"
+      :duration="duration"                     <!-- 滑动动画时长 -->
-      :duration="duration"
+      :indicator-active-color="indicatorActiveColor" <!-- 当前选中指示点颜色 -->
-      :indicator-active-color="indicatorActiveColor"
+    >
-    >
+      <!-- 循环生成轮播项 -->
-      <block
+      <block v-for="(item, index) in imgs" :key="index">
-        v-for="(item, index) in imgs"
-        :key="index"
-      >
         <swiper-item>
-          <image :src="item" />
+          <image :src="item" />                <!-- 显示每一张商品图片 -->
         </swiper-item>
       </block>
     </swiper>
     <!-- end  轮播图 -->
-    <!-- 商品信息 -->
+    <!-- 商品信息展示区 -->
     <view class="prod-info">
+      <!-- 标题与收藏按钮 -->
       <view class="tit-wrap">
-        <view class="prod-tit">
+        <view class="prod-tit">{{ prodName }}</view>   <!-- 商品名称 -->
-          {{ prodName }}
+        <view class="col" @tap="addOrCannelCollection">
-        </view>
+          <!-- 收藏/取消收藏按钮 -->
-        <view
+          <image v-if="!isCollection" src="@/static/images/icon/prod-col.png" /> <!-- 未收藏图标 -->
-          class="col"
+          <image v-if="isCollection" src="@/static/images/icon/prod-col-red.png" /> <!-- 已收藏图标 -->
-          @tap="addOrCannelCollection"
-        >
-          <image
-            v-if="!isCollection"
-            src="@/static/images/icon/prod-col.png"
-          />
-          <image
-            v-if="isCollection"
-            src="@/static/images/icon/prod-col-red.png"
-          />
           收藏
         </view>
       </view>
-      <view class="sales-p">
+      <view class="sales-p">{{ brief }}</view>         <!-- 商品简短描述 -->
-        {{ brief }}
+      <!-- 商品价格信息 -->
-      </view>
       <view class="prod-price">
-        <text
+        <text v-if="defaultSku && defaultSku.price" class="price">
-          v-if="defaultSku && defaultSku.price"
+          <!-- 当前售价 -->
-          class="price"
-        >
           ￥
-          <text class="price-num">
+          <text class="price-num">{{ wxs.parsePrice(defaultSku.price)[0] }}</text> <!-- 整数部分 -->
-            {{ wxs.parsePrice(defaultSku.price)[0] }}
+          .{{ wxs.parsePrice(defaultSku.price)[1] }} <!-- 小数部分 -->
         </text>
-          .{{ wxs.parsePrice(defaultSku.price)[1] }}
+        <text v-if="defaultSku && defaultSku.oriPrice" class="ori-price">
-        </text>
+          <!-- 原价 -->
-        <text
-          v-if="defaultSku && defaultSku.oriPrice"
-          class="ori-price"
-        >
           ￥{{ wxs.parsePrice(defaultSku.oriPrice)[0] }}.{{ wxs.parsePrice(defaultSku.oriPrice)[1] }}
         </text>
-        <text class="sales" />
+        <text class="sales"></text> <!-- 销量等其他信息预留 -->
       </view>
     </view>
-    <!-- 已选规格 -->
+
-    <view
+    <!-- 已选规格展示 -->
-      class="sku"
+    <view class="sku" @tap="showSku">
-      @tap="showSku"
+      <view class="sku-tit">已选</view>
-    >
+      <view class="sku-con">{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件</view> <!-- 展示已选择的规格和数量 -->
-      <view class="sku-tit">
+      <view class="more">...</view> <!-- 更多选项提示 -->
-        已选
-      </view>
-      <view class="sku-con">
-        {{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
-      </view>
-      <view class="more">
-        ...
-      </view>
     </view>
-    <!-- 评价 -->
+
+    <!-- 评价区域 -->
     <view class="cmt-wrap">
-      <view
+      <!-- 评价标题 -->
-        class="cmt-tit"
+      <view class="cmt-tit" @tap="showComment">
-        @tap="showComment"
-      >
         <view class="cmt-t">
           评价
-          <text class="cmt-good">
+          <text class="cmt-good">好评{{ prodCommData.positiveRating }}%</text> <!-- 好评率 -->
-            好评{{ prodCommData.positiveRating }}%
-          </text>
-        </view>
-        <view class="cmt-count">
-          共{{ prodCommData.number }}条
-          <text class="cmt-more" />
         </view>
+        <view class="cmt-count">共{{ prodCommData.number }}条<text class="cmt-more"></text></view> <!-- 评价总数 -->
       </view>
+      <!-- 评价标签和列表 -->
       <view class="cmt-cont">
-        <view
+        <view class="cmt-tag" @tap="showComment">
-          class="cmt-tag"
-          @tap="showComment"
-        >
           <text>全部({{ prodCommData.number }})</text>
           <text>好评({{ prodCommData.praiseNumber }})</text>
           <text>中评({{ prodCommData.secondaryNumber }})</text>
           <text>差评({{ prodCommData.negativeNumber }})</text>
           <text>有图({{ prodCommData.picNumber }})</text>
         </view>
+        <!-- 评价内容列表 -->
         <view class="cmt-items">
-          <view
+          <view v-for="(item, index) in littleCommPage" :key="index" class="cmt-item">
-            v-for="(item, index) in littleCommPage"
-            :key="index"
-            class="cmt-item"
-          >
             <view class="cmt-user">
-              <text class="date">
+              <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
-                {{ item.recTime }}
-              </text>
               <view class="cmt-user-info">
-                <image
+                <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
-                  class="user-img"
+                <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
-                  :src="item.pic"
-                />
-                <view class="nickname">
-                  {{ item.nickName }}
-                </view>
               </view>
             </view>
-            <view class="cmt-cnt">
+            <view class="cmt-cnt">{{ item.content }}</view> <!-- 评价内容 -->
-              {{ item.content }}
+            <!-- 如果有图片，则显示图片滚动视图 -->
-            </view>
+            <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
-            <scroll-view
+              <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
-              v-if="item.pics.length"
-              class="cmt-attr"
-              scroll-x="true"
-            >
-              <image
-                v-for="(commPic, index2) in item.pics"
-                :key="index2"
-                :src="commPic"
-              />
             </scroll-view>
           </view>
         </view>
-        <view
+        <!-- 如果评价超过2条，显示查看更多 -->
-          v-if="prodCommPage.records.length > 2"
+        <view v-if="prodCommPage.records.length > 2" class="cmt-more-v">
-          class="cmt-more-v"
+          <text @tap="showComment">查看全部评价</text>
-        >
-          <text @tap="showComment">
-            查看全部评价
-          </text>
         </view>
       </view>
     </view>
-    <!-- 商品详情 -->
+
+    <!-- 商品详情内容 -->
     <view class="prod-detail">
       <view>
-        <rich-text :nodes="content" />
+        <rich-text :nodes="content"></rich-text> <!-- 使用富文本渲染商品详情 -->
       </view>
     </view>
     <!-- end 商品详情 -->
-
+    <!-- 底部操作栏 -->
-    <!-- 底部按钮 -->
     <view class="cart-footer">
-      <view
+      <!-- 首页按钮 -->
-        class="btn icon"
+      <view class="btn icon" @tap="toHomePage">
-        @tap="toHomePage"
+        <image src="@/static/images/tabbar/homepage.png" />首页
-      >
-        <image src="@/static/images/tabbar/homepage.png" />
-        首页
-      </view>
-      <view
-        class="btn icon"
-        @tap="toCartPage"
-      >
-        <image src="@/static/images/tabbar/basket.png" />
-        购物车
-        <view
-          v-if="totalCartNum>0"
-          class="badge badge-1"
-        >
-          {{ totalCartNum }}
-        </view>
       </view>
-      <view
+      <!-- 购物车按钮 -->
-        class="btn cart"
+      <view class="btn icon" @tap="toCartPage">
-        @tap="showSku"
+        <image src="@/static/images/tabbar/basket.png" />购物车
-      >
+        <view v-if="totalCartNum>0" class="badge badge-1">{{ totalCartNum }}</view> <!-- 购物车商品数量 -->
-        <text>加入购物车</text>
-      </view>
-      <view
-        class="btn buy"
-        @tap="showSku"
-      >
-        <text>立即购买</text>
       </view>
+      <!-- 加入购物车按钮 -->
+      <view class="btn cart" @tap="showSku"><text>加入购物车</text></view>
+      <!-- 立即购买按钮 -->
+      <view class="btn buy" @tap="showSku"><text>立即购买</text></view>
     </view>
     <!-- end 底部按钮 -->
-
     <!-- 规格弹窗 -->
-    <view
+    <view v-if="skuShow" class="pup-sku">
-      v-if="skuShow"
-      class="pup-sku"
-    >
       <view class="pup-sku-main">
+        <!-- 弹窗头部 -->
         <view class="pup-sku-header">
-          <image
+          <image class="pup-sku-img" :src="defaultSku.pic?defaultSku.pic:pic" /> <!-- 商品图片 -->
-            class="pup-sku-img"
-            :src="defaultSku.pic?defaultSku.pic:pic"
-          />
           <view class="pup-sku-price">
+            <!-- 商品价格 -->
             ￥
-            <text
+            <text v-if="defaultSku && defaultSku.price" class="pup-sku-price-int">{{ wxs.parsePrice(defaultSku.price)[0] }}</text>
-              v-if="defaultSku && defaultSku.price"
-              class="pup-sku-price-int"
-            >
-              {{ wxs.parsePrice(defaultSku.price)[0] }}
-            </text>
             .{{ wxs.parsePrice(defaultSku.price)[1] }}
           </view>
           <view class="pup-sku-prop">
-            <text>已选</text>
+            <!-- 已选规格 -->
-            {{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
+            <text>已选</text>{{ selectedProp.length > 0 ? selectedProp + '，' : '' }}{{ prodNum }}件
           </view>
-          <view
+          <view class="close" @tap="closePopup"></view> <!-- 关闭按钮 -->
-            class="close"
-            @tap="closePopup"
-          />
         </view>
+        <!-- 弹窗主体 -->
         <view class="pup-sku-body">
+          <!-- 规格选择区 -->
           <view class="pup-sku-area">
-            <view
+            <view v-if="skuList.length" class="sku-box">
-              v-if="skuList.length"
+              <block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
-              class="sku-box"
+                <view v-for="(skuLine, key) in skuGroupItem" :key="key" class="items sku-text">
-            >
+                  <text class="sku-kind">{{ key }}</text> <!-- 规格类型 -->
-              <block
-                v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList"
-                :key="skuGroupItemIndex"
-              >
-                <view
-                  v-for="(skuLine, key) in skuGroupItem"
-                  :key="key"
-                  class="items sku-text"
-                >
-                  <text class="sku-kind">
-                    {{ key }}
-                  </text>
                   <view class="con">
-                    <text
+                    <!-- 循环展示每一个规格选项 -->
-                      v-for="skuLineItem in skuLine"
+                    <text v-for="skuLineItem in skuLine" :key="skuLineItem" class="sku-choose-item"
-                      :key="skuLineItem"
-                      class="sku-choose-item"
                           :class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
                                   isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
-                      @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
+                          @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)">
-                    >
                       {{ skuLineItem }}
                     </text>
                   </view>
@@ -262,167 +159,148 @@
               </block>
             </view>
           </view>
+          <!-- 数量选择 -->
           <view class="pup-sku-count">
             <view class="num-wrap">
-              <view
+              <view class="minus" @tap="onCountMinus"><text class="row"></text></view> <!-- 减少数量 -->
-                class="minus"
+              <view class="text-wrap"><input type="number" :value="prodNum" disabled></view> <!-- 显示数量 -->
-                @tap="onCountMinus"
+              <view class="plus" @tap="onCountPlus"><text class="row"></text><text class="col"></text></view> <!-- 增加数量 -->
-              >
-                <text class="row" />
             </view>
-              <view class="text-wrap">
+            <view class="count-name">数量</view>
-                <input
-                  type="number"
-                  :value="prodNum"
-                  disabled
-                >
           </view>
-              <view
-                class="plus"
-                @tap="onCountPlus"
-              >
-                <text class="row" />
-                <text class="col" />
         </view>
+        <!-- 弹窗底部 -->
+        <view class="pup-sku-footer">
+          <view class="btn cart" @tap="addToCart">加入购物车</view> <!-- 加入购物车按钮 -->
+          <view class="btn buy" @tap="buyNow">立即购买</view> <!-- 立即购买按钮 -->
         </view>
-            <view class="count-name">
-              数量
       </view>
     </view>
+
+    <!-- 评价弹窗 -->
+    <view v-if="commentShow" class="cmt-popup">
+      <view class="cmt-tit">
+        <view class="cmt-t">
+          商品评价
+          <text class="cmt-good">好评度{{ prodCommData.positiveRating }}%</text> <!-- 好评率 -->
         </view>
-        <view class="pup-sku-footer">
+        <text class="close" @tap="closePopup"></text> <!-- 关闭按钮 -->
-          <view
-            class="btn cart"
-            @tap="addToCart"
-          >
-            加入购物车
       </view>
-          <view
+      <view class="cmt-cont">
-            class="btn buy"
+        <!-- 评价筛选标签 -->
-            @tap="buyNow"
+        <view class="cmt-tag">
-          >
+          <text data-evaluate="-1" :class="evaluate==-1?'selected':''" @tap="getProdCommPage">全部({{ prodCommData.number }})</text>
-            立即购买
+          <text data-evaluate="0" :class="evaluate==0?'selected':''" @tap="getProdCommPage">好评({{ prodCommData.praiseNumber }})</text>
+          <text data-evaluate="1" :class="evaluate==1?'selected':''" @tap="getProdCommPage">中评({{ prodCommData.secondaryNumber }})</text>
+          <text data-evaluate="2" :class="evaluate==2?'selected':''" @tap="getProdCommPage">差评({{ prodCommData.negativeNumber }})</text>
+          <text data-evaluate="3" :class="evaluate==3?'selected':''" @tap="getProdCommPage">有图({{ prodCommData.picNumber }})</text>
+        </view>
+        <!-- 评价内容列表 -->
+        <view class="cmt-items">
+          <block v-if="prodCommPage.records.length">
+            <view v-for="(item, index) in prodCommPage.records" :key="index" class="cmt-item">
+              <view class="cmt-user">
+                <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
+                <view class="cmt-user-info">
+                  <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
+                  <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
                 </view>
               </view>
+              <view class="cmt-cnt">{{ item.content }}</view> <!-- 评价内容 -->
+              <!-- 如果有图片，则显示图片滚动视图 -->
+              <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
+                <image v-for="(commPic, index2) in item.pics" :key="index2" :src="commPic" />
+              </scroll-view>
             </view>
+          </block>
         </view>
-
+      </view>
-    <!-- 评价弹窗 -->
+    </view>
-    <view
+  </view>
-      v-if="commentShow"
+  <!-- 评价弹窗组件，当commentShow为true时显示 -->
-      class="cmt-popup"
+  <view v-if="commentShow" class="cmt-popup">
-    >
+    <!-- 弹窗标题栏 -->
     <view class="cmt-tit">
       <view class="cmt-t">
-          商品评价
+        商品评价 <!-- 标题文本 -->
-          <text class="cmt-good">
+        <text class="cmt-good">好评度{{ prodCommData.positiveRating }}%</text> <!-- 显示商品的好评率 -->
-            好评度{{ prodCommData.positiveRating }}%
-          </text>
       </view>
-        <text
+      <text class="close" @tap="closePopup" /> <!-- 关闭按钮，点击时调用closePopup方法关闭弹窗 -->
-          class="close"
-          @tap="closePopup"
-        />
     </view>
+
+    <!-- 弹窗内容区 -->
     <view class="cmt-cont">
+      <!-- 评价筛选标签 -->
       <view class="cmt-tag">
-          <text
+        <!-- 动态生成评价筛选选项 -->
-            data-evaluate="-1"
+        <text data-evaluate="-1"
               :class="evaluate == -1 ? 'selected' : ''"
-            @tap="getProdCommPage"
+              @tap="getProdCommPage">
-          >
           全部({{ prodCommData.number }})
         </text>
-          <text
+        <text data-evaluate="0"
-            data-evaluate="0"
               :class="evaluate == 0 ? 'selected' : ''"
-            @tap="getProdCommPage"
+              @tap="getProdCommPage">
-          >
           好评({{ prodCommData.praiseNumber }})
         </text>
-          <text
+        <text data-evaluate="1"
-            data-evaluate="1"
               :class="evaluate == 1 ? 'selected' : ''"
-            @tap="getProdCommPage"
+              @tap="getProdCommPage">
-          >
           中评({{ prodCommData.secondaryNumber }})
         </text>
-          <text
+        <text data-evaluate="2"
-            data-evaluate="2"
               :class="evaluate == 2 ? 'selected' : ''"
-            @tap="getProdCommPage"
+              @tap="getProdCommPage">
-          >
           差评({{ prodCommData.negativeNumber }})
         </text>
-          <text
+        <text data-evaluate="3"
-            data-evaluate="3"
               :class="evaluate == 3 ? 'selected' : ''"
-            @tap="getProdCommPage"
+              @tap="getProdCommPage">
-          >
           有图({{ prodCommData.picNumber }})
         </text>
+        <!-- 每个文本元素都有一个data-evaluate属性用于标识评价类型，并根据evaluate值来决定是否添加'selected'类名以高亮当前选中的筛选条件 -->
+        <!-- 点击任一文本元素时会触发getProdCommPage方法，加载对应的评价数据 -->
       </view>
+
+      <!-- 评价列表 -->
       <view class="cmt-items">
+        <!-- 如果存在评价记录，则循环渲染每个评价项 -->
         <block v-if="prodCommPage.records.length">
-            <view
+          <view v-for="(item, index) in prodCommPage.records"
-              v-for="(item, index) in prodCommPage.records"
                 :key="index"
-              class="cmt-item"
+                class="cmt-item">
-            >
+            <!-- 用户信息 -->
             <view class="cmt-user">
-                <text class="date">
+              <text class="date">{{ item.recTime }}</text> <!-- 评价时间 -->
-                  {{ item.recTime }}
-                </text>
               <view class="cmt-user-info">
-                  <image
+                <image class="user-img" :src="item.pic" /> <!-- 用户头像 -->
-                    class="user-img"
+                <view class="nickname">{{ item.nickName }}</view> <!-- 用户昵称 -->
-                    :src="item.pic"
-                  />
-                  <view class="nickname">
-                    {{ item.nickName }}
-                  </view>
               </view>
             </view>
-              <view class="cmt-cnt">
+            <!-- 评价内容 -->
-                {{ item.content }}
+            <view class="cmt-cnt">{{ item.content }}</view>
-              </view>
+            <!-- 如果评价中有图片，则展示图片滚动视图 -->
-              <scroll-view
+            <scroll-view v-if="item.pics.length" class="cmt-attr" scroll-x="true">
-                v-if="item.pics.length"
+              <image v-for="(commPic, index2) in item.pics"
-                class="cmt-attr"
-                scroll-x="true"
-              >
-                <image
-                  v-for="(commPic, index2) in item.pics"
                      :key="index2"
-                  :src="commPic"
+                     :src="commPic" />
-                />
             </scroll-view>
-              <view
+            <!-- 店铺回复，如果有的话 -->
-                v-if="item.replyContent"
+            <view v-if="item.replyContent" class="cmt-reply">
-                class="cmt-reply"
+              <text class="reply-tit">店铺回复：</text>
-              >
-                <text class="reply-tit">
-                  店铺回复：
-                </text>
               {{ item.replyContent }}
             </view>
           </view>
         </block>
-          <view
+        <!-- 如果没有评价记录，则显示提示信息 -->
-            v-if="!prodCommPage.records.length"
+        <view v-if="!prodCommPage.records.length" class="empty">
-            class="empty"
-          >
           暂无评价
         </view>
       </view>
-        <view
+
-          v-if="prodCommPage.pages > prodCommPage.current"
+      <!-- 加载更多按钮，当还有未加载的评价页时显示 -->
-          class="load-more"
+      <view v-if="prodCommPage.pages > prodCommPage.current" class="load-more">
-        >
+        <text @tap="getMoreCommPage">点击加载更多</text> <!-- 点击时调用getMoreCommPage方法加载下一页评价 -->
-          <text @tap="getMoreCommPage">
-            点击加载更多
-          </text>
-        </view>
       </view>
     </view>
   </view>

front-end/mall4uni/src/pages/recent-news/recent-news.scss

@@ -1,34 +1,40 @@
 .recent-news {
-  background: #fff;
+  background: #fff; /* 设置最近新闻容器的背景颜色为白色 */
+
   .news-item {
-    padding: 20rpx 20rpx 0 20rpx;
+    padding: 20rpx 20rpx 0 20rpx; /* 内边距：上20rpx，左右各20rpx，下0rpx */
-    position: relative;
+    position: relative; /* 使子元素可以相对于此元素进行绝对定位 */
+
     &::after {
-      content: " ";
+      content: " "; /* 生成一个伪元素 */
-      width: 100%;
+      width: 100%; /* 伪元素宽度为100% */
-      height: 2rpx;
+      height: 2rpx; /* 伪元素高度为2rpx，作为分隔线 */
-      background-color: #e1e1e1;
+      background-color: #e1e1e1; /* 分隔线的颜色为浅灰色 */
-      left: 20rpx;
+      left: 20rpx; /* 从左边开始20rpx，与父元素内边距对齐 */
-      display: block;
+      display: block; /* 伪元素作为块级元素显示 */
-      position: absolute;
+      position: absolute; /* 伪元素绝对定位，相对于父元素 */
+      bottom: 0; /* 伪元素位于父元素底部 */
     }
+
     .news-item-title {
-      font-size: 28rpx;
+      font-size: 28rpx; /* 新闻标题字体大小为28rpx */
-      text-align: left;
+      text-align: left; /* 文字左对齐 */
     }
+
     .news-item-date {
-      font-size: 24rpx;
+      font-size: 24rpx; /* 日期字体大小为24rpx */
-      color: #999;
+      color: #999; /* 日期颜色为浅灰色 */
-      text-align: right;
+      text-align: right; /* 文字右对齐 */
-      margin-top: 10rpx;
+      margin-top: 10rpx; /* 上边距为10rpx */
-      margin-bottom: 20rpx;
+      margin-bottom: 20rpx; /* 下边距为20rpx */
     }
   }
+
   .empty {
-    display: block;
+    display: block; /* 空状态提示作为块级元素显示 */
-    padding-top: 200rpx;
+    padding-top: 200rpx; /* 上内边距为200rpx，用于居中显示空状态提示 */
-    color: #999;
+    color: #999; /* 文字颜色为浅灰色 */
-    font-size: 26rpx;
+    font-size: 26rpx; /* 字体大小为26rpx */
-    text-align: center;
+    text-align: center; /* 文字水平居中 */
   }
 }

front-end/mall4uni/src/pages/recent-news/recent-news.vue

@@ -1,60 +1,62 @@
 <template>
   <view class="container">
+    <!-- 最近新闻容器 -->
     <view class="recent-news">
-      <block
+      <!-- 使用 v-for 指令循环渲染 news 数组中的每一个项目 -->
-        v-for="(item, index) in news"
+      <block v-for="(item, index) in news" :key="index">
-        :key="index"
+        <!-- 新闻项，点击时触发 toNewsDetail 方法 -->
-      >
+        <view class="news-item" :data-id="item.id" @tap="toNewsDetail">
-        <view
+          <!-- 新闻标题 -->
-          class="news-item"
+          <view class="news-item-title">{{ item.title }}</view>
-          :data-id="item.id"
+          <!-- 新闻发布时间 -->
-          @tap="toNewsDetail"
+          <view class="news-item-date">{{ item.publishTime }}</view>
-        >
-          <view class="news-item-title">
-            {{ item.title }}
-          </view>
-          <view class="news-item-date">
-            {{ item.publishTime }}
-          </view>
         </view>
       </block>
-      <view
+      <!-- 当 news 数组为空或不存在时显示的空状态提示 -->
-        v-if="!news || !news.length"
+      <view v-if="!news || !news.length" class="empty">暂无数据</view>
-        class="empty"
-      >
-        暂无数据
-      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-const news = ref([])
+  import { ref, onShow } from 'vue'; // 导入 Vue 的响应式引用和生命周期钩子
+  import http from '@/utils/http';   // 假设这是用于发送 HTTP 请求的工具
+
+  // 定义一个响应式的数组来存储新闻列表
+  const news = ref([]);
+
   /**
    * 生命周期函数--监听页面显示
+   * 当页面显示时调用此函数，通常用于加载初始数据。
    */
   onShow(() => {
-  // 加载公告
+    // 发送 HTTP GET 请求到服务器以获取公告列表
     http.request({
-    url: '/shop/notice/noticeList',
+      url: '/shop/notice/noticeList', // API 地址
-    method: 'GET'
+      method: 'GET'                    // 请求方法
     })
       .then(({ data }) => {
-      news.value = data.records
+        // 将从服务器接收到的数据赋值给 news 数组
-    })
+        news.value = data.records;
       })
+      .catch((error) => {
+        console.error('Failed to fetch news:', error); // 错误处理
+      });
+  });
 
   /**
    * 跳转公告详情页
- * @param e
+   * @param e - 触发事件对象，包含当前元素的数据集（dataset）
    */
   const toNewsDetail = (e) => {
+    // 使用 uni.navigateTo 方法导航到新闻详情页面，并传递新闻 ID 作为查询参数
     uni.navigateTo({
-    url: '/pages/news-detail/news-detail?id=' + e.currentTarget.dataset.id
+      url: `/pages/news-detail/news-detail?id=${e.currentTarget.dataset.id}`
-  })
+    });
-}
+  };
 </script>
 
 <style scoped lang="scss">
+  /* 引入外部样式文件，这里的样式将仅应用于本组件 */
   @use './recent-news.scss';
 </style>