test/pages/category/index.js

// pages/category/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 当前选中的分类
    activeCategory: 0,
    
    // 分类列表
    categories: [
      { id: 0, name: '全部' },
      { id: 1, name: '面部护理' },
      { id: 2, name: '身体按摩' },
      { id: 3, name: '美甲服务' },
      { id: 4, name: '美发造型' },
      { id: 5, name: '眼部护理' },
      { id: 6, name: '身体护理' },
      { id: 7, name: '特色项目' }
    ],
    
    // 服务列表
    serviceList: [
      // 面部护理
      { 
        id: 101, 
        categoryId: 1, 
        name: '深层清洁面部护理', 
        desc: '去除老化角质，深层清洁毛孔', 
        price: 298, 
        originalPrice: 398,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 256
      },
      { 
        id: 102, 
        categoryId: 1, 
        name: '补水保湿面膜', 
        desc: '深层补水，改善干燥缺水', 
        price: 198, 
        originalPrice: 258,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 312
      },
      { 
        id: 103, 
        categoryId: 1, 
        name: '美白淡斑护理', 
        desc: '改善肤色不均，淡化色斑', 
        price: 358, 
        originalPrice: 458,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 186
      },
      
      // 身体按摩
      { 
        id: 201, 
        categoryId: 2, 
        name: '精油SPA按摩', 
        desc: '舒缓压力，放松身心', 
        price: 398, 
        originalPrice: 498,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 198
      },
      { 
        id: 202, 
        categoryId: 2, 
        name: '中式推拿', 
        desc: '疏通经络，缓解疲劳', 
        price: 328, 
        originalPrice: 428,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 156
      },
      
      // 美甲服务
      { 
        id: 301, 
        categoryId: 3, 
        name: '日式美甲套餐', 
        desc: '多款式选择，持久显色', 
        price: 158, 
        originalPrice: 258,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 312
      },
      { 
        id: 302, 
        categoryId: 3, 
        name: '手部护理+美甲', 
        desc: '滋润双手，美甲造型', 
        price: 218, 
        originalPrice: 298,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 178
      },
      
      // 美发造型
      { 
        id: 401, 
        categoryId: 4, 
        name: '剪发+造型', 
        desc: '专业设计，打造个性发型', 
        price: 128, 
        originalPrice: 168,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 345
      },
      { 
        id: 402, 
        categoryId: 4, 
        name: '烫发套餐', 
        desc: '时尚卷发，塑造立体感', 
        price: 598, 
        originalPrice: 698,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 132
      }
    ],
    
    // 当前显示的服务列表
    currentServices: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 如果有传入的分类ID，则设置为当前选中分类
    if (options && options.categoryId) {
      this.setData({
        activeCategory: parseInt(options.categoryId)
      });
    }
    
    // 初始化服务列表
    this.filterServices();
  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().init();
    }
  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

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

  },
  
  /**
   * 切换分类
   */
  switchCategory(e) {
    const categoryId = e.currentTarget.dataset.id;
    this.setData({
      activeCategory: categoryId
    });
    
    // 过滤服务列表
    this.filterServices();
  },
  
  /**
   * 根据当前选中的分类过滤服务列表
   */
  filterServices() {
    const { activeCategory, serviceList } = this.data;
    
    // 如果是"全部"分类，则显示所有服务
    if (activeCategory === 0) {
      this.setData({
        currentServices: serviceList
      });
      return;
    }
    
    // 否则，根据分类ID过滤服务
    const filteredServices = serviceList.filter(service => service.categoryId === activeCategory);
    this.setData({
      currentServices: filteredServices
    });
  },
  
  /**
   * 跳转到服务详情页
   */
  goToServiceDetail(e) {
    const serviceId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/appointment/index?serviceId=${serviceId}`
    });
  }
})