huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

产品课程联调

Browse Source
master
yujialong 5 months ago
parent c9d0d17779
commit 179f12a8a7
6 changed files with 182 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/api/index.js
  2. 41
      src/components/breadcrumb/index.vue
  3. 6
      src/mixins/page/index.js
  4. 12
      src/pages/course/index.vue
  5. 115
      src/pages/index/list/index.vue
  6. 185
      src/pages/index/show/index.vue

3
src/api/index.js
Unescape View File

@ -28,7 +28,8 @@ export default {
listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`, listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
courseProduct: `/iasf/productDetails/courseProduct`, courseProduct: `/iasf/productDetails/courseProduct`,
categoryList: `/iasf/categoryService/Category/list`, categoryList: `/iasf/categoryService/Category/list`,
productDetailsFind: `/iasf/productDetails/findById`, foregroundPreview: `/iasf/productDetails/foregroundPreview`,
productDetailsPreview: `/iasf/productDetails/articlePreview`,
courseDiscipline: `/iasf/subject/courseDiscipline`, courseDiscipline: `/iasf/subject/courseDiscipline`,
courseProfessionalClass: `/iasf/subject/courseProfessionalClass`, courseProfessionalClass: `/iasf/subject/courseProfessionalClass`,
courseProfessional: `/iasf/subject/courseProfessional`, courseProfessional: `/iasf/subject/courseProfessional`,

41
src/components/breadcrumb/index.vue
Unescape View File

@ -3,15 +3,11 @@
<div class="breadcrumb"> <div class="breadcrumb">
<el-breadcrumb separator=">"> <el-breadcrumb separator=">">
<template v-for="(item, i) in data"> <template v-for="(item, i) in data">
<el-breadcrumb-item <el-breadcrumb-item v-if="i != data.length - 1" :key="i"
v-if="i != data.length - 1"
:key="i"
:to="{ path: item.path || '/column', query: item.query }"> :to="{ path: item.path || '/column', query: item.query }">
{{ item.name | i18nName($i18n)}} {{ item.name | i18nName($i18n) }}
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item <el-breadcrumb-item v-else :key="i">
v-else
:key="i">
{{ item.name }} {{ item.name }}
</el-breadcrumb-item> </el-breadcrumb-item>
</template> </template>
@ -21,42 +17,45 @@
<script> <script>
export default { export default {
props: ['data'], props: ['data'],
data() { data () {
return { return {
}; };
}, },
methods: { methods: {
}, },
filters: { filters: {
i18nName(name,type) { i18nName (name, type) {
switch (name) { switch (name) {
case '专利': case '专利':
return type.t('column.patent') return type.t('column.patent')
case '专著': case '专著':
return type.t('column.monograph') return type.t('column.monograph')
case '论文': case '论文':
return type.t('column.paper') return type.t('column.paper')
case '科学研究': case '科学研究':
return type.t('column.scientificResearch') return type.t('column.scientificResearch')
default: default:
return name return name
} }
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.breadcrumb { .breadcrumb {
margin: 4px 0 16px; margin: 4px 0 16px;
/deep/.el-breadcrumb__item { /deep/.el-breadcrumb__item {
.is-link, .el-breadcrumb__separator { .is-link,
.el-breadcrumb__separator {
font-weight: 400; font-weight: 400;
color: $main-color; color: $main-color;
} }
&:last-child { &:last-child {
.is-link { .is-link {
color: #0B1D30; color: #0B1D30;

6
src/mixins/page/index.js
Unescape View File

@ -109,8 +109,12 @@ export default {
href = this.$router.resolve(href + '&siteId=' + site).href href = this.$router.resolve(href + '&siteId=' + site).href
} }
this.toHref(item.isOpen, href) this.toHref(item.isOpen, href)
} else if (item.listStyleId === 73) { // 长页模板为产品中心的，该栏目下的文章全部跳产品详情页
this.$router.push(`/index/show?id=${item.id}`)
} else { } else {
this.$router.push(`/article?articleId=${item.id}&siteId=${this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`) let href = `/article?articleId=${item.id}&siteId=${this.site}&id=${this.id}`
if (form) href += `&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`
this.$router.push(href)
} }
}, },
// 关联栏目的查看全部跳转 // 关联栏目的查看全部跳转

12
src/pages/course/index.vue
Unescape View File

@ -43,7 +43,7 @@
<!-- <div class="course-bg"></div> --> <!-- <div class="course-bg"></div> -->
<template v-if="list.length"> <template v-if="list.length">
<ul> <ul>
<li v-for="(item, index) in list" :key="index" @click="toDetail(item.id)"> <li v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<img :src="item.coverImageUrl" alt="" /> <img :src="item.coverImageUrl" alt="" />
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="desc" v-html="item.introduction"></div> <div class="desc" v-html="item.introduction"></div>
@ -81,11 +81,12 @@
</template> </template>
<script> <script>
import mixins from '@/mixins/page'
import { Loading } from "element-ui"; import { Loading } from "element-ui";
export default { export default {
mixins: [mixins],
data () { data () {
return { return {
id: +this.$route.query.id,
info: {}, info: {},
columnBanner: '', columnBanner: '',
columns: [], columns: [],
@ -237,8 +238,10 @@ export default {
// 判断是否是课程页 // 判断是否是课程页
this.$router.replace(`/${(typeId === 1 || typeId === 4) && to.templateId === 12 ? 'course' : 'column'}?id=${to.id}&siteId=${this.site}`).catch(() => { }) this.$router.replace(`/${(typeId === 1 || typeId === 4) && to.templateId === 12 ? 'course' : 'column'}?id=${to.id}&siteId=${this.site}`).catch(() => { })
}, },
toDetail (id) { // 跳转详情
this.$router.push(`/course/details?id=${id}`); toDetail (item) {
item.listStyleId = 73 // 手动把产品中心长页的id赋进去，跳转文章的方法是公用的，产品中心要跳转到产品详情页，不是文章详情页
this.toArtice(item)
} }
} }
}; };
@ -405,6 +408,7 @@ export default {
dl { dl {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
padding: 12px 0; padding: 12px 0;

115
src/pages/index/list/index.vue
Unescape View File

@ -124,7 +124,7 @@
<div class="courses"> <div class="courses">
<template v-if="list.length"> <template v-if="list.length">
<ul> <ul>
<li v-for="(item, i) in list" :key="i" @click="toDetail(item.id)"> <li v-for="(item, i) in list" :key="i" @click="toDetail(item)">
<img :src="item.coverImageUrl" alt="" /> <img :src="item.coverImageUrl" alt="" />
<div class="texts"> <div class="texts">
<el-tooltip effect="dark" :visible-arrow="false" :content="item.name" placement="bottom"> <el-tooltip effect="dark" :visible-arrow="false" :content="item.name" placement="bottom">
@ -132,18 +132,16 @@
</el-tooltip> </el-tooltip>
<div class="desc" v-html="item.introduction"></div> <div class="desc" v-html="item.introduction"></div>
<div class="tags"> <div class="tags">
<el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false" <el-tooltip v-if="item.tag" class="item" effect="dark" :visible-arrow="false" :content="item.tag"
:content="item.tagsName" placement="bottom"> placement="bottom">
<div> <div>
<el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag> <el-tag v-for="(tag, i) in item.tag.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div :class="['metas']"> <div class="metas">
<el-tag v-if="item.typeName" effect="dark"> <el-tag v-if="item.isTop" effect="dark" size="small">官方精选</el-tag>
{{ item.typeName }} <div class="meta">{{ item.totalBrowsing }}人看过</div>
</el-tag>
<div v-if="item.isCourse" class="meta">{{ item.totalBrowsing }}人看过</div>
</div> </div>
</div> </div>
</li> </li>
@ -188,6 +186,7 @@ export default {
}, },
], ],
form: { form: {
categoryId: '',
subjectCategoryId: '', subjectCategoryId: '',
professionalCategoryId: '', professionalCategoryId: '',
majorId: '', majorId: '',
@ -197,9 +196,6 @@ export default {
timeOrdering: '', timeOrdering: '',
classificationTagId: '', classificationTagId: '',
}, },
categoryId: '',
professionalCategoryId: '',
professionalId: '',
category: [], category: [],
professionalClasses: [], professionalClasses: [],
professionals: [], professionals: [],
@ -240,6 +236,11 @@ export default {
}; };
}, },
watch: { watch: {
$route () {
this.id = this.$route.query.id
this.getBanner()
this.initData()
},
'form.keyWord': function (val) { 'form.keyWord': function (val) {
clearTimeout(this.searchTimer); clearTimeout(this.searchTimer);
this.searchTimer = setTimeout(() => { this.searchTimer = setTimeout(() => {
@ -254,7 +255,8 @@ export default {
this.getClass() this.getClass()
this.initData() this.initData()
}, },
methods: {// 初始化动画 methods: {
// 初始化动画
initAnimate () { initAnimate () {
ScrollReveal().reveal('.animate', { ScrollReveal().reveal('.animate', {
reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次） reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
@ -332,36 +334,39 @@ export default {
data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing']) data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
this.modules = json this.modules = json
this.$nextTick(this.initAnimate) this.$nextTick(this.initAnimate)
console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
} }
}).catch(err => { }) }).catch(err => { })
}, },
// 获取列表 // 获取列表
getData () { async getData () {
this.loadIns = Loading.service() try {
this.$post(this.api.courseProduct, { this.loadIns = Loading.service()
...this.form, const { data } = await this.$post(this.api.courseProduct, {
siteId: this.site, ...this.form,
pageNum: this.page, siteId: this.site,
pageSize: this.pageSize, pageNum: this.page,
columnId: +this.id, pageSize: this.pageSize,
}).then(({ data }) => { columnId: +this.id,
this.list = data.records })
const list = data.records
list && list.forEach(e => {
// 没简介则取描述，描述要去掉标签图片
if (!e.introduction) {
const el = document.createElement('div')
el.innerHTML = e.detailedDescription
e.introduction = el.innerText
}
})
this.list = list
this.total = +data.total this.total = +data.total
} finally {
this.loadIns.close() this.loadIns.close()
}).catch(res => { }
this.loadIns.close()
})
}, },
initData () { initData () {
this.page = 1; this.page = 1;
this.getData(); this.getData();
}, },
// 简介点击定位锚点
toPart (i) {
this.active = i
// document.querySelector(`#part${i}`).scrollIntoView()
},
// 获取产品标签 // 获取产品标签
async getLabel () { async getLabel () {
@ -407,47 +412,6 @@ export default {
this.form.majorId = item.professionalId this.form.majorId = item.professionalId
this.initData() this.initData()
}, },
// 获取学科类别
// async getSubject () {
// // 学科类别
// this.$get(this.api.subjectCategoryCited).then(({ list }) => {
// list = list.filter(e => e.disciplineId != 1)
// list.map((e, i) => {
// e.id = e.disciplineId
// e.name = e.disciplineName
// // 专业类
// e.professionalClasses.map(e => {
// e.id = e.professionalClassId
// e.name = e.professionalClassName
// // 专业
// e.professionals.map(e => {
// e.id = e.professionalId
// e.name = e.professionalName
// })
// e.children = e.professionals
// })
// e.children = e.professionalClasses
// })
// this.category = list
// }).catch(err => { })
// },
// 学科点击回调
categoryClick (item, i) {
const { id, children } = item
this[i === 1 ? 'categoryId' : i === 2 ? 'professionalCategoryId' : 'professionalId'] = id
// 学科类别
if (i === 1) {
this.professionalCategoryId = ''
this.professionalId = ''
if (children) this.professionalClasses = children
this.professionals = []
} else if (i === 2) { // 专业类
this.professionalId = ''
if (children) this.professionals = children
}
this.initData()
},
// 获取产品类型 // 获取产品类型
async getClass () { async getClass () {
const { data } = await this.$post(`${this.api.categoryList}?siteId=${this.site}&type=1`) const { data } = await this.$post(`${this.api.categoryList}?siteId=${this.site}&type=1`)
@ -482,8 +446,9 @@ export default {
this.getData(); this.getData();
}, },
// 跳转详情 // 跳转详情
toDetail (id) { toDetail (item) {
this.$router.push(`/index/show?id=${id}`); item.listStyleId = 73 // 手动把产品中心长页的id赋进去，跳转文章的方法是公用的，产品中心要跳转到产品详情页，不是文章详情页
this.toArtice(item)
} }
} }
}; };

185
src/pages/index/show/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save