编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

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, sans-serif; background: #f5f5f5; max-width: 430px; margin: 0 auto; min-height: 100vh; }
        .phone-frame { background: #fff; min-height: 100vh; position: relative; overflow-x: hidden; }
        .header { background: linear-gradient(135deg, #FF6B35, #FF8E53); color: white; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
        .header h1 { font-size: 18px; font-weight: 600; }
        .back-btn { background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 5px; display: none; }
        .back-btn.show { display: block; }
        .page { display: none; padding: 20px 15px 80px; animation: fadeIn 0.3s ease; padding-top: 75px; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.2s; }
        .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
        .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 18px 0; }
        .quick-action { background: linear-gradient(135deg, #FF6B35, #FF8E53); border-radius: 12px; padding: 15px 10px; text-align: center; color: white; cursor: pointer; transition: transform 0.2s; }
        .quick-action:hover { transform: scale(1.05); }
        .quick-action .icon { font-size: 24px; margin-bottom: 5px; }
        .quick-action .label { font-size: 12px; }
        .chef-list { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px; margin: 12px 0 18px 0; }
        .chef-card { min-width: 120px; background: #fff; border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .chef-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #FFD700, #FFA500); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
        .chef-name { font-size: 14px; font-weight: 600; color: #333; }
        .chef-rating { font-size: 12px; color: #FF6B35; margin-top: 3px; }
        .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 100; }
        .nav-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 5px 15px; transition: color 0.2s; }
        .nav-item .icon { font-size: 22px; margin-bottom: 3px; }
        .nav-item .label { font-size: 11px; color: #888; }
        .nav-item.active .label { color: #FF6B35; }
        .form-group { margin-bottom: 15px; }
        .form-label { font-size: 14px; color: #333; margin-bottom: 8px; display: block; }
        .form-input { width: 100%; padding: 12px 15px; border: 1px solid #eee; border-radius: 10px; font-size: 14px; outline: none; transition: border-color 0.2s; }
        .form-input:focus { border-color: #FF6B35; }
        .option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .option-btn { padding: 15px; border: 2px solid#eee; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.2s; font-size: 14px; }
        .option-btn.selected { border-color: #FF6B35; background: rgba(255,107,53,0.1); color: #FF6B35; }
        .time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .time-slot { padding: 10px; border: 1px solid #eee; border-radius: 8px; text-align: center; cursor: pointer; font-size: 13px; transition: all 0.2s; }
        .time-slot.selected { border-color: #FF6B35; background: #FF6B35; color: white; }
        .fee-preview { background: linear-gradient(135deg, #FF6B35, #FF8E53); border-radius: 15px; padding: 20px; color: white; margin: 15px 0; }
        .fee-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
        .fee-row.total { font-size: 18px; font-weight: 600; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.3); }
        .map-placeholder { background: linear-gradient(135deg, #e8f4ea, #d4edda); border-radius: 12px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; position: relative; overflow: hidden; }
        .chef-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #FF6B35; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
        .order-card { padding: 12px 15px; }
        .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .order-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #fff3e0; color: #FF6B35; }
        .order-status.pending { background: #fff3e0; color: #FF9800; }
        .order-status.active { background: #e3f2fd; color: #2196F3; }
        .order-status.done { background: #e8f5e9; color: #4CAF50; }
        .rating-stars { display: flex; gap: 5px; margin: 10px 0; }
        .star { font-size: 28px; color: #ddd; cursor: pointer; transition: color 0.2s; }
        .star.active { color: #FFD700; }
        .coupon-card { border: 2px dashed #FF6B35; border-radius: 10px; padding: 15px; margin-bottom: 10px; display: flex; align-items: center; }
        .coupon-value { font-size: 24px; color: #FF6B35; font-weight: 600; margin-right: 15px; }
        .coupon-info { flex: 1; }
        .coupon-name { font-size: 14px; font-weight: 600; }
        .coupon-desc { font-size: 12px; color: #888; }
        .submit-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #FF6B35, #FF8E53); color: white; border: none; border-radius: 25px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: transform 0.2s; }
        .submit-btn:hover { transform: scale(1.02); }
        .address-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .address-icon { width: 40px; height: 40px; border-radius: 50%; background: #fff3e0; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .address-default { font-size: 10px; padding: 2px 6px; background: #FF6B35; color: white; border-radius: 3px; margin-left: 5px; }
        .service-track { margin: 20px 0; }
        .track-item { display: flex; align-items: flex-start; padding-bottom: 20px; position: relative; }
        .track-item::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: #eee; }
        .track-item:last-child::before { display: none; }
        .track-dot { width: 32px; height: 32px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 14px; }
        .track-item.active .track-dot { background: #FF6B35; color: white; }
        .track-content { flex: 1; }
        .track-title { font-size: 14px; font-weight: 600; color: #333; }
        .track-time { font-size: 12px; color: #888; margin-top: 3px; }
        .user-header { background: linear-gradient(135deg, #FF6B35, #FF8E53); padding: 30px 20px; color: white; text-align: center; }
        .user-avatar { width: 70px; height: 70px; border-radius: 50%; background: white; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
        .user-name { font-size: 18px; font-weight: 600; }
        .menu-list { margin-top: 15px; }
        .menu-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .menu-item .icon { width: 35px; height: 35px; border-radius: 8px; background: #fff3e0; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 16px; }
        .menu-item .text { flex: 1; font-size: 15px; color: #333; }
        .menu-item .arrow { color: #ccc; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: white; padding: 15px 30px; border-radius: 10px; font-size: 14px; z-index: 1000; display: none; }
        .toast.show { display: block; animation: toastAnim 2s ease; }
        @keyframes toastAnim { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
        .cancel-reason { margin: 15px 0; }
        .cancel-reason-item { display: flex; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
        .cancel-reason-item.selected { border-color: #FF6B35; background: rgba(255,107,53,0.1); }
        .tag-btn { padding: 6px 12px; background: #fff3e0; color: #FF6B35; border-radius: 15px; font-size: 13px; cursor: pointer; display: inline-block; margin: 3px; }
        .tag-btn.selected { background: #FF6B35; color: white; }
        .invoice-form .form-row { display: flex; align-items: center; margin-bottom: 15px; }
        .invoice-form .form-row label { width: 80px; font-size: 14px; color: #333; }
        .invoice-form .form-row input { flex: 1; padding: 10px; border: 1px solid #eee; border-radius: 8px; }
        .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-bottom: 1px solid #f0f0f0; }
        .switch { width: 50px; height: 28px; background: #ccc; border-radius: 14px; position: relative; cursor: pointer; transition: background 0.3s; }
        .switch.on { background: #4CAF50; }
        .switch::after { content: ''; position: absolute; width: 24px; height: 24px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: left 0.3s; }
        .switch.on::after { left: 24px; }
        .rating-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .rating-header { display: flex; align-items: center; margin-bottom: 10px; }
        .rating-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #FFD700, #FFA500); display: flex; align-items: center; justify-content: center; margin-right: 10px; }
        .rating-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
        .rating-tag { padding: 3px 8px; background: #fff3e0; color: #FF6B35; border-radius: 10px; font-size: 11px; }
        .nav-tabs { display: flex; gap: 10px; margin-bottom: 15px; margin-top: 20px; overflow-x: auto; }
        .nav-tab { padding: 8px 15px; background: #f0f0f0; color: #666; border-radius: 20px; white-space: nowrap; font-size: 13px; cursor: pointer; transition: all 0.2s; }
        .nav-tab.active { background: #FF6B35; color: white; }
        .dish-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .dish-item:last-child { border-bottom: none; }
        .dish-checkbox { width: 20px; height: 20px; border: 2px solid #ddd; border-radius: 4px; margin-right: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: white; }
        .dish-checkbox.checked { background: #FF6B35; border-color: #FF6B35; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 首页 -->
        <div id="home" class="page active">
            <div class="header">
                <h1>上门做饭</h1>
                <span style="font-size: 20px;">🔍</span>
            </div>
            <div class="quick-actions">
                <div class="quick-action" onclick="navigate('order-dish')">
                    <div class="icon">🍽</div>
                    <div class="label">立即下单</div>
                </div>
                <div class="quick-action" onclick="navigate('orders')">
                    <div class="icon">📝</div>
                    <div class="label">我的订单</div>
                </div>
                <div class="quick-action" onclick="navigate('map')">
                    <div class="icon">📍</div>
                    <div class="label">服务追踪</div>
                </div>
                <div class="quick-action" onclick="navigate('coupon-list')">
                    <div class="icon">🎾</div>
                    <div class="label">优惠券</div>
                </div>
            </div>
            <h3 style="margin-bottom: 12px; font-size: 16px;">热门厨师</h3>
            <div class="chef-list">
                <div class="chef-card" onclick="navigate('chef-detail')">
                    <div class="chef-avatar">👩</div>
                    <div class="chef-name">张师傅</div>
                    <div class="chef-rating">★ 4.9</div>
                </div>
                <div class="chef-card" onclick="navigate('chef-detail')">
                    <div class="chef-avatar">👨</div>
                    <div class="chef-name">李大厨</div>
                    <div class="chef-rating">★ 4.8</div>
                </div>
                <div class="chef-card" onclick="navigate('chef-detail')">
                    <div class="chef-avatar">🙋</div>
                    <div class="chef-name">王大厨</div>
                    <div class="chef-rating">★ 4.7</div>
                </div>
                <div class="chef-card" onclick="navigate('chef-detail')">
                    <div class="chef-avatar">🧑</div>
                    <div class="chef-name">陈师傅</div>
                    <div class="chef-rating">★ 4.9</div>
                </div>
            </div>
            <div class="card" onclick="navigate('service-info')">
                <div style="font-size: 20px; margin-bottom: 8px;">📖</div>
                <div style="font-size: 15px; font-weight: 600; margin-bottom: 5px;">服务说明</div>
                <div style="font-size: 13px; color: #888; line-height: 1.5;">上门做饭服务介绍、收费规则、厨师入驻说明</div>
            </div>
        </div>

        <!-- 登录 -->
        <div id="login" class="page">
            <div class="header">
                <button class="back-btn show" onclick="goBack()">‹</button>
                <h1>登录/注册</h1>
                <span></span>
            </div>
            <div style="padding: 40px 20px; text-align: center;">
                <div style="font-size: 80px; margin-bottom: 30px;">👤</div>
                <h2 style="margin-bottom: 30px; font-size: 20px;">欢迎使用上门做饭</h2>
                <button class="submit-btn" onclick="showToast('授权成功！'); setTimeout(() => navigate('home'), 1000);">🔓 微信一键登录</button>
                <div style="margin-top: 20px;">
                    <a href="#" onclick="showToast('手机号登录'); return false;" style="color: #FF6B35; font-size: 14px;">使用手机号登录</a>
                </div>
            </div>
        </div>

        <!-- 厨师详情 (二级页) -->
        <div id="chef-detail" class="page">
            <div class="header">
                <button class="back-btn show" onclick="goBack()">‹</button>
                <h1>厨师详情</h1>
                <span></span>
            </div>
            <div style="background: linear-gradient(135deg, #FF6B35, #FF8E53); padding: 30px; text-align: center; color: white; border-radius: 0 0 30px 30px; margin-bottom: 15px;">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: white; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 40px;">👩</div>
                <div style="font-size: 20px; font-weight: 600; margin-bottom: 5px;">张师傅</div>
                <div style="opacity: 0.9;">从业12年 · 擅长川菜、粤菜</div>
            </div>
            <div style="display: flex; justify-content: space-around; text-align: center; margin-bottom: 15px;">
                <div>
                    <div style="font-size: 24px; font-weight: 600; color: #FF6B35;">4.9</div>
                    <div style="font-size: 12px; color: #888;">评分</div>
                </div>
                <div>
                    <div style="font-size: 24px; font-weight: 600;">126</div>
                    <div style="font-size: 12px; color: #888;">服务次数</div>
                </div>
                <div>
                    <div style="font-size: 24px; font-weight: 600;">98%</div>
                    <div style="font-size: 12px; color: #888;">好评率</div>
                </div>
            </div>
            <div class="card">
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">服务项目</div>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                    <span class="tag-btn selected">中餐</span>
                    <span class="tag-btn selected">家宴</span>
                    <span class="tag-btn">火锅</span>
                    <span class="tag-btn">西餐</span>
                    <span class="tag-btn">烘焙</span>
                </div>
            </div>
            <div class="card">
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">收费标准</div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span style="color: #888;">基础服务费</span>
                    <span style="font-weight: 600;">¥198/次</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                    <span style="color: #888;">加菜费</span>
                    <span style="font-weight: 600;">¥30/道</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #888;">食材代购</span>
                    <span style="font-weight: 600;">实报实销</span>
                </div>
            </div>
            <div class="card">
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">历史评价</div>
                <div style="border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 10px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                        <span style="font-size: 13px;">李女士</span>
                        <span style="color: #FFD700; font-size: 13px;">★★★★★</span>
                    </div>
                    <div style="font-size: 12px; color: #888;">味道很好，厨师很细心，下次还约！</div>
                </div>
                <div style="color: #FF6B35; font-size: 13px; text-align: center; cursor: pointer;" onclick="navigate('rating-list')">查看全部评价 ›</div>
            </div>
            <button class="submit-btn" onclick="navigate('order-dish')">立即预约张师傅</button>
        </div>

        <!-- 选择菜品 -->
        <div id="order-dish" class="page">
            <div class="header">
                <button class="back-btn show" onclick="goBack()">‹</button>
                <h1>选择菜品</h1>
                <span></span>
            </div>
            <div class="form-group">
                <label class="form-label">菜品类型</label>
                <div class="option-grid">
                    <div class="option-btn selected" onclick="selectOption(this)">🍣 中餐</div>
                    <div class="option-btn" onclick="selectOption(this)">🍽 西餐</div>
                    <div class="option-btn" onclick="selectOption(this)">🥨 火锅</div>
                    <div class="option-btn" onclick="selectOption(this)">🍟 日料</div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">选择菜品</label>
                <div class="card" style="box-shadow: none; border: 1px solid #eee;">
                    <div class="dish-item">
                        <div class="dish-checkbox checked" onclick="toggleDish(this)">✓</div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; font-weight: 600;">红烧肉</div>
                            <div style="font-size: 12px; color: #FF6B35;">¥35/份</div>
                        </div>
                    </div>
                    <div class="dish-item">
                        <div class="dish-checkbox checked" onclick="toggleDish(this)">✓</div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; font-weight: 600;">糖醋排骨</div>
                            <div style="font-size: 12px; color: #FF6B35;">¥40/份</div>
                        </div>
                    </div>
                    <div class="dish-item">
                        <div class="dish-checkbox" onclick="toggleDish(this)"></div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; font-weight: 600;">宫保鸡丁</div>
                            <div style="font-size: 12px; color: #FF6B35;">¥30/份</div>
                        </div>
                    </div>
                    <div class="dish-item">
                        <div class="dish-checkbox" onclick="toggleDish(this)"></div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; font-weight: 600;">鱼香肉丝</div>
                            <div style="font-size: 12px; color: #FF6B35;">¥28/份</div>
                        </div>
                    </div>
                    <div class="dish-item">
                        <div class="dish-checkbox" onclick="toggleDish(this)"></div>
                        <div style="flex: 1;">
                            <div style="font-size: 14px; font-weight: 600;">麻婆豆腐</div>
                            <div style="font-size: 12px; color: #FF6B35;">¥22/份</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">用餐人数</label>
                <div class="option-grid">
                    <div class="option-btn selected" onclick="selectOption(this)">1-2人</div>
                    <div class="option-btn" onclick="selectOption(this)">3-4人</div>
                    <div class="option-btn" onclick="selectOption(this)">5-6人</div>
                    <div class="option-btn" onclick="selectOption(this)">6人以上</div>
                </div>
            </div>
            <button class="submit-btn" onclick="navigate('order-time')">下一步</button>
        </div>

        <!-- 预约时间 -->
        <div id="order-time" class="page">
            <div class="header">
                <button class="back-btn show" onclick="goBack()">‹</button>
                <h1>预约时间</h1>
                <span></span>
            </div>
            <div class="form-group">
                <label class="form-label">选择日期</label>
                <input type="date" class="form-input" value="2026-05-16">
            </div>
            <div class="form-group">
                <label class="form-label">选择时间段</label>
                <div class="time-slots">
                    <div class="time-slot" onclick="selectTimeSlot(this)">09:00-12:00</div>
                    <div class="time-slot selected" onclick="selectTimeSlot(this)">12:00-15:00</div>
                    <div class="time-slot" onclick="selectTimeSlot(this)">15:00-18:00</div>
                    <div class="time-slot" onclick="selectTimeSlot(this)">18:00-21:00</div>
                    <div class="time-slot" onclick="selectTimeSlot(this)">21:00-24:00</div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">服务地址</label>
                <div class="card" onclick="navigate('address-edit')" style="display: flex; align-items: center;">
                    <div style="font-size: 24px; margin-right: 12px;">📍</div>
                    <div style="flex: 1;">
                        <div style="font-size: 14px; font-weight: 600;">朝阳区建国路88号 <span style="font-size: 10px; background: #FF6B35; color: white; padding: 2px 6px; border-radius: 3px;">默认</span></div>
                        <div style="font-size: 12px; color: #888;">张三 138****8888</div>
                    </div>
                    <div style="color: #ccc;">›</div>
                </div>
                <div class="card" onclick="navigate('address-edit')" style="display: flex; align-items: center; margin-top: 10px;">
                    <div style="font-size: 24px; margin-right: 12px;">🚗</div>
                    <div style="flex: 1;">
                        <div style="font-size: 14px; font-weight: 600;">海淀区中关村大街1号</div>
                        <div style="font-size: 12px; color: #888;">李四 139****9999</div>
                    </div>
                    <div style="color: #ccc;">›</div>
                </div>
            </div>
            <button class="submit-btn" onclick="navigate('order-requirements')">下一步</button>
        </div>

        <!-- 特殊要求 -->
        <div id="order-requirements" class="page">
            <div class="header">
                <button class="back-btn show" onclick="goBack()">‹</button>
                <h1>特殊要求</h1>
                <span></span>
            </div>
            <div class="form-group">
                <label class="form-label">口味偏好</label>
                <div class="option-grid">
                    <div class="option-btn selected" onclick="selectOption(this)">清淡</div>
                    <div class="option-btn" onclick="selectOption(this)">微辣</div>
                    <div class="option-btn" onclick="selectOption(this)">中辣</div>
                    <div class="option-btn" onclick="selectOption(this)">重辣</div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">忌口备注</label>
                <input type="text" class="form-input" placeholder="如：不吃香菜、海鲜过敏等">
            </div>
            <div class="form-group">
                <label class="form-label">食材准备方式</label>
                <div class="option-grid">
                    <div class="option-btn selected" onclick="selectOption(this)">厨师带食材</div>
                    <div class="option-btn" onclick="selectOption(this)">用户自备</div>
                    <div class="option-btn" onclick="selectOption(this)">平台代购</div>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">其他备注</label>
                <textarea class="form-input" rows="3" placeholder="如有特殊需求请在此说明">

👩

张师傅

服务评分 4.9

服务费 ¥198.00

食材费（预估） ¥150.00

优惠 -¥20.00

合计 ¥328.00

✔

下单成功！

厨师正在接单中，请耐心等待

订单编号 DD20260515001

服务时间今天 12:00-15:00

服务地址朝阳区建国路88号

全部待接单服务中已完成

DD20260515001 服务中

中餐 · 4道菜 · 3-4人

今天 12:00-15:00 ¥328.00

DD20260514002 已完成

火锅 · 5道菜 · 5-6人

05-14 18:00-21:00 ¥456.00

DD20260512003 待接单

西餐 · 3道菜 · 1-2人

05-16 15:00-18:00 ¥280.00

👥

张师傅

★ 4.9 · 已服务126次

订单信息

菜品类型中餐

菜品数量 4道菜

用餐人数 3-4人

服务时间今天 12:00-15:00

服务地址朝阳区建国路88号

✔

订单已接单

今天 10:30

📍

厨师前往中

今天 11:45 · 预计12:00到达

🍽

烹饪中

等待中

⛽

服务完成

等待中

服务费 ¥198.00

食材费 ¥150.00

合计 ¥348.00

温馨提示

取消订单后，已支付的金额将原路退回，请注意查收。

请选择取消原因

○ 临时有事，无法继续服务

● 时间安排冲突

○ 不需要服务了

○ 其他原因

补充说明（选填）

追加菜品

清蒸鲈鱼

¥45/份

蒜蓉粉丝虾

¥38/份

上汤娃娃菜

¥25/份

其他要求

追加菜品费 ¥0.00

需补差价 ¥0.00

👩

2.3km

距离您还有约15分钟

👩

张师傅

正在前往您的位置

🗺

导航界面

目的地：朝阳区建国路88号

我的位置

当前位置

朝阳区建国路88号

目的地

🚶

步行

🚗

驾车

🚴

骑行

订单编号

DD20260515001

需支付金额

¥348.00

优惠券选择 ›

¥20

新人优惠券

满100可用 · 已使用

✓

支付方式

🌎

微信支付

★

💰

余额支付 (¥256.00)

☆

给小费 (可选)

不给

¥5

¥10

¥20

可用已使用已过期

¥20

新人首单券

满100元减20元

立即使用

¥10

满50减10

无门槛限制

立即使用

¥5

限时折扣券

满30元可用

有效期至05-20

共找到 3 张优惠券

✔

支付成功！

感谢您的支持，祝您用餐愉快！

支付金额 ¥358.00

支付方式微信支付

👩

张师傅

服务评分

★ ★ ★ ★ ★

评价内容

服务标签

味道好准时细心专业卫生耐心

✔

感谢您的评价！

您的反馈是我们进步的动力

4.9

综合评分

98%

好评率

126

评价数

👥

李女士

★★★★★

05-12

味道很好，厨师很细心，下次还约！

味道好准时

👦

王先生

★★★★★

05-08

非常专业，摆盘也很精致，家人都很满意！

专业细心

👧

张女士

★★★★

04-28

整体不错，就是上菜稍微慢了一点。

味道好

联系人

联系电话

所在城市

详细地址

地址标签

家公司父母家其他

设为默认地址

删除地址

👤

张三

📱 138****8888

👩

张师傅

★ 4.9 · 已服务126次

👨

李大厨

★ 4.8 · 已服务89次

👩👨

收藏您喜爱的厨师

方便下次快速下单

温馨提示：发票将在3个工作日内开具并发送至您的邮箱

发票类型

普通发票

增值税专用发票

发票信息

公司名称

税号

开票金额

接收邮箱

联系电话

消息通知

活动推送

声音提示

🍽 上门做饭服务

专业厨师上门，为您烹饪精美菜肴。您可以选择菜品类型、用餐人数，我们将为您匹配合适的厨师。

💰 收费规则

• 服务费：根据菜品数量和服务时长计算

• 食材费：厨师代购按实际采购计算

• 优惠券：新用户首单可享优惠

• 小费：服务满意可自愿给予小费

💻 厨师入驻

如果您是专业厨师，欢迎加入我们的平台。您需提交相关资质证明，我们会在3个工作日内完成审核。

🏠 首页

🍽 下单

📝 订单

👤 我的

编辑页面

费用预览

下单成功

下单成功！

我的订单

订单详情

取消订单

追加服务

厨师定位

导航

支付

我的优惠券

支付成功

支付成功！

服务评价

评价成功

感谢您的评价！

评价列表

编辑地址

我的厨师

发票申请

设置

服务说明