parent
bad2c7bb35
commit
186618506f
21 changed files with 921 additions and 381 deletions
|
After Width: | Height: | Size: 371 B |
|
After Width: | Height: | Size: 330 B |
|
After Width: | Height: | Size: 243 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 244 B |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 370 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 331 B |
|
After Width: | Height: | Size: 256 KiB |
|
After Width: | Height: | Size: 298 B |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,455 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="inner"> |
||||
<div class="top"> |
||||
<div v-if="form.interfaceDiagrams" class="pics"> |
||||
<img v-for="(pic, i) in form.interfaceDiagrams" :key="i" :src="pic" alt=""> |
||||
</div> |
||||
<div class="right"> |
||||
<h6>{{ form.mall.productName }}</h6> |
||||
<div class="meta"> |
||||
共 <span class="val">48</span> 个实验项目  已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 |
||||
</div> |
||||
<div class="des" v-html="form.mall.productIntroduction"></div> |
||||
<div class="field">适用专业：{{ form.goodsRes.disciplineName }}</div> |
||||
<div class="fields"> |
||||
<div v-if="form.mall.applicationScenario" class="field"><span class="label">适用场景：</span>{{ form.mall.applicationScenario }}</div> |
||||
<div v-if="form.mall.matchingCourse" class="field"><span class="label">匹配课程：</span>{{ form.mall.matchingCourse }}</div> |
||||
<div v-if="form.mall.courseHours" class="field"><span class="label">预计课时：</span>{{ form.mall.courseHours }}</div> |
||||
<div v-if="form.goodsRes.typeName" class="field"><span class="label">产品类型：</span>{{ form.goodsRes.typeName }}</div> |
||||
</div> |
||||
<button v-if="form.goodsRes.logoOfOurSchool" class="btn" @click="toTrail">试用体验</button> |
||||
<button v-else class="btn entry" @click="toStation">进入实验</button> |
||||
</div> |
||||
</div> |
||||
<div class="course"> |
||||
<div class="detail"> |
||||
<ul class="tab"> |
||||
<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li> |
||||
</ul> |
||||
<div class="courses"> |
||||
<template v-if="!curTab"> |
||||
<h6>课程介绍</h6> |
||||
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
||||
</template> |
||||
<template v-else> |
||||
<div v-for="(item, i) in chapterList" :key="i"> |
||||
<h6>{{ item.name }}</h6> |
||||
<ul v-if="item.subsectionList.length" class="list"> |
||||
<li v-for="(section, i) in item.subsectionList" :key="i" @click="toPreview(item, section)"> |
||||
<p class="name"> |
||||
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
||||
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
||||
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" src="@/assets/img/exts/word.png" alt=""> |
||||
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
||||
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
||||
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
||||
{{ section.projectName }} |
||||
</p> |
||||
<i :class="['status', section.whetherToStudyOrNot ? 'el-icon-success' : 'circle']" @click.stop="studySection(item, section)"></i> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<div class="products"> |
||||
<h6>热门产品推荐</h6> |
||||
<ul class="product"> |
||||
<li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)"> |
||||
<img :src="item.coverDrawing" alt="" /> |
||||
<img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/img/my-school.png" alt=""> |
||||
<div class="texts"> |
||||
<div class="title">{{ item.productName }}</div> |
||||
<div class="desc" v-html="item.productIntroduction"></div> |
||||
<div class="metas"> |
||||
<template v-if="item.selected"> |
||||
<el-tag |
||||
type="danger" |
||||
effect="dark"> |
||||
官方精选 |
||||
</el-tag> |
||||
<div class="meta">{{ item.learningCount }}学过</div> |
||||
</template> |
||||
|
||||
<template v-else> |
||||
<div class="meta"> |
||||
<img class="icon" src="@/assets/img/eye.png" alt=""> |
||||
{{ item.learningCount }} |
||||
</div> |
||||
<div v-if="item.isAssociatedProduct === 0" class="meta"> |
||||
<img class="icon" src="@/assets/img/platform.png" alt=""> |
||||
平台官方 |
||||
</div> |
||||
<span class="type">{{ item.courseType == 1 ? '付费' : '免费'}}</span> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Util from "@/libs/util" |
||||
import Setting from "@/setting" |
||||
export default { |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id, |
||||
curTab: 0, |
||||
tabs: [ |
||||
{ |
||||
id: 0, |
||||
name: '详情介绍' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '课程目录' |
||||
}, |
||||
], |
||||
form: { |
||||
mall: {}, |
||||
goodsRes: {} |
||||
}, |
||||
chapterList: [], |
||||
hots: [] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getData() |
||||
this.getHot() |
||||
}, |
||||
methods: { |
||||
// 产品详情 |
||||
getData() { |
||||
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => { |
||||
const e = res.orderDetails |
||||
if (e.mall.interfaceDiagram) e.interfaceDiagrams = e.mall.interfaceDiagram.split(',') |
||||
this.form = e |
||||
this.getChapter() |
||||
}).catch(err => {}) |
||||
}, |
||||
// 获取章节小节 |
||||
async getChapter() { |
||||
let res = await this.$post(`${this.api.courseLearningProgress}?courseId=${this.form.mall.associatedProduct}`) |
||||
this.chapterList = res.list |
||||
}, |
||||
// tab切换 |
||||
tabChange({ id }) { |
||||
this.curTab = id |
||||
}, |
||||
// 跳转播放资源 |
||||
toPreview(item, section) { |
||||
this.form.goodsRes.logoOfOurSchool ? |
||||
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName) : |
||||
this.toTrail() |
||||
}, |
||||
// 勾选/取消勾选学习进度 |
||||
studySection(item) { |
||||
item.whetherToStudyOrNot ? |
||||
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
||||
this.getProgress() |
||||
}).catch(res => {}) : |
||||
this.$post(this.api.saveLearningProgress, { |
||||
cid: this.courseId, |
||||
projectId: item.projectId, |
||||
}).then(res => { |
||||
this.getProgress() |
||||
}).catch(res => {}) |
||||
}, |
||||
// 跳转试用体验 |
||||
toTrail() { |
||||
window.open('https://f.wps.cn/g/VekixBcm/') |
||||
}, |
||||
// 跳转实验台 |
||||
toStation() { |
||||
this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`).then(res => { |
||||
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.associatedProductName) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 热门产品 |
||||
getHot() { |
||||
this.$post(this.api.listOfGoods, { |
||||
hotTag: 1, |
||||
sort: 1, |
||||
pageNum: 1, |
||||
pageSize: 2, |
||||
}).then(({ page }) => { |
||||
this.hots = page.records |
||||
}).catch(res => {}) |
||||
}, |
||||
// 跳转详情 |
||||
toDetail(id) { |
||||
this.$router.push(`show?id=${id}`); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
background: #F3F6FA; |
||||
.inner { |
||||
width: 1154px; |
||||
margin: 0 auto; |
||||
} |
||||
.top { |
||||
display: flex; |
||||
padding: 24px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
.pics { |
||||
width: 436px; |
||||
margin-right: 24px; |
||||
img { |
||||
width: 140px; |
||||
height: 62px; |
||||
margin-right: 8px; |
||||
border-radius: 8px; |
||||
&:first-child { |
||||
width: 100%; |
||||
height: 192px; |
||||
margin-bottom: 12px; |
||||
} |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
.right { |
||||
width: 646px; |
||||
} |
||||
h6 { |
||||
font-size: 24px; |
||||
font-weight: 600; |
||||
color: #2E2D31; |
||||
} |
||||
.meta { |
||||
margin: 10px 0; |
||||
font-size: 12px; |
||||
color: #2E2D31; |
||||
.val { |
||||
color: #007EFF; |
||||
} |
||||
} |
||||
.des { |
||||
margin-bottom: 15px; |
||||
font-size: 14px; |
||||
color: #666; |
||||
line-height: 20px; |
||||
} |
||||
.field { |
||||
font-size: 14px; |
||||
color: #2E2D31; |
||||
.label { |
||||
color: #333; |
||||
} |
||||
} |
||||
.fields { |
||||
display: flex; |
||||
margin: 10px 0 20px; |
||||
.field { |
||||
margin-right: 50px; |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
.btn { |
||||
width: 119px; |
||||
height: 46px; |
||||
color: #fff; |
||||
background: #64C25A; |
||||
border-radius: 6px; |
||||
border: 0; |
||||
cursor: pointer; |
||||
&:hover { |
||||
opacity: .9; |
||||
} |
||||
&:first-child { |
||||
margin-left: 11px; |
||||
} |
||||
} |
||||
.entry { |
||||
background: #007EFF; |
||||
} |
||||
} |
||||
.tab { |
||||
display: inline-flex; |
||||
li { |
||||
position: relative; |
||||
margin-right: 20px; |
||||
font-size: 18px; |
||||
line-height: 25px; |
||||
color: #0B1D30; |
||||
cursor: pointer; |
||||
&:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: -10px; |
||||
left: 50%; |
||||
width: 53px; |
||||
height: 4px; |
||||
transform: translateX(-50%); |
||||
} |
||||
&.active:after { |
||||
background-color: #007EFF; |
||||
} |
||||
} |
||||
} |
||||
.course { |
||||
display: flex; |
||||
margin-top: 20px; |
||||
.detail { |
||||
width: 835px; |
||||
padding: 20px 36px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
|
||||
} |
||||
} |
||||
.courses { |
||||
margin-top: 40px; |
||||
h6 { |
||||
margin-bottom: 20px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
} |
||||
.list { |
||||
height: calc(100vh - 530px); |
||||
padding-right: 15px; |
||||
overflow: auto; |
||||
li { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
height: 46px; |
||||
border-radius: 8px; |
||||
&:hover { |
||||
background: #F6FBFF; |
||||
} |
||||
} |
||||
.name { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
color: #333; |
||||
img { |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
.status { |
||||
font-size: 18px; |
||||
color: #00c935; |
||||
} |
||||
.circle { |
||||
width: 18px; |
||||
height: 18px; |
||||
border-radius: 50%; |
||||
border: 1px solid #ccc; |
||||
} |
||||
} |
||||
} |
||||
.products { |
||||
width: 270px; |
||||
margin-left: 24px; |
||||
&>h6 { |
||||
font-size: 14px; |
||||
color: #0B1D30; |
||||
} |
||||
} |
||||
.product { |
||||
margin-top: 11px; |
||||
li { |
||||
position: relative; |
||||
margin-bottom: 15px; |
||||
cursor: pointer; |
||||
border-radius: 10px; |
||||
background-color: #fff; |
||||
transition: all 0.3s; |
||||
overflow: hidden; |
||||
img { |
||||
width: 100%; |
||||
height: 140px; |
||||
transition: .3s; |
||||
} |
||||
.my-school { |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 57px; |
||||
height: 22px; |
||||
} |
||||
.texts { |
||||
padding: 10px; |
||||
} |
||||
.title { |
||||
margin-bottom: 10px; |
||||
color: #0B1D30; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
word-wrap: break-word; |
||||
word-break: break-all; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.desc { |
||||
min-height: 34px; |
||||
color: #757F92; |
||||
font-size: 12px; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
overflow: hidden; |
||||
&.ie { |
||||
height: 80px; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.tag { |
||||
margin-right: 8px; |
||||
color: #007EFF; |
||||
background-color: #F9F9F9; |
||||
border: 0; |
||||
} |
||||
.type { |
||||
display: inline-block; |
||||
padding: 4px 11px; |
||||
font-size: 12px; |
||||
color: #666; |
||||
border: 1px solid #DADADA; |
||||
border-radius: 20px; |
||||
} |
||||
.metas { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-top: 10px; |
||||
} |
||||
.meta { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
color: #B5BFD5; |
||||
font-size: 12px; |
||||
.icon { |
||||
width: 14px; |
||||
max-height: 14px; |
||||
margin-right: 3px; |
||||
} |
||||
} |
||||
&:hover { |
||||
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), 0px 1px 2px -2px rgba(142, 123, 253, 0.16); |
||||
img { |
||||
transform: scale(1.05); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue