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

<template>
	<view class="pad-x180">
		<!-- 状态栏 -->
		<status-nav 
		:ifTitle="true" 
		:ifReturn="false"
		:ifCenter="true"
		:navBarTitle="'分类'"></status-nav>
		<!-- 容器 -->
		<container-subgroup>
			<view slot="content">
				<view class="pad30 sort-box mar-x20" style="margin-left: -30rpx;margin-right: -30rpx;" :style="{top: statusBarHeight+'px'}">
					<view class="col0 fon38 disjbac">
						<view>分类筛选</view>
						<i @tap="clikScreenIcon" class="icon icon-screen" style="font-size: 50rpx;"></i>
					</view>
					<view v-if="chooseCateList.length" class="disac fw fon24">
						<view class="disac pad-sx10 pad-zy20 radius20 bac0 colf mar-y20 mar-s20" 
						v-for="(item,index) in chooseCateList" :key="index"
						@tap="delCate(index)">
							{{item}}<i class="icon icon-del-white mar-z20" style="font-size: 20rpx;"></i>
						</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="disjbac fw">
					<view @tap="goDetail(item.id)" class="width47 mar-s50 posir" v-for="(item,index) in dataList" :key="index">
						<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
						<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
						<view class="fon30 colpeili">￥{{item.price}}</view>
						<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
					</view>
				</view>
				<!-- 无更多 -->
				<pitera v-if="total==dataList.length"></pitera>
				<!-- 筛选框 -->
				<view v-show="isScreen" @tap="isScreen=false" class="screen-box" :style="{top:statusBarHeight+'px'}">
					<view @tap.stop="isScreen=true" class="posir">
						<view class="fon24">筛选</view>
						<!-- 类型 -->
						<view v-for="(item,index) in screenList" :key="index">
							<view class="fon30 bold mar-sx20">{{item.mainTitle}}</view>
							<view class="disac fw fon24">
								<view class="disac pad-sx10 pad-zy20 radius20 mar-y20 mar-x20"
								:class="childitem.isCheck ? 'bac0 colf' : 'colpeili'" 
								v-for="(childitem,childindex) in item.childrenList" :key="childindex"
								@tap.stop="chooseCate(index,childindex,item.mainTitle)">
									{{childitem.title}}<i v-if="childitem.isCheck" class="icon icon-check mar-z20" style="font-size: 30rpx;"></i>
								</view>
							</view>
						</view>
						<!-- 价格 -->
						<view class="sort-price">
							<view class="fon30 bold mar-sx20">价格</view>
							<view class="disac fon24">
								<input class="radius20 pad-zy20" v-model="minPrice" type="number" placeholder="0" />
								<view class="mar-zy20">~</view>
								<input class="radius20 pad-zy20" v-model="maxPrice" type="number" placeholder="9999" />
							</view>
						</view>
						<!-- 按钮 -->
						<view class="disjbac fon30 screen-btn">
							<view @tap.stop="isScreen=false" class="radius30 colpeili">取消</view>
							<view @tap.stop="defineEv" class="radius30 colf">确定</view>
						</view>
					</view>
				</view>
				<!-- 全局客服 -->
				<public-customer :nbottom="520"></public-customer>
			</view>
		</container-subgroup>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	// 客服按钮组件
	import publicCustomer from '@/components/public-customer.vue';
	// 底部组件
	import footTab from '@/components/foot-tab.vue';
	export default {
		components:{
			footTab,
			publicCustomer,
			pitera
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
				publicColor:uni.getStorageSync('publicColor'),
				chooseCateList:[],//选中的分类列表
				temporaryCate:[],//暂存分类数据
				isScreen:false,//是否隐藏筛选弹框
				// 筛选弹框内容
				screenList:[
					{
						mainTitle:'类型',
						childrenList:[
							{
								title:'全部',
								isCheck:true,
							},
							{
								title:'翡翠',
								isCheck:false,
							},
							{
								title:'白玉',
								isCheck:false,
							},
							{
								title:'彩宝',
								isCheck:false,
							},
							{
								title:'琥珀',
								isCheck:false,
							},
							{
								title:'其他',
								isCheck:false,
							}
						]
					},
					{
						mainTitle:'活动',
						childrenList:[
							{
								title:'全部',
								isCheck:true,
							},
							{
								title:'折扣',
								isCheck:false,
							}
						]
					}
				],
				minPrice:'',//最低价格
				maxPrice:'',//最高价格
				dataList:[//数据列表
					
				],
				showTop:false,//是否显示返回顶部
				page:1,
				size:10,
				total:'',//总数
				titleList:uni.getStorageSync('footTitle'), // 底部导航文字
				imgList:uni.getStorageSync('footimg'), // 底部导航图标
				activityStr:'',
				categoryId:''
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.implementEv();
			}
		},
		onShareAppMessage() {
			var shareObj = {
				path: `/pages/tabbar/cate/cate?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
			};
			return shareObj;
		},
		onLoad(options) {
			if(uni.getStorageSync('phone_active')){
				this.$toolAll.tools.clearShare();
				// 调用获取筛选条件列表事件
				this.obtainScreen();
				// 调用商品列表查询事件
				this.implementEv();
			} else {
				uni.setStorageSync('existCode',options.invite_code);
				uni.setStorageSync('transientUrl',`/pages/tabbar/cate/cate`);
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			// 获取筛选条件列表
			obtainScreen(){
				this.$requst.post('/api/spu/condition').then(res=>{
					if(res.code==0){
						this.screenList = [];
						if(res.data.length){
							res.data.forEach((item,index)=>{
								let obj = {};
								let newlist = [];
								item.children.forEach((item1,index1)=>{
									let childObj = {
										id:item1.value,
										title:item1.name,
										isCheck:index1==0 ? true : false
									}
									newlist.push(childObj)
								})
								obj = {
									mainTitle:item.title,
									childrenList:newlist
								}
								this.screenList.push(obj)
							})
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			
			// 点击筛选按钮图标
			clikScreenIcon(){
				this.isScreen = true;
			},
			// 分类选择事件
			chooseCate(mainIndex,childrenIndex,title){
				// 清除分类所有选中项
				this.screenList[mainIndex].childrenList.forEach((item,index)=>{
					item.isCheck = false;
				})
				let screenIndex =  this.screenList.findIndex(item=>item.mainTitle==title);
				if(screenIndex==0){
					// 设置分类id
					if(childrenIndex==0){
						this.categoryId = '';
					} else {
						this.categoryId = this.screenList[screenIndex].childrenList[childrenIndex].id;
					}
				}
				if(screenIndex==1){
					// 设置限时优惠
					if(childrenIndex==0){
						this.activityStr = '';
					} else {
						this.activityStr = this.screenList[screenIndex].childrenList[childrenIndex].id;
					}
				}
				// 将当前选择的类别下的数组置空
				this.temporaryCate[mainIndex] = [];
				// 设置当前选中项为true
				this.screenList[mainIndex].childrenList[childrenIndex].isCheck = true;
				// 向二维数组存储选中项
				this.screenList[mainIndex].childrenList.forEach((item,index)=>{
					if(item.isCheck){
						if(index!=0){
							this.temporaryCate[mainIndex].push(item.title);
						} else {
							this.temporaryCate.splice(mainIndex,1);
						}
					}
				})
			},
			// 删除选中的分类列表
			delCate(index){
				this.chooseCateList.splice(index,1);
				if(index==0){//清空分类id
					this.categoryId = '';
				}
				if(index==1){//清空活动限时字段
					this.activityStr = '';
				}
				// 清除选中
				this.screenList.forEach((item1,index1)=>{
					item1.childrenList.forEach((item2,index2)=>{
						if(index2!=0){
							this.screenList[index1].childrenList[index2].isCheck = false;
						}
					})
				})
				if(this.chooseCateList.length){
					this.chooseCateList.forEach((existItem,existIndex)=>{
						// 设置存在的选中状态
						this.screenList.forEach((item,mainIndex)=>{
							let nameIndex = item.childrenList.findIndex((childItem)=>{
								return childItem.title == existItem;
							})
							if(nameIndex!=-1){
								this.screenList[mainIndex].childrenList[nameIndex].isCheck = true;
							} else {
								this.screenList[mainIndex].childrenList[0].isCheck = true;
							}
						})
						// 变更暂存的分类数组
						this.temporaryCate.forEach((temporaryItem,temporaryIndex)=>{
							let newIndex = temporaryItem.findIndex(titem=>{
								return titem == existItem;
							})
							if(newIndex==-1){
								this.temporaryCate[temporaryIndex].splice(0,1);
							}
						})
					})
				} else {// 传递的分类数组长度为0
					this.screenList.forEach((item1,index1)=>{
						item1.childrenList.forEach((item2,index2)=>{
							if(index2==0){
								this.screenList[index1].childrenList[index2].isCheck = true;
							}
						})
					})
					this.temporaryCate = [];
					// 设置分类id
					this.categoryId = '';
					// 设置限时优惠
					this.activityStr = '';
					// 调用搜索执行事件
					this.implementEv();
				}
			},
			// 分类筛选确认事件
			defineEv(){
				this.log(this.temporaryCate)
				// 二维数组this.temporaryCate 降一维数组this.chooseCateList
				let newChoose = this.temporaryCate.join().split(',');
				// 置空选中的分类列表
				this.chooseCateList = [];
				newChoose.forEach(item=>{
					if(item!=''){
						this.chooseCateList.push(item);
					}
				})
				this.isScreen = false;
				this.page = 1;
				// 调用搜索执行事件
				this.implementEv();
			},
			// 搜索执行事件
			implementEv(){
				this.$toolAll.tools.showToast('搜索中...')
				let params = {
					keyword:'', //商品关键字 支持模糊搜索
					page:this.page, // 页数
					size: this.size, // 每页数量
					activity:this.activityStr,// 活动类型 默认normal=普通商品；limit_time=限时促销
					category_id:this.categoryId,// 分类ID 多个分类用英文逗号分割
					price_from:this.minPrice,// 价格区间 最低价格 0不限
					price_to:this.maxPrice,// 价格区间 最大价格 0不限
				}
				this.$requst.post('/api/spu/list',params).then(res=>{
					if(res.code==0){
						if(this.page==1) this.dataList = [];
						// 设置商品总数
						this.total = res.data.total;
						if(res.data.list.length){
							res.data.list.forEach(item=>{
								let obj = {
									id:item.id,
									imgSrc:item.cover,
									title:item.name,
									// price:this.$toolAll.tools.changeNum(item.price*1),
									price:item.price,
									isActivity:item.tag == '' ? false : true,
								}
								this.dataList.push(obj);
							})
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			goDetail(id){//前往详情页
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}`
				})
			},
		}
	}
</script>

<style>

</style>