更新了商品分类

This commit is contained in:
weipengfei 2023-11-24 16:56:39 +08:00
parent 580ea81154
commit 796d72727e
2 changed files with 111 additions and 3 deletions

View File

@ -23,3 +23,7 @@ export function getCartList(data) {
export function getCartCounts(data) {
return request.get("user/cart/count", data);
}
export function getCategoryListLevel(data) {
return request.get("category/list_level", data);
}

View File

@ -9,6 +9,17 @@
<block>
<swiper-item :class="{ active: 0 == swiperCur }">
<view class="slide-navigator">
<picker class="item"
mode="multiSelector"
:range="[menuList,menuCList]"
:range-key="'cate_name'"
@columnchange="columnchange"
@change="changeMenu"
@cancel="cancelMenu"
>
<image mode='widthFix' class="image" src="@/static/images/daoru.png"></image>
<text class="text">分类筛选</text>
</picker>
<!-- <view class="item" hover-class='none' @click="jumpAddGoods">
<image mode='widthFix' class="image" src="../static/images/product_add.png">
</image>
@ -74,6 +85,16 @@
</view>
<view class="wrapper">
<view class='product_list'>
<!-- <view class="menu_cls">
<u-scroll-list indicatorActiveColor='#FF6D20' :indicator="true">
<view class="menu_li" :class="{'menu_li_on': item.store_category_id==store_category_id}" @click="changeMerchant(item.store_category_id)" v-for="item,index in menuList"
:key="index">
<u--image class="image" :showLoading="true" :src="item.pic" width="87.62rpx" height="87.62rpx" shape="circle"
></u--image>
<view class="li_text" style="display: block;font-size: 26.29rpx;margin-top: 10rpx;">{{item.cate_name}}</view>
</view>
</u-scroll-list>
</view> -->
<view v-for="(item,index) in productList" :key="index" style="position: relative;width: 100%;">
<view class='item' @click="yinc">
<view class='image'>
@ -217,6 +238,9 @@
import {
getPreviewProDetail
} from "@/api/store.js";
import {
getCategoryListLevel
} from '@/api/requesta.js';
export default {
name: 'productList',
components: {
@ -230,6 +254,9 @@
page: 1,
limit: 20
},
menuList: [], //
menuCList: [], //
cate_id: '', // id
loaded: false,
loading: false,
mer_id: '',
@ -263,7 +290,12 @@
onLoad(options) {
// this.mer_id = options.mer_id;
this.getUserInfo()
getCategoryListLevel({
type: 2
}).then(res => {
this.menuList = res.data;
this.menuCList = res.data[0].children;
})
},
onPullDownRefresh() {
this.where.page = 1
@ -557,20 +589,24 @@
}
},
getList: function(mer_id, ispage) {
console.log('调用');
var that = this;
if (that.loading || that.loaded) return;
that.loading = true;
if (ispage) {
this.where.page = 1
that.productList = []
this.$set(this, 'productList', []);
}
if(this.cate_id.store_category_id){
that.where.cate_id = this.cate_id.store_category_id;
// mer_cate_id
}
productLstApi(mer_id, that.where).then(
res => {
that.loading = false;
that.loaded = res.data.list.length < that.where.limit;
that.productList.push.apply(that.productList, res.data.list);
that.where.page = that.where.page + 1;
},
error => {
that.$util.Tips({
@ -689,6 +725,26 @@
more(index) {
this.current = index
},
//
columnchange(e){
if(e.detail.column==0){
this.menuCList = this.menuList[e.detail.value].children;
}
},
changeMenu(e){
let cate_id = this.menuList[e.detail.value[0]].children[e.detail.value[1]]||this.menuList[e.detail.value[0]]||'';
this.$set(this, 'cate_id', JSON.parse(JSON.stringify(cate_id)));
this.loading = false;
this.loaded = false;
this.getList(this.mer_id, true)
},
cancelMenu(){
this.loading = false;
this.loaded = false;
this.where.cate_id = null;
this.cate_id.store_category_id = null;
this.getList(this.mer_id, true)
}
},
}
@ -1065,4 +1121,52 @@
}
}
}
.menu_cls {
background-color: white;
// height: 199.77rpx;
border-radius: 10rpx;
padding: 20rpx 20rpx 0 20rpx;
margin-top: 20rpx;
font-size: 26.29rpx;
height: 220rpx;
width: 100%;
.menu_li {
// margin-right: 20rpx;
// background-color: red;
// width: 50vw;
display: flex;
flex-direction: column;
align-items: center;
min-width: 140rpx;
height: auto;
// width: 120rpx;
// display: inline-block;
.image{
border: 5rpx solid #fff;
}
.li_text{
flex: 1;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 1rpx 10rpx 4rpx 10rpx;
}
}
.menu_li_on{
.image{
border: 5rpx solid #ff6d20;
border-radius: 50%;
}
.li_text{
background-color: #ff6d20;
border-radius: 2em;
color: #fff;
padding: 1rpx 10rpx 4rpx 10rpx;
}
}
}
</style>