|
|
|
|
@ -9,10 +9,13 @@ |
|
|
|
|
<img :src="item.banner" |
|
|
|
|
alt="" |
|
|
|
|
:style="{height: carouselHeight}"> |
|
|
|
|
<!-- <img src="https://huoran.oss-cn-shenzhen.aliyuncs.com/20230707/png/1677215781005844480.png" |
|
|
|
|
<!-- <img src="https://huoran.oss-cn-shenzhen.aliyuncs.com/20230726/png/1684091617063493632.png" |
|
|
|
|
alt="" |
|
|
|
|
:style="{height: carouselHeight}"> --> |
|
|
|
|
<p class="banner-name">{{ item.title }}</p> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<h6>{{ item.title }}</h6> |
|
|
|
|
<p class="sub">{{ item.subheading }}</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</template> |
|
|
|
|
@ -50,46 +53,20 @@ |
|
|
|
|
@click="catetoryClick('')">全部</dd> |
|
|
|
|
<dd :class="{active: categoryId === 1}" |
|
|
|
|
@click="catetoryClick(1)">不限</dd> |
|
|
|
|
|
|
|
|
|
<el-dropdown class="category" |
|
|
|
|
@command="id => categoryDropdown(id, 'categoryId')"> |
|
|
|
|
<span class="el-dropdown-link"> |
|
|
|
|
{{ categoryName }}<i class="el-icon-arrow-down el-icon--right"></i> |
|
|
|
|
</span> |
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
<el-dropdown-item v-for="(item, i) in subjectList" |
|
|
|
|
:key="i" |
|
|
|
|
:command="item.disciplineId">{{ item.disciplineName }}</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
|
<el-dropdown class="category" |
|
|
|
|
@command="id => categoryDropdown(id, 'professionalCategoryId')"> |
|
|
|
|
<span class="el-dropdown-link"> |
|
|
|
|
{{ professionalCategoryName }}<i class="el-icon-arrow-down el-icon--right"></i> |
|
|
|
|
</span> |
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
<el-dropdown-item v-for="(item, i) in professionalClassList" |
|
|
|
|
:key="i" |
|
|
|
|
:command="item.professionalClassId">{{ item.professionalClassName }}</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
|
<el-dropdown class="category" |
|
|
|
|
@command="id => categoryDropdown(id, 'professionalId')"> |
|
|
|
|
<span class="el-dropdown-link"> |
|
|
|
|
{{ professionalName }}<i class="el-icon-arrow-down el-icon--right"></i> |
|
|
|
|
</span> |
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
<el-dropdown-item v-for="(item, i) in professionalList" |
|
|
|
|
:key="i" |
|
|
|
|
:command="item.professionalId">{{ item.professionalName }}</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
|
|
|
|
|
|
<!-- <el-cascader style="width: 300px;padding: 0 15px" |
|
|
|
|
v-model="category" |
|
|
|
|
:props="props" |
|
|
|
|
clearable |
|
|
|
|
@change="initData"></el-cascader> --> |
|
|
|
|
<div v-for="(item, i) in category" |
|
|
|
|
:key="i" |
|
|
|
|
class="category-item"> |
|
|
|
|
<span v-if="!item.val.length" |
|
|
|
|
class="name" |
|
|
|
|
@click="nameClick(i)">{{ item.name }}</span> |
|
|
|
|
<el-cascader :class="{active: item.disciplineId == categoryId}" |
|
|
|
|
:ref="'category' + i" |
|
|
|
|
v-model="item.val" |
|
|
|
|
:options="item.list" |
|
|
|
|
:props="{ checkStrictly: true }" |
|
|
|
|
placeholder="" |
|
|
|
|
@change="id => categoryChange(id, item)"></el-cascader> |
|
|
|
|
</div> |
|
|
|
|
</dl> |
|
|
|
|
<dl v-if="curTab == 3"> |
|
|
|
|
<dt>产品标签</dt> |
|
|
|
|
@ -244,7 +221,6 @@ export default { |
|
|
|
|
category: [], |
|
|
|
|
// 学科动态加载 |
|
|
|
|
props: { |
|
|
|
|
// multiple: true, |
|
|
|
|
checkStrictly: true, |
|
|
|
|
lazy: true, |
|
|
|
|
lazyLoad (node, resolve) { |
|
|
|
|
@ -252,11 +228,13 @@ export default { |
|
|
|
|
// 学科类别 |
|
|
|
|
if (!level) { |
|
|
|
|
that.$get(that.api.courseDiscipline).then(({ list }) => { |
|
|
|
|
list = list.slice(1).filter(e => e.level > 1) |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.disciplineId |
|
|
|
|
e.label = e.disciplineName |
|
|
|
|
e.children = [] |
|
|
|
|
}) |
|
|
|
|
that.category = [list[0].disciplineId] |
|
|
|
|
resolve(list) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
} else if (level === 1) { |
|
|
|
|
@ -264,6 +242,7 @@ export default { |
|
|
|
|
that.$get(that.api.courseProfessionalClass, { |
|
|
|
|
disciplineId: value |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
list = list.filter(e => e.level > 1) |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.professionalClassId |
|
|
|
|
e.label = e.professionalClassName |
|
|
|
|
@ -276,6 +255,7 @@ export default { |
|
|
|
|
that.$get(that.api.courseProfessional, { |
|
|
|
|
professionalClassId: value |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
list = list.filter(e => e.level > 1) |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.professionalId |
|
|
|
|
e.label = e.professionalName |
|
|
|
|
@ -320,20 +300,7 @@ export default { |
|
|
|
|
name: '热销排行' |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
list: [ |
|
|
|
|
{ |
|
|
|
|
coverUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230220/jpg/1627584816180912128.jpg', |
|
|
|
|
courseName: '理论课程' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
coverUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230220/jpg/1627584816180912128.jpg', |
|
|
|
|
courseName: '理论课程' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
coverUrl: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20230220/jpg/1627584816180912128.jpg', |
|
|
|
|
courseName: '理论课程' |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
list: [], |
|
|
|
|
keyword: '', |
|
|
|
|
total: 0, |
|
|
|
|
page: 1, |
|
|
|
|
@ -356,7 +323,7 @@ export default { |
|
|
|
|
this.getSubject() |
|
|
|
|
this.getLabel() |
|
|
|
|
this.getClass() |
|
|
|
|
// this.initData() |
|
|
|
|
this.initData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取banner |
|
|
|
|
@ -408,38 +375,83 @@ export default { |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 获取学科类别 |
|
|
|
|
getSubject () { |
|
|
|
|
async getSubject () { |
|
|
|
|
// 学科类别 |
|
|
|
|
this.$get(this.api.courseDiscipline).then(({ list }) => { |
|
|
|
|
this.subjectList = list.slice(1) |
|
|
|
|
this.getProfessionalClassData(list[1].disciplineId) |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
list = list.filter(e => e.level > 1).slice(1) |
|
|
|
|
const result = [] |
|
|
|
|
const promises = [] |
|
|
|
|
list.map((e, i) => { |
|
|
|
|
promises.push(new Promise((resolve, reject) => { |
|
|
|
|
// 专业类 |
|
|
|
|
this.$get(this.api.courseProfessionalClass, { |
|
|
|
|
disciplineId: e.disciplineId |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
list = list.filter(e => e.level > 1) |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.professionalClassId |
|
|
|
|
e.label = e.professionalClassName |
|
|
|
|
|
|
|
|
|
// 专业 |
|
|
|
|
this.$get(this.api.courseProfessional, { |
|
|
|
|
professionalClassId: e.value |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
list = list.filter(e => e.level > 1) |
|
|
|
|
list.map(e => { |
|
|
|
|
e.value = e.professionalId |
|
|
|
|
e.label = e.professionalName |
|
|
|
|
}) |
|
|
|
|
if (list.length) e.children = list |
|
|
|
|
resolve() |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}) |
|
|
|
|
result.push({ |
|
|
|
|
val: [], |
|
|
|
|
disciplineId: e.disciplineId, |
|
|
|
|
name: e.disciplineName, |
|
|
|
|
list |
|
|
|
|
}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
})) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Promise.all(promises).then(_ => { |
|
|
|
|
console.log("🚀 ~ file: index.vue:378 ~ this.$get ~ result:", result) |
|
|
|
|
this.category = result |
|
|
|
|
}) |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
nameClick (i) { |
|
|
|
|
this.$refs['category' + i][0].toggleDropDownVisible() |
|
|
|
|
}, |
|
|
|
|
categoryChange (val, item) { |
|
|
|
|
this.categoryId = item.disciplineId |
|
|
|
|
this.professionalCategoryId = val[0] || '' |
|
|
|
|
this.professionalId = val[1] || '' |
|
|
|
|
this.initData() |
|
|
|
|
}, |
|
|
|
|
getProfessionalClassData (id) { |
|
|
|
|
let data = { |
|
|
|
|
disciplineId: id || this.categoryId |
|
|
|
|
}; |
|
|
|
|
const i = id === 1 ? 1 : 0 |
|
|
|
|
this.$get(this.api.courseProfessionalClass, data).then(({ list }) => { |
|
|
|
|
this.$get(this.api.courseProfessionalClass, { |
|
|
|
|
disciplineId: id || this.categoryId |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
this.professionalClassList = list.slice(i) |
|
|
|
|
if (id) this.professionalCategoryId = list[i].professionalClassId |
|
|
|
|
this.getProfessionalData(list[i].professionalClassId) |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 获取专业 |
|
|
|
|
getProfessionalData (id) { |
|
|
|
|
let data = { |
|
|
|
|
professionalClassId: id || this.professionalCategoryId |
|
|
|
|
}; |
|
|
|
|
const i = id === 1 ? 1 : 0 |
|
|
|
|
this.$get(this.api.courseProfessional, data).then(({ list }) => { |
|
|
|
|
this.$get(this.api.courseProfessional, { |
|
|
|
|
professionalClassId: id || this.professionalCategoryId |
|
|
|
|
}).then(({ list }) => { |
|
|
|
|
this.professionalList = list.slice(i) |
|
|
|
|
if (id) this.professionalId = list[i].professionalId |
|
|
|
|
this.handleCategoryName() |
|
|
|
|
this.initData() |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
}).catch(err => { }) |
|
|
|
|
}, |
|
|
|
|
// 返回学科name |
|
|
|
|
handleCategoryName () { |
|
|
|
|
@ -488,20 +500,6 @@ export default { |
|
|
|
|
this.professionalId = id |
|
|
|
|
this.initData() |
|
|
|
|
}, |
|
|
|
|
// 学科类别下拉 |
|
|
|
|
categoryDropdown (id, prop) { |
|
|
|
|
this[prop] = id |
|
|
|
|
if (prop === 'categoryId') { |
|
|
|
|
this.getProfessionalClassData(id) |
|
|
|
|
} |
|
|
|
|
if (prop === 'professionalCategoryId') { |
|
|
|
|
this.getProfessionalData(id) |
|
|
|
|
} |
|
|
|
|
if (prop === 'professionalId') { |
|
|
|
|
this.handleCategoryName() |
|
|
|
|
this.initData() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 获取产品类型 |
|
|
|
|
getClass () { |
|
|
|
|
this.$get(this.api.productTypeList).then(res => { |
|
|
|
|
@ -525,7 +523,7 @@ export default { |
|
|
|
|
// tab切换 |
|
|
|
|
tabChange ({ id }) { |
|
|
|
|
this.curTab = id |
|
|
|
|
this.category = [] |
|
|
|
|
// this.category = [] |
|
|
|
|
this.form.hotTag = 1 |
|
|
|
|
this.form.selection = '' |
|
|
|
|
this.form.tagId = '' |
|
|
|
|
@ -567,12 +565,18 @@ export default { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.banner-name { |
|
|
|
|
.texts { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 116px; |
|
|
|
|
top: 200px; |
|
|
|
|
left: 188px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
font-size: 50px; |
|
|
|
|
color: #2e2d31; |
|
|
|
|
} |
|
|
|
|
.sub { |
|
|
|
|
font-size: 24px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.inner-wrap { |
|
|
|
|
@ -666,6 +670,35 @@ export default { |
|
|
|
|
.category { |
|
|
|
|
margin: 5px 10px 0; |
|
|
|
|
} |
|
|
|
|
/deep/.category-item { |
|
|
|
|
display: inline-flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
.name { |
|
|
|
|
position: relative; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
cursor: pointer; |
|
|
|
|
& + .el-cascader { |
|
|
|
|
width: 50px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/deep/.el-cascader { |
|
|
|
|
width: auto; |
|
|
|
|
.el-input { |
|
|
|
|
.el-input__inner { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
border: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&.active { |
|
|
|
|
.el-input .el-input__inner { |
|
|
|
|
color: #9278ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.vals { |
|
|
|
|
display: inline-flex; |
|
|
|
|
|
