zc_saas_h5/pages3/course/detail.vue

<template>
	<view style="padding-bottom: 140rpx">
		<nav-bar title="课程详情"></nav-bar>
		<view class="videoBox">
			<!-- <view > -->
			<view class="video_box" v-if="!vid">
				<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">
				<my-player ref="player" :playVid="vid" :autoplay="true" @timeupdate="timeupdate"></my-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 class="bus_ary">
					<view>{{businessData.educationName}}</view>
					<view>{{businessData.aliasName}}</view>
					<view v-if="!isJx">{{courseList.length || '-'}}课程 {{detail.classHours || '-'}}学时</view>
				</view>
				<view style="
            display: flex;
            margin-top: 13rpx;
			align-items: center;
          ">
					<view class="prices">
						<!-- <text v-if="detail.standPrice" class="price_word">¥ {{ detail.standPrice }}</text>
						<text v-else class="price_word free">免费</text> -->
						<view class="price_word" v-if="
                !detail.specTemplateId || (!detail.maxPrice && !detail.minPrice)
              "><text v-if="detail.standPrice"><text
									style="font-size: 28rpx;font-weight: 400;">￥</text>{{detail.standPrice | formatPrice}}</text><text
								v-else>免费</text>
						</view>
						<!-- 范围价格 -->
						<view v-else class="price_word">
							<view><text
									style="font-size: 28rpx;font-weight: 400;">￥</text>{{ detail.minPrice | formatPrice }}
							</view>
							<template v-if="detail.minPrice != detail.maxPrice">
								<text>-</text>
								<view><text
										style="font-size: 28rpx;font-weight: 400;">￥</text>{{ detail.maxPrice | formatPrice }}
								</view>
							</template>
						</view>
					</view>
					<text class="price2" v-if="detail.linePrice">原价：￥{{detail.linePrice | formatPrice}}</text>
				</view>
			</view>
			<!-- </view> -->
		</view>
		<view class="contents" v-if="list.length">
			<!-- <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="[{ nactive: current == item.value }]" @click="change(item.value)">{{ item.name }}
				</view>
			</view>
			<view style="padding: 20rpx; padding-bottom: 100rpx; position: relative" v-show="current == 0">
				<view class="content">
					<view v-if="detail.mobileDetailHtml" v-html="detail.mobileDetailHtml"
						style="width: 100%; overflow: hidden"></view>
					<view class="noGoods" v-else>
						<img src="https://file.xyyxt.net/web/static/img/no-content.png" alt="">
						<view class="">
							暂无数据
						</view>
					</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">
									<course-tree :propParam="{
                      courseId: item.courseId,
                    }" :isBuy="false"></course-tree>
									<u-line></u-line>
								</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">
								<course-tree :isBuy="false"></course-tree>
								<u-line></u-line>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view style="padding: 20rpx; padding-bottom: 100rpx; position: relative" v-show="current == 2">
				<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 v-show="current == 3" style="padding: 0 10rpx">
				<handouts-box :isBuy="false" :isShowSearch="false" :isShowDownIcon="false"
					:handoutsId="detail.handoutsId" v-if="detail.handoutsId" />
				<view class="noGoods" v-else>
					<img src="https://file.xyyxt.net/web/static/img/no-content.png" alt="">
					<view class="">
						暂无数据
					</view>
				</view>
			</view>
			<!-- 学员须知 -->
			<view v-show="current == 4" class="buyNote">

				<view class="_note" style="white-space: pre-wrap" v-html="
                        detail.buyNote &&
                        detail.buyNote.replace(/\n|\r\n/g, '<br>')
                      " v-if="detail.buyNote"></view>
				<view class="noGoods" v-else>
					<img src="https://file.xyyxt.net/web/static/img/no-msg.png" alt="">
					<view class="">
						暂无数据
					</view>
				</view>
			</view>
		</view>

		<view class="bottomBox" v-if="!hideBuyState">
			<template v-if="!options.isAct">
				<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" v-if="!disCode">
						<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" v-if="!disCode" @click="addCart()">加入购物车</view>
					<view class="btn2" @click="buy()">立即购买 </view>
				</view>
			</template>
			<template v-else>
				<view class="btn2" style="color: #ffffff; position: absolute; right: 24rpx" @click="drawBuy()">立即领取
				</view>
			</template>
		</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 v-for="spec in item.specAttrList" :key="spec.specAttributeId">
										<view class="check_box_item" v-if="spec.goodsId"
											:class="spec.check ? 'selected' : ''">
											<u-checkbox @change="checkboxChange" v-model="spec.check"
												:name="spec.specAttributeId">
												<view class="price_box">
													<view class="check_box_item_titme">{{
                            spec.name
                          }}</view>
													<view class="price">￥{{ spec.standPrice }}</view>
												</view>
											</u-checkbox>
										</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 handoutsBox from "@/components/course/handoutsBox.vue";
	import courseTree from "@/components/course/courseTree.vue";
	import myPlayer from "@/components/myPlayer/polyvPlayer.vue";
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	export default {
		components: {
			handoutsBox,
			courseTree,
			myPlayer,
		},
		data() {
			return {
				id: 0,
				list: [],
				menuIndex: [],
				current: 0,
				detail: {},
				courseList: [],
				menuList: [],
				freeMenuList: [],
				playbackRate: [1.0],
				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: [],
				options: {},
				courseId: "",
				refPlv: null,
				isQdy: 0,
			};
		},
		computed: {
			...mapGetters(["userInfo", "playSectionId", "hideBuyState"]),
			allPrice() {
				if (!this.specList.length) return 0;
				let allPrice = this.specList.slice(-1)[0].specAttrList.reduce((a, b) => {
					if (b.check) {
						return a + b.standPrice;
					}
					return a;
				}, 0);
				return this.toFixed(allPrice);
			},
			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;
			},
			disCode() {
				return this.options.distributionCode;
			},
			isJx() {
				// 8 讲义资料商品
				return this.goodsType == 8;
			},
		},
		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];
				}
				this.id = optObj.id;
				this.goodsType = optObj.goodsType || optObj.gt;
				console.log("optObj.sc:", optObj);
				uni.setStorageSync("newUser_sc", optObj.sc);
				uni.setStorageSync("shareActivityCode", optObj.sac);
				if (optObj.sac && this.$method.isLogin()) {
					this.editShareActivityCode();
				}
			} else {
				// 小程序正常跳转的
				// this.id => goodsId
				this.id = option.id;
				this.goodsType = option.goodsType || option.gt;
				this.options = option;
				if (option.sac) {
					uni.setStorageSync("shareActivityCode", option.sac);
					if (this.$method.isLogin()) {
						//已登录
						this.editShareActivityCode();
						this.getIsBuy(); // 判断是否已经购买过该课程
					}
				}
			}
			this.disCode ? this.getFxDetail() : this.getDetail();
			// 非讲义商品
			if (!this.isJx) {
				this.goodsCourseList();
				this.appCommonGoodsCourseModuleFreeExamList();
			} else {
				this.list = [{
						name: "资料目录",
						value: 3,
					},
					{
						name: "学员须知",
						value: 4,
					},
				];
				this.current = 3;
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
			// #endif
		},
		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() {
			uni.$on("getSection", (item, listen) => {
				console.log("🚀 ~ file: detail.vue:578 ~ uni.$on ~ item:", item, listen);
				//播放试听
				this.listenSecond = listen.auditionMinute;
				if (this.listenSecond > 0) {
					if (item.recordingUrl) {
						if (this.vid && !this.refPlv) {
							this.refPlv = this.$refs.player;
						}
						this.vid = item.recordingUrl;
						if (this.refPlv) {
							this.refPlv.changeVid({
								vid: this.vid,
								videoCurrentTime: 0,
							});
						}
					} else {
						this.$u.toast("地址错误，无法播放");
					}
				} else {
					this.$u.toast("试听配置错误");
				}
			});
			this.updateChapterOpen(true);
		},
		methods: {
			...mapMutations(["updateChapterOpen"]),
			itemWidth() {
				return 100 / this.list.length + "%";
			},
			// 修改用户活动邀请码
			editShareActivityCode() {
				console.log("修改用户活动邀请码");
				this.$http({
					url: "/app/user/edit/shareActivityCode",
					method: "post",
					data: {
						shareActivityCode: uni.getStorageSync("shareActivityCode"),
					},
				}).then((res) => {
					if (res.data.code == 200) {}
				});
			},
			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: "课程介绍",
								value: 0,
							},
							{
								name: "章节目录",
								value: 1,
							},
							{
								name: "赠送",
								value: 2,
							},
							{
								name: "学员须知",
								value: 4,
							},
						];
					} else {
						this.list = [{
								name: "课程介绍",
								value: 0,
							},
							{
								name: "章节目录",
								value: 1,
							},
							{
								name: "学员须知",
								value: 4,
							},
						];
					}

					console.log(this.list);
				});
			},
			selectGoodType(index) {
				if (index == this.selectGoodIndex) {
					return;
				}
				this.selectGoodIndex = index;
				this.changeData();
			},
			select(val) {
				val.check = !val.check;
			},
			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";
				}
			},
			timeupdate(time) {
				if (time >= this.listenSecond) {
					this.listenSecond = time + 100;
					let refPlv = this.$refs.player;
					refPlv.playPause();
					refPlv.exitFullScreen();
					uni.showModal({
						title: "提示",
						content: "试听结束，购买课程可学习全部",
						showCancel: false,
						success: (resst) => {
							this.vid = "";
							this.refPlv = "";
						},
					});
				}
			},
			openCourse(item) {
				this.courseId = item.courseId;
				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,
						choiceStatus: 1,
					})
					.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) => {
					console.log(
						"🚀 ~ file: detail.vue:708 ~ this.$api.goodsCourseList ~ res:",
						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) => {
						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) {
				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;
						}
						item.menuList = res.data.rows;
					}
				});
			},
			paramsFn() {
				return {
					listenConfigList: this.listenConfigList,
				};
			},
			getFxDetail() {
				let self = this;
				this.$api
					.fxGoodsDetail({
						goodsId: this.id,
						disCode: this.disCode,
					})
					.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
									);
								}
							}
						}
					});
			},
			// 获取课程详情
			getDetail() {
				let self = this;
				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
								);
							}
						}
					}
				});
			},
			toConfirmList(id) {
				uni.navigateTo({
					url: "/pages2/order/confirm_list?id=" + id + this.addParam(),
				});
			},
			addParam(str = "") {
				if (this.disCode) {
					str += "&distributionCode=" + this.disCode;
				}
				if (this.options.linkCode) {
					str += "&linkCode=" + this.options.linkCode;
				}
				return str;
			},
			ordercheckbuy(id) {
				return new Promise((resolve) => {
					this.$api
						.ordercheckbuy(id)
						.then((res) => {
							console.log(res);
							if (res.data.data) {
								uni.showModal({
									title: "提示",
									content: "当前课程已满员，详情请联系客服电话：020-87085983",
									cancelText: "取消",
									confirmText: "确定",
									success: (res) => {},
								});
							}
							resolve(!res.data.data);
						})
						.catch((err) => {
							this.$message({
								type: "warning",
								message: err.msg,
							});
							resolve(true);
						});
				});
			},
			async buy() {
				if (this.$method.isGoLogin()) {
					return;
				}
				let canbuy = await this.ordercheckbuy(this.detail.goodsId);
				if (!canbuy) return;
				// 判断有没有规格选择
				if (this.detail.specTemplateId) {
					this.isCarOrBuy = 2;
					this.getSpecDetail();
					return;
				}
				this.toConfirmList(this.id);
			},
			drawBuy() {
				if (!this.$method.isLogin()) {
					uni.navigateTo({
						url: "/pages4/login/login?isBack=" + true + "&isAct=1",
					});
					return;
				}
				this.$api
					.drowActGoods({
						url: location.href,
						goodsList: [this.detail],
						sellerName: this.options.sale,
					})
					.then((res) => {
						if (res.data.code == 200) {
							// this.$u.toast("领取成功");
							uni.showModal({
								title: "提示",
								content: "领取成功,是否现在去做题？",
								cancelText: "取消",
								confirmText: "确定",
								success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url: "/pages/questionBank/index",
										});
									}
								},
							});
						} else {
							this.$u.toast(res.data.msg);
						}
					});
			},
			async addCart() {
				if (this.$method.isGoLogin()) {
					return;
				}
				let canbuy = await this.ordercheckbuy(this.detail.goodsId);
				if (!canbuy) return;
				// 判断有没有规格选择
				if (this.detail.specTemplateId) {
					this.isCarOrBuy = 1;
					this.getSpecDetail();
					return;
				}
				this.addShopCart(this.id);
			},
			getSpecDetail() {
				this.checkedAttrs = [];
				let data = {};
				let url = `/app/common/spec/${this.detail.specTemplateId}`;
				if (this.disCode) {
					url = "/app/common/distribution/spec";
					data = {
						disCode: this.disCode,
						specTemplateId: this.detail.specTemplateId,
					};
				}
				this.$http({
					url,
					method: "get",
					noToken: true,
					data,
				}).then((res) => {
					let data = res.data.data;
					if (data) {
						this.toggleSkuShow = true;
						this.specAttrPriceList = data.specAttrPriceList;
						this.specList = this.changeData(data.specList || []);
						this.isQdy = data.sign;
					} else {
						if (this.isCarOrBuy == 1) {
							// 加入购物车
							this.addShopCart(this.id);
						} else {
							this.toConfirmList(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;
					} else {
						e.goodsId = null;
					}
				});
				// data.forEach((item, index) => {
				// 	if (index == len - 1) {
				// 		item.specAttrList.forEach((e, i) => {
				// 			 e.check = false

				// 		})
				// 	}
				// })
				return data;
			},
			change(index) {
				this.current = index;
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 300
				// })
			},
			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;
				}
				this.$method.checkLock().then((res) => {
					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.toConfirmList(goodsIds);
						} else {
							let data = [];
							goodsIds.forEach((id) => {
								data.push(this.specAttrPriceList.find((e) => e.goodsId == id));
							});
							this.$store.commit("setShoppingCartList", {
								shoppingCartList: data,
							});
							if (this.isQdy == 1) {
								this.toConfirmList("");
								return;
							}
							this.$navTo.togo("/pages2/order/confirm_pay" + this.addParam("?"));
						}
					}
					this.closePop();
				});
			},
		},
		provide() {
			return {
				paramsFn: this.paramsFn,
			};
		},
	};
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scope>
	@import "./index.scss";

	/deep/ {
		.menuBox {
			padding: 0;
		}
	}

	.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 20rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		&>.bus_ary {
			margin-top: 14rpx;
			display: flex;
			flex-wrap: wrap;

			&>view {
				margin-right: 16rpx;
				margin-bottom: 10rpx;
				background-color: rgb(235, 238, 245);
				color: #666;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
			}
		}
	}

	.price2 {
		margin-left: 30rpx;
		text-decoration: line-through;
		color: #aaaaaa;
		font-size: 24rpx;
	}

	.prices {
		.price_word {
			display: flex;
			font-size: 44rpx;
			font-weight: 800;
			color: #fc3f3f;
			margin-bottom: 8rpx;

			// view::before {
			// 	content: "￥";
			// 	font-size: 26rpx;
			// 	font-weight: bold;
			// }
		}

		.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 {
			flex: 1;
			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;
			}
		}

		// /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;
		padding: 20rpx;
	}

	.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: #007aff;
		border-radius: 40rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.btn1 {
		width: 187rpx;
		height: 79rpx;
		line-height: 79rpx;
		background: #cce4ff;
		border-radius: 40rpx;
		text-align: center;
		margin-right: 11rpx;
		font-size: 28rpx;
		color: #1890ff;
	}

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

	.noteTag,
	.blackFont {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		align-items: center;
		margin: 0 4rpx;
		line-height: 60rpx;
	}

	.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-bottom: 10rpx;
		// 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;
			}
		}
	}

	.buyNote {
		padding: 20rpx;

		&>._note {
			padding: 20rpx;
			background-color: rgb(245, 247, 250);
			border-radius: 16rpx;
		}
	}

	.noGoods {
		display: flex;
		flex-direction: column;
		align-items: center;

		&>img {
			margin-top: 20rpx;
			width: 300rpx;
			height: 300rpx;
		}

		&>view {
			font-size: 30rpx;
			margin-top: 30rpx;
			color: #666;
		}
	}
</style>