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

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

@@ -41,109 +41,111 @@
           </view>
         </view>
         <!-- 子分类 -->
+        <!-- 这是一个条件渲染的视图元素，只有当subCategoryList数组的长度大于0时才会显示 -->
         <view v-if="subCategoryList.length"
               class="th-cate-con">
+          <!-- 使用v-for指令循环遍历subCategoryList数组，index为当前项的索引，thCateItem代表数组中的每个子分类项对象 -->
           <block v-for="(thCateItem, index) in subCategoryList"
                  :key="index">
+            <!-- 每个子分类的外层视图容器，用于包裹子分类相关的内容，设置了类名为sub-category -->
             <view class="sub-category">
+              <!-- 子分类具体项的视图容器，绑定了点击事件toCatePage，并且通过自定义属性传递了子分类相关的ID信息 -->
               <view class="sub-category-item"
                     :data-categoryid="thCateItem.categoryId"
                     :data-parentid="thCateItem.parentId"
                     @tap="toCatePage">
+                <!-- 展示子分类对应的图片，通过util.checkFileUrl方法对图片路径进行处理（可能是检查路径合法性、添加域名等操作），并设置了类名为more-pic以及图片的显示模式为widthFix，widthFix模式可以让图片宽度自适应容器宽度，高度按比例缩放 -->
                 <image :src="util.checkFileUrl(thCateItem.pic)"
                        class="more-pic"
                        mode="widthFix" />
+                <!-- 展示子分类的名称，通过双括号插值表达式绑定子分类项对象中的categoryName属性来显示具体的名称文本 -->
                 <text>{{ thCateItem.categoryName }}</text>
               </view>
             </view>
           </block>
         </view>
+        <!-- 当subCategoryList数组长度为0时，显示这个视图元素，用于给用户提示当前分类下暂无子分类的信息 -->
         <view v-else
               class="cont-item empty">
           该分类下暂无子分类~
         </view>
-      </scroll-view>
-      <!-- 右侧内容end -->
-    </view>
-  </view>
-</template>
 
-<script setup>
-  import util from '@/utils/util.js'
-  import { ref, onLoad } from 'vue'
-  import { uni } from '@dcloudio/uni-app'
-  import { http } from '@/utils/http.js' // 假设http请求相关的配置在这里引入，实际根据你的项目结构调整
+        <script setup>
+          import util from '@/utils/util.js'
+          import { ref, onLoad } from 'vue'
+          import { uni } from '@dcloudio/uni-app'
+          import { http } from '@/utils/http.js' // 假设http请求相关的配置在这里引入，实际根据你的项目结构调整
 
-  // 响应式变量，用于存储分类列表数据，初始值为空数组
-  const categoryList = ref([])
-  // 响应式变量，用于存储子分类列表数据，初始值为空数组
-  const subCategoryList = ref([])
-  // 响应式变量，用于存储分类图片的路径，初始值为空字符串
-  const categoryImg = ref('')
-  // 响应式变量，用于存储父分类ID，初始值为空字符串
-  const parentId = ref('')
-  // 响应式变量，用于记录当前选中的分类菜单项索引，初始值为0
-  const selIndex = ref(0)
+          // 响应式变量，用于存储分类列表数据，初始值为空数组
+          const categoryList = ref([])
+          // 响应式变量，用于存储子分类列表数据，初始值为空数组
+          const subCategoryList = ref([])
+          // 响应式变量，用于存储分类图片的路径，初始值为空字符串
+          const categoryImg = ref('')
+          // 响应式变量，用于存储父分类ID，初始值为空字符串
+          const parentId = ref('')
+          // 响应式变量，用于记录当前选中的分类菜单项索引，初始值为0
+          const selIndex = ref(0)
 
-  // 生命周期函数 - 在页面加载时触发，一般用于初始化页面数据等操作
-  onLoad(() => {
-    // 加载分类列表
-    http.request({
-      url: '/category/categoryInfo',
-      method: 'GET',
-      data: {
-        parentId: ''
-      }
-    })
-      .then(({ data }) => {
-        categoryImg.value = data[0].pic
-        categoryList.value = data
-        getProdList(data[0].categoryId)
-        parentId.value = categoryList.value[0].categoryId
-      })
-  })
+          // 生命周期函数 - 在页面加载时触发，一般用于初始化页面数据等操作
+          onLoad(() => {
+            // 加载分类列表
+            http.request({
+              url: '/category/categoryInfo',
+              method: 'GET',
+              data: {
+                parentId: ''
+              }
+            })
+              .then(({ data }) => {
+                categoryImg.value = data[0].pic
+                categoryList.value = data
+                getProdList(data[0].categoryId)
+                parentId.value = categoryList.value[0].categoryId
+              })
+          })
 
-  // 分类点击事件处理函数
-  const onMenuTab = (e) => {
-    const index = e.currentTarget.dataset.index
-    getProdList(categoryList.value[index].categoryId)
-    parentId.value = categoryList.value[index].categoryId
-    categoryImg.value = categoryList.value[index].pic
-    selIndex.value = index
-  }
+          // 分类点击事件处理函数
+          const onMenuTab = (e) => {
+            const index = e.currentTarget.dataset.index
+            getProdList(categoryList.value[index].categoryId)
+            parentId.value = categoryList.value[index].categoryId
+            categoryImg.value = categoryList.value[index].pic
+            selIndex.value = index
+          }
 
-  // 跳转搜索页函数
-  const toSearchPage = () => {
-    uni.navigateTo({
-      url: '/pages/search-page/search-page'
-    })
-  }
+          // 跳转搜索页函数
+          const toSearchPage = () => {
+            uni.navigateTo({
+              url: '/pages/search-page/search-page'
+            })
+          }
 
-  // 获取产品列表的函数
-  const getProdList = (categoryId) => {
-    // 加载分类列表
-    http.request({
-      url: '/category/categoryInfo',
-      method: 'GET',
-      data: {
-        parentId: categoryId
-      }
-    })
-      .then(({ data }) => {
-        subCategoryList.value = data
-      })
-  }
+          // 获取产品列表的函数
+          const getProdList = (categoryId) => {
+            // 加载分类列表
+            http.request({
+              url: '/category/categoryInfo',
+              method: 'GET',
+              data: {
+                parentId: categoryId
+              }
+            })
+              .then(({ data }) => {
+                subCategoryList.value = data
+              })
+          }
 
-  // 跳转子分类商品页面的函数
-  const toCatePage = (e) => {
-    const { categoryid } = e.currentTarget.dataset
-    uni.navigateTo({
-      url: `/pages/sub-category/sub-category?parentId=${parentId.value}&categoryId=${categoryid}`
-    })
-  }
+          // 跳转子分类商品页面的函数
+          const toCatePage = (e) => {
+            const { categoryid } = e.currentTarget.dataset
+            uni.navigateTo({
+              url: `/pages/sub-category/sub-category?parentId=${parentId.value}&categoryId=${categoryid}`
+            })
+          }
 
-</script>
+        </script>
 
-<style scoped lang="scss">
-  @import "./category.scss";
-</style>
+        <style scoped lang="scss">
+          @import "./category.scss";
+        </style>