hengmei-two/pages/tabbar/pagehome/pagehome.vue

<template>
	<view>
		<!-- 状态栏 -->
		<view class="status-box statusHNH">
		    <view :style="{height:statusBarHeight+'px',background:publicColor}"></view>
		    <view class="status-nav" :style="{background:publicColor}">
		        <!-- 标题 -->
				<view class="tab-title tcenter" style="color: #FFFFFF;">首页</view>
		    </view>
		</view>
		<!-- <status-nav :titleVal="'首页'" :backgroudColor="publicColor" :tabcolor="'#FFFFFF'" :statusBack="false" :statusTitle="true"></status-nav> -->
		<!-- 输入框 -->
		<view class="input-box posiszy" :style="{top: statusHNH+'px',background:publicColor}" style="height: 50px;display: flex;align-items: center;">
			<view class="disac width100">
				<image class="searchImg flexs" src="/static/public/search.png" mode="aspectFill"></image>
				<!-- 输入框 -->
				<input class="width100 fon28" type="text" v-model="searchVal" placeholder="请输入问题/病种/医生姓名"/>
				<!-- 竖线 -->
				<view class="linev"></view>
				<!-- 搜索 -->
				<view @tap="searchEv" class="searchT flexs" :style="{color:publicColor}">搜索</view>
			</view>
		</view>
		<view class="mar-s10 pad-x180">
			<!-- 自定义轮播 -->
			<view :style="{marginTop: (statusHNH+60)+'px'}">
				<swiper-pu></swiper-pu>
			</view>
			<!-- 宫格 -->
			<view v-if="gonggList.length>1" class="mar-zy30 bacf radius10 pad-s25 mar-s10 disac fw">
				<view class="disac fc gongg-box mar-x25" style="width: 25%;" @tap="chooseGon(indexgg)" v-for="(itemgg,indexgg) in gonggList" :key="indexgg">
					<view class="img-box">
						<image :src="itemgg.src" mode="aspectFill"></image>
					</view>
					<view class="fon24">{{itemgg.title}}</view>
				</view>
			</view>
			<!-- 发问 -->
			<view class="mar-zy30 mar-sx20 disjb">
				<image class="flexs mar-y20 radius30 fawen-img" @tap="tapChoose(0)" :src="gaoone.imgSrc" mode="aspectFill"></image>
				<view class="disjb fc width100">
					<image class="radius30 width100 fawen-itemImg" @tap="tapChoose(1)" :src="gaotwo.imgSrc" mode=""></image>
					<image class="radius30 width100 fawen-itemImg" @tap="tapChoose(2)" :src="gaothree.imgSrc" mode=""></image>
				</view>
			</view>
			<!-- 热门搜索 -->
			<view v-if="isLoading" class="mar-zy30 mar-s50">
				<view class="col2c fon36 bold mar-x36">热门搜索</view>
				<view class="bacf fon24 disac fw radius20 pad-zy20 pad-s20">
					<view @tap="chooseReEv(indexf)" v-for="(itemf,indexf) in fwList" :key="indexf" class="disac radius10 mar-x20 reitem-box">
						<image src="/static/public/hot.png" mode="aspectFill"></image>
						<view>{{itemf.title}}</view>
					</view>
				</view>
			</view>
			<!-- 恒美小课堂 -->
			<view v-if="isLoading" class="mar-zy30 mar-s40">
				<view class="col2c fon36 bold">恒美小课堂</view>
				<!-- 自定义二级分类 -->
				<view class="mar-s50 mar-x30">
					<cate-pu :activeb="publicColor" :newcateList="ktList" :isMinW="true" :newCurrent="newCurrent*1" @choosecateEv="choosecateEv" :newbmo="'#E0E0E0'"></cate-pu>
				</view>
				<!-- 列表 -->
				<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="dataList"></list-pu>
			</view>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab> 
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
	</view>
</template>

<script>
	import swiperPu from '@/components/swiper-pu.vue';
	import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			swiperPu
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
				statusHNH:uni.getStorageSync('statusHNH'),
				searchVal:'',//输入框的值
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				gonggList:[//九宫格列表
					// {src:'/static/public/tuof.png',title:'脱发'},
					// {src:'/static/public/zhif.png',title:'植发'},
					// {src:'/static/public/toub.png',title:'头发百科'},
					// {src:'/static/public/tous.png',title:'头发视频'},
					// {src:'/static/public/zhir.png',title:'植发日记'},
					// {src:'/static/public/zhij.png',title:'植发价格'},
					// {src:'/static/public/zhis.png',title:'植发医生'},
					// {src:'/static/public/gengd.png',title:'更多'},
				],
				fwList:[//热搜关键词
					// {title:'植发需要多少钱'},
					// {title:'疤痕植发'},
					// {title:'眉毛种植'},
					// {title:'胡须种植'},
					// {title:'我为什么会脱发'},
					// {title:'头发如何保养'},
				],
				kcurrent:0,//默认选中第一项
				ktList:[//恒美小课堂
					// {title:'发际线'},
					// {title:'秃顶种植'},
					// {title:'胡须种植'},
					// {title:'眉毛种植'},
					// {title:'头发种植'},
				],
				dataList:[//小课堂数据列表
					// {
					// 	status:false,
					// 	main_img:'/static/public/main_img.png',
					// 	title:'恒美小课堂',
					// 	content:'饺子会吃肉？',
					// 	head_img:'/static/public/like.png',
					// 	name:'吃肉的饺子',
					// 	isCate:0,
					// 	isVideo:false
					// },
				],
				showTop:false,
				newCurrent:0,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				course_id:0,
				isLoading:false,
				isShowT:true,
				titleList:[],//底部导航文字
				imgList:[],//底部导航图标
				gaoone:{},
				gaotwo:{},
				gaothree:{}
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.checkKT()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			let maiOjb = {
				e:6,//进入首页
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb)
			if(uni.getStorageSync('token')!='' && uni.getStorageSync('chu')=='') {
				this.$toolAll.tools.daoTime() 
				uni.setStorageSync('chu',1)
			}
		},
		onLoad() {
			const query = wx.createSelectorQuery()
			query.select('.statusHNH').boundingClientRect((rect) => {
				// console.log('状态栏+标题栏：',rect.height);
				uni.setStorageSync('statusHNH',rect.height)
				this.statusHNH = rect.height
			}).exec()
			this.checkKT()
			this.checkBCate()
			this.checkKey()
			this.$toolAll.tools.buriedPointAll()//查询需要埋点的事件id
		},
		methods: {
			tapChoose(index){//宫格下的，三张图点击事件
				let newUrl = ''
				if(index==0) newUrl = this.gaoone.url
				if(index==1) newUrl = this.gaotwo.url
				if(index==2) newUrl = this.gaothree.url
				uni.navigateTo({
					url:newUrl
				})
			},
			checkKey(){//查询热搜关键词事件
				this.$requst.get('index/hot-keywords').then(res=>{
					// console.log('关键词列表：',res);
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let reObj = {title:item.keyword}
								this.fwList.push(reObj)
							})
						}
					}
				},error=>{})
			},
			checkBCate(){//查询底部事件、八宫格、
				this.$requst.post('index/mini-program-setting').then(res=>{
					// console.log('数据：',res);
					if(res.code==0){
						if(res.data.length!=0){
							if(res.data.recommend.length!=0){//宫格
								res.data.recommend.forEach(item=>{
									let bcObj = {
										src:this.$http + item.icon,
										url:item.link,
										title:item.name
									}
									this.gonggList.push(bcObj)
								})
								this.gonggList.push({src:this.$http + res.data.recommendMore,title:'更多'})
							}
							if(res.data.footBar.length!=0){//底部导航
								res.data.footBar.forEach(item=>{
									let newName = item.name
									let newObj = {
										iconPath:this.$http + item.icon[0],
										selectedIconPath:this.$http + item.icon[1],
									}
									if(item.key=="home"){
										this.imgList[0] = newObj
										this.titleList[0] = newName
									}
									if(item.key=="category"){
										this.imgList[1] = newObj
										this.titleList[1] = newName
									}
									if(item.key=="service"){
										this.imgList[2] = newObj
										this.titleList[2] = newName
									}
									if(item.key=="shop"){
										this.imgList[3] = newObj
										this.titleList[3] = newName
									}
									if(item.key=="my"){
										this.imgList[4] = newObj
										this.titleList[4] = newName
									}
								})
								uni.setStorageSync('footTitle',this.titleList)
								uni.setStorageSync('footimg',this.imgList)
							}
							if(res.data.ad.length!=0){//三张图
								this.gaoone = {
									imgSrc:this.$http + res.data.ad[0].img,
									url:res.data.ad[0].link,
								}
								this.gaotwo = {
									imgSrc:this.$http + res.data.ad[1].img,
									url:res.data.ad[1].link,
								}
								this.gaothree = {
									imgSrc:this.$http + res.data.ad[2].img,
									url:res.data.ad[2].link,
								}
							}
						}
					}
				},error=>{})
			},
			checkKT(){//查询恒美小课堂
				let parmas = {
					course_id:this.course_id,//课堂ID
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/course',parmas).then(res=>{
					// console.log('恒美小课堂列表：',res);
					if(res.code==0){
						// 课堂栏目
						if(res.data.course.length!=0){
							this.ktList = []
							res.data.course.forEach(item=>{
								let lObj = {
									id:item.id,
									title:item.title,
									active:item.active
								}
								this.ktList.push(lObj)
							})
						}
						// 课堂列表
						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 num = item.video.search(".mp4")
								let isVideo = false
								if(num!='-1') isVideo = true
								let ktObj = {
									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:'/static/public/logo.png',//用户头像
									name:'恒美植发',//用户昵称
									isVideo:isVideo//是否是视频
								}
								this.dataList.push(ktObj)
							})
						}
						this.isLoading = true
					}
				},error=>{})
			},
			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})	
			},
			chooseGon(index){//宫格事件
				if(index==(this.gonggList.length-1)){
					uni.navigateTo({
						url:'/pages/tabbar/cate/cate'
					})
				} else {
					uni.navigateTo({url:this.gonggList[index].url})
				}
			},
			choosecateEv(e){//恒美小课堂选择事件
				// console.log('恒美小课堂：',e);
				this.newCurrent = e
				this.isZanw = true
				this.page = 1
				this.course_id = this.ktList[e].id
				this.checkKT()
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
			searchEv(){//搜索事件
				// console.log(this.searchVal);
				uni.navigateTo({
					url:'/pagesB/searchPage/searchPage?keyWorld='+this.searchVal
				})
			},
			chooseReEv(index){
				uni.navigateTo({
					url:'/pagesB/searchPage/searchPage?keyWorld='+this.fwList[index].title
				})
			}
		}
	}
</script>

<style>

</style>