二级分类

src/teacher/piano-room/class-arrangement/index.tsx

@@ -23,6 +23,7 @@ import SelectStudents, { IStudent } from './select-students'
 import CourseSchedule from './course-schedule'
 import { checkNumberInteger } from '@/helpers/toolsValidate'
 import Voice from '../model/voice'
+import { useRouter } from 'vue-router'
 const fieldProps = {
   'is-link': true,
   readonly: true,
@@ -31,6 +32,7 @@ const fieldProps = {
 export default defineComponent({
   name: 'ClassArrangement',
   setup() {
+    const router = useRouter()
     const dateShow = ref(false)
     const timeShow = ref(false)
     const voiceShow = ref(false)
@@ -285,6 +287,7 @@ export default defineComponent({
         if (code === 200) {
           confirmShow.value = false
           Toast('排课成功')
+          router.back()
         }
       } catch (error) {}
     }

src/views/shop-mall/goods-list/index.module.less

@@ -35,6 +35,37 @@
     font-weight: 500;
   }
 }
+.filter-productCategory {
+  flex-wrap: wrap;
+  font-size: 14px;
+  color: #666666;
+  transition: color cubic-bezier(0.075, 0.82, 0.165, 1);
+  background: #ffffff;
+  :global {
+    .van-col {
+      height: 37px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .filter-tag {
+    // text-overflow: ellipsis;
+    // overflow: hidden;
+    // white-space: nowrap;
+    padding: 0 10px;
+    height: 80%;
+    border-radius: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5px;
+  }
+  .filter-tag-checked{
+    background: var(--van-primary);
+    color: #fff;
+  }
+}
 
 .filterSort {
   display: flex;

src/views/shop-mall/goods-list/index.tsx

@@ -5,19 +5,24 @@ import styles from './index.module.less'
 import iconFilter from '@/common/images/icon_filter.png'
 import GoodsFilterList from '../modal/goods-filter-list'
 import ColSearch from '@/components/col-search'
+import request from '@/helpers/request'
 export default defineComponent({
   name: 'goods-list',
   data() {
     const query = this.$route.query
     return {
+      tabListShow: query.id ? false : true,
       typeId: 0,
       filterActive: 0,
       filterListShow: false,
       productCategory: {
+        active: 0,
         name: query.tag || '',
-        id: Number(query.id) || 0
+        id: Number(query.id) || 0,
+        children: []
       },
       productAttributeCategory: {
+        children: [],
         name: '',
         id: 0
       },
@@ -29,7 +34,18 @@ export default defineComponent({
       autofocus: false
     }
   },
-  mounted() {
+  computed: {
+    getProductAttributeCategory() {
+      if (this.productCategory && this.productCategory.children) {
+        let child = (this.productCategory.children[
+          this.productCategory.active
+        ] || {}) as any
+        return child.id || ''
+      }
+      return this.productCategory.id
+    }
+  },
+  async mounted() {
     this.$nextTick(() => {
       if (this.$route.query.input === 'focus') {
         let input: HTMLInputElement = document.querySelector(
@@ -38,6 +54,25 @@ export default defineComponent({
         input.focus()
       }
     })
+
+    if (this.productCategory.id) {
+      try {
+        const res = await request.get(
+          '/api-mall-portal/product/search/condition'
+        )
+        if (res.code === 200) {
+          this.setFilter({
+            productCategory: res.data.productCategorySmallVoList.find(
+              (n: any) => n.id === this.productCategory.id
+            ),
+            productAttributeCategory: undefined,
+            brand: undefined
+          })
+          
+        }
+      } catch (err) {}
+    }
+    this.tabListShow = true
   },
   methods: {
     onFilter(n: number) {
@@ -45,9 +80,15 @@ export default defineComponent({
       if (this.filterActive === 4 && n === 3) n = 3
       if (this.filterActive === n) return
       this.filterActive = n
-      this.onSearch()
+      this.$nextTick(() => {
+        this.onSearch()
+      })
     },
     setFilter({ productCategory, productAttributeCategory, brand }) {
+      // console.log(productCategory.active)
+      if (productCategory && productCategory.active === undefined) {
+        productCategory.active = 0
+      }
       this.productCategory = productCategory
         ? productCategory
         : { id: 0, name: '' }
@@ -55,13 +96,19 @@ export default defineComponent({
         ? productAttributeCategory
         : { id: 0, name: '' }
       this.brand = brand ? brand : { id: 0, name: '' }
-      // console.log(
-      //   this.productCategory,
-      //   this.productAttributeCategory,
-      //   this.brand
-      // )
-      this.onSearch()
-      this.filterListShow = false
+      this.$nextTick(() => {
+        this.onSearch()
+        this.filterListShow = false
+      })
+    },
+
+    onToggleTag(i: number) {
+      let tabList = this.$refs.tabList as any
+      if (tabList.loading) return
+      this.productCategory.active = i
+      this.$nextTick(() => {
+        this.onSearch()
+      })
     },
 
     onClearTag(key: string) {
@@ -148,10 +195,30 @@ export default defineComponent({
               <Icon name={iconFilter} size={18} />
             </Col>
           </Row>
+          {this.productCategory.id ? (
+            <Row class={styles['filter-productCategory']}>
+              {/* <Col span={6}>{this.productCategory.name}</Col> */}
+              {this.productCategory &&
+                this.productCategory.children.map((n: any, i: number) => (
+                  <Col onClick={() => this.onToggleTag(i)}>
+                    <div
+                      class={[
+                        styles['filter-tag'],
+                        this.productCategory.active === i
+                          ? styles['filter-tag-checked']
+                          : ''
+                      ]}
+                    >
+                      {n.name}
+                    </div>
+                  </Col>
+                ))}
+            </Row>
+          ) : null}
         </Sticky>
 
         <div class={styles.filterTagWrap}>
-          {this.productCategory.id ? (
+          {/* {this.productCategory.id ? (
             <Tag
               class={styles.filterTag}
               closeable={true}
@@ -161,7 +228,7 @@ export default defineComponent({
             </Tag>
           ) : (
             ''
-          )}
+          )} */}
           {this.productAttributeCategory.id ? (
             <Tag
               class={styles.filterTag}
@@ -186,14 +253,16 @@ export default defineComponent({
           )}
         </div>
 
-        <TabList
-          ref="tabList"
-          typeId={Number(this.productCategory.id)}
-          productAttributeCategoryId={this.productAttributeCategory.id}
-          brandId={this.brand.id}
-          sort={this.filterActive}
-          keyword={this.keyword}
-        />
+        {this.tabListShow ? (
+          <TabList
+            ref="tabList"
+            typeId={Number(this.getProductAttributeCategory)}
+            productAttributeCategoryId={this.productAttributeCategory.id}
+            brandId={this.brand.id}
+            sort={this.filterActive}
+            keyword={this.keyword}
+          />
+        ) : null}
 
         <Popup
           show={this.filterListShow}

src/views/shop-mall/modal/goods-filter-list/index.tsx

@@ -26,7 +26,7 @@ export default defineComponent({
       type: Function,
       default: (item: any) => {}
     },
-    cateGoryId:{
+    cateGoryId: {
       type: Number,
       default: 0
     }
@@ -63,8 +63,9 @@ export default defineComponent({
         this.productCategorySmallVoList = productCategorySmallVoList
 
         if (this.cateGoryId) {
-          let i = productCategorySmallVoList.findIndex(n => n.id == this.cateGoryId)
-          console.log(i)
+          let i = productCategorySmallVoList.findIndex(
+            n => n.id == this.cateGoryId
+          )
           this.params.productCategorySmallVoList = i > -1 ? i : null
         }
       } catch {