237 lines
5.0 KiB
JavaScript
237 lines
5.0 KiB
JavaScript
// 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}`
|
||
});
|
||
}
|
||
}) |