saas_miniprogram/pages5/webview/index.vue

<template>
	<view class="webview">
		<template v-if="url">
			<web-view :webview-styles="webviewStyles" :src="url"></web-view>
		</template>

		<u-popup v-model="showAuth" mode="center" border-radius="30">
			<view class="popCentent">
				<view class="tips">您还没有开通直播课程，无法观看</view>
				<view class="btns" @click="toAuth()">立即开通</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		tenantId
	} from "@/common/request.js";
	export default {
		components: {},
		data() {
			return {
				url: "",
				webviewStyles: {
					progress: {
						color: "#007AFF",
					},
				},
				options: {},
				optObj: {},
				goodsId: 0,
				chapterId: 0,
				moduleId: 0,
				courseId: 0,
				sectionId: 0,
				orderGoodsId: 0,
				paramObj: {},
				showAuth: false,
				checkStatus: 0, // 0没有权限，1有权限
				goodsStatus: 0, // 0未上架，1上架
				sectionType: 2, // 2直播
				vid: "", // 回放id
			};
		},
		onLoad(option) {
			console.log("--option-", option);
			this.options = option;
		},
		async onShow() {
			// 刷新令牌
			if (this.options.user_account) {
				await this.doRequest();
			}
			if (this.$method.isGoLogin()) {
				// 扫二维码进来的没登录需要跳到登录页，登录后返回
				return;
			}
			// #ifdef H5
			if (this.options.scene) {
				this.options.scene = window.atob(this.options.scene);
			}
			// #endif

			if (this.options.scene) {
				this.optObj = {};
				let arrs = decodeURIComponent(this.options.scene).split("&");
				for (let i = 0; i < arrs.length; i++) {
					this.optObj[arrs[i].split("=")[0]] = arrs[i].split("=")[1];
				}
			}
			// 有a字段是标识是扫二维码进来的
			if (this.optObj.a == 1) {
				if (!this.userInfo) {
					this.getInfo();
				} else {
					this.getParam();
				}
			} else {
				// #ifdef H5
				window.location.href = decodeURIComponent(decodeURIComponent(this.options.url)) +
					"&tid=" +
					tenantId;
				// #endif
				this.url =
					decodeURIComponent(decodeURIComponent(this.options.url)) +
					"&tid=" +
					tenantId;
				console.log("小程序进来的url:", this.url);
				let index = this.url.indexOf("?");
				let paramArr = this.url.slice(index + 1).split("&");
				let paramObj = {};
				for (let i = 0; i < paramArr.length; i++) {
					paramObj[paramArr[i].split("=")[0]] = paramArr[i].split("=")[1];
				}
				this.paramObj = paramObj;
				this.sectionType = this.paramObj.sectionType || 2; // 默认直播，回放的加了sectionType=3
				this.vid = this.paramObj.vid || "";
				this.studyLog(paramObj);
			}
		},
		computed: {
			...mapGetters(["userInfo", "other"]),
		},
		methods: {
			async doRequest() {
				const res = await this.$http({
					url: "/app/common/automatic/account_login",
					method: "post",
					noToken: true,
					data: {
						userAccount: this.options.user_account,
					},
				});
				if (res.data.code === 200) {
					uni.setStorageSync("token", res.data.data.token);
					uni.setStorageSync("user_account", this.options.user_account);
					this.$store.state.userInfo = null;
					return Promise.resolve();
				} else {
					return Promise.reject("请求错误");
				}
			},
			getInfo() {
				// /app/user/getInfo 登录用户信息 // fromPlat来源平台 1小程序 2PC网站
				this.$api.getInfo({
					fromPlat: 1
				}).then((res) => {
					if (res.data.code == 200) {
						this.$store.state.userInfo = res.data.data;
						this.getParam();
					}
				});
			},
			// 获取直播间跳转参数的接口
			getParam() {
				const {
					cid,
					gid,
					sid
				} = this.optObj;
				this.$http({
					url: "/course/check/watch/per",
					method: "get",
					data: {
						courseId: cid, //课程ID
						goodsId: gid, // 商品id
						sectionId: sid, // 节id
					},
				}).then((res) => {
					if (res.data.code == 200) {
						let item = res.data.data;
						let newTime = parseInt(new Date().getTime() / 1000)
						if (item.liveStartTime > newTime) {
							//未开始
							uni.showModal({
								title: "提示",
								content: "当前直播未开始",
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.reLaunch({
											url: "/pages/index/index"
										})
									}
								}
							})
							return
						} else if ((item.liveEndTime + 10800) < newTime) {
							//已结束
							uni.showModal({
								title: "提示",
								content: "当前直播已结束",
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.reLaunch({
											url: "/pages/index/index"
										})
									}
								}
							})
							return
						}
						this.paramObj = item;
						this.goodsId = item.goodsId;
						this.goodsStatus = item.goodsStatus;
						this.sectionType = item.sectionType;
						this.vid = item.recordingUrl || "";
						if (item.checkStatus == 1) {
							// 有权限
							let moduleId = item.moduleId || 0;
							let chapterId = item.chapterId || 0;
							let sectionId = item.sectionId;

							let uuid = new Date().valueOf() + "";
							// buyCourse 是否购买课程：1是 0否
							this.url =
								this.other.hostLive +
								"/pages/live/index?token=" +
								uni.getStorageSync("token") +
								"&userInfo=" +
								JSON.stringify(this.userInfo) +
								"&channelId=" +
								item.channelId +
								"&gradeId=" +
								0 +
								"&courseId=" +
								item.courseId +
								"&goodsId=" +
								item.goodsId +
								"&orderGoodsId=" +
								item.orderGoodsId +
								"&sectionId=" +
								sectionId +
								"&chapterId=" +
								chapterId +
								"&moduleId=" +
								moduleId +
								"&buyCourse=" +
								item.buyCourse +
								"&ident=" +
								uuid +
								"&sectionType=" +
								this.sectionType +
								"&vid=" +
								this.vid +
								"&tid=" +
								tenantId;
							this.studyLog(item);
						} else {
							// 没有权限
							this.url = "";
							this.showAuth = true;
						}
					} else {
						this.$u.toast(res.data.msg);
						uni.switchTab({
							url: "/pages/index/index",
						});
					}
				});
			},
			// 新增用户视频学习日志
			studyLog(item) {
				this.$http({
					url: "/user/study/log",
					method: "post",
					data: {
						goodsId: item.goodsId,
						courseId: item.courseId,
						moduleId: item.moduleId || 0,
						chapterId: item.chapterId || 0,
						sectionId: item.sectionId || 0,
						fromPlat: 1, //来源平台 1小程序 2PC网站
						goodsType: 6, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
						orderGoodsId: item.orderGoodsId,
					},
				}).then((res) => {
					console.log("直播的用户学习日志:", res);
				});
			},
			toAuth() {
				if (this.goodsStatus == 1) {
					//已上架
					uni.navigateTo({
						url: "/pages3/course/detail?id=" + this.goodsId + "&goodsType=6",
					});
				} else {
					uni.switchTab({
						url: "/pages/index/index",
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popCentent {
		width: 600rpx;
		height: 300rpx;
		padding: 24rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.btns {
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #3577e8;
			color: #fff;
			font-size: 24rpx;
			border-radius: 20rpx;
		}
	}
</style>