fix

src/pages/product/list/index.vue

@@ -42,46 +42,11 @@
       <div class="filter">
         <dl v-if="curTab == 1">
           <dt>学科专业</dt>
-
-          <dd>学科类别</dd>
-          <el-select v-model="form.categoryId"
-                     clearable
-                     @change="getProfessionalClass()"
-                     @clear="clearClass()">
-            <el-option label="不限"
-                       value=""></el-option>
-            <el-option v-for="(item,index) in subjectList"
-                       :key="index"
-                       :label="item.disciplineName"
-                       :value="item.disciplineId"></el-option>
-          </el-select>
-
-          <dd style="margin: 0 0 0 50px">专业类</dd>
-          <el-select v-model="form.professionalCategoryId"
-                     clearable
-                     :disabled="form.categoryId ? false : true"
-                     @change="getProfessional"
-                     @clear="clearProfess()">
-            <el-option label="不限"
-                       value=""></el-option>
-            <el-option v-for="(item,index) in professionalClassList"
-                       :key="index"
-                       :label="item.professionalClassName"
-                       :value="item.professionalClassId"></el-option>
-          </el-select>
-
-          <dd style="margin: 0 0 0 50px">专业</dd>
-          <el-select v-model="form.professionalId"
-                     clearable
-                     :disabled="form.professionalCategoryId ? false : true"
-                     @change="initData">
-            <el-option label="不限"
-                       value=""></el-option>
-            <el-option v-for="(item,index) in professionalList"
-                       :key="index"
-                       :label="item.professionalName"
-                       :value="item.professionalId"></el-option>
-          </el-select>
+          <el-cascader style="width: 300px;padding: 0 15px"
+                       v-model="category"
+                       :props="props"
+                       clearable
+                       @change="initData"></el-cascader>
         </dl>
         <dl v-if="curTab == 3">
           <dt>产品标签</dt>
@@ -97,12 +62,12 @@
         <dl>
           <dt>产品类型</dt>
           <div class="vals">
-            <dd :class="{active: form.productClassification === ''}"
-                @click="filterChange('', 'productClassification')">全部</dd>
+            <dd :class="{active: form.productType === ''}"
+                @click="filterChange('', 'productType')">全部</dd>
             <dd v-for="(item, i) in classifications"
                 :key="i"
-                :class="{active: form.productClassification === item.typeId}"
-                @click="filterChange(item.typeId, 'productClassification')">{{ item.typeName }}</dd>
+                :class="{active: form.productType === item.typeId}"
+                @click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd>
           </div>
         </dl>
         <dl>
@@ -196,8 +161,9 @@ import { Loading } from "element-ui";
 import Setting from "@/setting";
 export default {
   data () {
+    const that = this
     return {
-      carouselHeight: '336px',
+      carouselHeight: '350px',
       banners: [],
       timer: null,
       curTab: '',
@@ -220,17 +186,64 @@ export default {
         },
       ],
       form: {
-        categoryId: '',
         isShelves: 0,
         hotTag: 1,
-        professionalCategoryId: '',
-        professionalId: '',
-        productClassification: '',
+        // categoryId: '',
+        // professionalCategoryId: '',
+        // professionalId: '',
+        productType: '',
         productName: '',
         purchaseStatus: '',
         sort: 0,
         tagId: ''
       },
+      category: [],
+      // 学科动态加载
+      props: {
+        // multiple: true,
+        checkStrictly: true,
+        lazy: true,
+        lazyLoad (node, resolve) {
+          const { level, value } = node
+          // 学科类别
+          if (!level) {
+            that.$get(that.api.courseDiscipline).then(({ list }) => {
+              list.map(e => {
+                e.value = e.disciplineId
+                e.label = e.disciplineName
+                e.children = []
+              })
+              resolve(list)
+            }).catch(err => { })
+          } else if (level === 1) {
+            // 专业类
+            that.$get(that.api.courseProfessionalClass, {
+              disciplineId: value
+            }).then(({ list }) => {
+              list.map(e => {
+                e.value = e.professionalClassId
+                e.label = e.professionalClassName
+                e.children = []
+              })
+              resolve(list)
+            }).catch(err => { })
+          } else if (level === 2) {
+            // 专业
+            that.$get(that.api.courseProfessional, {
+              professionalClassId: value
+            }).then(({ list }) => {
+              list.map(e => {
+                e.value = e.professionalId
+                e.label = e.professionalName
+                e.leaf = true
+              })
+              resolve(list)
+            }).catch(err => { })
+          } else {
+            resolve([])
+          }
+        }
+      },
       labels: [],
       subjectList: [], //专业学科
       professionalClassList: [], //专业类
@@ -291,8 +304,7 @@ export default {
     }
   },
   mounted () {
-    console.log(11, parseInt(window.innerWidth / 5.7))
-    this.carouselHeight = parseInt(window.innerWidth / 5.7) + 'px'
+    this.carouselHeight = parseInt(window.innerWidth / 5.48) + 'px'
     this.getBanner()
     this.getSubject()
     this.getLabel()
@@ -312,14 +324,19 @@ export default {
     },
     // 获取列表
     getData () {
+      const { category } = this
+      console.log(33, this.category)
       this.loadIns = Loading.service()
       this.$post(this.api.listOfGoods, {
         ...this.form,
+        categoryId: category[0] || '',
+        professionalCategoryId: category[1] || '',
+        professionalId: category[2] || '',
         pageNum: this.page,
         pageSize: this.pageSize,
       }).then(({ page }) => {
         const list = page.records
-        list.forEach(e => {
+        list && list.forEach(e => {
           // 简介去掉标签图片
           const el = document.createElement('div')
           el.innerHTML = e.productIntroduction
@@ -327,7 +344,7 @@ export default {
           const cid = e.classificationId
           e.isCourse = (cid === 1 || cid === 2) && !e.isAssociatedProduct
         })
-        this.list = list
+        this.list = list ? list : []
         this.total = page.total
         this.loadIns.close()
       }).catch(res => {
@@ -492,7 +509,7 @@ export default {
                     transform: translateX(-50%);
                 }
                 &.active:after {
-                    background-color: #007eff;
+                    background-color: #9278ff;
                 }
             }
         }
@@ -541,7 +558,7 @@ export default {
                 cursor: pointer;
                 &.active {
                     font-weight: 600;
-                    color: #007eff;
+                    color: #9278ff;
                 }
             }
         }
@@ -642,7 +659,7 @@ export default {
             }
             .tag {
                 margin-right: 8px;
-                color: #007eff;
+                color: #9278ff;
                 background-color: #f9f9f9;
                 border: 0;
             }