zhengbasai/pages/school/index copy 1.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">查询</div>
			</div>
		</div>
		<view class="CoursePage">
			<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/images/school/start.png" mode="widthFix" style="width: 40rpx;"></image>
					<image src="@/static/images/school/xx.png" mode="widthFix" style="width: 40rpx;margin-right: 28rpx;"
						@click.stop="clearSave"></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">
								<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 no_open">
												<image v-if="play.ing && play.index === i"
													src="@/static/images/school/pause2.png" class="Play-icon"
													@click.stop="playSelf($event,item, i)" />
												<image v-else src="@/static/images/school/play2.png" class="Play-icon"
													@click.stop="playSelf($event,item, i)" />
												<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.seconds | mediaTimeFormatter }}
												</view>
											</view>
										</view>
								</view>
							</view>
							<!-- <view class="CourseList-item">
								<view class="ItemInfo">
									<image src="@/static/images/school/teacher.png" mode="aspectFill"
										class="ItemInfo-teamcher">
										<view class="Info-right">
											<view class="Right-title">不得不听的学位争霸赛赛前课</view>
											<view class="Right-teacher">2024-10-20 首席导师·李老师</view>
											<view class="Right-play">
												<template>
													<image src="@/static/images/school/play2.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">120分钟
												</view>
											</view>
										</view>
								</view>
							</view> -->
						</div>
						<div class="empty_image" v-else>
							<u-empty text="暂无课程"></u-empty>
						</div>
						<!-- <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="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.teacher_name }}</view>
											<view class="Right-play" :class="item.status ? '' : 'no_open'">
												<template v-if="item.status">
													<image v-if="play.ing && play.index === i"
														src="@/static/images/school/pause2.png" class="Play-icon"
														@click.stop="playSelf($event,item, i)" />
													<image v-else src="@/static/images/school/play2.png"
														class="Play-icon" @click.stop="playSelf($event,item, i)" />
												</template>
												<template v-else>
													<image src="@/static/images/school/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.seconds | 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/images/school/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/images/school/prev_15.png" mode="widthFix" @click="prevTime"></image>
						<image src="@/static/images/school/prev.png" mode="widthFix" @click="toPrev"></image>
						<image v-if="!play.ing" src="@/static/images/school/play.png" mode="widthFix"
							@click="detailPlay" />
						<image v-else src="@/static/images/school/pause.png" mode="widthFix" @click="detailPlay" />
						<image src="@/static/images/school/next.png" mode="widthFix" @click="toNext"></image>
						<image src="@/static/images/school/next_15.png" mode="widthFix" @click="nextTime"></image>
					</view>
				</view>
			</view>
		</view>
	</div>
</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: ''
				},
				page: 1,
				last: false,
				courseList: [],
				tabList: [{
					name: '全部'
				}],
				searchValue: '',
				curTab: 0,
				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)
			}
			this.getCategoryLlist()
			this.getCourseList()
		},
		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.path, data.title, data.cover, () => {
				this.toPlayd('https://img.tukuppt.com/newpreview_music/09/00/32/5c89189c4f4cf81405.mp3', data.title, data.cover, () => {
					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) {
				// debugger;
				console.log(src, title, cover_rul)
				// debugger
				this.play.ing ? this.play.self.pause() : null
				this.play.self = uni.getBackgroundAudioManager();
				console.log('debugger',this.play.self)
				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 (this.play.ing && this.play.index === i) {
					this.toPause()
					return false
				}
				this.toPlay('https://img.tukuppt.com/newpreview_music/09/00/32/5c89189c4f4cf81405.mp3', data.name, data.cover, () => {
					console.log(1, this.play)
					this.play.index = i
				})
			},
			//点击课程分类
			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)
					}
				})
			},
			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" 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: 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 {
		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;
							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>