pvtfxms7o
/
yudao
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
qjh
秦佳浩 2 months ago
parent 29b6209986 92ce7e4175
commit 090b6fcf85
1 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File

154
front-end/mall4uni/src/pages/category/category.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save