diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue index e0da782a..f85b9bed 100644 --- a/src/views/portal/course/Index.vue +++ b/src/views/portal/course/Index.vue @@ -7,10 +7,10 @@
-
+
搜索条件 - {{ tag.name }} + {{ tag.name }}
@@ -20,58 +20,60 @@
- - 全部 - 录播课 - 线下课 -
- 学习项目 - + 全部 + 录播课 + 线下课 + + 学习项目
-
- - -
-
- 一级分类: -
- - 全部 - {{item.name}} -
- +
+
+
+ 一级分类: +
+ -
- 二级分类: -
- - 全部 - {{item.name}} - -
-
-
- 三级分类: -
- - 全部 - {{item.name}} - -
- -
- - +
+
+
+
+ 二级分类: +
+
+ 全部 +
+ +
+
+
+
+
+ 三级分类: +
+
+ 全部 +
+ +
+
+
@@ -321,11 +323,76 @@ export default { interactBar }, computed: { - ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]) + ...mapGetters(["resOwnerMap", "sysTypeMap", "userInfo", "identity"]), + stagList(){ //计算出选择的内容 + let list=[]; + if(this.keyword){ + list.push({ + type:0, + id:'keyword', + name:this.keyword, + checked:true + }) + } + this.ctypeList.forEach(item=>{ + if(item.checked){ + list.push(item); + } + }); + this.oneList.forEach(item=>{ + if(item.checked){ + list.push(item); + } + }); + this.twoList.forEach(item=>{ + if(item.checked){ + list.push(item); + } + }); + this.threeList.forEach(item=>{ + if(item.checked){ + list.push(item); + } + }); + //console.log(list,'list'); + return list; + }, + ctypeTagAll(){ + let flag=this.ctypeList.some(item=>{ + return item.checked; + }); + return !flag; + }, + oneTagAll(){ + let flag=this.oneList.some(item=>{ + return item.checked; + }); + return !flag; + }, + twoTagAll(){ + let flag=this.twoList.some(item=>{ + return item.checked; + }); + return !flag; + }, + threeTagAll(){ + let flag=this.threeList.some(item=>{ + return item.checked; + }); + return !flag; + } }, data() { return { - + ctypeList:[ + {type:1,id:20,name:'录播课',checked:false}, + {type:1,id:30,name:'线下课',checked:false}, + {type:1,id:40,name:'学习项目',checked:false}, + ], + oneList:[], //一级分类{type:11} + twoList:[], //二级分类{type:12} + threeList:[],//三级分类{type:13} + resonimg:{}, formatDate, formatNum:formatUserNumber, @@ -354,10 +421,8 @@ export default { pageSize: 9 ,//每页多少条 openCourse:0,//增加的公开课查询 }, - - optionsList: [], //分类数据 sceneList: [], //场景 - keyword: "", + keyword: "",//查询的关键字 anking: "", isFind: false, searchbar: { @@ -385,7 +450,7 @@ export default { totalPages: 1 }; }, - + mounted() { let screenWidth = window.screen.availWidth; if (screenWidth < 1280) { @@ -407,11 +472,11 @@ export default { this.getAnkingData(); window.addEventListener("scroll",this.handleScroll); if (this.$route.query !== {}) { - this.course.keyword = this.$route.query.keyword; + this.keyword = this.$route.query.keyword; } - this.getSceneData(); - this.getTypeData(); - if (this.course.keyword != undefined) { + this.loadTypeData();//加载分类 + //this.getSceneData(); //已经没有场景了 + if (this.keyword) { this.totalPages = 4; } @@ -451,6 +516,116 @@ export default { window.removeEventListener("scroll", this.handleScroll); }, methods: { + stagClose(tag,tagIndex){ + tag.checked=false; + if(tag.type==0){ + this.keyword=''; + } + }, + handleTypeAllClick(t){ + if(t==1){ + this.ctypeList.forEach(ct=>{ + ct.checked=false; + }) + }else if(t==11){ + this.oneList.forEach(ct=>{ + ct.checked=false; + }); + this.twoList.forEach(ct=>{ + ct.checked=false; + }); + this.threeList.forEach(ct=>{ + ct.checked=false; + }); + this.twoList=[]; + this.threeList=[]; + }else if(t==12){ + this.twoList.forEach(ct=>{ + ct.checked=false; + }); + this.threeList.forEach(ct=>{ + ct.checked=false; + }); + this.threeList=[]; + }else if(t==13){ + this.threeList.forEach(ct=>{ + ct.checked=false; + }) + } + this.searchData(); + }, + handleTypeClick(item){ + item.checked=!item.checked; + this.searchData(); + }, + handleOptionClick(item){ + item.checked=!item.checked; + this.handleChangeTypes(); + this.searchData(); + }, + handleChangeTypes(){ + //重新计算 + this.twoList=[]; + this.threeList=[]; + let $this=this; + this.oneList.forEach(one=>{ + if(one.checked){ + one.children.forEach(two=>{ + $this.twoList.push(two); + if(two.checked){ + two.children.forEach(three=>{ + $this.threeList.push(three); + }) + } + }); + } + }) + }, + async loadTypeData() { + let $this=this; + try { + const { result, status } = await apiType.tree(1); + if (status === 200) { + result.forEach(item=>{ + let newItem={ + type:11, + id:item.id, + name:item.name, + children:[], + checked:false + } + if(item.children){ + item.children.forEach(subItem=>{ + let newSubItem={ + type:12, + id:subItem.id, + name:subItem.name, + children:[], + checked:false + } + + if(subItem.children){ + subItem.children.forEach(sub=>{ + let newSub={ + type:13, + id:sub.id, + name:sub.name, + children:[], + checked:false + } + newSubItem.children.push(newSub); + }) + } + newItem.children.push(newSubItem); + }) + } + $this.oneList.push(newItem); + }); + } + } catch (error) { + console.log(error); + } + }, banJump() { if(this.resonimg.JumpUrl) { window.open(this.resonimg.JumpUrl); @@ -474,7 +649,8 @@ export default { this.searchData(); }, emitInput(val) { - this.course.keyword = val; + this.keyword = val; + //this.stagList; this.searchData(); }, handleScroll() { @@ -532,10 +708,6 @@ export default { } return this.sysTypeMap.get(code); }, - useHotword(item) { - this.$set(this.course, "keyword", item.keyword); - this.searchData(); - }, searchterm() { apiSearchterm.list(5, 1).then(res => { if (res.status == 200) { @@ -633,36 +805,6 @@ export default { } this.searchData(); }, - - // 分类 - changeType(num) { - this.types.oneSubList = []; - this.types.subOne = "0"; - this.types.towSubList = []; - let list = {}; - if (num !== 0) { - list = this.optionsList.find(item => { - return item.id === num; - }); - } - if (list && list.children) { - this.types.oneSubList = list.children; - } - this.searchData(); - }, - // 子级分类 - changeTypeSub(num) { - this.types.subTow = "0"; - let list = {}; - if (num !== 0) { - apiType.list(1, num).then(res => { - if (res.status === 200) { - this.types.towSubList = res.result; - } - }); - } - this.searchData(); - }, //获取场景，保留 async getSceneData() { try { @@ -674,17 +816,6 @@ export default { console.log(error); } }, - //获取分类，此处获取提内容分类 - async getTypeData() { - try { - const { result, status } = await apiType.tree(1); - if (status === 200) { - this.optionsList = result; - } - } catch (error) { - console.log(error); - } - }, loadMore() { this.course.pageIndex += 1; this.search(); @@ -700,7 +831,7 @@ export default { }, async search() { let that = this; - if (this.course.keyword) { + if (this.keyword) { apiSearchterm.save({ keyword: this.course.keyword, type: 1 }); } @@ -1307,6 +1438,27 @@ export default { // margin: 10px 0; // color: #999999; // } -// } - +// }] +.search-item-type{ + line-height: 25px; + padding-right: 10px;width:85px; + white-space: nowrap; +} +.option-item{ + font-family:"Menlo", "苹方-简" !important; + color:#3d3d3d; + display: inline-block; + font-size: 14px; + margin: 0px 15px; +} +.option-border{ + width: 2px; + display: inline-block; + height: 15px; + margin: 0px 20px -2px 20px; + background: #666; +} +.option-active{ + color:#387DF7; +}