fix

src/components/header/index.vue

@@ -587,6 +587,7 @@ export default {
           });
         }
       }
+      this.searchKey = ''
     },
 
     mouseover() {

src/components/listOption/index.vue

@@ -0,0 +1,401 @@
+<template>
+  <div id="listOption">
+    <div class="container" style="padding: 10px 0px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ computedName(goodsType) }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="topBox">
+      <div class="container">
+        <div class="tabber">
+          <div class="left">关键词：</div>
+          <div class="right" style="align-self: center;margin-top: 10px;">
+            <el-input
+              clearable
+              v-model="params.goodsName"
+              :size="size"
+              placeholder="请输入关键词"
+              style="width:500px;"
+            ></el-input>
+            <el-button :size="size" @click="init">重置</el-button>
+          </div>
+        </div>
+        <div class="tabber">
+          <div class="left">教育类型：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in educationList"
+              :key="index"
+              :class="params.educationId == item.id ? 'active' : null"
+              @click="activeEdu(item.id)"
+            >
+              {{ item.educationName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber" v-if="params.educationId">
+          <div class="left">培训项目：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in businessList"
+              :key="index"
+              :class="params.businessId == item.id ? 'active' : null"
+              @click="activeBusiness(item.projectId, item.id)"
+            >
+              {{ item.aliasName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber" v-if="params.businessId">
+          <div class="left">科目分类：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in subjectList"
+              :key="index"
+              :class="params.subjectId == item.id ? 'active' : null"
+              @click="activeSubject(item.id)"
+            >
+              {{ item.subjectName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber">
+          <div class="left">排序条件：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in sort"
+              :key="index"
+              :class="params.sortType == item.value ? 'active' : null"
+              @click="activeSort(item.value)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-main
+      v-loading="loading"
+      class="container"
+      style="width:1310px!important"
+    >
+      <ul class="list">
+        <el-empty
+          v-if="goodsList.length == 0"
+          description="暂无数据"
+        ></el-empty>
+        <li class="course-item" v-for="(item, index) in goodsList" :key="index">
+          <GoodsItem :item="item"></GoodsItem>
+        </li>
+        <div style="clear:both;"></div>
+      </ul>
+      <div class="pagination">
+        <el-pagination
+          @current-change="currentChange"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :pager-count="5"
+          :page-size="formData.pageSize"
+        >
+        </el-pagination>
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import { cancel } from "@/apis/common.js";
+import GoodsItem from "@/components/goodsItem/index";
+export default {
+  components: { GoodsItem },
+  props: {
+    goodsType: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      size: "medium",
+      educationList: [],
+      businessList: [],
+      subjectList: [],
+      sort: [
+        {
+          label: "综合排序",
+          value: 1
+        },
+        {
+          label: "低价优先",
+          value: 2
+        },
+        {
+          label: "高价优先",
+          value: 3
+        }
+      ],
+      params: {
+        goodsName: ""
+      },
+      formData: {
+        pageNum: 1,
+        pageSize: 15
+      },
+      loading: false,
+      goodsList: [],
+      total: 0
+    };
+  },
+  watch: {
+    params: {
+      handler(newVal) {
+        if (cancel) {
+          cancel("取消请求");
+        }
+        this.search();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.params = {
+      goodsName: this.$route.query.searchKey || "",
+      educationId: this.$route.query.educationId || "",
+      projectId: this.$route.query.projectId || "",
+      businessId: this.$route.query.businessId || "",
+      subjectId: this.$route.query.subjectId || "",
+      sortType: 1,
+      showStatus: 1,
+      goodsStatus: 1
+    };
+  },
+  async mounted() {
+    await this.getEducationTypeList();
+    if (this.params.educationId) {
+      await this.getBusinessList();
+    }
+    if (this.params.businessId) {
+      await this.getSubjectList();
+    }
+  },
+  methods: {
+    //获得商品类型
+    computedName(type) {
+      let name = "";
+      switch (type) {
+        case 1:
+          name = "课程";
+          break;
+        case 2:
+          name = "题库";
+          break;
+        case 6:
+          name = "直播";
+          break;
+        case 8:
+          name = "讲义资料";
+          break;
+
+        default:
+          break;
+      }
+      return name;
+    },
+    //重置
+    init() {
+      this.params = {
+        goodsName: "",
+        educationId: "",
+        projectId: "",
+        businessId: "",
+        subjectId: "",
+        sortType: 1,
+        showStatus: 1,
+        goodsStatus: 1
+      };
+      this.formData = {
+        pageNum: 1,
+        pageSize: 15
+      };
+    },
+    //搜索
+    search() {
+      this.loading = true;
+      this.$router.replace({ path: this.$route.path, query: this.params });
+      let data = Object.assign(this.params, this.formData);
+      data.educationTypeId = data.educationId;
+      data.goodsType = this.goodsType;
+      this.$request
+        .goodsList(data)
+        .then(res => {
+          this.goodsList = res.rows || [];
+          this.total = res.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    //分页
+    currentChange(e) {
+      this.formData.pageNum = e;
+      this.search();
+    },
+    //排序
+    activeSort(id) {
+      this.params.sortType = id;
+    },
+    /**
+     * 获取教育类型
+     */
+    getEducationTypeList() {
+      return new Promise(resolve => {
+        this.$request
+          .educationTypeList({ status: 1 })
+          .then(res => {
+            let item = [
+              {
+                educationName: "全部",
+                id: "",
+                status: 1,
+                sort: 0
+              }
+            ];
+            this.educationList = item.concat(res.rows);
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中教育类型
+    async activeEdu(id) {
+      this.params.educationId = id;
+      this.params.projectId = "";
+      this.params.businessId = "";
+      this.params.subjectId = "";
+      if (id) {
+        await this.getBusinessList();
+        if (this.params.subjectId) {
+          await this.getSubjectList();
+        }
+      }
+    },
+    /**
+     * 获取业务层级
+     */
+    getBusinessList() {
+      return new Promise(resolve => {
+        this.$request
+          .businessList({ educationId: this.params.educationId, status: 1 })
+          .then(res => {
+            this.businessList = [
+              { id: "", projectId: "", aliasName: "全部" }
+            ].concat(res.rows);
+            console.log(this.businessList, "aa");
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中业务层级
+    async activeBusiness(projectId, id) {
+      this.params.projectId = projectId;
+      this.params.businessId = id;
+      this.params.subjectId = "";
+      if (id) {
+        await this.getSubjectList();
+      }
+    },
+    /**
+     * 获取科目分类
+     */
+    getSubjectList() {
+      return new Promise(resolve => {
+        this.$request
+          .subjectList({
+            educationId: this.params.educationId,
+            projectId: this.params.projectId,
+            businessId: this.params.businessId,
+            status: 1
+          })
+          .then(res => {
+            this.subjectList = [{ id: "", subjectName: "全部" }].concat(
+              res.rows
+            );
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中科目分类
+    activeSubject(id) {
+      this.params.subjectId = id;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#listOption {
+  .topBox {
+    background-color: #ebf2fc;
+    .tabber {
+      display: flex;
+      animation: t-tran 0.3s;
+      & > .left {
+        flex-shrink: 0;
+        margin-top: 10px;
+        padding: 8px 0;
+        width: 80px;
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+      }
+      & > .right {
+        flex: 1;
+        flex-wrap: wrap;
+        & > .t-button {
+          display: inline-block;
+          cursor: pointer;
+          border-radius: 8px;
+          margin: 10px;
+          padding: 8px 16px;
+          color: #666666;
+          font-size: 16px;
+          background: #f7f9fc;
+          color: #999;
+          transition: all 0.2s;
+          &.active {
+            color: #fff;
+            background: #3f8dfd;
+          }
+        }
+      }
+    }
+    @keyframes t-tran {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+  .course-item {
+    float: left;
+  }
+
+  .pagination {
+    padding: 30px 0;
+    text-align: center;
+  }
+}
+</style>

src/components/videoCy/index.vue

@@ -436,7 +436,7 @@ export default {
               this.$router.go(0);
             })
             .catch(() => {});
-        }, 10000); //300000
+        }, 300000); //300000
       }
     },
     //视频恢复播放时触发

src/pages/bank-list/index.vue

@@ -2,474 +2,36 @@
   <div class="payment">
     <Header @search="search($event)"></Header>
     <section class="section">
-      <div class="section__header">
-        <div class="container">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/index' }"
-              >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>题库</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-      </div>
-      <div class="section__body">
-        <div class="container">
-          <div class="course-classify">
-            <div class="course-classify__list">
-              <div class="left-item">教育类型：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div
-                    class="item"
-                    :class="{ active: typeKey == '' }"
-                    @click="changeType('')"
-                  >
-                    全部
-                  </div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in typeList"
-                    :key="index"
-                    :class="{ active: params.educationTypeId == item.id }"
-                    @click="changeType(item)"
-                  >
-                    {{ item.educationName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="course-classify__list"
-              v-if="businessList.length > 0 && params.educationTypeId"
-            >
-              <div class="left-item">培训项目：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div class="item active">全部</div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in businessList"
-                    :key="index"
-                    :class="{ active: params.businessId == item.id }"
-                    @click="changeBusiness(item)"
-                  >
-                    {{ item.aliasName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="course-classify__list" v-if="subjectList.length > 0">
-              <div class="left-item">科目分类：</div>
-              <div class="right-item">
-                <div class="list">
-                  <div
-                    class="item"
-                    v-for="(item, index) in subjectList"
-                    :key="index"
-                    :class="{ active: params.subjectId == item.id }"
-                    @click="changeSubject(item)"
-                  >
-                    {{ item.subjectName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="section__footer">
-        <div class="container">
-          <div class="course-list">
-            <div class="course-list__header">
-              <div class="sort-list">
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(1)"
-                  :class="{ active: params.sortType == 1 ? true : false }"
-                >
-                  综合排序
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(2)"
-                  :class="{ active: params.sortType == 2 ? true : false }"
-                >
-                  低价优先
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(3)"
-                  :class="{ active: params.sortType == 3 ? true : false }"
-                >
-                  高价优先
-                </div>
-              </div>
-            </div>
-            <div class="course-list__body">
-              <LoadingBox v-if="loading"></LoadingBox>
-              <ul v-else class="list clearfix">
-                <el-empty v-if="goodsList.length == 0" description="暂无数据"></el-empty>
-                <li
-                  class="course-item"
-                  v-for="(item, index) in goodsList"
-                  :key="index"
-                >
-                  <GoodsItem :item="item"></GoodsItem>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="pagination">
-            <el-pagination
-              @current-change="currentChange"
-              background
-              layout="prev, pager, next"
-              :total="total"
-              :pager-count="5"
-              :page-size="params.pageSize"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
+      <list-option :goodsType="2" ref="listOption"></list-option>
     </section>
-
     <ToolBar></ToolBar>
     <Footer></Footer>
   </div>
 </template>
 
 <script>
-import { cancel } from "@/apis/common.js";
-import LoadingBox from "@/components/loadingBox/index";
+import listOption from "@/components/listOption/index";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
-import GoodsItem from "@/components/goodsItem/index";
-import { mapMutations } from "vuex";
 export default {
-  name: "PaymentSuccess",
+  name: "",
   components: {
+    listOption,
     Footer,
     Header,
-    ToolBar,
-    GoodsItem,
-    LoadingBox
+    ToolBar
   },
   data() {
-    return {
-      projectId: "",
-      typeList: [],
-      businessList: [],
-      subjectList: [],
-      total: 0,
-      params: {
-        projectId: "",
-        educationTypeId: "",
-        businessId: "",
-        subjectId: "",
-        pageNum: 1,
-        pageSize: 15,
-        goodsStatus: 1,
-        goodsType: 2,
-        sortType: 1,
-        searchKey: "",
-        showStatus: 1
-      },
-      goodsList: [],
-      loading: false
-    };
-  },
-  mounted() {
-    this.params.goodsName = this.$route.query.searchKey || "";
-    // this.params.searchKey = this.$route.query.searchKey || "";
-    this.params.educationTypeId = this.$route.query.educationId || "";
-    // this.params.projectId = this.$route.query.projectId || "";
-    this.params.businessId = this.$route.query.businessId || "";
-    if (this.params.businessId) {
-      this.getSubjectList();
-    }
-    this.getEducationTypeList();
-    // this.changeSubject();
+    return {};
   },
   methods: {
-    ...mapMutations(["getCartCount"]),
     search(key) {
-      this.params.goodsName = key || "";
-      // this.params.searchKey = key || "";
-      this.params.projectId = "";
-      this.params.educationTypeId = "";
-      this.params.businessId = "";
-      this.params.subjectId = "";
-      this.changeSubject();
-    },
-    changeSort(sortType) {
-      if (this.params.sortType == sortType) return;
-      this.params.sortType = sortType;
-      this.changeSubject();
-    },
-    currentChange(e) {
-      this.params.pageNum = e;
-      this.changeSubject();
-    },
-    goodsDetail(item) {
-      this.$router.push({
-        path: "/bank-detail/" + item.goodsId,
-        query: {
-          orderGoodsId: item.orderGoodsId
-        }
-      });
-    },
-
-    addCart(item) {
-      this.$request
-        .addCart({ goodsId: item.goodsId })
-        .then(res => {
-          this.getCartCount();
-          this.$message({
-            message: "加入购物车成功",
-            type: "success"
-          });
-        })
-        .catch(err => {
-          if (err.code == 500) {
-            this.$message({
-              message: err.msg,
-              type: "warning"
-            });
-          }
-        });
-    },
-
-    changeType(item) {
-      if (this.params.educationTypeId == item.id) {
-        return;
-      }
-      this.params.educationTypeId = item.id;
-      this.params.businessId = "";
-      this.businessList = [];
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getBusinessList();
-      this.changeSubject();
-    },
-
-    changeSubject(item) {
-      if (item) {
-        if (this.params.subjectId != item.id) {
-          this.params.subjectId = item.id;
-          this.params.pageNum = 1;
-        }
-      }
-      if (cancel) {
-        cancel("取消请求");
-      }
-      this.loading = true;
-      this.$request
-        .goodsList(this.params)
-        .then(res => {
-          this.goodsList = res.rows;
-          this.total = res.total;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-
-    getSubjectList() {
-      this.$request
-        .subjectList({
-          businessId: this.params.businessId,
-          projectId: this.projectId,
-          educationId: this.params.educationTypeId
-        })
-        .then(res => {
-          this.subjectList = res.rows;
-          this.subjectList.unshift({ id: 0, subjectName: "全部" });
-          this.params.subjectId = 0;
-
-          this.changeSubject(this.subjectList[0]);
-        });
-    },
-
-    changeBusiness(item) {
-      if (this.params.subjectId == item.id) {
-        return;
-      }
-      this.params.businessId = item.id;
-      this.projectId = item.projectId;
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getSubjectList();
-    },
-
-    getBusinessList() {
-      this.$request
-        .businessList({ educationId: this.params.educationTypeId })
-        .then(res => {
-          this.businessList = res.rows.filter(item => item.aliasName);
-          this.projectId = this.businessList[0].projectId;
-        });
-    },
-
-    getEducationTypeList() {
-      let alls = {
-        educationName: "全部",
-        id: "",
-        status: 1,
-        sort: 0
-      };
-      this.$request.educationTypeList().then(res => {
-        res.rows.unshift(alls);
-        this.typeList = res.rows;
-        if (!this.params.educationTypeId) {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        } else {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        }
-        this.changeSubject();
-      });
+      this.$refs.listOption.params.goodsName = key;
     }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.payment {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      background: #ebf2fc;
-
-      .course-classify {
-        overflow: hidden;
-
-        &__list {
-          display: flex;
-          margin: 6px 0;
-          align-items: flex-start;
-
-          .left-item {
-            margin-top: 10px;
-            padding: 8px 0;
-            width: 80px;
-            font-size: 16px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-          }
-
-          .right-item {
-            flex: 1;
-
-            .list {
-              display: flex;
-              flex-wrap: wrap;
-
-              .item {
-                cursor: pointer;
-                border-radius: 8px;
-                margin: 10px;
-                padding: 8px 16px;
-                color: #666666;
-                font-size: 16px;
-                background: #f7f9fc;
-                color: #999;
-
-                &.active {
-                  color: #fff;
-                  background: #3f8dfd;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__footer {
-      .course-list {
-        &__header {
-          margin-top: 32px;
-
-          .sort-list {
-            display: flex;
-            align-items: center;
-
-            &__item {
-              cursor: pointer;
-              width: 96px;
-              height: 32px;
-              border-radius: 16px;
-              background: #ffffff;
-              border: 1px solid #bfbfbf;
-              border-radius: 16px;
-              text-align: center;
-              line-height: 30px;
-              font-size: 16px;
-              margin-right: 20px;
-
-              &.active {
-                background: #ebf2fc;
-                border: 1px solid #3f8dfd;
-                border-radius: 16px;
-                color: #3f8dfd;
-              }
-            }
-          }
-        }
-
-        &__body {
-          .list {
-            width: 100%;
-
-            .course-item {
-              float: left;
-            }
-          }
-        }
-
-        &__footer {
-          overflow: hidden;
-
-          .btn {
-            cursor: pointer;
-            width: 146px;
-            height: 40px;
-            background: #e3eaf7;
-            border-radius: 8px;
-            margin: 20px auto 40px;
-            color: #3f8dfd;
-            text-align: center;
-            line-height: 40px;
-
-            &:hover {
-              color: #fff;
-              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
-              background: #3f8dfd;
-            }
-          }
-        }
-      }
-
-      .pagination {
-        padding: 30px 0;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/pages/course-list copy/index.vue

@@ -0,0 +1,498 @@
+<template>
+  <div class="payment">
+    <Header @search="search($event)"></Header>
+    <section class="section">
+      <div class="section__header">
+        <div class="container">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item :to="{ path: '/index' }"
+              >首页</el-breadcrumb-item
+            >
+            <el-breadcrumb-item>课程</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+      </div>
+      <div class="section__body">
+        <div class="container">
+          <div class="course-classify">
+            <div class="course-classify__list">
+              <div class="left-item">教育类型：</div>
+              <div class="right-item">
+                <div class="list">
+                  <!-- <div
+                    class="item"
+                    :class="{ active: typeKey == '' }"
+                    @click="changeType('')"
+                  >
+                    全部
+                  </div> -->
+                  <div
+                    class="item"
+                    v-for="(item, index) in typeList"
+                    :key="index"
+                    :class="{ active: params.educationTypeId == item.id }"
+                    @click="changeType(item)"
+                  >
+                    {{ item.educationName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <transition name="el-fade-in-linear">
+              <div
+                class="course-classify__list"
+                v-if="businessList.length > 0 && params.educationTypeId"
+              >
+                <div class="left-item">培训项目：</div>
+                <div class="right-item">
+                  <div class="list">
+                    <!-- <div class="item active">全部</div> -->
+                    <div
+                      class="item"
+                      v-for="(item, index) in businessList"
+                      :key="index"
+                      :class="{ active: params.businessId == item.id }"
+                      @click="changeBusiness(item)"
+                    >
+                      {{ item.aliasName }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+            <transition name="el-fade-in-linear">
+              <div class="course-classify__list" v-if="subjectList.length > 0">
+                <div class="left-item">科目分类：</div>
+                <div class="right-item">
+                  <div class="list">
+                    <div
+                      class="item"
+                      v-for="(item, index) in subjectList"
+                      :key="index"
+                      :class="{ active: params.subjectId == item.id }"
+                      @click="changeSubject(item)"
+                    >
+                      {{ item.subjectName }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+
+      <div class="section__footer">
+        <div class="container">
+          <div class="course-list">
+            <div class="course-list__header">
+              <div class="sort-list">
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(1)"
+                  :class="{ active: params.sortType == 1 ? true : false }"
+                >
+                  综合排序
+                </div>
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(2)"
+                  :class="{ active: params.sortType == 2 ? true : false }"
+                >
+                  低价优先
+                </div>
+                <div
+                  class="sort-list__item"
+                  @click="changeSort(3)"
+                  :class="{ active: params.sortType == 3 ? true : false }"
+                >
+                  高价优先
+                </div>
+              </div>
+            </div>
+            <div class="course-list__body">
+              
+            <transition name="el-fade-in-linear">
+              <LoadingBox v-if="loading"></LoadingBox>
+              <ul v-else class="list clearfix">
+                <el-empty
+                  v-if="goodsList.length == 0"
+                  description="暂无数据"
+                ></el-empty>
+                <li
+                  class="course-item"
+                  v-for="(item, index) in goodsList"
+                  :key="index"
+                >
+                  <GoodsItem :item="item"></GoodsItem>
+                </li>
+              </ul>
+            </transition>
+            </div>
+          </div>
+
+          <div class="pagination">
+            <el-pagination
+              @current-change="currentChange"
+              background
+              layout="prev, pager, next"
+              :total="total"
+              :pager-count="5"
+              :page-size="params.pageSize"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <ToolBar></ToolBar>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import { cancel } from "@/apis/common.js";
+import LoadingBox from "@/components/loadingBox/index";
+import Footer from "@/components/footer/index";
+import Header from "@/components/header/index";
+import ToolBar from "@/components/toolbar/index";
+import GoodsItem from "@/components/goodsItem/index";
+import { mapMutations } from "vuex";
+export default {
+  name: "handoutList",
+  components: {
+    Footer,
+    Header,
+    ToolBar,
+    GoodsItem,
+    LoadingBox
+  },
+  data() {
+    return {
+      projectId: "",
+      typeList: [],
+      businessList: [],
+      subjectList: [],
+      total: 0,
+      params: {
+        projectId: "",
+        educationTypeId: "",
+        businessId: "",
+        subjectId: "",
+        pageNum: 1,
+        pageSize: 15,
+        goodsStatus: 1,
+        goodsType: 1,
+        sortType: 1,
+        searchKey: "",
+        showStatus: 1
+      },
+      goodsList: [],
+      loading: false
+    };
+  },
+  mounted() {
+    this.params.goodsName = this.$route.query.searchKey || "";
+    // this.params.searchKey = this.$route.query.searchKey || "";
+    this.params.educationTypeId = this.$route.query.educationId || "";
+    // this.params.projectId = this.$route.query.projectId || "";
+    this.params.businessId = this.$route.query.businessId || "";
+    if (this.params.businessId) {
+      this.getSubjectList();
+    }
+    this.getEducationTypeList();
+  },
+  methods: {
+    ...mapMutations(["getCartCount"]),
+    search(key) {
+      this.params.goodsName = key || "";
+      // this.params.searchKey = key || "";
+      this.params.projectId = "";
+      this.params.educationTypeId = "";
+      this.params.businessId = "";
+      this.params.subjectId = "";
+      this.changeSubject();
+    },
+    changeSort(sortType) {
+      if (this.params.sortType == sortType) return;
+      this.params.sortType = sortType;
+      this.changeSubject();
+    },
+    currentChange(e) {
+      this.params.pageNum = e;
+      this.changeSubject();
+    },
+    toGoodsDetail(item) {
+      this.$router.push({
+        path: "/course-detail/" + item.goodsId
+      });
+    },
+
+    addCart(item) {
+      this.$request
+        .addCart({ goodsId: item.goodsId })
+        .then(res => {
+          this.getCartCount();
+          this.$message({
+            message: "加入购物车成功",
+            type: "success"
+          });
+        })
+        .catch(err => {
+          if (err.code == 500) {
+            this.$message({
+              message: err.msg,
+              type: "warning"
+            });
+          }
+        });
+    },
+
+    /**
+     * 切换教育类型
+     */
+    changeType(item) {
+      if (this.params.educationTypeId == item.id) {
+        return;
+      }
+      this.params.projectId = "";
+      this.params.educationTypeId = item.id;
+      this.params.businessId = "";
+      this.businessList = [];
+      this.params.subjectId = "";
+      this.subjectList = [];
+      this.params.pageNum = 1;
+      this.getBusinessList();
+      this.changeSubject();
+    },
+
+    /**
+     * 切换科目分类
+     */
+    changeSubject(item) {
+      if (item) {
+        if (this.params.subjectId != item.id) {
+          this.params.subjectId = item.id;
+          this.params.pageNum = 1;
+        }
+      }
+      if (cancel) {
+        cancel("取消请求");
+      }
+      this.loading = true;
+      this.$request
+        .goodsList(this.params)
+        .then(res => {
+          this.goodsList = res.rows;
+          this.total = res.total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+
+    /**
+     * 获取科目分类
+     */
+    getSubjectList() {
+      this.$request
+        .subjectList({
+          businessId: this.params.businessId,
+          projectId: this.projectId,
+          educationId: this.params.educationTypeId
+        })
+        .then(res => {
+          this.subjectList = res.rows;
+          this.subjectList.unshift({ id: 0, subjectName: "全部" });
+          this.params.subjectId = 0;
+
+          this.changeSubject(this.subjectList[0]);
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    /**
+     * 切换业务层级
+     */
+    changeBusiness(item) {
+      if (this.params.subjectId == item.id) {
+        return;
+      }
+      this.loading = true;
+      this.params.businessId = item.id;
+      this.projectId = item.projectId;
+      this.params.subjectId = "";
+      this.subjectList = [];
+      this.params.pageNum = 1;
+      this.getSubjectList();
+    },
+
+    /**
+     * 获取业务层级
+     */
+    getBusinessList() {
+      this.$request
+        .businessList({ educationId: this.params.educationTypeId })
+        .then(res => {
+          this.businessList = res.rows.filter(item => item.aliasName);
+          this.projectId = this.businessList[0].projectId;
+        });
+    },
+
+    /**
+     * 获取教育类型
+     */
+    getEducationTypeList() {
+      let alls = {
+        educationName: "全部",
+        id: "",
+        status: 1,
+        sort: 0
+      };
+      this.$request.educationTypeList().then(res => {
+        res.rows.unshift(alls);
+        this.typeList = res.rows;
+
+        //有传入教育类型
+        if (this.params.educationTypeId) {
+          this.getBusinessList();
+        } else {
+          this.params.educationTypeId = res.rows[0].id;
+          this.getBusinessList();
+        }
+        this.changeSubject();
+      });
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.payment {
+  .section {
+    &__header {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+    }
+
+    &__body {
+      background: #ebf2fc;
+      .course-classify {
+        overflow: hidden;
+
+        &__list {
+          display: flex;
+          margin: 6px 0;
+          align-items: flex-start;
+          .left-item {
+            margin-top: 10px;
+            padding: 8px 0;
+            width: 80px;
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #333333;
+          }
+
+          .right-item {
+            flex: 1;
+            .list {
+              display: flex;
+              flex-wrap: wrap;
+              .item {
+                cursor: pointer;
+                border-radius: 8px;
+                margin: 10px;
+                padding: 8px 16px;
+                color: #666666;
+                font-size: 16px;
+                background: #f7f9fc;
+                color: #999;
+
+                &.active {
+                  color: #fff;
+                  background: #3f8dfd;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &__footer {
+      .course-list {
+        &__header {
+          margin-top: 32px;
+          .sort-list {
+            display: flex;
+            align-items: center;
+            &__item {
+              cursor: pointer;
+              width: 96px;
+              height: 32px;
+              border-radius: 16px;
+              background: #ffffff;
+              border: 1px solid #bfbfbf;
+              border-radius: 16px;
+              text-align: center;
+              line-height: 30px;
+              font-size: 16px;
+              margin-right: 20px;
+
+              &.active {
+                background: #ebf2fc;
+                border: 1px solid #3f8dfd;
+                border-radius: 16px;
+                color: #3f8dfd;
+              }
+            }
+          }
+        }
+
+        &__body {
+          .list {
+            width: 100%;
+
+            .course-item {
+              float: left;
+            }
+          }
+        }
+
+        &__footer {
+          overflow: hidden;
+          .btn {
+            cursor: pointer;
+            width: 146px;
+            height: 40px;
+            background: #e3eaf7;
+            border-radius: 8px;
+            margin: 20px auto 40px;
+            color: #3f8dfd;
+            text-align: center;
+            line-height: 40px;
+
+            &:hover {
+              color: #fff;
+              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
+              background: #3f8dfd;
+            }
+          }
+        }
+      }
+
+      .pagination {
+        padding: 30px 0;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/pages/course-list/index.vue

@@ -2,483 +2,36 @@
   <div class="payment">
     <Header @search="search($event)"></Header>
     <section class="section">
-      <div class="section__header">
-        <div class="container">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/index' }"
-              >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>课程</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-      </div>
-      <div class="section__body">
-        <div class="container">
-          <div class="course-classify">
-            <div class="course-classify__list">
-              <div class="left-item">教育类型：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div
-                    class="item"
-                    :class="{ active: typeKey == '' }"
-                    @click="changeType('')"
-                  >
-                    全部
-                  </div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in typeList"
-                    :key="index"
-                    :class="{ active: params.educationTypeId == item.id }"
-                    @click="changeType(item)"
-                  >
-                    {{ item.educationName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="course-classify__list"
-              v-if="businessList.length > 0 && params.educationTypeId"
-            >
-              <div class="left-item">培训项目：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div class="item active">全部</div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in businessList"
-                    :key="index"
-                    :class="{ active: params.businessId == item.id }"
-                    @click="changeBusiness(item)"
-                  >
-                    {{ item.aliasName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="course-classify__list" v-if="subjectList.length > 0">
-              <div class="left-item">科目分类：</div>
-              <div class="right-item">
-                <div class="list">
-                  <div
-                    class="item"
-                    v-for="(item, index) in subjectList"
-                    :key="index"
-                    :class="{ active: params.subjectId == item.id }"
-                    @click="changeSubject(item)"
-                  >
-                    {{ item.subjectName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="section__footer">
-        <div class="container">
-          <div class="course-list">
-            <div class="course-list__header">
-              <div class="sort-list">
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(1)"
-                  :class="{ active: params.sortType == 1 ? true : false }"
-                >
-                  综合排序
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(2)"
-                  :class="{ active: params.sortType == 2 ? true : false }"
-                >
-                  低价优先
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(3)"
-                  :class="{ active: params.sortType == 3 ? true : false }"
-                >
-                  高价优先
-                </div>
-              </div>
-            </div>
-            <div class="course-list__body">
-              <LoadingBox v-if="loading"></LoadingBox>
-              <ul v-else class="list clearfix">
-                <el-empty v-if="goodsList.length == 0" description="暂无数据"></el-empty>
-                <li
-                  class="course-item"
-                  v-for="(item, index) in goodsList"
-                  :key="index"
-                >
-                  <GoodsItem :item="item"></GoodsItem>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="pagination">
-            <el-pagination
-              @current-change="currentChange"
-              background
-              layout="prev, pager, next"
-              :total="total"
-              :pager-count="5"
-              :page-size="params.pageSize"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
+      <list-option :goodsType="1" ref="listOption"></list-option>
     </section>
-
     <ToolBar></ToolBar>
     <Footer></Footer>
   </div>
 </template>
 
 <script>
-import { cancel } from "@/apis/common.js";
-import LoadingBox from "@/components/loadingBox/index";
+import listOption from "@/components/listOption/index";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
-import GoodsItem from "@/components/goodsItem/index";
-import { mapMutations } from "vuex";
 export default {
-  name: "handoutList",
+  name: "",
   components: {
+    listOption,
     Footer,
     Header,
-    ToolBar,
-    GoodsItem,
-    LoadingBox
+    ToolBar
   },
   data() {
-    return {
-      projectId: "",
-      typeList: [],
-      businessList: [],
-      subjectList: [],
-      total: 0,
-      params: {
-        projectId: "",
-        educationTypeId: "",
-        businessId: "",
-        subjectId: "",
-        pageNum: 1,
-        pageSize: 15,
-        goodsStatus: 1,
-        goodsType: 1,
-        sortType: 1,
-        searchKey: "",
-        showStatus: 1
-      },
-      goodsList: [],
-      loading: false
-    };
-  },
-  mounted() {
-    this.params.goodsName = this.$route.query.searchKey || "";
-    // this.params.searchKey = this.$route.query.searchKey || "";
-    this.params.educationTypeId = this.$route.query.educationId || "";
-    // this.params.projectId = this.$route.query.projectId || "";
-    this.params.businessId = this.$route.query.businessId || "";
-    if (this.params.businessId) {
-      this.getSubjectList();
-    }
-    this.getEducationTypeList();
+    return {};
   },
   methods: {
-    ...mapMutations(["getCartCount"]),
     search(key) {
-      this.params.goodsName = key || "";
-      // this.params.searchKey = key || "";
-      this.params.projectId = "";
-      this.params.educationTypeId = "";
-      this.params.businessId = "";
-      this.params.subjectId = "";
-      this.changeSubject();
-    },
-    changeSort(sortType) {
-      if (this.params.sortType == sortType) return;
-      this.params.sortType = sortType;
-      this.changeSubject();
-    },
-    currentChange(e) {
-      this.params.pageNum = e;
-      this.changeSubject();
-    },
-    toGoodsDetail(item) {
-      this.$router.push({
-        path: "/course-detail/" + item.goodsId
-      });
-    },
-
-    addCart(item) {
-      this.$request
-        .addCart({ goodsId: item.goodsId })
-        .then(res => {
-          this.getCartCount();
-          this.$message({
-            message: "加入购物车成功",
-            type: "success"
-          });
-        })
-        .catch(err => {
-          if (err.code == 500) {
-            this.$message({
-              message: err.msg,
-              type: "warning"
-            });
-          }
-        });
-    },
-
-    /**
-     * 切换教育类型
-     */
-    changeType(item) {
-      if (this.params.educationTypeId == item.id) {
-        return;
-      }
-      this.params.projectId = "";
-      this.params.educationTypeId = item.id;
-      this.params.businessId = "";
-      this.businessList = [];
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getBusinessList();
-      this.changeSubject();
-    },
-
-    /**
-     * 切换科目分类
-     */
-    changeSubject(item) {
-      if (item) {
-        if (this.params.subjectId != item.id) {
-          this.params.subjectId = item.id;
-          this.params.pageNum = 1;
-        }
-      }
-      if (cancel) {
-        cancel("取消请求");
-      }
-      this.loading = true;
-      this.$request
-        .goodsList(this.params)
-        .then(res => {
-          this.goodsList = res.rows;
-          this.total = res.total;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-
-    /**
-     * 获取科目分类
-     */
-    getSubjectList() {
-      this.$request
-        .subjectList({
-          businessId: this.params.businessId,
-          projectId: this.projectId,
-          educationId: this.params.educationTypeId
-        })
-        .then(res => {
-          this.subjectList = res.rows;
-          this.subjectList.unshift({ id: 0, subjectName: "全部" });
-          this.params.subjectId = 0;
-
-          this.changeSubject(this.subjectList[0]);
-        });
-    },
-
-    /**
-     * 切换业务层级
-     */
-    changeBusiness(item) {
-      if (this.params.subjectId == item.id) {
-        return;
-      }
-      this.params.businessId = item.id;
-      this.projectId = item.projectId;
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getSubjectList();
-    },
-
-    /**
-     * 获取业务层级
-     */
-    getBusinessList() {
-      this.$request
-        .businessList({ educationId: this.params.educationTypeId })
-        .then(res => {
-          this.businessList = res.rows.filter(item => item.aliasName);
-          this.projectId = this.businessList[0].projectId;
-        });
-    },
-
-    /**
-     * 获取教育类型
-     */
-    getEducationTypeList() {
-      let alls = {
-        educationName: "全部",
-        id: "",
-        status: 1,
-        sort: 0
-      };
-      this.$request.educationTypeList().then(res => {
-        res.rows.unshift(alls);
-        this.typeList = res.rows;
-
-        //有传入教育类型
-        if (this.params.educationTypeId) {
-          this.getBusinessList();
-        } else {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        }
-        this.changeSubject();
-      });
+      this.$refs.listOption.params.goodsName = key;
     }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.payment {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      background: #ebf2fc;
-      .course-classify {
-        overflow: hidden;
-
-        &__list {
-          display: flex;
-          margin: 6px 0;
-          align-items: flex-start;
-          .left-item {
-            margin-top: 10px;
-            padding: 8px 0;
-            width: 80px;
-            font-size: 16px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-          }
-
-          .right-item {
-            flex: 1;
-            .list {
-              display: flex;
-              flex-wrap: wrap;
-              .item {
-                cursor: pointer;
-                border-radius: 8px;
-                margin: 10px;
-                padding: 8px 16px;
-                color: #666666;
-                font-size: 16px;
-                background: #f7f9fc;
-                color: #999;
-
-                &.active {
-                  color: #fff;
-                  background: #3f8dfd;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__footer {
-      .course-list {
-        &__header {
-          margin-top: 32px;
-          .sort-list {
-            display: flex;
-            align-items: center;
-            &__item {
-              cursor: pointer;
-              width: 96px;
-              height: 32px;
-              border-radius: 16px;
-              background: #ffffff;
-              border: 1px solid #bfbfbf;
-              border-radius: 16px;
-              text-align: center;
-              line-height: 30px;
-              font-size: 16px;
-              margin-right: 20px;
-
-              &.active {
-                background: #ebf2fc;
-                border: 1px solid #3f8dfd;
-                border-radius: 16px;
-                color: #3f8dfd;
-              }
-            }
-          }
-        }
-
-        &__body {
-          .list {
-            width: 100%;
-
-            .course-item {
-              float: left;
-            }
-          }
-        }
-
-        &__footer {
-          overflow: hidden;
-          .btn {
-            cursor: pointer;
-            width: 146px;
-            height: 40px;
-            background: #e3eaf7;
-            border-radius: 8px;
-            margin: 20px auto 40px;
-            color: #3f8dfd;
-            text-align: center;
-            line-height: 40px;
-
-            &:hover {
-              color: #fff;
-              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
-              background: #3f8dfd;
-            }
-          }
-        }
-      }
-
-      .pagination {
-        padding: 30px 0;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/pages/handout-list/index.vue

@@ -2,483 +2,36 @@
   <div class="payment">
     <Header @search="search($event)"></Header>
     <section class="section">
-      <div class="section__header">
-        <div class="container">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/index' }"
-              >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>讲义资料</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-      </div>
-      <div class="section__body">
-        <div class="container">
-          <div class="course-classify">
-            <div class="course-classify__list">
-              <div class="left-item">教育类型：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div
-                    class="item"
-                    :class="{ active: typeKey == '' }"
-                    @click="changeType('')"
-                  >
-                    全部
-                  </div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in typeList"
-                    :key="index"
-                    :class="{ active: params.educationTypeId == item.id }"
-                    @click="changeType(item)"
-                  >
-                    {{ item.educationName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="course-classify__list"
-              v-if="businessList.length > 0 && params.educationTypeId"
-            >
-              <div class="left-item">培训项目：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div class="item active">全部</div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in businessList"
-                    :key="index"
-                    :class="{ active: params.businessId == item.id }"
-                    @click="changeBusiness(item)"
-                  >
-                    {{ item.aliasName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="course-classify__list" v-if="subjectList.length > 0">
-              <div class="left-item">科目分类：</div>
-              <div class="right-item">
-                <div class="list">
-                  <div
-                    class="item"
-                    v-for="(item, index) in subjectList"
-                    :key="index"
-                    :class="{ active: params.subjectId == item.id }"
-                    @click="changeSubject(item)"
-                  >
-                    {{ item.subjectName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="section__footer">
-        <div class="container">
-          <div class="course-list">
-            <div class="course-list__header">
-              <div class="sort-list">
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(1)"
-                  :class="{ active: params.sortType == 1 ? true : false }"
-                >
-                  综合排序
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(2)"
-                  :class="{ active: params.sortType == 2 ? true : false }"
-                >
-                  低价优先
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(3)"
-                  :class="{ active: params.sortType == 3 ? true : false }"
-                >
-                  高价优先
-                </div>
-              </div>
-            </div>
-            <div class="course-list__body">
-              <LoadingBox v-if="loading"></LoadingBox>
-              <ul v-else class="list clearfix">
-                <el-empty v-if="goodsList.length == 0" description="暂无数据"></el-empty>
-                <li
-                  class="course-item"
-                  v-for="(item, index) in goodsList"
-                  :key="index"
-                >
-                  <GoodsItem :item="item"></GoodsItem>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="pagination">
-            <el-pagination
-              @current-change="currentChange"
-              background
-              layout="prev, pager, next"
-              :total="total"
-              :pager-count="5"
-              :page-size="params.pageSize"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
+      <list-option :goodsType="8" ref="listOption"></list-option>
     </section>
-
     <ToolBar></ToolBar>
     <Footer></Footer>
   </div>
 </template>
 
 <script>
-import { cancel } from "@/apis/common.js";
-import LoadingBox from "@/components/loadingBox/index";
+import listOption from "@/components/listOption/index";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
-import GoodsItem from "@/components/goodsItem/index";
-import { mapMutations } from "vuex";
 export default {
-  name: "PaymentSuccess",
+  name: "",
   components: {
+    listOption,
     Footer,
     Header,
-    ToolBar,
-    GoodsItem,
-    LoadingBox
+    ToolBar
   },
   data() {
-    return {
-      projectId: "",
-      typeList: [],
-      businessList: [],
-      subjectList: [],
-      total: 0,
-      params: {
-        projectId: "",
-        educationTypeId: "",
-        businessId: "",
-        subjectId: "",
-        pageNum: 1,
-        pageSize: 15,
-        goodsStatus: 1,
-        goodsType: 8,
-        sortType: 1,
-        searchKey: "",
-        showStatus: 1
-      },
-      goodsList: [],
-      loading: false
-    };
-  },
-  mounted() {
-    this.params.goodsName = this.$route.query.searchKey || "";
-    // this.params.searchKey = this.$route.query.searchKey || "";
-    this.params.educationTypeId = this.$route.query.educationId || "";
-    // this.params.projectId = this.$route.query.projectId || "";
-    this.params.businessId = this.$route.query.businessId || "";
-    if (this.params.businessId) {
-      this.getSubjectList();
-    }
-    this.getEducationTypeList();
+    return {};
   },
   methods: {
-    ...mapMutations(["getCartCount"]),
     search(key) {
-      this.params.goodsName = key || "";
-      // this.params.searchKey = key || "";
-      this.params.projectId = "";
-      this.params.educationTypeId = "";
-      this.params.businessId = "";
-      this.params.subjectId = "";
-      this.changeSubject();
-    },
-    changeSort(sortType) {
-      if (this.params.sortType == sortType) return;
-      this.params.sortType = sortType;
-      this.changeSubject();
-    },
-    currentChange(e) {
-      this.params.pageNum = e;
-      this.changeSubject();
-    },
-    toGoodsDetail(item) {
-      this.$router.push({
-        path: "/course-detail/" + item.goodsId
-      });
-    },
-
-    addCart(item) {
-      this.$request
-        .addCart({ goodsId: item.goodsId })
-        .then(res => {
-          this.getCartCount();
-          this.$message({
-            message: "加入购物车成功",
-            type: "success"
-          });
-        })
-        .catch(err => {
-          if (err.code == 500) {
-            this.$message({
-              message: err.msg,
-              type: "warning"
-            });
-          }
-        });
-    },
-
-    /**
-     * 切换教育类型
-     */
-    changeType(item) {
-      if (this.params.educationTypeId == item.id) {
-        return;
-      }
-      this.params.projectId = "";
-      this.params.educationTypeId = item.id;
-      this.params.businessId = "";
-      this.businessList = [];
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getBusinessList();
-      this.changeSubject();
-    },
-
-    /**
-     * 切换科目分类
-     */
-    changeSubject(item) {
-      if (item) {
-        if (this.params.subjectId != item.id) {
-          this.params.subjectId = item.id;
-          this.params.pageNum = 1;
-        }
-      }
-      if (cancel) {
-        cancel("取消请求");
-      }
-      this.loading = true;
-      this.$request
-        .goodsList(this.params)
-        .then(res => {
-          this.goodsList = res.rows;
-          this.total = res.total;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-
-    /**
-     * 获取科目分类
-     */
-    getSubjectList() {
-      this.$request
-        .subjectList({
-          businessId: this.params.businessId,
-          projectId: this.projectId,
-          educationId: this.params.educationTypeId
-        })
-        .then(res => {
-          this.subjectList = res.rows;
-          this.subjectList.unshift({ id: 0, subjectName: "全部" });
-          this.params.subjectId = 0;
-
-          this.changeSubject(this.subjectList[0]);
-        });
-    },
-
-    /**
-     * 切换业务层级
-     */
-    changeBusiness(item) {
-      if (this.params.subjectId == item.id) {
-        return;
-      }
-      this.params.businessId = item.id;
-      this.projectId = item.projectId;
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getSubjectList();
-    },
-
-    /**
-     * 获取业务层级
-     */
-    getBusinessList() {
-      this.$request
-        .businessList({ educationId: this.params.educationTypeId })
-        .then(res => {
-          this.businessList = res.rows.filter(item => item.aliasName);
-          this.projectId = this.businessList[0].projectId;
-        });
-    },
-
-    /**
-     * 获取教育类型
-     */
-    getEducationTypeList() {
-      let alls = {
-        educationName: "全部",
-        id: "",
-        status: 1,
-        sort: 0
-      };
-      this.$request.educationTypeList().then(res => {
-        res.rows.unshift(alls);
-        this.typeList = res.rows;
-
-        //有传入教育类型
-        if (this.params.educationTypeId) {
-          this.getBusinessList();
-        } else {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        }
-        this.changeSubject();
-      });
+      this.$refs.listOption.params.goodsName = key;
     }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.payment {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      background: #ebf2fc;
-      .course-classify {
-        overflow: hidden;
-
-        &__list {
-          display: flex;
-          margin: 6px 0;
-          align-items: flex-start;
-          .left-item {
-            margin-top: 10px;
-            padding: 8px 0;
-            width: 80px;
-            font-size: 16px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-          }
-
-          .right-item {
-            flex: 1;
-            .list {
-              display: flex;
-              flex-wrap: wrap;
-              .item {
-                cursor: pointer;
-                border-radius: 8px;
-                margin: 10px;
-                padding: 8px 16px;
-                color: #666666;
-                font-size: 16px;
-                background: #f7f9fc;
-                color: #999;
-
-                &.active {
-                  color: #fff;
-                  background: #3f8dfd;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__footer {
-      .course-list {
-        &__header {
-          margin-top: 32px;
-          .sort-list {
-            display: flex;
-            align-items: center;
-            &__item {
-              cursor: pointer;
-              width: 96px;
-              height: 32px;
-              border-radius: 16px;
-              background: #ffffff;
-              border: 1px solid #bfbfbf;
-              border-radius: 16px;
-              text-align: center;
-              line-height: 30px;
-              font-size: 16px;
-              margin-right: 20px;
-
-              &.active {
-                background: #ebf2fc;
-                border: 1px solid #3f8dfd;
-                border-radius: 16px;
-                color: #3f8dfd;
-              }
-            }
-          }
-        }
-
-        &__body {
-          .list {
-            width: 100%;
-
-            .course-item {
-              float: left;
-            }
-          }
-        }
-
-        &__footer {
-          overflow: hidden;
-          .btn {
-            cursor: pointer;
-            width: 146px;
-            height: 40px;
-            background: #e3eaf7;
-            border-radius: 8px;
-            margin: 20px auto 40px;
-            color: #3f8dfd;
-            text-align: center;
-            line-height: 40px;
-
-            &:hover {
-              color: #fff;
-              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
-              background: #3f8dfd;
-            }
-          }
-        }
-      }
-
-      .pagination {
-        padding: 30px 0;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/pages/live-list/index.vue

@@ -2,468 +2,36 @@
   <div class="payment">
     <Header @search="search($event)"></Header>
     <section class="section">
-      <div class="section__header">
-        <div class="container">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item :to="{ path: '/index' }"
-              >首页</el-breadcrumb-item
-            >
-            <el-breadcrumb-item>直播</el-breadcrumb-item>
-          </el-breadcrumb>
-        </div>
-      </div>
-      <div class="section__body">
-        <div class="container">
-          <div class="course-classify">
-            <div class="course-classify__list">
-              <div class="left-item">教育类型：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div
-                    class="item"
-                    :class="{ active: typeKey == '' }"
-                    @click="changeType('')"
-                  >
-                    全部
-                  </div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in typeList"
-                    :key="index"
-                    :class="{ active: params.educationTypeId == item.id }"
-                    @click="changeType(item)"
-                  >
-                    {{ item.educationName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div
-              class="course-classify__list"
-              v-if="businessList.length > 0 && params.educationTypeId"
-            >
-              <div class="left-item">培训项目：</div>
-              <div class="right-item">
-                <div class="list">
-                  <!-- <div class="item active">全部</div> -->
-                  <div
-                    class="item"
-                    v-for="(item, index) in businessList"
-                    :key="index"
-                    :class="{ active: params.businessId == item.id }"
-                    @click="changeBusiness(item)"
-                  >
-                    {{ item.aliasName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="course-classify__list" v-if="subjectList.length > 0">
-              <div class="left-item">科目分类：</div>
-              <div class="right-item">
-                <div class="list">
-                  <div
-                    class="item"
-                    v-for="(item, index) in subjectList"
-                    :key="index"
-                    :class="{ active: params.subjectId == item.id }"
-                    @click="changeSubject(item)"
-                  >
-                    {{ item.subjectName }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="section__footer">
-        <div class="container">
-          <div class="course-list">
-            <div class="course-list__header">
-              <div class="sort-list">
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(1)"
-                  :class="{ active: params.sortType == 1 ? true : false }"
-                >
-                  综合排序
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(2)"
-                  :class="{ active: params.sortType == 2 ? true : false }"
-                >
-                  低价优先
-                </div>
-                <div
-                  class="sort-list__item"
-                  @click="changeSort(3)"
-                  :class="{ active: params.sortType == 3 ? true : false }"
-                >
-                  高价优先
-                </div>
-              </div>
-            </div>
-            <div class="course-list__body">
-              <LoadingBox v-if="loading"></LoadingBox>
-              <ul v-else class="list clearfix">
-                <el-empty v-if="goodsList.length == 0" description="暂无数据"></el-empty>
-                <li
-                  class="course-item"
-                  v-for="(item, index) in goodsList"
-                  :key="index"
-                >
-                  <GoodsItem :item="item"></GoodsItem>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div class="pagination">
-            <el-pagination
-              @current-change="currentChange"
-              background
-              layout="prev, pager, next"
-              :total="total"
-              :pager-count="5"
-              :page-size="params.pageSize"
-            >
-            </el-pagination>
-          </div>
-        </div>
-      </div>
+      <list-option :goodsType="6" ref="listOption"></list-option>
     </section>
-
     <ToolBar></ToolBar>
     <Footer></Footer>
   </div>
 </template>
 
 <script>
-import { cancel } from "@/apis/common.js";
-import LoadingBox from "@/components/loadingBox/index";
+import listOption from "@/components/listOption/index";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
-import GoodsItem from "@/components/goodsItem/index";
-import { mapMutations } from "vuex";
 export default {
-  name: "PaymentSuccess",
+  name: "",
   components: {
+    listOption,
     Footer,
     Header,
-    ToolBar,
-    GoodsItem,
-    LoadingBox
+    ToolBar
   },
   data() {
-    return {
-      projectId: "",
-      typeList: [],
-      businessList: [],
-      subjectList: [],
-      total: 0,
-      params: {
-        projectId: "",
-        educationTypeId: "",
-        businessId: "",
-        subjectId: "",
-        pageNum: 1,
-        pageSize: 15,
-        goodsStatus: 1,
-        goodsType: 6,
-        sortType: 1,
-        searchKey: "",
-        showStatus: 1
-      },
-      goodsList: [],
-      loading: false
-    };
-  },
-  mounted() {
-    console.log(123);
-    this.params.goodsName = this.$route.query.searchKey || "";
-    // this.params.searchKey = this.$route.query.searchKey || "";
-    this.params.educationTypeId = this.$route.query.educationId || "";
-    // this.params.projectId = this.$route.query.projectId || "";
-    this.params.businessId = this.$route.query.businessId || "";
-    if (this.params.businessId) {
-      this.getSubjectList();
-    }
-    this.getEducationTypeList();
-    // this.changeSubject();
+    return {};
   },
   methods: {
-    ...mapMutations(["getCartCount"]),
     search(key) {
-      this.params.goodsName = key || "";
-      // this.params.searchKey = key || "";
-      this.params.projectId = "";
-      this.params.educationTypeId = "";
-      this.params.businessId = "";
-      this.params.subjectId = "";
-      this.changeSubject();
-    },
-    changeSort(sortType) {
-      if (this.params.sortType == sortType) return;
-      this.params.sortType = sortType;
-      this.changeSubject();
-    },
-    currentChange(e) {
-      this.params.pageNum = e;
-      this.changeSubject();
-    },
-    goodsDetail(item) {
-      this.$router.push({
-        path: "/bank-detail/" + item.goodsId,
-        query: {
-          orderGoodsId: item.orderGoodsId
-        }
-      });
-    },
-
-    addCart(item) {
-      this.$request
-        .addCart({ goodsId: item.goodsId })
-        .then(res => {
-          this.getCartCount();
-          this.$message({
-            message: "加入购物车成功",
-            type: "success"
-          });
-        })
-        .catch(err => {
-          if (err.code == 500) {
-            this.$message({
-              message: err.msg,
-              type: "warning"
-            });
-          }
-        });
-    },
-
-    changeType(item) {
-      if (this.params.educationTypeId == item.id) {
-        return;
-      }
-      this.params.educationTypeId = item.id;
-      this.params.businessId = "";
-      this.businessList = [];
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getBusinessList();
-      this.changeSubject();
-    },
-
-    changeSubject(item) {
-      if (item) {
-        if (this.params.subjectId != item.id) {
-          this.params.subjectId = item.id;
-          this.params.pageNum = 1;
-        }
-      }
-      if (cancel) {
-        cancel("取消请求");
-      }
-      this.loading = true;
-      this.$request
-        .goodsList(this.params)
-        .then(res => {
-          this.goodsList = res.rows;
-          this.total = res.total;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-
-    getSubjectList() {
-      this.$request
-        .subjectList({
-          businessId: this.params.businessId,
-          projectId: this.projectId,
-          educationId: this.params.educationTypeId
-        })
-        .then(res => {
-          this.subjectList = res.rows;
-          this.subjectList.unshift({ id: 0, subjectName: "全部" });
-          this.params.subjectId = 0;
-
-          this.changeSubject(this.subjectList[0]);
-        });
-    },
-
-    changeBusiness(item) {
-      if (this.params.subjectId == item.id) {
-        return;
-      }
-      this.params.businessId = item.id;
-      this.projectId = item.projectId;
-      this.params.subjectId = "";
-      this.subjectList = [];
-      this.params.pageNum = 1;
-      this.getSubjectList();
-    },
-
-    getBusinessList() {
-      this.$request
-        .businessList({ educationId: this.params.educationTypeId })
-        .then(res => {
-          this.businessList = res.rows.filter(item => item.aliasName);
-          this.projectId = this.businessList[0].projectId;
-        });
-    },
-
-    getEducationTypeList() {
-      let alls = {
-        educationName: "全部",
-        id: "",
-        status: 1,
-        sort: 0
-      };
-      this.$request.educationTypeList().then(res => {
-        res.rows.unshift(alls);
-        this.typeList = res.rows;
-        if (!this.params.educationTypeId) {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        } else {
-          this.params.educationTypeId = res.rows[0].id;
-          this.getBusinessList();
-        }
-        this.changeSubject();
-      });
+      this.$refs.listOption.params.goodsName = key;
     }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.payment {
-  .section {
-    &__header {
-      height: 40px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-    }
-
-    &__body {
-      background: #ebf2fc;
-      .course-classify {
-        overflow: hidden;
-
-        &__list {
-          display: flex;
-          margin: 6px 0;
-          align-items: flex-start;
-          .left-item {
-            margin-top: 10px;
-            padding: 8px 0;
-            width: 80px;
-            font-size: 16px;
-            font-family: Microsoft YaHei;
-            font-weight: 400;
-            color: #333333;
-          }
-
-          .right-item {
-            flex: 1;
-            .list {
-              display: flex;
-              flex-wrap: wrap;
-              .item {
-                cursor: pointer;
-                border-radius: 8px;
-                margin: 10px;
-                padding: 8px 16px;
-                color: #666666;
-                font-size: 16px;
-                background: #f7f9fc;
-                color: #999;
-
-                &.active {
-                  color: #fff;
-                  background: #3f8dfd;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &__footer {
-      .course-list {
-        &__header {
-          margin-top: 32px;
-          .sort-list {
-            display: flex;
-            align-items: center;
-            &__item {
-              cursor: pointer;
-              width: 96px;
-              height: 32px;
-              border-radius: 16px;
-              background: #ffffff;
-              border: 1px solid #bfbfbf;
-              border-radius: 16px;
-              text-align: center;
-              line-height: 30px;
-              font-size: 16px;
-              margin-right: 20px;
-
-              &.active {
-                background: #ebf2fc;
-                border: 1px solid #3f8dfd;
-                border-radius: 16px;
-                color: #3f8dfd;
-              }
-            }
-          }
-        }
-
-        &__body {
-          .list {
-            width: 100%;
-
-            .course-item {
-              float: left;
-            }
-          }
-        }
-
-        &__footer {
-          overflow: hidden;
-          .btn {
-            cursor: pointer;
-            width: 146px;
-            height: 40px;
-            background: #e3eaf7;
-            border-radius: 8px;
-            margin: 20px auto 40px;
-            color: #3f8dfd;
-            text-align: center;
-            line-height: 40px;
-
-            &:hover {
-              color: #fff;
-              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
-              background: #3f8dfd;
-            }
-          }
-        }
-      }
-
-      .pagination {
-        padding: 30px 0;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>