zhengbasai/pages/school/index.vue

<template>
	<div class="school">
		<div class="top">
			<div class="search">
				<image src="@/static/images/search.png" mode="" class="search_icon"></image>
				<div class="s_input"><u-input v-model="searchValue" type="text" :border="false" /></div>
				<div class="searh_btn" @click="resetList">查询</div>
			</div>
		</div>
		<view class="CoursePage">
			<!-- 悬浮窗 -->
			<view v-if="nowPlay && showfu" class="showfu">
				<view class="imgBox">
					<image :src="nowPlay.cover" mode="widthFix" style="width: 88rpx;height: 88rpx;"></image>
				</view>
				<image v-if="play.ing" src="@/production/static/images/school/pause2.png" mode="widthFix"
					style="width: 60rpx;" @click.stop="stopVideo(nowPlay, play.index)"></image>
				<image v-else src="@/static/images/school/start.png" mode="widthFix" style="width: 60rpx;"
					@click.stop="playVideoSelf(nowPlay, play.index)"></image>

				<image src="@/static/images/school/xx.png" mode="widthFix" style="width: 40rpx;margin-right: 28rpx;"
					@click.stop="clearVideo"></image>
			</view>
			<div class="tabs">
				<u-tabs ref="tabs" :list="tabList" active-color="#F5222D" :show-bar="false" :current="curTab"
					@change="handleChangeTab"></u-tabs>
			</div>
			<view class="CourseBody">
				<view class="CourseList">
					<div v-if="courseList.length>0">
						<view class="CourseList-item" v-for="(item, i) in courseList" :key="item.id"
							@click="goDetail(item)">
							<view class="ItemInfo">
								<image :src="item.cover" mode="aspectFill" class="ItemInfo-teamcher">
									<view class="Info-right">

										<view class="Right-title">{{item.name}}</view>
										<view class="Right-teacher">{{item.day}} · {{item.author}}</view>
										<!-- 播放中 -->
										<view class="Right-play" v-if="item.type==1 && play.index === i&& play.ing"
											@click.stop="stopVideo(item, i)">
											<image v-if="play.index === i && play.ing"
												src="@/static/images/school/pause2.png" class="Play-icon" />
											<image v-else src="@/static/images/school/play2.png" class="Play-icon" />
											<view class="Play-Sound">
												<view class="SoundWave">
													<view v-for="ni in 20" :key="i + '_' + ni" class="Wave-line"
														:class=" play.index === i&& play.ing ? 'active' : ''" />
												</view>
											</view>
											<view class="Play-time" v-if="play.index === i">
												{{syTime | mediaTimeFormatter}}
											</view>
										</view>
										<!-- 播放暂停 -->
										<view class="Right-play"
											v-else-if="item.type==1 && play.index === i && !play.ing"
											@click.stop="playVideoSelf(item, i)">
											<image v-if="play.index === i && play.ing"
												src="@/static/images/school/pause2.png" class="Play-icon" />
											<image v-else src="@/static/images/school/play2.png" class="Play-icon" />
											<view class="Play-Sound">
												<view class="SoundWave">
													<view v-for="ni in 20" :key="i + '_' + ni" class="Wave-line"
														:class=" play.index === i&& play.ing ? 'active' : ''" />
												</view>
											</view>
											<view class="Play-time" v-if="play.index === i">
												{{syTime | mediaTimeFormatter}}
											</view>
										</view>
										<!-- 未播放 -->
										<div v-else>
											<view class="Right-play" v-if="item.type==1 "
												@click.stop="playVideoSelf(item, i)">
												<image src="@/static/images/school/play2.png" class="Play-icon" />
												<view class="Play-Sound">
													<view class="SoundWave">
														<view v-for="ni in 20" :key="i + '_' + ni" class="Wave-line"
															:class=" play.index === i&& play.ing ? 'active' : ''" />
													</view>
												</view>
												<view class="Play-time">{{ item.seconds | mediaTimeFormatter }}
												</view>
											</view>
										</div>
										<!-- <view :class="['Right-play', play.index == i ?'' : 'no_open']"
											v-if="item.type==1">
											<image v-if="play.index === i && play.ing"
												src="@/static/images/school/pause2.png" class="Play-icon"
												@click.stop="stopVideo(item, i)" />
											<image v-else src="@/static/images/school/play2.png" class="Play-icon"
												@click.stop="playVideoSelf(item, i)" />
											<view class="Play-Sound">
												<view class="SoundWave">
													<view v-for="ni in 20" :key="i + '_' + ni" class="Wave-line"
														:class=" play.index === i&& play.ing ? 'active' : ''" />
												</view>
											</view>
											<view class="Play-time" v-if="play.index === i">
												{{syTime | mediaTimeFormatter}}
											</view>
											<view v-else class="Play-time">{{ item.seconds | mediaTimeFormatter }}
											</view>
										</view> -->
									</view>
							</view>
						</view>
					</div>
					<div class="empty_image" v-else>
						<u-empty text="暂无课程"></u-empty>
					</div>

				</view>
			</view>

		</view>
	</div>
</template>

<script>
	import {
		AudioSlide
	} from "@/components/audio-slide.vue"
	let innerAudioContext = ''
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			AudioSlide
		},
		data() {
			return {
				typd: 0,
				showfu: false,
				title_list: [],
				title: '赛季点击此处选择',
				page: 1,
				last: false,
				courseList: [],
				tabList: [{
					name: '全部'
				}],
				searchValue: '',
				curTab: 0,
				img: '',
				params: {
					page: 1,
					page_size: 15,
					week: 1,
					season: ''
				},
				play: {
					index: -1,
					ing: false,
					time: 0,
					stop: false
				},
				nowPlay: {}, //当前正在播放的视频
				syTime: 0, //剩余时间
			}
		},
		filters: {
			dateFormatter: (timestamp, fmt) => {
				fmt = fmt || "yyyy-MM-dd";
				if (typeof timestamp === 'string') {
					timestamp = timestamp.replace(/-/g, '/')
				}
				const $this = new Date(timestamp);
				const o = {
					"M+": $this.getMonth() + 1,
					"d+": $this.getDate(),
					"h+": $this.getHours(),
					"m+": $this.getMinutes(),
					"s+": $this.getSeconds(),
					"q+": Math.floor(($this.getMonth() + 3) / 3),
					S: $this.getMilliseconds()
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(
						RegExp.$1,
						($this.getFullYear() + "").substr(4 - RegExp.$1.length)
					);
				}
				for (var k in o) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(
							RegExp.$1,
							RegExp.$1.length === 1 ?
							o[k] :
							("00" + o[k]).substr(("" + o[k]).length)
						);
					}
				}
				return fmt;
			},
			mediaTimeFormatter: num => {
				if (!num) return "00:00";
				num = Math.floor(num);
				let hour = Math.floor(num / 3600);
				let minutes = Math.floor((num - hour * 3600) / 60);
				let second = num - hour * 3600 - minutes * 60;
				if (hour > 0) {
					return `${hour > 9 ? hour : "0" + hour}:${
			        minutes > 9 ? minutes : "0" + minutes
			      }:${second > 9 ? second : "0" + second}`;
				} else {
					return `${minutes > 9 ? minutes : "0" + minutes}:${
			        second > 9 ? second : "0" + second
			      }`;
				}
			}
		},

		onShow() {},
		onHide() {
			// 离开小程序,去聊天
		},

		onLoad(e) {
			this.getCategoryLlist()
			this.getCourseList()
		},
		onUnload() {},
		created() {

		},
		methods: {
			//播放视频
			playVideoSelf(data, index) {
				if (this.nowPlay && data.id !== this.nowPlay.id && innerAudioContext) innerAudioContext.destroy()
				console.log(data, '----', index)
				//判断当前视频是否处于播放状态是的话停止
				// 否
				console.log('playVideoSelf', this.play.stop == true, innerAudioContext.paused, this.play.index == index)
				if (this.play.stop == true && this.play.index == index && innerAudioContext.paused) {
					console.log('暂停后重新播放')
					if (!innerAudioContext.src) innerAudioContext.src = data.path
					innerAudioContext.play()
				} else {
					innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.src = data.path;
					innerAudioContext.autoplay = true;
					innerAudioContext.onPlay(() => {
						console.log('开始播放', innerAudioContext);
						this.play.stop = false
						this.play.index = index
						this.play.ing = true
						this.nowPlay = data
						this.showfu = true
					});
					innerAudioContext.onEnded(() => {
						// 音频播放完成
						console.log('音频播放完成')
						this.videoPlayEnd()
					})
					innerAudioContext.onTimeUpdate(() => {
						console.log('视频播放进度', innerAudioContext.currentTime)
						let time = Math.ceil(innerAudioContext.currentTime)
						if (this.play.time === time) return
						this.play.time = time
						this.countDownTime(time)
					})
					innerAudioContext.onPause(() => {
						this.play.ing = false
					})

				}


			},

			//暂停播放视频
			stopVideo() {
				console.log()
				this.play.stop = true
				innerAudioContext.pause()

			},
			//清除播放
			clearVideo() {
				innerAudioContext.stop()
				this.play = {
					index: -1,
					ing: false,
					time: 0,
				}
				this.nowPlay = {}
				this.showfu = false
			},
			//播放结束
			videoPlayEnd() {
				innerAudioContext.stop();
				innerAudioContext.destroy()
				//判断是否存在下一条
				console.log(this.play.index == this.courseList.length - 1)
				if (this.play.index == this.courseList.length - 1) {
					//不存在吓一跳
					this.play = {
						index: -1,
						ing: false,
						time: 0,
					}
					this.nowPlay = {}
					this.showfu = false
					return
				}
				this.play.index++
				this.play.ing = true
				this.nowPlay = this.courseList[this.play.index]
				console.log('this.play.index', this.play.index)
				console.log('this.courseList', this.courseList)
				console.log('nowPlay', this.nowPlay)
				console.log('innerAudioContext', innerAudioContext)
				this.playVideoSelf(this.nowPlay, this.play.index)
			},
			//播放时音频倒计时
			countDownTime() {
				let videoTime = this.nowPlay.seconds
				let nowTime = this.play.time || 0
				this.syTime = videoTime - nowTime
			},

			//点击课程分类
			handleChangeTab(index) {
				this.curTab = index
				this.resetList()
			},
			//课程分类
			getCategoryLlist() {
				this.$u.get('/dwbs/business/category/select-options').then(res => {
					console.log(res)
					this.tabList = [{
						id: 0,
						name: '全部'
					}].concat(res.data)
				})
			},
			//重置列表请求
			resetList() {
				this.page = 1
				this.last = false
				this.courseList = []
				this.getCourseList()
			},
			//课程列表
			getCourseList() {
				let index = this.curTab
				console.log(this.curTab)
				this.$u.get('/dwbs/business/schools', {
					page: this.page,
					name: this.searchValue,
					category_id: this.tabList[index].id !== 0 ? this.tabList[index].id : ''
				}).then(res => {
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.courseList = this.courseList.concat(data)
					}
				})
			},

			//跳转详情
			goDetail(item) {
				if (item.type == 2) {
					uni.navigateTo({
						url: '/pages/school/detail?id=' + item.id
					})
				}

			}
		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.top {
		padding: 12px;
		background-color: #FFFFFF;
	}

	.search {
		background: #F9F9FB;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding: 0 12px;

		.search_icon {
			width: 24px;
			height: 24px;
			margin-right: 5px;
		}

		.s_input {
			flex: 1
		}

		.searh_btn {
			background: linear-gradient(91deg, #FF232C 0%, #FF571B 99%);
			border-radius: 20px;
			text-align: center;
			height: 32px;
			width: 66px;
			line-height: 32px;
			font-size: 14px;
			color: #FFFFFF;
		}
	}

	.showfu {
		width: 268rpx;
		height: 96rpx;
		background: #5B5B5B;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
		border-radius: 50rpx;
		position: fixed;
		right: 44rpx;
		bottom: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.imgBox {
			width: 96rpx;
			height: 96rpx;
			border: 6rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}
	}

	.select {
		margin-top: 20rpx;
		padding-left: 30rpx;
		font-size: 34rpx;
	}

	.noTip {
		padding: 20rpx;
		text-align: center;
		width: 100%;
		color: #999999;
	}

	$rotate: 0deg;

	.CoursePage {
		background-color: #FFFFFF;
		margin-top: 10px;
		border-radius: 10px 10px 0px 0px;
		@include page();
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.CourseAudioDetail {
			@include page();
			position: fixed;
			height: 100%;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			overflow: hidden;

			.CoursePlay {
				padding: 30rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-direction: column;

				.PlayTitle {
					width: 100%;
					color: #333333;
					font-size: 40rpx;
					line-height: 60rpx;
					text-align: center;
					margin-bottom: 40rpx;
				}

				.PlayTeacher {
					color: #999999;
					font-size: 32rpx;
					line-height: 60rpx;
					text-align: center;
					margin-bottom: 40rpx;
				}

				.PlayCover {
					width: 496rpx;
					height: 496rpx;
					border-radius: 50%;
					background-color: #333333;
					padding: 26rpx;
					box-sizing: border-box;

					.CoverImg {
						display: block;
						width: 100%;
						height: 100%;
						border-radius: 50%;

						&.start {
							animation: rotate 10s 0s infinite linear;
						}

						&.paused {
							animation-play-state: paused;
						}
					}

					margin-bottom: 150rpx;
				}

				.AudioProgress {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 50rpx;

					.Progress-right {
						color: #EA4A41;
						font-size: 24rpx;
						margin-left: 30px;
					}

					.Progress-left {
						flex: 1;
						min-width: 0;

						.Audio-slide {
							margin: 0;
						}
					}
				}

				.AudioControl {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					image {

						&:nth-of-type(1),
						&:nth-last-of-type(1) {
							width: 43rpx;
							height: 38rpx;
						}

						&:nth-of-type(2),
						&:nth-last-of-type(2) {
							width: 38rpx;
							height: 46rpx;
						}

						&:nth-of-type(3) {
							width: 124rpx;
							height: 124rpx;
						}
					}
				}
			}
		}

		.CourseScrollBody {
			width: 100%;
			flex: 1;
			overflow: hidden;
			position: relative;
		}
	}

	.CourseBody {
		width: 100%;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;

		.CourseWeek {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 60rpx;

			.week {
				// width: 192rpx;
				padding: 0 30rpx;
				height: 68rpx;
				border-radius: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background: #F8F8F8;
				color: #999999;
				font-size: 28rpx;

				&.active {
					color: #FFFFFF !important;
					background: linear-gradient(to right, #F97C55, #F44545) !important;
				}
			}
		}

		.CourseList {
			&-item {
				margin-bottom: 40rpx;
				background: #F6F6F6;
				border-radius: 5px;

				&:nth-last-of-type(1) {
					margin-bottom: 0;
				}

				.ItemTitle {
					color: #333333;
					font-size: 32rpx;
					line-height: 44rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&-status {
						height: 44rpx;
						line-height: 44rpx;
						width: 118rpx;
						border: 2rpx solid #999999;
						color: #999999;
						text-align: center;
						font-size: 28rpx;
						box-sizing: border-box;

						&.active {
							border-color: #EA4A41 !important;
							color: #EA4A41 !important;
						}
					}
				}

				.ItemInfo {
					width: 100%;
					display: flex;
					align-items: stretch;
					justify-content: space-between;

					.ItemInfo-teamcher {
						display: block;
						width: 180rpx;
						height: 234rpx;
					}

					.Info-right {
						flex: 1;
						overflow: hidden;
						margin-left: 16rpx;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						align-items: flex-start;
						padding-top: 4px;

						.Right-title {
							color: #333333;
							font-size: 32rpx;
							overflow: hidden;
							display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
							text-overflow: ellipsis; //溢出部分用省略号代替
							-webkit-line-clamp: 2; //设置文本显示两行
							-webkit-box-orient: vertical; //从上到下排列子元素;
							line-height: 44rpx;
						}

						.Right-teacher {
							color: #999999;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.Right-play {
							width: 422rpx;
							height: 60rpx;
							padding: 12rpx 14rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							background: linear-gradient(to right, #F97C55, #F44545);
							border-radius: 60rpx;
							margin-bottom: 22rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							&.no_open {
								background: #F8F8F8 !important;

								.Play-time {
									color: #999999 !important;
								}

								/deep/ .Wave-line {
									background: #999999 !important;
								}
							}

							.Play-icon {
								display: block;
								width: 36rpx;
								height: 36rpx;
							}

							.Play-time {
								color: #FFFFFF;
								font-size: 28rpx;
							}

							.Play-Sound {
								flex: 1;
								height: 100%;
								overflow: hidden;
								margin: 0 20rpx;
							}
						}
					}
				}
			}
		}
	}

	.SoundWave {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.Wave-line {
			width: 4rpx;
			background: #FFFFFF;
			border-radius: 4rpx;

			@for $i from 1 through 20 {
				&:nth-of-type(#{$i}) {
					height: #{random(40)}rpx;
				}
			}

			&.active {
				@for $i from 1 through 20 {
					&:nth-of-type(#{$i}) {
						animation: load 2.5s #{(random(10)*0.2)+ 1}s infinite linear;
					}
				}
			}
		}
	}

	@keyframes load {
		0% {
			height: 100%;
		}

		30% {
			height: 20%;
		}

		60% {
			height: 60%;
		}

		100% {
			height: 10%;
		}
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}
</style>