heshanApp/pages/course/famousHall.vue

<template>
	<view class="content" >
		<image class="home_top_bg" src="@/static/image/hall/home_top_bg.png" mode="widthFix"></image>
		<view class="navBar">
			<view class="grace-page-header" :style="{'z-index':headerIndex }">
				<!-- 沉浸式状态栏 -->
				<view class="grace-page-status-bar" :style="{height:statusBarHeight+'px', background:statusBarBG}"></view>
				<!-- 头部核心 -->
				<view class="grace-page-header-nav" id="gracePageHeader" :style="{minHeight:headerHeight+'px', height:headerHeight+'px', overflow:'hidden'}">
					<view class="u-nav-back"  @click="goBack">
						<image class="img" src="@/static/image/black_back.png" mode="heightFix"></image>
					</view>
					<view class="grace-header-main">{{navTitle}}</view>
				</view>
			</view>
			<view :style="{width:'100%', height:(headerHeight+statusBarHeight) + 'px'}"></view>
		</view>
		
	   <!-- <mescroll-body :sticky="true" @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption"> -->
	        <view class="cont-box">
	           <view class="top-section">
					   <view class="search-header-nav" id="gracePageHeader">
							<view class="search-header-main" style="height: auto;">
								<image src="@/static/image/home/icon_search.png" mode=""></image>
								<input class="input-text" v-model="keyword" @input="inputEvent" type="text" placeholder="搜索课程内容"/>
							</view>
					   </view>
	            </view>	
				
				 <!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
		         <view>
					<me-tabs :value="tabIndex" :tabs="mtabs" nameKey="dictLabel"  :height="88" @change="tabChange" :tab-width="134"></me-tabs>
				</view>
				
			    <view class="scroll">
					 <swiper :style="{'height': swHeight}"   :current="tabIndex" @change="swiperChange" v-if="mtabs.length>0">
						<swiper-item v-for="(tab,i) in mtabs" :key="i">
							<famous-hall-item  ref="mescrollItem" :i="i"  :disable-scroll="disableScroll" :index="tabIndex"  :tipsArr="tipsArr"></famous-hall-item>
						</swiper-item>
					 </swiper>
			    </view> 
			
				<!-- <view class="scroll">
				   <famous-hall-page ref="mescrollItem0" :mtabs="tabs" :tabTop="tabTop" :tipsArr="tipsArr"></famous-hall-page>
		         </view>  -->
		
		</view>  	
		<!-- </mescroll-body> -->
	</view>
	
</template>

<script>
	
    // import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
    // import MescrollMoreMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import famousHallItem from "./famousHallPageItem.vue" 
	import famousHallPage from "./famousHallPage.vue" 
	import { getCourseCate,getCourseList } from '@/api/course'
	export default {
		mixins: [ MescrollMixin ], //mescroll-body写在子组件时
		components: {
			famousHallItem,
			famousHallPage
		 },
		 watch: {
		 	tabIndex(i) {
		 		// 当列表禁止滚动时,需把列表滚动条置顶 (解决问题: "全部"tab翻到第二页,切换到其他tab,滚动到顶部,再切回"全部"tab,此时的列表数据应该重头开始)
		 		if(this.disableScroll){
		 			this.disableScroll = false // 当disableScroll=true时,scroll-view的scrollTo会失效,需先开启,再置顶
		 			this.$nextTick(()=>{
		 				let mescroll = this.getMescroll(i)
		 				mescroll && mescroll.scrollTo(0,0)
		 				setTimeout(()=>{ // 经测试android真机需延时300ms才能恢复禁止滚动,否则scrollTo有可能无效
		 					this.disableScroll = true
		 				},300)
		 			});
		 		}
		 	}
		 },
		data() {
			return {
				headerHeight:44,
				statusBarHeight: 0,
				tabTop:0,
				navigationBarHeight:44,
				headerBG:"#FF5030",
				statusBarBG:"none",
				headerIndex:98,
				swHeight: "800px",
				downOption: {   //下拉刷新
				    use:false,
				},
				upOption: {   //上拉加载
				 	use: false // 主体框架只启用下拉刷新
				},
				imageList:["../../static/image/home/banner1.png"],
				tipsArr:[],
				tabIndex: 0, // tab下标
				current: 0,
				mtabs:["全部","精选","学科","入门","经典","名医"],
				fixedTop: false, 
				topHeight:0,
				disableScroll: false, // swiper列表是否禁止滚动
				cateId: '',
				dataList:[],
				keyword:"",
				type:0,
				navTitle:""
			}
		},
		created() { 
			// var system = uni.getSystemInfoSync();
			// system.model = system.model.replace(' ', '');
			// system.model = system.model.toLowerCase();
			// if (system.model.indexOf('iphonex') != -1 || system.model.indexOf('iphone1') != -1) {
			// 	this.iphoneXButtomHeight = uni.upx2px(50);
			// }
			
		},
		mounted() {
			try {
				const system = uni.getSystemInfoSync();
				let navigationBarHeight=44,tabHei=50,searchBarHei=88;
				let tempHei=navigationBarHeight+tabHei+system.statusBarHeight;
				tempHei=tempHei+uni.upx2px(searchBarHei);
				tempHei=system.windowHeight-tempHei;
				this.swHeight=tempHei+"px";
				this.statusBarHeight = system.statusBarHeight;
				
			} catch (e) {
				
			}
		},
		onLoad(options){
			this.keyword=options.keyword || "";
			this.type=options.type;
			this.navTitle=this.type==0?"名医讲堂":"课程讲堂"
			this.getCourseCate();
		},
		methods: {
			swiperChange(e){
				//this.tabIndex = e.detail.current;
				this.tabChange(e.detail.current);
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(true);
				this.requestData();
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				this.mescroll.endByPage(1, 1); 
				//this.mescroll.endSuccess(8,false);
				// if (page.num == 1) {
				// 	this.mescroll.endSuccess(8, false);
				// } else {
				// 	this.mescroll.endErr()
				// }
			},
			refreshPage(index){
			    let vForItem = this.$refs["mescrollItem"];
				let mescrollP=vForItem[index];
				mescrollP.tabs=this.mtabs;
				mescrollP.cateId=this.cateId;
				mescrollP.keyword= this.keyword;
				const item=this.mtabs[index];
			    mescrollP.isBest=item.dictLabel=='精选'; //精选
				mescrollP.getProductCateByPid();
				mescrollP.mescroll.triggerDownScroll();
			},
			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);
							}
							if(this.mtabs.length>0){
								let dictItem={"dictValue":-1,"dictLabel": "全部"};
								this.mtabs.unshift(dictItem);
								this.cateId=this.mtabs[0].dictValue == -1 ? '':this.mtabs[0].dictValue;
								this.refreshPage(0);
							}
						}
					},
					rej => {}
				);
			},
			// 切换菜单
			tabChange (index) {
				// let preTab = this.tabs[this.preIndex]
				// preTab.y = this.mescroll.getScrollTop()
				// this.preIndex = index;
				this.tabIndex=index;
				const item=this.mtabs[index];
				if(item){
					this.cateId= item.dictValue == -1 ? '': item.dictValue;
					this.refreshPage(index);
				}
				// this.mescroll.optUp.use=this.tabIndex>0;
				// let curTab = this.tabs[index];
				// if(index==0){
				// 	this.mescroll.hideUpScroll();
				// 	this.mescroll.removeEmpty();
				// 	this.$nextTick(()=>{
				// 		this.mescroll.scrollTo(curTab.y, 0) // 恢复滚动条的位置
				// 	});
				// }
			},
			inputEvent(event){
				//console.log("qxj event:"+JSON.stringify(event));
				let vForItem = this.$refs["mescrollItem"];
				let mescrollP=vForItem[this.tabIndex];
				this.keyword=event.detail.value;
				mescrollP.keyword= this.keyword;
				mescrollP.mescroll.resetUpScroll();
			},
			// 获取指定下标的mescroll对象
			getMescroll(i){
				let mescrollItems = this.$refs.mescrollItem;
				if(mescrollItems){
					let item = mescrollItems[i]
					if(item) return item.mescroll
				}
				return null
			},
			// 页面的滚动事件
			onPageScroll(e){
				let mescroll = this.getMescroll(this.tabIndex);
				let that=this;
				if(Math.ceil(e.scrollTop)<69){
					mescroll.scrollTo(Math.ceil(e.scrollTop)-69,0);
					if(Math.ceil(e.scrollTop)>=44 && Math.ceil(e.scrollTop)<=69){
						
					}
					that.disableScroll = Math.ceil(e.scrollTop) < 69;
					setTimeout(function(){
						
					},200);
					if(mescroll.isScrollUp){ //向上滑动
					
					}
				}
				else{
					this.disableScroll = Math.ceil(e.scrollTop) < 69;
					mescroll.scrollTo(100,1);
					if(Math.ceil(e.scrollTop)>=44 && Math.ceil(e.scrollTop)<=69){
						
					}
				}
				
				console.log("qxj scrollTop:"+Math.ceil(e.scrollTop)+" isScrollUp:"+mescroll.isScrollUp+" disableScroll:"+this.disableScroll);
			},
			// 页面跳转
			navTo(url) {
				console.log("qxj url:"+url);
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.navigateBack({
					delta:1,
					animationType: 'slide-out-right',
					animationDuration: 200
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/*
	    sticky生效条件：
		1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
		2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
		3、父元素的高度不能低于sticky元素的高度
		4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
   
  page{
  	 height: 100%;
	 background-color: #fff;
  }
  
  .content{
  	/* #ifdef APP-PLUS */
  	flex: 1;
  	/* #endif */
  	/* #ifndef APP-PLUS */
  	//display: flex;
  	/* #endif */
  	
  	display: flex;
  	flex-direction: column;
  	width: 100%;
  	min-height: 100%;
  	flex: 1;
	position: relative;
  }
  
  .home_top_bg {
  	width: 100%;
  	height: auto;
  	position: absolute;
  	top: 0;
  	left: 0;
  	z-index: 0;
  }
  
  .sticky-tabs{
		z-index: 11;
		position: sticky;
		top: 44px;
		background-color: #fff;
		height: 80rpx;
		align-items: center;
  }
  
  .grace-page-header {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		border-bottom: 0px solid #FFFFFF;
		.grace-page-status-bar {
			width: 100%;
			height: 0;
		}
		.grace-page-header-nav {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
		}
		.grace-header-main {
			width: 300rpx;
			flex: auto;
			overflow: hidden;
			margin:0 20rpx;
			height: 48rpx;
			text-align: center;
			font-weight: 500;
			font-size: 34rpx;
			color: #333;
		}
  }
  
  .u-nav-back{
		display: flex;
		align-items: center;
		position: absolute;
		left:20rpx;
		.img{
			height: 48upx;
		}
   }

  .cont-box{
	   position: relative;
	  .top-section{
		  // background: #FF5030;
		  padding-bottom: 20rpx;
	      .search-header-nav {
	      	width: 100%;
	      	display: flex;
	      	flex-direction: row;
	      	flex-wrap: nowrap;
	      	align-items: center;
			
	      }
	      .search-header-main {
	      		width: 300rpx;
	      		flex: auto;
	      		overflow: hidden;
	      		margin:0 20rpx;
	      		height: 48rpx;
	      		background: #fff;
	      		border-radius: 35rpx;
	      		padding: 10rpx 20upx;
	      		display: flex;
	      		justify-content: flex-start;
	      		align-items: center;
	      		image{
					flex-shrink: 0;
	      			width: 28upx;
	      			height: 28upx;
	      			margin-right: 16upx;
	      		}
	      		.input-text{
					flex: 1;
	      			color: #333;
	      			font-size: 24rpx;
	      			height: 48rpx;
	      			line-height:48rpx ;
	      		
	      		}
	      		.uni-input-placeholder{
	      			color:#999;
	      		}
	      }
	  }
	  
	  .inner.fixed{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
	  }
	  .seat{
			display: none;
			&.show{
				display: block;
			}
	  }
	  .status-bar.white-bg {
	  	  background-color: #fff;
	  }
	  .top-title-box{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #fff;
			font-size: 36rpx;
			font-weight: 420;
			color: #333333;
			color: red;
			display: none;
			&.show{
				display: block;
			}
	  }
 }  
 
  .myjt-box{
	  margin:0 20rpx;
	  border-radius: 20rpx;
	  padding-right: 0rpx;
	  background-color: #fff;
	  .title-inner{
		    margin-left: 20rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding-top:20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			.arrow-pro{
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.card{
					font-size: 26rpx;
					color: #999;
				}
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 6rpx;
				}
			}
	
	  }
	  .collection-list{
			display: flex;
			flex-wrap: wrap;
			border-radius: 8rpx;
			margin: 0 16rpx;
			margin-top:20rpx;
	  	.item{
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;
	  		width: calc(100%);
	  		margin-bottom: 20rpx;
			.top{
				display: flex;
				flex: 1;
				flex-direction: row;
				.img-box{
					  position: relative;
					  width: 40%; /* 或者任何你想要的宽度 */
					  padding-bottom: 25%; /* 高度等于宽度 */
					  overflow: hidden; /* 防止图片溢出 */
					  image{
							position: absolute;
							width: 100%;
							height: 100%;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							border-radius: 20rpx;
					  }
				}
				.playIcon{
							 position: absolute;
							 width: 50rpx;
							 height: 50rpx;
							 background: rgba(0, 0, 0, 0.28);
							 border-radius: 50%;
							 top: 50%;
							 left: 50%;
							 transform: translate(-50%, -50%);
							 image{
								 width:20rpx ;
								 height: 24rpx;
								 border-radius: 0 !important;
							 }
					 }
					 .vip{
							  position: absolute;
							  width: 49rpx;
							  height: 28rpx;
							  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
							  border-radius: 6rpx;
							  top: 16rpx;
							  right: 16rpx;
							  color:#333;
							  font-size:18rpx ;
							  text-align: center;
							  font-weight: 500;
							  font-style: italic;		  
					 }
				}  
				.info-box{
					    width: calc(60%);
						padding:0 20rpx;
						position: relative;
						.title{
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 470;
							color: #333;
							line-height: 40rpx;
							margin-top: 10rpx;
						}
						.tips,.time{
							font-size: 26rpx;
							color: #666;
							line-height: 40rpx;
							margin-top: 10rpx;
						}
						.time{
							position: absolute;
							left: 20rpx;
							bottom: 20rpx;
						}
				}
				.arrow{
					width: 30rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 10rpx;
					image{
						width: 26rpx;
						height: 22rpx;
					}
				}
			}
			.progress-bar{
				border-radius: 20rpx;
				background: #ebebeb;
				height: 20rpx;
				margin:20rpx 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.focus-bar{
					background:#FF5030;
					border-radius: 20rpx;
					height: 100%;
				}  
				.number{
					font-size: 22rpx;
					color: #fff;
					background:#FF5030;
					border-radius: 10rpx;
					border-left: 2rpx solid #fff;
					padding: 0rpx 12rpx;
					margin-left: -2rpx;
				}
			}
	  }
  }		
  
  .scroll{
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		margin-top: 0rpx;
  }

</style>