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

import { Popup, Col, Row, Icon, Tag, Sticky } from 'vant'
import { defineComponent } from 'vue'
import TabList from '../components/tab-list'
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'
export default defineComponent({
  name: 'goods-list',
  data() {
    const query = this.$route.query
    return {
      typeId: 0,
      filterActive: 0,
      filterListShow: false,
      productCategory: {
        name: query.tag || '',
        id: Number(query.id) || 0
      },
      productAttributeCategory: {
        name: '',
        id: 0
      },
      brand: {
        name: '',
        id: 0
      },
      keyword: '' as any,
      autofocus: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.input === 'focus') {
        let input: HTMLInputElement = document.querySelector(
          '.van-field__control'
        ) as HTMLInputElement
        input.focus()
      }
    })
  },
  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()
    },
    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 (goodsFilter) {
        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()
    },
    searchBtn(keyword?: string) {
      this.keyword = keyword
      this.$nextTick(() => {
        this.onSearch()
      })
    }
  },
  render() {
    return (
      <div>
        <Sticky>
          <ColSearch modelValue={this.keyword} onSearch={this.searchBtn} />
          <Row class={styles['filter-top']} align="center">
            <Col
              span={6}
              class={this.filterActive === 0 ? styles.active : ''}
              onClick={() => this.onFilter(0)}
            >
              综合排序
            </Col>
            <Col
              span={6}
              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={12}
                />
                <Icon
                  class={[
                    styles.iconSort,
                    this.filterActive === 4 ? [styles['icon-active']] : ''
                  ]}
                  style={{ transform: 'rotate(90deg)' }}
                  name="play"
                  size={12}
                />
              </div>
            </Col>
            <Col
              span={6}
              class={this.filterActive === 2 ? styles.active : ''}
              onClick={() => this.onFilter(2)}
            >
              销量
            </Col>
            <Col
              span={6}
              class={styles.filterBtn}
              onClick={() => (this.filterListShow = true)}
            >
              筛选
              <Icon name={iconFilter} size={18} />
            </Col>
          </Row>
        </Sticky>

        <div class={styles.filterTagWrap}>
          {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
          ref="tabList"
          typeId={Number(this.productCategory.id)}
          productAttributeCategoryId={this.productAttributeCategory.id}
          brandId={this.brand.id}
          sort={this.filterActive}
          keyword={this.keyword}
        />

        <Popup
          show={this.filterListShow}
          closeable
          position="bottom"
          round
          onClose={() => {
            this.filterListShow = false
          }}
        >
          <GoodsFilterList
            cateGoryId={this.productCategory.id}
            ref="goodsFilter"
            setFilter={this.setFilter}
          />
        </Popup>
      </div>
    )
  }
})