|
|
|
|
@ -41,32 +41,34 @@
|
|
|
|
|
</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'
|
|
|
|
|
|
