Merge branch 'master' of http://git.dayaedu.com/lex/h5-colexiu

src/views/shop-mall/components/tab-list/index.tsx

@@ -23,6 +23,10 @@ export default defineComponent({
     brandId: {
       type: Number,
       default: 0
+    },
+    sort: {
+      type: Number,
+      defalut: 0
     }
   },
   data() {
@@ -35,6 +39,7 @@ export default defineComponent({
         productCategoryId: null as any,
         productAttributeCategoryId: null as any,
         brandId: null as any,
+        sort: null as any, // 1->按新品；2->按销量；3->价格从低到高；4->价格从高到低
         pageNum: 1,
         pageSize: 20
       },
@@ -47,19 +52,25 @@ export default defineComponent({
   },
   methods: {
     onSearch() {
-      this.dataShow = true
       this.loading = false
       this.finished = false
       this.list = []
       this.params.pageNum = 1
-      this.getList()
+      if (!this.dataShow) this.getList() // list组件没有触发, 手动触发获取数据
+      this.dataShow = true
+      
+      // this.getList()
     },
     async getList() {
       try {
         let params = this.params
-        this.typeId && (params.productCategoryId = this.typeId)
-        this.productAttributeCategoryId && (params.productAttributeCategoryId = this.productAttributeCategoryId)
-        this.brandId && (params.brandId = this.brandId)
+        // this.typeId && (params.productCategoryId = this.typeId)
+        params.productCategoryId = this.typeId ? this.typeId : undefined
+        params.productAttributeCategoryId = this.productAttributeCategoryId
+          ? this.productAttributeCategoryId
+          : undefined
+        params.brandId = this.brandId ? this.brandId : undefined
+        params.sort = this.sort ? this.sort : undefined
         const res = await request.post('/api-mall-portal/product/search', {
           data: {
             ...params

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

@@ -35,3 +35,11 @@
   margin-bottom: 8px;
   font-weight: 500;
 }
+.filterSort{
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+  .icon-active{
+    color: var(--van-primary)
+  }
+}

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

@@ -11,19 +11,66 @@ export default defineComponent({
     return {
       typeId: 0,
       filterActive: 0,
-      filterListShow: false
+      filterListShow: false,
+      productCategory: {
+        name: '',
+        id: 0
+      },
+      productAttributeCategory: {
+        name: '',
+        id: 0
+      },
+      brand: {
+        name: '',
+        id: 0
+      }
     }
   },
   methods: {
     onFilter(n: number) {
+      if (this.filterActive === 3 && n === 3) n = 4
+      if (this.filterActive === 4 && n === 3) n = 3
+      if (this.filterActive === n) return
       this.filterActive = n
+      this.onSearch()
     },
-    onFilterClick(params: any) {
-      console.log(params)
+    setFilter({ productCategory, productAttributeCategory, brand }) {
+      this.productCategory = productCategory
+        ? productCategory
+        : { id: 0, name: '' }
+      this.productAttributeCategory = productAttributeCategory
+        ? productAttributeCategory
+        : { id: 0, name: '' }
+      this.brand = brand ? brand : { id: 0, name: '' }
+      // console.log(
+      //   this.productCategory,
+      //   this.productAttributeCategory,
+      //   this.brand
+      // )
+      this.onSearch()
+      this.filterListShow = false
+    },
+
+    onClearTag(key: string) {
+      this[key] = { id: 0, name: '' }
+      let goodsFilter = this.$refs.goodsFilter as any
+      if (key === 'productCategory') {
+        goodsFilter.setParams('productCategorySmallVoList')
+      } else if (key === 'productAttributeCategory') {
+        goodsFilter.setParams('productAttributeCategoryList')
+      } else {
+        goodsFilter.setParams('brandList')
+      }
+      this.$nextTick(() => {
+        this.onSearch()
+      })
+    },
+    onSearch() {
+      let tabList = this.$refs.tabList as any
+      tabList.onSearch()
     }
   },
   render() {
-    const typeId = this.typeId
     return (
       <div>
         <Sticky>
@@ -31,21 +78,39 @@ export default defineComponent({
           <Row class={styles['filter-top']} align="center">
             <Col
               span={6}
-              class={this.filterActive == 0 ? styles.active : ''}
+              class={this.filterActive === 0 ? styles.active : ''}
               onClick={() => this.onFilter(0)}
             >
               综合排序
             </Col>
             <Col
               span={6}
-              class={this.filterActive == 1 ? styles.active : ''}
-              onClick={() => this.onFilter(1)}
+              class={
+                this.filterActive === 3 || this.filterActive === 4
+                  ? styles.active
+                  : ''
+              }
+              onClick={() => this.onFilter(3)}
             >
               价格
+              <div class={styles.filterSort}>
+                <Icon
+                  class={this.filterActive === 3 ? styles['icon-active'] : ''}
+                  style={{ transform: 'rotate(-90deg)' }}
+                  name="play"
+                  size={4}
+                />
+                <Icon
+                  class={this.filterActive === 4 ? styles['icon-active'] : ''}
+                  style={{ transform: 'rotate(90deg)', marginTop: '-5px' }}
+                  name="play"
+                  size={4}
+                />
+              </div>
             </Col>
             <Col
               span={6}
-              class={this.filterActive == 2 ? styles.active : ''}
+              class={this.filterActive === 2 ? styles.active : ''}
               onClick={() => this.onFilter(2)}
             >
               销量
@@ -62,14 +127,48 @@ export default defineComponent({
         </Sticky>
 
         <div class={styles.filterTagWrap}>
-          {[1, 2, 3].map(item => (
-            <Tag class={styles.filterTag} closeable={true}>
-              铜管乐器{item}
+          {this.productCategory.id ? (
+            <Tag
+              class={styles.filterTag}
+              closeable={true}
+              onClose={() => this.onClearTag('productCategory')}
+            >
+              {this.productCategory.name}
+            </Tag>
+          ) : (
+            ''
+          )}
+          {this.productAttributeCategory.id ? (
+            <Tag
+              class={styles.filterTag}
+              closeable={true}
+              onClose={() => this.onClearTag('productAttributeCategory')}
+            >
+              {this.productAttributeCategory.name}
+            </Tag>
+          ) : (
+            ''
+          )}
+          {this.brand.id ? (
+            <Tag
+              class={styles.filterTag}
+              closeable={true}
+              onClose={() => this.onClearTag('brand')}
+            >
+              {this.brand.name}
             </Tag>
-          ))}
+          ) : (
+            ''
+          )}
         </div>
 
-        <TabList typeId={typeId} />
+        <TabList
+          ref="tabList"
+          typeId={this.productCategory.id}
+          productAttributeCategoryId={this.productAttributeCategory.id}
+          brandId={this.brand.id}
+          sort={this.filterActive}
+        />
 
         <Popup
           show={this.filterListShow}
@@ -80,7 +179,7 @@ export default defineComponent({
             this.filterListShow = false
           }}
         >
-          <GoodsFilterList onFilterClick={this.onFilterClick} />
+          <GoodsFilterList ref="goodsFilter" setFilter={this.setFilter} />
         </Popup>
       </div>
     )

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

@@ -14,15 +14,15 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 const init = () => {
   return {
-    productCategorySmallVoList: 0,
-    productAttributeCategoryList: 0,
-    brandList: 0
+    productCategorySmallVoList: null as any,
+    productAttributeCategoryList: null as any,
+    brandList: null as any
   }
 }
 export default defineComponent({
   name: 'goods-filter-list',
   props: {
-    onFilterClick: {
+    setFilter: {
       type: Function,
       default: (item: any) => {}
     }
@@ -61,6 +61,24 @@ export default defineComponent({
         this.dataShow = false
       }
       this.loading = false
+    },
+    // 筛选条件
+    onFilterClick() {
+      this.setFilter({
+        productCategory:
+          this.productCategorySmallVoList[
+            this.params.productCategorySmallVoList
+          ],
+        productAttributeCategory:
+          this.productAttributeCategoryList[
+            this.params.productAttributeCategoryList
+          ],
+        brand: this.brandList[this.params.brandList]
+      })
+    },
+
+    setParams(key: string) {
+      this.params[key] = null
     }
   },
   render() {
@@ -81,9 +99,9 @@ export default defineComponent({
                   <div>
                     {key === 'productCategorySmallVoList'
                       ? '商品分类'
-                      : key === 'brandList'
-                      ? '品牌'
-                      : '商品类型'}
+                      : key === 'productAttributeCategoryList'
+                      ? '商品类型'
+                      : '品牌'}
                   </div>
                 ),
                 label: () => (
@@ -92,13 +110,13 @@ export default defineComponent({
                     modelValue={this.params[key]}
                     onUpdate:modelValue={val => (this.params[key] = val)}
                   >
-                    {this[key].map((item: any) => {
-                      const isActive = item.id === this.params[key]
+                    {this[key].map((item: any, index: number) => {
+                      const isActive = index === this.params[key]
                       const type = isActive ? 'primary' : 'default'
                       return (
                         <Radio
                           class={styles.radio}
-                          name={item.id}
+                          name={index}
                           onClick={() => {}}
                         >
                           <Tag size="large" type={type}>
@@ -125,7 +143,7 @@ export default defineComponent({
               round
               type="primary"
               style={{ marginLeft: '8px' }}
-              onClick={() => this.onFilterClick(this.params)}
+              onClick={() => this.onFilterClick()}
             >
               确认
             </Button>