hengmei-one/pages/tabbar/cate/cate.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :statusBack="false" :titleVal="'分类'" :statusTitle="true"></status-nav>
		<view class="disje mar-zy20" :style="{paddingTop: (statusHNH+10)+'px'}">
			<template v-if="cateList.length!=0">
				<view class="cate-box" :style="{paddingTop:statusHNH+'px'}" style="overflow: hidden;overflow-y: scroll;">
					<view class="fon26">
						<view class="mar-s20 flexs" :style="{color : ccurrent==indexc ? publicColor:''}" 
						:class="ccurrent==indexc?'bold cateActive':'catemo'" 
						v-for="(itemc,indexc) in cateList" :key="indexc"
						@tap="chooseCate(indexc)">{{itemc.title}}</view>
					</view>
				</view>
				<view :style="{width:cateW+'px'}" class="flexs" style="height: 10px;"></view>
				<view v-show="isLoading" class="width100 pad-x260">
					<!-- 热门推荐 --> 
					<template v-if="ccurrent==0">
						<!-- 自定义轮播 --> 
						<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'154'" :newRadius="'10'" :newBottom="'10'"></swiper-pu>
						<!-- 自定义二级分类 -->
						<view class="mar-x20 mar-s40">
							<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
						</view>
						<!-- 列表 -->
						<view v-if="dataList.length!=0">
							<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :nFon="'14'" :radiu="true" :nmarz="'6'" :nWidth="'90'" :nHeight="'90'" :list="dataList"></list-pu>
						</view>
						<view v-else style="padding-top: 150rpx;">
							<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="dataList"></list-pu>
						</view>
					</template>
					<!-- 秃顶种植 -->
					<template v-if="ccurrent!=0">
						<view v-if="tuList.length!=0">
							<cate-tu :isDetail="true" :list="tuList"></cate-tu>
						</view>
						<view v-else class="disjcac fc" style="margin-top: 60%;">
							<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
							<view class="fon24 col3">暂无内容</view>
						</view>
					</template>
				</view>
			</template>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
		<!-- 返回顶部 -->
		<!-- <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 {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			swiperPu,
			cateTu
		},
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				publicColor:uni.getStorageSync('publicColor'),
				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:[],
				imgList:[],
				isAutoPlay:false
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.checkCate(this.category_id)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onLoad() {
			this.checkBZ()//调用病种列表事件
			let maiOjb = {
				e:7,//进入分类
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb)
			this.checkSwi()
		},
		onShow() {
			this.titleList = uni.getStorageSync('footTitle')
			this.imgList = uni.getStorageSync('footimg')
			this.$toolAll.tools.isLogin()
			// console.log(this.category_id);
			if(this.category_id!='') this.checkCate(this.category_id)//调用左侧列表点击事件
			this.isAutoPlay = true;
		},
		methods: {
			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)//调用分类列表事件
						if(this.cateList.length!=0){
							setTimeout(()=>{
								const query = wx.createSelectorQuery()
								query.select('.cate-box').boundingClientRect((rect) => {
									// console.log('分类宽度：',rect.width);
									this.cateW = rect.width
								}).exec()
							},300)
						}
						setTimeout(()=>{this.isLoading = true},500)
					}
				},error=>{})
			},
			checkCate(category_id){//分类列表事件
				// 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.category_id = this.cateListTwo[0].id
							}
						}
						// 获取列表
						if(this.page==1) this.dataList = []
						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")//是否是视频
								}
								if(this.newCurrent==0 && item.category_id==32) this.dataList.push(tObj)
								if(this.newCurrent==1 && item.category_id==33) this.dataList.push(tObj)
								if(this.newCurrent==2 && item.category_id==34) this.dataList.push(tObj)
								if(this.newCurrent==3 && item.category_id==38) 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=>{})
			},
			chooseCate(index){//分类选中事件
				this.ccurrent = index
				this.checkData(this.cateList[index].id)
				// console.log('分类选中:',index);
			},
			chooseTwo(index){//二级分类选择
				this.newCurrent = index
				this.isZanw = true
				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 {
					this.checkCate(this.cateListTwo[index].id)
				}
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>

</style>