编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.6;
        }
        
        .header {
            background: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
            color: white;
            padding: 15px 20px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(255,107,157,0.3);
        }
        
        .header h1 {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }
        
        .container {
            max-width: 420px;
            margin: 0 auto;
            padding: 20px;
            min-height: calc(100vh - 60px);
        }
        
        .page {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .service-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .service-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 25px rgba(255,107,157,0.2);
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #FF6B9D, #FF8E53);
        }
        
        .service-name {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .service-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }
        
        .service-price {
            font-size: 24px;
            font-weight: 700;
            color: #FF6B9D;
        }
        
        .service-price span {
            font-size: 14px;
            color: #999;
        }
        
        .form-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        }
        
        .form-title {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 25px;
            color: #333;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #f0f0f0;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s;
            outline: none;
        }
        
.form-input:focus {
            border-color: #FF6B9D;
            box-shadow: 0 0 0 3px rgba(255,107,157,0.1);
        }
        
        .btn-primary {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #FF6B9D 0%, #FF8E53 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(255,107,157,0.4);
        }
        
        .btn-primary:active {
            transform: translateY(0);
        }
        
        .success-page {
            text-align: center;
            padding-top: 40px;
        }
        
        .success-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            animation: scaleIn 0.5s ease;
        }
        
        .success-icon svg {
            width: 50px;
            height: 50px;
            fill: white;
        }
        
        @keyframes scaleIn {
            0% { transform: scale(0); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .success-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        
        .success-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 30px;
        }
        
        .order-info {
            background: #f8f8f8;
            border-radius: 12px;
            padding: 20px;
            text-align: left;
            margin-bottom: 25px;
        }
        
        .order-info h4 {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .order-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .order-item:last-child {
            border-bottom: none;
        }
        
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 1000;
            animation: toastIn 0.3s ease;
        }
        
        @keyframes toastIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: #FF6B9D;
            font-size: 14px;
            cursor: pointer;
            margin-bottom: 15px;
        }
        
        .back-btn:hover {
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>美容调理上门预约</h1>
    </div>
    
    <div class="container">
        <!-- 服务展示页面 -->
        <div class="page active" id="userHome">
            <div style="text-align:center; margin-bottom:20px;">
                <span style="font-size:14px; color:#666;">选择服务项目</span>
            </div>
            
            <div class="service-card" onclick="selectService('面部深层清洁', '面部深层清洁护理，包含毛孔清理和补水', 198)">
                <div class="service-name">面部深层清洁</div>
                <div class="service-desc">面部深层清洁护理，包含毛孔清理和补水</div>
                <div class="service-price">¥198 <span>起</span></div>
            </div>
            
            <div class="service-card" onclick="selectService('肩颈按摩', '专业肩颈按摩，缓解疲劳和肌肉紧张', 168)">
                <div class="service-name">肩颈按摩</div>
                <div class="service-desc">专业肩颈按摩，缓解疲劳和肌肉紧张</div>
                <div class="service-price">¥168 <span>起</span></div>
            </div>
            
            <div class="service-card" onclick="selectService('全身经络疏通', '全身经络疏通调理，促进气血循环', 288)">
                <div class="service-name">全身经络疏通</div>
                <div class="service-desc">全身经络疏通调理，促进气血循环</div>
                <div class="service-price">¥288 <span>起</span></div>
            </div>
            
            <div class="service-card" onclick="selectService('面部艾灸护理', '面部艾灸护理，暖宫驱寒', 158)">
                <div class="service-name">面部艾灸护理</div>
                <div class="service-desc">面部艾灸护理，暖宫驱寒</div>
                <div class="service-price">¥158 <span>起</span></div>
            </div>
        </div>
        
        <!-- 预约表单页面 -->
        <div class="page" id="bookingForm">
            <div class="back-btn" onclick="showPage('userHome')">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M10.5 3.5a.5.5 0 0 0-.5-.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 5.5H10a.5.5 0 0 0 .5-.5z"/>
                </svg>
                返回选择服务
            </div>
            
            <div class="form-card">
                <div class="form-title">填写预约信息</div>
                
                <div class="form-group">
                    <label class="form-label">预约服务</label>
                    <div id="selectedService" style="padding:14px 16px; background:#f8f8f8; border-radius:12px; font-size:16px;">
                        -
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">您的姓名</label>
                    <input type="text" class="form-input" id="userName" placeholder="请输入姓名">
                </div>
                
                <div class="form-group">
                    <label class="form-label">手机号码</label>
                    <input type="tel" class="form-input" id="userPhone" placeholder="请输入手机号码">
                </div>
                
                <div class="form-group">
                    <label class="form-label">预约时间</label>
                    <input type="datetime-local" class="form-input" id="bookingTime">
                </div>
                
                <div class="form-group">
                    <label class="form-label">备注（选填）</label>
                    <input type="text" class="form-input" id="bookingNote" placeholder="如有特殊需求请备注">
                </div>
                
                <button class="btn-primary" onclick="submitBooking()">提交预约</button>
            </div>
        </div>
        
        <!-- 预约成功页面 -->
        <div class="page" id="bookingSuccess">
            <div class="success-page">
                <div class="success-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
                    </svg>
                </div>
                <div class="success-title">预约成功！</div>
                <div class="success-desc">请保持手机畅通，商家稍后会与您联系确认</div>
                
                <div class="order-info">
                    <h4>预约信息</h4>
                    <div class="order-item">
                        <span>服务项目</span>
                        <span id="successService">-</span>
                    </div>
                    <div class="order-item">
                        <span>预约人</span>
                        <span id="successName">-</span>
                    </div>
                    <div class="order-item">
                        <span>联系电话</span>
                        <span id="successPhone">-</span>
                    </div>
                    <div class="order-item">
                        <span>预约时间</span>
                        <span id="successTime">-</span>
                    </div>
                    <div class="order-item">
                        <span>订单编号</span>
                        <span id="successOrderId">-</span>
                    </div>
                </div>
                
                <button class="btn-primary" onclick="resetUserFlow()">返回首页</button>
            </div>
        </div>
    </div>
    
    <div class="toast" id="toast" style="display:none;"></div>
    
    <script>
        let currentService = null;
        let currentPrice = 0;
        
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(pageId).classList.add('active');
        }
        
        function selectService(name, desc, price) {
            currentService = name;
            currentPrice = price;
            document.getElementById('selectedService').innerHTML = `
                <span style="color:#FF6B9D; font-weight:600;">${name}</span>
                <span style="float:right; color:#999;">¥${price}</span>
            `;
            showPage('bookingForm');
        }
        
        function submitBooking() {
            const name = document.getElementById('userName').value.trim();
            const phone = document.getElementById('userPhone').value.trim();
            const time = document.getElementById('bookingTime').value;
const note = document.getElementById('bookingNote').value.trim();
            
            if (!name) {
                showToast('请输入姓名');
                return;
            }
            if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                showToast('请输入正确的手机号');
                return;
            }
            if (!time) {
                showToast('请选择预约时间');
                return;
            }
            
            const orderId = 'BK' + Date.now().toString().slice(-10);
            
            document.getElementById('successService').textContent = currentService;
            document.getElementById('successName').textContent = name;
            document.getElementById('successPhone').textContent = phone;
            document.getElementById('successTime').textContent = formatDateTime(time);
            document.getElementById('successOrderId').textContent = orderId;
            
            showPage('bookingSuccess');
            
            document.getElementById('userName').value = '';
            document.getElementById('userPhone').value = '';
            document.getElementById('bookingTime').value = '';
            document.getElementById('bookingNote').value = '';
        }
        
        function resetUserFlow() {
            currentService = null;
            currentPrice = 0;
            showPage('userHome');
        }
        
        function formatDateTime(datetime) {
            const d = new Date(datetime);
            const month = (d.getMonth() + 1).toString().padStart(2, '0');
            const day = d.getDate().toString().padStart(2, '0');
            const hours = d.getHours().toString().padStart(2, '0');
            const minutes = d.getMinutes().toString().padStart(2, '0');
            return `${d.getFullYear()}-${month}-${day} ${hours}:${minutes}`;
        }
        
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 2000);
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setHours(10, 0, 0, 0);
            const defaultTime = tomorrow.toISOString().slice(0, 16);
            document.getElementById('bookingTime').min = defaultTime;
            document.getElementById('bookingTime').value = defaultTime;
        });
    </script>
</body>
</html>