update

src/components/index.vue

@@ -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 }">
             <span v-if="CourseTypeJson[item.id].length">{{ item.name }}:</span>
             <div class="typeCss" v-if="CourseTypeJson[item.id].length">
               <div class="cName" @click="getCourse(item.name, '', item.id, 1)"
@@ -43,187 +44,124 @@
         </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="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="
+            <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="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>
+                  " 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 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>
-              <div
-                class="now_study"
-                @click="
+                <div class="now_study" @click="
                   goTo(
                     '/courseDetail?courseId=' +
-                      item.courseId +
-                      '&userid=' +
-                      userid +
-                      '&oid=' +
-                      oid +
-                      '&org=' +
-                      org +
-                      '&cid=' +
-                      classId +
-                      '&tType=' +
-                      tType +
-                      '&screenType=' +
-                      screenType
+                    item.courseId +
+                    '&userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&org=' +
+                    org +
+                    '&cid=' +
+                    classId +
+                    '&tType=' +
+                    tType +
+                    '&screenType=' +
+                    screenType
                   )
-                "
-              >
-                立即学习
-              </div>
-            </div> 
+                ">
+                  立即学习
+                </div>
               </div>
             </div>
-            <!-- <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 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>{{ 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>
-                  </el-tooltip>
-                  <div style="color: #b4b4b4">{{ item.utime }}</div>
+                  </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 class="course_empty" v-if="zoneClass.length == 0">
               暂无课程
             </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>
       </div>
     </div>
   </div>
@@ -247,7 +185,7 @@ export default {
       org: this.$route.query.org,
       screenType: this.$route.query.screenType,
       CourseType: [],
-      CourseType2:[],
+      CourseType2: [],
       CourseTypeJson: {},
       courseTypeId: {},
       sCourse: "",
@@ -257,25 +195,24 @@ export default {
       typed: "",
       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);
     },
-    // getZone() {
-    //   this.ajax
-    //     .get(this.$store.state.api + "getZone", "")
-    //     .then((res) => {
-    //       this.zoneList = res.data[0];
-    //       // this.zoneListId = this.zoneList[0].id;
-    //       // this.getZoneClass(this.zoneList[0].id);
-    //       this.selectAll();
-    //     })
-    //     .catch((err) => {
-    //       console.error(err);
-    //     });
-    // },
     //获取专区下的课程
     getZoneClass(zid) {
       this.isListAjax = true;
@@ -421,19 +358,17 @@ export default {
           }
         }
       }
-      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 params = {
         uid: this.userid,
         oid: this.oid,
@@ -452,13 +387,10 @@ export default {
       this.ajax
         .get(this.$store.state.api + "selectTypeCourse2Mode", 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;
+          // 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 = []
@@ -495,6 +427,44 @@ export default {
           console.error(err);
         });
     },
+    selectAll2() {
+      this.zoneListId = 0;
+      this.isListAjax = true;
+
+      let params = {
+        uid: this.userid,
+        oid: this.oid,
+        typea: this.typea != undefined ? this.typea : "",
+        typeb: this.typeb != undefined ? this.typeb : "",
+        typec: "",
+        typed: this.typed != undefined ? this.typed : "",
+        typeE: this.typeE.join(","),
+        // typeE: "",
+        cu: "",
+        cn: this.sCourse,
+        classid: this.classId,
+        org: this.org,
+        page: this.page,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTypeCourse2", 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.getBanner({
+            data: [res.data[6], res.data[5], res.data[7]],
+          });
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     checkZone(id) {
       this.page = 1;
       this.zoneListId = id;
@@ -505,11 +475,9 @@ export default {
       this.getZoneClass(this.zoneListId);
     },
     handleCurrentChange1(val) {
-      if (!this.loading) {
-        this.loading = this.openLoading(document.querySelector(".main_box"));
-      }
+      this.loading = true;
       this.page = val;
-      this.selectAll();
+      this.selectAll2();
     },
     //获取banner
     getBanner(res) {
@@ -613,7 +581,11 @@ export default {
               }
             }
           }
-          this.selectAll()
+          if (this.typeCheck) {
+            this.selectAll();
+          } else {
+            this.selectAll2();
+          }
           this.$forceUpdate();
         })
         .catch((err) => {
@@ -703,7 +675,7 @@ export default {
     this.timer = null;
   },
   created() {
-    this.loading = this.openLoading(document.querySelector(".main_box"));
+    this.loading = true;
     // this.selectType();
     this.selectAllType();
     // this.getBanner();
@@ -846,7 +818,7 @@ export default {
 }
 
 .body_student {
-  margin: 10px auto;
+  margin: 0 auto;
   width: 90%;
   height: 100%;
 }
@@ -949,16 +921,16 @@ export default {
 
 .reBox {
   position: relative;
-    top: -25px;
-    z-index: 999;
-    /* left: auto; */
-    /* right: auto; */
-    background: #fff;
-    width: 90%;
-    border-radius: 5px;
-    padding-left: 20px;
-    margin: 0 auto;
-    box-sizing: border-box;
+  top: -25px;
+  z-index: 999;
+  /* left: auto; */
+  /* right: auto; */
+  background: #fff;
+  width: 90%;
+  border-radius: 5px;
+  padding-left: 20px;
+  margin: 0 auto;
+  box-sizing: border-box;
 }
 
 .reTop {
@@ -1064,4 +1036,15 @@ export default {
   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>

src/components/studentIndex.vue

@@ -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>