baiyuApp/pages/course/components/doctorHall.vue

<template>
	<view class="content">
		
		<!-- 搜索 -->
		<view class="search-box">
			<uni-search-bar class="search" radius="34" v-model="keyword" bgColor="#fff" placeholder="搜索课程内容" clearButton="auto" cancelButton="none"
				@confirm="search">
				<template v-slot:searchIcon>
					<image src="@/static/image/hall/search_gray_icon.png" mode="aspectFill"></image>
				</template>
			</uni-search-bar>
			<!-- <view class="msg" @click="goToMsg()">
				<image :class="isNew ? 'badge':''" src="@/static/image/hall/new_hall_icon.png" mode="aspectFill"></image>
			</view> -->
		</view>
		
		<!-- banner -->
		<swiper class="swiper" style="height: 390rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
			:interval="interval" :duration="duration">
			<swiper-item  v-for="(url,index) in advImgs" :key="index"  class="swiper-item" @click="handleAdvClick(index)">
				<image style="width: 100%;height: 100%;" :src="url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 健康讲堂 -->
		<view id="guide3">
			 <view class="box-nav">
					 <view class="title">健康讲堂</view>
					 <view class="box-nav-right" @click="navTo('./famousHall?type=0')">
						<text>更多讲堂</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill"></image>
					</view>
			</view>
			
			<scroll-view scroll-x="true" class="cate-scroll" :scroll-into-view="scrollViewId" scroll-with-animation="true"
				overflow-anchor="none">
				<view :id="'scrollView' + index" class="cate-scroll-item" v-for="(item, index) in mtabs"
					:key="index" @click="tabChange(index)" :class="tabIndex == index ? 'cate-scroll-item-active' : ''">
					{{ item.dictLabel }}
				</view>
			</scroll-view>
		</view>
	
		<swiper :style="{'height': swHeight+'px'}" @transition="onTransition" @animationfinish="animationfinish" circular :autoplay="swiperAutoplay" interval="5000" duration="1000" :current="tabIndex"  @change="swiperChange" v-if="mtabs.length>0">
		   <swiper-item v-for="(tab,i) in mtabs" :key="i">	  
		       <view id="swiper-content" class="hall-box">
		            <hallItem class="gapitem guide3item"  v-for="(item, index) in dataList[i] " :key="index" :item="item"  @click.native="navTo('./info?courseId='+item.courseId)"  />
			   </view>
		   </swiper-item>
		</swiper>
		
		<!-- 热门推荐 -->
		<view class="box-nav">
			<view class="title">热门推荐</view>
			<view class="box-nav-right"  @click="navTo('./famousHall?type=1')">
				<text>更多讲堂</text>
				<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
			</view>
		</view>
	
		<view class="hothall" v-for="(item, index) in recommendList" :key="index"  @click="navTo('./info?courseId='+item.courseId)">
			<image class="video-img" :src="item.imgUrl"></image>
			<view class="hothall-infobox">
				<view class="hothall-info">
					<image :src="item.secondImg" mode="aspectFit"></image>
					<view>
						<view class="hothall-title">{{item.courseName}}</view>
						<view class="hothall-desc">{{item.description}}
						</view>
					</view>
					<view v-if="item.isIntegral!=1" class="vip">VIP</view>
				</view>
				<!-- <view class="tagbox">
					<block v-if="item.tags!=null">
						<view class="tag" v-for="(item, index) in item.tags.split(',')" :key="index" >{{item}}</view>
					</block>
				</view> -->
			</view>
		</view>
	
	</view>
</template>

<script>
	import hallItem from "./hallItem.vue";
	import {getAdvList} from '@/api/adv.js'
	import { getDictByKey } from '@/api/common'
	import { getCourseCate,getCourseList } from '@/api/course'
	export default {
		components: {
			hallItem
		},
		props: ['swiperAutoplay'],
		data() {
			return {
				keyword: "",
				isNew: false,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				cateId:0,
				scrollViewId:'scrollView0',
				tabIndex: 0,
				advImgs:[],
				advs:[],
				mtabs:[],
				dataList:[],
				swHeight: 0,
				recommendList:[],
				isBest:false,
				famousItemHei:0,
			}
		},
		mounted() {
			// this.swHeight = uni.upx2px(400);
			this.famousItemHei=uni.upx2px(376);
			this.getAdvList();
			this.getCourseCate();
			this.getRecommendList();
		},
		methods: {
			getAdvList() {
				//联网加载数据
				var that = this;
				var data = { advType:12,status:1}
				getAdvList(data).then(res => {
					if(res.code==200){
						that.advImgs=[];
						that.advs=[];
						res.data.forEach(function(element) {
							if(element.imageUrl!=null&&element.imageUrl!=""){
								that.advs.push(element);
								that.advImgs.push(element.imageUrl);
							}
						});
						
					}else{
						uni.showToast({icon:'none',title: "请求失败"});
					}
				});
			},
			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.mtabs = this.mtabs.splice(0,4)
								 this.cateId=this.mtabs[0].dictValue;
								 for (let i = 0; i < this.mtabs.length; i++) {
									 if(i<=4){
										 this.tabChange(i); 
									 }
								 }
								 this.tabChange(0);
							}
						}
					},
					rej => {}
				);
			},
			getFamousCourseList:function(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,4).then(res => {
						if(res.code==200){
							this.dataList[index+""]=res.data.list;  
							this.$emit("loadFamousCourse",0);
						    // this.$nextTick(() => {
						         this.updateSwiperHeight(index);
						    // }); 
						}
					},
					rej => {}
				);
			},
			getRecommendList(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			search() {
				uni.navigateTo({
					url: './famousHall?keyword='+this.keyword
				})
			},
			// 修改当前页
			tabChange(index){
				//if(this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollViewId = 'scrollView'+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);
				}
			},
			// SWIPER划动
			swiperChange(e){
				// this.tabIndex = e.detail.current;
				// this.scrollViewId = 'scrollView'+this.tabIndex;
				this.tabChange(e.detail.current);
			},
			
			onTransition(){
				//console.log("qxj onTransition");
			},
			animationfinish(){
				//console.log("qxj 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;
						  }
						  if(this.swHeight<=100){
							    //所以(total + pagesize -1) / pag esize就得到总页数
							    // console.log("qxj famousItemHei:"+this.famousItemHei);
							    this.swHeight=(dataArr.length)/2*this.famousItemHei;
								return;
						  }
						
					 }).exec();
				 }
			 },
			handleAdvClick(index){
				var ad=this.advs[index];
				if(ad.showType==1){
					uni.setStorageSync('url',ad.appAdvUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({
					 	url:"content"
					 })
				}
				else{
					uni.navigateTo({
						url:ad.appAdvUrl
					})
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			goToMsg(){
				  // 切换到视图1 tab
				  uni.switchTab({
					  url: '/pages/TUIKit/TUIPages/TUIConversation/index' 
				  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.content {
		padding: 0 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
	}

	.search-box {
		@include u-flex(row, center, space-between);
		padding-bottom: 22rpx;
		.search {
			padding: 0;
			flex: 1;
			image {
				width: 28rpx;
				height: 28rpx;
				padding-left: 16rpx;
			}
		}
	}

	.msg {
		image {
			width: 48rpx;
			height: 48rpx;
			margin-left: 26rpx;
			margin-right: 4rpx;
			position: relative;
		}

		.badge::after {
			content: "";
			width: 16rpx;
			height: 16rpx;
			background: #2583EB;
			border-radius: 50%;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.swiper {
		width: 694rpx;
		height: 390rpx;
		margin: 0 auto 16rpx auto;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		.swiper-item {
			width: 694rpx;
			height: 390rpx;
		}
	}

	::v-deep {
		.uni-swiper-dot {
			width: 10rpx;
			height: 10rpx;
			background: rgba(255, 255, 255, 0.5);
		}
		.uni-swiper-dot-active {
			width: 24rpx;
			height: 10rpx;
			background-color: #FFFFFF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
		}
	}
	
	.cate-scroll{
		width: 100%;
		min-height: 64rpx;
		white-space: nowrap;
		margin-bottom: 24rpx;
		&-item{
			display: inline-block;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			padding: 0 43rpx;
			line-height: 64rpx;
			margin-right: 20rpx;
			border-radius: 32rpx;
			background: #fff;
			&-active{
				font-weight: 600;
				font-size: 28rpx;
				color: #2583EB;
			}
		}
	}
	.box-nav {
		width: 100%;
		padding: 16rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		&-right {
			@include u-flex(row, center, flex-start);
		}
		.right-arrow {
			height: 48rpx;
			width: 48rpx;
		}
	}

	.hall-box {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin: 0 -18rpx -18rpx 0;
		.gapitem {
			margin: 0 18rpx 18rpx 0;
		}
	}
	

	.hothall {
		width: 702rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;
        position: relative;	
		.video-img {
			width: 702rpx;
			height: 400rpx;
			background: rgba(0, 0, 0, 0.15);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
		.vip{
			  position: absolute;
			  min-width: 54rpx;
			  min-height: 20rpx;
			  line-height: 20rpx;
			  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
			  border-radius: 16rpx 0 16rpx 0;
			  top:0;
			  left: 0;
			  color:#333;
			  font-size:18rpx ;
			  text-align: center;
			  font-weight: 500;
			  font-style: italic;		  
		}				  	

		&-infobox {
			padding: 24rpx;

			image {
				width: 88rpx;
				height: 128rpx;
				background: #ECECEC;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #ECECEC;
				flex-shrink: 0;
				margin-right: 28rpx;
			}
		}

		&-info {
			@include u-flex(row, center, flex-start);
		}

		&-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		&-desc {
			font-weight: 400;
			font-size: 24rpx;
			color: #757575;
			line-height: 28rpx;
			margin-top: 10rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.tagbox {
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			margin: 0 -12rpx -12rpx 0;
		}

		.tag {
			min-height: 40rpx;
			margin: 16rpx 12rpx 12rpx 0;
			background: #FEFAF3;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #FBEDD1;
			padding: 0 16rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #A97125;
			line-height: 40rpx;
		}
	}
	

</style>