|
|
@@ -21,7 +21,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="choose">
|
|
|
- <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index" :style="{margin:!CourseTypeJson[item.id].length && 0}">
|
|
|
+ <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index"
|
|
|
+ :style="{ margin: !CourseTypeJson[item.id].length && 0 }">
|
|
|
<div v-if="CourseTypeJson[item.id].length"><span>{{ item.name }}</span>:</div>
|
|
|
<div class="typeCss" v-if="CourseTypeJson[item.id].length">
|
|
|
<div class="cName" @click="getCourse(item.name, '', item.id, 1)"
|
|
|
@@ -43,78 +44,114 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="body_student">
|
|
|
- <!-- <div class="top">
|
|
|
- <div :class="{ active: 0 == zoneListId }" @click="selectAll()">
|
|
|
- 所有课程
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="{ active: item.id == zoneListId }"
|
|
|
- v-for="(item, index) in zoneList"
|
|
|
- :key="index"
|
|
|
- @click="checkZone(item.id)"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
+ <div class="typeCheck">
|
|
|
+ <el-switch v-model="typeCheck"></el-switch><span>分类显示</span>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <div class="main_box">
|
|
|
- <div class="box_course" v-for="(item, index) in zoneClass" :key="index">
|
|
|
- <div class="wheel">
|
|
|
- <img :src="
|
|
|
- item.cover
|
|
|
- ? JSON.parse(item.cover)[0].url
|
|
|
- : require('../assets/wheel.png')
|
|
|
- " alt="" />
|
|
|
- </div>
|
|
|
- <div class="middle_white">
|
|
|
- <div class="textOverflow">{{ item.title }}</div>
|
|
|
- <div class="nameAndLength">
|
|
|
- <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
|
|
|
- <div>{{ item.typename }}</div>
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <div>{{ JSON.parse(item.chapters).length }}阶段</div>
|
|
|
+ <div class="main_box" v-loading="loading">
|
|
|
+ <div style="display:flex;flex-wrap:wrap" v-if="!typeCheck">
|
|
|
+ <div class="box_course" v-for="(item, index) in zoneClass" :key="index">
|
|
|
+ <div class="wheel">
|
|
|
+ <img :src="
|
|
|
+ item.cover
|
|
|
+ ? JSON.parse(item.cover)[0].url
|
|
|
+ : require('../assets/wheel.png')
|
|
|
+ " alt="" />
|
|
|
</div>
|
|
|
- <div class="school_box">
|
|
|
- <el-tooltip effect="light" :content="item.school" placement="top">
|
|
|
- <div class="school">
|
|
|
- {{ item.school }}
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
- <div style="color: #b4b4b4">{{ item.utime }}</div>
|
|
|
- </div>
|
|
|
- <!-- <div class="people">
|
|
|
- <div class="man">
|
|
|
- <img src="../assets/people.png" alt="" />
|
|
|
+ <div class="middle_white">
|
|
|
+ <div class="textOverflow">{{ item.title }}</div>
|
|
|
+ <div class="nameAndLength">
|
|
|
+ <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
|
|
|
+ <div>{{ item.typename }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div>{{ JSON.parse(item.chapters).length }}阶段</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- {{
|
|
|
- item.pNum != null && item.pNum != "" ? item.pNum : "0"
|
|
|
- }}人学习
|
|
|
+ <div class="school_box">
|
|
|
+ <el-tooltip effect="light" :content="item.school" placement="top">
|
|
|
+ <div class="school">
|
|
|
+ {{ item.school }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div style="color: #b4b4b4">{{ item.utime }}</div>
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="now_study" @click="
|
|
|
+ goTo(
|
|
|
+ '/courseDetailS?courseId=' +
|
|
|
+ item.courseId +
|
|
|
+ '&userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&org=' +
|
|
|
+ org +
|
|
|
+ '&cid=' +
|
|
|
+ classId +
|
|
|
+ '&tType=' +
|
|
|
+ tType +
|
|
|
+ '&role=' +
|
|
|
+ role +
|
|
|
+ '&screenType=' +
|
|
|
+ screenType
|
|
|
+ )
|
|
|
+ ">
|
|
|
+ 立即学习
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="now_study" @click="
|
|
|
- goTo(
|
|
|
- '/courseDetailS?courseId=' +
|
|
|
- item.courseId +
|
|
|
- '&userid=' +
|
|
|
- userid +
|
|
|
- '&oid=' +
|
|
|
- oid +
|
|
|
- '&org=' +
|
|
|
- org +
|
|
|
- '&cid=' +
|
|
|
- classId +
|
|
|
- '&tType=' +
|
|
|
- tType +
|
|
|
- '&role=' +
|
|
|
- role +
|
|
|
- '&screenType=' +
|
|
|
- screenType
|
|
|
- )
|
|
|
- ">
|
|
|
- 立即学习
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
|
|
|
+ <div class="title">{{ type.name }}</div>
|
|
|
+ <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
|
|
|
+ <div class="box_course" v-for="(item, index) in type.course" :key="tindex + '-' + index">
|
|
|
+ <div class="wheel">
|
|
|
+ <img :src="
|
|
|
+ item.cover
|
|
|
+ ? JSON.parse(item.cover)[0].url
|
|
|
+ : require('../assets/wheel.png')
|
|
|
+ " alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="middle_white">
|
|
|
+ <div class="textOverflow">{{ item.title }}</div>
|
|
|
+ <div class="nameAndLength">
|
|
|
+ <el-tooltip class="typeN" effect="light" :content="item.typename" placement="top">
|
|
|
+ <div>{{ item.typename }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div>{{ JSON.parse(item.chapters).length }}阶段</div>
|
|
|
+ </div>
|
|
|
+ <div class="school_box">
|
|
|
+ <el-tooltip effect="light" :content="item.school" placement="top">
|
|
|
+ <div class="school">
|
|
|
+ {{ item.school }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ <div style="color: #b4b4b4">{{ item.utime }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="now_study" @click="
|
|
|
+ goTo(
|
|
|
+ '/courseDetail?courseId=' +
|
|
|
+ item.courseId +
|
|
|
+ '&userid=' +
|
|
|
+ userid +
|
|
|
+ '&oid=' +
|
|
|
+ oid +
|
|
|
+ '&org=' +
|
|
|
+ org +
|
|
|
+ '&cid=' +
|
|
|
+ classId +
|
|
|
+ '&tType=' +
|
|
|
+ tType +
|
|
|
+ '&screenType=' +
|
|
|
+ screenType
|
|
|
+ )
|
|
|
+ ">
|
|
|
+ 立即学习
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="course_empty" v-if="zoneClass.length == 0">
|
|
|
@@ -122,12 +159,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0">
|
|
|
- <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
|
|
|
- v-if="page && zoneListId != 0" @current-change="handleCurrentChange">
|
|
|
- </el-pagination>
|
|
|
- <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
|
|
|
- v-if="page && zoneListId == 0" @current-change="handleCurrentChange1">
|
|
|
+ <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0 && !typeCheck">
|
|
|
+ <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" v-if="page"
|
|
|
+ @current-change="handleCurrentChange">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -154,6 +188,7 @@ export default {
|
|
|
role: this.$route.query.role,
|
|
|
screenType: this.$route.query.screenType,
|
|
|
CourseType: [],
|
|
|
+ CourseType2: [],
|
|
|
CourseTypeJson: {},
|
|
|
courseTypeId: {},
|
|
|
sCourse: "",
|
|
|
@@ -164,8 +199,20 @@ export default {
|
|
|
typef: "",
|
|
|
typeE: [],
|
|
|
loading: "",
|
|
|
+ typeCheck:false,
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ typeCheck(newValue, oldValue) {
|
|
|
+ this.loading = true
|
|
|
+ if(newValue){
|
|
|
+ this.selectAll()
|
|
|
+ }else{
|
|
|
+ this.page = 1
|
|
|
+ this.selectAll2()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
goTo(path) {
|
|
|
this.$router.push(path);
|
|
|
@@ -368,19 +415,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
- if (!this.loading) {
|
|
|
- this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
+ // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
+ // if (!this.loading) {
|
|
|
+ // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
+ // }
|
|
|
+ this.loading = true
|
|
|
+ if (this.typeCheck) {
|
|
|
+ this.selectAll();
|
|
|
+ } else {
|
|
|
+ this.selectAll2();
|
|
|
}
|
|
|
- this.selectAll();
|
|
|
},
|
|
|
selectAll() {
|
|
|
this.zoneListId = 0;
|
|
|
this.isListAjax = true;
|
|
|
- // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
- // if (!this.loading) {
|
|
|
- // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
- // }
|
|
|
let type = '0'
|
|
|
if (!this.org || this.org == "undefined" || this.org == "null") {
|
|
|
if (this.tType == 1) {
|
|
|
@@ -407,20 +455,92 @@ export default {
|
|
|
page: this.page,
|
|
|
};
|
|
|
this.ajax
|
|
|
- .get(this.$store.state.api + "selectStudentCourseNew22", params)
|
|
|
+ .get(this.$store.state.api + "selectStudentCourseNew22Mode", params)
|
|
|
.then((res) => {
|
|
|
- if (this.loading) {
|
|
|
- this.loading.close();
|
|
|
- this.loading = "";
|
|
|
+ this.loading = false
|
|
|
+ this.isListAjax = false;
|
|
|
+ this.zoneClass = res.data[0];
|
|
|
+ // this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
+ let CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
|
|
|
+ for (var i = 0; i < CourseType2.length; i++) {
|
|
|
+ CourseType2[i].course = []
|
|
|
+ for (var j = 0; j < res.data[0].length; j++) {
|
|
|
+ if (res.data[0][j].pid && res.data[0][j].pid.indexOf(CourseType2[i].id) != -1) {
|
|
|
+ CourseType2[i].course.push(res.data[0][j])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let noTypeCourse = []
|
|
|
+ for (var j = 0; j < res.data[0].length; j++) {
|
|
|
+ if (!res.data[0][j].pid) {
|
|
|
+ noTypeCourse.push(res.data[0][j])
|
|
|
+ }
|
|
|
}
|
|
|
+ if (noTypeCourse.length > 0) {
|
|
|
+ CourseType2.push({
|
|
|
+ course: noTypeCourse,
|
|
|
+ name: '其他'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ CourseType2 = CourseType2.filter(item => {
|
|
|
+ return item.course.length > 0;
|
|
|
+ })
|
|
|
+ this.CourseType2 = CourseType2
|
|
|
+
|
|
|
+ // this.selectType({
|
|
|
+ // data: [res.data[1], res.data[2], res.data[3], res.data[4]],
|
|
|
+ // });
|
|
|
+ // this.selectAllType();
|
|
|
+ // this.getBanner({
|
|
|
+ // data: [res.data[6], res.data[5], res.data[7]],
|
|
|
+ // });
|
|
|
+ this.getBanner()
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectAll2() {
|
|
|
+ this.zoneListId = 0;
|
|
|
+ this.isListAjax = true;
|
|
|
+ let type = '0'
|
|
|
+ if (!this.org || this.org == "undefined" || this.org == "null") {
|
|
|
+ if (this.tType == 1) {
|
|
|
+ type = '2'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.role == 1) {
|
|
|
+ type = '2'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ type: type,
|
|
|
+ uid: this.userid,
|
|
|
+ oid: this.oid,
|
|
|
+ org: this.org,
|
|
|
+ typea: this.typea != undefined ? this.typea : "",
|
|
|
+ typeb: this.typeb != undefined ? this.typeb : "",
|
|
|
+ typec: this.typec != undefined ? this.typec : "",
|
|
|
+ typed: this.typed != undefined ? this.typed : "",
|
|
|
+ typef: this.typef != undefined ? this.typef : "",
|
|
|
+ typeE: this.typeE.join(","),
|
|
|
+ cu: "",
|
|
|
+ cn: this.sCourse,
|
|
|
+ page: this.page,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectStudentCourseNew22", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
this.isListAjax = false;
|
|
|
this.zoneClass = res.data[0];
|
|
|
this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
+ let CourseType2 = []
|
|
|
|
|
|
// this.selectType({
|
|
|
// data: [res.data[1], res.data[2], res.data[3], res.data[4]],
|
|
|
// });
|
|
|
- this.selectAllType();
|
|
|
+ // this.selectAllType();
|
|
|
// this.getBanner({
|
|
|
// data: [res.data[6], res.data[5], res.data[7]],
|
|
|
// });
|
|
|
@@ -440,11 +560,12 @@ export default {
|
|
|
this.getZoneClass(this.zoneListId);
|
|
|
},
|
|
|
handleCurrentChange1(val) {
|
|
|
- if (!this.loading) {
|
|
|
- this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
- }
|
|
|
+ // if (!this.loading) {
|
|
|
+ // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
+ // }
|
|
|
this.page = val;
|
|
|
- this.selectAll();
|
|
|
+ this.loading = true
|
|
|
+ this.selectAll2();
|
|
|
},
|
|
|
//获取banner
|
|
|
getBanner(res) {
|
|
|
@@ -542,6 +663,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
this.$forceUpdate();
|
|
|
+ if (this.typeCheck) {
|
|
|
+ this.selectAll();
|
|
|
+ } else {
|
|
|
+ this.selectAll2();
|
|
|
+ }
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.error(err);
|
|
|
@@ -630,12 +756,14 @@ export default {
|
|
|
this.timer = null;
|
|
|
},
|
|
|
created() {
|
|
|
- this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
+ // this.loading = this.openLoading(document.querySelector(".main_box"));
|
|
|
// this.selectType();
|
|
|
- this.selectAll();
|
|
|
+ this.loading = true
|
|
|
+
|
|
|
+ this.selectAllType();
|
|
|
// this.getBanner();
|
|
|
this.timer = setInterval(() => {
|
|
|
- this.selectAll();
|
|
|
+ this.selectAllType();
|
|
|
// this.getBanner();
|
|
|
}, 5000);
|
|
|
document.scrollingElement.scrollTop = 0;
|
|
|
@@ -711,7 +839,8 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
- margin: 0px 1% 20px;
|
|
|
+ /* margin: 0px 1% 20px; */
|
|
|
+ margin: 0 15px 20px 0;
|
|
|
width: 300px;
|
|
|
height: 260px;
|
|
|
/*border: 1px solid #cecece; */
|
|
|
@@ -753,10 +882,10 @@ export default {
|
|
|
|
|
|
.main_box {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
+ /* display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
+ justify-content: flex-start; */
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@@ -772,8 +901,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.body_student {
|
|
|
- margin: 10px auto;
|
|
|
- width: 91.5%;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 90%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -881,11 +1010,12 @@ export default {
|
|
|
position: relative;
|
|
|
top: -25px;
|
|
|
z-index: 999;
|
|
|
- left: 5%;
|
|
|
background: #fff;
|
|
|
width: 90%;
|
|
|
border-radius: 5px;
|
|
|
padding-left: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.reTop {
|
|
|
@@ -979,4 +1109,25 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
+.FirstTypeBox {}
|
|
|
+
|
|
|
+.FirstTypeBox+.FirstTypeBox {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.FirstTypeBox>.title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.typeCheck{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.typeCheck>span{
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
</style>
|
