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