micro_mall_xcx/pages/shop/all-goods/index.js

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

const image = 'https://tdesign.gtimg.com/miniprogram/images/example2.png';
const items = new Array(12).fill({
  label: '标题文字',
  image
}, 0, 12);

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

Page({
  data: {
    goodsList: [],
    layout: 0,
    priceSorts: '',
    soldSorts: '',
    overall: 1,
    show: false,
    minVal: '',
    maxVal: '',
    filter: initFilters,
    hasLoaded: false,
    loadMoreStatus: 0,
    loading: true,
    shopGuid: 0,

    value: 'category',
    list: [{
        value: 'all',
        label: '全部',
        icon: 'home'
      },
      {
        value: 'category',
        label: '分类',
        icon: 'app'
      },
    ],

    sideBarIndex: 1,
    scrollTop: 0,
    categories: [{
        label: '选项一',
        title: '标题一',
        icon: 'app',
        badgeProps: {},
        items,
      },
      {
        label: '选项二',
        title: '标题二',
        icon: 'app',
        badgeProps: {
          dot: true,
        },
        items: items.slice(0, 9),
      },
      {
        label: '选项三',
        title: '标题三',
        icon: 'app',
        badgeProps: {},
        items: items.slice(0, 9),
      },
      {
        label: '选项四',
        title: '标题四',
        icon: 'app',
        badgeProps: {
          count: 6,
        },
        items: items.slice(0, 6),
      },
      {
        label: '选项五',
        title: '标题五',
        icon: 'app',
        badgeProps: {},
        items: items.slice(0, 3),
      },
    ],
  },

  offsetTopList: [],
  pageNum: 1,
  pageSize: 6,
  total: 0,

  handleFilterChange(e) {
    const {
      layout,
      overall,
      priceSorts,
      soldSorts
    } = e.detail;
    this.pageNum = 1;
    this.setData({
      layout,
      priceSorts,
      soldSorts,
      overall,
      loadMoreStatus: 0,
    });
    this.init(true);
  },

  generalQueryData(reset = false) {
    const {
      filter,
      keywords,
      minVal,
      maxVal,
      shopGuid,
      priceSorts,
      soldSorts,
      overall
    } = this.data;
    const {
      pageNum,
      pageSize
    } = this;
    // const { priceSorts,soldSorts, overall } = filter;
    const params = {
      goodsSort: 0, // 0 综合，1 价格
      pageNum: 1,
      pageSize: 6,
      shopGuid: shopGuid
      // keyword: keywords,
    };

    if (priceSorts) {
      params.goodsSort = 1;
      params.goodsSortType = priceSorts === 'desc' ? 1 : 0;
    }

    if (soldSorts) {
      params.goodsSort = 2;
      params.goodsSortType = soldSorts === 'desc' ? 1 : 0;
    }
    if (overall) {
      params.goodsSort = 0;
    } else {
      // params.goodsSort = 1;
    }
    console.log(minVal, '最小价格');
    params.minPrice = minVal ? minVal : 0;
    params.maxPrice = maxVal ? maxVal : 0;
    if (reset) return params;
    return {
      ...params,
      pageNum: pageNum + 1,
      pageSize,
    };
  },

  async init(reset = true) {
    const {
      loadMoreStatus,
      goodsList = []
    } = this.data;
    const params = this.generalQueryData(reset);
    if (loadMoreStatus !== 0) return;
    this.setData({
      loadMoreStatus: 1,
      loading: true,
    });
    try {
      const result = await fetchGoodsList(params);
      const code = 'Success';
      const data = result;
      if (code.toUpperCase() === 'SUCCESS') {
        const {
          result,
          totalNum = 0
        } = data;
        if (totalNum === 0 && reset) {
          this.total = totalNum;
          this.setData({
            emptyInfo: {
              tip: '抱歉，未找到相关商品',
            },
            hasLoaded: true,
            loadMoreStatus: 0,
            loading: false,
            goodsList: [],
          });
          return;
        }

        const _goodsList = reset ? result : goodsList.concat(result);
        const _loadMoreStatus = _goodsList.length === totalNum ? 2 : 0;
        this.pageNum = params.pageNum || 1;
        this.total = totalNum;
        this.setData({
          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(query) {
    const {
      shopGuid
    } = query;
    this.setData({
      shopGuid: shopGuid,
    });

    this.init(true);

    const query2 = wx.createSelectorQuery().in(this);
    const {
      sideBarIndex
    } = this.data;

    query2
      .selectAll('.title')
      .boundingClientRect((rects) => {
        this.offsetTopList = rects.map((item) => item.top);
        console.log(this.offsetTopList,'123123123');
        this.setData({
          scrollTop: rects[sideBarIndex].top
        });
      })
      .exec();
  },

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

  handleAddCart() {
    Toast({
      context: this,
      selector: '#t-toast',
      message: '点击加购',
    });
  },

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

  gotoGoodsDetail(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() {
    const {
      minVal,
      maxVal
    } = this.data;
    let message = '';
    if (minVal && !maxVal) {
      message = `价格最小是${minVal}`;
    } else if (!minVal && maxVal) {
      message = `价格范围是0-${minVal}`;
    } else if (minVal && maxVal && minVal <= maxVal) {
      message = `价格范围${minVal}-${this.data.maxVal}`;
    } else {
      message = '请输入正确范围';
    }
    if (message) {
      Toast({
        context: this,
        selector: '#t-toast',
        message,
      });
    }
    this.pageNum = 1;
    this.setData({
        show: false,
        // minVal: '',
        // goodsList: [],
        loadMoreStatus: 0,
        // maxVal: '',
      },
      () => {
        this.init();
      },
    );
  },

  onChange(e) {
    this.setData({
      value: e.detail.value,
    });
  },


  // 商品分类
  onSideBarChange(e) {
    const {
      value
    } = e.detail;
    this.setData({
      sideBarIndex: value,
      scrollTop: this.offsetTopList[value]
    });
  },
  onScroll(e) {
    const {
      scrollTop
    } = e.detail;
    const threshold = 50; // 下一个标题与顶部的距离

    if (scrollTop < threshold) {
      this.setData({
        sideBarIndex: 0
      });
      return;
    }

    const index = this.offsetTopList.findIndex((top) => top > scrollTop && top - scrollTop <= threshold);

    if (index > -1) {
      this.setData({
        sideBarIndex: index
      });
    }
  },

});