weipengfei
/
purchase-let
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新了商品三级分类分别查询, 优化响应速度

This commit is contained in:
weipengfei 2024-05-11 09:52:53 +08:00
parent c2b4521dfd
commit 6a40be57fb
1 changed files with 758 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
pages/index/index.vue
View File

@ -22,8 +22,8 @@
<view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
<scroll-view class="head-view" scroll-x>
<view class="list">
<view class="item" :class="{'item-active': topActive===item.id}"
v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
<view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
:key="index" @click="changeOne(item, index)">
<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
<view class="c-text u-line-1">{{item.name}}</view>
</view>
@ -42,8 +42,8 @@
<view class="head-title">全部分类</view>
<scroll-view scroll-y style="height: 600rpx;">
<view class="list">
<view class="item" :class="{'item-active': topActive===item.id}"
v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
<view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
:key="index" @click="changeOne(item, index)">
<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
</view>
<view class="c-text u-line-1">{{item.name}}</view>
@ -54,8 +54,8 @@
</viewPopup>
<view class="scroll-box">
<scroll-view class="left" scroll-y>
<view class="item u-line-1" :class="{'item-active': leftActive===item.id}"
v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{item.name}}
<view class="item u-line-1" :class="{'item-active': leftActive===item.id}" v-for="(item, index) in goodClassTow"
:key="index" @click="changeTwo(item, index)">{{item.name}}
</view>
<view style="width: 100%;height: 450rpx;"></view>
</scroll-view>
@ -77,28 +77,24 @@
<view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
<view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
@click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
<view class="item" :class="{'order-active': where.order=='sales'}"
@click="changeOrder('sales')">销量</view>
<view class="item" :class="{'order-active': where.order=='sales'}" @click="changeOrder('sales')">销量</view>
</view>
</view>
<viewPopup v-if="show===2" @close="show=0">
<view class="cateOne">
<scroll-view scroll-y style="height: 230rpx;">
<view class="classify-list">
<view class="classify-list-item u-line-1"
:class="{'item-active': rightActive===item.id}"
v-for="(item, index) in goodClassThree" :key="index"
@click="changeThree(item, index)">
<view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
{{item.name}}
</view>
</view>
</scroll-view>
</view>
</viewPopup>
<scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView"
scroll-y @scrolltolower="loadMoreGood">
<view class="shop-item" v-for="(item, index) in goodList" :key="item.id"
@click="openGoodPopup(item)">
<scroll-view class="list" id='drag_area' style="overscroll-behavior: none;" @scroll="hideHeadView" scroll-y
@scrolltolower="loadMoreGood">
<view class="shop-item" v-for="(item, index) in goodList" :key="item.id" @click="openGoodPopup(item)">
<view class="shop-img">
<up-image width="120rpx" height="120rpx" :src="item.imgs"></up-image>
</view>
@ -201,7 +197,7 @@
const cartStore = useCartStore();
const show = ref(0);
const topActive = ref(0);
const changeOne = (item, index) => {
const changeOne = async (item, index) => {
console.log('选择', item, index);
topActive.value = item.id;
show.value = 0;
@ -210,6 +206,7 @@
leftActive.value = goodClassTow.value[0]?.id || '';
rightActive.value = goodClassThree.value[0]?.id || '';
getGoodList();
if(!item.isLoading) getgoodClassList(topActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
}
const leftActive = ref(0);
@ -220,6 +217,7 @@
goodClassThree.value = item?.children || [];
rightActive.value = goodClassThree.value[0]?.id || '';
getGoodList();
if(!item.isLoading) getgoodClassList(leftActive.value); // 判断是否加载过数据, 加载过则不进行加载,节约资源
}
const rightActive = ref(0);
@ -294,10 +292,12 @@
const goodClassList = ref([]); // 一级分类
const goodClassTow = ref([]); // 二级分类
const goodClassThree = ref([]); // 三级分类
const getgoodClassList = () => {
const getgoodClassList = (pid = 0) => {
goodClassListApi({
page_size: 1000
pid: pid,
page_size: 10000
}).then(res => {
if (pid == 0) { // 加载一级分类时设置全部分类
res.data?.lists?.unshift({
id: "",
name: "全部",
@ -308,7 +308,7 @@
if (!item.children) item.children = [];
item.children?.unshift({
id: "",
pid: item.id,
pid: item.id, //子分类的全部选项其实就是它本身
name: "全部",
})
item.children = item.children.map(t => {
@ -322,12 +322,47 @@
})
return item;
})
// 给所有子级分配
goodClassList.value = res.data?.lists || [];
goodClassTow.value = goodClassList.value[0]?.children || [];
goodClassThree.value = goodClassTow.value[0]?.children || [];
topActive.value = goodClassList.value[0]?.id;
leftActive.value = goodClassTow.value[0]?.id;
rightActive.value = goodClassThree.value[0]?.id;
} else {
let flag = 1;
goodClassList.value.forEach(item => { // 给相应的一级分类添加子菜单
if (item.id == pid) {
if (!item.children) {
item.children = [];
item.children.unshift({
id: "",
pid: item.id,
name: "全部",
})
}
item.children = [...item.children, ...res.data.lists];
item.isLoading = true;
goodClassTow.value = item.children;
flag = 0;
}
})
if (flag) goodClassTow.value.forEach(item => { //给响应的二级子分类添加菜单
if (item.id == pid) {
if (!item.children) {
item.children = [];
item.children.unshift({
id: "",
pid: item.id,
name: "全部",
})
}
item.children = [...item.children, ...res.data.lists];
item.isLoading = true;
goodClassThree.value = item.children;
}
})
}
})
}