|
|
@@ -1,536 +1,536 @@
|
|
|
-<template>
|
|
|
- <div calss="course-detail" >
|
|
|
- <!-- 课程详情 -->
|
|
|
- <div class="course" >
|
|
|
- <div class="cover">
|
|
|
- <img :src="state.imgCover" alt="">
|
|
|
- </div>
|
|
|
- <div class="desc" >
|
|
|
- <div class="price" >
|
|
|
- <div class="current-price" >{{state.price}}</div>
|
|
|
- <div class="discount-price" >原价：¥{{state.markingPrice}}</div>
|
|
|
- </div>
|
|
|
- <div class="title" >{{state.name}}</div>
|
|
|
- <div class="subtitle" >{{state.simpleDescription}}</div>
|
|
|
- <div class="sub-desc" >
|
|
|
- <div class="tag" >
|
|
|
- <div class="tag-item" >{{state.suitAge}}岁</div>
|
|
|
- <div class="tag-item" >{{state.chapterList.length}}讲</div>
|
|
|
- </div>
|
|
|
- <div class="buy" >
|
|
|
- <img :src="require('@/pages/Course/assets/learn_count.png')" alt="">
|
|
|
- <div>{{state.courseCount}}人学过</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 目录 -->
|
|
|
- <div class='meun-section' >
|
|
|
- <div class="tabs" :style="{top: currentVideo ? '210px' : '0px' }">
|
|
|
- <div
|
|
|
- :class="['tabs-item', curTabRef === item.id ? 'tabs-item-active' : '']"
|
|
|
- v-for="item in tabs"
|
|
|
- :key="item.id"
|
|
|
- @click="changeTabs(item.id)"
|
|
|
- >
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div class="line" :style="{left: curTabRef === 0 ? '80px' : '268px'}" ></div>
|
|
|
- </div>
|
|
|
- <div class="course-desc" v-if="curTabRef === 0" >
|
|
|
- <div v-html="state.description" ></div>
|
|
|
- </div>
|
|
|
- <div class="course-meun" v-if="curTabRef === 1" >
|
|
|
- <!-- 小分类 -->
|
|
|
- <div class='course-meun-tabs' >
|
|
|
- <div :class="['course-meun-tabs-item', chapterIdRef === item.id ? 'course-meun-tabs-item-active' : '']" @click="changeChapter(index, item.id)" v-for="(item, index) in state.chapterList" :key="item.id">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="course-meun-item"
|
|
|
- v-for="_ in currentMediaList"
|
|
|
- :key="_.id"
|
|
|
- >
|
|
|
- <div class='cover' @click="playCourse(_)">
|
|
|
- <div class="overlay" v-if="_.payType === 0" >
|
|
|
- <img class="lock" :src="require('@/pages/Course/assets/lock.png')" alt="">
|
|
|
- </div>
|
|
|
- <img :src="_.imgCover" alt="">
|
|
|
- </div>
|
|
|
- <div class="course-meun-item-intro" >
|
|
|
- <div class="title-container" >
|
|
|
- <div class="title">{{_.name}}</div>
|
|
|
- <div class="try-see" v-if="_.payType !== 0" >试看</div>
|
|
|
- </div>
|
|
|
- <div class="intro" >
|
|
|
- <div class="intro-item" v-if="mediaType === 0" ><img :src="require('@/pages/Course/assets/time.png')" alt=""><div>{{getDuration(_.video.duration)}}</div></div>
|
|
|
- <div class="intro-item" ><img :src="require('@/pages/Course/assets/play.png')" alt=""><div>{{_.readCountStr}}</div></div>
|
|
|
- <div class="intro-item" @click="openTeachingMaterial(_)" ><van-icon name="description" style="margin-right: 5px;margin-top: 2px;" /><div>资料</div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <video
|
|
|
- v-if="currentVideo"
|
|
|
- :style="{zIndex: currentVideo? 30 : 1}"
|
|
|
- :src="currentVideo"
|
|
|
- controls
|
|
|
- autoplay
|
|
|
- playsinline
|
|
|
- >
|
|
|
- </video>
|
|
|
-
|
|
|
- <!-- 打开app的按钮 如果没有app，就去应用市场 -->
|
|
|
- <div class="btn" >
|
|
|
- <!-- <div class="open-app-btn" >
|
|
|
- 加入学习解锁全部课程
|
|
|
- </div> -->
|
|
|
- <!-- <OpenApp appid='wxe87236d542cd0f94' /> -->
|
|
|
- <OpenApp appid='wxf6e96c65ba6116d4' text="加入学习解锁全部课程" :extinfo="'/course/pipeline?course_id=' + skuId" />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { getAICourse } from '@/api/course'
|
|
|
-import { getParentWXSignature } from '@/api/common'
|
|
|
-import { onMounted, ref } from 'vue'
|
|
|
-import OpenApp from '@/components/OpenApp/index.vue'
|
|
|
-import { registerWxopenButton } from '@/utils/utils'
|
|
|
-import { useRoute, useRouter } from 'vue-router'
|
|
|
-
|
|
|
-const userAgent = navigator.userAgent
|
|
|
-
|
|
|
-// 判断是否在微信中
|
|
|
-// var isInWeChat = /MicroMessenger/.test(userAgent)
|
|
|
-
|
|
|
-const route = useRoute()
|
|
|
-
|
|
|
-const router = useRouter()
|
|
|
-
|
|
|
-const skuId = route.query.skuId
|
|
|
-
|
|
|
-const tabs = [
|
|
|
- {
|
|
|
- name: '详情',
|
|
|
- id: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '目录',
|
|
|
- id: 1
|
|
|
- }
|
|
|
-]
|
|
|
-
|
|
|
-const curTabRef = ref(0)
|
|
|
-
|
|
|
-const state = ref({
|
|
|
- chapterList: []
|
|
|
-})
|
|
|
-
|
|
|
-const currentVideo = ref('')
|
|
|
-
|
|
|
-const currentMediaList = ref([])
|
|
|
-
|
|
|
-const chapterIdRef = ref('')
|
|
|
-
|
|
|
-const openTeachingMaterial = (record: any) => {
|
|
|
- if (record.payType == 0) return
|
|
|
- window.open(record.teachingMaterial.fileUrl)
|
|
|
-}
|
|
|
-
|
|
|
-const changeChapter = (index: number, id: string) => {
|
|
|
- currentMediaList.value = state.value.chapterList[index].itemList
|
|
|
- chapterIdRef.value = id
|
|
|
-}
|
|
|
-
|
|
|
-const getDuration = (count: any) => {
|
|
|
- const m = Math.floor(Number(count).toFixed(0) / 60)
|
|
|
- const s = Number(count).toFixed(0) % 60
|
|
|
- return (m > 10 ? m : '0' + m) + ':' + (s > 10 ? s : '0' + s)
|
|
|
-}
|
|
|
-
|
|
|
-// 0 视频 2 图文 1 音频
|
|
|
-const mediaType = ref(0)
|
|
|
-
|
|
|
-const playCourse = (record) => {
|
|
|
- if (record.payType === 0) return
|
|
|
- if (mediaType.value === 0) {
|
|
|
- currentVideo.value = record.video.videoUrl
|
|
|
- } else if (mediaType.value === 2) {
|
|
|
- router.push({
|
|
|
- path: '/media',
|
|
|
- query: { id: record.id }
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const changeTabs = (id: number) => {
|
|
|
- curTabRef.value = id
|
|
|
-}
|
|
|
-
|
|
|
-// 获取课程
|
|
|
-const _getAICourse = async () => {
|
|
|
- const { data } = await getAICourse({ skuId: skuId as string, hasWork: '' })
|
|
|
- state.value = data
|
|
|
- mediaType.value = data.mediaType
|
|
|
- currentMediaList.value = data.chapterList[0].itemList
|
|
|
- chapterIdRef.value = data.chapterList[0].id
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- _getAICourse()
|
|
|
- registerWxopenButton(getParentWXSignature)
|
|
|
-})
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped >
|
|
|
-.course-detail {
|
|
|
- width: 100vw;
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #F6F6F6;
|
|
|
-}
|
|
|
-.course {
|
|
|
- .cover {
|
|
|
- width: 375px;
|
|
|
- height: 231px;
|
|
|
- background-color: deepskyblue;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- object-fit: cover;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- }
|
|
|
- .desc {
|
|
|
- width: 375px;
|
|
|
- height: 185px;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 6px 11px 4px rgba(231,237,241,0.6);
|
|
|
- border-radius: 22px 22px 0px 0px;
|
|
|
- margin-top: -22px;
|
|
|
- padding: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- .price {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .current-price {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 26px;
|
|
|
- color: #FF1F1F;
|
|
|
- line-height: 37px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
- .discount-price {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- line-height: 17px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-decoration-line: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 18px;
|
|
|
- color: #333333;
|
|
|
- line-height: 25px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-top: 6px;
|
|
|
- }
|
|
|
- .subtitle {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- color: #797979;
|
|
|
- line-height: 20px;
|
|
|
- text-align: justify;
|
|
|
- font-style: normal;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- .sub-desc {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 16px;
|
|
|
- .tag {
|
|
|
- display: flex;
|
|
|
- .tag-item {
|
|
|
- width: 60px;
|
|
|
- height: 23px;
|
|
|
- background: #FFF2E8;
|
|
|
- margin-right: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 11px;
|
|
|
- color: #FF7422;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
- }
|
|
|
- .buy {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- line-height: 23px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 11px;
|
|
|
- height: 11px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.meun-section {
|
|
|
- margin-top: 20px;
|
|
|
- background-color: #F6F6F6;
|
|
|
-
|
|
|
- .tabs {
|
|
|
- width: 100vw;
|
|
|
- height: 58px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- background-color: #fff;
|
|
|
- position: sticky;
|
|
|
- top: 210px;
|
|
|
- z-index: 4;
|
|
|
- .tabs-item {
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #999999;
|
|
|
- line-height: 22px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- }
|
|
|
- .tabs-item-active {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 17px;
|
|
|
- color: #333333;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .line {
|
|
|
- width: 30px;
|
|
|
- height: 6px;
|
|
|
- background-color: #0B57C7;
|
|
|
- border-radius: 10px;
|
|
|
- position: absolute;
|
|
|
- top: 44px;
|
|
|
- left: 80px;
|
|
|
- }
|
|
|
- }
|
|
|
- .course-desc {
|
|
|
- width: 100vw;
|
|
|
- height: 42vh;
|
|
|
- padding: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 16px;
|
|
|
- color: #636161;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- .course-meun {
|
|
|
- width: 100vw;
|
|
|
- padding: 16px;
|
|
|
- padding-left: 26px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 100px;
|
|
|
- .course-meun-tabs {
|
|
|
- margin-bottom: 20px;
|
|
|
- width: calc(100vw - 32px);
|
|
|
- overflow: hidden;
|
|
|
- overflow-x: scroll;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .course-meun-tabs-item {
|
|
|
- background: #F6F6F6;
|
|
|
- border-radius: 18px;
|
|
|
- padding: 8px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #9B9B9B;
|
|
|
- line-height: 21px;
|
|
|
- height: 36px;
|
|
|
- margin-right: 20px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .course-meun-tabs-item-active {
|
|
|
- border: 1px solid #0B57C7;
|
|
|
- color: #0B57C7
|
|
|
- }
|
|
|
- }
|
|
|
- .course-meun-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- .cover {
|
|
|
- width: 107px;
|
|
|
- height: 60px;
|
|
|
- margin-right: 14px;
|
|
|
- position: relative;
|
|
|
- .overlay {
|
|
|
- width: 107px;
|
|
|
- height: 60px;
|
|
|
- background-color: rgba( 0, 0, 0, 0.6);
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 3;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: start;
|
|
|
- border-radius: 20px;
|
|
|
- .lock {
|
|
|
- width: 17px;
|
|
|
- height: 16px;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 107px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 20px;
|
|
|
- display: block;
|
|
|
- object-fit: cover;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- }
|
|
|
- .course-meun-item-intro {
|
|
|
- .title-container {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 220px;
|
|
|
- .title {
|
|
|
- max-width: 180px;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 15px;
|
|
|
- color: #333333;
|
|
|
- line-height: 21px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- margin-right: 6px;
|
|
|
- }
|
|
|
- .try-see {
|
|
|
- width: 39px;
|
|
|
- height: 18px;
|
|
|
- background: linear-gradient( 279deg, #FF9055 0%, #FFB856 100%);
|
|
|
- border-radius: 9px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .intro {
|
|
|
- display: flex;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #BEBEBE;
|
|
|
- line-height: 17px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- margin-top: 10px;
|
|
|
- .intro-item {
|
|
|
- margin-right: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- display: block;
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 210px;
|
|
|
- display: block;
|
|
|
- object-fit: cover;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
-.btn {
|
|
|
- width: 375px;
|
|
|
- height: 87px;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px -4px 34px 0px rgba(0,0,0,0.06);
|
|
|
- position: fixed;
|
|
|
- bottom: -2px;
|
|
|
- left: 0%;
|
|
|
- z-index: 100;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .open-app-btn {
|
|
|
- width: 343px;
|
|
|
- height: 46px;
|
|
|
- background: linear-gradient( 306deg, #FF9A59 0%, #FF4747 100%);
|
|
|
- border-radius: 23px;
|
|
|
- font-family: PingFangSC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 25px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div calss="course-detail" >
|
|
|
+ <!-- 课程详情 -->
|
|
|
+ <div class="course" >
|
|
|
+ <div class="cover">
|
|
|
+ <img :src="state.imgCover" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="desc" >
|
|
|
+ <div class="price" >
|
|
|
+ <div class="current-price" >{{state.price}}</div>
|
|
|
+ <div class="discount-price" >原价：¥{{state.markingPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="title" >{{state.name}}</div>
|
|
|
+ <div class="subtitle" >{{state.simpleDescription}}</div>
|
|
|
+ <div class="sub-desc" >
|
|
|
+ <div class="tag" >
|
|
|
+ <div class="tag-item" >{{state.suitAge}}岁</div>
|
|
|
+ <div class="tag-item" >{{state.chapterList.length}}讲</div>
|
|
|
+ </div>
|
|
|
+ <div class="buy" >
|
|
|
+ <img :src="require('@/pages/Course/assets/learn_count.png')" alt="">
|
|
|
+ <div>{{state.courseCount}}人学过</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 目录 -->
|
|
|
+ <div class='meun-section' >
|
|
|
+ <div class="tabs" :style="{top: currentVideo ? '210px' : '0px' }">
|
|
|
+ <div
|
|
|
+ :class="['tabs-item', curTabRef === item.id ? 'tabs-item-active' : '']"
|
|
|
+ v-for="item in tabs"
|
|
|
+ :key="item.id"
|
|
|
+ @click="changeTabs(item.id)"
|
|
|
+ >
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="line" :style="{left: curTabRef === 0 ? '80px' : '268px'}" ></div>
|
|
|
+ </div>
|
|
|
+ <div class="course-desc" v-if="curTabRef === 0" >
|
|
|
+ <div v-html="state.description" ></div>
|
|
|
+ </div>
|
|
|
+ <div class="course-meun" v-if="curTabRef === 1" >
|
|
|
+ <!-- 小分类 -->
|
|
|
+ <div class='course-meun-tabs' >
|
|
|
+ <div :class="['course-meun-tabs-item', chapterIdRef === item.id ? 'course-meun-tabs-item-active' : '']" @click="changeChapter(index, item.id)" v-for="(item, index) in state.chapterList" :key="item.id">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="course-meun-item"
|
|
|
+ v-for="_ in currentMediaList"
|
|
|
+ :key="_.id"
|
|
|
+ >
|
|
|
+ <div class='cover' @click="playCourse(_)">
|
|
|
+ <div class="overlay" v-if="_.payType === 0" >
|
|
|
+ <img class="lock" :src="require('@/pages/Course/assets/lock.png')" alt="">
|
|
|
+ </div>
|
|
|
+ <img :src="_.imgCover" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="course-meun-item-intro" >
|
|
|
+ <div class="title-container" >
|
|
|
+ <div class="title">{{_.name}}</div>
|
|
|
+ <div class="try-see" v-if="_.payType !== 0" >试看</div>
|
|
|
+ </div>
|
|
|
+ <div class="intro" >
|
|
|
+ <div class="intro-item" v-if="mediaType === 0 && _.video" ><img :src="require('@/pages/Course/assets/time.png')" alt=""><div>{{getDuration(_.video.duration)}}</div></div>
|
|
|
+ <div class="intro-item" ><img :src="require('@/pages/Course/assets/play.png')" alt=""><div>{{_.readCountStr}}</div></div>
|
|
|
+ <div class="intro-item" @click="openTeachingMaterial(_)" ><van-icon name="description" style="margin-right: 5px;margin-top: 2px;" /><div>资料</div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <video
|
|
|
+ v-if="currentVideo"
|
|
|
+ :style="{zIndex: currentVideo? 30 : 1}"
|
|
|
+ :src="currentVideo"
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ playsinline
|
|
|
+ >
|
|
|
+ </video>
|
|
|
+
|
|
|
+ <!-- 打开app的按钮 如果没有app，就去应用市场 -->
|
|
|
+ <div class="btn" >
|
|
|
+ <!-- <div class="open-app-btn" >
|
|
|
+ 加入学习解锁全部课程
|
|
|
+ </div> -->
|
|
|
+ <!-- <OpenApp appid='wxe87236d542cd0f94' /> -->
|
|
|
+ <OpenApp appid='wxf6e96c65ba6116d4' text="加入学习解锁全部课程" :extinfo="'/course/pipeline?course_id=' + skuId" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { getAICourse } from '@/api/course'
|
|
|
+import { getParentWXSignature } from '@/api/common'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import OpenApp from '@/components/OpenApp/index.vue'
|
|
|
+import { registerWxopenButton } from '@/utils/utils'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const userAgent = navigator.userAgent
|
|
|
+
|
|
|
+// 判断是否在微信中
|
|
|
+// var isInWeChat = /MicroMessenger/.test(userAgent)
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const skuId = route.query.skuId
|
|
|
+
|
|
|
+const tabs = [
|
|
|
+ {
|
|
|
+ name: '详情',
|
|
|
+ id: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '目录',
|
|
|
+ id: 1
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const curTabRef = ref(0)
|
|
|
+
|
|
|
+const state = ref({
|
|
|
+ chapterList: []
|
|
|
+})
|
|
|
+
|
|
|
+const currentVideo = ref('')
|
|
|
+
|
|
|
+const currentMediaList = ref([])
|
|
|
+
|
|
|
+const chapterIdRef = ref('')
|
|
|
+
|
|
|
+const openTeachingMaterial = (record: any) => {
|
|
|
+ if (record.payType == 0) return
|
|
|
+ window.open(record.teachingMaterial.fileUrl)
|
|
|
+}
|
|
|
+
|
|
|
+const changeChapter = (index: number, id: string) => {
|
|
|
+ currentMediaList.value = state.value.chapterList[index].itemList
|
|
|
+ chapterIdRef.value = id
|
|
|
+}
|
|
|
+
|
|
|
+const getDuration = (count: any) => {
|
|
|
+ const m = Math.floor(Number(count).toFixed(0) / 60)
|
|
|
+ const s = Number(count).toFixed(0) % 60
|
|
|
+ return (m > 10 ? m : '0' + m) + ':' + (s > 10 ? s : '0' + s)
|
|
|
+}
|
|
|
+
|
|
|
+// 0 视频 2 图文 1 音频
|
|
|
+const mediaType = ref(0)
|
|
|
+
|
|
|
+const playCourse = (record) => {
|
|
|
+ if (record.payType === 0) return
|
|
|
+ if (mediaType.value === 0) {
|
|
|
+ currentVideo.value = record.video.videoUrl
|
|
|
+ } else if (mediaType.value === 2) {
|
|
|
+ router.push({
|
|
|
+ path: '/media',
|
|
|
+ query: { id: record.id }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const changeTabs = (id: number) => {
|
|
|
+ curTabRef.value = id
|
|
|
+}
|
|
|
+
|
|
|
+// 获取课程
|
|
|
+const _getAICourse = async () => {
|
|
|
+ const { data } = await getAICourse({ skuId: skuId as string, hasWork: '' })
|
|
|
+ state.value = data
|
|
|
+ mediaType.value = data.mediaType
|
|
|
+ currentMediaList.value = data.chapterList[0].itemList
|
|
|
+ chapterIdRef.value = data.chapterList[0].id
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ _getAICourse()
|
|
|
+ registerWxopenButton(getParentWXSignature)
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped >
|
|
|
+.course-detail {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+}
|
|
|
+.course {
|
|
|
+ .cover {
|
|
|
+ width: 375px;
|
|
|
+ height: 231px;
|
|
|
+ background-color: deepskyblue;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ object-fit: cover;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ width: 375px;
|
|
|
+ height: 185px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 6px 11px 4px rgba(231,237,241,0.6);
|
|
|
+ border-radius: 22px 22px 0px 0px;
|
|
|
+ margin-top: -22px;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ .price {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .current-price {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #FF1F1F;
|
|
|
+ line-height: 37px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .discount-price {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 17px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration-line: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .subtitle {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #797979;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: justify;
|
|
|
+ font-style: normal;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .sub-desc {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
+ .tag {
|
|
|
+ display: flex;
|
|
|
+ .tag-item {
|
|
|
+ width: 60px;
|
|
|
+ height: 23px;
|
|
|
+ background: #FFF2E8;
|
|
|
+ margin-right: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 11px;
|
|
|
+ color: #FF7422;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buy {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 23px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.meun-section {
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: 100vw;
|
|
|
+ height: 58px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ background-color: #fff;
|
|
|
+ position: sticky;
|
|
|
+ top: 210px;
|
|
|
+ z-index: 4;
|
|
|
+ .tabs-item {
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ }
|
|
|
+ .tabs-item-active {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 30px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: #0B57C7;
|
|
|
+ border-radius: 10px;
|
|
|
+ position: absolute;
|
|
|
+ top: 44px;
|
|
|
+ left: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .course-desc {
|
|
|
+ width: 100vw;
|
|
|
+ height: 42vh;
|
|
|
+ padding: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #636161;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .course-meun {
|
|
|
+ width: 100vw;
|
|
|
+ padding: 16px;
|
|
|
+ padding-left: 26px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ .course-meun-tabs {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: calc(100vw - 32px);
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-x: scroll;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .course-meun-tabs-item {
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 8px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #9B9B9B;
|
|
|
+ line-height: 21px;
|
|
|
+ height: 36px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .course-meun-tabs-item-active {
|
|
|
+ border: 1px solid #0B57C7;
|
|
|
+ color: #0B57C7
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .course-meun-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .cover {
|
|
|
+ width: 107px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 14px;
|
|
|
+ position: relative;
|
|
|
+ .overlay {
|
|
|
+ width: 107px;
|
|
|
+ height: 60px;
|
|
|
+ background-color: rgba( 0, 0, 0, 0.6);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 3;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: start;
|
|
|
+ border-radius: 20px;
|
|
|
+ .lock {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 107px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: block;
|
|
|
+ object-fit: cover;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .course-meun-item-intro {
|
|
|
+ .title-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 220px;
|
|
|
+ .title {
|
|
|
+ max-width: 180px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 21px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .try-see {
|
|
|
+ width: 39px;
|
|
|
+ height: 18px;
|
|
|
+ background: linear-gradient( 279deg, #FF9055 0%, #FFB856 100%);
|
|
|
+ border-radius: 9px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro {
|
|
|
+ display: flex;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #BEBEBE;
|
|
|
+ line-height: 17px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ margin-top: 10px;
|
|
|
+ .intro-item {
|
|
|
+ margin-right: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ display: block;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ display: block;
|
|
|
+ object-fit: cover;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+.btn {
|
|
|
+ width: 375px;
|
|
|
+ height: 87px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -4px 34px 0px rgba(0,0,0,0.06);
|
|
|
+ position: fixed;
|
|
|
+ bottom: -2px;
|
|
|
+ left: 0%;
|
|
|
+ z-index: 100;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .open-app-btn {
|
|
|
+ width: 343px;
|
|
|
+ height: 46px;
|
|
|
+ background: linear-gradient( 306deg, #FF9A59 0%, #FF4747 100%);
|
|
|
+ border-radius: 23px;
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
lvkun996
