parent
49b8141518
commit
dc44e73e80
15 changed files with 962 additions and 217 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 667 B |
|
After Width: | Height: | Size: 451 B |
|
After Width: | Height: | Size: 581 B |
|
After Width: | Height: | Size: 490 B |
|
After Width: | Height: | Size: 585 B |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,671 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="inner"> |
||||
<breadcrumb :routes.sync="routes" /> |
||||
<div class="top"> |
||||
<el-carousel class="pics" :interval="6000" height="278px" :arrow="form.pics.length > 1 ? 'hover' : 'never'" |
||||
:indicator-position="form.pics.length > 1 ? '' : 'none'"> |
||||
<el-carousel-item v-for="(item, i) in form.pics" :key="i"> |
||||
<img class="pic" :src="item" /> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
<div class="right" id="fields"> |
||||
<h6>{{ form.mall.productName }}</h6> |
||||
<div v-if="isCourse" class="meta"> |
||||
共 <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目   |
||||
已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 |
||||
</div> |
||||
<div class="des" v-html="form.mall.productIntroduction"></div> |
||||
<div class="fields"> |
||||
<div class="field"> |
||||
<img src="@/assets/img/product/1.png" alt=""> 适用专业： |
||||
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.goodsRes.professionalName" |
||||
placement="bottom"> |
||||
<div> |
||||
{{ form.goodsRes.professionalName }} |
||||
</div> |
||||
</el-tooltip> |
||||
</div> |
||||
<div v-if="form.mall.applicationScenario" class="field"> |
||||
<img src="@/assets/img/product/2.png" alt=""> 适用场景： |
||||
<div class="text">{{ form.mall.applicationScenario }}</div> |
||||
</div> |
||||
<div v-if="form.mall.matchingCourse" class="field"> |
||||
<img src="@/assets/img/product/3.png" alt=""> 匹配课程： |
||||
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.mall.matchingCourse" |
||||
placement="bottom"> |
||||
<div class="text"> |
||||
{{ form.mall.matchingCourse }} |
||||
</div> |
||||
</el-tooltip> |
||||
</div> |
||||
<div v-if="form.mall.courseHours" class="field"> |
||||
<img src="@/assets/img/product/4.png" alt=""> 预计课时： |
||||
<div class="text">{{ form.mall.courseHours }}</div> |
||||
</div> |
||||
<div v-if="form.goodsRes.typeName" class="field"> |
||||
<img src="@/assets/img/product/5.png" alt=""> 产品类型： |
||||
<div class="text">{{ form.goodsRes.typeName }}</div> |
||||
</div> |
||||
</div> |
||||
<button class="btn" @click="toRenew">续期</button> |
||||
</div> |
||||
</div> |
||||
<div class="course" id="part0"> |
||||
<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"> |
||||
<div class="des" v-html="form.mall.detailedIntroduction"></div> |
||||
<div v-if="isCourse" class="chapter" id="part1" v-for="(item, i) in chapterList" :key="i"> |
||||
<div class="chapterName">{{ item.name }}</div> |
||||
<div class="section" v-if="item.subsectionList.length"> |
||||
<div v-for="(section, j) in item.subsectionList" :key="j" @click="toPreview(i, j)"> |
||||
<div class="sectionName" :title="section.name"> |
||||
<div class="val"> |
||||
<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.name }} |
||||
</div> |
||||
<i v-if="!form.goodsRes.logoOfOurSchool && j" class="icon el-icon-lock"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="products"> |
||||
<h6>热门产品推荐</h6> |
||||
<ul class="product"> |
||||
<li v-for="(item, i) in hots" :key="i"> |
||||
<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', { 'not-tag': !item.tagsName }]" v-html="item.productIntroduction"></div> |
||||
<div v-if="item.tagsName" class="tags"> |
||||
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> |
||||
</div> |
||||
<div class="metas"> |
||||
<el-tag v-if="item.selected" type="danger" effect="dark"> |
||||
官方精选 |
||||
</el-tag> |
||||
<div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div> |
||||
</div> |
||||
</div> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 选择链接 --> |
||||
<el-dialog title="请选择链接" :visible.sync="linkVisible" width="420px" center :close-on-click-modal="false"> |
||||
<div v-if="withLink" class="buy"> |
||||
<div v-for="(link, i) in form.mallNonAssociatedLinks" :key="i" class="link-line"> |
||||
{{ link.urlName }}： |
||||
<a class="url" :href="link.url" target="_blank">{{ link.url }}</a> |
||||
</div> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import breadcrumb from '@/components/breadcrumb' |
||||
export default { |
||||
components: { breadcrumb }, |
||||
data () { |
||||
return { |
||||
id: this.$route.query.id, |
||||
routes: [], |
||||
curTab: 0, |
||||
tabs: [ |
||||
{ |
||||
id: 0, |
||||
name: '详情介绍' |
||||
}, |
||||
], |
||||
form: { |
||||
pics: [], |
||||
classificationIds: [], |
||||
mall: { |
||||
coverDrawing: '' |
||||
}, |
||||
goodsRes: {} |
||||
}, |
||||
chapterList: [], |
||||
hots: [], |
||||
linkVisible: false, |
||||
height: '' |
||||
}; |
||||
}, |
||||
computed: { |
||||
// 是否没关联产品或者产品类型是数据前瞻，并且设置了链接 |
||||
withLink () { |
||||
const links = this.form.mallNonAssociatedLinks |
||||
const id = this.form.classificationIds |
||||
return (this.form.mall.isAssociatedProduct || (id && id[0] == 5)) && links && links.length |
||||
}, |
||||
// 课程 |
||||
isCourse () { |
||||
let id = this.form.classificationIds |
||||
if (id) { |
||||
id = id[0] |
||||
const isCourse = (id == 1 || id == 2) && this.form.mall.isAssociatedProduct === 0 |
||||
this.tabs = [ |
||||
{ |
||||
id: 0, |
||||
name: '详情介绍' |
||||
}, |
||||
] |
||||
isCourse && this.tabs.push({ |
||||
id: 1, |
||||
name: '课程目录' |
||||
}) |
||||
return isCourse |
||||
} |
||||
return false |
||||
}, |
||||
// 职站增值应用 |
||||
isValueModule () { |
||||
let id = this.form.classificationIds |
||||
if (id) return id[0] == 3 |
||||
return false |
||||
}, |
||||
// 数据前瞻 |
||||
isDataforward () { |
||||
let id = this.form.classificationIds |
||||
if (id) return id[0] == 5 |
||||
return false |
||||
}, |
||||
}, |
||||
beforeRouteLeave (to, from, next) { |
||||
to.path !== '/product/list' && this.$store.commit('product/setParams', null) |
||||
next() |
||||
}, |
||||
mounted () { |
||||
this.getData() |
||||
this.getHot() |
||||
}, |
||||
methods: { |
||||
// 产品详情 |
||||
getData () { |
||||
this.$get(`${this.api.detailsOfGoods}?mallId=${this.id}`).then(res => { |
||||
const e = res.orderDetails |
||||
e.pics = [e.mall.coverDrawing] |
||||
if (e.mall.interfaceDiagram) { |
||||
const pics = e.mall.interfaceDiagram.split(',').slice(0, 3) |
||||
e.pics.push(...pics) |
||||
e.interfaceDiagrams = pics |
||||
} |
||||
this.form = e |
||||
this.chapterList = '' |
||||
|
||||
this.routes = [ |
||||
{ |
||||
name: '实验台', |
||||
path: `list?keyword=${this.$route.query.keyword || ''}&active=${this.$route.query.active || ''}` |
||||
}, |
||||
{ |
||||
name: e.mall.productName |
||||
} |
||||
] |
||||
|
||||
this.$nextTick(() => { |
||||
this.getChapter() |
||||
this.height = document.querySelector('#fields').clientHeight + 'px' |
||||
}) |
||||
}).catch(err => { }) |
||||
}, |
||||
// 获取章节小节 |
||||
async getChapter () { |
||||
if (this.isCourse) { |
||||
let res = await this.$get(this.api.curriculumChapter + '/' + this.form.mall.associatedProduct) |
||||
this.chapterList = res.chapterList |
||||
} |
||||
}, |
||||
// tab切换 |
||||
tabChange ({ id }) { |
||||
this.curTab = id |
||||
document.querySelector(`#part${id}`).scrollIntoView({ |
||||
behavior: 'smooth' |
||||
}) |
||||
}, |
||||
// 跳转播放资源 |
||||
toPreview (i, j) { |
||||
const bought = this.form.goodsRes.logoOfOurSchool |
||||
// 购买了 || 没购买但是是第一个课程，就可以查看课程 |
||||
bought || (!bought && !j) ? |
||||
this.$router.push(`/station/preview?courseId=${this.form.mall.associatedProduct}&curriculumName=${this.form.mall.productName}&mallId=${this.id}&chapter=${i}§ion=${j}&admin=1`) : |
||||
this.toTrail() |
||||
}, |
||||
// 勾选/取消勾选学习进度 |
||||
studySection (item) { |
||||
item.whetherToStudyOrNot ? |
||||
this.$post(`${this.api.deleteLearningProgress}?id=${item.learningProgressId}`).then(res => { |
||||
this.getChapter() |
||||
}).catch(res => { }) : |
||||
this.$post(this.api.saveLearningProgress, { |
||||
cid: this.form.mall.associatedProduct, |
||||
projectId: item.projectId, |
||||
}).then(res => { |
||||
this.getChapter() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 跳转试用体验 |
||||
toTrail () { |
||||
window.open('https://www.wjx.top/vm/wFCPCFp.aspx') |
||||
}, |
||||
// 跳转实验台 |
||||
async toStation () { |
||||
if (this.isCourse) { // 如果是课程，直接进入实验台 |
||||
await this.$post(`${this.api.addLearningRecord}?mallId=${this.id}`) |
||||
this.$router.push('/station/preview?courseId=' + this.form.mall.associatedProduct + '&curriculumName=' + this.form.mall.productName + '&mallId=' + this.id + '&admin=1') |
||||
} else if (this.withLink) { // 如果没有绑定产品，并且有设置关联链接，则弹框选择链接 |
||||
const links = this.form.mallNonAssociatedLinks |
||||
// 链接只有一条，则直接进入 |
||||
if (links.length === 1) { |
||||
window.open(links[0].url) |
||||
} else { |
||||
this.linkVisible = true |
||||
} |
||||
} |
||||
}, |
||||
// 续费 |
||||
async toRenew () { |
||||
try { |
||||
await this.$confirm(`<p style="margin-bottom: 10px;">确认提交续期申请吗？</p><p style="font-size: 12px;">提交后，我们将立即处理您的续期请求。请耐心等待，我们会尽快完成续期流程。</p>`, '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'success', |
||||
closeOnClickModal: false, |
||||
dangerouslyUseHTMLString: true, |
||||
}) |
||||
await this.$post(`${this.api.requestRenewalNotice}?mallId=${this.id}`) |
||||
} catch (e) { } |
||||
}, |
||||
// 热门产品 |
||||
getHot () { |
||||
this.$post(this.api.websiteProductList, { |
||||
hotTag: 1, |
||||
sort: 1, |
||||
pageNum: 1, |
||||
pageSize: 2, |
||||
}).then(({ page }) => { |
||||
const list = page.records |
||||
list.forEach(e => { |
||||
// 简介去掉标签图片 |
||||
const el = document.createElement('div') |
||||
el.innerHTML = e.productIntroduction |
||||
e.productIntroduction = el.innerText |
||||
const cid = e.classificationId |
||||
e.isCourse = (cid === 1 || cid === 2) && !e.isAssociatedProduct |
||||
}) |
||||
this.hots = list |
||||
}).catch(res => { }) |
||||
}, |
||||
// 跳转详情 |
||||
toDetail (id) { |
||||
this.$router.push(`show?id=${id}`) |
||||
this.id = id |
||||
this.getData() |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
background: url(../../../assets/img/product/bg1.png) 0 373px no-repeat, url(../../../assets/img/product/bg2.png) bottom right no-repeat; |
||||
background-color: #f3f6fa; |
||||
|
||||
.inner { |
||||
width: 1146px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.top { |
||||
display: flex; |
||||
padding: 24px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
|
||||
.pics { |
||||
width: 484px; |
||||
margin-right: 20px; |
||||
|
||||
.pic { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 8px; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
width: 592px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
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; |
||||
@include mul-ellipsis(3); |
||||
} |
||||
|
||||
.field { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
margin: 0 20px 10px 0; |
||||
font-size: 14px; |
||||
color: #2e2d31; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.label { |
||||
color: #333; |
||||
} |
||||
|
||||
.text { |
||||
max-width: 160px; |
||||
@include ellipsis; |
||||
} |
||||
|
||||
img { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
|
||||
.fields { |
||||
display: flex; |
||||
// justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
height: 60px; |
||||
margin: 10px 0 10px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.btn { |
||||
width: 119px; |
||||
height: 46px; |
||||
color: #fff; |
||||
background: #64c25a; |
||||
border-radius: 6px; |
||||
border: 0; |
||||
cursor: pointer; |
||||
|
||||
&:hover { |
||||
opacity: 0.9; |
||||
} |
||||
|
||||
&:first-child { |
||||
margin-left: 11px; |
||||
} |
||||
} |
||||
|
||||
.entry { |
||||
background: #007eff; |
||||
} |
||||
} |
||||
|
||||
.tab { |
||||
z-index: 100; |
||||
position: sticky; |
||||
top: 0; |
||||
display: flex; |
||||
padding: 10px 10px 20px; |
||||
background-color: #fff; |
||||
|
||||
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: calc(100% - 294px); |
||||
padding: 20px 24px; |
||||
background-color: #fff; |
||||
border-radius: 10px; |
||||
} |
||||
} |
||||
|
||||
.courses { |
||||
padding-top: 10px; |
||||
overflow: hidden; |
||||
|
||||
/deep/.des { |
||||
div, |
||||
p, |
||||
span { |
||||
font-family: PingFang SC !important; |
||||
} |
||||
} |
||||
|
||||
.chapters { |
||||
margin-top: 16px; |
||||
max-height: calc(100% - 53px); |
||||
overflow: auto; |
||||
} |
||||
|
||||
.chapter { |
||||
padding-top: 60px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.chapterName { |
||||
padding: 0 12px; |
||||
margin-bottom: 15px; |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.sectionName { |
||||
position: relative; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 12px; |
||||
font-size: 14px; |
||||
color: #666; |
||||
cursor: pointer; |
||||
border-radius: 8px; |
||||
@include ellipsis; |
||||
|
||||
img { |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
&:hover { |
||||
color: #007eff; |
||||
background: #f6fbff; |
||||
} |
||||
|
||||
.val { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.icon { |
||||
font-size: 18px; |
||||
color: #666; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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: 155px; |
||||
transition: 0.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; |
||||
|
||||
&.not-tag { |
||||
-webkit-line-clamp: 3; |
||||
} |
||||
} |
||||
|
||||
.tags { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.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); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.link-line { |
||||
margin: 5px 0; |
||||
|
||||
.url { |
||||
color: #007eff; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue