weapp-v2/pages/course/list.vue

<template>
	<view class="CoursePage">
		<custom-nav title="课程" :to-back="toBack"></custom-nav>
		<scroll-view :scroll-y="!detail.vis" class="CourseScrollBody">
			<!-- 悬浮窗 -->
			<view v-if="!detail.vis && showfu&&img" class="showfu" @click.stop="appectData($event)">
				<view class="imgBox">
					<image :src="img" mode="widthFix" style="width: 88rpx;height: 88rpx;"></image>
				</view>
				<image src="../../static/icon/start.png" mode="widthFix" style="width: 40rpx;"></image>
				<image src="../../static/icon/xx.png" mode="widthFix" style="width: 40rpx;margin-right: 28rpx;"
					@click.stop="clearSave"></image>
			</view>
			<view class="CourseBody">
				<!-- <view style="width: 100rpx;height: 100rpx;" @click="goXia">
					下载1
				</view> -->
				<view class="CourseHeader">
					<picker class="HeaderSeason" mode="selector" :range="title_list" range-key="name"
						@change="titlePicker">
						<view>
							{{title}}
							<text></text>
							<image src="../../static/icon/triangle.png" mode="widthFix"
								style="width: 30rpx;margin-left: 20rpx;"></image>
						</view>
					</picker>
					<!-- <view class="HeaderSeason" @click="mockend">第{{ userServerInfo.season }}届培训课程表</view> -->
					<view class="HeaderPlayAll" @click="playAll">
						<image v-if="play.ing && play.all" src="../../static/icon/pause1.png" class="PlayIcon" />
						<image v-else src="../../static/icon/play1.png" class="PlayIcon">
							<view class="PlayText">全部播放</view>
					</view>
				</view>
				<view class="CourseDesc">
					快速精准提高销售能力
				</view>
				<view class="CourseWeek">
					<view v-for="item in weekList" :key="item.id" class="week"
						:class="params.week === item.id ? 'active' : ''" @click="params.week = item.id">
						{{ item.name }}
					</view>
				</view>
				<view class="CourseList">
					<template v-if="courseList.length > 0">
						<view v-for="(item, i) in courseList" :key="item.id" class="CourseList-item"
							@click="toInfo(item, i)">
							<view class="ItemTitle">
								<view>
									{{ item.course_time | dateFormatter('MM月dd日') }} 周{{ item.course_time | dateWeek }}
								</view>
								<view class="ItemTitle-status" :class="item.status ? 'active' : ''">
									{{ item.status ? '已授课' : '未授课' }}
								</view>
							</view>
							<view class="ItemInfo">
								<image :src="item.teacher_img" mode="aspectFill" class="ItemInfo-teamcher">
									<view class="Info-right">
										<view class="Right-title">{{ item.title }}</view>
										<view class="Right-teacher">{{ item.teacher_name }}</view>
										<!-- {{ item.teacher_levelname }}: -->
										<view class="Right-play" :class="item.status ? '' : 'no_open'">
											<template v-if="item.status">
												<image v-if="play.ing && play.index === i"
													src="../../static/icon/pause2.png" class="Play-icon"
													@click.stop="playSelf($event,item, i)" />
												<image v-else src="../../static/icon/play2.png" class="Play-icon"
													@click.stop="playSelf($event,item, i)" />
											</template>
											<template v-else>
												<image src="../../static/icon/play1.png" class="Play-icon" />
											</template>
											<view class="Play-Sound">
												<view class="SoundWave">
													<view v-for="ni in 20" :key="i + '_' + ni" class="Wave-line"
														:class="play.ing && play.index === i ? 'active' : ''" />
												</view>
											</view>
											<view class="Play-time">{{ item.course_length | mediaTimeFormatter }}</view>
										</view>
									</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="noTip">暂无相关课程</view>
					</template>
				</view>
			</view>
		</scroll-view>
		<view v-if="detail.vis" class="CourseAudioDetail">
			<view class="CoursePlay">
				<view class="PlayTitle">{{ detail.info.title }}</view>
				<view class="PlayTeacher">{{ detail.info.teacher_name }}</view>
				<view class="PlayCover">
					<image class="CoverImg" mode="aspectFill" :src="detail.info.teacher_img"
						:class="play.ing ? 'start' : 'start paused'" />
				</view>
				<view class="AudioProgress">
					<view class="Progress-left">
						<audio-slide class="Audio-slide" :allTime="Number(detail.info.course_length)"
							:playTime.sync="play.time" @update:progress="moveAudioPlay" @touchStart="audioTouch" />
					</view>
					<image v-show="params.season > 33" src="../../static/icon/xia.png" mode="widthFix"
						style="width: 60rpx;margin-left: 26rpx;"
						@click="goXia(detail.info.title,detail.info.down_link)"></image>
					<!-- <view class="Progress-right">倍数</view> -->
				</view>
				<view class="AudioControl">
					<image src="../../static/play/prev_15.png" mode="widthFix" @click="prevTime"></image>
					<image src="../../static/play/prev.png" mode="widthFix" @click="toPrev"></image>
					<image v-if="!play.ing" src="../../static/play/play.png" mode="widthFix" @click="detailPlay" />
					<image v-else src="../../static/play/pause.png" mode="widthFix" @click="detailPlay" />
					<image src="../../static/play/next.png" mode="widthFix" @click="toNext"></image>
					<image src="../../static/play/next_15.png" mode="widthFix" @click="nextTime"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		AudioSlide
	} from "../../components/audio-slide.vue"
	import {
		GetSeason
	} from '../../api.js'
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			AudioSlide
		},
		data() {
			return {
				typd: 0,
				saveData: {},
				showfu: false,
				title_list: [],
				title: '赛季点击此处选择',
				params: {
					page: 1,
					page_size: 15,
					week: 1,
					season: ''
				},
				courseList: [],
				weekList: [{
						id: 0,
						name: '课前课'
					},
					{
						id: 1,
						name: '第一周'
					},
					{
						id: 2,
						name: '第二周'
					},
					{
						id: 3,
						name: '第三周'
					},
				],
				img: '',
				play: {
					self: null,
					index: -1,
					all: false,
					ing: false,
					time: 0,
					img: ''
				},
				detail: {
					vis: false,
					info: {}
				}
			}
		},
		computed: {
			...mapState(['userServerInfo'])
		},
		watch: {
			'params.week'(a) {
				if (this.tyed != 1) {
					this.toPause()
					this.play.ing = false
					this.play.index = -1
					this.params.page = 1
					this.getCourseList()
					console.log(0)
				} else {
					console.log(1)
					this.getCourseList()
					this.tyed = 0
				}

			},
			"play.all"(a) {
				if (a) {
					this.play.self.onEnded(() => {
						let len = this.courseList.length - 1
						if (this.play.index >= len) {
							this.play.index = 0
							this.play.all = false
							this.play.ing = false
							return false
						}
						let _i = this.play.index + 1
						if (!this.courseList[_i].status) {
							return false
						}
						this.toPlay(this.courseList[_i].course_link, this.courseList[_i].title, this.courseList[_i]
							.cover_url, () => {
								this.play.index = _i
							})
						if (this.detail.vis) {
							this.detail.info = this.courseList[_i]
						}
					})
				} else {
					this.play.self ? this.play.self.offEnded() : null
				}
			},
			"play.ing"(a) {
				if (a) {
					this.play.self.onTimeUpdate(() => {
						this.play.time = this.play.self.currentTime
					})
					this.play.self.onEnded(() => {
						if (!this.play.all) {
							this.toPause()
							this.play.time = 0
						}
					})
				} else {
					// this.play.self.offTimeUpdate()
				}
			},
			"detail.info": {
				handler(a) {
					if (a.course_link) {
						this.play.self.onTimeUpdate(() => {
							this.play.time = this.play.self.currentTime
						})

					}
				},
				deep: true,
				immediate: true
			}
		},
		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;
			},
			dateWeek(time) {
				if (typeof time === 'string') {
					time = time.replace(/-/g, '/')
				}
				let _d = new Date(time).getDay()
				let _a = ['日', '一', '二', '三', '四', '五', '六']
				return _a[_d]
			},
			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
			      }`;
				}
			}
		},
		onBackPress() {
			return false
		},
		onShow() {
			// 从聊天页面回来
			if (this.play.self && this.play.ing) { // 正在播放
				this.play.self.seek(this.play.time)
				this.play.self.play()
			} else if (this.play.self && !this.play.ing) { // 暂停播放，显示悬浮窗
				if (uni.getStorageSync('saveData')) {
					console.log(121212121)
					this.getSave();
					// this.showfu = true
					// const obj = uni.getStorageSync('saveData')
					// this.img = obj.data.teacher_img
				}
			}
		},
		onHide() {
			// 离开小程序,去聊天
			if (this.play.self && !this.play.ing) { // 暂停播放，存储数据
				console.log(1121215)
				this.saveData.params = this.params
				this.saveData.play = this.play
				uni.setStorageSync('saveData', this.saveData)
				console.log(console.log('存储的saveData', uni.getStorageSync('saveData')))
				this.showfu = true
			}
		},
		destroyed() {
			// this.toPause()
		},
		onLoad(e) {
			// 从首页进入小程序
			this.getSeasonList()
			console.log(uni.getStorageSync('saveData'), 'onload中的saveDate')
			this.getSave();
			if (e.week) {
				this.params.week = Number(e.week)
			}
		},
		onUnload() {
			console.log('onunload')
			// 返回首页，存储数据
			if (this.play.index != -1) {
				this.saveData.params = this.params
				this.saveData.play = this.play
				uni.setStorageSync('saveData', this.saveData)
				console.log(console.log('跳转页面存储的saveData', uni.getStorageSync('saveData')))
			}
		},
		methods: {
			// 获取缓存的数据
			getSave() {
				if (uni.getStorageSync('saveData')) {
					this.showfu = true
					const obj = uni.getStorageSync('saveData')
					if (obj.play && obj.data) {
						const {
							index,
							ing,
							time
						} = obj.play
						this.play.index = index
						this.play.ing = ing
						const {
							course_link,
							cover_url,
							title,
							teacher_img
						} = obj.data
						this.play.self.src = course_link
						this.play.self.coverImgUrl = cover_url
						this.play.self.title = title
						this.img = obj.data.teacher_img
					}
				}
			},
			//下载音频文件
			goXia(title, url) {
				let that = this
				const filePath = wx.env.USER_DATA_PATH + '/' + title + '.mp4'
				const downloadTask = uni.downloadFile({
					url: url,
					filePath: filePath,
					success: (res) => {
						if (res.statusCode === 200) {
							wx.saveVideoToPhotosAlbum({
								filePath: filePath,
								success: function(red) {
									uni.showToast({
										title: '下载成功',
										icon: 'none'
									})
								},
								fail: function(err) {
									uni.showToast({
										title: '下载失败',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					}
				})
				downloadTask.onProgressUpdate((res) => {
					// console.log('下载进度' + res.progress);
					uni.showToast({
						title: '下载进度' + res.progress + '%',
						icon: 'none'
					})
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				})
			},
			clearSave() {
				uni.removeStorageSync('saveData')
				this.showfu = false
			},
			appectData(e) {
				const data = uni.getStorageSync('saveData')
				if (data.params.week === this.params.week) {
					this.tyed = 0
				} else {
					this.tyed = 1
				}
				this.params = data.params
				this.getSeason(this.params.season)
				console.log(this.title_list)
				this.play.index = data.play.index
				this.play.self.src = data.data.course_link
				this.play.time = data.play.time
				console.log('play.time', this.play.time)
				this.playSelfd(e, data.data, this.play.index) //列表播放
				uni.removeStorageSync('saveData')
				this.showfu = false
				this.toInfo(data.data, this.play.index)
			},
			// 列表里的暂停播放按钮
			playSelfd(e, data, i) {
				this.saveData.data = data
				uni.removeStorageSync('saveData')
				e.stopPropagation()
				this.toPlayd(data.course_link, data.title, data.cover_url, () => {
					console.log(1, this.play)
					this.play.index = i
				})
			},
			toPlayd(src, cb) {
				this.play.ing ? this.play.self.pause() : null
				this.play.self.src = src;
				this.play.self.seek(this.play.time)
				this.play.self.play()
				this.play.ing = true
				cb && cb()
			},
			getSeason(e) {
				// if (e === this.params.season) {
				// 	this.tyed = 0
				// } else {
				// 	this.tyed = 1
				// }
				let i = this.title_list.findIndex(item => item.season == e)
				this.title = this.title_list[i].name
				this.season = this.title_list[i].season
				this.getCourseList()
			},
			getSeasonList() {
				this.$ajax.get(`${GetSeason}`).then(([, {
					data: res
				}]) => {
					if (res.code === 200) {
						var arr = res.data
						arr.forEach((item, i) => {
							item.name = '第' + item.season + '届培训课程表'
						})
						this.title_list = arr
						this.title = this.title_list[0].name
						this.season = res.data[0].season
						uni.hideLoading()
						this.getCourseList()
						this.init()
					}
				})
			},
			titlePicker(e) {
				console.log(e.target.value)
				this.title = this.title_list[e.target.value].name
				this.season = this.title_list[e.target.value].season
				this.toPause()
				this.play.ing = false
				this.play.index = -1
				this.params.page = 1
				this.getCourseList()
			},
			audioTouch() {
				this.toPause()
			},
			mockend() {
				this.play.self.seek(212)
			},
			toBack() {

				if (this.detail.vis) {
					this.detail.time = 0
					this.detail.info = {}
					this.detail.vis = false
					if (!this.play.ing) { //暂停状态返回列表，显示悬浮窗
						this.saveData.params = this.params
						this.saveData.play = this.play
						uni.setStorageSync('saveData', this.saveData)
						this.img = this.saveData.data.teacher_img
						console.log(console.log('11存储的saveData1', uni.getStorageSync('saveData')))
						this.showfu = true
					}
				} else {
					// console.log(111,this.play.self)
					// uni.setStorageSync('floating', this.play)
					uni.navigateBack()
				}
			},
			init() {
				// this.play.self = uni.createInnerAudioContext()
				this.play.self = uni.getBackgroundAudioManager()

			},
			toPlay(src, title, cover_rul, cb) {
				this.play.ing ? this.play.self.pause() : null
				this.play.self = uni.getBackgroundAudioManager();
				this.play.self.title = title;
				this.play.self.coverImgUrl = cover_rul;
				this.play.self.src = encodeURI(src)
				this.play.ing = true

				wx.setInnerAudioOption({
					obeyMuteSwitch: false,
					success: function(e) {
						console.log('play success')
					},
					fail: function(e) {
						console.log(e)
						console.log('play fail')
					}
				})
				cb && cb()
			},
			toPause() {
				if (!this.play.ing) {
					return false
				}
				this.play.ing = false
				this.play.self.pause()
			},
			playAll() {
				if (this.courseList.length === 0) {
					uni.showModal({
						content: "没有可播放的课程",
						showCancel: false
					})
					return false
				}
				let _this = this
				if (this.play.ing) {
					if (this.play.all) {
						this.toPause()
					} else {
						if (this.play.index === -1) {
							this.toPause()
						} else {
							this.play.all = true
						}
					}
					return false
				}
				if (this.play.index === -1) {
					this.toPlay(this.courseList[0].course_link, this.courseList[0].title, this.courseList[0].cover_url,
						() => {
							this.play.all = true
							this.play.index = 0
						})
				} else {
					this.play.ing = true;
					this.play.self.play()
				}
			},
			// 列表里的暂停播放按钮
			playSelf(e, data, i) {
				this.saveData.data = data
				uni.removeStorageSync('saveData')
				this.showfu = false
				e.stopPropagation()
				if (!data.status) {
					uni.showModal({
						content: '课程还未开始, 暂不能播放',
						showCancel: false
					})
					return false
				}
				if (this.play.ing && this.play.index === i) {
					this.toPause()
					return false
				}
				this.toPlay(data.course_link, data.title, data.cover_url, () => {
					console.log(1, this.play)
					this.play.index = i
				})
			},
			getCourseList() {
				this.params.season = this.season
				let {
					page,
					page_size,
					week,
					season
				} = this.params
				let params = []
				Object.keys(this.params).forEach(k => {
					params.push(`${k}=${this.params[k]}`)
				})
				let _s = params.join('&')
				this.$ajax.get(`/course/course_list?${_s}`).then(([, {
					data: res
				}]) => {
					if (res.code === 200) {
						this.courseList = res.data.list
						this.$store.commit('CHANGECOURSELIST', res.data.list)
					}
				})
			},
			toPrev() {
				if (this.play.index === 0) {
					uni.showModal({
						content: "前面没有课程了",
						showCancel: false
					})
					return false
				}
				let _i = this.play.index - 1
				if (!this.courseList[_i].status) {
					uni.showModal({
						content: "上一个课程还未开始",
						showCancel: false
					})
					return false
				}
				this.play.time = 0
				this.toPlay(this.courseList[_i].course_link, this.courseList[_i].title, this.courseList[_i].cover_url,
					() => {
						this.play.index = _i
					})
				this.detail.info = Object.assign({}, this.courseList[_i])
			},
			toNext() {
				let max = this.courseList.length - 1
				if (this.play.index >= max) {
					uni.showModal({
						content: "后面没有课程了",
						showCancel: false
					})
					return false
				}
				let _i = this.play.index + 1
				if (!this.courseList[_i].status) {
					uni.showModal({
						content: "下一个课程还未开始",
						showCancel: false
					})
					return false
				}
				this.play.time = 0
				this.toPlay(this.courseList[_i].course_link, this.courseList[_i].title, this.courseList[_i].cover_url,
					() => {
						this.play.index = _i
					})
				this.detail.info = Object.assign({}, this.courseList[_i])
			},
			toInfo(data, i) {
				uni.removeStorageSync('saveData')
				console.log(uni.getStorageInfo('saveData'), '点击详情的save')
				console.log(data, 'data')
				this.saveData.data = data
				this.showfu = false
				if (!data.status) {
					uni.showModal({
						content: '课程还未开始',
						showCancel: false
					})
					return false
				}
				if (i !== this.play.index) {
					// this.play.self.src = data.course_link
					this.play.ing ? this.toPause() : null
					this.play.index = i
					this.play.time = 0
					this.play.self.seek(this.play.time)
				}
				this.detail.info = data
				this.detail.vis = true
			},
			moveAudioPlay({
				value
			}) {
				this.play.time = value
				this.play.self.seek(value)
				this.toPlay()
			},
			// 倒退15秒
			prevTime() {
				this.play.time = this.play.time > 15 ? this.play.time - 15 : 0
				this.play.self.seek(this.play.time)
			},
			// 快进15秒
			nextTime() {
				let max = Number(this.detail.info.course_length)
				this.play.time = this.play.time < max ? this.play.time + 15 : max
				this.play.self.seek(this.play.time)
			},
			// 播放详情里的 播放和暂停
			detailPlay() {
				if (this.play.ing) { // 暂停
					this.toPause()
				} else { // 播放
					const {
						title,
						cover_rul,
						course_link
					} = this.detail.info
					this.play.self = uni.getBackgroundAudioManager();
					this.play.self.title = title;
					this.play.self.coverImgUrl = cover_rul;
					this.play.self.src = course_link
					// this.play.self.play();
					this.play.ing = true;
					wx.setInnerAudioOption({
						obeyMuteSwitch: false,
						success: function(e) {
							console.log(e)
							console.log('play success')
						},
						fail: function(e) {
							console.log(e)
							console.log('play fail')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.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: 80rpx;
		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 {
		@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: 30rpx;
		box-sizing: border-box;

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

			.HeaderSeason {
				flex: 1;
				overflow: hidden;
				text-overflow: hidden;
				color: #333333;
				font-size: 44rpx;
				margin-right: 20rpx;
			}

			.HeaderPlayAll {
				width: 208rpx;
				height: 68rpx;
				background-color: #F8F8F8;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;

				.PlayIcon {
					width: 36rpx;
					height: 36rpx;
				}

				.PlayText {
					font-size: 28rpx;
					color: #999999;
					margin-left: 16rpx;
					line-height: 40rpx;
				}
			}
		}

		.CourseDesc {
			color: #999999;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 32rpx;
		}

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

				&: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;

						.Right-title {
							color: #333333;
							font-size: 32rpx;
							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>