WenWuGuanJia/pages/course/rich.vue

<template>
	<view class="wrap">
		<view class="main" v-if="richData">
			<view class="b-head">
				<view class="b-title">{{ richData.name }}</view>
				<view class="b-info">
					<view class="s-time">{{ richData.course_name }}</view>
					<view class="s-views">
						<view class="iconfont icon-eye-fill"></view>
						<view class="s-cont">{{ richData.count_load }}</view>
					</view>
				</view>
			</view>
			<view class="b-rich">
				<rich-text :nodes="contentRich"></rich-text>
			</view>
			<view class="b-from" v-if="richData.from || richData.author">
				<view class="s-from" v-if="richData.from">来源: {{ richData.from }}</view>
				<view class="s-author" v-if="richData.author">作者: {{ richData.author }}</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
		<view class="read-state" :class="{ 'f-full': playState.totalPlayTime >= 3600 }">
			<view class="s-tit">阅读时长:</view>
			<view class="s-time">{{ readTime }}</view>
		</view>
	</view>
</template>

<script>
import { syncPlayState, getContentDetail } from '@/service/api/course.js';
import { getTimestamp } from '@/common/util.js';
import mixinsCommon from '@/mixins/common.js';
import { formatRichText } from '@/common/util.js';
export default {
	mixins: [mixinsCommon],
	data() {
		return {
			richData: null,
			playState: {
				intervalTimer: 0,
				diffTime: 0,
				currentOffset: 0,
				playTime: 0,
				totalPlayTime: 0
			},
			loadingType: 1,
			loadingText: ''
		};
	},
	computed: {
		contentRich() {
			if (!this.richData) {
				return '';
			}
			return formatRichText(this.richData.content);
		},
		readTime() {
			const second = this.playState.totalPlayTime;
			let timeStr = '';

			// 转换为时
			let h = parseInt((second / 60 / 60) % 24);
			if (h > 0) {
				h = h < 10 ? '0' + h : h;
				timeStr += h + ':';
			}
			// 转换为分
			let m = parseInt((second / 60) % 60);
			m = m < 10 ? '0' + m : m;
			timeStr += m + ':';

			// 转换成秒
			let s = parseInt(second % 60);
			s = s < 10 ? '0' + s : s;
			timeStr += s;

			return timeStr;
		}
	},
	onLoad(options) {
		this.contentId = 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;
		}
	},
	methods: {
		loadDetail() {
			getContentDetail(this.contentId).then(([err, res]) => {
				console.log('getContentDetail', err, res);
				if (!err) {
					this.loadingType = -1;
					this.richData = res;
					this.playState.diffTime = res.server_time - getTimestamp();
					uni.setNavigationBarTitle({
						title: res.name
					});
					if (res.learn_data) {
						this.playState.totalPlayTime = res.learn_data.total_play_time;
						if (res.learn_data.current_offset > 0) {
							setTimeout(() => {
								uni.pageScrollTo({
									scrollTop: res.learn_data.current_offset
								});
							}, 500);
						}
					}
				} else {
					this.loadingType = 3;
					this.loadingText = err.data.msg || '加载失败';
				}
			});
		},
		watchPlayState() {
			console.log('watchPlayState', this.playState);
			this.playState.playTime = 0;
			this.playState.intervalTimer = setInterval(() => {
				// console.log('playTime', this.playState.playTime)
				this.playState.playTime++;
				this.playState.totalPlayTime++;
				if (this.playState.playTime >= 5) {
					console.log('upload playState ing');
					this.uploadPlayState();
				}
			}, 1000);
		},
		uploadPlayState() {
			console.log('uploadPlayState', this.playState);
			if (this.richData && !this.richData.trial_view) {
				const syncTime = getTimestamp() + this.playState.diffTime;
				syncPlayState(this.richData.course_id, this.richData.id, 0, this.playState.currentOffset, this.playState.playTime, syncTime).then(([err, res]) => {
					console.log('syncPlayState', err, res);
				});
			}
			this.playState.playTime = 0;
		}
	},
	onPageScroll(e) {
		this.playState.currentOffset = e.scrollTop;
	}
};
</script>

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

.wrap {
	background: #fff;
}

.main {
	padding: 20upx;
}

.b-head {
	margin-top: 20upx;

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

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

		.s-time {
			font-size: 26upx;
			color: #999;
		}

		.s-views {
			display: flex;
			align-items: center;

			.iconfont {
				margin-right: 10upx;
				font-size: 30upx;
				color: #eee;
			}

			.s-cont {
				font-size: 26upx;
				color: #999;
			}
		}
	}
}

.b-rich {
	margin-top: 50upx;
	background: #fff;
	font-size: 28upx;
	min-height: 500upx;
}

.b-from {
	margin-top: 20upx;
	display: flex;
	justify-content: space-between;
	font-size: 24upx;
	color: #999;
}

.read-state {
	position: fixed;
	padding: 0 20upx;
	right: 20upx;
	bottom: 20upx;
	background: rgba(0, 0, 0, 0.5);
	width: 215upx;
	height: 60upx;
	border-radius: 10upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;

	&.f-full {
		width: 210upx;
	}

	.s-tit {
		font-size: 24upx;
	}

	.s-time {
		font-size: 24upx;
	}
}
</style>