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

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav 
		:ifTitle="true" 
		:ifReturn="false"
		:ifCenter="true"
		:navBarTitle="'分类'"></status-nav>
		<view :style="{paddingTop: statusBarHeight+'px'}" class="pad-x140">
			<view class="pad30 sort-box" :style="{top: statusBarHeight+'px'}">
				<view class="col0 fon38 disjbac fon50">
					<view class="bold">分类筛选</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>
			<!-- 列表 -->
			<list-two :scrollCate="4"></list-two>
			<!-- 筛选框 -->
			<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)">
								{{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>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
		<!-- 全局客服 -->
		<public-customer :nbottom="320"></public-customer>
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
	</view>
</template>

<script>
	import swiperPu from '@/components/swiper-pu.vue';
	import cateTu from '@/components/cate-items/cate-tu.vue';
	import listTwo from '@/components/list/list-two.vue';
	import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			swiperPu,
			cateTu,
			listTwo
		},
		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:'',//最高价格
				ccurrent:0,
				cateList:[],
				cateListTwo:[//二级分类
					
				],
				dataList:[//小课堂数据列表
					
				],
				showTop:false,//是否显示返回顶部
				tuList:[],
				newCurrent:0,
				cateW:'',//分类宽度
				isLoading:false,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				category_id:'',//栏目ID
				disease_id:'',//一级病种ID 可不填
				bannerList:[],
				titleList:uni.getStorageSync('footTitle'), // 底部导航文字
				imgList:uni.getStorageSync('footimg'), // 底部导航图标
				zanArr:[],
				dataShopList:[],
				timeList:[],
				isHot:false,
				isAutoPlay:false,
				optionObj:{}
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				if(!this.isHot){
					this.checkCate(this.category_id)//调用自主预约列表事件
				}
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onShareAppMessage() {
			var shareObj = {
				path: `/pages/tabbar/cate/cate?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
			};
			return shareObj;
		},
		onLoad(options) {
			
		},
		methods: {
			// 点击筛选按钮图标
			clikScreenIcon(){
				this.isScreen = true;
			},
			// 分类选择事件
			chooseCate(mainIndex,childrenIndex){
				// 清除分类所有选中项
				this.screenList[mainIndex].childrenList.forEach((item,index)=>{
					item.isCheck = false;
				})
				// 将当前选择的类别下的数组置空
				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);
				// 清除选中
				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 = [];
				}
			},
			// 分类筛选确认事件
			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;
			},
			checkSwi(){
				checkBanner({position:'category-hot-banner'}).then(res=>{
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let isVideo = false
								if(item.type!='img') isVideo = true
								let banObj = {
									imgSrc:this.$http + item.src,
									url:item.url,
									isVideo:isVideo,
									poster:this.$http + item.src,
								}
								this.bannerList.push(banObj)
							})
						}
					}
				})
			},
			chooseLike(e){//收藏事件
				// console.log(this.dataList[e].is_collected);
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			comfirmev(e){//确认取消收藏事件
				this.dataList[e].is_collected = 0
				this.$toolAll.tools.showToast('正在取消...','loading')
				// 调用取消收藏事件
				cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})	
			},
			checkBZ(){//病种列表
				this.$requst.post('archives/disease').then(res=>{
					// console.log('病种列表：',res);
					if(res.code==0 && res.data.length!=0){
						this.cateList=[]
						res.data.forEach(item=>{
							let obj = {
								id:item.id,
								title:item.name,
								pid:item.pid,
								sort:item.sort
							}
							this.cateList.push(obj)
						})
						let reObj = {
							id:this.cateList[0].id,
							title:'热门推荐',
							pid:this.cateList[0].pid,
							sort:this.cateList[0].sort
						}
						this.cateList.unshift(reObj)
						this.checkCate(this.category_id)//调用分类列表事件
						setTimeout(()=>{this.isLoading = true},500)
					}
				},error=>{})
			},
			checkCate(category_id){//分类列表事件
				this.dataShopList = [];
				// this.$toolAll.tools.showToast('加载中...')
				this.$requst.post('archives/hot',{category_id:category_id,page:this.page,size:this.size}).then(res=>{
					// console.log('分类列表：',res);
					if(res.code==0){
						if(this.category_id==''){
							if(res.data.category.length!=0){
								this.cateListTwo = []
								res.data.category.forEach(item=>{
									let cateObj = {
										id:item.id,
										model:item.model,
										model_id:item.model_id,
										sort:item.sort,
										title:item.title
									}
									this.cateListTwo.push(cateObj)
								})
								this.cateListTwo.push({title:'热门商品'})
								this.cateListTwo.push({title:'筛选'})
								this.category_id = this.cateListTwo[0].id
							}
						}
						// 获取列表
						if(this.page==1) {
							this.dataList = [];
							uni.pageScrollTo({
								scrollTop:0,
								duration:0
							})
						} 
						if(res.data.list.list.length!=0){
							this.total = res.data.list.total
							res.data.list.list.forEach(item=>{
								let fabImg = '';
								if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
								let tObj = {
									category_id:item.category_id,//栏目ID
									id:item.id,
									is_collected:item.is_collected,//是否已收藏
									collects:item.collects,//收藏量
									views:item.views,//查看量
									main_img:this.$http + item.cover,//封面图
									video:this.$http + item.video,//视频地址
									title:item.title,//标题
									content:item.subtitle,//副标题
									head_img: fabImg || '/static/public/logo.png',//发布者头像
									name:item.published_by || '恒美植发',//发布者昵称
									isVideo:item.video.includes(".mp4")//是否是视频
								}
								this.dataList.push(tObj);
							})
						}
					}
				},error=>{})
			},
			checkData(disease_id){//一级病种列表事件
				this.$requst.post('archives/disease-question',{disease_id:disease_id}).then(res=>{
					// console.log('一级病种列表内容：',res);
					if(res.code==0){
						this.tuList = []
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								let arr = []
								if(item.children.length!=0){
									item.children.forEach(itemt=>{
										let objt = {
											category_id:itemt.category_id,
											content:itemt.title,
											id:itemt.id,
											disease_id:itemt.disease_id,//一级病种ID 1
											disease_second_id:itemt.disease_second_id,//二级病种ID 12
											subtitle:itemt.subtitle//内容副标题
										}
										arr.push(objt)
									})
								}
								let obj = {
									title:item.name,
									src:'',
									list:arr
									// 	{content:'秃顶种植保养周期'},
									// 	{content:'秃顶种植保养手册'},
									// 	{content:'秃顶种植保养项目'},
									// 	{content:'那些人需要保养'},
									// ]
								}
								this.tuList.push(obj)
							})
						}
					}
				},error=>{})
			},
			chooseTwo(index){//二级分类选择
				this.newCurrent = index
				this.isZanw = true;
				this.isHot = false;
				this.page = 1
				this.category_id = this.cateListTwo[index].id
				// console.log('二级分类：',this.cateListTwo[index].title);
				if(this.cateListTwo[index].title=='筛选'){
					uni.navigateTo({
						url:'/pagesB/searchPage/searchPage'
					})
				} else if(this.cateListTwo[index].title=='热门商品'){
					this.isHot = true;
					this.checkSotList()
				} else {
					this.checkCate(this.cateListTwo[index].id)
				}
			},
			checkSotList(){
				this.dataList = [];
				let params = {
					page:1,
					size:2000,
					is_hot:1
				}
				uni.request({
					url:`${uni.getStorageSync('hostapi')}spu/list`,
					data:params,
					method:'post',
					header:{
						'Content-Type': 'application/json; charset=UTF-8',
						'Authorization': 'Bearer '+uni.getStorageSync('token') || ''
					},
					success: (res) => {
						if(res.data.code==0){
							clearInterval(this.timer);
							// if(this.page==1) {
								this.zanArr = [];
								this.dataShopList = [];
								this.timeList = [];
							// }
							this.total = res.data.total;
							if(res.data.data.list.length!=0){
								res.data.data.list.forEach(item=>{
									let tuan = false,ping = false,xian = false,integral = false;
									if(item.activity_type=='group_make') ping = true;
									if(item.activity_type=='group_buy') tuan = true;
									if(item.activity_type=='limit_time') xian = true;
									let group_cover = [];
									if(item.activity_group_cover.length!=0) {
										item.activity_group_cover.forEach(item=>{
											group_cover.push(this.$http + item)
										})
									}
									let obj = {
										id:item.id,
										imgSrc: this.$http + item.cover,
										title: item.name,
										zhePrice:item.price/100,
										yuanPrice:item.original_price/100,
										integral:'',
										isTuan:tuan,//是否是团购
										isPing:ping,//是否是拼团活动
										isXian:xian,//是否是限时活动
										isIntegral:integral,//是否是积分
										grade:'',
										disease_name:item.disease_name,//病种名称
										reponseTime:res.header.Date,//接口响应时间
										activity_end_at:item.activity_end_at,//限时结束时间
										activity_group_cover:group_cover,//参团人的头像
										activity_group_num:item.activity_group_num,//已经参团人数
									}
									this.zanArr.push(obj)
								})
								this.zanArr.forEach((item,index)=>{
									if(item.activity_end_at!='') {
										let obj = {
											id:item.id, 
											reponseTime:item.reponseTime,
											time:item.activity_end_at,
											nIndex:index
										}
										this.timeList.push(obj);
									}
								})
								if(this.timeList!=0){
									this.$toolAll.tools.showToast('加载中...')
									this.timer = setInterval(()=>{//定时器
										if(this.timeList.length!=0){
											this.timeList.forEach((item,index)=>{
												if(item.id==this.zanArr[item.nIndex].id){
													let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
													this.timeList[index].reponseTime = new Date(this.timeList[index].reponseTime).getTime() + 1000;//请求接口的时间递增，即：开始时间
													if(this.timeList[index].reponseTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
														this.zanArr[item.nIndex].activity_end_at = "活动已结束";
													} else {
														// 继续进行倒计时
														this.zanArr[item.nIndex].activity_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,this.timeList[index].reponseTime);
													}
												}
											})
										}
									},1000)
									setTimeout(()=>{
										this.dataShopList = this.zanArr;
									},1000)
								} else {
									this.dataShopList = this.zanArr;
								}
							}
						}
					}
				})
			},
			goPage(id,index){//进入商品详情事件
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=${this.dataShopList[index].isIntegral}`
				})
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>

</style>