// 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}` }); } })