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

<template>
	<view class="pad-b150">
		<status-nav :ifReturn="false" navBarTitle="分类" :marginBottom="0"></status-nav>
		<!-- 选择厂家 -->
		<view class="pull-all-bg" v-show="isShow" @tap="closeMore"></view>
		<view class="company-top" v-if="businessId==0"></view>
		<view class="company" :style="{'top':topHieght+'px'}" v-if="businessId==0">
			<input type="text" :value="companyList[companyIndex].name?'工厂选择：'+ companyList[companyIndex].name:''" @tap="openMore">
			<view class="company-list" v-if="isShow">
				<view @tap="checkValue(index,item.id)" class="company-item" :class="companyIndex == index?'cur':''" v-for="(item,index) in companyList">{{item.name}}</view>
			</view>
		</view>
		<!-- 一级分类列表 -->
		<view class="cate-nav-bg" :style="{'height':scrollHeight+'px','top':topHieght+'px'}" :class="businessId==0?'':'to-top'">
			<view class="cate-nav">
				<view class="cate-nav-item" :class="cateIndex == index?'active':''" @tap="changeCate(index,item.id)" v-for="(item,index) in cateList" :key="index">{{item.title}}</view>
			</view>
		</view>
		<!-- 二级分类列表 -->
		<scroll-view class="shop-list-bg" :class="businessId==0?'':'to-top'">
			<view class="shop-list flex">
				<view class="shop-item" @tap="toShop(item.id)" v-for="(item,index) in secondList" :key="index">
					<view class="img flex"><image :src="item.cover" mode="widthFix"></image></view>
					<view class="txt clips1">{{item.title}}</view>
				</view>
			</view>
			<view class="tips" v-if="secondList.length==0 && isTips">---没有更多分类---</view>
		</scroll-view>
		<!-- 购物车btn -->
		<enter-cart></enter-cart>
		<!-- 底部tab -->
		<foot-tab current="1"></foot-tab>
	</view>
</template>

<script>
	import statusNav from '@/components/status-navs/status-nav';
	import enterCart from '@/components/enter-cart/enter-cart.vue';
	// 底部组件
	import footTab from '@/components/foot-tab/foot-tab.vue';
	import {getCartNum,userInfoEv} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		components:{
			statusNav,
			enterCart,
			footTab
		},
		data() {
			return {
				scrollHeight:uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - 50,
				newWidth:uni.getSystemInfoSync().windowWidth,
				topHieght: uni.getSystemInfoSync().statusBarHeight + 50,
				companyList:[], //工厂列表
				companyIndex: 0, //当前厂家
				isShow: false, //显示弹窗
				cateList:[], //一级分类列表
				cateIndex:0,
				secondList:[], //二级分类列表
				total:0,
				flag:true,
				ifLoading:false,
				businessId:0, //分类id
				isTips:false, //是否提示
			}
		},
		computed:{
			...mapState({
				footHeight: state => state.moduleA.footHeight,
			}),
		},
		onLoad(op) {
			if(op.business_id){
				this.$requst.post('/api/index/change-business',{business_id:op.business_id}).then(res=>{
					if(res.code == 0){
						this.getUserInfo();
						userInfoEv();
					}
				})
			}else{
				this.getUserInfo();
				userInfoEv();
			}
		},
		onShow() {
			
		},
		onReachBottom(e) {
			
		},
		// 分享到微信
		onShareAppMessage() {
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		// 分享到朋友圈
		onShareTimeline(res){
			let path = uni.getStorageSync('page-path-options')+'?business_id='+uni.getStorageSync('business_id');
			return {
				path:path
			}
		},
		methods: {
			// 获取用户信息
			getUserInfo(){
				uni.showLoading();
				this.$requst.get('/api/user/info').then(res=>{
					if(res.code==0) {
						this.businessId = res.data.business_id;
						this.getCompanyList(res.data.business_id); //查询商户
						this.getCateList(res.data.business_id); //查询一级分类
					}
				})
			},
			// 弹出厂家选择框
			openMore(){
				if(!this.isShow){
					this.isShow = true;
				}else{
					this.isShow = false;
				}
			},
			// 关闭厂家选择
			closeMore(){
				this.isShow = false;
			},
			// 选择厂家
			checkValue(index,id){
				this.companyIndex = index;
				this.getCateList(id); //查询一级分类
				// 关闭厂家选择
				this.closeMore();
			},
			// 选择分类 
			changeCate(index,id){
				this.cateIndex = index;
				// 查询二级
				this.isTips = false;
				this.secondList=[];
				this.getSecondList(this.cateIndex);
			},
			// 查询工厂列表
			getCompanyList(business_id){
				this.$requst.get('/api/spu/business',{business_id:business_id}).then(res=>{
					if(res.code==0) {
						this.companyList = res.data; //商户列表
						// 查询一级分类
						if(this.companyList.length>0){
							this.getCateList(this.companyList[0].id);
						}else{
							this.getCateList(0);
						}
						
					}
				})
			},
			// 查询一级分类
			getCateList(pid){
				this.$requst.get('/api/spu/category',{business_id:pid}).then(res=>{
					if(res.code==0) {
						if(res.data.length>0){
							uni.setStorageSync('companyIndex',this.companyIndex); //工厂index
							uni.setStorageSync('businessId',this.businessId); //工厂id
							this.cateIndex = 0;
							this.cateList = [];
							this.cateList = res.data; //一级分类
							// 查询二级
							this.getSecondList(this.cateIndex);
						}else{
							this.$toolAll.tools.showToast('该商户不能选择');
							this.companyIndex = uni.getStorageSync('companyIndex'); //还原工厂index
							this.businessId = uni.getStorageSync('businessId'); //还原工厂id
						}
					}
					uni.hideLoading();
				})
			},
			// 查询二级分类
			getSecondList(index){
				if(this.cateList[index].has_children){
					this.secondList = this.cateList[index].children;
				}else{
					this.isTips = true;
				}
			},			
			// 跳转详情页
			toShop(id) {
				uni.navigateTo({
					url:`/pagesA/shop/shop?category_id=${id}&business_id=${this.businessId}`
				})
			},
		}
	}
</script>

<style>
	
</style>