wxhuanart/miniprogram/pages/goods/list/index.ts

import GoodApi from '../../../services/good'
import Navi from '../../../utils/navi'

const tabList = [
  {
    label: '商品',
    value: 'product',
  },
  {
    label: '灵感',
    value: 'inspire',
  },
]

const searchOptions = {
  option1: [
    {
      label: '全部商品',
      value: 'all',
    },
    {
      label: '新款商品',
      value: 'news',
    },
    {
      label: '收藏商品',
      value: 'likes',
    },
  ],
  option2: [
    {
      label: '默认排序',
      value: 'default',
    },
    {
      label: '综合排序',
      value: 'avarage',
    },
    {
      label: '销量排序',
      value: 'sell',
    },
    {
      label: '最新上架',
      value: 'newest',
    },
  ],
  value1: 'all',
  value2: 'default',
}

// pages/goods/list/index.ts
Page<
  {
    isScene: boolean
    borderlist: WxOptionLongExtraDto[]
    filterOptions: WxGetFilterOptionOutputDto[]
    tabList: typeof tabList
    searchOptions: typeof searchOptions
    filterVisible: boolean
    tagvalues: Record<string, any[]>
    albumInput: WxGetAlbumInput
    albumTotal: number
    albums: WxCateAlbumItemDto[]
    loadMoreStatus: number
    view: 'large' | 'list'
  },
  {
    tempValues: Record<string, any[]>
    onBorderChange(
      e: WechatMiniprogram.CustomEvent<{ idx: number; item: WxOptionLongExtraDto }>,
    ): void
    onGoodChange(e: WechatMiniprogram.CustomEvent<{ label: string; value: string }>): void
    onSellChange(e: WechatMiniprogram.CustomEvent<{ label: string; value: string }>): void
    onFilterClick(): void
    onFilterClose(): void
    onMove(): void
    onSearchReset(): void
    onSearchConfirm(): void
    load(rest?: boolean): void
    loadBorder(): void
    loadOptions(): void
    onChangeView(): void
  }
>({
  /**
   * 页面的初始数据
   */
  data: {
    isScene: false,
    borderlist: [],
    filterOptions: [],
    tabList,
    searchOptions,
    filterVisible: false,
    tagvalues: {},
    albumInput: {
      sortkey: 'default',
      cateId: -1,
      skipCount: 0,
      maxResultCount: 10,
    },
    albumTotal: 0,
    albums: [],
    loadMoreStatus: 0,
    view: 'list',
  },

  load(rest = false) {
    this.setData({
      loadMoreStatus: 1,
    })

    const api = this.data.isScene ? GoodApi.GetCateScene : GoodApi.GetCateAlbum

    api(this.data.albumInput).then((rsp) => {
      if (rsp.result) {
        const result = rsp.result as any
        const { items = [] } = result
        const nowItems = rest ? items : this.data.albums.concat(items)
        this.setData({
          albums: nowItems as any,
          albumTotal: result.totalCount || 0,
          loadMoreStatus: nowItems.length === result.totalCount ? 2 : 0,
        })
        if (result.name && result.name.length > 0) {
          wx.setNavigationBarTitle({
            title: `${result.name}挂画`,
          })
        }
      }
    })
  },

  loadBorder() {
    GoodApi.GetBorderList().then((rsp) => {
      if (rsp.result && rsp.result.length > 0) {
        this.setData({
          borderlist: [
            {
              label: '全部',
              value: -1,
              extra: '/assets/cate/all.png',
            } as WxOptionLongExtraDto,
          ].concat(rsp.result),
        })
      }
    })
  },

  loadOptions() {
    GoodApi.GetFilterOption().then((rsp) => {
      if (rsp.result && rsp.result.length > 0) {
        this.setData({
          filterOptions: rsp.result,
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(query: Record<string, string>) {
    const { cate = -1 } = query

    this.setData(
      {
        albumInput: {
          ...this.data.albumInput,
          cateId: Number(cate),
          borderId: -1,
        },
      },
      () => {
        this.loadBorder()
        this.loadOptions()
        this.load(true)
      },
    )
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // this.getTabBar().init()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    if (this.data.albums.length < this.data.albumTotal) {
      this.setData(
        {
          albumInput: {
            ...this.data.albumInput,
            skipCount: 0,
          },
        },
        () => {
          this.load(true)
        },
      )
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log(this.data.albums.length, this.data.albumTotal)
    if (this.data.loadMoreStatus === 0 && this.data.albums.length < this.data.albumTotal) {
      this.setData(
        {
          albumInput: {
            ...this.data.albumInput,
            skipCount: this.data.albumInput.skipCount + 10,
          },
        },
        () => {
          this.load()
        },
      )
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},

  onBorderChange(e) {
    const { item } = e.detail
    this.setData(
      {
        albumInput: {
          ...this.data.albumInput,
          borderId: item.value,
          skipCount: 0,
        },
      },
      () => {
        this.load(true)
      },
    )
  },

  onGoodChange(e) {
    const { value } = e.detail
    console.log(value)
  },

  onSellChange(e) {
    const { value } = e.detail
    this.setData(
      {
        'albumInput.sortkey': value,
      },
      () => {
        this.load(true)
      },
    )
  },

  onFilterClick() {
    this.setData({
      filterVisible: true,
    })
  },

  onChangeView() {
    this.setData({
      view: this.data.view === 'list' ? 'large' : 'list',
    })
  },

  onFilterClose() {
    this.setData({
      tagvalues: this.data.tagvalues,
      filterVisible: false,
    })
  },

  onMove() {
    return false
  },

  //@ts-ignore
  onFilterValueChanged(v: WechatMiniprogram.CustomEvent<{ value: Record<string, any[]> }>) {
    this.tempValues = v.detail.value
  },

  onSearchReset() {
    this.setData({
      tagvalues: {},
    })
    this.tempValues = {}
  },

  onSearchConfirm() {
    let tags: number[] = []
    const tagvalues = this.tempValues
    Object.keys(tagvalues).forEach((s) => {
      if (tagvalues[s] && tagvalues[s].length > 0) {
        tags = tags.concat(tagvalues[s])
      }
    })

    this.setData(
      {
        tagvalues: this.tempValues,
        filterVisible: false,
        albumInput: {
          ...this.data.albumInput,
          tags: tags.join(','),
        },
      },
      () => {
        this.load(true)
      },
    )
    console.log(this.tempValues)
  },

  gotoGoodsDetail(e: WechatMiniprogram.CustomEvent<{ goods: WxCateAlbumItemDto; index: number }>) {
    const { goods } = e.detail
    Navi.navigateTo({
      url: '/pages/goods/detail/index?id=' + goods.id + '&cateid=' + this.data.albumInput.cateId,
    })
    console.log('click', e)
  },

  gosearch() {
    console.log('navi')
    wx.navigateTo({
      url: '/pages/search/search',
    })
  },

  research(keyword: string) {
    this.setData(
      {
        albumInput: {
          ...this.data.albumInput,
          filterText: keyword,
          skipCount: 0,
        },
      },
      () => {
        this.load(true)
      },
    )
  },

  tabChangeHandle(e: WechatMiniprogram.CustomEvent<{ label: string; value: string }>) {
    this.setData(
      {
        isScene: e.detail.label === '灵感',
      },
      () => {
        this.load(true)
      },
    )
  },
})