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

<template>
	<view class="classify-contain" >
		<!-- 搜索框 -->
		<block >
		    <view class="nav-search jianbian" @click="toSearch">
		        <component-search :disableInput="true" :propIsRequired="false"  propPlaceholder="输入商品名称搜索"></component-search>
		    </view>
		</block>
		
		<!-- <skeleton
		:loading="false"
		:isClassify="true"
		:showAvatar="false"
		>
		</skeleton> -->
		
		<view v-if="category_list.length > 0"  class="category-content pr  " :style="'height:calc(100% - '+(60)+'px);'">
		<!-- 商品列表模式 -->
		<block >
		    <!-- 一级导航 -->
		    <view class="top-nav  scroll-view-horizontal">
		        
				<scroll-view style="height: 100%;" scroll-x="true" @touchmove.stop>
		            <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="nav-container dis-flex">
				
			
		    <!-- 二级导航 -->
		     <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="'dis-flex flex-center item   ' + (nav_active_item_two_index == index ? 'active-class active-border nav-active' : '')" :data-index="nav_active_index" :data-itemtwoindex="index"  @click="nav_event">
		                          <image v-if="item.img" class="item-img"  :src="imageUrl+item.img" mode="aspectFit"></image>  <text class="">{{item.title || ''}}</text>
		                        </view>
		                    </block>
		                </block>
		            </view>
		        </scroll-view>
		    </view> 
		    <!-- 商品列表 -->
		    <view class="goods-right-content  ">
				<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"   >
					<skeleton
					:loading="isLoading"
					:avatarSize="'200rpx'"
					avatarShape="square"
					:row="3"
					:showTitle="true"
					v-for="(item,index) in skeletonNum"
					:key="index"
					>
					</skeleton>
					<goodsList v-if="!isLoading" ref="goodsList" :hackReset="true"  :propData="goodsListData" :pageData="pageData" :selectObject="selectObject" @loadData="loadData" @switchCategory="switchCategory"   :paddBottom="0" ></goodsList>
					<!-- <view class="spinner">
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="dot"></view>
					</view> -->
				</view>
		        
		    </view>
		</view>
		</block>
		</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 '@/components/goods-list/goods-list.vue'
	
	import skeleton from '@/components/J-skeleton/J-skeleton.vue'
	
	import {getGoodsTypeTree,getListGoodsDetail,getShoppingCartList} from '@/Utils/physicalObject.js'
	const app = getApp();
	export default {
		components: {
		    componentSearch,
			goodsList,
			uniBadge,
			skeleton
		},
		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:20,//每页有多少条数据
					 navigateLastPage:1,//总共有几页
					 allData:0 //总共有多少条数据
					},
				// 排序
				 sortIndex:1,//默认按综合 1综合，2销量，3价格
				 lastOrder:0,
				 sortOrder:0,//1表示升序，2表示降序
				 
				 // cartNum:app.globalData.cartNum,
				
				isLoading:false,
				skeletonNum:[1,2,3,4],
				 
				 
			}
		},

		onLoad(){
			// 数据加载
			this.init();
			this.isLoading = true;
			
		},
		onShow(){	
			this.$nextTick(()=>{
				if(this.$refs.goodsList&&app.globalData.userInfo){
					this.$refs.goodsList.refreshCartNum()
				}
				
				
			})
					
					
		},
		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
						})
					}
				})
				
				
			},
			touchFalse(){
				return false;
			},
			//搜索事件
			toSearch() {
				uni.navigateTo({
					url:"/physical-merchants/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:20,
					 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,
					companyId:app.globalData.companyId
				}
				
				// uni.showLoading({
				// 		title: '',
				// 		mask:true,
				// 	});
				
				// console.log(params,"params")
				getListGoodsDetail(params).then(res=>{		
					setTimeout(()=>{
						this.isLoading = false;
					},200)
					// uni.hideLoading();
					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{
						_this.goodsListData=[]
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
					
				})
				
				
		
			},
			async loadData(callback){
				let _this = this;
				
				// pageData:{
				// 	 pageStart:1,//页码
				// 	 pageNum:20,//每页有多少条数据
				// 	 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");

.classify-contain{
	
	
	height: calc(100vh - var(--window-bottom));
	overflow: hidden;
	background: linear-gradient(to bottom, #3DA7E7, #FFFFFF ) no-repeat;
	background-size: 100% calc(61px + 150rpx);
}

.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;
}


/* 
 */
.item-img{
	height: 20px;
	width:20px;
	margin-right: 6px;
}

.spinner {
 width: 60px;
 height: 60px;
 position: relative;
 left: calc(50% - 30px);
 top:calc(50% - 25px);
}

.spinner .dot {
 position: absolute;
 inset: 0;
 display: flex;
 justify-content: center;
}

.spinner .dot::after {
 content: "";
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background-color: rgb(12, 180, 231);
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

.spinner .dot {
 animation: spin 2s infinite;
}

.spinner .dot:nth-child(2) {
 animation-delay: 100ms;
}

.spinner .dot:nth-child(3) {
 animation-delay: 200ms;
}

.spinner .dot:nth-child(4) {
 animation-delay: 300ms;
}

.spinner .dot:nth-child(5) {
 animation-delay: 400ms;
}



</style>