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;
-  min-height: 100vh;
-  padding: 7px;
+  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
+  min-height: 100vh; /* 最小高度为视口高度，确保内容不满屏时也有足够的空间 */
+  padding: 7px; /* 内边距，给容器内的元素留出一定的空间 */
 }
+
+/* 固定在顶部的线条 */
 .line-fix {
-  width: 100%;
-  height: 2rpx;
-  background: #e1e1e1;
-  position: fixed;
-  top: 0;
+  width: 100%; /* 线条宽度为100%，覆盖整个屏幕宽度 */
+  height: 2rpx; /* 线条高度为2rpx（响应式单位），非常细的一条线 */
+  background: #e1e1e1; /* 线条颜色为浅灰色 */
+  position: fixed; /* 将线条固定在页面顶部，不会随页面滚动而移动 */
+  top: 0; /* 线条距离页面顶部0像素 */
 }
+
+/* 标题背景样式 */
 .tit-background {
-  width: 100%;
-  height: 20rpx;
-  background: #f4f4f4;
+  width: 100%; /* 背景宽度为100%，覆盖整个屏幕宽度 */
+  height: 20rpx; /* 背景高度为20rpx（响应式单位） */
+  background: #f4f4f4; /* 背景颜色为浅灰色 */
 }
+
+/* 商品列表样式 */
 .prod-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  display: flex; /* 使用弹性布局，使子元素可以灵活排列 */
+  flex-wrap: wrap; /* 允许子元素换行显示 */
+  justify-content: space-between; /* 子元素之间均匀分布，两端对齐 */
 }
+
+/* 深度选择器，用于修改子组件的样式 */
 :deep(.prod-items) {
-  display: inline-block;
-  width: 345rpx !important;
-  &:nth-child(2n) {
-    margin-left: 30rpx;
+  display: inline-block; /* 将商品项设置为行内块级元素，允许在同一行中显示多个商品 */
+  width: 345rpx !important; /* 设置商品项的宽度为345rpx，并使用!important确保优先级 */
+  &:nth-child(2n) { /* 对于每第二个商品项 */
+    margin-left: 30rpx; /* 左边距为30rpx，使第二列的商品与第一列保持一定间距 */
   }
 }
-/* 空 */
+
+/* 空状态提示样式 */
 .empty {
-  display: block;
-  width: 100%;
-  font-size: 26rpx;
-  color: #999;
-  margin-top: 20vh;
-  text-align: center;
+  display: block; /* 将空状态提示设置为块级元素 */
+  width: 100%; /* 提示宽度为100%，覆盖整个父容器 */
+  font-size: 26rpx; /* 字体大小为26rpx（响应式单位） */
+  color: #999; /* 文字颜色为浅灰色 */
+  margin-top: 20vh; /* 上边距为视口高度的20%，将提示居中显示 */
+  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="(item, index) in prodList"
-        :key="index"
-      >
+      <!-- 使用v-for循环渲染商品列表 -->
+      <block v-for="(item, index) in prodList" :key="index">
+        <!-- 将每个商品项传递给production组件 -->
         <production :item="item" />
       </block>
-      <view
-        v-if="!prodList.length"
-        class="empty"
-      >
+      <!-- 如果没有商品数据，则显示“暂无数据”的提示信息 -->
+      <view v-if="!prodList.length" class="empty">
         暂无数据
       </view>
     </view>
@@ -18,215 +15,241 @@
 </template>
 
 <script setup>
-const sts = ref(0)
-const title = ref('')
-const current = ref(1)
-const size = ref(10)
-const pages = ref(0)
-const tagid = ref(0)
-/**
- * 生命周期函数--监听页面加载
- */
-onLoad((options) => {
-  current.value = 1
-  pages.value = 0
-  sts.value = options.sts
-  title.value = options.title ? options.title : ''
-
-  if (options.tagid) {
-    tagid.value = options.tagid
-  }
+  // 定义响应式变量
+  const sts = ref(0) // 商品状态标识符
+  const title = ref('') // 页面标题
+  const current = ref(1) // 当前页码
+  const size = ref(10) // 每页显示的商品数量
+  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 : ''
 
-  if (sts.value == 0) {
-    if (options.tagid == 1) {
-      uni.setNavigationBarTitle({
-        title: '每日上新'
-      })
-    } else if (options.tagid == 2) {
-      uni.setNavigationBarTitle({
-        title: '商城热卖'
-      })
-    } else if (options.tagid == 3) {
-      uni.setNavigationBarTitle({
-        title: '更多宝贝'
-      })
+    // 如果存在tagid选项，则设置标签ID
+    if (options.tagid) {
+      tagid.value = options.tagid
     }
-  } 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({
-      title: title.value
-    })
-  }
 
-  loadProdData(options)
-})
+    // 根据sts和tagid设置页面导航栏标题
+    if (sts.value == 0) {
+      switch (options.tagid) {
+        case '1':
+          uni.setNavigationBarTitle({ title: '每日上新' })
+          break
+        case '2':
+          uni.setNavigationBarTitle({ title: '商城热卖' })
+          break
+        case '3':
+          uni.setNavigationBarTitle({ title: '更多宝贝' })
+          break
+      }
+    } else {
+      switch (sts.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 })
+      }
+    }
 
-/**
- * 页面上拉触底事件的处理函数
- */
-onReachBottom(() => {
-  if (current.value < pages.value) {
-    current.value = current.value + 1
-    loadProdData()
-  }
-})
-
-/**
- * 加载商品数据
- */
-const loadProdData = (options) => {
-  const stsParam = sts.value
-
-  if (stsParam == 0) {
-    // 分组标签商品列表
-    getTagProd()
-  } else if (stsParam == 1) {
-    // 新品推荐
-    const url = '/prod/lastedProdPage'
-    getActProd(url)
-  } else if (stsParam == 2) {
-    // 限时特惠
-    const url = '/prod/discountProdList'
-    getActProd(url)
-  } else if (stsParam == 3) {
-    // 每日疯抢
-    const url = '/prod/moreBuyProdList'
-    getActProd(url)
-  } else if (stsParam == 4) {
-    // 优惠券商品列表
-    getProdByCouponId(options.tagid)
-  } else if (stsParam == 5) {
-    // 收藏商品列表
-    getCollectionProd()
-  }
-}
-
-const prodList = ref([])
-const getActProd = (url) => {
-  uni.showLoading()
-  http.request({
-    url,
-    method: 'GET',
-    data: {
-      current: current.value,
-      size: size.value
+    // 加载商品数据
+    loadProdData(options)
+  })
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom(() => {
+    // 如果当前页小于总页数，则增加页码并加载更多数据
+    if (current.value < pages.value) {
+      current.value++
+      loadProdData()
     }
   })
-    .then(({ data }) => {
+
+  /**
+   * 加载商品数据
+   */
+  const loadProdData = (options) => {
+    const stsParam = sts.value
+
+    // 根据stsParam的值调用不同的商品获取方法
+    if (stsParam == 0) {
+      // 分组标签商品列表
+      getTagProd()
+    } else if (stsParam == 1) {
+      // 新品推荐
+      const url = '/prod/lastedProdPage'
+      getActProd(url)
+    } else if (stsParam == 2) {
+      // 限时特惠
+      const url = '/prod/discountProdList'
+      getActProd(url)
+    } else if (stsParam == 3) {
+      // 每日疯抢
+      const url = '/prod/moreBuyProdList'
+      getActProd(url)
+    } else if (stsParam == 4) {
+      // 优惠券商品列表
+      getProdByCouponId(options.tagid)
+    } else if (stsParam == 5) {
+      // 收藏商品列表
+      getCollectionProd()
+    }
+  }
+
+  // 响应式变量用于存储商品列表
+  const prodList = ref([])
+
+  /**
+   * 获取活动商品列表
+   */
+  const getActProd = (url) => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取商品数据
+    http.request({
+      url,
+      method: 'GET',
+      data: {
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current === 1) {
         list = data.records
       } else {
-        list = prodList.value
-        list = list.concat(data.records)
+        list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
-
-/**
- * 获取我的收藏商品
- */
-const getCollectionProd = () => {
-  uni.showLoading()
-  http.request({
-    url: '/p/user/collection/prods',
-    method: 'GET',
-    data: {
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取我的收藏商品
+   */
+  const getCollectionProd = () => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取收藏商品数据
+    http.request({
+      url: '/p/user/collection/prods',
+      method: 'GET',
+      data: {
+        current: current.value,
+        size: size.value
+      }
+    }).then(({ data }) => {
       let list
+      // 如果是第一页，则直接赋值；否则将新数据追加到现有列表中
       if (data.current == 1) {
         list = data.records
       } else {
-        list = prodList.value
-        list = list.concat(data.records)
+        list = prodList.value.concat(data.records)
       }
+      // 更新商品列表和总页数
       prodList.value = list
       pages.value = data.pages
+      // 隐藏加载指示器
       uni.hideLoading()
     })
-}
-
-/**
- * 获取标签列表
- */
-const getTagProd = () => {
-  uni.showLoading()
-  http.request({
-    url: '/prod/prodListByTagId',
-    method: 'GET',
-    data: {
-      tagId: tagid.value,
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取标签商品列表
+   */
+  const getTagProd = () => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取标签商品数据
+    http.request({
+      url: '/prod/prodListByTagId',
+      method: 'GET',
+      data: {
+        tagId: tagid.value,
+        current: current.value,
+        size: size.value
+      }
+    }).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()
     })
-}
-
-/**
- * 获取优惠券商品列表
- */
-const getProdByCouponId = (id) => {
-  uni.showLoading()
-  http.request({
-    url: '/coupon/prodListByCouponId',
-    method: 'GET',
-    data: {
-      couponId: id,
-      current: current.value,
-      size: size.value
-    }
-  })
-    .then(({ data }) => {
+  }
+
+  /**
+   * 获取优惠券商品列表
+   */
+  const getProdByCouponId = (id) => {
+    // 显示加载指示器
+    uni.showLoading()
+
+    // 发送HTTP请求获取优惠券商品数据
+    http.request({
+      url: '/coupon/prodListByCouponId',
+      method: 'GET',
+      data: {
+        couponId: id,
+        current: current.value,
+        size: size.value
+      }
+    }).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;
+  }
 }
-.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,243 +119,280 @@ 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;
+    width: 60rpx;
+    left: 20rpx;
+    font-size: 22rpx;
+    top: 20rpx;
+    color: #999;
+  }
+  /* SKU内容，从标题右侧开始，单行显示，超出部分用省略号代替 */
+  .sku-con {
+    margin: 0 80rpx;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 28rpx;
+    font-weight: bold;
+  }
 }
-.sku-tit {
-  position: absolute;
-  display: inline-block;
-  width: 60rpx;
-  left: 20rpx;
-  font-size: 22rpx;
-  top: 20rpx;
-  color: #999;
-}
-.sku-con {
-  margin: 0 80rpx;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  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;
-  top: 20rpx;
-  font-size: 24rpx;
-  color: #666;
-}
-.cmt-more {
-  width: 20rpx;
-  height: 20rpx;
-  border-top: 2rpx solid #999;
-  border-right: 2rpx solid #999;
-  transform: rotate(45deg);
-  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;
-    display: inline-block;
-    padding: 0 10px;
-    height: 25px;
-    border-radius: 3px;
-    line-height: 25px;
-    font-size: 12px;
-    font-family: -apple-system, Helvetica, sans-serif;
-    color: #666;
+  /* 评论区标题，较大字体，带有下边框，内边距 */
+  .cmt-tit {
+    font-size: 32rpx;
+    position: relative;
+    border-bottom: 1px solid #ddd;
+    padding: 20rpx;
   }
-  text.selected {
-    color: #fff;
-    background: #e93b3d;
+  /* 评论区的好评率，红色字体，稍小字号 */
+  .cmt-good {
+    color: #eb2444;
+    font-size: 24rpx;
   }
-}
-.cmt-item {
-  position: relative;
-  padding: 10px 0;
-  &::after {
-    content: "";
-    height: 0;
-    display: block;
-    border-bottom: 1px solid #ddd;
+  /* 评论数量，绝对定位在右上角，设置了字体大小和颜色 */
+  .cmt-count {
     position: absolute;
-    left: 0;
-    bottom: 0;
-    right: -10px;
-    border-bottom-color: #e5e5e5;
+    right: 20rpx;
+    top: 20rpx;
+    font-size: 24rpx;
+    color: #666;
   }
-}
-.cmt-items {
-  .empty {
+  /* 展示更多评论的箭头图标，通过旋转创建 */
+  .cmt-more {
+    width: 20rpx;
+    height: 20rpx;
+    border-top: 2rpx solid #999;
+    border-right: 2rpx solid #999;
+    transform: rotate(45deg);
+    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;
+      display: inline-block;
+      padding: 0 10px;
+      height: 25px;
+      border-radius: 3px;
+      line-height: 25px;
+      font-size: 12px;
+      color: #666;
+      /* 当标签被选中时，改变背景色和字体颜色 */
+      &.selected {
+        color: #fff;
+        background: #e93b3d;
+      }
+    }
+  }
+  /* 单条评论项，设置了相对定位，添加了底部边框 */
+  .cmt-item {
+    position: relative;
+    padding: 10px 0;
+    /* 使用伪元素添加底部边框 */
+    &::after {
+      content: "";
+      height: 0;
+      display: block;
+      border-bottom: 1px solid #ddd;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: -10px;
+      border-bottom-color: #e5e5e5;
+    }
+  }
+  /* 评论列表为空时的提示 */
+  .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;
-    color: #333;
-    max-width: 8.2em;
-    height: 25px;
-    line-height: 27px;
-  }
-  .date {
-    float: right;
-    color: #999;
-    margin-left: -60px;
-  }
-}
-.cmt-user-info {
-  display: flex;
-  align-items: center;
-  width: 400rpx;
-}
-.cmt-cnt {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  position: relative;
-  line-height: 1.5;
-  font-size: 14px;
-  margin: 5px 0;
-  word-break: break-all;
-  max-height: 126px;
-}
-.cmt-attr {
-  height: 85px;
-  width: 100%;
-  white-space: nowrap;
-  image {
-    display: inline-block;
-    width: 80px;
-    height: 80px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-    border-radius: 2px;
-    background: #f3f3f3;
-  }
-}
-.cmt-more-v {
-  text-align: center;
-  background-color: #fff;
-  font-size: 12px;
-  text {
-    height: 25px;
+  /* 用户信息，设置了行高、底边距、字体大小 */
+  .cmt-user {
     line-height: 25px;
+    margin-bottom: 8px;
     font-size: 12px;
-    text-align: center;
-    color: #333;
-    padding: 0px 10px;
-    margin: 10px 0;
-    border: 1px solid #ccc;
-    border-radius: 40px;
-    display: inline-block;
+    /* 用户头像，圆形，设置了宽度、高度、圆角和垂直对齐方式 */
+    .user-img {
+      width: 25px;
+      height: 25px;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+    /* 用户昵称，设置了左边距、显示方式、颜色、最大宽度和高度 */
+    .nickname {
+      margin-left: 10px;
+      display: inline-block;
+      color: #333;
+      max-width: 8.2em;
+      height: 25px;
+      line-height: 27px;
+    }
+    /* 评论日期，设置为右侧浮动，颜色和左边距 */
+    .date {
+      float: right;
+      color: #999;
+      margin-left: -60px;
+    }
   }
-}
-.cmt-popup {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 998;
-  background-color: #fff;
-  padding-bottom: 98rpx;
-  .cmt-cont {
-    height: calc(100% - 80rpx);
-    overflow: auto;
+  /* 用户信息容器，使用flex布局，对齐项目中心，设置了宽度 */
+  .cmt-user-info {
+    display: flex;
+    align-items: center;
+    width: 400rpx;
   }
+  /* 评论内容，设置了溢出隐藏、文本溢出处理、弹性盒子模型属性、相对定位、行高、字体大小、边距、单词断开和最大高度 */
   .cmt-cnt {
-    -webkit-line-clamp: 20;
-    max-height: 500px;
-  }
-  .load-more {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: 1.5;
     font-size: 14px;
-    padding: 20px;
+    margin: 5px 0;
+    word-break: break-all;
+    max-height: 126px;
+  }
+  /* 评论中的商品属性展示，设置了高度、宽度和白空间处理 */
+  .cmt-attr {
+    height: 85px;
+    width: 100%;
+    white-space: nowrap;
+    /* 商品图片，设置了宽高、右边距、底边距、圆角和背景色 */
+    image {
+      display: inline-block;
+      width: 80px;
+      height: 80px;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      border-radius: 2px;
+      background: #f3f3f3;
+    }
+  }
+  /* 查看更多评论按钮，居中对齐，设置了背景色、字体大小、内边距、边框、圆角 */
+  .cmt-more-v {
     text-align: center;
-    margin-bottom: 10px;
+    background-color: #fff;
+    font-size: 12px;
+    /* 按钮文本，设置了高度、行高、字体大小、文本对齐、颜色、内边距、边框、圆角 */
     text {
-      border: 1px solid #ddd;
-      padding: 5px 10px;
-      border-radius: 10px;
-      color: #666;
+      height: 25px;
+      line-height: 25px;
+      font-size: 12px;
+      text-align: center;
+      color: #333;
+      padding: 0px 10px;
+      margin: 10px 0;
+      border: 1px solid #ccc;
+      border-radius: 40px;
+      display: inline-block;
+    }
+  }
+  /* 弹出层用于查看完整评论，设置了固定定位、z-index、背景色、内边距 */
+  .cmt-popup {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    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;
+        border-radius: 10px;
+        color: #666;
+      }
     }
   }
 }
+. /* 评论回复部分，设置了字体大小、上边框（虚线）、上下内边距 */
 .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/recent-news/recent-news.scss

@@ -1,34 +1,40 @@
 .recent-news {
-  background: #fff;
+  background: #fff; /* 设置最近新闻容器的背景颜色为白色 */
+
   .news-item {
-    padding: 20rpx 20rpx 0 20rpx;
-    position: relative;
+    padding: 20rpx 20rpx 0 20rpx; /* 内边距：上20rpx，左右各20rpx，下0rpx */
+    position: relative; /* 使子元素可以相对于此元素进行绝对定位 */
+
     &::after {
-      content: " ";
-      width: 100%;
-      height: 2rpx;
-      background-color: #e1e1e1;
-      left: 20rpx;
-      display: block;
-      position: absolute;
+      content: " "; /* 生成一个伪元素 */
+      width: 100%; /* 伪元素宽度为100% */
+      height: 2rpx; /* 伪元素高度为2rpx，作为分隔线 */
+      background-color: #e1e1e1; /* 分隔线的颜色为浅灰色 */
+      left: 20rpx; /* 从左边开始20rpx，与父元素内边距对齐 */
+      display: block; /* 伪元素作为块级元素显示 */
+      position: absolute; /* 伪元素绝对定位，相对于父元素 */
+      bottom: 0; /* 伪元素位于父元素底部 */
     }
+
     .news-item-title {
-      font-size: 28rpx;
-      text-align: left;
+      font-size: 28rpx; /* 新闻标题字体大小为28rpx */
+      text-align: left; /* 文字左对齐 */
     }
+
     .news-item-date {
-      font-size: 24rpx;
-      color: #999;
-      text-align: right;
-      margin-top: 10rpx;
-      margin-bottom: 20rpx;
+      font-size: 24rpx; /* 日期字体大小为24rpx */
+      color: #999; /* 日期颜色为浅灰色 */
+      text-align: right; /* 文字右对齐 */
+      margin-top: 10rpx; /* 上边距为10rpx */
+      margin-bottom: 20rpx; /* 下边距为20rpx */
     }
   }
+
   .empty {
-    display: block;
-    padding-top: 200rpx;
-    color: #999;
-    font-size: 26rpx;
-    text-align: center;
+    display: block; /* 空状态提示作为块级元素显示 */
+    padding-top: 200rpx; /* 上内边距为200rpx，用于居中显示空状态提示 */
+    color: #999; /* 文字颜色为浅灰色 */
+    font-size: 26rpx; /* 字体大小为26rpx */
+    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="(item, index) in news"
-        :key="index"
-      >
-        <view
-          class="news-item"
-          :data-id="item.id"
-          @tap="toNewsDetail"
-        >
-          <view class="news-item-title">
-            {{ item.title }}
-          </view>
-          <view class="news-item-date">
-            {{ item.publishTime }}
-          </view>
+      <!-- 使用 v-for 指令循环渲染 news 数组中的每一个项目 -->
+      <block v-for="(item, index) in news" :key="index">
+        <!-- 新闻项，点击时触发 toNewsDetail 方法 -->
+        <view class="news-item" :data-id="item.id" @tap="toNewsDetail">
+          <!-- 新闻标题 -->
+          <view class="news-item-title">{{ item.title }}</view>
+          <!-- 新闻发布时间 -->
+          <view class="news-item-date">{{ item.publishTime }}</view>
         </view>
       </block>
-      <view
-        v-if="!news || !news.length"
-        class="empty"
-      >
-        暂无数据
-      </view>
+      <!-- 当 news 数组为空或不存在时显示的空状态提示 -->
+      <view v-if="!news || !news.length" class="empty">暂无数据</view>
     </view>
   </view>
 </template>
 
 <script setup>
-const news = ref([])
-/**
- * 生命周期函数--监听页面显示
- */
-onShow(() => {
-  // 加载公告
-  http.request({
-    url: '/shop/notice/noticeList',
-    method: 'GET'
-  })
-    .then(({ data }) => {
-      news.value = data.records
+  import { ref, onShow } from 'vue'; // 导入 Vue 的响应式引用和生命周期钩子
+  import http from '@/utils/http';   // 假设这是用于发送 HTTP 请求的工具
+
+  // 定义一个响应式的数组来存储新闻列表
+  const news = ref([]);
+
+  /**
+   * 生命周期函数--监听页面显示
+   * 当页面显示时调用此函数，通常用于加载初始数据。
+   */
+  onShow(() => {
+    // 发送 HTTP GET 请求到服务器以获取公告列表
+    http.request({
+      url: '/shop/notice/noticeList', // API 地址
+      method: 'GET'                    // 请求方法
     })
-})
+      .then(({ data }) => {
+        // 将从服务器接收到的数据赋值给 news 数组
+        news.value = data.records;
+      })
+      .catch((error) => {
+        console.error('Failed to fetch news:', error); // 错误处理
+      });
+  });
 
-/**
- * 跳转公告详情页
- * @param e
- */
-const toNewsDetail = (e) => {
-  uni.navigateTo({
-    url: '/pages/news-detail/news-detail?id=' + e.currentTarget.dataset.id
-  })
-}
+  /**
+   * 跳转公告详情页
+   * @param e - 触发事件对象，包含当前元素的数据集（dataset）
+   */
+  const toNewsDetail = (e) => {
+    // 使用 uni.navigateTo 方法导航到新闻详情页面，并传递新闻 ID 作为查询参数
+    uni.navigateTo({
+      url: `/pages/news-detail/news-detail?id=${e.currentTarget.dataset.id}`
+    });
+  };
 </script>
 
 <style scoped lang="scss">
-@use './recent-news.scss';
+  /* 引入外部样式文件，这里的样式将仅应用于本组件 */
+  @use './recent-news.scss';
 </style>