<template>
	<view class="container">

		<!-- 禁用弹窗 -->
		<restrictedTip ref="restrictedTip" />
		<view v-if="!mpCffp">
			<view class="shareheader" style="" v-if="coursesharing != 1 || deviceType==3">
				<!-- #ifdef APP -->
				<view class="iconfont icon-youjiantou" style="margin-left: 30rpx;" @click="goBack()"></view>
				<!-- #endif -->


				<view class="share-entrance">
					<view style="z-index: 99999;">
						<uni-popup ref="share" type="top" safeArea backgroundColor="#F4F2F3" :maskClick='true'
							@change="maskClick">
							<uni-popup-share @select="sharechange"></uni-popup-share>
						</uni-popup>
					</view>


					<!-- v-if="isWxH5" -->
					<view v-if="isWxH5" style="width: 40rpx;height: 40rpx;padding-right: 20rpx;">
						<image class="image" @click="reinvite" src="../../static/fastentry/Slice122.png" mode="">
						</image>
					</view>
					<view class="" style="width: 40rpx;height: 40rpx; ">
						<image class="image" @click="shareToggle" src="../../static/fastentry/Slice12.png" mode="">
						</image>
					</view>


				</view>
			</view>
		</view>

		<!-- 课程banner图 -->
		<!-- v-show="!sliceshare" -->
		<view class="courseBannerBox" v-if="!sliceshare && bannerViewType == '1'">
			<video v-if="isRenderVideo" id="myVideo" :src="courseInfo.filePathOss" :initial-time="viewTime"
				object-fit="contain" class="videoBox" :poster="courseInfo.fileFirstImage" :title="courseInfo.fileTitle"
				@play="playVideo" @pause="pause" @timeupdate="timeupdate"
				style="width: 100vw;height: 312.5rpx;"></video>
		</view>
		<view class="swiperBox" v-if="bannerViewType == '2'">
			<uni-swiper-dot :dots-styles="{
				  backgroundColor: 'rgba(145, 151, 201, .5)',
				    selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
				    bottom:100,
				    selectedBorder: '10rpx rgba(255, 255, 255, 1) solid',
				    width:8
				  }" :info="swiperList" :current="current" mode="default">
				<swiper autoplay :indicator-dots="true" :interval="3000" circular class="swiper-box"
					@change="changeSwiper">
					<swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-item-no-gap">
						<view class="swiper-item">
							<image style="height: 100%;width: 100%;display: block;" :src="item['filePath']"
								mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 课程详情图 -->
		<view class="courseTitleContent">
			<view class="courseTitle">
				<view class="" style="width: 100%;">
					<h4>{{courseInfo.fileTitle}}</h4>
					<view>{{courseInfo.fileSynopsis}}</view>
				</view>

			</view>
			<view class="dataBox">
				<strong
					v-if="(courseInfo.status==1 || courseInfo.status==2 )&& courseInfo.coursePrice !== 0">￥{{Number(courseInfo.coursePrice).toFixed(2)}}</strong>

				<text v-if="courseInfo.coursePrice != 0">{{courseInfo.salesNumber}}人{{showName}}</text>

			</view>

		</view>
		<!-- 课程介绍，相关课程，讲师 -->
		<view class="courseProBox">
			<!-- tab区域 -->
			<!-- <view class="tab">
				<text :class="{'actived': tabType===1}" @click="switchTab(1)">详情</text>
				<text :class="{'actived': tabType===3}" @click="switchTab(3)">讲师</text>
			</view> -->
			<!-- tabContent区域 -->
			<view class="tabContent">
				<!-- 课程介绍 -->
				<view class="courseIntroContent" v-if="tabType===1" style="margin-top: 20rpx;">
					<view v-html="courseInfo.fileIntroduce" class="richTextContent"></view>
				</view>
				<!-- 服务流程 -->
				<view class="courseIntroContent" v-if="tabType===4" style="margin-top: 20rpx;">
					<image :src="courseInfo.serviceContent" mode="widthFix"></image>
				</view>
				<!-- 相关课程列表 -->
				<view class="relationCourseListsContent" v-show="tabType===2">
					<view class="totalCourseCount">
						<text v-if="requiredCount">{{requiredCount}}节必修</text>
						<text v-if="nonRequiredCount"> + {{nonRequiredCount}}节必修</text>
					</view>
					<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
						<view class="courseInfoContent">
							<h4>{{index + 1}}.{{item.fileTitle}}<text
									class="courseType">{{item.fileType=='1' ? '必修' : '选修'}}</text></h4>
							<view class="timeContent">
								<view class="">
									{{secondsTransferPipe(Number(item.maxViewTime))}}/{{secondsTransferPipe(Number(item.courseTotalTime))}}
								</view>
							</view>
						</view>
						<view class="statusBtnContent" @click="play(item)">
							<i class="iconfont icon-24gf-playCircle"
								:style="{'opacity':courseInfo.status == 1 ? '0.5' : '1'}"></i>
							<text>{{courseInfo.status == 1 ? '不可播放' : '播放'}}</text>
						</view>
					</view>
				</view>
				<!-- 讲师介绍 -->
				<view class="lecturerContent" v-if="tabType===3">
					<view class="lecturerIntro">
						<view class="lecturerUrl">
							<image :src="lecturerInfo.lecturerUrl" mode="widthFix"></image>
						</view>
						<view>
							<p><text class="lecturerName">{{lecturerInfo.lecturerName}}</text></p>
							<template v-if="lecturerInfo?.lecturerRankNames">
								<p v-for="(item,index) in lecturerInfo.lecturerRankNames.split(',')" :key="index"
									class="lecturerTitle">
									<text>{{item}}</text>
								</p>
							</template>
						</view>
					</view>
					<h4>
						<text>讲师介绍</text>
					</h4>
					<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
				</view>
				<view v-if="!mpCffp">
					<view class="buyBox" @click="saveOrder()"
						v-if="(courseInfo.status == 1 || courseInfo.status == 2) && courseInfo.coursePrice != 0">
						<text>{{showName}}</text>
					</view>
				</view>
				<view v-if="mpCffp" class="shareBuyBox">
					<view class="rightShare" @click="reinvite">
						<loadingIcon :loading="isLoading" v-if="isLoading" loadColor="#20269B" />
						<text style="margin-left: 5rpx;">分享</text>
					</view>
					<view class="leftBuy" @click="saveOrder()"
						v-if="(courseInfo.status == 1 || courseInfo.status == 2) && courseInfo.coursePrice != 0">
						<loadingIcon :loading="isOrderLoading" v-if="isOrderLoading" />
						<text style="margin-left: 5rpx;">{{showName}}</text>
					</view>

				</view>

			</view>
		</view>
		<boot-page loginSource="产品详情" v-if="sharelogin" :wayType="wayType" ref="sharelogin" @close="close"></boot-page>
		<uni-share-wx ref="sharewx"></uni-share-wx>
		<!-- <view class="markBox" @click="shareTipsFlag=false" v-if="shareTipsFlag">
			<view class="guideImgBox">
				<image src="../../static/Group132.png" mode="widthFix"></image>
				<view class="tips">
					<view style="margin-bottom:30rpx">请点击右上角菜单</view>
					<view>分享给朋友</view>
				</view>
			</view>
		</view> -->
		<!-- 分享得向导图 -->
		<ShareGuide :show.sync="shareTipsFlag" @close="shareTipsFlag=false"></ShareGuide>

		<login-popup ref="loginPopupCom" @confirm="c_confirmLoginPopup" @canle="canleLogin"></login-popup>
		<verify-popup ref="verifyPopupCom" title="温馨提示" content="请问您确认预约本课程吗？" @confirm="c_confirmVerifyPopup"
			@canle="canleVerify">
		</verify-popup>
		<uni-popup ref="subscribeSuccessPopup" :mask-click="false">
			<view class="loginPopupBox"
				style="text-align: center;width: 630rpx;padding-top: 35rpx;letter-spacing: 1rpx;">
				<view
					style="display: flex;align-items: center;;justify-content: center;font-size: 32rpx;font-weight: bold;color: #20269B;margin:40rpx 0 60rpx 0;">
					<view style="width: 6%;margin-right: 10rpx;margin-bottom: -10rpx;">
						<image src="../../static/images/correct.png" mode="widthFix"></image>
					</view>
					<view>
						恭喜您预约成功！
					</view>
				</view>
				<view style="text-align: left;padding:0 10rpx 10rpx 10rpx;font-size: 24rpx;color: #7a7a7a;">
					{{successMessage}}
				</view>
				<view style="margin-top: 10rpx;">
					<view @click="c_closeSubscribeSuccessPopup"><button class="popup_replenish_button2"
							size="mini">关闭</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<partner-tip-popup ref="partnerTipPopup" @join="gotoJoinPartner" @continue="continueShare" />
		<!-- 海报弹窗 -->
		<sharePosterPop ref="sharePosterPop" :generatedImage="generatedImage" @closePoster="closePoster"
			:shareTxt="posterShareTxt" :imgType="posterImgType"></sharePosterPop>
		<!-- #ifdef H5 -->
		<view class="generateImageBox" ref="captureElement" v-if="!generatedImage">
			<view class="imgBox">
				<img v-if="showImg" class="posterImg" @load="handleBgImageLoad" @error="handleBgImageError"
					style="display: block;" :src="shareItem.fileFirstImage+'?t='+Math.random()" crossorigin="anonymous"
					alt="防缓存图片" />
			</view>
			<view class="txtBox">
				<view class="descriptionTxt">
					{{shareItem.fileSynopsis}}
				</view>
				<view class="productNum">
					￥{{shareItem.coursePrice}}
				</view>
				<view class="generateImageBottom">
					<view class="left">
						<view class="top">
							<view style="width: 100rpx;">
								<image :src="companyLogo" mode="widthFix"></image>
							</view>

							<view class="companyName">银盾家办</view>
						</view>
						<view class="bottom">
							{{posterDesTxt}}
						</view>
					</view>
					<!-- 二维码容器 -->
					<view class="qrcode-container">
						<canvas canvas-id="qrcode" class="qrcode-canvas"
							:style="{width: qrCodeSize + 'px', height: qrCodeSize + 'px'}"></canvas>
					</view>
				</view>
			</view>

		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import restrictedTip from '@/components/commonPopup/restrictedTip.vue';
	import PartnerTipPopup from "@/components/commonPopup/PartnerTipPopup.vue";
	import api from "../../api/api";
	import BootPage from "@/components/bootpage/bootpage.vue";
	import LoginPopup from "@/components/unipopup/loginPopup.vue";
	import VerifyPopup from "@/components/unipopup/verifyPopup.vue";
	import UniShareWx from "@/uni_modules/uni-share-wx/index.vue";
	import dataHandling from "@/util/dataHandling";
	import { hshare, setWechatShare, initJssdkShare } from '@/util/fiveshare';
	import { nanoid } from 'nanoid';
	import common from '../../common/common';
	import { baseURL, apiURL, cffpURL, companyInfo, shareURL } from "@/environments/environment";
	import sharePosterPop from '@/components/commonPopup/sharePosterPop.vue';
	import UQRCode from 'uqrcodejs';
	import { elementToImage } from '@/util/htmlToImage';
	import loadingIcon from '@/components/loading/loading.vue';
	import ShareGuide from '@/components/ShareGuide/ShareGuide.vue';
	import wx from 'weixin-js-sdk'
	export default {
		components: {
			UniShareWx,
			BootPage,
			LoginPopup,
			VerifyPopup,
			PartnerTipPopup,
			restrictedTip,
			sharePosterPop,
			loadingIcon,
			ShareGuide
		},
		data() {
			return {
				pollingTimer: null, // 轮询定时器
				miniShareInfo: {}, //通过小程序分享出去的信息
				sharePosterObj: {},
				userInfo: {},
				wayType: '1', //登陆的类型
				partnerType: '', //是否是合伙人
				addSystemType: '', //因为会从其他公众号跳转过来所以接受一下公众号的类型
				systemType: companyInfo.systemType,
				showName: '购买',
				successMessage: '',
				show: false,
				isWxH5: false,
				bannerViewType: '1',
				swiperList: [],
				current: 0,
				isWeixin: false,
				isRenderVideo: false,
				fileId: null,
				lecturerId: null,
				tabType: 3,
				lecturerInfo: {},
				courseInfo: {},
				relatedCoursesLists: [],
				orderId: '',
				userId: uni.getStorageSync('cffp_userId'),
				shareUserId: '',
				shareReadId: '',
				dataSource: '1',
				requiredCount: 0,
				nonRequiredCount: 0,
				videoPlaybackInfo: {},
				playbackId: '',
				totalTime: 0,
				auditionTime: 0,
				viewTime: 0,
				timer: null,
				loginType: '',
				sliceshare: false,
				realName: '',
				coursesharing: null,
				serialsNo: null,
				shareCode: null,
				sharelogin: false,
				startTime: '',
				newCourseInfo: {},
				isPauseFlag: true,
				CONFIG: {
					android: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.xiaoxiao.shihaoo',
					ios: 'https://apps.apple.com/cn/app/%E6%98%AF%E5%A5%BD/id1457958161',
					scheme: 'com.qdxxzy.user://'
				},
				deviceType: null,
				shareTipsFlag: false,
				src: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				qrCodeUrl: 'https://example.com', //二维码的链接地址
				qrCodeSize: 100, //二维码的尺寸
				companyLogo: '../../static/suplogo.png',
				generatedImage: '', //生成的海报图片,
				shareItem: { fileFirstImage: '' },
				showImg: false,
				mpCffp: '',
				isLoading: false,
				posterDesTxt: '',
				isOrderLoading: false,
				posterShareTxt: '长按图片分享给朋友',
				orderCodeUrl: '',
				posterImgType: 'sharePoster'
			};
		},
		methods: {
			gotoJoinPartner() {
				dataHandling.pocessTracking(
					'加盟',
					`用户在产品详情未加盟时点击了加盟按钮`,
					'点击',
					2,
					'产品详情',
					'pages/courseDetail/courseDetail'
				)
				uni.navigateTo({
					url: '/myPackageA/applyFranchise/applyFranchise'
				})
				this.$refs.partnerTipPopup.close()
			},
			// 打开微信分享啊
			reinvite() {
				//小程序没登录进入到系统，要回到小程序去登录
				if (uni.getStorageSync('mpCffp') && !uni.getStorageSync('dataToken')) {
					this.jumpMplogin()
					return
				}
				// 未登录去登录
				if (!uni.getStorageSync('loginType') || uni.getStorageSync('loginType') == 'visitor') {
					dataHandling.pocessTracking(
						'分享',
						`用户在产品详情未登录时点击产品分享按钮`,
						'点击',
						2,
						'产品详情',
						'pages/courseDetail/courseDetail'
					)
					this.sharelogin = true,
						this.wayType = '2'
					return
				}
				// 已登录，未成为合伙人
				if (this.userInfo && !this.userInfo['partnerType']) {
					dataHandling.pocessTracking(
						'分享',
						`用户在产品详情未加盟时点击产品分享按钮`,
						'点击',
						2,
						'产品详情',
						'pages/courseDetail/courseDetail'
					)
					this.$refs.partnerTipPopup.open()
					return
				}
				this.continueShare()
			},
			continueShare() {
				this.userId = uni.getStorageSync('cffp_userId')
				const shareCode = nanoid() + this.userId
				const jumptime = Date.parse(new Date()) / 1000

				// if(this.mpCffp){
				// 	if(uni.getStorageSync('posterItem')){
				// 		this.shareItem = JSON.parse(JSON.stringify(uni.getStorageSync('posterItem')))
				// 	}
				// 	this.posterShareTxt = '长按图片分享给朋友'
				// 	this.posterDesTxt = '识别二维码查看商品'
				// 	let newLink = shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.fileId +
				// 		'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
				// 		this.userId + '&jumpUrl=' + jumptime +  "&"

				// 	this.qrCodeUrl = newLink
				// 	this.showImg = true
				// 	this.isLoading = true
				// 	this.submitsuessc(shareCode,jumptime),
				// 	this.posterImgType = 'sharePoster'
				// 	return
				// }
				//app分享
				// #ifdef APP-PLUS
				let dataWXform = {
					href: shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&",
					title: this.courseInfo.fileTitle,
					// summary: `加入我们开启学习之旅`,
					summary: this.courseInfo.fileSynopsis,
					imageUrl: this.courseInfo.displayImage,
					fileId: this.fileId,
					shareCode: shareCode
				}
				this.$refs.sharewx.open(dataWXform)
				dataHandling.pocessTracking(
					'分享',
					`用户在产品详情点击分享按钮，分享${this.courseInfo.fileTitle}`,
					'点击',
					2,
					'产品详情',
					'pages/courseDetail/courseDetail'
				)
				// #endif

				//#ifdef H5
				this.shareTipsFlag = true;
				if (dataHandling.h5RuntimeEnv() == 'wechat-miniprogram') {
					let shareInfo = {
						title: this.courseInfo.fileTitle,
						// desc: '加入我们开启学习之旅',
						desc: this.courseInfo.fileSynopsis,
						link: `${shareURL}/pages/lanch/index?fileId=${this.fileId}&coursesharing=1&serialsNo=${nanoid()}&shareCode=${shareCode}&shareUserId=${this.userId}&jumpUrl=${jumptime}&landingPage=courseDetail&miniShare=1`,
						imgUrl: this.courseInfo.displayImage, //图片
						sharePage: 'courseDetail', //分享的哪个页面
						commonId: shareCode,
						userId: this.userId,
						fileId: this.fileId,
						shareCode: shareCode,
						isSaveShare: '1', //是否存贮分享便于统计分享数据
					}
					wx.miniProgram.postMessage({
						data: {
							type: 'share',
							shareData: JSON.stringify(shareInfo)
						}

					})
					return
				}
				this.getshareData2(shareCode, jumptime)

				// #endif
				this.$refs.partnerTipPopup.close()
				this.wayType = '1'
			},
			canleLogin() {
				this.show = false;
			},
			canleVerify() {
				this.show = false;
			},
			//关闭预约成功弹窗
			c_closeSubscribeSuccessPopup() {
				this.show = false;
				this.$refs.subscribeSuccessPopup.close();
			},
			//预约成功组件点击确认后的回调函数
			c_confirmVerifyPopup() {
				api.appointment({
					userId: uni.getStorageSync('cffp_userId'),
					courseId: this.fileId
				}).then((res) => {
					if (res['success']) {
						this.$refs.verifyPopupCom.canle();
						this.show = true;
						this.successMessage = res['message'];
						this.$refs.subscribeSuccessPopup.open();

					} else {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			// 登录组件成功后回调函数
			c_confirmLoginPopup() {
				//登录完成之后 弹出预约弹窗
				this.$refs.verifyPopupCom.open();
			},
			//关闭登录
			close(val, loginTypeSync, type) {
				// 直接点击了关闭登录的叉号
				if (type) {
					this.sharelogin = false
					return
				}
				if (val) {
					this.sharelogin = false
					this.userId = val;
					this.loginType = loginTypeSync;
					uni.setStorageSync('cffp_userId', this.userId);
					this.courseDetail();
					if (JSON.parse(uni.getStorageSync('cffp_userInfo'))) {
						this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
					}

					if (this.wayType == '2' && !this.userInfo['partnerType']) {
						this.$refs.partnerTipPopup.open()
						return
					}
					if (this.wayType == '2' && this.userInfo['partnerType']) {
						this.continueShare()
						return
					}
					if (loginTypeSync == 'codelogin' && this.wayType == '1') {
						setTimeout(() => {
							if (this.courseInfo.status == 1) {
								this.jumppurchase();
							}
						}, 500)
					} else {
						this.startTime = Date.parse(new Date()) / 1000;
						uni.setStorageSync('h5_startTime', this.startTime)
						setTimeout(() => {
							this.getuserRead(this.courseInfo.status)
						}, 500)
					}
				} else {
					this.sharelogin = false
					this.wayType = '1'
				}

			},
			isWx_Miniprogram() {
				// 判断是否在微信内

				// #ifdef APP-PLUS
				this.isWxH5 = true;
				// #endif
				// #ifndef APP-PLUS
				if (this.isWeiXin()) {
					this.isWxH5 = true;
				} else {
					this.isWxH5 = false;
				}
				// #endif
			},
			/**
			 * 判断是否为微信浏览器
			 * 兼容ios
			 * */
			isWeiXin() {
				return /micromessenger/i.test(navigator.userAgent.toLowerCase()) || typeof navigator.wxuserAgent !==
					'undefined'
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 监听空白关闭
			maskClick(val) {
				this.sliceshare = val.show
			},

			shareToggle() {
				this.sliceshare = true
				this.$refs.share.open()
			},
			sharechange(val) {
				if (val.tabbar) {
					uni.switchTab({
						url: val.link
					})
					return
				} else {
					uni.navigateTo({
						url: val.link
					})
				}
			},
			// 订单保存
			saveOrder() {
				//小程序没登录进入到系统，要回到小程序去登录
				if (uni.getStorageSync('mpCffp') && !uni.getStorageSync('dataToken')) {
					this.jumpMplogin()
					return
				}
				this.loginType = uni.getStorageSync('loginType');
				if (this.loginType === 'visitor') {
					this.wayType = '1'
					if (this.systemType == 'IOS') {
						this.$refs.loginPopupCom.open();
						this.show = true;
					} else {
						this.sharelogin = true;
					}
				} else {
					if (this.coursesharing == '1') {
						this.h5jump()
					} else {
						if (this.systemType == 'IOS') {
							this.$refs.verifyPopupCom.open();
							this.show = true;
						} else {
							this.jumppurchase();
						}
					}
				}
			},
			h5jump() {
				let h5userId = uni.getStorageSync('cffp_userId');
				if (h5userId) {
					if (this.systemType == 'IOS') {
						this.show = true;
						this.$refs.verifyPopupCom.open();
					} else {
						this.jumppurchase();
					}
				} else {
					if (this.systemType == 'IOS') {
						this.show = true;
						this.$refs.loginPopupCom.open();
					} else {
						this.sharelogin = true;
					}
				}
			},
			jumppurchase() {
				if (uni.getStorageSync('cffp_userInfo')) {
					this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
				}
				// 登录并且是禁用状态
				if (this.userInfo.userIsActive == 2) {
					this.$refs.restrictedTip.open()
					return
				}

				let orderPlatform = ''
				// 不同得公司主题不同得购买平台
				// #ifdef APP
				if (companyInfo.companyType == '1') {
					orderPlatform = 'JS-FX-APP'
				}
				if (companyInfo.companyType == '2') {
					orderPlatform = 'YDFO-FX-APP'
				}
				// #endif
				// #ifdef H5
				if (companyInfo.companyType == '1') {
					orderPlatform = 'JS-FX-H5'
				}
				if (companyInfo.companyType == '2') {
					orderPlatform = 'YDFO-FX-H5'
				}
				// #endif
				// #ifdef MP-WEIXIN
				if (companyInfo.companyType == '1') {
					orderPlatform = 'JS-FX-MP'
				}
				if (companyInfo.companyType == '2') {
					orderPlatform = 'YDFO-FX-MP'
				}
				// #endif
				const param = {
					orderPlatform,
					productType: '1',
					productId: this.courseInfo.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					shareUserId: this.shareUserId,
					shareReadId: this.shareReadId,
					shareCode: this.shareCode,
					dataSource: this.coursesharing == 1 ? '2' : this.dataSource
				}
				api.saveOrder(param).then(res => {
					if (res['success']) {
						this.orderId = res['data']['id'];
						if (this.coursesharing == '1') {
							this.userId = uni.getStorageSync('cffp_userId')
						}
						dataHandling.pocessTracking(
							'购买',
							`用户在产品中心点击购买按钮，购买${this.courseInfo.fileTitle}`,
							'点击',
							2,
							'产品详情',
							'pages/courseDetail/courseDetail'
						)

						// 如果是商城跳转到cffp得购买直接弹出海报框

						// if(this.mpCffp){
						// 	// if(uni.getStorageSync('posterItem')){
						// 	// 	this.shareItem = JSON.parse(JSON.stringify(uni.getStorageSync('posterItem')))
						// 	// }

						// 	// 因为是从家办商城小程序跳转到cffp的，所以这里购买要带家办商城的token，
						// 	let dataToken = uni.getStorageSync('dataToken')
						// 	console.log('家办商城dataToken',dataToken);
						// 	this.posterShareTxt = '保存图片扫码下单'
						// 	this.posterDesTxt = '扫码下单'
						// 	let newLink = shareURL + `/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}&userId=${this.userId}&dataToken=${encodeURIComponent(dataToken)}`
						// 	// let newLink = shareURL + `/pages/lanch/index?fileId=${this.fileId}&orderId=${this.orderId}&userId=${this.userId}&dataToken=${encodeURIComponent(dataToken)}&landingPage=orderConfirm`
						// 	console.log('newLink',newLink);
						// 	this.qrCodeUrl = newLink
						// 	this.showImg = true
						// 	this.isOrderLoading = true,
						// 	this.posterImgType = 'orderPoster'
						// 	return
						// }
						uni.navigateTo({
							url: `/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}&userId=${this.userId}`
						})
					} else {
						uni.showToast({
							title: res['message'],
							duration: 2000
						});
						return;
					}
				})
			},
			// 切换tab
			switchTab(type) {
				this.tabType = type;
				if (type === 3) {
					//this.lecturerQuery();
				} else if (type == 2) {
					//this.relatedCoursesList()
				} else if (type === 1) {
					//this.courseDetail();
				} else {
					//this.courseDetail();
				}
			},
			// 讲师信息查询
			lecturerQuery() {
				api.lecturerQuery({
					id: this.lecturerId
				}).then(res => {
					if (res['success']) {
						this.lecturerInfo = res['data']['lecturerInfos'][0];
					}
				})
			},
			// 课程详情页面
			courseDetail() {
				this.userId = uni.getStorageSync('cffp_userId')
				const shareCode = nanoid() + this.userId
				const jumptime = Date.parse(new Date()) / 1000
				api.courseDetail({
					fileId: this.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					packFileId: this.courseInfo.packFileId
				}).then(res => {
					if (res['success']) {
						this.courseInfo = this.shareItem = res['data']['data'];
						if (this.courseInfo.filePathOss != null && Number(this.courseInfo.filePathOss)) {
							this.bannerViewType = "2";
							this.getBanner(Number(this.courseInfo.filePathOss));
						}
						//this.courseInfo.serviceContent = res['data']['data']['filePathOss'];
						this.lecturerId = res['data']['data']['fileLecturerId'];
						// this.lecturerQuery();
						// this.relatedCoursesList();
						if (uni.getStorageSync('h5_coursesharing')) {
							this.coursesharing = uni.getStorageSync('h5_coursesharing')
							this.getshareData()
						}
						if (this.courseInfo.status == 2) {
							this.findVideoPlayback();
						} else {
							this.isRenderVideo = true;
						}
						// #ifdef H5
						const shareCode = nanoid() + this.userId
						const jumptime = Date.parse(new Date()) / 1000
						if (dataHandling.h5RuntimeEnv() == 'wechat-miniprogram') {
							let newLink = ''
							let shareInfo = {
								title: this.courseInfo.fileTitle,
								// desc: '加入我们开启学习之旅',
								desc: this.courseInfo.fileSynopsis,
								imgUrl: this.courseInfo.displayImage, //图片
								sharePage: 'courseDetail', //分享的哪个页面
								commonId: shareCode,
								shareCode: shareCode,
								isSaveShare: '1', //是否存贮分享便于统计分享数据
								fileId: this.fileId,
							}
							if (uni.getStorageSync('loginType') == 'codelogin') {
								shareInfo.userId = this.userId
								newLink =
									`${shareURL}/pages/lanch/index?fileId=${this.fileId}&coursesharing=1&serialsNo=${nanoid()}&shareCode=${shareCode}&shareUserId=${this.userId}&jumpUrl=${jumptime}&landingPage=courseDetail&miniShare=1`
							} else {
								newLink =
									`${shareURL}/pages/lanch/index?fileId=${this.fileId}&landingPage=courseDetail&miniShare=1`
							}
							shareInfo.link = newLink
							wx.miniProgram.postMessage({
								data: {
									type: 'share',
									shareData: JSON.stringify(shareInfo)
								}

							})
							return
						}
						this.getshareData2(shareCode, jumptime, 0)
						// #endif
					}
				})
			},
			// 相关课程查询
			relatedCoursesList() {
				api.relatedCoursesList({
					fileId: this.fileId,
					userId: uni.getStorageSync('cffp_userId'),
					orderId: this.courseInfo.orderId,
					packFileId: this.courseInfo.packFileId
				}).then(res => {
					if (res['success']) {
						if (res['data'] && res['data']['data']) {
							this.relatedCoursesLists = res['data']['data']['relatedCourseList'];
							this.nonRequiredCount = res['data']['data']['nonRequiredCount'];
							this.requiredCount = res['data']['data']['requiredCount'];
						}
					}
				})
			},
			// 秒转时分秒格式
			secondsTransferPipe(value) {
				return dataHandling.secondsTransferPipe(value)
			},
			async play(item) {
				// 相关列表点击播放
				if (this.courseInfo.status == 1) {
					// 不可播放
					uni.showToast({
						title: '购买才可观看哦~',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.videoContext.pause();
					if (this.fileId != item.fileId) {
						// 当点击的课程和当前播放的课程不一致时，执行此方法
						uni.showLoading({
							title: '加载中'
						});
						this.newCourseInfo = {
							fileId: item.fileId,
							packFileId: item.packFileId,
						}
						if (this.isPauseFlag) {
							this.pause()
						}
					}
				}
			},
			saveVideoPlayback() {
				// 视频播放轨迹保存
				const param = {
					id: this.playbackId ? this.playbackId : null,
					systemType: 1,
					userId: this.userId,
					fileId: this.fileId,
					packFileId: this.courseInfo.packFileId,
					totalTime: Math.floor(this.totalTime),
					viewTime: Math.floor(this.viewTime),
					playbackStatus: this.viewTime >= this.totalTime ? '2' : '1'
				}
				return new Promise((resolve, reject) => {
					if (this.viewTime == 0) {
						resolve('success');
						return;
					}
					api.saveVideoPlayback(param).then(res => {
						if (res['success']) {
							this.playbackId = res['data']['id'];
							resolve('success');
						} else {
							reject('fail')
						}
					}).catch((err) => {
						reject('fail')
					})
				})

			},
			findVideoPlayback() {
				// 查询视频播放最新记录
				const param = {
					systemType: 1,
					userId: this.userId,
					fileId: this.fileId,
					packFileId: this.courseInfo.packFileId,
				}
				api.findVideoPlayback(param).then(res => {
					if (res['success']) {
						this.videoPlaybackInfo = res['data'];
						this.viewTime = this.videoPlaybackInfo.viewTime
						this.viewTime = this.videoPlaybackInfo.viewTime ? this.videoPlaybackInfo.viewTime : 0;
						this.totalTime = this.videoPlaybackInfo.totalTime ? this.videoPlaybackInfo.totalTime : 0;
						this.packFileId = this.videoPlaybackInfo.id ? this.videoPlaybackInfo.id : null;
						this.isRenderVideo = true;
						// 跳转到指定位置
						this.videoContext.seek(this.viewTime);
						uni.hideLoading();
					} else {
						this.isRenderVideo = true;
						this.totalTime = this.viewTime = 0;
						// 跳转到指定位置
						this.videoContext.seek(this.viewTime);
						uni.hideLoading();
					}
				})
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			// 点击播放
			playVideo(e) {
				this.isPauseFlag = false;
				if (this.viewTime >= this.totalTime) {
					this.viewTime = 0;
					this.videoContext.seek(this.viewTime);
				}
				// 开始/继续播放
				if (this.courseInfo.status === 2) {
					if (this.timer) {
						clearInterval(this.timer)
					}
					this.timer = setInterval(() => {
						this.saveVideoPlayback()
					}, 20 * 1000)
				}
			},
			// // 暂停播放
			async pause() {
				if (this.courseInfo.status != 1) {
					this.isPauseFlag = true;
					if (this.timer) {
						clearInterval(this.timer)
					}
					const result = await this.saveVideoPlayback()
					if (result == 'success' && this.newCourseInfo.fileId) {
						this.fileId = this.newCourseInfo.fileId;
						this.courseInfo.packFileId = this.newCourseInfo.packFileId;
						this.playbackId = null;
						this.courseDetail();
					}
				}
			},
			timeupdate(e) {
				this.totalTime = e.detail.duration;
				// 播放进度变化
				this.viewTime = e.detail.currentTime > this.totalTime ? this.totalTime : e.detail.currentTime;
				if (this.courseInfo.status === 1) {
					// 如果是试听，那么当观看时间大于等于试听时间的时候，强制暂停，并出弹窗
					if (this.viewTime >= this.courseInfo.auditionTime) {
						this.videoContext.pause();
						// // 不可播放
						uni.showModal({
							content: '购买之后才可继续播放哦~',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {}
							}
						});
						this.videoContext.seek(0);
					}
				}
			},
			// 用户阅读
			getuserRead(type) {
				let UserReadRequestVO = {
					userId: uni.getStorageSync('cffp_userId'),
					serialsNo: this.serialsNo || 1,
					shareCode: this.shareCode || 1,
					shareUrl: window.location.href
				}
				api.userRead(UserReadRequestVO).then(res => {
					if (res['success']) {
						this.shareReadId = res.data.id
						if (type == 1) {
							this.jumppurchase()
						}
					}
				})
			},
			getshareData2(shareCode, jumptime, type = 1) {
				let newLink = type == 1 ? shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.fileId +
					'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
					this.userId + '&jumpUrl=' + jumptime + "&" :
					shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.fileId

				let data = {
					title: this.courseInfo.fileTitle,
					// desc: '加入我们开启学习之旅',
					desc: this.courseInfo.fileSynopsis,
					link: newLink, //分享链接
					imgUrl: this.courseInfo.displayImage, //图片
				}
				console.log('data', data);
				//安卓机型获取当前页面路径
				let url = window.location.href.split('#')[0];

				//ios机型获取当前页面路径
				let ua = navigator.userAgent.toLowerCase();
				let isWeixin = ua.indexOf('micromessenger') !== -1;
				if (isWeixin) {
					let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); //ios终端
					if (isiOS && window.sessionStorage.getItem('firstEntryUrl')) {
						url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0];
					}
				}
				hshare(data, url)
				if (type == 1) {
					this.submitsuessc(shareCode, jumptime)
				}
				if (type == 1) {
					dataHandling.pocessTracking(
						'点击',
						`用户在产品中心点击分享按钮，分享${this.courseInfo.fileTitle}`,
						'点击',
						2,
						'产品详情',
						'pages/courseDetail/courseDetail'
					)
				}

			},
			// H5 自定义分享
			getshareData() {
				let data = {
					title: this.courseInfo.fileTitle,
					// desc: '加入我们开启学习之旅',
					desc: this.courseInfo.fileSynopsis,
					link: window.location.href, //分享链接
					imgUrl: this.courseInfo.displayImage, //图片
				}
				var url = window.location.href.split('#')[0]
				hshare(data, url)

			},
			// 唤醒app 测试
			JsApiTicketApi() {
				let WxConfigRequestVO = {
					url: window.location.href.split('#')[0],
					systemType: this.addSystemType ? this.addSystemType : '1'
				}
				api.Wxshare(WxConfigRequestVO).then(res => {
					jWeixin.config({
						debug: false, //调试的时候需要 在app上回弹出errmg:config ok 的时候就证明没问题了 这时候就可以改为false
						appId: res.data.appId, //appid
						timestamp: res.data.timestamp, //时间戳
						nonceStr: res.data.nonceStr, //随机串 
						signature: res.data.signature, //签名
						jsApiList: res.data.jsApiList, //必填 是下面需要用到的方法集合
						openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp']
					});
					jWeixin.ready(function(res1) {

					});
					jWeixin.error(function(res2) {

					});
				})
			},
			submitsuessc(shareCode, jumptime) {
				let platform = uni.getSystemInfoSync().platform
				let UserShareRequestVO = {
					systemType: platform == 'ios' ? '1' : '0',
					userId: uni.getStorageSync('cffp_userId'),
					businessType: '1', // 分享类型
					businessId: this.fileId, // 课程Id
					shareUrl: shareURL + "/pages/courseDetail/courseDetail?fileId=" + this.fileId +
						'&coursesharing=1' + '&serialsNo=' + nanoid() + '&shareCode=' + shareCode + '&shareUserId=' +
						this.userId + '&jumpUrl=' + jumptime + "&", // 分享链接
					shareType: '2', // 分享类型(1:图片分享; 2:链接分享)
					shareToWhere: 3, //分享到哪儿（1好友 2朋友圈）
					shareCode: shareCode
				}
				api.userShare(UserShareRequestVO).then(res => {
					if (res['success']) {
						// uni.showToast({
						// 	title: '分享成功',
						// 	duration: 2000
						// });
					}
				})
			},
			getBanner(itemType) {
				//加载轮播图
				api.getBanner({ fileCategory: 7, itemType: itemType }).then(res => {
					if (res['success']) {
						this.swiperList = res['data']['homeItemList']
					}
				})
			},
			changeSwiper(e) {
				if (e.detail.source == 'touch') {
					this.current = e.detail.current
				}
			},
			queryInfo() {
				api.queryInfo({ userId: uni.getStorageSync('cffp_userId') }).then(res => {
					if (res['success']) {
						delete res.data.commonResult
						const cffp_userInfo = {
							...res.data
						}
						uni.setStorageSync('cffp_userInfo', JSON.stringify(cffp_userInfo))

						this.realName = res.data.realName;
					}
				})
			},
			init() {
				if (!uni.getStorageSync('loginType') && uni.getStorageSync('loginType') == 'visitor') {
					api.loginVerification({
						"loginType": 1,

					}).then((res) => {
						if (res['success']) {
							this.userId = String(res['data']['userId']);
							uni.setStorageSync('isLogin', '1');
							uni.setStorageSync('cffp_userId', this.userId);
							uni.setStorageSync('loginType', 'visitor');
							uni.setStorageSync('uni-token', res.data['token']);

						}
					})
				}
			},

			// 海报分享方法
			// 背景图片加载成功
			handleBgImageLoad() {
				this.generateQrcodeAndCapture();
			},

			// 背景图片加载失败
			handleBgImageError() {
				console.log('产品图片加载完成');
				// uni.showToast({
				// 	title:'海报生成失败，图片'
				// })
			},

			// 顺序执行：生成二维码 -> 截图
			async generateQrcodeAndCapture() {
				try {
					// uni.showLoading({
					//   title: '准备生成分享图...'
					// });

					// 1. 先生成二维码
					console.log('开始生成二维码...');
					await this.makeQrcode();
					console.log('二维码生成完成');

					// 2. 等待500ms确保渲染完成
					await new Promise(resolve => setTimeout(resolve, 1500));

					// 3. 执行截图
					console.log('开始截图...');
					await this.captureImage();
					console.log('截图完成');

					// uni.hideLoading();
				} catch (error) {
					console.error('生成分享图失败:', error);
					// uni.hideLoading();
					// this.retryGenerate();
				}
			},


			// 生成二维码
			makeQrcode() {
				return new Promise((resolve, reject) => {
					// 创建实例
					const qr = new UQRCode();

					// 设置二维码内容
					qr.data = this.qrCodeUrl;

					// 设置二维码大小
					qr.size = this.qrCodeSize;

					// 设置前景色（二维码颜色）
					qr.foregroundColor = '#000000';

					// 设置背景色
					qr.backgroundColor = '#FFFFFF';

					// 设置边距
					qr.margin = 10;

					// 设置纠错等级
					qr.errorCorrectLevel = UQRCode.errorCorrectLevel.H;

					try {
						// 调用制作二维码方法
						qr.make();

						// 获取canvas上下文
						const ctx = uni.createCanvasContext('qrcode', this);

						// 清空画布
						ctx.clearRect(0, 0, this.qrCodeSize, this.qrCodeSize);

						// 将二维码绘制到canvas上
						qr.canvasContext = ctx;
						qr.drawCanvas();

						// 绘制完成
						ctx.draw(true, () => {
							console.log('二维码绘制完成');
							resolve();
						});
					} catch (err) {
						reject(err);
					}
				});
			},

			// 截图方法
			async captureImage() {
				try {
					// uni.showLoading({
					//   title: '正在生成图片...'
					// });

					// 获取DOM元素（在H5环境下）
					const element = this.$refs.captureElement.$el;
					// 调用工具函数生成图片
					const imageData = await elementToImage(element);
					this.generatedImage = imageData
					this.isLoading = false
					this.isOrderLoading = false
					this.$refs.sharePosterPop.toggleDropdown()

					// 压缩图片
					// const compressedImage = await this.compressImage(imageData);

					// this.generatedImage = compressedImage;
				} catch (error) {
					console.error('截图失败:', error);
					throw error; // 抛出错误以便外部捕获
				} finally {
					// uni.hideLoading();
				}
			},
			compressImage(base64) {
				return new Promise((resolve) => {
					const img = new Image();
					img.src = base64;
					img.onload = () => {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');

						// 设置压缩后的宽高
						const maxWidth = 800;
						const maxHeight = 1200;
						let width = img.width;
						let height = img.height;

						if (width > maxWidth) {
							height *= maxWidth / width;
							width = maxWidth;
						}

						if (height > maxHeight) {
							width *= maxHeight / height;
							height = maxHeight;
						}

						canvas.width = width;
						canvas.height = height;
						ctx.drawImage(img, 0, 0, width, height);

						// 降低质量
						resolve(canvas.toDataURL('image/jpeg', 0.7));
					};
				});
			},
			// 关闭海报弹窗
			closePoster() {
				this.showImg = false
				this.generatedImage = ''
				// this.shareItem = {
				// 	fileFirstImage:''
				// }
			},

			startPolling() {

				// 先清除可能存在的旧定时器
				if (this.pollingTimer) {
					clearInterval(this.pollingTimer)
					this.pollingTimer = null
				}

				// 每3秒轮询一次，最多轮询100次（5分钟）
				let count = 0
				const maxCount = 100

				this.pollingTimer = setInterval(() => {
					count++
					uni.showModal({
						content: count
					})

				}, 1000) // 3秒轮询一次
			},

			// 新增：停止轮询
			stopPolling() {
				if (this.pollingTimer) {
					clearInterval(this.pollingTimer)
					this.pollingTimer = null
				}
			},
			// 跳转到小程序登录
			jumpMplogin() {
				let currentUrl = ``;
				if (this.miniShareInfo.miniShare) {
					if (uni.getStorageSync('loginType') == 'codelogin') {
						currentUrl =
							`${shareURL}/pages/lanch/index?fileId=${this.miniShareInfo.fileId}&coursesharing=1&serialsNo=${this.miniShareInfo.serialsNo}&shareCode=${this.miniShareInfo.shareCode}&shareUserId=${this.miniShareInfo.shareUserId}&jumpUrl=${this.miniShareInfo.jumpUrl}&landingPage=courseDetail&miniShare=1`
					} else {
						currentUrl =
							`${shareURL}/pages/lanch/index?fileId=${this.miniShareInfo.fileId}&landingPage=courseDetail&miniShare=1`
					}

				} else {
					currentUrl = `${shareURL}/pages/lanch/index?fileId=${this.fileId}&landingPage=courseDetail&noShare=1`
				}
				let data = {
					type: 'login',
					h5SystemType: 'cffp',
					link: encodeURIComponent(currentUrl),
					miniShare: this.miniShareInfo.miniShare ? this.miniShareInfo.miniShare : '' //是否从小程序的分享卡片进入的
				}
				wx.miniProgram.postMessage({
					data: {
						type: 'login',
						shareData: JSON.stringify(data)
					}

				})
				wx.miniProgram.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(option) {


			// 通过小程序的分享卡片进来的，保存分享参数
			if (option.miniShare) {
				this.miniShareInfo = option
			}
			this.sharePosterObj = uni.getStorageSync('sharePosterObj') || {};
			// console.log('sharePosterObj======',this.sharePosterObj);
			// 如果通过海报分享进入系统，海报分享人为合伙人且普通客户完成购买了，那么海报分享人可以获得销售佣金
			this.shareUserId = this.sharePosterObj.inviteUserId || '';
			if (companyInfo.companyType == '1') {
				this.companyLogo = '../../static/myteam/Group1633.png';
			} else if (this.companyType == '2') {
				this.companyLogo = '../../static/suplogo.png';
			}
			if (option.addSystemType) {
				this.addSystemType = option.addSystemType
			}
			if (this.systemType == 'IOS') {
				this.showName = '预约';
				this.show = false;
			}
			this.fileId = option.fileId;

			this.courseInfo.packFileId = option.packFileId;
			this.deviceType = common.checkDeviceType();
			if (option.coursesharing) {
				this.userId = ''
				this.coursesharing = option.coursesharing
				this.isWeixin = true; // 是微信端
				this.JsApiTicketApi();
				this.serialsNo = option.serialsNo
				this.shareCode = option.shareCode
				this.shareUserId = option.shareUserId
				this.getuserRead()
				let endTime = Date.parse(new Date()) / 1000;
				let startTime = uni.getStorageSync('h5_startTime')

				uni.setStorageSync('h5_coursesharing', this.coursesharing);
				this.getshareData()
			}
			let dataForm = JSON.parse(JSON.stringify(uni.getStorageSync('cffp_userInfo')))
			this.realName = dataForm.realName;
			if (!this.realName) {
				this.queryInfo();
			}

			// this.switchTab(1);
		},
		onShow() {
			this.isLoading = false
			if (uni.getStorageSync('mpCffp')) {
				this.mpCffp = uni.getStorageSync('mpCffp')
			}
			this.showImg = false
			this.generatedImage = ''
			this.shareItem = { fileFirstImage: '' },
				this.loginType = uni.getStorageSync('loginType')
			this.init();
			this.isWx_Miniprogram();
			this.tabType = 1;
			this.wayType = '1'
			this.courseDetail();
			uni.setStorageSync('entryUrl', window.location.href.split('#')[0])
			if (uni.getStorageSync('cffp_userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('cffp_userInfo'))
			}
			this.userId = uni.getStorageSync('cffp_userId')

			// #ifdef H5
			initJssdkShare(() => {
				setWechatShare();
			}, window.location.href);
			// #endif

		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onUnload() {
			if (this.courseInfo.status != 1 && this.viewTime != 0) {
				this.videoContext.pause();
				this.saveVideoPlayback();
				if (this.timer) {
					clearInterval(this.timer)
				}
			}
			// #ifdef H5
			initJssdkShare(() => {
				setWechatShare();
			}, window.location.href);
			// #endif
		},
		onHide() {
			this.$nextTick(() => {
				this.$refs.sharePosterPop.closeDropdown()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		position: relative;

		.generateImageBox {
			position: absolute;
			top: -100%;
			z-index: -1;
			border-radius: 20rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;

			.imgBox {
				box-sizing: border-box;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;

				.posterImg {
					width: 900rpx;
					height: 900rpx;
				}

			}

			.txtBox {
				padding: 20rpx;

				.descriptionTxt {
					font-size: 45rpx;
				}

				.productNum {
					font-size: 45rpx;
					font-weight: 500;
					margin: 10rpx 0;
					color: rgba(255, 74, 50, 1);
				}

				.generateImageBottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						min-width: 500rpx;

						.top {
							width: 100%;
							display: flex;
							align-items: center;

							image {
								width: 100%;
							}

							.companyName {
								min-width: 300rpx;
								color: #333;
								font-size: 35rpx;
							}
						}

						.bottom {
							font-size: 30rpx;
							color: #999;
							margin-top: 10rpx;
							font-weight: 500;
						}
					}

					.qrcode-container {

						background: #fff;
						padding: 10rpx;
						border-radius: 10rpx;
						box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

						.qrcode-canvas {
							display: block;
						}
					}
				}
			}

		}
	}

	page {
		padding: 0;
	}

	.loginPopupBox {
		margin-top: 8vh;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		background: #fff;

		.popup_replenish_button2 {
			color: rgba(9, 44, 171, 1);
			background-color: #fff;
			border: 1rpx solid rgba(9, 44, 171, 1);
			border-radius: 200rpx;
			padding: 0rpx 50rpx;
			font-size: 30rpx;
		}
	}

	.swiperBox {
		height: 930rpx;
	}

	.swiper-box {
		height: 930rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 930rpx;
		color: #fff;
	}

	.courseBannerBox {
		// background-color: #ebebeb;
		// display: flex;
		// justify-content: center;
		// z-index: 1;
	}

	.courseTitleContent {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-bottom: 10rpx;
		padding: 20rpx 0rpx 20rpx 30rpx;
		box-sizing: border-box;

		.courseTitle {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
			box-sizing: border-box;

			h4 {
				font-size: 40rpx;
			}
		}

		.dataBox {
			strong {
				font-size: 30rpx;
				color: #F15A1F;
				margin-right: 30rpx;
			}

			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.awakenApp {
		display: flex;
		align-items: center;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		color: #fff;
		height: 60rpx;
		background: #20269B;
	}

	.shareheader {
		background-color: #fff;
		display: flex;
		/* #ifdef H5 */
		justify-content: flex-end;
		/* #endif */
		/* #ifdef APP */
		justify-content: space-between;
		/* #endif */
		align-items: center;
		height: 100rpx;

		.icon-youjiantou {
			display: inline-block;
			transform: rotate(180deg);
			font-size: 30rpx;
			z-index: 1;
		}

		.share-entrance {
			width: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-right: 30rpx;

			.image {
				width: 40rpx;
				height: 40rpx;
				// margin-top: 10rpx;
				// margin-right: 25rpx;
			}
		}

	}

	.image {
		width: 30rpx;
		height: 30rpx;
	}

	.courseProBox {
		.tab {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 150rpx 0;
			background-color: #fff;
			color: #666;
			font-size: 32rpx;

			text.actived {
				border-bottom: 2px solid #20269B;
				color: #333;
			}
		}

		.tabContent {
			padding-bottom: 200rpx;
			background-color: #fff;

			.statusBtnContent {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #999;
				font-size: 20rpx;

				.iconfont {
					font-size: 60rpx;
					color: #5359CD;
				}
			}

			.lecturerContent {
				.lecturerIntro {
					display: flex;
					padding: 40rpx 50rpx;
					border-bottom: 2rpx solid #fbfbfb;

					.lecturerUrl {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						background-color: #ccc;
						overflow: hidden;
						margin-right: 40rpx;
					}

					.lecturerName {
						display: inline-block;
						background: #5359CD;
						border-radius: 10rpx;
						color: #fff;
						font-size: 28rpx;
						padding: 4rpx 20rpx;
					}

					.lecturerTitle {
						font-size: 28rpx;
						color: #5359CD;
						margin-top: 16rpx;
					}
				}

				h4 {
					padding-left: 30rpx;
					padding-top: 10rpx;
					padding-bottom: 20rpx;
					background-color: #fff;

					text {
						border-bottom: 1px solid #333;
						font-size: 30rpx;
					}
				}

				.lecturerText {
					padding: 0 28rpx;
					background-color: #fff;
					white-space: pre-wrap;
					width: 100%;
					box-sizing: border-box;
				}

			}

			.courseIntroContent,
			.relationCourseListsContent {
				padding: 0 28rpx;
				background-color: #fff;
				white-space: pre-wrap;
				width: 100%;
				box-sizing: border-box;
			}

			.relationCourseListsContent {
				.courseType {
					background-color: #5359CD;
					color: #fff;
					border-radius: 2rpx;
					padding: 2rpx 10rpx;
					font-size: 16rpx;
					margin-left: 10rpx;
				}

				.totalCourseCount {
					color: #20269B;
					font-size: 24rpx;
					padding: 8rpx 0;
					border: 1px solid #fbfbfb;
					border-left: none;
					border-right: none;
				}

				.courseItemContent {
					padding: 16rpx 0;
					border-bottom: 1px solid #fbfbfb;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.courseInfoContent {
						width: 75%;

						h4 {
							color: #666;
						}

						.timeContent {
							color: #999;
							padding-left: 28rpx;

						}
					}
				}

			}

			.buyBox {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				border-radius: 80rpx;
				background-color: #20269B;
				color: #fff;
				font-size: 36rpx;
				padding: 20rpx 90rpx;
				text-align: center;
				max-width: 60%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.shareBuyBox {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				color: #fff;
				font-size: 36rpx;
				padding: 40rpx 20rpx;
				width: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				box-sizing: border-box;

				.leftBuy {
					color: #fff;
					background-color: #20269B;
					padding: 20rpx 100rpx;
					border-radius: 80rpx;
					font-size: 36rpx;
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.rightShare {
					margin-right: 30rpx;
					width: 30%;
					color: #20269B;
					font-size: 36rpx;
					padding: 20rpx 0rpx;
					border-radius: 80rpx;
					border: 1rpx solid #20269B;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.markBox {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		display: flex;
		justify-content: flex-end;
		z-index: 100000;
		background: rgba(0, 0, 0, 0.8);

		.guideImgBox {
			margin: 20px auto;

			uni-image {
				width: 25% !important;
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.tips {
			margin-top: 30%;
			padding: 0 30px;
		}

		/* iPad横屏特定适配 */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
			.container {
				.generateImageBox {
					max-width: 950rpx !important;

					.descriptionTxt {
						font-size: 33rpx !important;
					}

					.txtBox {
						.generateImageBottom {
							.left {
								width: 60% !important;

								.top {
									width: 100%;

									.companyName {
										min-width: 200rpx !important;
										font-size: 30rpx !important;
									}
								}

								.bottom {
									font-size: 28rpx !important;
								}
							}
						}
					}
				}
			}
		}

		/* 所有iPad竖屏 */
		@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

			/* 竖屏样式 */
			.generateImageBox {
				max-width: 950rpx !important;

				.descriptionTxt {
					font-size: 33rpx !important;
				}

				.txtBox {
					.generateImageBottom {
						.left {
							width: 60% !important;

							.top {
								width: 100%;

								.companyName {
									min-width: 200rpx !important;
									font-size: 30rpx !important;
								}
							}

							.bottom {
								font-size: 28rpx !important;
							}
						}
					}
				}
			}
		}
	}
</style>