首页搜索

src/components/courseDetail.vue

@@ -129,7 +129,7 @@
             >
               <div>第{{ index + 1 }}阶段</div>
               <div>{{ item.dyName }}</div>
-              <div>{{ item.chapterInfo[0].taskJson.length }}个任务 </div>
+              <div>{{ item.chapterInfo[0].taskJson.length }}个任务</div>
             </div>
           </div>
         </el-dialog>
@@ -357,7 +357,7 @@ export default {
   width: 150px;
   height: 35px;
   color: #fff;
-  background: #3d87cc;
+  background: #4a9eed;
   text-align: center;
   line-height: 35px;
   border-radius: 5px;
@@ -514,7 +514,7 @@ export default {
   margin: 0 auto;
 }
 .return {
-  background: rgb(238, 238, 238);
+  background: #205cc6;
   width: 58px;
   height: 30px;
   color: rgb(22, 22, 22);
@@ -578,8 +578,10 @@ export default {
   border-radius: 10px;
 }
 .courseT {
-  border-left: 3px solid #4a9eed;
+  border-left: 3px solid #2e66c9;
   padding-left: 5px;
+  color: #2e66c9;
+  font-weight: bold;
 }
 .courseTd {
   padding-top: 15px;

src/components/index.vue

@@ -26,9 +26,56 @@
           </el-carousel-item>
         </el-carousel>
       </div>
+      <div class="reBox">
+        <div class="reTop">
+          <div>课程</div>
+          <div>
+            <div class="search" @click="selectAll">
+              <img src="../assets/icon/search.png" alt="" />
+            </div>
+            <input
+              class="sInput"
+              type="text"
+              placeholder="请输入关键字"
+              v-model="sCourse"
+            />
+          </div>
+        </div>
+        <div class="choose">
+          <div
+            class="all_choose"
+            v-for="(item, index) in CourseType[0]"
+            :key="index"
+          >
+            <span>{{ item.name }}:</span>
+            <div
+              v-for="item1 in CourseTypeJson[item.id]"
+              :key="item1.id"
+              :label="item1.id"
+              @click="getCourse(item.name, item1.id)"
+            >
+              <el-tooltip
+                class="cName"
+                effect="light"
+                :content="item1.name"
+                placement="top"
+              >
+                <div
+                  :class="
+                    typea == item1.id || typeb == item1.id || typed == item1.id
+                      ? 'isCType'
+                      : ''
+                  "
+                >
+                  {{ item1.name }}
+                </div>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="body_student">
-        <div class="student_body">
-          <div class="top">
+        <!-- <div class="top">
             <div :class="{ active: 0 == zoneListId }" @click="selectAll()">
               所有课程
             </div>
@@ -40,83 +87,96 @@
             >
               {{ item.name }}
             </div>
-          </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="people">
-                    <div class="man">
-                      <img src="../assets/people.png" alt="" />
-                    </div>
-                    <div>
-                      {{
-                        item.pNum != null && item.pNum != "" ? item.pNum : "0"
-                      }}人学习
-                    </div>
+          </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 ? item.typename : '暂无'"
+                    placement="top"
+                  >
+                    <div>{{ item.typename ? item.typename : "暂无" }}</div>
+                  </el-tooltip>
+
+                  <div style="padding-right: 10px">
+                    {{ JSON.parse(item.chapters).length }}阶段
                   </div>
                 </div>
-                <div
-                  class="now_study"
-                  @click="
-                    goTo(
-                      '/courseDetail?courseId=' +
-                        item.courseId +
-                        '&userid=' +
-                        userid +
-                        '&oid=' +
-                        oid +
-                        '&cid=' +
-                        classId +
-                        '&tType=' +
-                        tType
-                    )
-                  "
-                >
-                  立即学习
+                <div class="people">
+                  <div class="man">
+                    <img src="../assets/people.png" alt="" />
+                  </div>
+                  <div>
+                    {{
+                      item.pNum != null && item.pNum != "" ? item.pNum : "0"
+                    }}人学习
+                  </div>
                 </div>
               </div>
-              <div class="course_empty" v-if="zoneClass.length == 0">
-                暂无数据
+              <div
+                class="now_study"
+                @click="
+                  goTo(
+                    '/courseDetail?courseId=' +
+                      item.courseId +
+                      '&userid=' +
+                      userid +
+                      '&oid=' +
+                      oid +
+                      '&cid=' +
+                      classId +
+                      '&tType=' +
+                      tType
+                  )
+                "
+              >
+                立即学习
               </div>
             </div>
-          </div>
-          <div class="student_page" style="margin: 15px 0 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"
-            >
-            </el-pagination>
+            <!-- <div class="course_empty" v-if="zoneClass.length == 0">
+              暂无数据
+            </div> -->
           </div>
         </div>
+        <div class="student_page" style="margin: 15px 0 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"
+          >
+          </el-pagination>
+        </div>
       </div>
     </div>
   </div>
@@ -135,28 +195,35 @@ export default {
       bannerList: [],
       userid: this.$route.query.userid,
       oid: this.$route.query.oid,
-      classId:this.$route.query.cid,
+      classId: this.$route.query.cid,
       tType: this.$route.query.tType,
+      CourseType: [],
+      CourseTypeJson: {},
+      courseTypeId: {},
+      sCourse: "",
+      isCType: "",
+      typea: "",
+      typeb: "",
+      typed: "",
     };
   },
   methods: {
     goTo(path) {
       this.$router.push(path);
     },
-    getZone() {
-      this.ajax
-        .get(this.$store.state.api + "getZone", "")
-        .then((res) => {
-          console.log(res.data[0]);
-          this.zoneList = res.data[0];
-          // this.zoneListId = this.zoneList[0].id;
-          // this.getZoneClass(this.zoneList[0].id);
-          this.selectAll();
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    },
+    // 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;
@@ -173,29 +240,57 @@ export default {
           this.isListAjax = false;
           this.zoneClass = res.data[0];
           this.total = res.data[0].length ? res.data[0][0].num : 0;
-          console.log(this.zoneClass);
         })
         .catch((err) => {
           console.error(err);
         });
     },
+    getCourse(typeName, typeid) {
+      if (typeName == "年级") {
+        if (this.typea == typeid) {
+          this.typea = "";
+        } else {
+          this.typea = typeid;
+        }
+      } else if (typeName == "专栏") {
+        if (this.typeb == typeid) {
+          this.typeb = "";
+        } else {
+          this.typeb = typeid;
+        }
+      } else if (typeName == "学科") {
+        if (this.typed == typeid) {
+          this.typed = "";
+        } else {
+          this.typed = typeid;
+        }
+      }
+      this.selectAll();
+    },
     selectAll() {
       this.zoneListId = 0;
       this.isListAjax = true;
       const loading = this.openLoading(document.querySelector(".main_box"));
       let params = {
+        uid: this.userid,
         oid: this.oid,
-        cid:this.classId,
+        typea: this.typea != undefined ? this.typea : "",
+        typeb: this.typeb != undefined ? this.typeb : "",
+        typec: "",
+        typed: this.typed != undefined ? this.typed : "",
+        typeE: "",
+        cu: "",
+        cn: this.sCourse,
+        classid: this.classId,
         page: this.page,
       };
       this.ajax
-        .get(this.$store.state.api + "selectAllCourseByCid", params)
+        .get(this.$store.state.api + "selectTypeCourse", params)
         .then((res) => {
           loading.close();
           this.isListAjax = false;
           this.zoneClass = res.data[0];
           this.total = res.data[0].length ? res.data[0][0].num : 0;
-          console.log(this.zoneClass);
         })
         .catch((err) => {
           console.error(err);
@@ -226,9 +321,33 @@ export default {
           console.error(err);
         });
     },
+    selectType() {
+      this.ajax
+        .get(this.$store.state.api + "selectType")
+        .then((res) => {
+          this.CourseType = res.data;
+          for (var i = 0; i < res.data[0].length; i++) {
+            if (!this.cid) {
+              this.courseTypeId[res.data[0][i].id] = "";
+            }
+            for (var j = 0; j < res.data[1].length; j++) {
+              if (res.data[0][i].id == res.data[1][j].pid) {
+                if (!this.CourseTypeJson[res.data[0][i].id]) {
+                  this.CourseTypeJson[res.data[0][i].id] = [];
+                }
+                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
+              }
+            }
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
   },
   created() {
-    this.getZone();
+    this.selectType();
+    this.selectAll();
     this.getBanner();
     document.scrollingElement.scrollTop = 0;
   },
@@ -241,13 +360,7 @@ export default {
   height: 100%;
   cursor: pointer;
 }
-.student_body {
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  background: #fff;
-  padding: 0 0 20px;
-}
+
 .top {
   padding: 20px 30px 20px 1%;
   box-sizing: border-box;
@@ -299,14 +412,13 @@ export default {
   flex-direction: column;
   flex-wrap: nowrap;
   margin: 0px 1% 20px;
-  width: 18%;
+  width: 16%;
   /*border: 1px solid #cecece; */
   border-radius: 5px;
   overflow: hidden;
   box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
     0px 2px 1px -1px rgb(0 0 0 / 12%);
   justify-content: space-between;
-  height: 240px;
 }
 .middle_white {
   font-size: 14px;
@@ -314,7 +426,6 @@ export default {
 }
 .people {
   display: flex;
-  margin-top: 5px;
   align-items: center;
 }
 .people > div:nth-child(2) {
@@ -324,14 +435,14 @@ export default {
   width: 100%;
   height: 40px;
   color: #fff;
-  background: #86b8f5;
+  background: #4a9eed;
   text-align: center;
   line-height: 40px;
   font-size: 13px;
   cursor: pointer;
 }
 .now_study:hover {
-  background: #658eeb;
+  background: #205cc6;
 }
 .main_box {
   width: 100%;
@@ -352,7 +463,7 @@ export default {
 }
 .body_student {
   margin: 10px auto;
-  width: 98%;
+  width: 92%;
   height: 100%;
 }
 .student_head {
@@ -366,6 +477,8 @@ export default {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: bold;
+  font-size: 16px;
 }
 
 .student_page {
@@ -378,4 +491,135 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
+.choose > div:nth-child(3) > span {
+  letter-spacing: 0 !important;
+}
+
+.choose {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  padding: 10px 0;
+}
+
+.all_choose {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  margin: 10px 0;
+}
+.all_choose > span {
+  width: 80px;
+  display: block;
+  letter-spacing: 14px;
+}
+.all_choose > span:nth-child(1) {
+  font-weight: bold;
+}
+.all_choose >>> .el-checkbox-group {
+  display: flex;
+  flex-direction: row;
+  width: 820px;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 3px;
+}
+.all_choose > .el-checkbox-group >>> .el-checkbox {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
+  min-width: 80px;
+  overflow: hidden;
+  width: 80px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
+  width: auto;
+}
+
+.cName {
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.reBox {
+  position: relative;
+  top: -25px;
+  z-index: 999;
+  left: 5%;
+  background: #fff;
+  width: 90%;
+  border-radius: 5px;
+  padding-left: 20px;
+}
+.reTop {
+  padding: 20px 0 0 0;
+  border-bottom: 1px solid #eee;
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}
+.reTop > div:nth-child(1) {
+  font-weight: bold;
+  width: 40px;
+  border-bottom: 1px solid #205cc6;
+  padding-bottom: 10px;
+  color: #205cc6;
+  font-size: 20px;
+}
+.reTop > div:nth-child(2) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 1px solid #ccced3;
+  width: 300px;
+  border-radius: 8px;
+  padding: 5px 0;
+}
+.search {
+  width: 20px;
+  padding: 0 5px;
+}
+.search > img {
+  width: 100%;
+  height: 100%;
+}
+.sInput {
+  border: none;
+  width: 85%;
+}
+.sInput:focus-visible {
+  outline: none;
+}
+.nameAndLength {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: 5px 0;
+}
+.typeN {
+  width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.isCType {
+  color: #6282c2;
+}
 </style>

src/components/study.vue

@@ -3755,13 +3755,16 @@ export default {
   cursor: pointer;
 }
 .courseTitle {
-  background: #3c76c7;
-  width: 95%;
+  background: #205cc6;
+  width: 90%;
   margin: 10px auto;
-  height: 40px;
+  height: 50px;
   color: #fff;
-  line-height: 40px;
-  text-indent: 15px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  border-radius: 5px;
 }
 .ml {
   margin-left: 15px;