zkliveAppLiveH5/pages/course/index.vue

<template>
		<view class="container">
		<!-- 加载状态 -->
		<view v-if="pageLoading" class="page-loading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
		</view>
	    <!-- <image class="home_top_bg" src="@/static/newYear/home_top_bg.png" mode="widthFix" :lazy-load="false"></image> -->
		<image class="home_top_bg" src="@/static/image/hall/home_top_bg.png" mode="widthFix" :lazy-load="false"></image>
		<view class="tabbox">
			<u-tabs 
			ref="uTabs"
			:list="tabList" 
			:current="activeTab" 
			:scrollable="true" 
			:lineColor="`url(${lineBg}) 40rpx 12rpx`"
			lineWidth="40rpx"
			lineHeight="12rpx"
			:inactiveStyle="{
				fontWeight: 600,
				fontSize: '32rpx',
				color: '#222222',
				lineHeight: '88rpx',
			}"
			:activeStyle="{
				fontWeight: 600,
				fontSize: '40rpx',
				color: '#FF5C03',
				lineHeight: '88rpx',
			}"
			itemStyle="margin: 10rpx 0"
			@change="handleTab"></u-tabs>
			</view>
		<!-- 新手指引  -->
		<view class="guidebox" v-if="showGuide" @touchmove.stop.prevent @click="closeGuide('mask')">
			<view class="guide" :style="guideStyle" @click.stop.prevent>
				<!-- 学习中心新手指引 -->
				<!-- <view class="guide-step-tips" :style="tipPosition" v-if="activeTab == 1">
					<image class="Frame2612" src="@/static/images/guide/Frame2612.png" mode="aspectFill"></image>
					你可以在这里查询在学课程、学习笔记、收藏课程，对你学习进度进行跟踪。
				</view> -->
				<!-- 名医讲堂新手指引 -->
				<view class="guide3-step-tips2" :style="tipPosition" v-if="activeTab == 0">
					<view class="guide3-toptip">
						<view class="guide3-toptip-head">
							<image class="Frame2611" src="@/static/images/guide/Frame2611.png" mode="aspectFill"></image>
							<text>知名中医大师、达人亲自授课</text>
							<image class="guide3-toptip-headbg" src="@/static/images/guide/Frame2614.png" mode="widthFix"></image>
						</view>
						<view>分享他们在各自专业领域的丰富经验和独到见解。 </view>
					</view>
					<view :style="tipsCenter"></view>
					<view class="guide3-btn" @click="closeGuide()">我知道啦</view>
				</view>
			</view>
			
			<!-- 名医讲堂新手指引(图片模式) -->
			<!-- <view class="guide" v-if="activeTab ==0" @click.stop.prevent>
				<view class="guide3-step-tips">
					<view class="guide3-step-tipsbox">
						<view class="guide3-toptip">
							<view class="guide3-toptip-head">
								<image class="Frame2611" src="@/static/images/guide/Frame2611.png" mode="aspectFill"></image>
								<text>知名中医大师、达人亲自授课</text>
								<image class="guide3-toptip-headbg" src="@/static/images/guide/Frame2614.png" mode="widthFix"></image>
							</view>
							<view>分享他们在各自专业领域的丰富经验和独到见解。 </view>
						</view>
						<image class="Frame2291" src="@/static/images/guide/Frame2291.png" mode="widthFix"></image>
					</view>
					<view class="guide3-btn" @click="closeGuide()">我知道啦</view>
				</view>
			</view> -->
			
		</view>
		
	    <!-- 内容 -->
		<swiper :current="activeTab" @change="onSwiperChange" :style="'height:' + (clientHeight || '100vh') + 'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" :scroll-top="scrollTopHall" @scroll="scroll($event,'scrollTopHall')" :refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="handleRefresher">
					<doctorHall ref="doctorHall" :swiperAutoplay="swiperAutoplay" @loadFamousCourse="loadFamousCourse(0)"/>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" :scroll-top="scrollTopStudy" @scroll="scroll($event,'scrollTopStudy')" :refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="handleRefresher">
					<studyCenter ref="studyCenter"/>
				</scroll-view>
			</swiper-item>
		<!-- 	<swiper-item>
				<scroll-view 
				scroll-y="true" 
				:style="'height:' + clientHeight + 'px;'" 
				:scroll-top="scrollTopGoods" 
				@scrolltolower="scrolltolower" 
				@scroll="scroll($event,'scrollTopGoods')"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="handleRefresher">
					<integralGoods ref="integralGoods"></integralGoods>
					<view class="back-top" v-show="scrollTopGoods>clientHeight" @click="goTop">
						<image src="https://www.mescroll.com/img/mescroll-totop.png" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</swiper-item> -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'">
					<homeIndex ref="homeIndex" source="course" />
				</scroll-view>
			</swiper-item>
			<swiper-item v-if="!isXiaomi">
				<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'">
					<watchIndex ref="watchIndex" source="course" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 新用户72h内弹免费领礼品弹窗 -->
		<giftPopup ref="giftPopup"></giftPopup>
		<activityPop class="activityPop" ref="activityPop" />
		<!-- 签到弹窗 -->
		<signPop ref="signPop" :userSign="userSign" />
	</view>
</template>

<script>
	import { getUserSign} from '@/api/integral.js';
	import watchIndex from "@/pages/index/components/watchIndex.vue";
	import homeIndex from "@/pages/index/components/homeIndex.vue";
	import {getUserActiveWindow} from "@/api/activity.js"
	// import integralGoods from './components/integralGoods.vue';
    import doctorHall from './components/doctorHall.vue';
    import studyCenter from './components/studyCenter.vue';
	import giftPopup from './components/giftPopup.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import { getDictByKey } from '@/api/common'
	import { getCourseCate,getCourseList } from '@/api/course'
	import { getAdvList} from '@/api/adv.js'
	import { isCreateAd } from '@/api/user.js'
	import { Igexin } from '@/pages_im/util/common.js';
	import activityPop from "@/components/signPop/activityPop.vue"
	 const lineBg = "/static/image/hall/hall_on_icon.png";
                       
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
		    mescrollBody,
			doctorHall,
			studyCenter,
			giftPopup,
			// integralGoods,
			activityPop,
			watchIndex,
			homeIndex
		 },
		data() {
			return {
				lineBg,
				tabsLineShow: false,
				headerHeight:44,
				statusBarBG:"none",
				headerIndex:98,
				isXiaomi:false,
				pageLoading: true, // 页面加载状态
				downOption: {   //下拉刷新
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 空空如也 ~' // 提示
				 		// btnText: '去看看'
				 	}
				},
				//imageList:["../../static/image/home/banner.png"],
				imageList:[],
				advs:[],
				mtabs:[],
				tabIndex: 0, // 当前tab的下标
				fixedTop: false, 
				top:0,
				cateId:0,
				isBest:false,
				dataList:[],
				recommendList:[],
				swHeightArr:{},
				swHeight: "400px",
				keyWord:"",
				dataItem:{},
			    swiperAutoplay:true,
				famousItemHei:0,
				scrollTopHall: 0,
				scrollTopStudy: 0,
				scrollTopGoods: 0,
				old: {
					scrollTopStudy: 0,
					scrollTopHall: 0,
					scrollTopGoods: 0
				},
				activeTab: 0,
				indicatorLineLeft: 0,
				indicatorLineWidth: 0,
				tabList: [
					{
					  id: "tab01",
					  name: '名家讲堂'
					}, {
					  id: "tab02",
					  name: '学习中心'
					},{
					  id: "tab03",
					  name: '医疗服务'
					}
				],
				clientHeight:0,
				scrollViewId:'scrollView0',
				showGuide: false, // 是否显示引导
				guideStyle: "",
				tipPosition: "",
				tipsCenter: "",
				isShowGiftPopup: false,
				triggered: false,
				statusBarHeight: 0,
				haveFamousCourse: false,
				userSign:{},
				initializedTabs: new Set(), // 已初始化的tab索引
			}
		},
		
		onPageScroll(e) {
			this.top=e.scrollTop;
			this.scrollTopGoods = e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG:function() {
				var top=this.top/88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		onReady() {
			// 同步获取系统信息，避免异步延迟
			try {
				const systemInfo = uni.getSystemInfoSync();
				this.clientHeight = systemInfo.windowHeight - uni.upx2px(120) - systemInfo.statusBarHeight;
			} catch (e) {
				// 降级到异步获取
				uni.getSystemInfo({
					success: (res) => {
						this.clientHeight = res.windowHeight - uni.upx2px(120) - res.statusBarHeight;
					}
				});
			}
			
			this.tabListSize = {};
			const resizeTabs = () => {
				this.$refs.uTabs && this.$refs.uTabs.resize();
			};
			
			// 合并多个 setTimeout，减少延迟
			this.$nextTick(() => {
				resizeTabs();
				// 使用 requestAnimationFrame 优化渲染时机
				const finishInit = () => {
					resizeTabs();
					this.tabsLineShow = true;
					// 标记页面已加载（在关键渲染完成后）
					this.pageLoading = false;
					// 延迟初始化非当前tab的组件
					setTimeout(() => {
						if (this.$refs.homeIndex) {
							this.$refs.homeIndex.initShow();
						}
						if (this.$refs.watchIndex) {
							this.$refs.watchIndex.initShow();
						}
					}, 100);
				};
				
				if (typeof requestAnimationFrame !== 'undefined') {
					requestAnimationFrame(finishInit);
				} else {
					setTimeout(finishInit, 50);
				}
			});
		},
		onShow(){
			// #ifdef APP-PLUS
			if (this.$isAgreePrivacy()) {
				if (plus.runtime.channel == 'baidu') {
					let bdCmdType = uni.getStorageSync('bdCmdType');
					if (this.$isEmpty(bdCmdType)) {
						this.$registerIdCode('activate', 0, 0);
					}
				}
			}
			// #endif
			if(!this.$isLogin()){
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return;
			}
			
			// 非阻塞操作，延迟执行
			this.$updateMsgDot()
			this.swiperAutoplay=true;
			
			// 延迟执行非关键操作，避免阻塞渲染
			this.$nextTick(() => {
				this.$refs.uTabs && this.$refs.uTabs.resize();
				
				// 只初始化当前可见的tab，其他tab延迟加载
				this.initCurrentTab();
				
				// 延迟执行非关键操作
				setTimeout(() => {
					this.getCreateAd();
				}, 300);
			});
		},
		onHide() {
		   this.swiperAutoplay=false;
		},
		onLoad(options){
			if(options.activeTab){
				this.activeTab = options.activeTab
			}
			// 同步获取系统信息，避免延迟
			try {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
				// 提前设置 clientHeight，避免布局闪烁
				this.clientHeight = systemInfo.windowHeight - uni.upx2px(120) - systemInfo.statusBarHeight;
				this.isXiaomi=plus.runtime.channel == 'xiaomi';
				//this.isXiaomi=true;
				if(!this.isXiaomi){
					this.tabList.push({
					   id: "tab04",
					   name: '健康管理',
					});
				}
			} catch (e) {
				this.statusBarHeight = 0;
			}
			this.guideIndex=uni.getStorageSync("doctorHallGuide");
			// 延迟执行非关键操作，优先渲染页面
			if(this.$isLogin()){
				// 延迟获取签到信息，避免阻塞首屏渲染
				setTimeout(() => {
					this.getUserSign();
				}, 200);
			}else{
				let signStr="[{\"signNum\":10,\"sort\":1,\"day\":\"第1天\"},{\"signNum\":20,\"sort\":2,\"day\":\"第2天\"},{\"signNum\":30,\"sort\":3,\"day\":\"第3天\"},{\"signNum\":40,\"sort\":4,\"day\":\"第4天\"},{\"signNum\":50,\"sort\":5,\"day\":\"第5天\"},{\"signNum\":50,\"sort\":6,\"day\":\"第6天\"},{\"signNum\":50,\"sort\":7,\"day\":\"第7天\"}]";
				this.userSign={"signNum":0,"isDaySign":0,"integral":0,"sign":JSON.parse(signStr)};
				// 延迟显示弹窗，避免阻塞渲染
				this.$nextTick(()=>{
					if(this.source!='course' && this.$refs.signPop){
						setTimeout(() => {
							this.$refs.signPop.open();
						}, 500);
					}
				});
			}
		    // #ifdef APP-PLUS
				   if(this.$isAgreePrivacy()) {
					   if(plus.runtime.channel=="baidu"){  //获取渠道标识
					       let bdCmdType=uni.getStorageSync("bdCmdType");
						   console.log("qxj bdCmdType:"+bdCmdType);
					       if(this.$isEmpty(bdCmdType)){
					       	    this.$registerIdCode("activate",0,0);
					       }
					   }
				   }
		    // #endif
			uni.$on('loginOut', function() {
				   let IMUserID = uni.getStorageSync('IMUserID');
				   //Igexin.unbindAlias(IMUserID);
				   uni.removeStorage({key: "IMUserID"});
				   uni.setStorageSync("AppToken",null);
					
					uni.removeStorage({ key: 'IMToken' });
					uni.removeStorageSync("onLaunch",null)
					uni.removeStorageSync("imUnread",null);
					uni.removeStorageSync("companyUser");
					uni.removeStorageSync("CompanyUserToken");
					
					uni.$emit("refreshUserInfo");
					let pages = getCurrentPages();
					
					let url = pages[ pages.length - 1]; //当前页页面实例
					//如果登录界面已打开,自动关闭
					if(url!=undefined&&url.route=="pages/auth/loginIndex"){
						return;
					}
					uni.navigateTo({
						url: '/pages/auth/loginIndex'
					});
			});
		},
		mounted() {
			try {
				const system = uni.getSystemInfoSync();
				let itemWid=(system.windowWidth-40-32)*0.5*0.95;
				let tempHei=itemWid*0.5;
				tempHei=uni.upx2px(tempHei)+30;
				this.famousItemHei=tempHei;
			} catch (e) {
				
			}
			// 延迟执行活动弹窗检查，避免阻塞首屏
			setTimeout(() => {
				this.activityFun();
			}, 500);
		},
		methods: {
			getUserSign(){
				getUserSign().then(res => {
						if(res.code==200){
							this.userSign={"signNum":res.signNum,"isDaySign":res.isDaySign,"integral":res.integral,"sign":JSON.parse(res.sign)};
						    // 延迟显示弹窗，避免阻塞渲染
						    this.$nextTick(()=>{
								if(!res.isDaySign && this.$refs.signPop){
									setTimeout(() => {
										this.$refs.signPop.open();
									}, 500);
								}
						    });
						}
					},
					rej => {}
				);
			},
			activityFun(){
				// 防抖处理，避免重复请求
				if (this._activityTimer) {
					clearTimeout(this._activityTimer);
				}
				this._activityTimer = setTimeout(() => {
					getUserActiveWindow().then(res=>{
						if(res.code == 200){
							if (res.isOpen && this.$refs.activityPop) {
								// 延迟显示弹窗，避免阻塞渲染
								setTimeout(() => {
									this.$refs.activityPop.open();
								}, 800);
							}
						}else{
							// 静默失败，不显示错误提示
							console.warn('获取活动窗口失败:', res.msg);
						}
					}).catch(err => {
						console.warn('获取活动窗口异常:', err);
					});
				}, 300);
			},
			goTop() {
				setTimeout(()=>{
					this.old.scrollTopGoods = 0 
					this.scrollTopGoods = 0
				})
			},
			scroll(e,type) {
				this.old[type] = e.detail.scrollTop
				this.scrollTopGoods = this.old[type]
			},
			handleTab(e) {
				this.activeTab = e.index
				// if(this.haveFamousCourse) {
				// 	// 防止在没有名医讲堂数据的时候有指引弹窗
				// 	this.changeGuide(this.activeTab);
				// 	console.log("=handleTab=")
				// }
				// this.$nextTick(()=>{
				// 	this.selectorQuery()
				// })
			},
			loadFamousCourse(val){
				this.haveFamousCourse = true
				// this.changeGuide(val);
			},
			updateIndicator(left, width) {
			   this.indicatorLineLeft = left;
			   this.indicatorLineWidth = width;
			},
			selectorQuery() {
				uni.createSelectorQuery().in(this).selectAll('.tabbar-item').boundingClientRect((rects) => {
				  rects.forEach((rect) => {
					this.tabListSize[rect.id] = rect;
				  })
				  this.updateIndicator(this.tabListSize[this.activeTab].left, this.tabListSize[this.activeTab].width);
				}).exec();
			},
			// swiper划动
			onSwiperChange(e){
				this.changeIdx(e.detail.current);
			},
			// 更新当前页
			changeIdx(index){
				if(this.activeTab === index) return;
				this.activeTab = index;
				this.scrollViewId = 'scrollView'+this.activeTab;
				
				// 初始化当前tab（懒加载）
				this.initCurrentTab();
			},
			// 初始化当前tab（懒加载优化）
			initCurrentTab() {
				if (this.initializedTabs.has(this.activeTab)) {
					return; // 已初始化，跳过
				}
				
				this.$nextTick(() => {
					if(this.activeTab == 0) {
						// tab 0 由 doctorHall 组件自己处理
						this.initializedTabs.add(0);
					} else if(this.activeTab == 1) {
						if(this.$refs['studyCenter']) {
							this.$refs['studyCenter'].initShow();
							this.initializedTabs.add(1);
						}
					} else if(this.activeTab == 2) {
						if(this.$refs.homeIndex) {
							this.$refs.homeIndex.initShow();
							this.initializedTabs.add(2);
						}
					} else if(this.activeTab == 3) {
						if(this.$refs.watchIndex) {
							this.$refs.watchIndex.initShow();
							this.initializedTabs.add(3);
						}
					}
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(true);
				var that=this;
				this.requestData();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				this.mescroll.endByPage(1, 1); 
			},
			requestData(){
				//this.getCourseCate();
			},
			getCourseCate:function(){
				let that=this;
				getCourseCate().then(res => {
						if(res.code==200){
							this.mtabs=res.data;  
							let findIdx=this.mtabs.findIndex(item=>item.dictLabel=='精选');
							// console.log("qxj findIdx:"+findIdx);
							if(findIdx==-1){
								let dictItem={"dictValue":0,"dictLabel": "精选"};
								this.mtabs.unshift(dictItem);
							}
							this.isBest=true;
							if(this.mtabs.length>0){
								 this.cateId=this.mtabs[0].dictValue;
								 for (let i = 0; i < this.mtabs.length; i++) {
									 if(i<=4){
										 this.tabChange(i); 
									 }
								 }
								 //this.tabIndex=0;
								 //this.dataItem=this.dataList[this.tabIndex.toString()]
								 this.tabChange(0);
							}
						}
					},
					rej => {}
				);
			},
			getFamousCourseList(index){
				let that=this;
				let params={};
				if(this.isBest){
					params={"isBest":1};
				}else{
					params={"cateId":this.cateId};
				}
				if(this.dataList.hasOwnProperty(index+"")){
					 this.updateSwiperHeight(index);
				     return;
				}
				getCourseList(params,1,6).then(res => {
						if(res.code==200){
							this.dataList[index+""]=res.data.list;  
						    //this.$nextTick(() => {
						         this.updateSwiperHeight(index);
						    //}); 
						}
					},
					rej => {}
				);
			},
			getRecommendList:function(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			swiperChange(e){
				// console.log("qxj swiperChange");
				this.tabIndex = e.detail.current;
				this.tabChange(this.tabIndex);
			},
			tabChange(index){
				console.log("qxj tabChange index:",index);
				this.tabIndex=index;
				const item=this.mtabs[index];
				if(item){
					if(item.dictLabel=='精选'){
						this.isBest=true;
					}else{
						this.isBest=false;
					}
					this.cateId=item.dictValue;
					this.getFamousCourseList(index);
				}
			},
			onTransition(){
			},
			animationfinish(){
				this.updateSwiperHeight();
			},
			onSwiperResize() {
				 //console.log("qxj onSwiperResize");
		    },
			updateSwiperHeight() {
				 let dataArr=this.dataList[this.tabIndex.toString()];
				 if(dataArr==undefined ||  dataArr.length==0){
					 this.swHeight=150;
				 }else{
					 uni.createSelectorQuery().in(this).select('#swiper-content').boundingClientRect(rect => {
						  //console.log("qxj swHeight:"+this.swHeight);
						  if(rect!=null){
							  this.swHeight = rect.height+20;
						  }
						  if(this.swHeight<=100){
							     //所以(total + pagesize -1) / pagesize就得到总页数
							     // console.log("qxj famousItemHei:"+this.famousItemHei);
							     this.swHeight=(dataArr.length+1)/2*this.famousItemHei;
							     return;
						  }
					 }).exec();
				 }
			 },
			
			getAdvList() {
				//联网加载数据
				var that = this;
				var data = { advType:12,status:1}
				getAdvList(data).then(res => {
					if(res.code==200){
						that.imageList=[];
						that.advs=[];
						res.data.forEach(function(element) {
							if(element.imageUrl!=null&&element.imageUrl!=""){
								that.advs.push(element);
								that.imageList.push(element.imageUrl);
							}
						});
						
					}else{
						uni.showToast({icon:'none',title: "请求失败"});
					}
				});
			},
			goToMsg(){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}else{
					let registrationID=uni.getStorageSync("registrationID");
					let token = uni.getStorageSync('AppToken');
				}
			},
			// 页面跳转
			navTo(url) {
				console.log("qxj url:"+url);
				uni.navigateTo({
					url: url
				});
			},
			loginNavTo(url){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				this.$navTo(url);
			},
			changeImg(){
				
			},
			handleAdvClick(index){
				var ad=this.advs[index];
				if(ad.showType==1){
					uni.setStorageSync('url',ad.appAdvUrl);
					uni.navigateTo({
						url:"h5"
					});
				}
				else if(ad.showType==2){
					// console.log(ad.appAdvUrl);
					uni.navigateTo({
						url:ad.appAdvUrl
					});
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({url:"content"});
				}
			},
			changeGuide(val){
				if(this.activeTab==0||this.activeTab==1){
					let guide = ''
					let ele = ""
					if(this.activeTab == 1) {
						// guide = uni.getStorageSync("studyCenterGuide");
						// ele = "#guide4"
					} 
					else if(this.activeTab == 0){
						guide = uni.getStorageSync("doctorHallGuide");
						ele = "#guide3"
					}
					if ((guide!=undefined && !guide) &&ele) {
						setTimeout(e=>{
							if(this.showGuide||this.activeTab==1) return
							this.showGuide = true;
							this.getGuideInfo(ele,1);
						},val==0?1000:500);
					} else {
						this.showGuide = false;
					}
				}
			},
		    getGuideInfo(el,type) {
		    	const refname = this.activeTab == 1 ? 'studyCenter' : this.activeTab == 0 ? 'doctorHall': ''
				if(!refname) return
		    	const query = uni.createSelectorQuery().in(this.$refs[refname]);
		    	this.$nextTick(function() {
		    		query.select(el).boundingClientRect()
		    		let _this = this;
		    		query.exec(function(res) {
		    			if(!res) return
		    			const {
		    				width,
		    				height,
		    				left,
		    				top,
		    				style = 'border-radius: 12rpx;margin: 0'
		    			} = res[0]
		    			if(el == '#guide3') {
							// 滑动至顶部（减去导航栏高度）
		    				_this.scrollTopHall = top - uni.upx2px(220) - 44 - _this.statusBarHeight
							_this.getGuide3item(res[0],_this.scrollTopHall)
		    			} else {
		    				_this.scrollTopStudy = _this.old.scrollTopStudy
							_this.scrollTopGoods = _this.old.scrollTopGoods
		    				_this.$nextTick(()=> {
		    					_this.scrollTopStudy = 0
								_this.scrollTopGoods = 0
		    				});
		    				// 减去我的评价宽度
		    				const relwidth = width 
		    				let newstyle = "width:" + relwidth + "px;";
		    				newstyle += "height:" + height + "px;";
		    				newstyle += "left:" + uni.upx2px(24) + "px;";
		    				newstyle += "top:" + top + "px;";
		    				newstyle += style;
		    				_this.guideStyle = newstyle
		    				let tipsTop = height + uni.upx2px(20);
		    				_this.tipPosition = "top:" + tipsTop + 'px;left:' + uni.upx2px(88) + "px;";
		    			}
		    		})
		    	});
		    },
		    getGuide3item(res,scrollTopHall) {
		    	const {
		    		width,
		    		height,
		    		left,
		    		top,
		    		style = 'border-radius: 12rpx;margin: 0'
		    	} = res
				const refname = this.activeTab == 1 ? 'studyCenter' : this.activeTab == 0 ? 'doctorHall': ''
				if(!refname) return
		    	const query = uni.createSelectorQuery().in(this.$refs[refname]);
		    	let _this = this;
				
		    	query.select(".guide3item").boundingClientRect((data) => {
		    		if(!data) return
					if(data.height<80) data.height = uni.upx2px(538)
		    		const relwidth = width + uni.upx2px(24)
		    		const relheight = height + data.height + uni.upx2px(30)
					// console.log("qxj getGuide3item top:"+top+" scrollTopHall:"+ _this.scrollTopHall);
					// const reltop = top;
		    		const reltop = top - _this.scrollTopHall
		    		let newstyle = "width:" + relwidth + "px;";
		    		newstyle += "height:" + relheight + "px;";
		    		newstyle += "left:" + uni.upx2px(14) + "px;";
		    		newstyle += "top:" + reltop + "px;";
		    		newstyle += style;
					// console.log("qxj guide3Style:"+JSON.stringify(newstyle));
		    		_this.guideStyle = newstyle
		    		const tipsCenter = relheight + uni.upx2px(50)
		    		_this.tipsCenter = "height:" + tipsCenter +"px";
		    		let tipsTop = - uni.upx2px(180);
		    		_this.tipPosition = "top:" + tipsTop + 'px;left:' + uni.upx2px(66) + "px;";
		    	}).exec();
		    },
		    closeGuide(type) {
		    	if(type == 'mask' && this.activeTab==0) {
		    		return
		    	}
		    	this.showGuide = false;
		    	if(this.activeTab == 1) {
		    		uni.setStorageSync("studyCenterGuide", true);
					// setTimeout(e=>{
					// 	uni.switchTab({url: '/pages/course/video/living-app' });
					// },500);
		    	}else if(this.activeTab == 0) {
		    		uni.setStorageSync("doctorHallGuide", true);
					// this.handleTab(1);
					// setTimeout(e=>{
					// 	uni.switchTab({
					// 		url: '/pages/course/video/living-app',
					// 		complete: () => {
					// 			this.getCreateAd()
					// 		}
					// 	});
					// },500);
		    	}
		    	this.scrollTopHall = this.old.scrollTopHall
		    	this.scrollTopStudy = this.old.scrollTopStudy
				this.scrollTopGoods = this.old.scrollTopGoods
		    	this.$nextTick(()=> {
		    		this.scrollTopHall = 0
		    		this.scrollTopStudy = 0
					this.scrollTopGoods = 0
		    	});
		    },
			// 礼品弹窗
			getCreateAd() {
				// #ifdef APP-PLUS
				if(this.$isAgreePrivacy()) {
					if(plus.runtime.channel=="yyb" || plus.runtime.channel=="yybadv" || plus.runtime.channel=="yybadv1"){
					    let guide = uni.getStorageSync("doctorHallGuide");
					    let ele = "#guide3"
					    if (guide && ele) {
					    	// 延迟执行，避免阻塞渲染
					    	setTimeout(() => {
					    		isCreateAd().then(res=>{
						    		if(res.code == 200 && res.isCreate) {
						    			this.$nextTick(()=>{
						    				if (this.$refs.giftPopup) {
						    					this.$refs.giftPopup.openPop();
						    				}
						    			})
						    		} else {
						    			this.$nextTick(()=>{
						    				if (this.$refs.giftPopup) {
						    					this.$refs.giftPopup.closePop();
						    				}
						    			})
						    		}
						    	}).catch(err => {
						    		console.warn('获取广告状态失败:', err);
						    	});
					    	}, 500);
					    }
					}
				}
				// #endif
			},
			// scrolltolower(){
			// 	this.$refs.integralGoods&&this.$refs.integralGoods.scrolltolower()
			// },
			handleRefresher() {
				this.triggered = true;
				this.$nextTick(()=>{
					if (this.activeTab == 0) {
						this.$refs.doctorHall.initFun()
					} else if (this.activeTab == 1) {
						this.$refs['studyCenter'].initShow()
					}
				})
				setTimeout(() => {
					this.triggered = false;
				}, 500);
			},
		}
	}
</script>

<style scoped lang="scss">
	.back-top {
		border-radius: 50%;
		overflow: hidden;
		background-color: transparent;
		width: 40px;
		height: 40px;
		position: fixed;
		right: 24rpx;
		bottom: 100rpx;
		image {
			width: 40px;
			height: 40px;
		}
	}
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	
	.guidebox {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		.guide {
			position: absolute;
			z-index: 10001;
			box-shadow: rgba(33, 33, 33,0.8) 0px 0px 0px 0px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px;
		}
		.guide-step-tips {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10001;
			padding: 18rpx 18rpx 18rpx 90rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			background: linear-gradient(90deg, #FCAC34, #F9622F);
		}
		.Frame2612 {
			height: 158rpx;
			width: 158rpx;
			position: absolute;
			left: -66rpx;
			top: -102rpx;
		}
		.guide3-step-tips2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
		}
		.guide3-step-tips {
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			position: absolute;
		}
		.guide3-step-tipsbox {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
		.guide3-btn{
			width: 272rpx;
			height: 84rpx;
			margin: 0 auto;
			background: #FF5C03;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
		}
		.guide3-toptip {
			width: 640rpx;
			height: 160rpx;
			padding: 26rpx;
			box-sizing: border-box;
			position: relative;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 30rpx;
		}
		.guide3-toptip-head {
			// position: relative;
			margin-bottom: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}
		.guide3-toptip-headbg {
			width: 640rpx;
			height: 160rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		.Frame2611 {
			width: 188rpx;
			height: 184rpx;
			position: absolute;
			top: -90rpx;
			right: 0;
		}
		.Frame2291 {
			width: 702rpx;
			// height: 684rpx;
			margin: 24rpx 0 40rpx 0;
		}
	}
	
	.container {
		font-family: PingFang SC, PingFang SC;
		padding-top: var(--status-bar-height);
		position: relative;
		z-index: 2;
	}
	.home_top_bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.tabbox {
		position: relative;
		margin-bottom: 22rpx;
		position: relative;
		.tabbar {
			height: 88rpx;
			@include u-flex(row,center,center);
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 88rpx;
			position: relative;
			.tabbar-item {
				margin: 0 24rpx;
			}
			.active {
				font-weight: 600;
				font-size: 40rpx;
				color: #FF5C03;
				position: relative;
			}
		}
		.tabbar-tabline-image {
			width: 36rpx;
			height: 12rpx;
		}
		.tabbar-tabline {
		  position: absolute;
		  bottom: 0;
		  width: 0;
		  height: 12rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		}
		.tabbar-tabline-animation {
		  transition-duration: 0.2s;
		  transition-property: left;
		}
	}
  
	.activityPop{
		position: relative;
		z-index: 1002;
	}
	
	.page-loading {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		.loading-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #FF5C03;
			border-radius: 50%;
			animation: spin 1s linear infinite;
		}
		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>