MinNan/pages/course/detail.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="课程详情" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<!-- <view class="main" v-if="hasLoad"> 暂时取消隐藏看效果-->
		<view class="main">
			<view class="b-top" v-if="playData">
				<view class="b-player f-loading" v-if="playData.type === 'loading'">
					<view class="s-cont">加载中</view>
				</view>
				<view class="b-player f-video" v-else-if="playData.type === 'video'">
					<video
						id="videoPlayer"
						:src="videoData.src"
						:poster="videoData.poster"
						:autoplay="true"
						:duration="videoData.duration"
						:initial-time="videoData.currentTime"
						:title="playData.name"
						@play="onVideoPlay"
						@pause="onVideoPause"
						@ended="onVideoEnded"
						@timeupdate="onVideoTimeupdate"
					></video>
				</view>
				<view class="b-player f-video" v-else-if="playData.type === 'audio'">
					<audio-player
						ref="audioPlayer"
						:chapterName="chapterName"
						:audioData="audioData"
						@play="onAudioPlay"
						@pause="onAudioPause"
						@ended="onAudioEnded"
						@timeupdate="onAudioTimeupdate"
					></audio-player>
				</view>
			</view>
			<view class="b-top" v-else>
				<view class="b-photos">
					<swiper indicator-dots circular="true" duration="400">
						<swiper-item class="swiper-item" v-for="(item, index) in state.photo_list" :key="index">
							<view class="image-wrapper" @click="onPreviewPhoto(index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="b-slide">
				<view class="b-item" :class="{ 'f-active': showContent === 'detail' }" @click="onContentSwitch('detail')">介绍</view>
				<view class="b-item" :class="{ 'f-active': showContent === 'chapter' }" @click="onContentSwitch('chapter')">目录</view>
				<view class="b-item" :class="{ 'f-active': showContent === 'examine' }" @click="onContentSwitch('examine')" v-if="state.has_examine">考核</view>
			</view>
			<!-- 课程目录 -->
			<view class="content-list" v-show="showContent === 'chapter'">
				<view class="chapter-item" v-for="(chapter, index) in state.chapter_list" :key="index">
					<view class="chapter-info">
						<view class="b-name">第{{ index + 1 }}章 {{ chapter.name }}</view>
						<!-- 	<view class="b-more">
							<view class="iconfont icon-fold"></view>
						</view> -->
					</view>
					<view class="chapter-content">
						<view
							class="content-item"
							v-for="(sContent, sIndex) in state.chapter_list[index].content_list"
							:key="sIndex"
							:class="{ 'f-active': chapterIndex == index && contentIndex == sIndex }"
						>
							<view class="b-main">
								<view class="s-name too-long">{{ index + 1 }}-{{ sIndex + 1 }} {{ sContent.name }}</view>
								<view class="s-time" v-if="sContent.duration > 0">{{ sContent.duration_text }}</view>
							</view>
							<view class="b-play" @click="onPlay(index, sIndex)">
								<view class="s-state" v-if="goonPlay(sContent.id)">继续</view>
								<view class="s-state" v-else-if="sContent.trial_view">试读</view>
								<view class="s-state" v-else-if="sContent.trial_duration">试播{{ sContent.trial_duration }}秒</view>
								<view class="s-percent" v-if="sContent.learn_percent > 0">{{ sContent.learn_percent }}%</view>
								<view class="s-play" v-if="sContent.type === 'video'">
									<view class="iconfont icon-video" v-show="!(chapterIndex == index && contentIndex == sIndex)"></view>
									<view class="iconfont icon-video-ing" v-show="chapterIndex == index && contentIndex == sIndex"></view>
								</view>
								<view class="s-play" v-else-if="sContent.type === 'audio'">
									<view class="iconfont icon-audio" v-show="!(chapterIndex == index && contentIndex == sIndex)"></view>
									<view class="iconfont icon-audio-ing" v-show="chapterIndex == index && contentIndex == sIndex"></view>
								</view>
								<view class="s-play" v-else-if="sContent.type === 'rich'">
									<view class="iconfont icon-rich"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 课程目录 -->
			</view>
			<!-- 课程介绍 -->
			<view class="course-detail" v-show="showContent === 'detail'">
				<view class="info">
					<view class="b-title">{{ state.name }}</view>
					<view class="b-main">
						<view class="b-price">
							<view class="s-payment" :class="{ 'f-small': textCost }">{{ goodsPrice(state.price) }}</view>
							<!-- <view class="s-vip-price" v-if="state.card_price > 0 && !iphonePlatform">会员价 ¥{{ state.card_price }}</view>
							<view class="s-vip-free" v-if="state.vip_free">会员免费</view> -->
						</view>
						<view class="b-opt">
							<view class="s-btn f-like" @click="onHandleLike()">
								<view class="f-yes iconfont icon-like-yes" v-if="state.is_like"></view>
								<view class="f-no iconfont icon-like-no" v-else></view>
							</view>
							<button class="s-btn f-shar open-data-btn" open-type="share">
								<view class="iconfont icon-share"></view>
							</button>
							<!-- <view class="s-btn f-share">
								<view class="iconfont icon-share"></view>
							</view> -->
						</view>
					</view>
					<view class="b-info">
						<view class="s-worth">{{ state.category_name }}</view>
						<view class="s-count">
							<view class="s-left">{{ state.count_user }}人学习</view>
							<view class="s-gain">{{ state.count_like }}人收藏</view>
						</view>
					</view>
				</view>
				<!-- <view class="teacher" v-if="state.teacher_data"> 暂时取消隐藏看效果-->
				<view class="teacher">
					<view class="b-title">课程讲师</view>
					<view class="b-teacher" @click="onTeacherDetail">
						<view class="b-avatar">
							<image :src="state.teacher_data.avatar_url" mode=""></image>
						</view>
						<view class="b-main">
							<view class="s-name">{{ state.teacher_data.name }}</view>
							<view class="s-info">{{ state.teacher_data.intro }}</view>
						</view>
						<!-- <view class="b-more">
							<view class="iconfont icon-more"></view>
						</view> -->
					</view>
				</view>
				<view class="content">
					<view class="b-title">
						<view class="xiant"></view>
						<view class="s-tit">课程详情</view>
						<view class="xiant"></view>
					</view>
					<view class="b-rich">
						<rich-text :nodes="state.content"></rich-text>
					</view>
				</view>
			</view>
			<!-- 课程介绍end -->
			<!-- 考核 -->
			<view class="course-examine" v-show="showContent === 'examine'">
				<view class="examine-list" v-if="examineList.length > 0">
					<examine-item v-for="(item, index) in examineList" :key="index" :item="item"></examine-item>
				</view>
			</view>
			<view class="navbar" v-if="state.auth_state != 3">
				<view class="b-main">
					<view class="b-amount">
						<view class="s-num" :class="{ 'f-small': textCost }">{{ goodsPrice(state.price) }}</view>
					</view>
				</view>
				<view class="b-action" v-if="state.auth_state == 0">
					<view class="b-btn f-mute" v-if="iphonePlatform">根据相关规定，iOS不支持购买</view>
					<template v-else>
						<view class="b-btn f-cart" @click="onAddCart()">加入购物车</view>
						<view class="b-btn f-order" @click="onPreviewOrder()">立即购买</view>
					</template>
				</view>
				<view class="b-action" v-else-if="state.auth_state == 1">
					<view class="b-btn f-learn" @click="onStartLearn()">开始学习</view>
				</view>
				<view class="b-action" v-else-if="state.auth_state == 2">
					<view class="b-btn f-learn" @click="onStartLearn()">VIP免费</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
		<!-- 快捷购物车 -->
		<quick-cart :show="showCart" @close="onCloseCart()"></quick-cart>
		<!-- 首页 -->
		<app-home></app-home>
	</view>
</template>

<script>
// import { startLearn, syncPlayState, handleLike, getCourseDetail, getCourseExamine, getContentDetail } from '@/service/api/course.js';
// import { addCart } from '@/service/api/order.js';
// import { getTimestamp } from '@/common/util.js';
import mixinsGoods from '@/mixins/goods.js';
import mixinsCommon from '@/mixins/common.js';
let that;
export default {
	mixins: [mixinsCommon, mixinsGoods],
	data() {
		return {
			state: null,
			courseId: '',
			examineList: [],
			chapterIndex: -1,
			contentIndex: -1,
			showContent: 'detail',
			showCart: false,
			hasLoad: false,
			loadingType: 1,
			loadingText: '',
			playData: null,
			playState: {
				intervalTimer: 0,
				diffTime: 0,
				syncTimes: 0,
				isPlaying: 0,
				currentTime: 0,
				playTime: 0
			}
		};
	},
	onLoad(options) {
		that = this;
		this.courseId = options.cid;
		this.loadDetail();
		if (!this.playState.intervalTimer) {
			// this.watchPlayState();
		}
	},
	onUnload() {
		console.log('onUnload', this.playState.intervalTimer);
		if (this.playState.intervalTimer > 0) {
			console.log('clear intervalTimer');
			clearInterval(this.playState.intervalTimer);
			this.playState.intervalTimer = 0;
		}
		if (this.$refs.audioPlayer) {
			console.log('stop audioPlayer');
			this.$refs.audioPlayer.stop();
		}
		if (this.videoContext) {
			console.log('stop videoPlayer');
			this.videoContext.stop();
		}
	},
	computed: {
		// videoData() {
		// 	return {
		// 		poster: this.playData.data.poster,
		// 		src: this.playData.data.src,
		// 		duration: this.playData.data.duration,
		// 		currentTime: this.playData.trial_duration > 0 ? 0 : this.playData.learn_data.current_time
		// 	};
		// },
		// audioData() {
		// 	return {
		// 		id: this.playData.id,
		// 		name: this.playData.name,
		// 		src: this.playData.data.src,
		// 		duration: this.playData.data.duration,
		// 		currentTime: this.playData.trial_duration > 0 ? 0 : this.playData.learn_data.current_time
		// 	};
		// },
		// chapterName() {
		// 	return this.state.chapter_list[this.chapterIndex].name;
		// },
		goonPlay() {
			return (contentId) => {
				return this.state.recent_data && contentId == this.state.recent_data.content_id;
			};
		},
		orderPayment() {
			return this.state.card_auth && this.state.card_price ? this.state.card_price : this.state.price;
		}
	},
	onShareAppMessage(res) {
		// console.log('onShareAppMessage', res);
		// if (res.from === 'button') {
		// 	// 来自页面内分享按钮
		// 	console.log(res.target);
		// }
		// return {
		// 	title: this.state.name,
		// 	path: '/pages/course/detail?cid=' + this.courseId,
		// 	imageUrl: this.state.photo_list[0]['url']
		// };
	},
	methods: {
		loadDetail() {
			this.$api.getCourseDetail({ id: this.courseId }, function (res) {
				console.log(res, 55555);
				if (res.code == 1) {
					if (!that.hasLoad) {
						if (res.data.auth_state == 3) {
							that.showContent = 'chapter';
						}
					}
					that.hasLoad = true;
					that.loadingType = -1;
					that.state = res.data;
					console.log(that.state, 88888888888);
					if (res.data.has_examine) {
						that.loadExamine();
					}
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				} else {
					that.loadingType = 3;
					// that.loadingText = err.data.msg || '加载失败';
				}
			});
			// getCourseDetail(this.courseId).then(([err, res]) => {
			// 	console.log('getCourseDetail', err, res);
			// 	if (!err) {
			// 		if (!this.hasLoad) {
			// 			if (res.auth_state == 3) {
			// 				this.showContent = 'chapter';
			// 			}
			// 		}
			// 		this.hasLoad = true;
			// 		this.loadingType = -1;
			// 		this.state = res;
			// 		if (res.has_examine) {
			// 			this.loadExamine();
			// 		}
			// 		uni.setNavigationBarTitle({
			// 			title: res.name
			// 		});
			// 	} else {
			// 		this.loadingType = 3;
			// 		this.loadingText = err.data.msg || '加载失败';
			// 	}
			// });
		},
		loadExamine() {
			this.$api.getCourseExamine({}, function (res) {
				console.log('getCourseExamine', res);
				that.examineList = res.data;
			});
			// getCourseExamine(this.courseId).then(([err, res]) => {
			// 	console.log('getCourseExamine', err, res);
			// 	if (!err) {
			// 		this.examineList = res;
			// 	}
			// });
		},
		onContentSwitch(type) {
			this.showContent = type;
		},
		onPreviewPhoto(index) {
			let photos = [];
			for (let i = 0; i < this.state.photo_list.length; i++) {
				photos.push(this.state.photo_list[i].url);
			}
			uni.previewImage({
				current: index,
				urls: photos
			});
		},
		onPlay(chapterIndex, contentIndex) {
			console.log('onPlay', chapterIndex, contentIndex);
			// if (!this.checkLogin()) {
			// 	return;
			// }
			// console.log(that.state.chapter_list, 444);
			const content = this.state.chapter_list[chapterIndex].content_list[contentIndex];
			if (!content.trial_duration && !content.trial_view) {
				if (this.state.auth_state != 3) {
					this.$logic.showToast('还未开通');
					return;
				}
			}
			if (this.chapterIndex == chapterIndex && this.contentIndex == contentIndex) {
				if (content.type === 'rich') {
					uni.navigateTo({
						url: '/pages/course/rich?cid=' + content.id
					});
				}
				return;
			}
			if (this.$store.getters.isLock('wantToPlay')) {
				return;
			}
			this.$store.commit('lock', 'wantToPlay');
			setTimeout(() => {
				this.$store.commit('unlock', 'wantToPlay');
			}, 1000);
			this.chapterIndex = chapterIndex;
			this.contentIndex = contentIndex;
			if (this.$refs.audioPlayer) {
				this.$refs.audioPlayer.stop();
			}
			if (this.videoContext) {
				this.videoContext.stop();
			}
			this.playData = {
				type: 'loading'
			};
			if (content.type === 'rich') {
				this.playData = null;
				uni.navigateTo({
					url: '/pages/course/rich?cid=' + content.id
				});
				return;
			}
			this.$api.getContentDetail({}, function (res) {
				console.log(777, res);
				if (res.code == 1) {
					that.playData = res.data;
					that.playState.diffTime = res.data.server_time - getTimestamp();
					if (this.playData.type === 'video') {
						this.videoContext = uni.createVideoContext('videoPlayer');
						// setTimeout(() => {
						// 	this.videoContext.play()
						// }, 500)
					} else if (this.playData.type === 'audio') {
						console.log('audio load');
						// setTimeout(() => {
						// 	if (this.$refs.audioPlayer) {
						// 		this.$refs.audioPlayer.play()
						// 	}
						// }, 500)
					}
				}
			});

			// getContentDetail(content.id).then(([err, res]) => {
			// 	console.log('getContentDetail', err, res);
			// 	if (!err) {
			// 		this.playData = res;
			// 		this.playState.diffTime = res.server_time - getTimestamp();
			// 		if (this.playData.type === 'video') {
			// 			this.videoContext = uni.createVideoContext('videoPlayer');
			// 			// setTimeout(() => {
			// 			// 	this.videoContext.play()
			// 			// }, 500)
			// 		} else if (this.playData.type === 'audio') {
			// 			console.log('audio load');
			// 			// setTimeout(() => {
			// 			// 	if (this.$refs.audioPlayer) {
			// 			// 		this.$refs.audioPlayer.play()
			// 			// 	}
			// 			// }, 500)
			// 		}
			// 	}
			// });
		},
		watchPlayState() {
			console.log('watchPlayState', this.playState);
			this.playState.playTime = 0;
			this.playState.intervalTimer = setInterval(() => {
				// console.log('playTime', this.playState.playTime)
				if (this.playState.isPlaying) {
					this.playState.playTime++;
				} else {
					if (this.playState.playTime > 0) {
						console.log('upload playState end');
						this.uploadPlayState();
					}
				}
				if (this.playState.playTime >= 5) {
					console.log('upload playState ing');
					this.uploadPlayState();
				}
			}, 1000);
		},
		uploadPlayState() {
			console.log('uploadPlayState', this.playState);
			if (this.playData.id && !this.playData.trial_duration) {
				const syncTime = getTimestamp() + this.playState.diffTime;
				syncPlayState(this.courseId, this.playData.id, this.playState.currentTime, 0, this.playState.playTime, syncTime).then(([err, res]) => {
					console.log('syncPlayState', err, res);
					if (!err) {
						if (++this.playState.syncTimes % 5 == 0) {
							// 每5次同步刷新当前数据
							this.loadDetail();
						}
					}
				});
			}
			this.playState.playTime = 0;
		},
		onVideoPlay(e) {
			console.log('onVideoPlay', e);
			this.playState.isPlaying = 1;
		},
		onVideoPause(e) {
			console.log('onVideoPause', e);
			this.playState.isPlaying = 0;
		},
		onVideoEnded(e) {
			console.log('onVideoEnded', e);
			this.playState.isPlaying = 0;
		},
		onVideoTimeupdate(e) {
			console.log('onVideoTimeupdate', e);
			if (this.playData.trial_duration) {
				if (e.detail.currentTime >= this.playData.trial_duration) {
					console.log('this.videoContext', this.videoContext);
					// this.videoContext.stop()
					this.videoContext.pause();
					this.videoContext.seek(0);
					this.$logic.showToast('试播结束');
				}
			} else {
				this.playState.currentTime = e.detail.currentTime;
			}
		},
		onAudioPlay(e) {
			console.log('onAudioPlay', e);
			this.playState.isPlaying = 1;
		},
		onAudioPause(e) {
			console.log('onAudioPause', e);
			this.playState.isPlaying = 0;
		},
		onAudioEnded(e) {
			console.log('onAudioEnded', e);
			this.playState.isPlaying = 0;
		},
		onAudioTimeupdate(e) {
			// console.log('onAudioTimeupdate', e)
			if (this.playData.trial_duration) {
				if (e.currentTime >= this.playData.trial_duration) {
					setTimeout(() => {
						this.$refs.audioPlayer.stop();
					}, 200);
					this.$logic.showToast('试播结束');
				}
			} else {
				this.playState.currentTime = e.currentTime;
			}
		},
		onTeacherDetail() {
			uni.navigateTo({
				url: '/pages/teacher/detail?id=' + this.state.teacher_data.id
			});
		},
		onJumpHome() {
			uni.switchTab({
				url: '/pages/home/index'
			});
		},
		onHandleLike() {
			if (!this.checkLogin()) {
				return;
			}
			var action = this.state.is_like ? 'no' : 'yes';
			handleLike(this.courseId, action).then(([err, res]) => {
				console.log('handleLike', err, res);
				if (!err) {
					if (action === 'yes') {
						this.state.is_like = 1;
						this.state.count_like++;
					} else {
						this.state.is_like = 0;
						this.state.count_like--;
					}
					this.$logic.showToast('操作成功');
				}
			});
		},
		onCloseCart() {
			this.showCart = false;
		},
		// 加入购物车
		onAddCart() {
			// if (!this.checkLogin()) {
			// 	return;
			// }
			console.log(this.courseId, ' this.courseId this.courseId this.courseId');
			this.$api.addCart({ id: that.courseId }, function (res) {
				console.log('加入购物车', res);
				if (res.code == 1) {
					this.$store.commit('addCartItem', {
						goods_id: that.courseId,
						goods_type: 'course',
						goods_name: that.state.name,
						goods_cover: that.state.cover_url,
						goods_price: that.state.price
					});
					that.showCart = true;
					setTimeout(() => {
						that.showCart = false;
					}, 5000);
				}
			});
			// addCart('course', this.courseId).then(([err, res]) => {
			// 	console.log('addCart', err, res);
			// 	if (!err) {
			// 		this.$store.commit('addCartItem', {
			// 			goods_id: this.courseId,
			// 			goods_type: 'course',
			// 			goods_name: this.state.name,
			// 			goods_cover: this.state.cover_url,
			// 			goods_price: this.state.price
			// 		});
			// 		this.showCart = true;
			// 		setTimeout(() => {
			// 			this.showCart = false;
			// 		}, 5000);
			// 	}
			// });
		},
		onPreviewOrder() {
			// if (!this.checkLogin()) {
			// 	return;
			// }
			let goodsData = [
				{
					goods_type: 'course',
					goods_id: this.courseId
				}
			];
			uni.navigateTo({
				url: '/pages/order/preview?goods_data=' + JSON.stringify(goodsData)
			});
		},
		onStartLearn() {
			if (!this.checkLogin()) {
				return;
			}

			this.$api.startLearn({}, function (res) {
				console.log('333', res);
			});

			// startLearn(this.courseId).then(([err, res]) => {
			// 	console.log('startLearn', err, res);
			// 	if (!err) {
			// 		this.$logic.showToast('开通成功，可以开始学习了');
			// 		this.loadDetail();
			// 	}
			// });
		}
	}
};
</script>

<style>
page {
	padding-bottom: env(safe-area-inset-bottom);
	background: $pq-bg-color;
}

/* 隐藏header */
uni-page-head {
	display: block;
}

.wrap {
	padding-bottom: 150upx;
}

.b-photos {
	position: relative;
	width: 750upx;
	height: 500upx;
}

.b-photos swiper {
	height: 100%;
}

.b-photos .swiper-item {
	display: flex;
	justify-content: center;
	align-content: center;
	height: 320upx;
	overflow: hidden;
}

.b-photos .swiper-item image {
	width: 100%;
	height: 100%;
}

.b-photos .image-wrapper {
	width: 100%;
	height: 100%;
}

.b-player {
	width: 100%;
	height: 500upx;
}

.b-player.f-loading {
	display: flex;
	align-items: center;
	justify-content: center;
}

.b-player.f-loading .s-cont {
	font-size: 28upx;
	color: #666;
}

.b-player.f-video video {
	width: 100%;
	height: 500upx;
}

.b-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 2upx solid #eee;
}

.b-slide .b-item {
	flex: 1;
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	text-align: center;
}

.b-slide .b-item.f-active {
	height: 76upx;
	line-height: 80upx;
	font-weight: bold;
	border-bottom: 4upx solid #da5650;
}

.info {
	padding: 30upx;
	background: #fff;
}

.info .b-title {
	font-size: 30upx;
	color: #333;
}

.info .b-main {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info .b-main .b-price {
	display: flex;
	align-items: center;
}

.info .b-main .b-price .s-payment {
	margin-right: 20upx;
	font-size: 36upx;
	font-weight: bold;
	color: #dd524d;
}

.info .b-main .b-price .s-payment.f-small {
	font-size: 28upx;
}

.info .b-main .b-price .s-vip-price {
	margin-right: 20upx;
	font-size: 26upx;
	color: #f0ad4e;
}

.info .b-main .b-price .s-vip-free {
	margin-right: 20upx;
	padding: 6upx 10upx;
	font-size: 24upx;
	color: #555;
	background: #f0ad4e;
	border-radius: 5upx;
}

.info .b-main .b-opt {
	display: flex;
	align-items: center;
}

.info .b-main .b-opt .s-btn {
	margin-left: 20upx;
	font-size: 50upx;
}

.info .b-main .b-opt .s-btn.f-like .f-yes.iconfont {
	color: #da5650;
}

.info .b-main .b-opt .iconfont {
	font-size: 40upx;
	color: #999;
}

.info .b-info {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.info .b-info .s-worth {
	color: #999;
	font-size: 24upx;
}

.info .b-info .s-count {
	color: #999;
	font-size: 24upx;
	display: flex;
	align-items: center;
}

.info .b-info .s-count .s-gain {
	margin-left: 40upx;
}

.teacher {
	margin-top: 30upx;
	padding: 30upx;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.teacher .b-title {
	font-size: 28upx;
	font-weight: bold;
}

.teacher .b-teacher {
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.teacher .b-teacher .b-avatar {
	width: 100upx;
	height: 100upx;
}

.teacher .b-teacher .b-avatar image {
	width: 100upx;
	height: 100upx;
}

.teacher .b-teacher .b-main {
	margin-left: 20upx;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.teacher .b-teacher .b-main .s-name {
	font-size: 26upx;
	color: #333;
}

.teacher .b-teacher .b-main .s-info {
	margin-top: 20upx;
	font-size: 24upx;
	color: #666;
}

.teacher .b-teacher .b-more {
	display: flex;
	align-items: center;
	justify-content: center;
}

.teacher .b-teacher .b-more .iconfont {
	font-size: 40upx;
	color: #999;
}

.content {
	margin-top: 30upx;
}

.content .b-title {
	display: flex;
	align-items: center;
	justify-content: center;
}

.content .b-title .iconfont {
	color: #ccc;
}
.xiant {
	width: 60rpx;
	height: 3rpx;
	background-color: #dddedd;
}
.content .b-title .s-tit {
	margin: 0 20upx;
	font-size: 24upx;
	color: #666;
}

.content .b-rich {
	margin-top: 30upx;
	padding: 30upx 0;
	background: #fff;
	font-size: 28upx;
}

.content-list {
	padding: 30upx;
	background: #fff;
}

.content-list .chapter-item {
	margin-bottom: 30upx;
}

.content-list .chapter-item .chapter-info {
	height: 80upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.content-list .chapter-item .chapter-info .b-name {
	font-weight: bold;
}

.content-list .chapter-item .chapter-info .b-more {
	font-weight: 32upx;
	color: #666;
}

.content-list .chapter-item .chapter-content .content-item {
	height: 100upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2upx solid #eee;
}

.content-list .chapter-item .chapter-content .content-item.f-active {
	font-weight: bold;
}

.content-list .chapter-item .chapter-content .content-item .b-main {
	display: flex;
	align-items: center;
}

.content-list .chapter-item .chapter-content .content-item .b-main .s-name {
	font-size: 28upx;
	color: #666;
	max-width: 500upx;
	display: inline-block;
}

.content-list .chapter-item .chapter-content .content-item .b-main .s-time {
	margin-left: 20upx;
	font-size: 26upx;
	color: #666;
}

.content-list .chapter-item .chapter-content .content-item .b-play {
	display: flex;
	align-items: center;
}

.content-list .chapter-item .chapter-content .content-item .b-play .s-percent {
	margin-right: 20upx;
	font-size: 26upx;
	color: #666;
}

.content-list .chapter-item .chapter-content .content-item .b-play .s-state {
	margin-right: 20upx;
	font-size: 26upx;
	color: #da5650;
}

.content-list .chapter-item .chapter-content .content-item .b-play .s-play .iconfont {
	font-size: 60upx;
	color: #333;
}

.navbar {
	padding: 10upx 0;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar .b-main {
	margin-left: 30upx;
	flex: 1;
	display: flex;
	align-items: center;
}

.navbar .b-main .b-amount {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.navbar .b-main .b-amount .s-tit {
	margin-right: 10upx;
	font-size: 28upx;
	color: #333;
}

.navbar .b-main .b-amount .s-num {
	font-size: 40upx;
	color: #da5650;
}

.navbar .b-main .b-amount .s-num.f-small {
	font-size: 32upx;
}

.navbar .b-main .b-amount .s-vip-price {
	margin-left: 20upx;
	font-size: 28upx;
	font-weight: bold;
	color: #f0ad4e;
}

.navbar .b-main .b-amount .s-vip-free {
	margin-left: 20upx;
	padding: 6upx 10upx;
	font-size: 24upx;
	color: #555;
	background: #f0ad4e;
	border-radius: 5upx;
}

.navbar .b-action {
	margin-right: 30upx;
	width: 450upx;
	display: flex;
	align-items: center;
}

.navbar .b-action .b-btn {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	color: #fff;
	text-align: center;
	letter-spacing: 2upx;
}

.navbar .b-action .f-cart {
	flex: 1;
	background: #ec9c4e;
	font-size: 26upx;
	border-radius: 40upx 0 0 40upx;
}

.navbar .b-action .f-cart.f-disable {
	background: rgba(218, 86, 80, 0.8);
}

.navbar .b-action .f-order {
	flex: 1;
	background: #da5650;
	font-size: 26upx;
	border-radius: 0 40upx 40upx 0;
}

.navbar .b-action .f-order.f-disable {
	background: rgba(218, 86, 80, 0.8);
}

.navbar .b-action .f-learn {
	flex: 1;
	letter-spacing: 4upx;
	background: #da5650;
	border-radius: 40upx;
}

.navbar .b-action .f-mute {
	flex: 1;
	color: #666;
	font-size: 26upx;
	background: #eee;
	border-radius: 40upx;
}
</style>