lingxiao/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2025-09-18 12:39:54 +08:00
parent b2e8461792
commit 6c6fe3d0d6
1898 changed files with 30918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
pages/category/index.js Normal file
View File

@@ -0,0 +1,237 @@
// 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}`
});
}
})

7
pages/category/index.json Normal file
View File

@@ -0,0 +1,7 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"t-button": "tdesign-miniprogram/button/button",
"t-empty": "tdesign-miniprogram/empty/empty"
}
}

58
pages/category/index.wxml Normal file
View File

@@ -0,0 +1,58 @@
<!--pages/category/index.wxml-->
<navigation-bar title="服务分类" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="category-container">
<!-- 左侧分类导航 -->
<scroll-view scroll-y class="category-sidebar">
<view
wx:for="{{categories}}"
wx:key="id"
class="category-item {{activeCategory === item.id ? 'active' : ''}}"
bindtap="switchCategory"
data-id="{{item.id}}"
>
{{item.name}}
</view>
</scroll-view>
<!-- 右侧服务列表 -->
<scroll-view scroll-y class="service-content">
<!-- 分类标题 -->
<view class="category-title">
{{categories[activeCategory].name}}
<text class="category-count">{{currentServices.length}}个项目</text>
</view>
<!-- 服务列表 -->
<view class="service-list" wx:if="{{currentServices.length > 0}}">
<view
wx:for="{{currentServices}}"
wx:key="id"
class="service-card"
bindtap="goToServiceDetail"
data-id="{{item.id}}"
>
<image src="{{item.image}}" mode="aspectFill" class="service-image"></image>
<view class="service-info">
<view class="service-name">{{item.name}}</view>
<view class="service-desc">{{item.desc}}</view>
<view class="service-price-row">
<view class="service-price">
<text class="price">¥{{item.price}}</text>
<text class="original-price">¥{{item.originalPrice}}</text>
</view>
<view class="service-sales">已售{{item.sales}}</view>
</view>
<view class="service-btn">
<t-button theme="primary" size="small">立即预约</t-button>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" wx:if="{{currentServices.length === 0}}">
<t-empty icon="info-circle-filled" description="暂无相关服务" />
</view>
</scroll-view>
</view>

146
pages/category/index.wxss Normal file
View File

@@ -0,0 +1,146 @@
/* pages/category/index.wxss */
.category-container {
display: flex;
height: calc(100vh - 280rpx);
background-color: #fff;
/* padding-bottom: 10rpx !important; */
/* box-sizing: border-box !important; */
}
/* 左侧分类导航样式 */
.category-sidebar {
width: 180rpx;
height: 100%;
background-color: #f8f8f8;
}
.category-item {
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color: #666;
position: relative;
}
.category-item.active {
color: #FF5F15;
font-weight: 500;
background-color: #fff;
}
.category-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8rpx;
height: 32rpx;
background-color: #FF5F15;
border-radius: 4rpx;
}
/* 右侧服务列表样式 */
.service-content {
flex: 1;
height: 100%;
padding: 0 30rpx;
}
.category-title {
padding: 30rpx 0;
font-size: 32rpx;
font-weight: bold;
color: #333;
border-bottom: 1rpx solid #f0f0f0;
}
.category-count {
font-size: 24rpx;
color: #999;
font-weight: normal;
margin-left: 10rpx;
}
/* 服务卡片样式 */
.service-list {
padding: 20rpx 0;
}
.service-card {
display: flex;
padding: 30rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.service-image {
width: 200rpx;
height: 200rpx;
border-radius: 12rpx;
margin-right: 20rpx;
}
.service-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.service-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
margin-bottom: 10rpx;
}
.service-desc {
font-size: 26rpx;
color: #999;
margin-bottom: 20rpx;
}
.service-price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
}
.service-price {
display: flex;
align-items: baseline;
}
.price {
font-size: 34rpx;
font-weight: bold;
color: #FF5F15;
margin-right: 10rpx;
}
.original-price {
font-size: 24rpx;
color: #999;
text-decoration: line-through;
}
.service-sales {
font-size: 24rpx;
color: #999;
}
.service-btn {
display: flex;
justify-content: flex-end;
}
/* 空状态样式 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 60%;
}