【新增】小程序【分类】页面当使用仿点餐模式时,增加了二级分类及滑动效果。

This commit is contained in:
大灰灰
2022-10-31 17:43:51 +08:00
parent 8c0fb11e13
commit fde4b53797

View File

@@ -57,14 +57,18 @@
<view class="content" :style="'height:' + scorllH+'px;'">
<scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
<view class="wrapper">
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus"
:key="index" @tap="handleMenuTap(item.id)">
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus" :key="index" @tap="handleMenuTap(item.id,index)">
<text>{{ item.name }}</text>
<!--<view class="dot" v-show="menuCartNum(item.id)">{{ menuCartNum(item.id) }}</view>-->
</view>
</view>
</scroll-view>
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
<u-sticky v-if="menuChilds">
<view class="coreshop-bg-white coreshop-padding-left-10">
<u-tabs :list="menuChilds" :current="childCurrent" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)',fontSize:'14px'}" :inactiveStyle="{color: '#606266',transform: 'scale(1)',fontSize:'14px'}" @change="childIdCheck"></u-tabs>
</view>
</u-sticky>
<view class="wrapper">
<view class="list">
<view class="category" v-for="(good, key) in goodsList" :key="key" :id="`cate-${good.id}`">
@@ -99,7 +103,7 @@
<view class="tag">{{cartNums}}</view>
</view>
<view class="price">{{cartMoney}}</view>
<button type="primary" class="pay-btn" @tap="redirectCart" :disabled="cartNums<=0">去结算</button>
<button type="primary" class="pay-btn" @tap="redirectCart()" :disabled="cartNums<=0">去结算</button>
</view>
<!-- 购物车栏 end -->
</view>
@@ -140,6 +144,10 @@
cartNums: 0, // 购物车数量
cartMoney: 0, // 购物车数量
menus: [],//所有分类
menuChilds: [], //当前分类下子集
needCurrentCateId: 0, //仿点餐模式下应该获取大类还是小类数据
childCurrent: 0, //子集默认选中下标
goodsList: [], //所有商品
menuScrollIntoView: '',
good: {},
@@ -190,7 +198,7 @@
return this.$store.state.config.cateStyle ? this.$store.state.config.cateStyle : 3;
}
},
onShow() {
onLoad() {
uni.getSystemInfo({
success: (e) => {
// #ifndef MP
@@ -210,13 +218,18 @@
this.goodsList = [];
this.page = 1;
this.limit = 10;
this.categories();
this.getCartNums();
//this.getCartNums();
} else {
this.categories();
}
},
onShow() {
// 获取购物车数量
if (this.$store.state.config.cateStyle == 4) {
this.getCartNums();
}
},
onReachBottom() {
if (this.loadStatus != 'nomore') {
this.getGoods();
@@ -270,8 +283,19 @@
if (this.$store.state.config.cateStyle == 4) {
this.menus = res.data;
if (res.data.length > 0) {
for (var i = 0; i < res.data.length; i++) {
if (res.data[i].child) {
let item = {
id: 0,
imageUrl: "",
name: "全部",
sort: 0,
}
res.data[i].child.unshift(...[item])
}
}
this.currentCateId = res.data[0].id;
this.menuChilds = res.data[0].child;
}
this.getGoods();
}
@@ -293,7 +317,6 @@
//console.log("监听 - 关闭sku组件");
},
showGoodSkuModal(item) {
//console.log(item);
if (item.id) {
this.getGoodsDetail(item.id);
}
@@ -348,8 +371,6 @@
},
// 加入购物车按钮
addCart(selectShop) {
//console.log("监听 - 加入购物车");
//console.log(selectShop);
var that = this;
uni.showLoading({
title: '加载中'
@@ -380,8 +401,6 @@
},
// 立即购买
buyNow(selectShop) {
//console.log("监听 - 立即购买");
//console.log(selectShop);
var that = this;
uni.showLoading({
title: '加载中'
@@ -412,13 +431,38 @@
that.closeSkuPopup();
},
handleMenuTap(id) {
this.currentCateId = id
handleMenuTap(id, index) {
var _this = this;
this.currentCateId = id;
this.needCurrentCateId = id;
this.childCurrent = 1;
console.log('childCurrent', this.childCurrent);
this.menuChilds = [];
this.menuChilds = _this.menus[index].child;
this.childCurrent = 0;
console.log('childCurrent', this.childCurrent);
this.$forceUpdate()
this.page = 1;
this.goodsList = [];
this.getGoods(0);
},
childIdCheck(e) {
if (e.id != 0) {
this.needCurrentCateId = e.id;
} else {
this.needCurrentCateId = this.currentCateId;
}
this.page = 1;
this.goodsList = [];
this.getGoods();
//this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
},
//取得商品数据
getGoods: function () {
uni.showLoading({
@@ -430,7 +474,7 @@
limit: this.limit,
};
var where = {
catId: this.currentCateId,
catId: this.needCurrentCateId,
};
data.where = JSON.stringify(where);
_this.$u.api.goodsList(data).then(res => {
@@ -461,6 +505,7 @@
if (res.status) {
this.cartNums = res.data.count;
this.cartMoney = res.data.money;
console.log(this.cartNums);
}
})
}