health-front/pages_order/product/productList.vue

<template>
  <view>
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />

    <!-- 搜索栏 -->
    <view class="search">
      <uv-search 
        v-model="keyword"
        placeholder="请输入要查询的内容"
        placeholderColor="#C6C6C6"
        searchIconColor="#8B8B8B"
        :searchIconSize="40" 
        :inputStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.4,
          'padding': '12rpx 0',
        }"
        bgColor="#fff" 
        :showAction="false"
        @search="search"
      ></uv-search>
    </view>
    <view class="content">
      <productCustomView :type="queryParams.type" :list="list" @categoryChange="onCategoryChange"></productCustomView>
    </view>
  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  import productCustomView from './productCustomView.vue'

  export default {
		mixins: [mixinsList],
    components: {
      productCustomView,
    },
    data() {
      return {
        title: '',
				keyword: '',
				mixinsListApi: 'getProductList',
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          type: 0, // 产品类型（0营养剂，1预约，2课程）
        },
      }
    },
    onLoad(arg) {
      const { title, type, search } = arg

      if (title) {
        this.title = title
      }

      this.queryParams.type = type

      if (search) {
        this.keyword = search
      }
      
      this.search()
    },
    methods: {
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10

        if (this.keyword) {
          this.queryParams.keyword = this.keyword
        } else {
          delete this.queryParams.keyword
        }

        this.getData()
      },
      onCategoryChange(e) {
        const { classId } = e || {}

        if (classId) {
          this.queryParams.classId = classId
        } else {
          delete this.queryParams.classId
        }
        
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.getData()

      },
    },
  }
</script>

<style scoped lang="scss">
  @import './styles/tab.scss';

  .content {
    margin-top: 24rpx;
  }
</style>