mall-applet1/pages/tabbar/cate/cate.vue

<template>
	<view>
		<status-container :ifReturn="false" titlet="分类">
			<view slot="content" style="margin: -20rpx -20rpx 0 -20rpx;">
				<view class="dis">
					<view class="cate-left-box">
						<scroll-view scroll-y :style="{height: scrollHeight +'px'}" class="bacf">
							<view>
								<view class="flexs clips1 pad-z20 fon24" 
								@tap="chooseCate(index,item.id)" :style="{backgroundColor: current==index ? '#ff3673' : '#FFFFFF',color: current==index ? '#FFFFFF' : '#000000'}" 
								v-for="(item,index) in cateList" :key="index" style="min-width: 160rpx;height: 86rpx;line-height: 86rpx;box-sizing: border-box;" >{{item.title}}</view>
							</view>
						</scroll-view>
					</view>
					<view class="pad-zy20" style="width: 100%;">
						<scroll-view :style="{height: scrollHeight +'px'}" style="padding-bottom: 130rpx;" 
							scroll-y="true" 
							:scroll-into-view="doms"
							scroll-with-animation
							@scroll="scrolls"
							@scrolltolower="scrollBottomEv">
							<view class="posir" :id="'product'+index" v-for="(item,index) in dataList" :key="index">
								<view class="disac bbt-d9 pad-sx30" @tap="goDetail(item.id)" v-for="(item1,index1) in item" :key="index1">
									<view class="cate-title" v-if="item.length > 0">{{cateList[index].title}}</view>
									<view class="cate-txt">
										<image class="radius30 flexs borbot-cc" :src="item1.imgsrc" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
										<view class="width100 disjb fc mar-z20" style="height: 240rpx;">
											<view class="fon30 colb clips2">{{item1.title}}</view>
											<view class="">
												<view class="fon36 textc mar-x36">￥{{item1.price}}</view>
												<view @tap.stop="addCartEv(item1.skuId)" class="colf disjcac fon24 radius30  cate-btn">
													<i class="icon icon-shop-cart mar-y10" style="font-size: 36rpx;"></i>
													立即选购
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 底部tab -->
		<foot-tab current="1"></foot-tab>
	</view>
</template>

<script>
	import listOne from '@/components/list/list-one';
	import pitera from '@/components/nothing/pitera';
	import swiperTabJl from '@/components/swiper-tab/swiper-tab-jl.vue';
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import {getCartNum} from '@/jsFile/public-api.js';
	import { mapState } from 'vuex'//引入mapState
	export default {
		components:{
			'foot-tab' :footTab,
			listOne,
			pitera,
			swiperTabJl
		},
		data() {
			return {
				current:0,
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				cateList:[], //分类导航列表
				activeIndex:0,
				secendCateList:[],
				dataList:[], //商品列表
				total:0,
				flag:true,
				ifLoading:false,
				pid:'',//分类id
				doms:'',
				topList:[]
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			this.scrollHeight = this.scrollHeight - this.footHeight;
			if(op.index) {
				this.current = op.index;
			}
			this.checkShopCate();
		},
		methods: {
			// 查询商品列表
			checkShopList(){
				for(let i=0;i<this.cateList.length;i++){
					console.log(i)
					this.ifLoading = true;
					let params = {
						category_id:this.cateList[i].id
					}
					this.$requst.post('/api/spu/list',params).then(res=>{
						if(res.code==0) {
							this.total = res.data.total;
							let newArr = [];
							res.data.list.forEach(item=>{
								let obj = {
									id:item.id,
									skuId:item.skuId,
									imgsrc:item.cover, 
									title:item.name,
									price:this.$toolAll.tools.changeNum(parseInt(item.price)+'')
								}
								newArr.push(obj);
							})
							this.dataList[i] = newArr;
							if(i == this.cateList.length-1){
								console.log(i,123)
								this.getNodesInfo();
								this.ifLoading = false;
							}
						}
					})
				}
			},
			
			// 查询左侧分类列表
			checkShopCate(){
				this.$requst.post('/api/spu/category',{hasChildren:1}).then(res=>{
					if(res.code==0) {
						this.cateList = res.data;
						setTimeout(()=>{
							// 获取元素宽
							const query = wx.createSelectorQuery().in(this)
							query.select('.cate-left-box').boundingClientRect((rect) => {
								this.newWidth = this.newWidth - rect.width - 20;
							}).exec()
						},200)
						this.checkShopList();
					}
				})
			},
			
			scrollBottomEv(){
				console.log('触底了');
				// setTimeout(()=>{
				// 	this.current =this.cateList.length - 1;
				// },80)
			},
			
			// 一级分类选择
			chooseCate(index,id) {
				this.current =index
				this.doms = 'product'+index
			},
			
			// 滚动
			scrolls(e){
				let scrollTop = e.target.scrollTop
				for(let i =0;i<this.topList.length;i++){
					let h1 = this.topList[i]
					let h2 = this.topList[i+1]
					if(scrollTop>=h1&&scrollTop<h2){
						this.current = i
					}
				}
			},
			
			// 改变topList
			getNodesInfo(){
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.posir').boundingClientRect().exec((res)=>{
						console.log(res,234)
						let nodes = res[0]
						let rel =[];
						nodes.map(item=>{
							rel.push(item.top)
						})
						this.topList = rel
					})
				},200)
				
			},
			
			// 跳转详情页
			goDetail(id) {
				uni.navigateTo({
					url:'/pagesB/shop-detail/shop-detail?id='+id
				})
			},
			
			// 加入购物车
			addCartEv(id) {
				this.$requst.post('/api/order/shopping-cart-add',{sku_id:id,num:1}).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)');
						getCartNum();
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
		}
	}
</script>

<style>
.cate-btn{background: linear-gradient(to right,#ff3772 0%,#fd5549 100%);width: 170rpx;height: 60rpx;box-shadow: 0rpx 6rpx 10rpx rgba(255, 55, 114, .3);}
.disac {flex-wrap: wrap;}
.cate-txt{
	display: flex;
}
.cate-title{width: 100%;font-size: 24rpx;line-height: 1.5;padding-bottom: 30rpx;color: #666;}
</style>