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;">首页<text v-if="!isNet" class="mar-z20">(正在尝试连接网络...)</text></view>
		    </view>
		</view>
		<template v-if="isNet">
			<status-nav :titleVal="'首页'" :backgroudColor="publicColor" :tabcolor="'#FFFFFF'" :statusBack="false" :statusTitle="true" style="opacity: 0;"></status-nav>
			<!-- 输入框 -->
			<view class="input-box posiszy" :style="{top: statusHeight+'px',background:publicColor}" style="height: 60px;display: flex;align-items: center;">
				<view class="disac width100">
					<image class="searchImg flexs" src="/static/public/search.png" mode="aspectFill"></image>
					<!-- 输入框 -->
					<input @confirm="searchEv" class="width100 fon34" type="text" v-model="searchVal" placeholder="请输入问题/病种/医生姓名"/>
					<!-- 竖线 -->
					<view class="linev"></view>
					<!-- 搜索 -->
					<view @tap="searchEv" class="searchT flexs fon34" :style="{color:publicColor}">搜索</view>
				</view>
			</view>
			<view class="pad-x180">
				<!-- 自定义轮播 -->
				<view :style="{marginTop: (statusHeight+60)+'px'}">
					<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay"></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 class="">{{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" @praise="praiseEv" :list="dataList"></list-pu>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="disjcac fc" style="height: 100vh;">
				<view class="fon24 col3">{{wuNet}}<text @tap="refresh" class="mar-z20 pcol">刷新</text></view>
			</view>
		</template>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab> 
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
		<!-- 底部客服 -->
		<!-- <public-customer></public-customer> -->
		<!-- 弹框优惠券 -->
		<view class="home-quan-box" v-if="isQuan">
			<image @tap="recerveEv" :src="quanImg" mode="aspectFill"></image>
			<image @tap="closeEv" src="/static/public/closequan.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import swiperPu from '@/components/swiper-pu.vue';
	import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			swiperPu,
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
				searchVal:'',//输入框的值
				//九宫格列表
				gonggList:[],
				//热搜关键词
				fwList:[],
				kcurrent:0,//默认选中第一项
				//恒美小课堂
				ktList:[],
				//小课堂数据列表
				dataList:[],
				showTop:false,
				newCurrent:0,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				course_id:0,
				isLoading:false,
				isShowT:true,
				gaoone:{},
				gaotwo:{},
				gaothree:{},
				isNet:true,
				wuNet:'当前无网络连接',
				refTime:'',
				reNum:0,
				bannerList:[],//轮播图
				isAutoPlay:false,
				isNewRenderDone:false ,//锁的作用
				isQuan:uni.getStorageSync('isQuan'),
				quanImg:uni.getStorageSync('quanImg'),
				pagePath:'',
				shareData:[]
			}
		},
		computed: {
			// 底部标题
			titleList() {
				return this.$store.state.titleList 
			},
			// 底部图标
			imgList() {
				return this.$store.state.imgList
			},
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		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
			}
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onShareAppMessage(res) {
			// 调用tools.js中的种植埋点事件
			this.$toolAll.tools.plantPoint(6);
			if(`${this.shareData.archives_share_img}` !== ''){
				return {
					title: '', // 默认是小程序的名称(可以写slogan等)
					path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` ,// 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: `${this.$http}${this.shareData.archives_share_img}`//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				}
			}else{
				return {
					title: '', // 默认是小程序的名称(可以写slogan等)
					path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` ,// 默认是当前页面，必须是以‘/’开头的完整路径
				}
			}
		},
		onShow() {
			// 调用网络检测事件
			this.checkNet();
			// 调用tools.js中的种植埋点事件
			this.$toolAll.tools.plantPoint(6);
			this.checkKT();//恒美课堂列表
			this.isAutoPlay = true;
			// 进入首页修改全局判断是否是分享进来的
			getApp().globalData.outside = false;
			
			this.$requst.post('index/base-config').then(res=>{
				this.shareData = res.data;
			},error => {})
		},
		onLoad(options) {
			// 转发进入：获取页面路径
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			this.pagePath = currentPage.$page.fullPath;
			if(options.q!=undefined){
				// 解码一：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")；
				// 解码二：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
				let str = unescape(options.q);
				// console.log(str);
				let len1 = str.indexOf('invite_code=');
				let len2 = str.indexOf('channel=');
				let len3 = str.indexOf('source_code=');
				let newInvite = '';
				let newChanel = '';
				let newsource_code = '';
				if(len1!=-1) newInvite = str.slice((len1+12),(len1+12+32));
				if(len2!=-1) newChanel = str.slice((len2+8),(len2+8+8));
				if(len3!=-1) newsource_code = str.slice((len3+12),(len3+12+32));
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						var params = {
							code:res.code,
							invite_code:newInvite,//用户邀请码
							channel:newChanel,
							source_code:newsource_code
						}
						this.$requst.post('user/login',params,false).then(res => {
							uni.setStorageSync('phone_active',res.data.phone_active);
							uni.setStorageSync('invite_code',res.data.invite_code);
							uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
							uni.setStorageSync('token',res.data.token);
							uni.setStorageSync('openid',res.data.openid)//缓存openid
							this.$requst.post('user/unusual-enter',{
								path:this.pagePath,
								openid:res.data.openid
							}).then(res=>{})
							if(res.data.is_active==0 || res.data.phone_active==0) {
								this.$requst.post('user/first-enter',{openid:res.data.openid,path:this.pagePath}).then(res=>{})
							}
						},error => {})
					},
				});
			} else if(uni.getStorageSync('token')=='' || uni.getStorageSync('phone_active')==0 && uni.getStorageSync('is_active')==0){
				this.loginEv(options);
			}
			this.checkBCate();//查询底部导航
			this.checkKey();//查询热门关键词
			this.checkSwi();//查询轮播图
			// this.checkBanner()//调用轮播图查询事件
			this.$toolAll.tools.buriedPointAll();//查询需要埋点的事件id
			// this.checkQ();
			setTimeout(()=>{
				this.quanImg= uni.getStorageSync('quanImg');
				this.quanId = uni.getStorageSync('quanId');
			},3000)
		},
		methods: {
			loginEv(option){
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						var params = {
							code:res.code,
							invite_code:option.invite_code || '',//用户邀请码
							source_code:option.source_code || '',
							channel:option.channel || ''
						}
						this.$requst.post('user/login',params,false).then(res => {
							uni.setStorageSync('phone_active',res.data.phone_active);
							uni.setStorageSync('invite_code',res.data.invite_code);
							uni.setStorageSync('is_active',res.data.is_active)//是否第一次授权
							uni.setStorageSync('token',res.data.token);
							uni.setStorageSync('openid',res.data.openid)//缓存openid
							if(option.invite_code){
								this.$requst.post('user/unusual-enter',{
									path:this.pagePath,
									openid:res.data.openid
								}).then(res=>{})
							}
							if(res.data.is_active==0 || res.data.phone_active==0) {
								this.$requst.post('user/first-enter',{openid:res.data.openid,path:this.pagePath}).then(res=>{})
							}
						},error => {})
					},
				});
			},
			checkQ(){//查询优惠券
				this.$requst.post('user/home-coupon',{},false).then(res=>{
					if(res.data.has_coupon==1){
						this.isQuan = true;
						this.quanImg = this.$http + res.data.home_coupon.cover;
						this.quanId = res.data.home_coupon.id;
					}
				})
			},
			recerveEv(){//领取优惠券
				this.$requst.post('user/get-coupon',{coupon_id:uni.getStorageSync('quanId')}).then(res=>{
					if(res.code==0){
						this.isQuan = false;
						this.$toolAll.tools.showToast('领取成功');
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pagesA/coupon/coupon'
							})
						},1000)
					}
					if(res.code==302){
						this.$toolAll.tools.showToast(res.msg);
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/login/login'
							})
						},1500)
					}
				})
			},
			closeEv(){
				this.isQuan = false;
				uni.setStorageSync('isQuan',false);
			},
			// 顶部轮播查询事件
			checkSwi(){
				checkBanner({position:'home-banner'}).then(res=>{
					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)
						})
					}
				})
			},
			checkNet(){
				uni.getNetworkType({
					success: (res)=> {
						if(res.networkType=='none'){
							uni.setStorageSync('isNet',false)
							this.isNet = false
							if((this.reNum++)==5){
								clearInterval(this.refTime)
								this.wuNet = '刷新失败'
								this.reNum = 0
							}
						} else {
							uni.setStorageSync('isNet',true)
							this.isNet = true
							clearInterval(this.refTime)
							if(this.wuNet == '正在刷新...') {
								getCurrentPages()[getCurrentPages().length - 1].onLoad()
							}
						}
					}
				});
			},
			refresh(){
				this.wuNet = '正在刷新...'
				this.refTime = setInterval(()=>{
					this.checkNet()
				},1000)
			},
			bangd(){//绑定客服事件
				this.$requst.post('').then(res=>{log('绑定客服：',res);},error=>{})
			},
			tapChoose(index){//宫格下的，三张图点击事件
				if(this.$toolAll.tools.judgeAuth()){
					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=>{
					// 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',{},false).then(res=>{
					// log('数据：',res);
					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.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,
							}
						}
					}
				})
			},
			checkKT(){//查询恒美小课堂
				let parmas = {
					course_id:this.course_id,//课堂ID
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/course',parmas,false).then(res=>{
					// log('恒美小课堂列表：',res);
					// 课堂栏目
					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 fabImg = '';
							if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
							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: fabImg || '/static/public/logo.png',//发布者头像
								name:item.published_by || '恒美植发',//发布者昵称
								isVideo:item.video.includes(".mp4"),//是否是视频
								likes:item.likes,//点赞数量
								is_liked:item.is_liked,//是否已点赞
								tag_text:item.tag_text,
							}
							this.dataList.push(ktObj)
						})
					}
					this.isLoading = true
				})
			},
			praiseEv(e){ // 点赞事件
				// console.log(this.dataList[e].is_collected);
				// if(this.dataList[e].is_liked==0){
					this.dataList[e].is_liked = 1;
					this.dataList[e].likes++;
					// 调用收藏事件
					collectionEV({action:'like',archive_id:this.dataList[e].id})
				// }
			},
			chooseLike(e){//收藏事件
				// console.log(this.dataList[e].is_collected);
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1
					this.dataList[e].collects++;
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			comfirmev(e){//确认取消收藏事件
				this.dataList[e].is_collected = 0
				this.$toolAll.tools.showToast('正在取消...','loading')
				this.dataList[e].collects--;
				// 调用取消收藏事件
				cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})	
			},
			chooseGon(index){//宫格事件
				if(this.$toolAll.tools.judgeAuth()){
					if(index==(this.gonggList.length-1)){
						uni.navigateTo({
							url:'/pages/tabbar/cate/cate?index=0'
						})
					} else {
						let existfx = this.gonggList[index].url.indexOf('/');
						let newUrl = '';
						if(existfx!=0) {
							newUrl = `/${this.gonggList[index].url}`;
						} else {
							newUrl = this.gonggList[index].url;
						}
						uni.navigateTo({url:newUrl})
					}
				}
			},
			choosecateEv(e){//恒美小课堂选择事件
				// 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(){//搜索事件
				// log(this.searchVal);
				if(this.$toolAll.tools.judgeAuth()){
					this.$requst.post('archives/keyword-check',{keyword:this.searchVal}).then(res=>{
						if(res.data.has) {
							uni.navigateTo({
								url:`/${res.data.target}`
							})
						} else {
							uni.navigateTo({
								url:'/pagesB/searchPage/searchPage?keyWorld='+this.searchVal
							})
						}
					})
				}
			},
			chooseReEv(index){
				if(this.$toolAll.tools.judgeAuth()){
					uni.navigateTo({
						url:'/pagesB/searchPage/searchPage?keyWorld='+this.fwList[index].title
					})
				}
			},
			// 前往授权页
			goAuthPage(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>

</style>