|
|
|
|
@ -18,8 +18,9 @@ |
|
|
|
|
</template> |
|
|
|
|
</el-carousel> |
|
|
|
|
|
|
|
|
|
<div class="inner-wrap"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="typw-wrap"> |
|
|
|
|
<div class="type-wrap"> |
|
|
|
|
<div> |
|
|
|
|
<img src="@/assets/img/hot.png" |
|
|
|
|
alt=""> |
|
|
|
|
@ -45,11 +46,50 @@ |
|
|
|
|
<div class="filter"> |
|
|
|
|
<dl v-if="curTab == 1"> |
|
|
|
|
<dt>学科专业</dt> |
|
|
|
|
<el-cascader style="width: 300px;padding: 0 15px" |
|
|
|
|
<dd :class="{active: categoryId === ''}" |
|
|
|
|
@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> |
|
|
|
|
@change="initData"></el-cascader> --> |
|
|
|
|
</dl> |
|
|
|
|
<dl v-if="curTab == 3"> |
|
|
|
|
<dt>产品标签</dt> |
|
|
|
|
@ -157,6 +197,7 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
@ -191,15 +232,15 @@ export default { |
|
|
|
|
form: { |
|
|
|
|
isShelves: 0, |
|
|
|
|
hotTag: 1, |
|
|
|
|
// categoryId: '', |
|
|
|
|
// professionalCategoryId: '', |
|
|
|
|
// professionalId: '', |
|
|
|
|
productType: '', |
|
|
|
|
productName: '', |
|
|
|
|
purchaseStatus: '', |
|
|
|
|
sort: 0, |
|
|
|
|
tagId: '' |
|
|
|
|
}, |
|
|
|
|
categoryId: '', |
|
|
|
|
professionalCategoryId: '', |
|
|
|
|
professionalId: '', |
|
|
|
|
category: [], |
|
|
|
|
// 学科动态加载 |
|
|
|
|
props: { |
|
|
|
|
@ -251,6 +292,9 @@ export default { |
|
|
|
|
subjectList: [], //专业学科 |
|
|
|
|
professionalClassList: [], //专业类 |
|
|
|
|
professionalList: [], //专业 |
|
|
|
|
categoryName: '', |
|
|
|
|
professionalCategoryName: '', |
|
|
|
|
professionalName: '', |
|
|
|
|
classifications: [], |
|
|
|
|
status: [ |
|
|
|
|
{ |
|
|
|
|
@ -312,7 +356,7 @@ export default { |
|
|
|
|
this.getSubject() |
|
|
|
|
this.getLabel() |
|
|
|
|
this.getClass() |
|
|
|
|
this.initData() |
|
|
|
|
// this.initData() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 获取banner |
|
|
|
|
@ -327,15 +371,14 @@ export default { |
|
|
|
|
}, |
|
|
|
|
// 获取列表 |
|
|
|
|
getData () { |
|
|
|
|
const { category } = this |
|
|
|
|
this.loadIns = Loading.service() |
|
|
|
|
this.$post(this.api.listOfGoods, { |
|
|
|
|
...this.form, |
|
|
|
|
categoryId: category[0] || '', |
|
|
|
|
professionalCategoryId: category[1] || '', |
|
|
|
|
professionalId: category[2] || '', |
|
|
|
|
pageNum: this.page, |
|
|
|
|
pageSize: this.pageSize, |
|
|
|
|
categoryId: this.categoryId, |
|
|
|
|
professionalCategoryId: this.categoryId ? this.professionalCategoryId : '', |
|
|
|
|
professionalId: this.categoryId ? this.professionalId : '', |
|
|
|
|
}).then(({ page }) => { |
|
|
|
|
const list = page.records |
|
|
|
|
list && list.forEach(e => { |
|
|
|
|
@ -366,50 +409,99 @@ export default { |
|
|
|
|
}, |
|
|
|
|
// 获取学科类别 |
|
|
|
|
getSubject () { |
|
|
|
|
this.$get(this.api.courseDiscipline).then(res => { |
|
|
|
|
this.subjectList = res.list; |
|
|
|
|
this.$get(this.api.courseDiscipline).then(({ list }) => { |
|
|
|
|
this.subjectList = list.slice(1) |
|
|
|
|
this.getProfessionalClassData(list[1].disciplineId) |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 清除学科类别 |
|
|
|
|
clearClass () { |
|
|
|
|
this.form.professionalCategoryId = ""; |
|
|
|
|
this.form.professionalId = ""; |
|
|
|
|
}, |
|
|
|
|
// 获取专业类 |
|
|
|
|
getProfessionalClass () { |
|
|
|
|
this.clearClass(); |
|
|
|
|
this.getProfessionalClassData(); |
|
|
|
|
this.initData(); |
|
|
|
|
}, |
|
|
|
|
getProfessionalClassData () { |
|
|
|
|
getProfessionalClassData (id) { |
|
|
|
|
let data = { |
|
|
|
|
disciplineId: this.form.categoryId |
|
|
|
|
disciplineId: id || this.categoryId |
|
|
|
|
}; |
|
|
|
|
this.$get(this.api.courseProfessionalClass, data).then(res => { |
|
|
|
|
this.professionalClassList = res.list; |
|
|
|
|
const i = id === 1 ? 1 : 0 |
|
|
|
|
this.$get(this.api.courseProfessionalClass, data).then(({ list }) => { |
|
|
|
|
this.professionalClassList = list.slice(i) |
|
|
|
|
if (id) this.professionalCategoryId = list[i].professionalClassId |
|
|
|
|
this.getProfessionalData(list[i].professionalClassId) |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 清除专业类 |
|
|
|
|
clearProfess () { |
|
|
|
|
this.form.professionalId = ""; |
|
|
|
|
}, |
|
|
|
|
// 获取专业 |
|
|
|
|
getProfessional () { |
|
|
|
|
this.clearProfess(); |
|
|
|
|
this.getProfessionalData(); |
|
|
|
|
this.initData(); |
|
|
|
|
}, |
|
|
|
|
getProfessionalData () { |
|
|
|
|
getProfessionalData (id) { |
|
|
|
|
let data = { |
|
|
|
|
professionalClassId: this.form.professionalCategoryId |
|
|
|
|
professionalClassId: id || this.professionalCategoryId |
|
|
|
|
}; |
|
|
|
|
this.$get(this.api.courseProfessional, data).then(res => { |
|
|
|
|
this.professionalList = res.list; |
|
|
|
|
const i = id === 1 ? 1 : 0 |
|
|
|
|
this.$get(this.api.courseProfessional, data).then(({ list }) => { |
|
|
|
|
this.professionalList = list.slice(i) |
|
|
|
|
if (id) this.professionalId = list[i].professionalId |
|
|
|
|
this.handleCategoryName() |
|
|
|
|
this.initData() |
|
|
|
|
}).catch(err => { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 返回学科name |
|
|
|
|
handleCategoryName () { |
|
|
|
|
if (this.subjectList.length) { |
|
|
|
|
const id = this.categoryId |
|
|
|
|
const list = this.subjectList |
|
|
|
|
if (list.length) { |
|
|
|
|
if (id === '' || id === 1) { |
|
|
|
|
this.categoryName = list[0].disciplineName |
|
|
|
|
} else { |
|
|
|
|
const item = list.find(e => e.disciplineId == id) |
|
|
|
|
this.categoryName = item ? item.disciplineName : '' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (this.professionalClassList.length) { |
|
|
|
|
const id = this.professionalCategoryId |
|
|
|
|
const list = this.professionalClassList |
|
|
|
|
if (list.length) { |
|
|
|
|
if (id === '' || id === 1) { |
|
|
|
|
this.professionalCategoryName = list[0].professionalClassName |
|
|
|
|
} else { |
|
|
|
|
const item = list.find(e => e.professionalClassId == id) |
|
|
|
|
this.professionalCategoryName = item ? item.professionalClassName : '' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (this.professionalList.length) { |
|
|
|
|
const id = this.professionalId |
|
|
|
|
const list = this.professionalList |
|
|
|
|
if (list.length) { |
|
|
|
|
if (id === '' || id === 1) { |
|
|
|
|
this.professionalName = list[0].professionalName |
|
|
|
|
} else { |
|
|
|
|
const item = list.find(e => e.professionalId == id) |
|
|
|
|
this.professionalName = item ? item.professionalName : '' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 学科点击回调 |
|
|
|
|
catetoryClick (id) { |
|
|
|
|
this.categoryId = id |
|
|
|
|
this.professionalCategoryId = id |
|
|
|
|
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 => { |
|
|
|
|
@ -483,11 +575,17 @@ export default { |
|
|
|
|
color: #2e2d31; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.inner-wrap { |
|
|
|
|
padding: 18px 0; |
|
|
|
|
background: url(../../../assets/img/product/bg1.png) 0 159px no-repeat, |
|
|
|
|
url(../../../assets/img/product/bg2.png) bottom right no-repeat; |
|
|
|
|
background-color: #f3f6fa; |
|
|
|
|
} |
|
|
|
|
.inner { |
|
|
|
|
width: 1146px; |
|
|
|
|
margin: 18px auto; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
.typw-wrap { |
|
|
|
|
.type-wrap { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-bottom: 18px; |
|
|
|
|
@ -565,6 +663,9 @@ export default { |
|
|
|
|
color: #9278ff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.category { |
|
|
|
|
margin: 5px 10px 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.vals { |
|
|
|
|
display: inline-flex; |
|
|
|
|
|
