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

front-end/mall4uni/src/components/production/production.vue

@@ -1,39 +1,70 @@
 <template>
-  <view
-    class="prod-items"
+  <!--
+  使用view标签创建一个类名为"prod-items"的组件元素，通过":data-prodid"绑定了一个名为"item.prodId"的数据属性，
+  并监听了"tap"事件，当触发点击时会调用"toProdPage"方法
+  -->
+  <view class="prod-items"
         :data-prodid="item.prodId"
-    @tap="toProdPage"
-  >
+        @tap="toProdPage">
+    <!--
+    创建一个类名为"hot-imagecont"的view元素，用于包裹商品图片相关内容，起到容器的作用
+    -->
     <view class="hot-imagecont">
-      <image
-        :src="item.pic"
-        class="hotsaleimg"
-      />
+      <!--
+      使用image标签展示商品图片，图片的src属性通过":src"绑定了名为"item.pic"的数据，
+      并设置了类名"hotsaleimg"，该类名应该在对应的样式文件中有相应的样式定义来控制图片的展示样式
+      -->
+      <image :src="item.pic"
+             class="hotsaleimg" />
     </view>
+    <!--
+    创建一个类名为"hot-text"的view元素，用于包裹商品的文本信息部分，比如商品名称、评价信息、价格等内容
+    -->
     <view class="hot-text">
+      <!--
+      创建一个类名为"hotprod-text"的view元素，用于展示商品名称，通过双大括号插值表达式"{{ item.prodName }}"来显示具体的商品名称数据
+      -->
       <view class="hotprod-text">
         {{ item.prodName }}
       </view>
-      <view
-        v-if="sts===6"
-        class="prod-info"
-      >
+      <!--
+      根据"sts"的值来决定是否显示该元素，当"sts === 6"时，显示这个类名为"prod-info"的view元素，
+      用于展示商品的评价相关信息，如评价数量和好评率等，同样通过插值表达式来展示具体数据
+      -->
+      <view v-if="sts===6"
+            class="prod-info">
         {{ item.prodCommNumber }}评价 {{ item.positiveRating }}%好评
       </view>
+      <!--
+      创建一个类名为"prod-text-info"的view元素，用于包裹商品价格相关的展示内容，是价格信息的整体容器
+      -->
       <view class="prod-text-info">
+        <!--
+        创建一个类名为"price"的view元素，用于进一步细分价格展示的不同部分，如限时价标识、货币符号、价格的整数部分和小数部分等
+        -->
         <view class="price">
-          <text
-            v-if="sts===2"
-            class="deadline-price"
-          >
+          <!--
+          根据"sts"的值来决定是否显示这个类名为"deadline-price"的text元素，当"sts === 2"时，显示"限时价"文本，用于提示限时优惠价格情况
+          -->
+          <text v-if="sts===2"
+                class="deadline-price">
             限时价
           </text>
+          <!--
+          展示货币符号"￥"，使用text标签进行文本展示，设置了类名"symbol"，方便样式控制（虽然此处没看到具体样式，但可以后续添加样式定义）
+          -->
           <text class="symbol">
             ￥
           </text>
+          <!--
+          通过调用"wxs.parsePrice(item.price)[0]"方法来获取商品价格的整数部分，并展示在页面上，类名"big-num"方便后续样式控制，比如设置字体大小等
+          -->
           <text class="big-num">
             {{ wxs.parsePrice(item.price)[0] }}
           </text>
+          <!--
+          通过调用"wxs.parsePrice(item.price)[1]"方法来获取商品价格的小数部分，并展示在页面上，类名"small-num"方便样式处理，确保小数部分的显示格式等符合要求
+          -->
           <text class="small-num">
             .{{ wxs.parsePrice(item.price)[1] }}
           </text>
@@ -43,31 +74,40 @@
   </view>
 </template>
 <script setup>
-const wxs = number()
-// eslint-disable-next-line no-unused-vars
-const props = defineProps({
+  // 这里定义了一个名为"wxs"的变量，调用了"number"函数（不过不清楚这个"number"函数的具体来源和作用，可能是自定义的函数或者导入的模块中的函数）
+  const wxs = number()
+  // 定义了名为"props"的常量，使用"defineProps"函数来定义组件接收的属性
+  // 并通过对象字面量的形式指定了属性的类型和默认值等信息，这里忽略了eslint的未使用变量检查
+  // eslint-disable-next-line no-unused-vars
+  const props = defineProps({
+    // 定义了名为"item"的属性，类型为Object，默认值是一个返回null的函数，意味着如果外部没有传入该属性值，其默认值为null
     item: {
       type: Object,
       default: () => {
         return null
       }
     },
+    // 定义了名为"sts"的属性，类型为Number，默认值是一个返回2的函数，即如果外部未传入该属性，其默认值为2
     sts: {
       type: Number,
       default: () => {
         return 2
       }
     }
-})
+  })
 
-const toProdPage = (e) => {
+  // 定义了名为"toProdPage"的函数，用于处理点击商品元素跳转到商品详情页的逻辑
+  const toProdPage = (e) => {
+    // 从点击事件对象"e"的"data-prodid"属性中获取商品的id，这个id是之前在模板中绑定到元素上的数据属性
     const prodid = e.currentTarget.dataset.prodid
+    // 使用uni-app的导航函数"uni.navigateTo"进行页面跳转，跳转到"/pages/prod/prod"页面，并通过查询参数的形式传递商品id，以便详情页获取并展示对应商品的详细信息
     uni.navigateTo({
       url: '/pages/prod/prod?prodid=' + prodid
     })
-}
+  }
 </script>
 
 <style scoped lang="scss">
-@use './production.scss';
+  // 导入了"./production.scss"样式文件，意味着该组件的样式可能会使用到这个文件中定义的一些样式规则、变量等，并且设置了样式的作用域为当前组件（scoped属性），避免样式冲突
+  @use './production.scss';
 </style>