code-bang/frontend/miniapp/pages/goods/list/index.js

import { fetchGoodsList } from '../../../services/good/fetchGoodsList';
import { getCategoryList } from '../../../services/good/fetchCategoryList';
import Toast from 'tdesign-miniprogram/toast/index';

const initFilters = {
  overall: 1,
  sorts: '',
  layout: 0,
};

Page({
  data: {
    goodsList: [],
    layout: 0,
    sorts: '',
    overall: 1,
    show: false,
    minVal: '',
    maxVal: '',
    keywords: '',
    page: 1,
    pageSize: 10,
    total: 0,
    tabValue: 0,
    filter: initFilters,
    hasLoaded: false,
    loadMoreStatus: 0,
    loading: true,
    tabList: [],
  },

  handleFilterChange(e) {
    const { layout, overall, sorts } = e.detail;
    this.setData({
      layout,
      sorts,
      page: 1,
      overall,
      loadMoreStatus: 0,
    });
    this.loadGoodsList(true);
  },
  tabChangeHandle(e) {
    const tabValue = e.detail.value;
    this.setData({
      tabValue,
    });
    this.loadGoodsList(true);
  },
  //搜索
  onChangeInput(e) {
    const { value } = e.detail;
    this.setData({
      keywords: value
    });
    if (!value) {
      this.loadGoodsList(true);
    }
  },
  onChangeSearch(e) {
    const { value } = e.detail;
    if (value !== undefined) {
      this.setData({
        keywords: value
      });
    }
    console.log(e)
    console.log(value)
    this.loadGoodsList(true);
  },
  navToSearchPage() {
    wx.navigateTo({
      url: '/pages/goods/search/index'
    });
  },

  async init() {
    try {
      const result = await getCategoryList();
      this.setData({
        tabList: result,
      });
    } catch (error) {
      console.error('err:', error);
    }
  },

  // 产品列表
  async loadGoodsList(reset = false) {
    try {
      const { loadMoreStatus, goodsList = [], page, pageSize, keywords, tabValue } = this.data;
      const params = {
        page: reset ? 1 : page,
        categoryId: tabValue,
        pageSize,
        keywords,
      };
      if (loadMoreStatus !== 0 && !reset) return;
      this.setData({
        loadMoreStatus: 1,
        loading: true,
      });
      const result = await fetchGoodsList(params);
      console.log('fetchGoodsList', result)
      const data = result.data;
      if (result.code == 1) {
        const { spuList, totalCount = 0 } = data;
        if (totalCount === 0 && reset) {
          this.setData({
            emptyInfo: {
              tip: '抱歉，未找到相关商品',
            },
            total: totalCount,
            hasLoaded: true,
            loadMoreStatus: 0,
            loading: false,
            goodsList: [],
          });
          return;
        }
        const _goodsList = reset ? spuList : goodsList.concat(spuList);
        const _loadMoreStatus = _goodsList.length === totalCount ? 2 : 0;
        this.setData({
          total: totalCount,
          page: params.page + 1,
          goodsList: _goodsList,
          loadMoreStatus: _loadMoreStatus,
        });
      } else {
        this.setData({
          loading: false,
        });
        wx.showToast({
          title: '查询失败，请稍候重试',
        });
      }
    } catch (error) {
      this.setData({
        loading: false,
      });
    }
    this.setData({
      hasLoaded: true,
      loading: false,
    });
  },


  onLoad() {
    this.init();
    this.loadGoodsList(true);
  },

  onReachBottom() {
    const { goodsList, total } = this.data;
    if (goodsList.length === total) {
      this.setData({
        loadMoreStatus: 2,
      });
      return;
    }
    this.loadGoodsList(false);
  },

  tagClickHandle() {
    Toast({
      context: this,
      selector: '#t-toast',
      message: '点击标签',
    });
  },

  gotoGoodsDetail(e) {
    console.log(e);
    const { index } = e.detail;
    const { spuId } = this.data.goodsList[index];
    wx.navigateTo({
      url: `/pages/goods/details/index?spuId=${spuId}`,
    });
  },

  showFilterPopup() {
    this.setData({
      show: true,
    });
  },

  showFilterPopupClose() {
    this.setData({
      show: false,
    });
  },

  onMinValAction(e) {
    const { value } = e.detail;
    this.setData({ minVal: value });
  },

  onMaxValAction(e) {
    const { value } = e.detail;
    this.setData({ maxVal: value });
  },

  reset() {
    this.setData({ minVal: '', maxVal: '' });
  },

  confirm() {
    let message = ''
    if (message) {
      Toast({
        context: this,
        selector: '#t-toast',
        message,
      });
    }
    this.setData(
      {
        show: false,
        page: 1,
        goodsList: [],
        loadMoreStatus: 0,
      },
      () => {
        this.loadGoodsList();
      },
    );
  },
});