karamay_wx/pages/collection/index.js

// pages/collection/index.js
const { museumApi } = require('../../utils/api.js');
const { navigateToWebview, urlImg } = require('../../utils/util.js');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    artifactList: [], // 收藏列表
    loading: false, // 加载状态
    hasMore: true, // 是否还有更多数据
    searchText: '', // 搜索文本
    activeCategory: 'all', // 当前激活的分类
    selectedType: 0, // 当前选中的类型：0-全部，1-平面纸质类，2-棉麻丝绸类，3-专业器物类
    pageNum: 1, // 当前页码
    pageSize: 10, // 每页数量
    categories: [
      { id: '1', name: '棉麻丝绸' },
      { id: '2', name: '铁器、其他金属器' },
      { id: '3', name: '文物、宣传品' },
      { id: '4', name: '其他' },
    ],
    urlImg: urlImg
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.initData();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3,
        isShowTabar: true
      })
    }
  },

  /**
   * 初始化数据
   */
  async initData() {
    await this.getCollectionList(true);
  },

  /**
   * 获取收藏列表
   */
  async getCollectionList(reset = false) {
    if (this.data.loading) return;
    
    this.setData({ loading: true });
    
    try {
      const params = {
        pageNum: reset ? 1 : this.data.pageNum,
        pageSize: this.data.pageSize,
        type: this.data.selectedType || undefined,
        title: this.data.searchText || undefined
      };
      
      const res = await museumApi.getArtifactList(params);
      if (res.records) {
        const newList = res.records || [];
        const artifactList = reset ? newList : [...this.data.artifactList, ...newList];
        const hasMore = newList.length === this.data.pageSize;
        this.setData({
          artifactList,
          hasMore,
          pageNum: reset ? 2 : this.data.pageNum + 1
        });
      }
    } catch (error) {
      wx.showToast({
        title: '获取数据失败',
        icon: 'none'
      });
    } finally {
      this.setData({ loading: false });
      wx.stopPullDownRefresh();
    }
  },

  /**
   * 处理分类选择
   */
  async selectCategory(e) {
    const { type } = e.currentTarget.dataset;
    const typeId = type === 'all' ? 0 : parseInt(type);
    
    this.setData({
      artifactList: [],
      activeCategory: type,
      selectedType: typeId,
      pageNum: 1
    });
    
    await this.getCollectionList(true);
  },

  /**
   * 处理搜索输入
   */
  onSearchInput(e) {
    this.setData({ searchText: e.detail.value });
  },

  /**
   * 处理搜索
   */
  async onSearch() {
    this.setData({ pageNum: 1 });
    await this.getCollectionList(true);
  },

  /**
   * 清空搜索
   */
  async onSearchClear() {
    this.setData({ 
      searchText: '',
      pageNum: 1 
    });
    await this.getCollectionList(true);
  },

  /**
   * 跳转到收藏详情页
   */
  goCollectDetail(e) {
    const { item } = e.currentTarget.dataset;
    const url = `/collectDetail?id=${item.artifactId}&isFrom=weixin`;
    navigateToWebview(url);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.getCollectionList(true);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.hasMore && !this.data.loading) {
      this.getCollectionList();
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return {
      title: '克拉玛依博物馆 - 典藏',
      path: '/pages/collection/index'
    };
  },

  /**
   * 用户点击右上角分享到朋友圈
   */
  onShareTimeline() {
    return {
      title: '克拉玛依博物馆 - 珍贵典藏文物展示',
      query: '',
      imageUrl: '' // 可以设置自定义分享图片
    };
  }
})