zc_saas_h5/pages3/course/detail.vue

<template>
	<view>
		<nav-bar title="课程详情"></nav-bar>
		<view class="videoBox">
			<!-- <view > -->
			<view class="video_box" v-if="!startStatus">
				<image :src="$method.splitImgHost(detail.coverUrl)" style="width: 100%;height: 450rpx;"></image>
				<image v-if="false" class="video_play" src="/static/play.png" @click="startVideo"></image>
			</view>
			<view v-else class="video_box" style="width: 100%;height: 450rpx;">
				<polyv-player id="playerVideo" playerId="playerVideo" height="450rpx" :vid="vid" :showSettingBtn="true"
					:enablePlayGesture="true" :playbackRate="playbackRate" :isAllowSeek="isAllowSeek"
					:autoplay="autoplay" :startTime="startTime" @statechange="onStateChange"></polyv-player>
			</view>

			<view class="cou_title">
				<view class="title_name">
					<!-- <view class="yearTag" v-if="detail.year">{{detail.year}}</view> -->
					<view class="titleTag">{{ detail.goodsName }}</view>
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 13rpx;">
					<view class="prices">
						<text v-if="detail.standPrice" class="price_word">¥ {{ detail.standPrice }}</text>
						<text v-else class="price_word free">免费</text>
						<text v-if="detail.linePrice" class="sale"> ¥ </text>
						<text v-if="detail.linePrice" class="price_line"> {{ detail.linePrice }}</text>
					</view>
					<view class="noteTag">
						共 <text class="blackFont">{{ courseList.length }} 课程 {{ detail.classHours || '-' }}</text> 学时
					</view>
				</view>
			</view>
			<!-- </view> -->
		</view>
		<view class="contents">

			<!-- <u-line color="#D6D6DB" /> -->
			<!-- <view style="height: 80rpx;">
				<view><u-tabs :list="list" :item-width="itemWidth()" font-size="30" bar-width="24"  :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
			</view> -->
			<view class="tabs">
				<view v-for="(item, index) in list" :key="index" class="tab_item"
					:class="[list.length == 2 ? 'twoBtn' : list.length == 3 ? 'threeBtn' : '', { nactive: current == index }]"
					@click="change(index)">{{ item.name }}</view>
			</view>

			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current == 0">
				<view class="content">
					<view v-html="detail.mobileDetailHtml" style="width: 100%;overflow: hidden;"></view>
				</view>
			</view>
			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current == 1">
				<!-- <view v-for="(item, index) in courseItem.courseList" :key="index" > -->
				<!-- 视频课 -->
				<template v-if="goodsType == 1">
					<view v-for="(courseItem, gTindex) in goodsTeacher" :key="gTindex">
						<view v-for="(item, index) in courseItem.courseList" :key="index">
							<view class="courseItemBox" v-if="item.show && item.show == 1">
								<view class="courseItem" @click="openCourse(item)">
									<view class="courseName">{{ item.courseName }}</view>
									<view>
										<image src="/static/icon/up.png" class="icon_up" v-if="item.down"></image>
										<image src="/static/icon/down.png" class="icon_up" v-if="!item.down"></image>
									</view>
								</view>
								<view v-if="courseItem.teaList && courseItem.teaList.length > 0" class='teacher_names'>
									<view v-for="(tea, tindex) in courseItem.teaList" :key="tindex" class="names"
										:class="[States[gTindex] == tindex ? 'nactive' : '']"
										@click.stop="switchTeacher(tea, tindex, gTindex)">
										<view>{{ tea.aliasName }}</view>
									</view>
								</view>
								<view v-show="!item.down">
									<view v-for="(itemM, indexM) in item.menuList" :key="indexM">
										<courseModule :courseId="itemM.courseId"
											:needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false"
											v-if="itemM.type == 1" :menuItem="itemM"></courseModule>
										<courseChapter :courseId="itemM.courseId"
											:needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false"
											v-if="itemM.type == 2" :isBuy="false" :menuItem="itemM"></courseChapter>
										<courseSection :courseId="itemM.courseId" v-if="itemM.type == 3" :isBuy="false"
											:menuItem="itemM"></courseSection>
										<u-line></u-line>

									</view>
								</view>

							</view>
						</view>
					</view>
				</template>
				<!-- 直播课 -->
				<template v-else>
					<view v-for="(item, index) in courseList" :key="index">
						<view class="courseItemBox">
							<view class="courseItem" @click="openCourse(item)">
								<view class="courseName">{{ item.courseName }}</view>
								<view>
									<image src="/static/icon/up.png" class="icon_up" v-if="item.down"></image>
									<image src="/static/icon/down.png" class="icon_up" v-if="!item.down"></image>
								</view>
							</view>
							<view v-show="!item.down">
								<view v-for="(itemM, indexM) in item.menuList" :key="indexM">
									<courseModule :courseId="itemM.courseId"
										:needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false"
										v-if="itemM.type == 1" :menuItem="itemM"></courseModule>
									<courseChapter :courseId="itemM.courseId"
										:needOpen="(isFirstEnter && menuIndex[0] === index && menuIndex[1] === indexM) ? true : false"
										v-if="itemM.type == 2" :isBuy="false" :menuItem="itemM"></courseChapter>
									<courseSection :courseId="itemM.courseId" v-if="itemM.type == 3" :isBuy="false"
										:menuItem="itemM"></courseSection>
									<u-line></u-line>

								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view style="padding: 20rpx;padding-bottom: 100rpx;position: relative;" v-show="current == 2">
				<!-- <view > -->
				<view v-for="(item, index) in freeMenuList" :key="index">
					<view class="courseItemBox">
						<view class="courseItem">
							<view class="courseName">{{ item.freeExamName }}</view>
						</view>
					</view>

				</view>
				<!-- </view> -->
			</view>
		</view>


		<view class="bottomBox" v-if="!hideBuyState">
			<view class="icons">
				<view class="icon_item ones">
					<image src="/static/index/share.png" class="share"></image>
					<button type="default" open-type="share" class="bt_share"></button>
					<view class="share_w">分享</view>
				</view>
				<view class="icon_item">
					<image src="/static/index/shopcar.png" class="shopcar" @click="toShopcar()"></image>
					<view class="share_w">购物车</view>
				</view>
			</view>
			<view style="display: flex;color: #FFFFFF;align-items: center;">
				<view class="btn1" @click="addCart()">加购物车</view>
				<view class="btn2" @click="buy()">立即购买 </view>
			</view>
		</view>

		<!-- 已购买过课程的弹窗 -->
		<u-popup v-model="bugCourseModel" mode="center" border-radius="40">
			<view class="had_bugCourse">
				<image src="/pages3/static/imgs/hadBug.png" class="share"></image>
				<view class="tips">
					<view class="warns">温馨提示</view>
					<view class="words">您<text>已购买过</text>该商品课程</view>
					<view class="words">可立即前往学习</view>
				</view>
				<view class="tip_botton">
					<view class="cancel_btn" @click="changeKown()">知道了</view>
					<view class="confirm_btn" @click="toStudy()">去学习</view>
				</view>
			</view>
		</u-popup>

		<!-- 选择规格弹窗 -->
		<u-popup v-model="toggleSkuShow" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view class="check_head">
					<view class="headers">
						<view class="grade">选择规格</view>
						<u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
					</view>
				</view>
				<view class="check_con">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view v-for="(item, index) in specList" :key="index" class="check_items">
							<view class="grades">{{ item.name }}</view>
							<view class="grade_names" v-if="index == 0 && specList.length > 1">
								<view class="course_items" v-for="(child, c_index) in item.specAttrList" :key="c_index"
									:class="{ 'nactive': selectGoodIndex == c_index }" @click="selectGoodType(c_index)">
									{{ child.name }}
								</view>
							</view>
							<view v-if="index == 1 || specList.length == 1" class="check_box">
								<u-checkbox-group>
									<view class="check_box_item" :class="spec.check ? 'selected' : ''"
										v-for="spec in item.specAttrList" :key="spec.specAttributeId">
										<u-checkbox @change="checkboxChange" v-model="spec.check"
											:name="spec.specAttributeId"></u-checkbox>
										<view class="price_box">
											<view class="check_box_item_titme">{{ spec.name }}</view>
											<view class="price">￥{{ spec.standPrice }}</view>
										</view>
									</view>
								</u-checkbox-group>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="confirm_btns">
					<view class="allprice">
						<view>
							总价：<text>￥</text><text>{{ allPrice }}</text>
						</view>
						<text>已选择{{ goodsIds.length }}个商品</text>
					</view>
					<view class="btns">
						<view v-if="!goodsIds.length" class="right_now r_disable">{{ isCarOrBuy == 2 ? '立即购买' : '加入购物车'
						}}</view>
						<view v-else class="right_now" @click="rightNowBuy()">{{ isCarOrBuy == 2 ? '立即购买' : '加入购物车' }}
						</view>
					</view>

				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
import courseModule from '@/components/course/courseModule.vue';
import courseChapter from '@/components/course/courseChapter.vue';
import courseSection from '@/components/course/courseSection.vue';
import { mapGetters, mapMutations } from 'vuex';
export default {
	components: {
		courseModule,
		courseChapter,
		courseSection
	},
	data() {
		return {
			id: 0,
			list: [],
			menuIndex: [],
			current: 0,
			detail: {},
			courseList: [],
			menuList: [],
			freeMenuList: [],
			startStatus: false,
			playbackRate: [1.0],
			isAllowSeek: 'no',
			vid: '',
			autoplay: true,
			listenConfigList: [],
			listenSecond: 0,
			isFirstEnter: true, //是否首次进入
			timer: null,
			businessData: {},
			startTime: 0,
			bugCourseModel: false, // 弹窗
			hadBuyCourse: {}, // 已购买课程信息
			goodsTeacher: [],
			teaIndex: 0,
			States: { 0: 0 },
			goodsType: 1, // 1视频2题库 3补考 4前培 6直播
			toggleSkuShow: false,
			skuItem: {},
			isCarOrBuy: 1, // 1加入购物车 2立即购买
			specList: [], // 规格列表
			checkedAttrs: [],
			selectGoodIndex: 0,
			specAttrPriceList: [],
		};
	},
	computed: {
		...mapGetters(['userInfo', 'goodsAuditionConfigIdList', 'playSectionId', 'hideBuyState']),
		allPrice() {
			if (!this.specList.length) return 0
			return this.specList.slice(-1)[0].specAttrList.reduce((a, b) => {
				if (b.check) {
					return a + b.standPrice
				}
				return a
			}, 0)
		},
		goodsIds() {
			if (!this.specList.length) return []
			return this.specList.slice(-1)[0].specAttrList.filter(e => e.check).map(e => e.goodsId)
		},
		isSingleChoice() {
			if (!this.specAttrPriceList.length) {
				return false
			}
			return this.specAttrPriceList[0].specialGoods
		}
	},
	onLoad(option) {
		if (option.scene) {
			// scene 生成二维码扫码进来的
			let optObj = {}
			let arrs = decodeURIComponent(option.scene).split('&')
			for (let i = 0; i < arrs.length; i++) {
				optObj[arrs[i].split('=')[0]] = arrs[i].split('=')[1]
			}
			// console.log('optObj:', optObj);
			this.id = optObj.id
			this.goodsType = optObj.goodsType
			console.log('optObj.sc:', optObj.sc);
			uni.setStorageSync('newUser_sc', optObj.sc)
		} else {
			// 小程序正常跳转的
			// this.id => goodsId
			this.id = option.id
			this.goodsType = option.goodsType
		}
		this.getDetail()
		this.goodsCourseList()
		this.appCommonGoodsCourseModuleFreeExamList();
		this.getIsBuy() // 判断是否已经购买过该课程
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
	},
	onUnload(option) {
		this.$store.commit('setPlaySectionId', { playSectionId: 0 });
		//移除所有的事件监听器
		uni.$off();
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.detail.goodsName,
			query: 'id=' + this.id,
			imageUrl: this.$method.splitImgHost(this.detail.coverUrl)
		}
	},
	// 分享给朋友
	onShareAppMessage() {
		return {
			title: this.detail.goodsName,
			path: `/pages3/course/detail?id=` + this.id + '&goodsType=' + this.goodsType,
			imageUrl: this.$method.splitImgHost(this.detail.coverUrl)
		}
	},

	mounted() {
		let self = this
		uni.$on('getSection', item => {
			//播放试听
			self.listenSecond = 0
			for (var itemChild of self.listenConfigList) {
				if (self.playSectionId == (itemChild.sectionId || itemChild.menuId) && item.courseId == itemChild.courseId) {
					if (itemChild.auditionMinute > 0) {
						//		self.listenSecond = itemChild.auditionMinute *60 //试听秒数
						self.listenSecond = itemChild.auditionMinute //试听秒数 auditionMinute调整为秒单位
					}
				}
			}
			if (self.listenSecond > 0) {
				if (self.timer) {
					clearInterval(self.timer);
				}
				if (self.vid) {
					//切换视频
					var polyvPlayerContext = self.selectComponent('#playerVideo');
					polyvPlayerContext.changeVid(item.recordingUrl)
				} else {
					self.vid = item.recordingUrl
				}

				self.startStatus = true
				self.startTime = 0
			} else {

				self.$u.toast('试听配置错误');
			}

		})
		this.updateChapterOpen(true)
	},
	methods: {
		...mapMutations(['updateChapterOpen']),
		itemWidth() {
			return (100 / this.list.length) + '%'
		},
		appCommonGoodsCourseModuleFreeExamList() {
			// url: '/app/common/goods/course/moduleFreeExamList/'+data,
			this.$api.appCommonGoodsCourseModuleFreeExamList(this.id).then(res => {
				if (res.data.data.length) {
					this.freeMenuList = res.data.data;
					this.list = [
						{
							name: '课程介绍'
						},
						{
							name: '课程目录'
						},
						{
							name: '赠送'
						}
					]
				} else {
					this.list = [
						{
							name: '课程介绍'
						},
						{
							name: '课程目录'
						}
					]
				}

				console.log(this.list)
			})
		},
		selectGoodType(index) {
			if (index == this.selectGoodIndex) {
				return
			}
			this.selectGoodIndex = index
			this.changeData()
		},
		checkboxChange(val) {
			if (!this.isSingleChoice) return
			this.specList.slice(-1)[0].specAttrList.forEach(ele => {
				if (val.name != ele.specAttributeId) {
					ele.check = false
				}
			})
		},
		courseBusiness() {
			// url: '/app/common/course/business/'+data,
			this.$api.courseBusiness(this.detail.businessId).then(res => {
				this.businessData = res.data.data;
			})
		},
		toFixed(number) {
			if (number > 0) {
				return number.toFixed(2)
			} else {
				return '0.00'
			}
		},
		onStateChange(newstate, oldstate) {
			if (newstate.detail.newstate == 'playing') {
				//开始播放
				if (this.timer) {
					clearInterval(this.timer);
				}
				this.timer = setInterval(this.timeEvent, 1500);//定时器
			}

		},
		closePlay() {
			this.$store.commit('setPlaySectionId', { playSectionId: 0 });
			this.vid = ""
			this.startStatus = false
		},
		timeEvent() {
			let self = this
			var polyvPlayerContext = this.selectComponent('#playerVideo');
			if (polyvPlayerContext != null) {
				let PlayCurrentTime = polyvPlayerContext.getCurrentTime();
				if (PlayCurrentTime >= this.listenSecond) {
					polyvPlayerContext.stop();
					polyvPlayerContext.exitFullScreen();
					clearInterval(this.timer);
					this.timer = null
					uni.showModal({
						title: '提示',
						content: '试听结束，购买课程可学习全部',
						showCancel: false,
						success: function (resst) {
							self.closePlay()
						}
					});
				}
			}
		},
		openCourse(item) {
			item.down = !item.down
			if (!item.down && item.menuList.length == 0) {
				this.getMenuList(item)
			}
		},
		addShopCart(goodsIds) {
			if (!Array.isArray(goodsIds)) {
				goodsIds = [goodsIds]
			}
			this.$api.addCart({ goodsIds: goodsIds }).then(res => {
				if (res.data.code == 200) {
					uni.setStorageSync('updateCart', 1) //提醒刷新购物车
					uni.showToast({
						title: '添加成功'
					});
				} else {
					this.$u.toast(res.data.msg);
				}
			});
		},
		goodsCourseList() {
			// url: '/app/common/goods/course/list/'+ data,
			this.$api.goodsCourseList(this.id).then(res => {
				if (res.data.code == 200) {
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i]
						item.down = true
						item.menuList = []
					}
					this.courseList = res.data.rows;
					this.getFirstCourse();
					// 不同
					if (this.goodsType == 1) {
						this.getCourseTeacher(res.data.rows)
					}

				}
			});
		},
		/**
		 * 获取第一个有模块或者章的课程
		 */
		async getFirstCourse() {
			for (let i = 0; i < this.courseList.length; i++) {

				let menuIndexOrFalse = await this.getCourseMenus(this.courseList[i]);

				if (menuIndexOrFalse !== false) {
					this.menuIndex = [i, menuIndexOrFalse]
					this.openCourse(this.courseList[i])
					break
				}
			}
		},
		getCourseMenus(item) {
			return new Promise(resolve => {
				// url: '/app/common/course/menuList',
				this.$api.menuList({ courseId: item.courseId }).then(res => {
					if (res.data.code == 200) {
						for (let i = 0; i < res.data.rows.length; i++) {
							if (res.data.rows[i].type == 1 || res.data.rows[i].type == 2) {
								resolve(i)
								break;
							}
						}
					}
				});
			})

		},
		getCourseTeacher(rows) {
			//获取商品双师资模板
			this.$api.getGoodsCourseTeacher({
				goodsId: this.id
			}).then((res1) => {
				//   console.log(res1,'res1');
				if (res1.data.data && res1.data.data.length > 0) {
					//课程老师模板
					let teacherTel = res1.data.data;
					//商品课程
					let courses = rows
					teacherTel.forEach((tea) => {
						let dataList = []
						let teacherList = []
						courses.forEach((item) => {
							let data = tea.courseList.filter(x => x.courseId == item.courseId)
							if (data && data.length > 0) {
								dataList.push(item)
								teacherList = tea.courseList
							}
						})
						let result = {
							teaList: teacherList,
							courseList: dataList
						}
						this.goodsTeacher.push(result)
					})
					if (this.goodsTeacher && this.goodsTeacher.length > 0) {
						let courseIds = []
						this.goodsTeacher.forEach((item) => {
							item.courseList.forEach((course) => {
								courseIds.push(course.courseId)
							})
						})
						if (courseIds.length > 0) {
							courses.forEach((item) => {
								if (!courseIds.includes(item.courseId)) {
									let data = {
										teaList: [],
										courseList: []
									}
									data.courseList.push(item)
									this.goodsTeacher.push(data)
								}
							})
						}
						this.goodsTeacher.forEach((item) => {
							if (item.courseList && item.courseList.length > 0) {
								item.courseList[0].show = 1
							}
						})
					}
				} else {
					//没有双师资模板
					rows.forEach((item) => {
						item.show = 1
						let data = {
							teaList: [],
							courseList: []
						}
						data.courseList.push(item)
						this.goodsTeacher.push(data)
					})

				}
			})
			console.log(this.goodsTeacher, 'this.goodsTeacher');
		},
		//切换老师
		switchTeacher(data, tindex, gTindex) {
			// console.log(data,'data');
			this.States[gTindex] = tindex
			this.teaIndex = tindex
			this.goodsTeacher.forEach((item, index) => {
				if (item.teaList && item.teaList.length > 0) {
					let list = item.teaList.filter(x => x.courseId == data.courseId)
					if (list && list.length > 0) {
						item.courseList.forEach((course, courseIndex) => {
							if (course.courseId == data.courseId) {
								this.$set(this.goodsTeacher[index].courseList[courseIndex], "show", 1)
							} else {
								this.$set(this.goodsTeacher[index].courseList[courseIndex], "show", 0)
							}
						})
					}
				}
			})
			console.log('切换后的this.goodsTeacher, ', this.goodsTeacher)
		},
		getMenuList(item) {
			let self = this
			this.$api.menuList({ courseId: item.courseId }).then(res => {
				if (res.data.code == 200) {
					for (let i = 0; i < res.data.rows.length; i++) {
						let item = res.data.rows[i]
						item.down = true
						item.id = item.menuId
						item.name = item.menuName

						if (item.type == 3) {
							//判断是否试听
							item.tryListen = false
							if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
								item.tryListen = true
							}
						}
					}
					item.menuList = res.data.rows
				}
			});
		},
		// 获取课程详情
		getDetail() {
			let self = this
			let sectionIdList = []
			// /app/common/goods/+data
			this.$api.commonGoodsDetail(this.id).then(res => {
				if (res.data.code == 200) {
					if (res.data.data) {
						if (res.data.data.mobileDetailHtml) {
							res.data.data.mobileDetailHtml = res.data.data.mobileDetailHtml.replace(/<img/gi, '<img style="max-width:100%;"')
						}


						self.detail = res.data.data
						this.courseBusiness();
						if (self.detail.goodsAuditionConfig) {
							self.listenConfigList = JSON.parse(self.detail.goodsAuditionConfig)
							for (var itemChild of self.listenConfigList) {
								sectionIdList.push(itemChild.sectionId)//存储试听节ID
							}
							self.$store.commit('setGoodsAuditionConfigIdList', { goodsAuditionConfigIdList: sectionIdList });
						}
					}
				}
			});
		},
		buy() {
			if (this.$method.isGoLogin()) {
				return
			}
			// 判断有没有规格选择
			if (this.detail.specTemplateId) {
				this.isCarOrBuy = 2
				this.getSpecDetail()
				return
			}
			this.$navTo.togo('/pages2/order/confirm_list?id=' + this.id);
		},
		addCart() {
			if (this.$method.isGoLogin()) {
				return
			}
			// 判断有没有规格选择
			if (this.detail.specTemplateId) {
				this.isCarOrBuy = 1
				this.getSpecDetail()
				return
			}
			this.addShopCart(this.id)
		},
		getSpecDetail() {
			// || 35 
			this.checkedAttrs = []
			this.$http({
				url: `/app/common/spec/${this.detail.specTemplateId}`,
				method: 'get',
				noToken: true
			}).then((res) => {
				let data = res.data.data
				if (data) {
					this.toggleSkuShow = true
					this.specAttrPriceList = data.specAttrPriceList
					this.specList = this.changeData(data.specList || [])
				} else {
					if (this.isCarOrBuy == 1) { // 加入购物车
						this.addShopCart(this.id)
					} else {
						this.$navTo.togo('/pages2/order/confirm_list?id=' + this.id);
					}
					this.closePop()
				}
			})
		},
		changeData(data = this.specList) {
			let len = data.length
			if (!len) return []
			data[len - 1].specAttrList.forEach((e, i) => {
				e.check = e.check || false
				let id = e.specAttributeId
				if (len > 1) {
					id = data[0].specAttrList[this.selectGoodIndex].specAttributeId + ',' + id
				}
				let item = this.specAttrPriceList.find(e => e.specAttrIds == id)
				if (item) {
					e.standPrice = item.standPrice
					e.goodsId = item.goodsId
				}
			})
			// data.forEach((item, index) => {
			// 	if (index == len - 1) {
			// 		item.specAttrList.forEach((e, i) => {
			// 			 e.check = false

			// 		})
			// 	}
			// })
			return data
		},
		change(index) {
			this.current = index;
		},
		toShopcar() {
			uni.navigateTo({
				url: '/pages4/shopping/shoppingCart'
			})
		},
		getIsBuy() {
			this.$http({
				url: '/order/buyGoodsNotExpired',
				method: 'get',
				data: { goodsId: this.id }
			}).then((res) => {
				if (res.data.code == 200) {
					if (res.data.data) { // 有data返回是已经购买过的课程
						this.hadBuyCourse = res.data.data
						this.bugCourseModel = true
					}
				}
			})
		},
		changeKown() {
			this.bugCourseModel = false
		},
		async toStudy() {
			let item = this.hadBuyCourse
			if (item.goodsType == 6) { // 进入直播课
				this.toLive(item)
				return
			}
			// /course/goodsRebuildStatus查询用户商品重修状态
			let rebuildStatus = await this.courseGoodsRebuildStatus(item.goodsId, item.gradeId)

			if (rebuildStatus == 0) {
				this.$navTo.togo('/pages2/learn/details', {
					gradeId: item.gradeId,
					goodsId: item.goodsId,
					orderGoodsId: item.orderGoodsId,
				});
				return;
			}

			// /lock/lockStatus
			this.$api.lockLockStatus({
				action: 'jxjy',
				uuid: this.$method.getUuid()
			}).then(res => {
				if (res.data.code == 200) { //有其他端在操作，不能学习
					uni.showToast({
						icon: 'none',
						title: res.data.msg,
						mask: true,
						duration: 3000
					})
				} else if (res.data.code == 500) { //可以学习
					this.$http({
						url: '/course/courseList',
						method: 'get',
						data: {
							pageNum: 1,
							pageSize: 1,
							goodsId: item.goodsId,
							gradeId: item.gradeId,
							orderGoodsId: item.orderGoodsId,
						},
					})
						.then(res => {
							if (res.data.code == 200) {
								if (res.data.total > 1) {
									// this.$navTo.togo(`/pages2/wd/course?id=${item.goodsId}&gid=${item.gradeId}&orderGoodsId=${item.orderGoodsId}`);
									uni.navigateTo({
										url: `/pages3/polyv/detail?id=''&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`
									})
								} else if (res.data.total == 1) {
									uni.navigateTo({
										url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&gradeId=${item.gradeId}`
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '暂无可观看的视频课程'
									})
								}

							}
						})
				}
			})
		},
		toLive(item) {
			this.$api.courseCourseList({
				pageNum: 1,
				pageSize: 1,
				goodsId: item.goodsId,
				gradeId: 0,
				orderGoodsId: item.orderGoodsId,
			}).then(res => {
				if (res.data.code == 200) {
					if (res.data.total > 1) {
						// uni.navigateTo({
						// 	url:'/pages5/liveDetail/course?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
						// })
						uni.navigateTo({
							url: '/pages3/live/detail?orderGoodsId=' + item.orderGoodsId + '&goodsId=' + item.goodsId + '&gradeId=0&courseId=""'
						})
					} else if (res.data.total == 1) {
						uni.navigateTo({
							url: '/pages3/live/detail?orderGoodsId=' + item.orderGoodsId + '&goodsId=' + item.goodsId + '&gradeId=0&courseId=' + res.data.rows[0].courseId
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '暂无可观看的直播课程'
						})
					}

				}
			})
		},
		/**
		 * @param {Object} goodsId 商品id
		 * 查询商品重修状态
		 */
		courseGoodsRebuildStatus(goodsId, gradeId) {
			return new Promise(resolve => {
				this.$http({
					url: '/course/goodsRebuildStatus',
					method: 'get',
					data: {
						goodsId: goodsId,
						gradeId: gradeId
					},
					// noLoading: true,
					// compleLoading: true, // 请求成功是否还要继续显示加载中
				})
					.then(res => {
						resolve(res.data.data)
					})
			})
		},
		closePop() {
			this.toggleSkuShow = false
			this.skuItem = {}
		},
		// 获取规格属性值对应的商品信息
		getGoodsInfos(specAttrIds) {
			this.$http({
				url: '/app/common/attr/goods',
				method: 'get',
				data: {
					specTemplateId: this.detail.specTemplateId,
					specAttrIds: specAttrIds.join(',')
				},
				noToken: true
			}).then((res) => {
				if (res.data.code == 200) {
					this.skuItem = res.data.data || {}
				} else {
					this.skuItem = {}
					this.$u.toast('商品已下架, 请重新选择')
				}
			})
		},
		rightNowBuy() {
			let goodsIds = [...new Set(this.goodsIds)]
			this.$api.checkGoodsStatus({ goodsIds }).then(res => {
				if (res.data.code == 500) {
					return this.$u.toast(res.data.msg)
				}
				if (this.isCarOrBuy == 1) { // 加入购物车
					this.addShopCart(goodsIds)
				} else {
					if (this.isSingleChoice) {
						this.$navTo.togo('/pages2/order/confirm_list?id=' + goodsIds);
					} else {
						let data = []
						goodsIds.forEach(id => {
							data.push(this.specAttrPriceList.find(e => e.goodsId == id))
						})
						this.$store.commit('setShoppingCartList', { shoppingCartList: data });
						this.$navTo.togo('/pages2/order/confirm_pay');
					}
				}
				this.closePop()
			})

		}
	}
};
</script>
<style >
page {
	background-color: #F2F2F2;
}
</style>
<style lang="scss" scope>
@import './index.scss';

.video_t2 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}

.video_t1 {
	height: 80rpx;
	color: #333333;
	line-height: 80rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.video_t1_t {
	display: flex;
	flex-direction: column;
	height: 80rpx;
	color: #333333;
	text-align: center;
	align-items: center;
	border-left: solid 1px #d6d6db;
}

.video_play {
	position: absolute;
	width: 95rpx;
	height: 95rpx;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.video_box {
	position: relative;
}

.contents {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	margin-top: 16rpx;
	overflow: hidden;
}

.cou_title {
	padding: 24rpx 32rpx 40rpx 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.prices {
	.price_word {
		font-size: 40rpx;
		font-weight: 800;
		color: #FC3F3F;
	}

	.sale {
		color: #999999;
		font-size: 28rpx;
		margin-left: 8rpx;
	}

	.price_line {
		color: #999999;
		font-size: 28rpx;
		text-decoration: line-through;
		font-weight: 400;
	}

	.free {
		font-size: 32rpx;
	}
}

// tab
.tabs {
	// width: 100%;
	height: 78rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #F2F7FF;
	border-radius: 38rpx;
	margin: 24rpx;
	padding: 0rpx 5rpx;

	.tab_item {
		width: 345rpx;
		height: 65rpx;
		line-height: 65rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 32rpx;
		text-align: center;
		color: #333;

		&.nactive {
			color: #fff;
			background-color: #3577E8;
		}

		&.twoBtn {
			width: 50%;
		}

		&.threeBtn {
			width: 33%;
		}
	}

	// /deep/  .u-tabs {
	// 	background:none!important;
	// }
}

.courseName {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.videoBox {
	background-color: #FFFFFF;
	width: 100%;
	/* height: 680rpx; */
	z-index: 999;
}

.icon_up {
	width: 32rpx;
	height: 32rpx;
}

.courseItemBox {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 0 10rpx;
	margin-bottom: 20rpx;
}

.courseItem {
	height: 80rpx;
	color: #333333;
	font-size: 32rpx;
	line-height: 80rpx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;

}

.content {
	background-color: #FFFFFF;
	width: 100%;
}

.btn2 {
	width: 187rpx;
	height: 79rpx;
	line-height: 79rpx;
	background: #FC3F3F;
	border-radius: 40rpx;
	text-align: center;
	font-size: 24rpx;
}

.btn1 {
	width: 187rpx;
	height: 79rpx;
	line-height: 79rpx;
	background: #FFB102;
	border-radius: 40rpx;
	text-align: center;
	margin-right: 11rpx;
	font-size: 24rpx;
}

.blackFont {
	margin: 0 4rpx;
}

.wk_icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 12rpx;
}

.noteTag,
.blackFont {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #A7B0B8;
	align-items: center;
}

.priceTag {
	/* font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55; */
	width: 60rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	border: 1rpx solid #333;
}

.titleTag {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	// margin-left: 8rpx;
}

.yearTag {
	width: 80rpx;
	height: 32rpx;
	background: #EBF5FF;
	border: 2rpx solid #007AFF;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #007AFF;
	text-align: center;
	line-height: 32rpx;
}

.itemBox {
	background: #FFFFFF;
	box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
	border-radius: 24rpx;
	width: 100%;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

// 老师名字样式
.teacher_names {
	display: flex;
	padding-bottom: 15rpx;
	border-bottom: 2rpx solid #F0F0F0;

	.names {
		padding: 6rpx 12rpx;
		font-size: 26rpx;
		color: #969696;
		background: #F8F8F8;
		border-radius: 8rpx;
		margin-right: 10rpx;

		&.nactive {
			color: #3F8DFD;
			background: #F2F7FF;
		}
	}
}
</style>