<template> <div class="courseDetail"> <div class="header"> <van-swipe class="my-swipe" indicator-color="white" v-if="detailData.coverList && detailData.coverList.length > 0"> <van-swipe-item v-for="(n, i) in detailData.coverList" :key="i"> <video v-if="n.cover_url.indexOf('.mp4') > -1" id="video" :src="n.cover_url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4" ></video> <img v-if="n.cover_url.indexOf('.mp4') == -1" :src="n.cover_url" /> </van-swipe-item> </van-swipe> <img v-else src="../assets/defCoure.jpg" alt="" /> </div> <div class="content"> <div class="title"> <h3>{{ detailData.course_name }}</h3> <div class="rightCorse"> <p> <b>{{ detailData.courseScore == 0 ? '0.0' : detailData.courseScore }}</b ><b>分</b> </p> <p><van-rate v-model="detailData.courseScore" readonly allow-half void-icon="star" void-color="#eee" /></p> </div> </div> <div class="courseInfo">“{{ detailData.course_info }}”</div> <div class="labels oh"> <div class="fl"> <template v-for="(n, i) in detailData.course_labels"> <span v-if="n" :key="i">{{ n }}</span> </template> </div> </div> <div class="popularity"> <van-icon name="medal" /> <span>课程人气榜第{{ detailData.rank }}名</span> <van-icon name="arrow" /> </div> <div class="area"> <van-icon name="location" /> <span>{{ detailData.address }}</span> <van-icon name="arrow" /> </div> <div class="phone"> <van-icon name="phone" /> <template v-for="(n, i) in detailData.mobiles"> <span v-if="n" :key="i" ><a :href="'tel:' + n">{{ n }}</a></span > </template> </div> <hr /> <div class="days"> <h3>预约排期</h3> <ul> <template v-for="(n, i) in detailData.courseTimeList"> <li v-if="n.day" class="" :key="i"> <span>{{ n.day + ' ' + n.time }}</span> </li> </template> </ul> <p>课程日期仅供参考,详情咨询基地</p> </div> <hr /> <div ref="pronbit" :class="tabTop ? 'tabTop' : ''"> <van-tabs v-model="tabActive" @click="tabClick"> <van-tab title="课程目标" name="kcjs"></van-tab> <van-tab title="课程表" name="kcb"></van-tab> <van-tab title="课程内容" name="kcnr"></van-tab> <van-tab title="课程须知" name="kcxz"></van-tab> </van-tabs> </div> <h3 class="positionTitle" id="kcjs"><b>课程目标</b><u></u></h3> <div class="courseCont" v-html="detailData.introduction"></div> <hr /> <h3 class="positionTitle" id="kcb"><b>课程表</b><u></u></h3> <div class="courseCard"> <div class="cardTitle"> <span @click="clickCardDay(i)" :class="cardActive == i ? 'active' : ''" v-for="(n, i) in detailData.courseScheduleList" :key="n.day" >第{{ n.day }}天</span > </div> <div class="cardCont"> <table cellspacing="0" cellpadding="10"> <tbody ref="courseCard"></tbody> </table> </div> </div> <hr /> <h3 class="positionTitle" id="kcnr"><b>课程内容</b><u></u></h3> <ul class="courseContent"> <li v-for="(n, i) in detailData.courseContentList" :key="n.id"> <span class="left">{{ n.title }}</span> <h3>{{ n.content }}</h3> <div class="item" v-for="(k, j) in n.courseFileList" :key="i + '' + j"> <div> <video v-if="k.url && k.url.indexOf('.mp4') > -1" id="video" :src="k.url" poster="" controls="controls" windowlessvideo="true" playsinline="true" webkit-playsinline="true" x5-playsinline="true" x-webkit-airplay="allow" width="100%" height="260px" type="video/mp4" ></video> </div> <div> <img v-if="k.url && k.url.indexOf('.mp4') == -1" :src="k.url" /> </div> <!-- <p><b>{{(j+1)+'.'+k.name}}</b><span>{{getFileFormat(k.name)+getFileSize(k.size)}}</span></p> <p>{{n.teacherName}} | {{k.lookCount}}预览</p> --> </div> </li> </ul> <hr /> <h3 class="positionTitle" id="kcxz"><b>课程须知</b><u></u></h3> <div class="courseNotice" v-html="detailData.notice"></div> <hr /> <div class="evaluate"> <h3>大家的评价</h3> <div class="spans"> <span @click="evaluateTab(0)">全部</span> <span @click="evaluateTab(1)">最新</span> </div> <ul class="move"> <li v-for="(n, i) in EvaluationList" :key="i"> <div class="head"> <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" /> <div class="name"> <h5>{{ n.name }}</h5> <p>{{ n.intime.substring(0, 10) }}</p> </div> </div> <div class="contBox"> {{ n.evaluation }} </div> <div class="imgs"> <img v-for="(k, j) in n.imgList" :key="j" :src="n" alt="" /> </div> </li> <p v-if="EvaluationList.length === EvaluationCount && EvaluationList.length > 0" class="noMove">没有更多了</p> <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无评价" v-if="EvaluationList.length == 0" /> </ul> <div class="appendMore" v-if="EvaluationList.length < EvaluationCount" @click="evaluationMore()">查看更多</div> </div> <hr /> <AllLoveGo></AllLoveGo> </div> <div class="Collection oh" v-if="isWeb"> <div class="box"> <div class="icon" @click="goBaseDetail(detailData.baseId)"> <p><van-icon name="wap-home-o" /></p> <p>基地</p> </div> <div class="icon"> <p><van-icon name="service-o" /></p> <p>电话咨询</p> </div> </div> <div class="box"> <span v-if="userInfo" @click="AddMyWish" ><van-icon :name="detailData.isWish == 0 ? 'like-o' : 'like'" /><b>{{ detailData.isWish == 0 ? '预约' : '已预约' }}</b></span > <span v-else ><router-link to="/LoginPublic"><b>去登录</b></router-link></span > </div> </div> </div> </template> <script> import AllLoveGo from '../components/AllLoveGo.vue' export default { components: { AllLoveGo, }, data() { return { userInfo: '', courseId: 0, cardActive: 0, starsValue: 3.5, tabActive: 0, detailData: '', tabTop: false, tabWeek: [], WeekCard: [], EvaluationCount: '', EvaluationList: [], EvaluationPage: 1, isWeb: true, evaluateType: 0, } }, created() { if (window.innerWidth > 900) { this.isWeb = false } var userInfo = localStorage.getItem('userInfo') if (userInfo) { this.userInfo = JSON.parse(userInfo) } this.courseId = this.$route.query.id this.GetCourseDetail(this.courseId) this.GetCourseEvaluationList(this.courseId, 1) }, // mounted() { // window.addEventListener('scroll',this.handleScrollx) // }, // destroyed() { // window.removeEventListener("scroll", this.handleScrollx); // }, methods: { goBaseDetail(id) { this.$router.push({ path: '/BaseDetail', query: { id: id } }) }, getFileFormat(name) { var t = '' if (name) { t = name.split('.')[1] t = t.toLowerCase() if (t == 'doc' || t == 'docx' || t == 'xls' || t == 'xlsx' || t == 'ppt' || t == 'pptx' || t == 'txt') { t = '文档' } else if (t == 'mp4') { t = '视频' } } return t }, getFileSize(size) { var s = size / 1048576 return s.toFixed(1) }, handleScrollx() { var top = this.$refs.pronbit.getBoundingClientRect().top if (top < 0) { this.tabTop = true } else { this.tabTop = false } }, AddMyWish() { if (this.detailData.isWish == 0) { var that = this this.$toast.loading({ message: '请求中...', }) this.http .AddMyWish({ courseId: this.detailData.id, userId: this.userInfo.centerNo, }) .then(function (res) { that.$toast.clear() if (res.status == 1) { that.$toast.success('加入成功') that.detailData.isWish = 1 } }) } }, tabClick(name, title) { // 找到锚点 let anchorElement = document.getElementById(name) // 如果对应id的锚点存在,就跳转到锚点 if (anchorElement) { anchorElement.scrollIntoView() } }, evaluateTab(type) { this.evaluateType = type this.EvaluationPage = 1 this.EvaluationList = [] this.GetCourseEvaluationList(this.courseId, this.EvaluationPage) }, evaluationMore() { this.EvaluationPage++ this.GetCourseEvaluationList(this.courseId, this.EvaluationPage) }, GetCourseEvaluationList(id, page) { var that = this this.http .GetCourseEvaluationList({ courseId: id, pageIndex: page, isToday: this.evaluateType, pageSize: 5, }) .then(function (res) { if (res.status == 1) { that.EvaluationCount = res.data.count that.EvaluationList = that.EvaluationList.concat(res.data.items) } }) }, GetCourseDetail(id) { var that = this this.http .GetCourseDetail({ id: id, userId: 0, cs: this.projectCity, }) .then(function (res) { if (res.status == 1) { var mobiles = res.data.mobiles if (mobiles) { mobiles = mobiles.split(',') res.data.mobiles = mobiles } else { res.data.mobiles = [] } var baseLabels = res.data.course_labels if (baseLabels) { baseLabels = baseLabels.split(',') res.data.course_labels = baseLabels } else { res.data.course_labels = [] } that.detailData = res.data that.getWeekCard(0) } }) }, clickCardDay(index) { this.cardActive = index this.getWeekCard() }, getWeekCard() { var data = this.detailData.courseScheduleList[this.cardActive].courseScheduleList var morning = [] var afternoon = [] var night = [] data.forEach(function (k, j) { if (k.type == 1) { morning.push(k) } else if (k.type == 2) { afternoon.push(k) } else { night.push(k) } }) var strMorning = '', strAfternoon = '', strNight = '' if (morning.length > 0) { strMorning = `<tr> <td rowspan="${morning.length}">上午</td> <td style="text-align: left;">${morning[0].content ? morning[0].content : '无安排'}</td> </tr>` morning.forEach(function (k, j) { if (j > 0) { strMorning += `<tr> <td style="text-align: left;">${k.content ? k.content : '无安排'}</td> </tr>` } }) } if (afternoon.length > 0) { strAfternoon = `<tr> <td rowspan="${afternoon.length}">下午</td> <td style="text-align: left;">${afternoon[0].content ? afternoon[0].content : '无安排'}</td> </tr>` afternoon.forEach(function (k, j) { if (j > 0) { strAfternoon += `<tr> <td style="text-align: left;">${k.content ? k.content : '无安排'}</td> </tr>` } }) } if (night.length > 0) { strNight = `<tr> <td rowspan="${night.length}">晚上</td> <td style="text-align: left;">${night[0].content ? night[0].content : '无安排'}</td> </tr>` night.forEach(function (k, j) { if (j > 0) { strNight += `<tr> <td style="text-align: left;">${k.content ? k.content : '无安排'}</td> </tr>` } }) } this.$refs.courseCard.innerHTML = strMorning + strAfternoon + strNight }, getNull(t) { return t ? t : '' }, }, } </script> <style lang="stylus" scoped> .header { img { width: 100%; } } .content { .noMove { text-align: center; padding: 20px 0; color: #ccc; } .appendMore { background-color: #F7F7F7; border-radius: 10px; text-align: center; padding: 30px 0; color: #64B1FF; font-size: 1.2rem; margin-bottom: 20px; } .courseInfo { color: #20D28D; padding: 10px 0; } .tabTop { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: white; } padding: 40px; box-sizing: border-box; .title { padding-right: 160px; box-sizing: border-box; position: relative; h3 { font-size: 2rem; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-height: 90px; } .rightCorse { position: absolute; text-align: center; right: 0; top: 0; p { margin: 0; } p:first-child { color: #0EDBA1; font-size: 1.8rem; b { display: inline-block; vertical-align: middle; } b:first-child { font-size: 2.4rem; } } p:last-child { font-size: 1.2rem; } } } .labels { margin-top: 20px; .fl { span { display: inline-block; margin-right: 20px; background-color: #D0F8ED; border-radius: 6px; padding: 6px 10px; color: #00C08A; } } .fr { color: #0EDBA1; padding-right: 10px; } } .popularity { margin-top: 20px; padding: 10px 40px; background-color: #FBF7F1; box-sizing: border-box; position: relative; color: #B78E4E; font-size: 1.4rem; border-radius: 6px; i { position: absolute; top: 16px; } i:first-child { left: 10px; } i:last-child { right: 10px; } } .area { margin-top: 20px; padding: 10px 40px; box-sizing: border-box; position: relative; font-size: 1.4rem; i { position: absolute; top: 16px; } i:first-child { left: 10px; color: #06CB67; } i:last-child { right: 10px; } } .phone { margin-top: 20px; padding: 10px 40px; box-sizing: border-box; position: relative; font-size: 1.4rem; span { a { color: #000000; } } i { position: absolute; top: 16px; } i:first-child { left: 10px; color: #41A8FF; } } hr { height: 20px; background-color: #EEEEEE; border: none; } .courseCont { padding: 40px 0; font-size: 1.4rem; color: #222222; p { span { img { width: 100% !important; } } } } .classList { li { margin-top: 40px; padding-left: 290px; position: relative; min-height: 270px; img { width: 270px; height: 270px; position: absolute; left: 0; top: 0; border-radius: 10px; } h3 { font-size: 1.8rem; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; } p { margin: 0; margin-top: 10px; font-size: 1.4rem; color: #919191; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 25; overflow: hidden; } } } .gushi { .gslabel { span { display: inline-block; margin-right: 20px; padding: 6px 10px; background-color: #D2FCED; font-size: 1.2rem; border-radius: 6px; } } ul { overflow: hidden; li { float: left; width: 50%; margin-top: 20px; box-sizing: border-box; img { width: 100%; border-radius: 10px; } h3 { font-size: 1.6rem; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; } div { position: relative; padding: 10px 0; img { width: 40px; height: 40px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 10px; } span.name { display: inline-block; vertical-align: middle; color: #7E7F81; font-size: 1.2rem; } div.zan { position: absolute; right: 20px; bottom: 6px; font-size: 1.2rem; color: #7E7F81; i { font-size: 1.4rem; vertical-align: top; } span { display: inline-block; vertical-align: top; } } } } li:nth-child(2n) { padding-left: 20px; } li:nth-child(2n+1) { padding-right: 20px; } } } .positionTitle { margin: 40px 0; font-size: 2rem; position: relative; b { position: relative; z-index: 100; } u { width: 160px; height: 16px; border-radius: 100px; background-image: linear-gradient(to right, #3FCC95, #ffffff); position: absolute; bottom: 0; left: 0; } } .days { padding: 40px 0; h3 { font-size: 1.6rem; color: #222222; margin: 0; } ul { overflow: hidden; li { float: left; width: 50%; text-align: center; margin-top: 20px; span { border-radius: 10px; display: inline-block; padding: 6px 20px; background-color: #D0F8ED; color: #1EC798; font-size: 1.2rem; } } li.no { span { background-color: #ECECEC; color: #767676; text-decoration: line-through; } } } p { color: #1DD995; position: relative; margin-top:10px; padding-left: 40px; font-size: 1.4rem; } p::after { position: absolute; content: ''; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 100px; background: linear-gradient(138deg, rgba(41, 229, 118, 1) 0%, rgba(20, 207, 176, 1) 100%); } } .evaluate { padding: 20px 0; h3 { color: #222222; font-size: 1.6rem; } .spans { padding: 20px 0; span { display: inline-block; padding: 6px 20px; border-radius: 100px; margin-right: 20px; background-color: #D2FCED; color: #444444; } } ul { position: relative; li:not(:last-child) { border-bottom: 2px solid #eee; } li { margin-top: 20px; .head { position: relative; box-sizing: border-box; padding: 20px 0; img { width: 90px; height: 90px; display: inline-block; vertical-align: middle; border-radius: 50%; margin-right: 20px; } .name { display: inline-block; vertical-align: middle; h5 { font-size: 1.4rem; color: #494949; margin: 0; } p { color: #9D9D9D; font-size: 1.2rem; margin: 0; } } } .contBox { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .imgs { padding: 20px 0; img { display: inline-block; width: 160px; height: 160px; margin-right: 20px; } } } } } .courseCard { .cardTitle { padding: 20px; span { display: inline-block; margin-right: 20px; color: #A4A7AC; } span.active { color: #43CD97; } } .cardCont { table { border-radius: 10px; width: 100%; border: 2px solid #72DAB1; td { border: 2px solid #72DAB1; text-align: center; } } } } .courseContent { li:not(:last-child) { border-bottom: 2px solid #eee; } li:first-child { .left { color: #FA9B00; border: 2px solid #FA9B00; background-color: #FEF4D9; } } li:nth-child(3n+1) { .left { color: #FA9B00; border: 2px solid #FA9B00; background-color: #FEF4D9; } } li:nth-child(3n-1) { .left { color: #FA008C; border: 2px solid #FA008C; background-color: #FFEFFC; } } li:nth-child(3n) { .left { color: #0076FA; border: 2px solid #0076FA; background-color: #EFFFFF; } } li { position: relative; margin-top: 40px; padding-bottom: 20px; .left { position: absolute; top: 0; left: 0; width: 120px; font-size: 1.3rem; text-align: center; border-radius: 6px; padding: 6px; box-sizing: border-box; font-weight: 600; } h3 { color: #202228; font-size: 1.6rem; font-weight: 400; margin: 0; padding-left: 160px; word-break: break-all; } .item { margin-top: 20px; img { width: 100%; } p { margin: 0; margin-top: 20px; color: #A7A7AA; font-size: 1.4rem; b { font-size: 1.6rem; font-weight: 400; color: #000000; margin-right: 20px; } span { font-size: 1.2rem; } } } } } .courseNotice { font-size: 1.4rem; } } .Collection { background-color: white; position: fixed; bottom: 0; left: 0; width: 100%; padding: 20px 0; z-index: 500; .box { display: inline-block; vertical-align: middle; width: 49%; text-align: center; color: #666666; .icon { display: inline-block; width: 49%; text-align: center; font-size: 1.2rem; p { margin: 0; } i { font-size: 2.4rem; color: #000000; font-weight: bold; } } .icon.active { color: #0CE39D; i { color: #0CE39D; } } span { display: inline-block; width: 65%; padding: 20px 40px; border-radius: 100px; color: white; font-size: 2rem; background: linear-gradient(307deg, rgba(51, 233, 172, 1) 0%, rgba(6, 203, 103, 1) 100%); b { display: inline-block; vertical-align: middle; margin-left: 20px; color: white; } i { vertical-align: middle; font-size: 2.2rem; font-weight: bold; } } } } </style>