heshanApp/pages/course/components/doctorHall.vue

<template>
	<view class="content">

		<!-- 搜索 -->
		<view class="search-box">
			<uni-search-bar class="search" radius="34" v-model="keyword" 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="aspectFit"></image>
			</swiper-item>
		</swiper> -->
		<swiper class="swiper" 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%;" :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)">
			<view class="video-box">
				<image class="sound" src="@/static/image/home1/icon/bofang_icon.png"></image>
				<image class="sound" src="@/static/image/home1/icon/bofang_no_icon.png"></image>
				<image class="video-img" :src="item.imgUrl"></image>
			</view>
			<view class="hothall-infobox">
				<view class="hothall-info inherit">
					<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: {
			initFun() {
				this.getAdvList();
				this.getCourseCate();
				this.getRecommendList();
			},
			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;
	}

	.inherit {
		display: flex;
		align-items: inherit !important;
	}

	.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: #FF5030;
			border-radius: 50%;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.swiper {
		width: 694rpx;
		height: 228rpx;
		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-box {
			width: 702rpx;
			height: 400rpx;
			background: rgba(0, 0, 0, 0.15);
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			position: relative;
			overflow: hidden;

			.sound {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 40rpx;
				height: 40rpx;
				z-index: 2;
			}

			.video-img {
				width: 100%;
				height: 100%;
			}
		}

		.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>