|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 实验台 --> |
|
|
|
|
<div class="wrap index"> |
|
|
|
|
<div class="wrap index" v-loading="loading"> |
|
|
|
|
<div class="search"> |
|
|
|
|
<h6>创新实验，智能教学</h6> |
|
|
|
|
<div class="input"> |
|
|
|
|
@ -11,9 +11,18 @@ |
|
|
|
|
<div class="station"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.classificationId === active }" |
|
|
|
|
@click="tabChange(item)">{{ item.classificationName }}</a> |
|
|
|
|
<a class="item" v-for="(item, i) in types" :key="i" :class="{ active: item.id === typeActive }" |
|
|
|
|
@click="tabChange(item)">{{ item.name }}</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="tab-wrap"> |
|
|
|
|
<span class="label">课程类型</span> |
|
|
|
|
<div class="tabs1"> |
|
|
|
|
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: item.classificationId === active }" |
|
|
|
|
@click="tab1Change(item)">{{ item.classificationName }}</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="curs"> |
|
|
|
|
<template v-if="products.length"> |
|
|
|
|
<div v-for="(item, i) in products" class="item" :title="item.goodsName" @click="toProduct(item)" :key="i"> |
|
|
|
|
@ -21,7 +30,7 @@ |
|
|
|
|
<div v-else class="cover" :style="{ backgroundImage: 'url(' + item.coverUrl + ')' }"></div> |
|
|
|
|
<div class="bottom"> |
|
|
|
|
<p class="text"><span>{{ item.goodsName || item.curriculumName }}</span></p> |
|
|
|
|
<a v-if="!item.isInEffect">续费</a> |
|
|
|
|
<a v-if="!typeActive && !item.isInEffect">续费</a> |
|
|
|
|
<a v-else>进入实验</a> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -61,10 +70,34 @@ export default { |
|
|
|
|
isZj: location.host === '10.60.32.76', // 浙江万里 |
|
|
|
|
isSq: Setting.isSq, |
|
|
|
|
keyword: this.$route.query.keyword || '', |
|
|
|
|
active: +this.$route.query.active || 0, |
|
|
|
|
typeActive: +this.$route.query.typeActive || 0, |
|
|
|
|
active: +this.$route.query.active || '', |
|
|
|
|
searchTimer: null, |
|
|
|
|
types: [ |
|
|
|
|
{ |
|
|
|
|
id: 0, |
|
|
|
|
name: '校本课程' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '我的课程' |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
defaultTypes: [], |
|
|
|
|
selfBuildCourseType: [], |
|
|
|
|
defaultTabs: [ |
|
|
|
|
{ |
|
|
|
|
classificationId: '', |
|
|
|
|
classificationName: '全部', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
classificationId: -1, |
|
|
|
|
classificationName: '最近使用', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
tabs: [], |
|
|
|
|
products: [], |
|
|
|
|
loading: false, |
|
|
|
|
|
|
|
|
|
linkVisible: false, |
|
|
|
|
links: [], |
|
|
|
|
@ -83,36 +116,44 @@ export default { |
|
|
|
|
methods: { |
|
|
|
|
// 获取tab |
|
|
|
|
async getTab () { |
|
|
|
|
const { data } = await this.$get(this.api.getSchoolCourseAuthority) |
|
|
|
|
const res = await this.$get(this.api.getSchoolCourseAuthority) |
|
|
|
|
this.defaultTypes = res.data |
|
|
|
|
this.selfBuildCourseType = res.selfBuildCourseType |
|
|
|
|
this.tabs = [ |
|
|
|
|
{ |
|
|
|
|
classificationId: 0, |
|
|
|
|
classificationName: '最近使用', |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
classificationId: -1, |
|
|
|
|
classificationName: '全部', |
|
|
|
|
}, |
|
|
|
|
...data, |
|
|
|
|
...this.defaultTabs, |
|
|
|
|
...res.data, |
|
|
|
|
] |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
// 获取课程列表 |
|
|
|
|
async getList () { |
|
|
|
|
this.loading = true |
|
|
|
|
// 最近使用 |
|
|
|
|
if (this.active === 0) { |
|
|
|
|
const { page } = await this.$post(this.api.recentUse, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 100, |
|
|
|
|
if (this.active === -1) { |
|
|
|
|
const { list } = await this.$post(this.api.recentUse, { |
|
|
|
|
courseType: this.typeActive, |
|
|
|
|
goodsName: this.keyword, |
|
|
|
|
}) |
|
|
|
|
this.products = page.records |
|
|
|
|
this.products = list |
|
|
|
|
this.loading = false |
|
|
|
|
} else { |
|
|
|
|
const { data } = await this.$get(this.api.schoolCourse, { |
|
|
|
|
authority: this.active === -1 ? '' : this.active, |
|
|
|
|
goodsName: this.keyword, |
|
|
|
|
}) |
|
|
|
|
this.products = data |
|
|
|
|
if (this.typeActive) { |
|
|
|
|
// 我的课程 |
|
|
|
|
const res = await this.$post(this.api.selfBuildCourse, { |
|
|
|
|
curriculumType: this.active, |
|
|
|
|
curriculumName: this.keyword, |
|
|
|
|
}) |
|
|
|
|
this.products = res.courses |
|
|
|
|
this.loading = false |
|
|
|
|
} else { |
|
|
|
|
// 校本课程 |
|
|
|
|
const { data } = await this.$get(this.api.schoolCourse, { |
|
|
|
|
authority: this.active, |
|
|
|
|
goodsName: this.keyword, |
|
|
|
|
}) |
|
|
|
|
this.products = data |
|
|
|
|
this.loading = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 记录最近使用 |
|
|
|
|
@ -120,35 +161,50 @@ export default { |
|
|
|
|
await this.$post(`${this.api.recordRecentUsage}?mallId=${mallId}`) |
|
|
|
|
}, |
|
|
|
|
toProduct (item) { |
|
|
|
|
const links = item.nonAssociatedLinks |
|
|
|
|
// 已过期 / 没有cid并且没有链接，则跳转到产品详情 |
|
|
|
|
if (!item.isInEffect) { |
|
|
|
|
if (Setting.isPro) { |
|
|
|
|
this.qrcodeVisible = true |
|
|
|
|
} else { |
|
|
|
|
Util.errorMsg('课程已到期，请联系课程负责老师！') |
|
|
|
|
} |
|
|
|
|
} else if (item.isInEffect && !item.cid && !links) { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
this.$router.push(`product?id=${item.mallId}`) |
|
|
|
|
const params = `&keyword=${this.keyword}&active=${this.active}&typeActive=${this.typeActive}` |
|
|
|
|
if (this.typeActive) { |
|
|
|
|
this.$router.push(`/station/preview?courseId=${item.cid || ''}&curriculumName=${encodeURIComponent(item.goodsName || item.curriculumName)}&mallId=${item.mallId || ''}${params}`) |
|
|
|
|
} else { |
|
|
|
|
// 有链接 |
|
|
|
|
if (links && links.length) { |
|
|
|
|
if (links.length === 1) { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
window.open(links[0].url) |
|
|
|
|
const links = item.nonAssociatedLinks |
|
|
|
|
// 已过期 / 没有cid并且没有链接，则跳转到产品详情 |
|
|
|
|
if (!item.isInEffect) { |
|
|
|
|
if (Setting.isPro) { |
|
|
|
|
this.qrcodeVisible = true |
|
|
|
|
} else { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
this.linkVisible = true |
|
|
|
|
this.links = item.nonAssociatedLinks |
|
|
|
|
Util.errorMsg('课程已到期，请联系课程负责老师！') |
|
|
|
|
} |
|
|
|
|
} else if (item.isInEffect && !item.cid && !links) { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
this.$router.push(`product?id=${item.mallId}`) |
|
|
|
|
} else { |
|
|
|
|
this.$router.push(`/station/preview?courseId=${item.cid || ''}&curriculumName=${encodeURIComponent(item.goodsName)}&mallId=${item.mallId || ''}&keyword=${this.keyword}&active=${this.active}`) |
|
|
|
|
// 有链接 |
|
|
|
|
if (links && links.length) { |
|
|
|
|
if (links.length === 1) { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
window.open(links[0].url) |
|
|
|
|
} else { |
|
|
|
|
this.addRecord(item.mallId) |
|
|
|
|
this.linkVisible = true |
|
|
|
|
this.links = item.nonAssociatedLinks |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
this.$router.push(`/station/preview?courseId=${item.cid || ''}&curriculumName=${encodeURIComponent(item.goodsName || item.curriculumName)}&mallId=${item.mallId || ''}${params}`) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// tab切换 |
|
|
|
|
tabChange (item) { |
|
|
|
|
tabChange ({ id }) { |
|
|
|
|
this.typeActive = id |
|
|
|
|
this.tabs = [ |
|
|
|
|
...this.defaultTabs, |
|
|
|
|
...this[id ? 'selfBuildCourseType' : 'defaultTypes'], |
|
|
|
|
] |
|
|
|
|
if (this.active !== '' && this.active !== -1) this.active = '' |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
// tab切换 |
|
|
|
|
tab1Change (item) { |
|
|
|
|
this.active = item.classificationId |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
@ -205,7 +261,7 @@ export default { |
|
|
|
|
font-size: 17px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 50px; |
|
|
|
|
line-height: 44px; |
|
|
|
|
border-bottom: 3px solid transparent; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
@ -216,6 +272,41 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tab-wrap { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
.label { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.tabs1 { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
|
padding: 0 15px; |
|
|
|
|
margin-right: 16px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 40px; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #007eff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.station { |
|
|
|
|
min-height: calc(100vh - 520px); |
|
|
|
|
background: url(../../../assets/img/station1.png) (top left) / auto no-repeat, |
|
|
|
|
|
