店铺二级分类修改

pages/index/index.vue

@@ -522,18 +522,26 @@
 				diyId: 0,
 				preview: false,
 				isSupport: true,
+				isIndexClick: true,
+				scrollTop: 0
 			};
 		},
 
 		onTabItemTap(e) {
-			uni.pageScrollTo({
+			if (this.isIndexClick) {
-				scrollTop: 0,
+				uni.pageScrollTo({
-				duration: 300
+					scrollTop: 0,
-			});
+					duration: 300
+				});
+			} else {
+				this.isIndexClick = true;
+			}
 		},
 
 		// 滚动监听
 		onPageScroll(e) {
+			this.isIndexClick = true;
+			this.scrollTop = e.scrollTop;
 			this.isFixed = e.scrollTop > 40;
 			if (this.isHeaderSerch) {
 				let isScroll = false
@@ -545,7 +553,6 @@
 			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
 			uni.$emit('scroll');
 
-
 			if (e.scrollTop >= 100) {
 				uni.setTabBarItem({
 					index: 0,
@@ -612,7 +619,8 @@
 			this.activeRouter = '/' + curRoute
 		},
 		onShow() {
-			let that = this
+			let that = this;
+
 			that.isIntegral = uni.getStorageSync('isIntegral')
 			// #ifdef APP-PLUS
 			if (that.appUpdate.openUpgrade == '1') {
@@ -628,6 +636,8 @@
 					that.isScrolled = res[0].top <= -60
 				})
 			})
+			this.isIndexClick = false;
+
 			if (this.isLogin) {
 				this.getUserInfo();
 			}

pages/store/home/index.vue

@@ -2,7 +2,6 @@
 	<view class="store-home">
 		<view class="header">
 			<view style="height: var(--status-bar-height);"></view>
-
 			<view class="head-menu">
 				<view class="iconfont icon-xiangzuo" @click="goback" style="color: #fff;"></view>
 				<navigator :url="'/pages/store/list/index?mer_id='+id" hover-class="none"
@@ -86,10 +85,10 @@
 		</view>
 
 		<scroll-view class="main" scroll-y="true" @scroll="scrollHome" catchtouchmove :style="viewColor">
-			<!-- nav的占位 -->
 			<view class="tab-cont"
-				:style="viewColor,{'height':'calc(100vh - '+listHeight + (tabActive == 2?' + 84rpx':'')+' )'}"
+				:style="viewColor,{'height':'calc(100vh - '+(listHeight) + (tabActive == 2?' + 84rpx':'')+' )'}"
 				:class="{noPointer : preview}">
+
 				<!-- 占位 -->
 				<view class="aside-left-placeholder" v-if="tabActive != 2"></view>
 
@@ -151,11 +150,28 @@
 				</view>
 
 				<!-- 首页 -->
-				<view style="margin:0 auto;"
+				<view style="margin:0px auto;"
 					v-show="(tabActive == 3 || tabActive == 7 || diyActive == 1 || diyActive == 2) && tabActive != 5 && tabActive != 2">
+					<!-- 二级分类 -->
+					<scroll-view :scroll-x="true" class="small-classify" :style="{'width':'calc(100vw - 152rpx)'}"
+						v-if="asideCurr">
+						<view class="second-item-con-wrap">
+							<view class="second-item-con" :style="{'flex-wrap':isChangeSecTabStyle?'wrap':''}">
+								<block v-for="item in secondTabList" :key="item.store_category_id">
+									<view class="small-classify-item"
+										:class="{'small-classify-item-active':secondTabCurr == item.store_category_id?true:false}"
+										@click="onSecondTabChange(item.store_category_id)">
+										{{item.cate_name}}
+									</view>
+								</block>
+							</view>
+							<view class="sanjiaoxing" @click="onChangeSecTabStyle"></view>
+						</view>
+					</scroll-view>
+
 					<!-- 商品 -->
 					<view v-if="goods.length" class="goods-wrap" id="goods" @touchmove="onTouchmove"
-						:style="{'width':'calc(100vw - 152rpx)'}">
+						:style="{'width':'calc(100vw - 152rpx)','padding-top':(!!asideCurr?'94rpx' :'')}">
 						<view v-if="isColumn" class="goods column">
 							<view v-for="(item,indx) in goods" :key="indx" class="item" @click="goGoodsDetail(item)">
 								<view class="image" style="width: 180rpx;height: 180rpx;">
@@ -197,7 +213,8 @@
 							<WaterfallsFlow :wfList='goods' @itemTap="goGoodsDetail" :type="1" :isStore="1" />
 						</view>
 					</view>
-					<view v-if="goodsLoading" class="acea-row row-center-wrapper loadingicon">
+					<view v-if="goodsLoading" class="acea-row row-center-wrapper loadingicon"
+						:style="{'margin-top':!!asideCurr?'94rpx':''}">
 						<text :hidden="!goodsLoading" class="iconfont icon-jiazai loading"></text>
 						{{loadTitle}}
 					</view>
@@ -224,7 +241,8 @@
 							</view>
 						</view>
 					</view>
-					<view class="acea-row row-center-wrapper loadingicon">
+					<view class="acea-row row-center-wrapper loadingicon"
+						:style="{'margin-top':!!asideCurr?'94rpx':''}">
 						<text :hidden="!categoryLoading" class="iconfont icon-jiazai loading"></text>
 						{{loadTitle}}
 					</view>
@@ -373,7 +391,7 @@
 				navShow: false,
 				navActive: 0,
 				diyActive: 0,
-				tabActive: '', // 底部切换
+				tabActive: 3, // 底部切换
 				isCoupon: 0,
 				keyword: '',
 				order: '',
@@ -470,7 +488,11 @@
 				asideCurr: '',
 				CartCount: 0,
 				navHeight: 0,
-				listTop: 0
+				listTop: 0,
+				mer_type: '', //区分云仓
+				secondTabList: [],
+				secondTabCurr: '', //二级分类
+				isChangeSecTabStyle: false
 			}
 		},
 		computed: {
@@ -527,6 +549,7 @@
 						break;
 					case 7:
 						this.resetParmas();
+						this.getMerClassifly();
 						this.goods = [];
 						this.getGoods();
 						break;
@@ -557,8 +580,9 @@
 				}
 			}
 			// #endif
+			// 店铺详情
 			this.getStore();
-			this.diyData();
+			// this.diyData();
 			shareScence(this.currSpid, this.isLogin);
 
 			this.initHeight();
@@ -579,6 +603,8 @@
 			})
 
 			this.getMerClassifly();
+
+			// 购物车
 			this.getCart();
 		},
 
@@ -617,31 +643,99 @@
 				getCartCounts({
 					sale_type: this.where.sale_type
 				}).then(res => {
-					console.log(res)
 					that.CartCount = res.data[0].count;
 				});
 			},
 
 			// 修改菜单
 			onChangeAsideMenu(e) {
+				// 获取二级分类
+				this.getMerClassifly(e)
 				this.asideCurr = e;
 				this.resetParmas();
 				this.goods = [];
 				this.loadend = false;
+				//重置二级菜单
+				this.secondTabCurr = '';
+				this.isChangeSecTabStyle = false;
+			},
+
+			// 获取分类
+			getMerClassifly(pid) {
+				const param = {
+					mer_type: 2,
+					sale_type: this.where.sale_type,
+					mer_id: '',
+					mer_type: '',
+					pid: pid
+				};
+
+				// 云商品(不查询分类下边没有商品的分类)
+				if (this.tabActive == 7) {
+					param.mer_type = 1;
+					param.mer_id = '';
+				}
+				//一般商品(不查询分类下边没有商品的分类)
+				if (this.tabActive == 3) {
+					param.mer_id = this.id;
+					param.mer_type = 2;
+				}
+
+				getCategoryIndexList(param).then(res => {
+					//二级分类
+					if (pid) {
+						this.secondTabList = [{
+							cate_name: '全部',
+							store_category_id: ''
+						}, ...res.data];
+					} else { //一级分类
+						this.asideMenu = [{
+							cate_name: '全部',
+							store_category_id: ''
+						}, ...res.data];
+					}
+					this.getGoods();
+				})
+			},
+
+			// 二级分类
+			onSecondTabChange(e) {
+				this.isChangeSecTabStyle = false;
+				this.secondTabCurr = e;
+				this.resetParmas();
+				this.goods = [];
+				this.loadend = false;
 				this.getGoods();
 			},
 
-			// 获取分类
+			// 商铺底部切换
-			getMerClassifly() {
+			tab: function(param) {
-				getCategoryIndexList({
+				if (param == 9) return uni.switchTab({
-					mer_type: 2,
+					url: "/pages/order_addcart/order_addcart"
-					sale_type: this.where.sale_type
+				});
-				}).then(res => {
+
-					this.asideMenu = [{
+				this.tabActive = param;
-						cate_name: '全部',
+				this.goodsLoading = this.loadend = this.loading = false;
-						store_category_id: ''
+
-					}, ...res.data];
+				// 底部tab切换
-				})
+				this.secondTabCurr = '';
+				this.secondTabList = [];
+				this.asideCurr = '';
+				this.asideMenu = [];
+				this.loadend = false;
+				this.getMerClassifly();
+			},
+
+			// 二级类目样式
+			onChangeSecTabStyle() {
+				this.isChangeSecTabStyle = !this.isChangeSecTabStyle;
+			},
+
+			// 商铺首页滚动 navbar 吸顶
+			scrollHome: function(e) {
+				console.log(1)
+				// uni.$emit('scroll');
+				// this.navShow = e.detail.scrollTop >= 50;
 			},
 
 			navTo(url) {
@@ -862,7 +956,6 @@
 			},
 			// 获取商铺商品
 			getGoods: function() {
-				console.log(2)
 				let that = this;
 				if (that.loadend) return;
 				if (that.loading) return;
@@ -870,7 +963,11 @@
 
 				that.goodsLoading = true;
 				that.loadTitle = '';
-				that.where.cate_pid = that.asideCurr;
+
+				if (that.secondTabCurr) //有二级查二级
+					that.where.cate_pid = that.secondTabCurr;
+				else //无二级查一级
+					that.where.cate_pid = that.asideCurr;
 
 				if (this.tabActive == 7) getStoreCloudGoods(that.id, that.where).then(res => {
 					that.goodsLoading = false;
@@ -1079,11 +1176,6 @@
 					}
 				})
 			},
-			// 商铺首页滚动 navbar 吸顶
-			scrollHome: function(e) {
-				// uni.$emit('scroll');
-				// this.navShow = e.detail.scrollTop >= 50;
-			},
 
 			goback: function() {
 				uni.navigateBack();
@@ -1095,16 +1187,6 @@
 				});
 			},
 
-			// 商铺底部切换
-			tab: function(param) {
-				console.log(param)
-				if (param == 9) return uni.switchTab({
-					url: "/pages/order_addcart/order_addcart"
-				})
-				this.tabActive = param;
-				this.goodsLoading = this.loadend = this.loading = false
-			},
-
 			resetParmas() {
 				this.navActive = 0;
 				this.where = {
@@ -1112,7 +1194,8 @@
 					keyword: '',
 					page: 1,
 					limit: 30,
-					sale_type: this.where.sale_type
+					sale_type: this.where.sale_type,
+					cate_pid: ''
 				}
 			},
 
@@ -1163,6 +1246,7 @@
 			}
 		},
 		onPageScroll() {
+			this.isChangeSecTabStyle = false;
 			uni.$emit('scroll');
 		},
 		onPullDownRefresh() {
@@ -1177,6 +1261,56 @@
 </script>
 
 <style lang="scss" scoped>
+	.small-classify {
+		position: fixed;
+		left: 152rpx;
+		min-height: 94rpx;
+		background: #fff;
+		z-index: 100;
+		padding: 20rpx 20rpx 10rpx;
+		box-sizing: border-box;
+
+		.second-item-con-wrap {
+			position: relative;
+			display: flex;
+			align-items: center;
+
+			.second-item-con {
+				display: flex;
+				width: 95%;
+				overflow: auto;
+			}
+
+			.sanjiaoxing {
+				position: absolute;
+				right: -2rpx;
+				top: 20rpx;
+				width: 0;
+				height: 0;
+				border: 12rpx solid;
+				border-color: #333 transparent transparent transparent;
+				margin-left: 4rpx;
+			}
+		}
+
+		.small-classify-item {
+			flex-shrink: 0;
+			padding: 10rpx 40rpx;
+			border-radius: 4rpx;
+			font-size: 24rpx;
+			color: #999;
+			background: #F6F6F6;
+			text-align: center;
+			margin-right: 10rpx;
+			margin-bottom: 10rpx;
+		}
+
+		.small-classify-item-active {
+			background: #ECFFE8;
+			color: #40AE36;
+		}
+	}
+
 	.tab-cont {
 		background: #f5f5f5;
 		min-height: 500rpx;
@@ -2225,7 +2359,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		margin-top: 0;
+		margin: 0 auto;
 
 		image {
 			width: 414rpx;

pages/whole_sale/index.vue

@@ -558,7 +558,8 @@
 					deduction_rate: '', //抵扣比例
 					order: '', // 销量sales, 价格低到高price_asc, 价格高到低price_desc
 					rand: 1,
-				}
+				},
+				isIndexClick: true
 			}
 		},
 		computed: {
@@ -573,10 +574,19 @@
 		},
 
 		onTabItemTap(e) {
-			uni.pageScrollTo({
+			if (this.isIndexClick) {
-				scrollTop: 0,
+				uni.pageScrollTo({
-				duration: 300
+					scrollTop: 0,
-			});
+					duration: 300
+				});
+			} else {
+				this.isIndexClick = true;
+			}
+		},
+
+		onShow() {
+			console.log(this.isIndexClick)
+			this.isIndexClick = false;
 		},
 
 		onPageScroll(e) {