high-mini/pages/tabBar/classify/classify.vue

<template>
	<view class=""  style="height: 100vh;overflow: hidden;background: linear-gradient(to bottom, #3DA7E7, #FFFFFF ) no-repeat;background-size: 100% calc(50px + 150rpx)
	">
		<!-- 搜索框 -->
		<block >
		    <view class="nav-search jianbian" @click="toSearch">
		        <component-search   propPlaceholder="输入商品名称搜索"></component-search>
		    </view>
		</block>
		<view v-if="category_list.length > 0" class="category-content pr  " :style="'height:calc(100vh - '+(50)+'px);'">
		<!-- 商品列表模式 -->
		<block >
		    <!-- 一级导航 -->
		    <view class="top-nav  scroll-view-horizontal">
		        <scroll-view :scroll-x="true" >
		            <block v-for="(item, index) in category_list" :key="index">
		                <view :class="' item dis-inline-block ' + (nav_active_index == index ? 'active-class ' : '')" :data-index="index" :data-itemtwoindex="0"  @click="nav_event">
		                    <view :class="'icon-content circle br ' + (nav_active_index == index ? 'active-border' : '')">
		                        <image :src="imageUrl+item['img']" mode="aspectFit"  class="icon-content-img  circle"></image>
		                    </view>
		                    <view class="margin-top-xs">{{item.title}}</view>
		                </view>
		            </block>
		        </scroll-view>
		    </view>
			
		    <!-- 二级导航 -->
		     <view class="left-nav ">
		        <scroll-view :scroll-y="true" :scroll-top="scrollTop" class="ht-auto">
		            <view class="left-content-actual bs tc">
		               
		                <block v-if="(data_content || null) != null && (data_content.children || null) != null && data_content.children.length > 0">
		                    <block v-for="(item, index) in data_content.children" :key="index">
		                        <view :class="' item   ' + (nav_active_item_two_index == index ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="index"  @click="nav_event">
		                            <text>{{item.title}}</text>
		                        </view>
		                    </block>
		                </block>
		            </view>
		        </scroll-view>
		    </view> 
		    <!-- 商品列表 -->
		    <view class="goods-right-content pa ">
				<view class="sort-contain">
					<view class="sort-cla">
						<view :class=" 'sort '+(sortIndex == 1 ? ' sort-active ' : '') "  @click="sortEvent(1)" >综合</view>
						<view :class=" 'sort '+(sortIndex == 2 ? ' sort-active ' : '') "  @click="sortEvent(2)">销量</view>
						<view class="sort px "  @click="sortEvent(3)">
							<text :class=" (sortIndex == 3 ? ' sort-active ' : '') ">价格</text>
							<view class="pri-px">
								<view :class="'icon-ymt to-blod-up ic-pri' +(sortOrder==1? ' sort-active ' : '')"></view>
								<view :class="'icon-ymt to-blod-down ic-pri' +(sortOrder==2 ? ' sort-active ' : '')"></view>	
							</view>
						</view>
					</view>
				</view>
				<view class="goods-right-ms">
					<goodsList v-if="hackReset"  :propData="goodsListData" :pageData="pageData" :selectObject="selectObject" @loadData="loadData" @switchCategory="switchCategory"   :paddBottom="0" ></goodsList>
				</view>
		        
		    </view>
		</block>
		</view>
		
		
		<!-- 购物车 -->
		<!-- <view class="gouwuche " @click="goCart">
			<uniBadge class="uni-badge-left-margin badgeClass"   max-num="99" :text="cartNum" type="warning" size="small" />
			<view class="icon cart font24px">
				
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-badge/components/uni-badge/uni-badge.vue'
	
	import componentSearch from "@/components/search/search.vue";
	import goodsList from '@/pages/classify/goods-list/goods-list.vue'
	
	
	import {getGoodsTypeTree,getListGoodsDetail,getShoppingCartList} from '@/Utils/physicalObject.js'
	const app = getApp();
	export default {
		components: {
		    componentSearch,
			goodsList,
			uniBadge
		},
		data(){
			return{
				businessType:3,//实物类型
				imageUrl: app.globalData.imgUrl,//图片地址
				category_list: [],//所有数据
				nav_active_index: 0,//一级导航
				nav_active_item_two_index: 0,//二级导航
				data_content: null,//左边导航数据{..,children:[]}
				scrollTop:0,
				
				selectObject:{
					selectIndex:0,
					length:0	
				},
				
				goodsListData: [],//右侧商品数据
				
				pageData:{
					 pageStart:1,//页码
					 pageNum:7,//每页有多少条数据
					 navigateLastPage:1,//总共有几页
					 allData:0 //总共有多少条数据
					},
				// 排序
				 sortIndex:1,//默认按综合 1综合，2销量，3价格
				 lastOrder:0,
				 sortOrder:0,//1表示升序，2表示降序
				 
				 // cartNum:app.globalData.cartNum,
				 hackReset:false,//强制刷新子组件
				
				 
				 
			}
		},
		created() {
		    // 数据加载
		    this.init();
			
		},
		onShow(){
			
			console.log("121212")
				this.hackReset = false;
				this.$nextTick(() => {
					this.hackReset = true;
				})
			

		},
		
		methods:{
			// 获取数据
			init() {			
				uni.showLoading({
					title: '加载中',
					mask:true,
				});
				let _this = this;			
				let params={
					businessType:_this.businessType
				}
				getGoodsTypeTree(params).then(async(res)=>{
					if (res.return_code == '000000') {
						uni.hideLoading();
						if(res.return_data.length>0){
							_this.category_list =res.return_data;
							_this.data_content = _this.category_list[_this.nav_active_index] || null;//左边导航的数据
							_this.sortIndex=1; //默认排序时按照综合
							if(_this.data_content.children&&_this.data_content.children.length>0){
								
								_this.selectObject={
									selectIndex:_this.nav_active_item_two_index,
									length:_this.data_content.children.length	
								};
								// console.log(_this.selectObject,"_this.selectObject")
								await _this.get_goods_list(_this.data_content.children[_this.nav_active_item_two_index].key);//获取右侧商品
							}	
						}
					
					}else{
						uni.hideLoading();
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
				
				
			},
			
			//搜索事件
			toSearch() {
				uni.navigateTo({
					url:"/pages/classify/goods-search/goods-search"
				})
			},
			//导航点击
			nav_event(e) {
				this.nav_active_index = e.currentTarget.dataset.index;//一级导航
										
				this.sortIndex=1;//默认综合排序
				this.sortOrder = 0;
				this.lastOrder = 0;
				
				this.initCategory(e.currentTarget.dataset.itemtwoindex);	
			},
			
			initCategory(towIndex){
				this.nav_active_item_two_index = towIndex;//二级导航
				this.data_content = this.category_list[this.nav_active_index] || null;//二级导航目录数据
				
				this.selectObject={
					selectIndex:this.nav_active_item_two_index,
					length:this.data_content.children.length	
				};
				this.goodsListData = [];
				this.pageData={
					 pageStart:1,
					 pageNum:7,
					 allData:0
				}
				this.get_goods_list(this.data_content.children[this.nav_active_item_two_index].key)
			},
			
			get_goods_list(key){
				
				let price =0;
				if(this.sortIndex ==3){
					if(this.sortOrder == 1){//升序
						price = 1;
					}else if(this.sortOrder == 2){//降序
						price = 2;
					}
				}
				//1升序，2倒序，0是不管 
				let _this = this;
				let params={
					goodsType:key,
					pageNum:_this.pageData.pageStart,
					pageSize:_this.pageData.pageNum,
					price:price,
				}
				// console.log(params,"params")
				getListGoodsDetail(params).then(res=>{
					if (res.return_code == '000000') {
						if(res.return_data.list.length > 0){
							_this.goodsListData =_this.goodsListData.concat(res.return_data.list);
							_this.pageData.pageStart = res.return_data.pageNum;
							_this.pageData.pageNum = res.return_data.pageSize;
							_this.pageData.allData = res.return_data.total;
							_this.pageData.navigateLastPage = res.return_data.navigateLastPage;
							
							console.log(_this.pageData)
						}
						
						
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
					
				})
				
				
		
			},
			async loadData(callback){
				let _this = this;
				
				// pageData:{
				// 	 pageStart:1,//页码
				// 	 pageNum:7,//每页有多少条数据
				// 	 navigateLastPage:1,//总共有几页
				// 	 allData:0 //总共有多少条数据
				// 	},

					if(_this.pageData.pageStart < _this.pageData.navigateLastPage){
							_this.pageData.pageStart=_this.pageData.pageStart+1;
						await	_this.get_goods_list(_this.data_content.children[_this.nav_active_item_two_index].key)
	 
					}								
					callback({ list: _this.goodsListData, total: _this.pageData.allData });

			},
			// 切换分类prev,next子组件弹射方法
			switchCategory(type){
				if (type == 'prev') {
					this.initCategory(this.nav_active_item_two_index - 1);//0
					
				}else if(type == 'next'){
					this.initCategory(this.nav_active_item_two_index + 1);//1
					// console.log(this.nav_active_item_two_index,this.nav_active_item_two_index + 1)
					
				}
				this.scrollTop = 40 *(this.nav_active_item_two_index)
				
				
			},
			//排序事件
			sortEvent(num) {
				this.sortIndex = num ;
				this.lastOrder = this.sortOrder;
				if(this.sortIndex == 3 ){
					if(this.lastOrder == 0){
						this.sortOrder = 1
					}
					if(this.lastOrder == 1){
						this.sortOrder = 2
					}
					if(this.lastOrder == 2){
						this.sortOrder = 1
					}
				}else{
					this.sortOrder = 0;
					this.lastOrder = 0;
				}
				
				this.initCategory(this.nav_active_item_two_index);
				
			},
			
		}
	}
</script>

<style scoped>
@import url("./classify.css");
.gouwuche {
	position: absolute;
	bottom: 10px;
	right: 15px;
	width: 25px;
	height: 25px;
	color: #3DA7E7 !important;
		
}

.badgeClass {
		position: absolute;
		top:-5px;
		right: -10px;
}

.font24px{
	font-size: 24px !important;
	color: #F0AD4E;
}
</style>