分类修改

feature/v-xuexi
wangdong 9 months ago
parent 467d9805e6
commit 46ab724837
  1. 194
      pages/store/goodsCate.vue

@ -2,17 +2,15 @@
<BaseContainer class="cate-box">
<NavBar title="分类" />
<view class="cate-list flex">
<view class="cate-list-left">
<view v-for="(item, index) in goodsCateList" :key="index" class="cate-item" :class="{'active': bigCate === item.name}" @click="bigCate = item.name">
{{ item.name }}
</view>
<view v-if="selectCate.length > 0" class="select-cate">
<view v-for="(cate, index) in selectCate" class="cate" @click="backCate(cate, index)">{{ cate.name }} <text v-if="index < selectCate.length - 1">/</text></view>
</view>
<view v-if="bigCate && goodsCateList.length > 0" class="cate-list-right">
<view v-if="nowCateList.length > 0" class="cate-list-right">
<!-- <view v-for="(item, index) in goodsCateList.filter(item => item.name === bigCate)[0].list" class="small-cate-content"> -->
<view class="small-cate-content">
<!-- <view class="small-cate-title">{{ bigCate }} + {{ item.title }}</view> -->
<view class="small-cate-list flex">
<view v-for="(con, k) in goodsCateList.filter(item => item.name === bigCate)[0].children" :key="k" class="small-cate-list-item" @click="toList(con)">
<view v-for="(con, k) in nowCateList" :key="k" class="small-cate-list-item" @click="toList(con)">
<view class="flex item-image">
<image :src="con.pic" mode="aspectFill"></image>
</view>
@ -21,6 +19,25 @@
</view>
</view>
</view>
<!-- <view class="cate-list-left">
<view v-for="(item, index) in goodsCateList" :key="index" class="cate-item" :class="{'active': bigCate === item.name}" @click="bigCate = item.name">
{{ item.name }}
</view>
</view> -->
<!-- <view v-if="bigCate && goodsCateList.length > 0" class="cate-list-right"> -->
<!-- <view v-for="(item, index) in goodsCateList.filter(item => item.name === bigCate)[0].list" class="small-cate-content"> -->
<!-- <view class="small-cate-content"> -->
<!-- <view class="small-cate-title">{{ bigCate }} + {{ item.title }}</view> -->
<!-- <view class="small-cate-list flex">
<view v-for="(con, k) in goodsCateList.filter(item => item.name === bigCate)[0].children" :key="k" class="small-cate-list-item" @click="toList(con)">
<view class="flex item-image">
<image :src="con.pic" mode="aspectFill"></image>
</view>
<view class="item-name">{{ con.name }}</view>
</view>
</view>
</view>
</view> -->
</view>
</BaseContainer>
</template>
@ -34,14 +51,16 @@
data() {
return {
goodsCateList: [],
bigCate: '',
nowCateList: [],
selectCate: [],
// bigCate: '',
type: '',
cate:'',
};
},
onLoad({type, cate}) {
this.type = type;
this.bigCate = cate || '';
console.log(type, cate);
this.cate = cate || '';
if (this.type === 'store') {
this.getGoodsCateList();
} else {
@ -54,64 +73,107 @@
try {
const { data } = await getGoodsCateList();
console.log(data);
this.goodsCateList = [
{
name: "特别推荐",
id: 0,
children: data.recommend,
},
].concat(data.category_list);
this.bigCate = this.bigCate || '特别推荐';
console.log(this.goodsCateList);
this.goodsCateList = [...data.category_list];
// this.goodsCateList = [
// {
// name: "",
// id: 0,
// children: data.recommend,
// },
// ].concat(data.category_list);
// this.bigCate = this.bigCate || '';
if (this.cate) {
this.selectCate = this.getCategoryArr(this.goodsCateList, data => data.name === this.cate);
this.nowCateList = this.selectCate[this.selectCate.length - 1].children;
} else {
this.nowCateList = [...data.category_list];
}
} catch (err) { }
},
getCategoryArr(tree, func, path = []) {
if (!tree) {
return [];
}
for (const data of tree) {
path.push(data);
if (func(data)) {
return path;
}
if (data.children) {
const findChildren = this.getCategoryArr(data.children, func, path);
if (findChildren.length) {
return findChildren;
}
}
path.pop();
}
return [];
},
async getSpecialSubject() {
try {
const { data } = await getSpecialSubject();
console.log(data);
this.goodsCateList = [
{
name: "特别推荐",
id: 0,
children: data.recommend,
},
].concat(data.category_list);
this.bigCate = this.bigCate || '特别推荐';
console.log(this.goodsCateList);
// this.goodsCateList = [
// {
// name: "",
// id: 0,
// children: data.recommend,
// },
// ].concat(data.category_list);
// this.bigCate = this.bigCate || '';
this.goodsCateList = data.category_list;
if (this.cate) {
this.selectCate = this.getCategoryArr(this.goodsCateList, data => data.name === this.cate);
this.nowCateList = this.selectCate[this.selectCate.length - 1].children;
} else {
this.nowCateList = data.category_list;
}
} catch (err) {
console.log(err);
}
},
backCate(cate, index) {
console.log(cate);
if (cate.children && cate.children.length > 0) {
this.nowCateList = cate.children;
this.selectCate = this.selectCate.splice(0, index + 1);
}
},
async toList(con) {
switch (this.type){
case 'store':
uni.navigateTo({
url: `/pages/store/goodsList?categoryId=${con.id}`
});
break;
case 'special':
uni.navigateTo({
url: `/pages/special/specialCateCourse?name=${con.name}&gradeId=${con.grade_id}&subjectId=${con.id}&specialCate=0`
});
break;
case 'learning':
try {
const { data } = await changeCategory({ subject_id: con.id});
// let pages = getCurrentPages();
// let prevPage = pages[pages.length - 2];
// prevPage.$vm.learningData.exam.name = con.name;
// prevPage.$vm.learningData.exam.grade_id = con.grade_id;
// prevPage.$vm.learningData.exam.subject_id = con.id;
// uni.navigateBack();
uni.switchTab({
url: '/pages/learning/index',
if (con.children && con.children.length > 0) {
this.selectCate.push(con);
this.nowCateList = con.children || [];
} else {
switch (this.type){
case 'store':
uni.navigateTo({
url: `/pages/store/goodsList?categoryId=${con.id}`
});
} catch (err) {
console.log(err);
}
break;
default:
break;
break;
case 'special':
uni.navigateTo({
url: `/pages/special/specialCateCourse?name=${con.name}&gradeId=${con.grade_id}&subjectId=${con.id}&specialCate=0`
});
break;
case 'learning':
try {
const { data } = await changeCategory({ subject_id: con.id});
// let pages = getCurrentPages();
// let prevPage = pages[pages.length - 2];
// prevPage.$vm.learningData.exam.name = con.name;
// prevPage.$vm.learningData.exam.grade_id = con.grade_id;
// prevPage.$vm.learningData.exam.subject_id = con.id;
// uni.navigateBack();
uni.switchTab({
url: '/pages/learning/index',
});
} catch (err) {
console.log(err);
}
break;
default:
break;
}
}
},
},
@ -125,7 +187,21 @@
.cate-list {
padding-top: 20rpx;
display: flex;
flex-direction: column;
height: 100%;
.select-cate {
margin-top: 20rpx;
background: #fff;
padding: 20rpx 40rpx;
display: flex;
flex-wrap: wrap;
.cate {
line-height: 50rpx;
>text {
margin: 0 10rpx;
}
}
}
.cate-list-left {
width: 220rpx;
background: #fff;
@ -176,11 +252,13 @@
}
.small-cate-list {
flex-wrap: wrap;
padding: 0 40rpx;
.small-cate-list-item {
width: 130rpx;
margin-top: 30rpx;
&:nth-child(3n + 2) {
margin: 30rpx 40rpx 0;
margin-bottom: 30rpx;
margin-right: 40rpx;
&:nth-child(4n) {
margin-right: 0;
}
.item-image {
width: 130rpx;

Loading…
Cancel
Save