|
|
@@ -1,1225 +1,1437 @@
|
|
|
<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>
|
|
|
+ <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> -->
|
|
|
+ <view
|
|
|
+ class="price_word"
|
|
|
+ v-if="
|
|
|
+ !detail.specTemplateId || (!detail.maxPrice && !detail.minPrice)
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ detail.standPrice === 0 ? "免费" : `￥${detail.standPrice}` }}
|
|
|
+ </view>
|
|
|
+ <!-- 范围价格 -->
|
|
|
+ <view v-else class="price_word">
|
|
|
+ <view>{{ detail.minPrice }}</view>
|
|
|
+ <template v-if="detail.minPrice != detail.maxPrice">
|
|
|
+ <text>-</text>
|
|
|
+ <view>{{ detail.maxPrice }}</view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ <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';
|
|
|
+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()
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ console.log(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;
|
|
|
+ background-color: #f2f2f2;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scope>
|
|
|
-@import './index.scss';
|
|
|
+@import "./index.scss";
|
|
|
|
|
|
.video_t2 {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ position: absolute;
|
|
|
+ width: 95rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
}
|
|
|
|
|
|
.video_box {
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
.contents {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #ffffff;
|
|
|
- margin-top: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .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 {
|
|
|
- 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;
|
|
|
- // }
|
|
|
+ // 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;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.videoBox {
|
|
|
- background-color: #FFFFFF;
|
|
|
- width: 100%;
|
|
|
- /* height: 680rpx; */
|
|
|
- z-index: 999;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ /* height: 680rpx; */
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
|
|
|
.icon_up {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
}
|
|
|
|
|
|
.courseItemBox {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ 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;
|
|
|
-
|
|
|
+ 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%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.btn2 {
|
|
|
- width: 187rpx;
|
|
|
- height: 79rpx;
|
|
|
- line-height: 79rpx;
|
|
|
- background: #FC3F3F;
|
|
|
- border-radius: 40rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
.noteTag,
|
|
|
.blackFont {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #A7B0B8;
|
|
|
- align-items: center;
|
|
|
+ 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-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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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>
|
谢杰标