|
|
|
|
@ -2,97 +2,98 @@ |
|
|
|
|
<div class="wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<Breadcrumb ref="breadcrumb" :data.sync="routes" /> |
|
|
|
|
<div class="top"> |
|
|
|
|
<el-image class="pic" :src="form.coverImageUrl" :preview-src-list="[form.coverImageUrl]" /> |
|
|
|
|
<div class="right fadeInRight" id="fields"> |
|
|
|
|
<h6>{{ form.name }}</h6> |
|
|
|
|
<div class="meta"> |
|
|
|
|
已有 <span class="val">{{ form.totalBrowsing }}</span>人看过 |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="form.introduction"></div> |
|
|
|
|
<div class="fields"> |
|
|
|
|
<div class="field"> |
|
|
|
|
<img src="@/assets/images/product/1.png" alt=""> 适用专业： |
|
|
|
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.professionalName" |
|
|
|
|
placement="bottom"> |
|
|
|
|
<div> |
|
|
|
|
{{ form.professionalName }} |
|
|
|
|
<div v-loading="loading"> |
|
|
|
|
<!-- 非富文本详情页 --> |
|
|
|
|
<template v-if="form.articleTemplate !== 72"> |
|
|
|
|
<div class="top"> |
|
|
|
|
<el-image class="pic" :src="form.coverImageUrl" :preview-src-list="[form.coverImageUrl]" /> |
|
|
|
|
<div class="right fadeInRight" id="fields"> |
|
|
|
|
<h6>{{ form.name }}</h6> |
|
|
|
|
<div class="meta"> |
|
|
|
|
已有 <span class="val">{{ form.totalBrowsing }}</span>人看过 |
|
|
|
|
</div> |
|
|
|
|
<div class="des" v-html="form.introduction"></div> |
|
|
|
|
<div class="fields"> |
|
|
|
|
<div class="field"> |
|
|
|
|
<img src="@/assets/images/product/1.png" alt=""> 适用专业： |
|
|
|
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.professionalName" |
|
|
|
|
placement="bottom"> |
|
|
|
|
<div> |
|
|
|
|
{{ form.professionalName }} |
|
|
|
|
</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.applicationScenario" class="field"> |
|
|
|
|
<img src="@/assets/images/product/2.png" alt=""> 适用场景： |
|
|
|
|
<div class="text">{{ form.applicationScenario }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.matchingCourse" class="field"> |
|
|
|
|
<img src="@/assets/images/product/3.png" alt=""> 匹配课程： |
|
|
|
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.matchingCourse" |
|
|
|
|
placement="bottom"> |
|
|
|
|
<div class="text"> |
|
|
|
|
{{ form.matchingCourse }} |
|
|
|
|
<div v-if="form.applicableScenarios" class="field"> |
|
|
|
|
<img src="@/assets/images/product/2.png" alt=""> 适用场景： |
|
|
|
|
<div class="text">{{ form.applicableScenarios }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.matchingCourse" class="field"> |
|
|
|
|
<img src="@/assets/images/product/3.png" alt=""> 匹配课程： |
|
|
|
|
<el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.matchingCourse" |
|
|
|
|
placement="bottom"> |
|
|
|
|
<div class="text"> |
|
|
|
|
{{ form.matchingCourse }} |
|
|
|
|
</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
</div> |
|
|
|
|
</el-tooltip> |
|
|
|
|
<div v-if="form.estimatedHours" class="field"> |
|
|
|
|
<img src="@/assets/images/product/4.png" alt=""> 预计课时： |
|
|
|
|
<div class="text">{{ form.estimatedHours }}</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.typeName" class="field"> |
|
|
|
|
<img src="@/assets/images/product/5.png" alt=""> 产品类型： |
|
|
|
|
<div class="text">{{ form.typeName }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<button v-if="form.jumpButtonName" class="btn" @click="toLink">{{ form.jumpButtonName }}</button> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.courseHours" class="field"> |
|
|
|
|
<img src="@/assets/images/product/4.png" alt=""> 预计课时： |
|
|
|
|
<div class="text">{{ form.courseHours }}</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.detailedDescription"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="form.typeName" class="field"> |
|
|
|
|
<img src="@/assets/images/product/5.png" alt=""> 产品类型： |
|
|
|
|
<div class="text">{{ form.typeName }}</div> |
|
|
|
|
<div class="products"> |
|
|
|
|
<h6 class="fadeInUp">热门产品推荐</h6> |
|
|
|
|
<ul class="product fadeInDown"> |
|
|
|
|
<li v-for="(item, i) in hots" :key="i" @click="toDetail(item.id)"> |
|
|
|
|
<img :src="item.coverImageUrl" alt="" /> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="title">{{ item.name }}</div> |
|
|
|
|
<div :class="['desc', { 'not-tag': !item.tag }]" v-html="item.introduction"></div> |
|
|
|
|
<div v-if="item.tag" class="tags"> |
|
|
|
|
<el-tag v-for="(tag, i) in item.tag.split(',')" :key="i" class="tag">{{ tag }}</el-tag> |
|
|
|
|
</div> |
|
|
|
|
<div class="metas"> |
|
|
|
|
<div class="meta">{{ item.totalBrowsing }}人看过</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<button v-if="form.jumpButtonName" class="btn" @click="toLink">{{ form.jumpButtonName }}</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.detailedDescription"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="products"> |
|
|
|
|
<h6 class="fadeInUp">热门产品推荐</h6> |
|
|
|
|
<ul class="product fadeInDown"> |
|
|
|
|
<li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)"> |
|
|
|
|
<img :src="item.coverImageUrl" alt="" /> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<div class="title">{{ item.name }}</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"> |
|
|
|
|
<div class="meta">{{ item.learningCount }}人看过</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<!-- 富文本详情只需展示详情字段 --> |
|
|
|
|
<div v-else class="des" v-html="form.detailedDescription"></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="" :visible.sync="qrcodeVisible" width="500px" center :top="qrcodeTop" custom-class="qrcode-dia"> |
|
|
|
|
<div> |
|
|
|
|
<img width="100%" src="@/assets/images/occupationlab.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Util from "@/libs/util" |
|
|
|
|
import Setting from "@/setting" |
|
|
|
|
import Breadcrumb from '@/components/breadcrumb' |
|
|
|
|
import ScrollReveal from 'scrollreveal' |
|
|
|
|
export default { |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
id: this.$route.query.id, |
|
|
|
|
loading: false, |
|
|
|
|
routes: {}, |
|
|
|
|
curTab: 0, |
|
|
|
|
tabs: [ |
|
|
|
|
@ -111,24 +112,43 @@ export default { |
|
|
|
|
}, |
|
|
|
|
hots: [], |
|
|
|
|
height: '', |
|
|
|
|
qrcodeVisible: false, |
|
|
|
|
qrcodeTop: '100px' |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
site () { |
|
|
|
|
return this.$route.query.siteId || this.$store.state.content.site |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
Breadcrumb, |
|
|
|
|
}, |
|
|
|
|
mounted () { |
|
|
|
|
const height = (window.innerHeight - 758) / 2 |
|
|
|
|
this.qrcodeTop = (height > 0 ? height : 0) + 'px' |
|
|
|
|
this.getData() |
|
|
|
|
this.getHot() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 产品详情 |
|
|
|
|
async getData () { |
|
|
|
|
const { data } = await this.$post(`${this.api.productDetailsFind}?id=${this.id}`) |
|
|
|
|
this.form = data |
|
|
|
|
this.loading = true |
|
|
|
|
try { |
|
|
|
|
const { data } = await this.$post(`${this.api.foregroundPreview}?id=${this.id}`) |
|
|
|
|
this.form = data |
|
|
|
|
this.routes = [ |
|
|
|
|
{ |
|
|
|
|
name: data.columnName, |
|
|
|
|
path: '/column', |
|
|
|
|
query: { |
|
|
|
|
id: data.columnId, |
|
|
|
|
siteId: data.siteId |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: data.name |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
this.getHot() |
|
|
|
|
} finally { |
|
|
|
|
this.loading = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 初始化动画 |
|
|
|
|
initAnimate () { |
|
|
|
|
@ -224,13 +244,16 @@ export default { |
|
|
|
|
const { data } = await this.$post(this.api.courseProduct, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 2, |
|
|
|
|
columnId: +this.id, |
|
|
|
|
columnId: this.form.columnId, |
|
|
|
|
sortFiltering: 2, |
|
|
|
|
siteId: this.site, |
|
|
|
|
keyWord: '', |
|
|
|
|
}) |
|
|
|
|
this.hots = data.records |
|
|
|
|
}, |
|
|
|
|
// 跳转详情 |
|
|
|
|
toDetail (id) { |
|
|
|
|
this.$router.push(`/index/show?id=${id}`) |
|
|
|
|
this.$router.push(`/index/show?id=${id}`).catch(() => { }) |
|
|
|
|
this.id = id |
|
|
|
|
this.getData() |
|
|
|
|
}, |
|
|
|
|
|
