编辑页面

页面标题
有效期修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>上门按摩 - 用户端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
            line-height: 1.5;
        }
        .app {
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            background: #f5f5f5;
            position: relative;
            padding-bottom: 60px;
        }
        
        /* 页面容器 */
        .page {
            display: none;
            min-height: calc(100vh - 60px);
            background: #f5f5f5;
        }
        .page.active {
            display: block;
        }
        
        /* 头部导航 */
        .header {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            padding: 15px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header h1 {
            font-size: 18px;
            font-weight: 500;
        }
        .header-subtitle {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 2px;
        }
        
        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 430px;
            background: #fff;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 5px 15px;
            cursor: pointer;
            color: #999;
            transition: all 0.3s;
        }
        .tab-item.active {
            color: #e74c3c;
        }
        .tab-item svg {
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }
        .tab-item span {
            font-size: 11px;
        }
        
        /* 卡片样式 */
        .card {
            background: #fff;
            border-radius: 12px;
            margin: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-title .more {
            font-size: 12px;
            color: #999;
        }
        
        /* 首页轮播图 */
        .banner {
            position: relative;
            margin: 12px;
            border-radius: 12px;
            overflow: hidden;
            height: 160px;
        }
        .banner-slider {
            display: flex;
            transition: transform 0.3s;
            height: 100%;
        }
        .banner-slide {
            min-width: 100%;
            height: 160px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
        }
        .banner-slide:nth-child(2){
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .banner-slide:nth-child(3) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .banner-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        .banner-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
        }
        .banner-dot.active {
            background: #fff;
        }
        
        /* 快捷入口 */
        .quick-nav {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            padding: 12px;
        }
        .quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
            color: #fff;
            font-size: 24px;
        }
        .quick-item span {
            font-size: 12px;
            color: #666;
        }
        
        /* 服务分类 */
        .category-scroll {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding: 12px;
            -webkit-overflow-scrolling: touch;
        }
        .category-scroll::-webkit-scrollbar {
            display: none;
        }
        .category-item {
            min-width: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }
        .category-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 8px;
        }
        .category-item span {
            font-size: 12px;
            color: #666;
        }
        
        /* 技师列表 */
        .tech-list {
            padding: 12px;
        }
        .tech-card {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .tech-card:active {
            transform: scale(0.98);
        }
        .tech-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            flex-shrink: 0;
        }
        .tech-info {
            flex: 1;
        }
        .tech-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .tech-tags {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }
        .tech-tag {
            font-size: 10px;
            padding: 2px 6px;
            background: #fff5f5;
            color: #e74c3c;
            border-radius: 4px;
        }
        .tech-stats {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: #999;
        }
        .tech-stats .rating {
            color: #f39c12;
        }
        
        /* 项目列表 */
        .service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 12px;
        }
        .service-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
        }
        .service-img {
            height: 100px;
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        .service-content {
            padding: 10px;
        }
        .service-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .service-price {
            color: #e74c3c;
            font-size: 14px;
        }
        .service-price span {
            font-size: 10px;
        }
        .service-duration {
            font-size: 11px;
            color: #999;
        }
        
        /* 预约流程 */
        .booking-step {
            display: flex;
            align-items: center;
            padding: 16px 12px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
        }
        .step-num {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #e74c3c;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .step-num.completed {
            background: #27ae60;
        }
        .step-content {
            flex: 1;
        }
        .step-title {
            font-size: 15px;
            font-weight: 500;
        }
        .step-desc {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
        }
        .step-arrow {
            color: #ddd;
            margin-left: 10px;
        }
        
        /* 订单状态标签 */
        .status-badge {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
        }
        .status-pending { background: #fff3e0; color: #ff9800; }
        .status-paid { background: #e3f2fd; color: #2196f3; }
        .status-service { background: #fff8e1; color: #ffc107; }
        .status-completed { background: #e8f5e9; color: #4caf50; }
        .status-cancelled { background: #ffebee; color: #f44336; }
        
        /* 评价星级 */
        .stars {
            color: #f39c12;
            font-size: 18px;
            letter-spacing: 2px;
        }
        
        /* 按钮 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }
        .btn-primary {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: #fff;
        }
        .btn-outline {
            background: #fff;
            border: 1px solid #e74c3c;
            color: #e74c3c;
        }
        .btn-block {
            display: block;
            width: 100%;
            padding: 14px;
            border-radius: 25px;
            font-size: 16px;
        }
        .btn:active {
            transform: scale(0.96);
        }
        
        /* 表单元素 */
        .form-item {
            padding: 14px 12px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }
        .form-label {
            width: 80px;
            font-size: 14px;
            color: #666;
        }
        .form-input {
            flex: 1;
            border: none;
            font-size: 14px;
            outline: none;
        }
        .form-item textarea {
            flex: 1;
            border: none;
            font-size: 14px;
            outline: none;
            resize: none;
            height: 80px;
        }
        
        /* 金额显示 */
        .price-display {
            text-align: right;
            flex: 1;
        }
        .price-current {
            color: #e74c3c;
            font-size: 18px;
            font-weight: 600;
        }
        .price-original {
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
        }
        
        /* 会员卡片 */
        .member-card {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 16px;
            padding: 20px;
            margin: 12px;
            color: #fff;
        }
        .member-level {
            font-size: 14px;
            opacity: 0.8;
        }
        .member-balance {
            font-size: 32px;
            font-weight: 600;
            margin: 8px 0;
        }
        .member-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        .member-btn {
            flex: 1;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
        }
        
        /* 二维码展示 */
        .qrcode-area {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin: 12px;
            text-align: center;
        }
        .qrcode-box {
            width: 200px;
            height: 200px;
            background: #f5f5f5;
            margin: 12px auto;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
        }
        
        /* 弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2000;
            display: none;
            align-items: flex-end;
            justify-content: center;
        }
        .modal-overlay.active {
            display: flex;
        }
        .modal-content {
            background: #fff;
            border-radius: 16px 16px 0 0;
            width: 430px;
            max-height: 80vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        .modal-header {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title {
            font-size: 16px;
            font-weight: 600;
        }
        .modal-close {
            font-size: 24px;
            color: #999;
            cursor: pointer;
        }
        .modal-body {
            padding: 16px;
        }
        
        /* 筛选标签 */
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px;
        }
        .filter-tag {
            padding: 8px 16px;
            background: #f5f5f5;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
        }
        .filter-tag.active {
            background: #e74c3c;
            color: #fff;
        }
        
        /* 列表项 */
        .list-item {
            display: flex;
            align-items: center;
            padding: 14px 12px;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .list-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 20px;
        }
        .list-content {
            flex: 1;
        }
        .list-title {
            font-size: 14px;
            font-weight: 500;
        }
        .list-desc {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
        }
        .list-arrow {
            color: #ccc;
            font-size: 18px;
        }
        
        /* 时间选择器 */
        .time-slots {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 12px;
        }
        .time-slot {
            padding: 12px;
            background: #f5f5f5;
            border-radius: 8px;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
        }
        .time-slot.active {
            background: #e74c3c;
            color: #fff;
        }
        .time-slot.disabled {
            background: #eee;
            color: #ccc;
            pointer-events: none;
        }
        
        /* 日历 */
        .calendar {
            background: #fff;
            padding: 12px;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            text-align: center;
        }
        .calendar-day {
            padding: 10px 0;
            font-size: 13px;
        }
        .calendar-day.header {
            color: #999;
            font-size: 12px;
        }
        .calendar-day.selected {
            background: #e74c3c;
            color: #fff;
            border-radius: 50%;
        }
        .calendar-day.disabled {
            color: #ddd;
        }
        
        /* 金额明细 */
        .price-detail {
            padding: 12px;
            background: #fff;
        }
        .price-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 14px;
        }
        .price-row.total {
            border-top: 1px solid #f0f0f0;
            margin-top: 8px;
            padding-top: 12px;
            font-weight: 600;
            font-size: 16px;
        }
        
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.75);
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 3000;
            display: none;
            animation: fadeIn 0.3s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 页面标题 */
        .page-header {
            background: #fff;
            padding: 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        .page-back {
            font-size: 20px;
            margin-right: 12px;
            cursor: pointer;
        }
        .page-title {
            flex: 1;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }
        
        /* 筛选面板 */
        .filter-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1500;
            display: none;
        }
        .filter-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            border-radius: 16px 16px 0 0;
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }
        .filter-section {
            margin-bottom: 20px;
        }
        .filter-section-title {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        
        /* 佣金明细 */
        .commission-item {
            padding: 14px 12px;
            background: #fff;
            border-bottom: 1px solid #f5f5f5;
        }
        .commission-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }
        .commission-amount {
            color: #27ae60;
            font-weight: 600;
        }
        .commission-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .commission-status.settled { background: #e8f5e9; color: #4caf50; }
        .commission-status.pending { background: #fff8e1; color: #ffc107; }
    </style>
</head>
<body>
    <div class="app">
        <!-- 首页 -->
        <div class="page active" id="page-home">
            <div class="header">
                <h1>上门按摩</h1>
                <div class="header-subtitle">专业技師 · 上门服务</div>
            </div>
            
            <!-- 轮播图 -->
            <div class="banner">
                <div class="banner-slider" id="bannerSlider">
                    <div class="banner-slide">限时特惠 · 首单立减50元</div>
                    <div class="banner-slide">新用户专属福利</div>
                    <div class="banner-slide">热门项目推荐</div>
                </div>
                <div class="banner-dots">
                    <div class="banner-dot active"></div>
                    <div class="banner-dot"></div>
                    <div class="banner-dot"></div>
                </div>
            </div>
            
            <!-- 快捷入口 -->
            <div class="quick-nav">
                <div class="quick-item" onclick="showPage('booking')">
                    <div class="quick-icon" style="background: linear-gradient(135deg, #ff6b6b, #ee5a5a);">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                    </div>
                    <span>立即预约</span>
                </div>
                <div class="quick-item" onclick="showToast('优惠券专区')">
                    <div class="quick-icon" style="background: linear-gradient(135deg, #feca57, #ff9f43);">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
                    </div>
                    <span>优惠专区</span>
                </div>
                <div class="quick-item" onclick="showPage('orders')">
                    <div class="quick-icon" style="background: linear-gradient(135deg, #54a0ff, #2e86de);">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                    </div>
                    <span>我的订单</span>
                </div>
                <div class="quick-item" onclick="showToast('客服中心')">
                    <div class="quick-icon" style="background: linear-gradient(135deg, #5f27cd, #341f97);">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <span>客服中心</span>
                </div>
            </div>
            
            <!-- 服务分类 -->
            <div class="card">
                <div class="card-title">
                    服务项目分类
                    <span class="more" onclick="showPage('services')">查看全部</span>
                </div>
                <div class="category-scroll">
                    <div class="category-item" onclick="showPage('services')">
                        <div class="category-icon" style="background: linear-gradient(135deg, #ffecd2, #fcb69f);">
                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><path d="M18 18c0 2-2 4-4 4h-4c-2 0-4-2-4-4v-2c0-2 1-4 3-4s4 2 4 4"/><path d="M12 10V2"/><circle cx="12" cy="2" r="1"/></svg>
                        </div>
                        <span>推拿按摩</span>
                    </div>
                    <div class="category-item" onclick="showPage('services')">
                        <div class="category-icon" style="background: linear-gradient(135deg, #a8edea, #fed6e3);">
                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                        </div>
                        <span>理疗康复</span>
                    </div>
                    <div class="category-item" onclick="showPage('services')">
                        <div class="category-icon" style="background: linear-gradient(135deg, #d299c2, #fef9d7);">
                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
                        </div>
                        <span>SPA护理</span>
                    </div>
                    <div class="category-item" onclick="showPage('services')">
                        <div class="category-icon" style="background: linear-gradient(135deg, #89f7fe, #66a6ff);">
                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        </div>
                        <span>排酸刮痧</span>
                    </div>
                    <div class="category-item" onclick="showPage('services')">
                        <div class="category-icon" style="background: linear-gradient(135deg, #fddb92, #d1fdff);">
                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
                        </div>
                        <span>足疗保健</span>
                    </div>
                </div>
            </div>
            
            <!-- 热门推荐 -->
            <div class="card">
                <div class="card-title">
                    热门推荐
                    <span class="more" onclick="showPage('services')">更多</span>
                </div>
                <div class="service-grid">
                    <div class="service-card" onclick="showServiceDetail('中式推拿')">
                        <div class="service-img">按</div>
                        <div class="service-content">
                            <div class="service-name">中式推拿全身</div>
                            <div class="service-price">¥<span>198</span><span>/60分钟</span></div>
                            <div class="service-duration">60分钟 · 热门</div>
                        </div>
                    </div>
                    <div class="service-card" onclick="showServiceDetail('泰式SPA')">
                        <div class="service-img">S</div>
                        <div class="service-content">
                            <div class="service-name">泰式SPA全身</div>
                            <div class="service-price">¥<span>298</span><span>/90分钟</span></div>
                            <div class="service-duration">90分钟 · 推荐</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 技师推荐 -->
            <div class="card">
                <div class="card-title">
                    金牌技师
                    <span class="more" onclick="showPage('technician')">查看全部</span>
                </div>
                <div class="tech-list">
                    <div class="tech-card" onclick="showTechDetail('张师傅')">
                        <div class="tech-avatar">张</div>
                        <div class="tech-info">
                            <div class="tech-name">张师傅 <span class="rating">★★★★★</span></div>
                            <div class="tech-tags">
                                <span class="tech-tag">推拿</span>
                                <span class="tech-tag">理疗</span>
                            </div>
                            <div class="tech-stats">
                                <span>从业8年</span>
                                <span>服务1280次</span>
                                <span>¥168起</span>
                            </div>
                        </div>
                    </div>
                    <div class="tech-card" onclick="showTechDetail('李技师')">
                        <div class="tech-avatar">李</div>
                        <div class="tech-info">
                            <div class="tech-name">李技师 <span class="rating">★★★★☆</span></div>
                            <div class="tech-tags">
                                <span class="tech-tag">SPA</span>
                                <span class="tech-tag">足疗</span>
                            </div>
                            <div class="tech-stats">
                                <span>从业5年</span>
                                <span>服务856次</span>
                                <span>¥138起</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 活动公告 -->
            <div class="card">
                <div class="card-title">
                    <span>📢</span> 活动公告
                </div>
                <div style="font-size: 13px; color: #666; line-height: 1.8;">
                    <p style="margin-bottom: 8px;">🎉 新用户首单立减50元，点击领取优惠券</p>
                    <p>🎁 会员日特惠：每周三享受8折优惠</p>
                </div>
            </div>
        </div>
        
        <!-- 技师列表页 -->
        <div class="page" id="page-technician">
            <div class="page-header">
                <div class="page-back" onclick="showPage('home')">←</div>
                <div class="page-title">选择技师</div>
                <div style="width: 30px;" onclick="showToast('搜索技师')">🔍</div>
            </div>
            
            <!-- 筛选栏 -->
            <div class="filter-tags" style="background: #fff;">
                <div class="filter-tag active">综合排序</div>
                <div class="filter-tag">距离最近</div>
                <div class="filter-tag">评分最高</div>
                <div class="filter-tag">价格最低</div>
                <div class="filter-tag" onclick="toggleFilter()">筛选 ▾</div>
            </div>
            
            <div class="tech-list">
                <div class="tech-card" onclick="showTechDetail('张师傅')">
                    <div class="tech-avatar">张</div>
                    <div class="tech-info">
                        <div class="tech-name">张师傅 <span class="rating">★★★★★</span></div>
                        <div class="tech-tags">
                            <span class="tech-tag">推拿</span>
                            <span class="tech-tag">理疗</span>
                        </div>
                        <div class="tech-stats">
                            <span>从业8年</span>
                            <span>服务1280次</span>
                            <span>¥168起</span>
                        </div>
                    </div>
                </div>
                <div class="tech-card" onclick="showTechDetail('李技师')">
                    <div class="tech-avatar">李</div>
                    <div class="tech-info">
                        <div class="tech-name">李技师 <span class="rating">★★★★☆</span></div>
                        <div class="tech-tags">
                            <span class="tech-tag">SPA</span>
                            <span class="tech-tag">足疗</span>
                        </div>
                        <div class="tech-stats">
                            <span>从业5年</span>
                            <span>服务856次</span>
                            <span>¥138起</span>
                        </div>
                    </div>
                </div>
                <div class="tech-card" onclick="showTechDetail('王师傅')">
                    <div class="tech-avatar">王</div>
                    <div class="tech-info">
                        <div class="tech-name">王师傅 <span class="rating">★★★★★</span></div>
                        <div class="tech-tags">
                            <span class="tech-tag">中医推拿</span>
                            <span class="tech-tag">刮痧</span>
                        </div>
                        <div class="tech-stats">
                            <span>从业12年</span>
                            <span>服务2156次</span>
                            <span>¥188起</span>
                        </div>
                    </div>
                </div>
                <div class="tech-card" onclick="showTechDetail('陈技师')">
                    <div class="tech-avatar">陈</div>
                    <div class="tech-info">
                        <div class="tech-name">陈技师 <span class="rating">★★★★☆</span></div>
                        <div class="tech-tags">
                            <span class="tech-tag">泰式按摩</span>
                            <span class="tech-tag">SPA</span>
                        </div>
                        <div class="tech-stats">
                            <span>从业6年</span>
                            <span>服务1023次</span>
                            <span>¥158起</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 技师详情页 -->
        <div class="page" id="page-tech-detail">
            <div class="page-header">
                <div class="page-back" onclick="showPage('technician')">←</div>
                <div class="page-title">技师详情</div>
                <div style="width: 30px;" onclick="collectTech()">⭐</div>
            </div>
            
            <div style="background: #fff; padding: 20px; text-align: center;">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px;">张</div>
                <h2 style="margin: 12px 0 4px;">张师傅</h2>
                <div class="stars">★★★★★</div>
                <div style="color: #999; font-size: 13px; margin-top: 4px;">综合评分 4.9</div>
            </div>
            
            <div class="card">
                <div class="card-title">服务信息</div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5;">
                    <span style="color: #999;">从业年限</span>
                    <span>8年</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5;">
                    <span style="color: #999;">服务人次</span>
                    <span>1280次</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 8px 0;">
                    <span style="color: #999;">起单价</span>
                    <span style="color: #e74c3c;">¥168</span>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">擅长项目</div>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    <span class="tech-tag">推拿按摩</span>
                    <span class="tech-tag">理疗康复</span>
                    <span class="tech-tag">肩颈调理</span>
                    <span class="tech-tag">全身放松</span>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">可预约时间</div>
                <div class="calendar">
                    <div class="calendar-header">
                        <span>◀</span>
                        <span>2026年5月</span>
                        <span>▶</span>
                    </div>
                    <div class="calendar-grid">
                        <div class="calendar-day header">日</div>
                        <div class="calendar-day header">一</div>
                        <div class="calendar-day header">二</div>
                        <div class="calendar-day header">三</div>
                        <div class="calendar-day header">四</div>
                        <div class="calendar-day header">五</div>
                        <div class="calendar-day header">六</div>
                        <div class="calendar-day disabled">13</div>
                        <div class="calendar-day">14</div>
                        <div class="calendar-day selected">15</div>
                        <div class="calendar-day">16</div>
                        <div class="calendar-day">17</div>
                        <div class="calendar-day">18</div>
                        <div class="calendar-day">19</div>
                    </div>
                </div>
                <div class="time-slots">
                    <div class="time-slot">09:00</div>
                    <div class="time-slot">10:00</div>
                    <div class="time-slot active">11:00</div>
                    <div class="time-slot">14:00</div>
                    <div class="time-slot disabled">15:00</div>
                    <div class="time-slot">16:00</div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">用户评价</div>
                <div style="padding: 8px 0; border-bottom: 1px solid #f5f5f5;">
                    <div style="display: flex; justify-content: space-between;">
                        <span>专业度</span>
                        <span class="stars">★★★★★</span>
                    </div>
                </div>
                <div style="padding: 8px 0; border-bottom: 1px solid #f5f5f5;">
                    <div style="display: flex; justify-content: space-between;">
                        <span>服务态度</span>
                        <span class="stars">★★★★★</span>
                    </div>
                </div>
                <div style="padding: 8px 0;">
                    <div style="display: flex; justify-content: space-between;">
                        <span>守时程度</span>
                        <span class="stars">★★★★☆</span>
                    </div>
                </div>
            </div>
            
            <div style="padding: 12px;">
                <div class="btn btn-primary btn-block" onclick="showPage('booking')">立即预约</div>
            </div>
        </div>
        
        <!-- 服务项目页 -->
        <div class="page" id="page-services">
            <div class="page-header">
                <div class="page-back" onclick="showPage('home')">←</div>
                <div class="page-title">服务项目</div>
                <div style="width: 30px;" onclick="showToast('搜索项目')">🔍</div>
            </div>
            
            <!-- 分类Tab -->
            <div style="display: flex; background: #fff; overflow-x: auto; border-bottom: 1px solid #f0f0f0;">
                <div style="padding: 12px 16px; white-space: nowrap; border-bottom: 2px solid #e74c3c; color: #e74c3c;">全部</div>
                <div style="padding: 12px 16px; white-space: nowrap;">推拿按摩</div>
                <div style="padding: 12px 16px; white-space: nowrap;">理疗康复</div>
                <div style="padding: 12px 16px; white-space: nowrap;">SPA护理</div>
                <div style="padding: 12px 16px; white-space: nowrap;">足疗保健</div>
            </div>
            
            <div class="service-grid">
                <div class="service-card" onclick="showServiceDetail('中式推拿')">
                    <div class="service-img">按</div>
                    <div class="service-content">
                        <div class="service-name">中式推拿全身</div>
                        <div class="service-price">¥<span>198</span><span>/60分钟</span></div>
                        <div class="service-duration">60分钟</div>
                    </div>
                </div>
                <div class="service-card" onclick="showServiceDetail('泰式SPA')">
                    <div class="service-img">S</div>
                    <div class="service-content">
                        <div class="service-name">泰式SPA全身</div>
                        <div class="service-price">¥<span>298</span><span>/90分钟</span></div>
                        <div class="service-duration">90分钟</div>
                    </div>
                </div>
                <div class="service-card" onclick="showServiceDetail('肩颈理疗')">
                    <div class="service-img">理</div>
                    <div class="service-content">
                        <div class="service-name">肩颈理疗</div>
                        <div class="service-price">¥<span>168</span><span>/45分钟</span></div>
                        <div class="service-duration">45分钟</div>
                    </div>
                </div>
                <div class="service-card" onclick="showServiceDetail('足疗按摩')">
                    <div class="service-img">足</div>
                    <div class="service-content">
                        <div class="service-name">足疗按摩</div>
                        <div class="service-price">¥<span>128</span><span>/40分钟</span></div>
                        <div class="service-duration">40分钟</div>
                    </div>
                </div>
                <div class="service-card" onclick="showServiceDetail('刮痧排毒')">
                    <div class="service-img">排</div>
                    <div class="service-content">
                        <div class="service-name">刮痧排毒</div>
                        <div class="service-price">¥<span>158</span><span>/50分钟</span></div>
                        <div class="service-duration">50分钟</div>
                    </div>
                </div>
                <div class="service-card" onclick="showServiceDetail('精油开背')">
                    <div class="service-img">精</div>
                    <div class="service-content">
                        <div class="service-name">精油开背</div>
                        <div class="service-price">¥<span>218</span><span>/60分钟</span></div>
                        <div class="service-duration">60分钟</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 项目详情页 -->
        <div class="page" id="page-service-detail">
            <div class="page-header">
                <div class="page-back" onclick="showPage('services')">←</div>
                <div class="page-title">项目详情</div>
            </div>
            
            <div style="height: 200px; background: linear-gradient(135deg, #a8edea, #fed6e3); display: flex; align-items: center; justify-content: center; font-size: 80px;">按</div>
            
            <div class="card">
                <h2 style="font-size: 20px; margin-bottom: 8px;">中式推拿全身</h2>
                <div style="display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;">
                    <span style="color: #e74c3c; font-size: 24px; font-weight: 600;">¥198</span>
                    <span style="color: #999; text-decoration: line-through;">¥298</span>
                </div>
                <div style="display: flex; gap: 12px; font-size: 13px; color: #666;">
                    <span>⏱ 60分钟</span>
                    <span>🔥 1234人购买</span>
                </div>
            </div>
            
            <div class="card">
                <div class="card-title">服务内容</div>
                <p style="font-size: 14px; color: #666; line-height: 1.8;">
                    中式推拿是一种传统的中医保健方法，通过专业的按摩手法，疏通经络、活血化瘀、缓解肌肉疲劳。适用于久坐办公人群、运动后恢复、中老年保健等。
                </p>
            </div>
            
            <div class="card">
                <div class="card-title">注意事项</div>
                <p style="font-size: 14px; color: #666; line-height: 1.8;">
                    1. 请提前告知技师身体状况<br>
                    2. 饭后1小时内不宜按摩<br>
                    3. 孕妇及重大疾病患者请遵医嘱
                </p>
            </div>
            
            <div class="card">
                <div class="card-title">可预约技师</div>
                <div class="tech-list" style="padding: 0;">
                    <div class="tech-card" onclick="showTechDetail('张师傅')">
                        <div class="tech-avatar">张</div>
                        <div class="tech-info">
                            <div class="tech-name">张师傅 <span class="rating">★★★★★</span></div>
                            <div class="tech-stats">¥168起 · 可预约</div>
                        </div>
                    </div>
                    <div class="tech-card" onclick="showTechDetail('王师傅')">
                        <div class="tech-avatar">王</div>
                        <div class="tech-info">
                            <div class="tech-name">王师傅 <span class="rating">★★★★★</span></div>
                            <div class="tech-stats">¥188起 · 可预约</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="padding: 12px; background: #fff; display: flex; gap: 12px;">
                <div class="btn btn-outline" style="flex: 1;">收藏</div>
                <div class="btn btn-primary btn-block" style="flex: 2;" onclick="showPage('booking')">立即预约</div>
            </div>
        </div>
        
        <!-- 预约下单页 -->
        <div class="page" id="page-booking">
            <div class="page-header">
                <div class="page-back" onclick="showPage('home')">←</div>
                <div class="page-title">在线预约</div>
            </div>
            
            <!-- 预约流程 -->
            <div style="display: flex; justify-content: space-between; padding: 16px 12px; background: #fff; margin-bottom: 12px;">
                <div style="text-align: center; flex: 1;">
                    <div class="step-num completed">✓</div>
                    <div style="font-size: 12px; color: #27ae60;">选择项目</div>
                </div>
                <div style="text-align: center; flex: 1;">
                    <div class="step-num">2</div>
                    <div style="font-size: 12px;">选择时间</div>
                </div>
                <div style="text-align: center; flex: 1;">
                    <div class="step-num">3</div>
                    <div style="font-size: 12px;">填写信息</div>
                </div>
                <div style="text-align: center; flex: 1;">
                    <div class="step-num">4</div>
                    <div style="font-size: 12px;">确认支付</div>
                </div>
            </div>
            
            <!-- 已选项目 -->
            <div class="card">
                <div class="card-title">已选服务</div>
                <div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5;">
                    <div>
                        <div style="font-size: 14px;">中式推拿全身</div>
                        <div style="font-size: 12px; color: #999;">60分钟</div>
                    </div>
                    <div style="color: #e74c3c;">¥198</div>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 10px 0;">
                    <div style="font-size: 14px;">合计</div>
                    <div style="color: #e74c3c; font-size: 18px; font-weight: 600;">¥198</div>
                </div>
            </div>
            
            <!-- 选择技师 -->
            <div class="card">
                <div class="card-title">选择技师</div>
                <div class="list-item" onclick="showPage('technician')" style="background: #fafafa; border-radius: 8px;">
                    <div class="list-icon" style="background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;">张</div>
                    <div class="list-content">
                        <div class="list-title">张师傅</div>
                        <div class="list-desc">从业8年 · 评分4.9</div>
                    </div>
                    <div class="list-arrow">›</div>
                </div>
            </div>
            
            <!-- 优惠券 -->
            <div class="list-item" onclick="showToast('优惠券列表')">
                <div style="font-size: 20px; margin-right: 12px;">🎫</div>
                <div class="list-content">
                    <div class="list-title">优惠券</div>
                    <div class="list-desc">有1张可用</div>
                </div>
                <div class="list-arrow">›</div>
            </div>
            
            <!-- 备注 -->
            <div class="card">
                <div class="card-title">特殊需求</div>
                <textarea placeholder="可填写力度偏好、身体状况说明、房间要求等..." style="width: 100%; border: 1px solid #eee; border-radius: 8px; padding: 12px; font-size: 14px; resize: none; height: 80px;">
应付金额 ¥148
去支付
应付金额
¥148.00
支付方式
💳
微信支付
支付成功

订单号：20260515110001
支付金额：¥148.00
订单信息
服务项目中式推拿全身
预约时间 2026-05-15 11:00
服务技师张师傅
服务地址北京市朝阳区xxx
查看订单
返回首页
全部
待支付
待服务
服务中
已完成
订单号：20260515110001 待服务
按
中式推拿全身
张师傅 · 2026-05-15 11:00
合计 ¥148
取消订单联系技师
订单号：20260510100002 已完成
泰
泰式SPA全身
王师傅 · 2026-05-10 14:00
合计 ¥268
评价再次预约
订单号：20260505150003 已取消
理
肩颈理疗
李技师 · 2026-05-05 15:00
已退款 ¥168 重新下单
当前状态
待服务
技师已接单，等待上门服务
订单追踪
技师已接单
05-15 10:30
支付成功
05-15 10:25
订单已创建
05-15 10:20
订单信息
订单编号 20260515110001
预约时间 2026-05-15 11:00
服务地址北京市朝阳区xxx
备注力度适中
技师信息
张
张师傅
138****8888
联系
费用明细
中式推拿全身 ¥198.00
优惠券 -¥50.00
实付金额 ¥148.00
取消订单
查看核销码
为张师傅的服务评分
★★★★★
非常满意
分项评分
专业度
★★★★★
服务态度
★★★★★
守时程度
★★★★☆
文字评价
匿名评价
提交评价
👤
用户1234
138****8888
›
我的订单
全部订单
待支付
待服务
待评价
我的钱包
余额 ¥328.00 · 可提现
›
我的收藏
收藏的技师和服务项目
›
收货地址
管理服务地址
›
优惠券
3张可用
›
分销推广
邀请好友赚佣金
›
消息通知
系统消息、订单通知
›
客服中心
在线客服 9:00-22:00
›
关于我们
平台介绍、联系方式
›
设置
账号安全、消息推送
›
账户余额
¥328.00
可提现金额 ¥328.00
充值
提现
账户明细
会员充值
05-10 14:30
+¥500.00
订单消费
05-08 11:00
-¥198.00
订单退款
05-05 16:20
+¥26.00
积分信息
当前积分 1256
100积分可抵扣 ¥1
技师
项目
张
张师傅 ★★★★★
推拿理疗
从业8年 ¥168起
王
王师傅 ★★★★★
中医推拿刮痧
从业12年 ¥188起
家默认地址
北京市朝阳区建国路88号1号楼1501
张三 138****8888
编辑删除
公司
北京市海淀区中关村大街1号20层
李四 139****6666
编辑删除
可用(3)
已用(2)
已过期(1)
¥50
满200可用
新人专享券
有效期至 2026.05.31
¥20
无门槛
限时折扣券
有效期至 2026.05.20
¥30
满150可用
会员日券
有效期至 2026.05.18
累计佣金
¥1,286.00
可提现 ¥856.00
邀请海报
二维码区域
保存图片分享给好友
保存图片
分享好友
佣金规则
• 一级下线首单奖励：订单金额的5%
• 二级下线首单奖励：订单金额的2%
• 佣金满100元可申请提现
佣金明细
邀请用户：王五 +¥14.90
订单 ¥298 · 05-12 14:30
已结算
邀请用户：赵六 +¥9.90
订单 ¥198 · 05-10 10:20
待结算
申请提现
首页
技师
订单
我的