编辑页面

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>餐云 · 小程序 Demo</title>
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        /* ---------- 全局重置 & 变量 ---------- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #d94f2c;
            --primary-light: #f0e1d9;
            --bg: #f7f4f0;
            --card-bg: #ffffff;
            --text-dark: #1f1b17;
            --text-muted: #7a6e62;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            --radius: 20px;
            --tab-height: 68px;
        }

        body {
            font-family: -apple-system, 'PingFang SC', 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 12px;
        }

        /* ---------- 手机容器 ---------- */
        .phone {
            max-width: 390px;
            width: 100%;
            background: var(--bg);
            border-radius: 36px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            position: relative;
            height: 780px;
            display: flex;
            flex-direction: column;
        }

        /* ---------- 状态栏 (模拟) ---------- */
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 12px 20px 6px;
            font-size: 12px;
            color: var(--text-muted);
            background: var(--bg);
            flex-shrink: 0;
        }

        /* ---------- 主内容 (滚动) ---------- */
        .main-content {
            flex: 1;
            overflow-y: auto;
            padding: 0 16px 12px;
            scroll-behavior: smooth;
        }

        .main-content::-webkit-scrollbar {
            width: 0;
        }

        /* ---------- 头部 ---------- */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0 16px;
        }

        .header h1 {
            font-size: 22px;
            font-weight: 700;
        }

        .header h1 span {
            color: var(--primary);
        }

        .header-actions {
            display: flex;
            gap: 16px;
            color: var(--text-muted);
            font-size: 18px;
        }

        /* ---------- 搜索条 ---------- */
        .search-bar {
            background: #fff;
            border-radius: 40px;
            padding: 10px 18px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow);
            margin-bottom: 18px;
        }

        .search-bar i {
            color: var(--text-muted);
            font-size: 16px;
        }

        .search-bar input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
            background: transparent;
            color: var(--text-dark);
        }

        .search-bar input::placeholder {
            color: #bbb;
        }

        /* ---------- Banner 轮播 (模拟) ---------- */
        .banner {
            background: linear-gradient(135deg, #f0e1d9, #f7d9cc);
            border-radius: var(--radius);
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            min-height: 90px;
        }

        .banner-text h3 {
            font-size: 18px;
            font-weight: 600;
        }

        .banner-text p {
            font-size: 13px;
            color: #5a4e44;
            margin-top: 4px;
        }

        .banner-tag {
            background: var(--primary);
            color: #fff;
            padding: 6px 18px;
            border-radius: 40px;
            font-size: 13px;
            font-weight: 500;
        }

        /* ---------- 分类入口 (4个) ---------- */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 22px;
        }

        .category-item {
            background: #fff;
            border-radius: 16px;
            padding: 14px 6px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: 0.2s;
            cursor: pointer;
        }

        .category-item:active {
            transform: scale(0.94);
        }

        .category-item i {
            font-size: 26px;
            color: var(--primary);
            display: block;
            margin-bottom: 4px;
        }

        .category-item span {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* ---------- 推荐菜品 (横向滚动) ---------- */
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .section-title h4 {
            font-size: 16px;
            font-weight: 600;
        }

        .section-title a {
            font-size: 13px;
            color: var(--text-muted);
            text-decoration: none;
        }

        .dish-scroll {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            padding-bottom: 10px;
            margin-bottom: 20px;
            scroll-snap-type: x mandatory;
        }

        .dish-scroll::-webkit-scrollbar {
            height: 0;
        }

        .dish-card {
            min-width: 130px;
            background: #fff;
            border-radius: 16px;
            padding: 14px 12px 16px;
            box-shadow: var(--shadow);
            scroll-snap-align: start;
            flex-shrink: 0;
            text-align: center;
            transition: 0.2s;
            cursor: pointer;
        }

        .dish-card:active {
            transform: scale(0.96);
        }

        .dish-card .emoji {
            font-size: 40px;
            display: block;
            margin-bottom: 6px;
        }

        .dish-card .name {
            font-size: 14px;
            font-weight: 500;
        }

        .dish-card .price {
            font-size: 15px;
            font-weight: 700;
            color: var(--primary);
            margin-top: 4px;
        }

        .dish-card .price small {
            font-weight: 400;
            font-size: 12px;
            color: var(--text-muted);
        }

        /* ---------- 功能模块卡片 (网格) ---------- */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .feature-card {
            background: #fff;
            border-radius: 16px;
            padding: 16px 14px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 14px;
            transition: 0.2s;
            cursor: pointer;
        }

        .feature-card:active {
            transform: scale(0.96);
        }

        .feature-card .fc-icon {
            width: 44px;
            height: 44px;
            background: var(--primary-light);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--primary);
            flex-shrink: 0;
        }

        .feature-card .fc-text {
            flex: 1;
        }

        .feature-card .fc-text h5 {
            font-size: 14px;
            font-weight: 600;
        }

        .feature-card .fc-text p {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* ---------- 底部 Tab ---------- */
        .tab-bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #fff;
            padding: 8px 0 12px;
            border-top: 1px solid #eee;
            flex-shrink: 0;
            height: var(--tab-height);
        }

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: var(--text-muted);
            cursor: pointer;
            transition: 0.2s;
            padding: 0 12px;
            position: relative;
            border: none;
            background: none;
            font-family: inherit;
        }

        .tab-item i {
            font-size: 22px;
            margin-bottom: 2px;
            transition: 0.2s;
        }

        .tab-item.active {
            color: var(--primary);
        }

        .tab-item.active i {
            transform: scale(1.05);
        }

        .tab-item .badge-dot {
            position: absolute;
            top: 0;
            right: 4px;
            width: 8px;
            height: 8px;
            background: #ff3b30;
            border-radius: 50%;
        }

        /* ---------- 个人中心 (隐藏页, 通过 JS 切换) ---------- */
        .page {
            display: block;
        }

        .page.hidden {
            display: none;
        }

        /* ---------- 个人中心样式 ---------- */
        .profile-header {
            background: #fff;
            border-radius: var(--radius);
            padding: 24px 20px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 18px;
        }

        .profile-avatar {
            width: 64px;
            height: 64px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--primary);
        }

        .profile-info h4 {
            font-size: 18px;
        }

        .profile-info p {
            font-size: 13px;
            color: var(--text-muted);
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 18px;
        }

        .profile-stats .stat {
            background: #fff;
            border-radius: 14px;
            padding: 14px 8px;
            text-align: center;
            box-shadow: var(--shadow);
        }

        .profile-stats .stat .num {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
        }

        .profile-stats .stat .label {
            font-size: 12px;
            color: var(--text-muted);
        }

        .menu-list {
            background: #fff;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .menu-list .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 18px;
            border-bottom: 1px solid #f5f0eb;
            gap: 14px;
            cursor: pointer;
            transition: 0.15s;
        }

        .menu-list .menu-item:last-child {
            border-bottom: none;
        }

        .menu-list .menu-item:active {
            background: #f7f4f0;
        }

        .menu-list .menu-item i {
            width: 24px;
            color: var(--text-muted);
            font-size: 18px;
        }

        .menu-list .menu-item span {
            flex: 1;
            font-size: 14px;
        }

        .menu-list .menu-item .arrow {
            color: #ccc;
            font-size: 14px;
        }

        /* ---------- 订单页面 (模拟) ---------- */
        .order-tabs {
            display: flex;
            gap: 0;
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }

        .order-tabs button {
            flex: 1;
            padding: 10px 0;
            border: none;
            background: transparent;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-muted);
            cursor: pointer;
            transition: 0.2s;
            font-family: inherit;
        }

        .order-tabs button.active {
            color: var(--primary);
            background: var(--primary-light);
        }

        .order-item {
            background: #fff;
            border-radius: 14px;
            padding: 14px 16px;
            box-shadow: var(--shadow);
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .order-item .info .name {
            font-weight: 500;
            font-size: 14px;
        }

        .order-item .info .time {
            font-size: 12px;
            color: var(--text-muted);
        }

        .order-item .status {
            font-size: 13px;
            font-weight: 500;
            color: var(--primary);
        }

        .order-item .status.done {
            color: #34c759;
        }

        /* ---------- 工具 ---------- */
        .text-center {
            text-align: center;
        }

        .mt-8 {
            margin-top: 8px;
        }

        /* ---------- 弹窗 (Toast) ---------- */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.92);
            background: rgba(0, 0, 0, 0.78);
            color: #fff;
            padding: 14px 28px;
            border-radius: 16px;
            font-size: 15px;
            pointer-events: none;
            opacity: 0;
            transition: 0.25s ease;
            z-index: 999;
            backdrop-filter: blur(6px);
            text-align: center;
            max-width: 260px;
        }

        .toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* ---------- 响应式 ---------- */
        @media (max-width: 420px) {
            .phone {
                border-radius: 0;
                height: 100vh;
                max-width: 100%;
                box-shadow: none;
                padding: 0;
            }
            body {
                padding: 0;
            }
            .status-bar {
                padding: 8px 16px 4px;
            }
            .main-content {
                padding: 0 12px 8px;
            }
        }
    </style>
</head>
<body>

    <div class="phone">
        <!-- 模拟状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <span><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <i class="fas fa-battery-three-quarters"></i></span>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content" id="mainContent">
            <!-- ===== 首页 ===== -->
            <div class="page" id="pageHome">
                <!-- 头部 -->
                <div class="header">
                    <h1>餐<span>云</span></h1>
                    <div class="header-actions">
                        <i class="far fa-bell"></i>
                        <i class="far fa-heart"></i>
                    </div>
                </div>

                <!-- 搜索 -->
                <div class="search-bar">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索菜品、店铺..." readonly id="searchInput" />
                </div>

                <!-- Banner -->
                <div class="banner">
                    <div class="banner-text">
                        <h3>🍜 今日推荐</h3>
                        <p>招牌红烧肉 · 限时8折</p>
                    </div>
                    <span class="banner-tag">立即抢</span>
                </div>

                <!-- 分类入口 -->
                <div class="category-grid">
                    <div class="category-item" data-toast="🥤 饮品">
                        <i class="fas fa-coffee"></i>
                        <span>饮品</span>
                    </div>
                    <div class="category-item" data-toast="🍱 套餐">
                        <i class="fas fa-utensils"></i>
                        <span>套餐</span>
                    </div>
                    <div class="category-item" data-toast="🍰 甜品">
                        <i class="fas fa-cake"></i>
                        <span>甜品</span>
                    </div>
                    <div class="category-item" data-toast="🌶️ 小吃">
                        <i class="fas fa-pepper-hot"></i>
                        <span>小吃</span>
                    </div>
                </div>

                <!-- 推荐菜品 -->
                <div class="section-title">
                    <h4>🔥 人气推荐</h4>
                    <a href="#" onclick="event.preventDefault(); showToast('查看更多菜品')">更多</a>
                </div>
                <div class="dish-scroll">
                    <div class="dish-card" onclick="showToast('已加入购物车 🛒')">
                        <span class="emoji">🍖</span>
                        <div class="name">红烧肉</div>
                        <div class="price">¥38 <small>起</small></div>
                    </div>
                    <div class="dish-card" onclick="showToast('已加入购物车 🛒')">
                        <span class="emoji">🍣</span>
                        <div class="name">三文鱼</div>
                        <div class="price">¥48 <small>起</small></div>
                    </div>
                    <div class="dish-card" onclick="showToast('已加入购物车 🛒')">
                        <span class="emoji">🥗</span>
                        <div class="name">鲜果沙拉</div>
                        <div class="price">¥26 <small>起</small></div>
                    </div>
                    <div class="dish-card" onclick="showToast('已加入购物车 🛒')">
                        <span class="emoji">🍜</span>
                        <div class="name">豚骨拉面</div>
                        <div class="price">¥32 <small>起</small></div>
                    </div>
                </div>

                <!-- 快捷功能 -->
                <div class="section-title">
                    <h4>⚡ 快捷服务</h4>
                </div>
                <div class="feature-grid">
                    <div class="feature-card" onclick="showToast('📱 扫码点餐已开启')">
                        <div class="fc-icon"><i class="fas fa-qrcode"></i></div>
                        <div class="fc-text">
                            <h5>扫码点餐</h5>
                            <p>桌台二维码</p>
                        </div>
                    </div>
                    <div class="feature-card" onclick="showToast('📦 自取订单已创建')">
                        <div class="fc-icon"><i class="fas fa-walking"></i></div>
                        <div class="fc-text">
                            <h5>自取</h5>
                            <p>到店取餐</p>
                        </div>
                    </div>
                    <div class="feature-card" onclick="showToast('🛵 外卖配送中')">
                        <div class="fc-icon"><i class="fas fa-motorcycle"></i></div>
                        <div class="fc-text">
                            <h5>外卖</h5>
                            <p>配送到家</p>
                        </div>
                    </div>
                    <div class="feature-card" onclick="showToast('🎫 优惠券已领取')">
                        <div class="fc-icon"><i class="fas fa-ticket-alt"></i></div>
                        <div class="fc-text">
                            <h5>优惠券</h5>
                            <p>满减折扣</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===== 订单页 ===== -->
            <div class="page hidden" id="pageOrder">
                <div style="padding: 12px 0 8px;">
                    <h3 style="font-weight: 600;">📋 我的订单</h3>
                </div>
                <div class="order-tabs">
                    <button class="active" onclick="switchOrderTab(this)">全部</button>
                    <button onclick="switchOrderTab(this)">待支付</button>
                    <button onclick="switchOrderTab(this)">进行中</button>
                    <button onclick="switchOrderTab(this)">已完成</button>
                </div>

                <div id="orderList">
                    <div class="order-item">
                        <div class="info">
                            <div class="name">🍖 红烧肉套餐</div>
                            <div class="time">2026-09-04 12:30</div>
                        </div>
                        <span class="status">待取餐</span>
                    </div>
                    <div class="order-item">
                        <div class="info">
                            <div class="name">🥗 鲜果沙拉 + 饮品</div>
                            <div class="time">2026-09-04 11:15</div>
                        </div>
                        <span class="status done">已完成</span>
                    </div>
                    <div class="order-item">
                        <div class="info">
                            <div class="name">🍣 三文鱼刺身</div>
                            <div class="time">2026-09-03 18:45</div>
                        </div>
                        <span class="status">待支付</span>
                    </div>
                    <div class="order-item">
                        <div class="info">
                            <div class="name">🍜 豚骨拉面</div>
                            <div class="time">2026-09-03 12:10</div>
                        </div>
                        <span class="status done">已完成</span>
                    </div>
                </div>
                <div style="text-align:center;padding:20px 0 8px;color:var(--text-muted);font-size:13px;">
                    — 没有更多订单了 —
                </div>
            </div>

            <!-- ===== 个人中心 ===== -->
            <div class="page hidden" id="pageProfile">
                <div style="padding: 12px 0 8px;">
                    <h3 style="font-weight: 600;">👤 我的</h3>
                </div>

                <div class="profile-header">
                    <div class="profile-avatar"><i class="fas fa-user"></i></div>
                    <div class="profile-info">
                        <h4>餐云用户</h4>
                        <p><i class="fas fa-phone-alt" style="font-size:12px;"></i> 138****8888</p>
                    </div>
                    <div style="margin-left:auto;font-size:13px;color:var(--primary);" onclick="showToast('📝 编辑资料')">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <div class="profile-stats">
                    <div class="stat">
                        <div class="num">128</div>
                        <div class="label">积分</div>
                    </div>
                    <div class="stat">
                        <div class="num">¥68.5</div>
                        <div class="label">余额</div>
                    </div>
                    <div class="stat">
                        <div class="num">3</div>
                        <div class="label">优惠券</div>
                    </div>
                </div>

                <div class="menu-list">
                    <div class="menu-item" onclick="showToast('📦 我的订单')">
                        <i class="fas fa-receipt"></i>
                        <span>我的订单</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="menu-item" onclick="showToast('🎁 积分商城')">
                        <i class="fas fa-coins"></i>
                        <span>积分商城</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="menu-item" onclick="showToast('💳 钱包储值')">
                        <i class="fas fa-wallet"></i>
                        <span>钱包储值</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="menu-item" onclick="showToast('📤 二级分销')">
                        <i class="fas fa-share-alt"></i>
                        <span>二级分销</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="menu-item" onclick="showToast('📍 收货地址')">
                        <i class="fas fa-map-pin"></i>
                        <span>收货地址</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                    <div class="menu-item" onclick="showToast('⚙️ 设置')">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                        <span class="arrow"><i class="fas fa-chevron-right"></i></span>
                    </div>
                </div>

                <div style="text-align:center;padding:20px 0 8px;font-size:12px;color:var(--text-muted);">
                    餐云餐饮系统 v2.0
                </div>
            </div>
        </div>

        <!-- 底部 Tab Bar -->
        <div class="tab-bar">
            <button class="tab-item active" data-page="pageHome" onclick="switchTab('pageHome', this)">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </button>
            <button class="tab-item" data-page="pageOrder" onclick="switchTab('pageOrder', this)">
                <i class="fas fa-list-ul"></i>
                <span>订单</span>
                <span class="badge-dot"></span>
            </button>
            <button class="tab-item" data-page="pageProfile" onclick="switchTab('pageProfile', this)">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </button>
        </div>
    </div>

    <!-- Toast 弹窗 -->
    <div class="toast" id="toast"></div>

    <script>
        // ---------- 页面切换 ----------
        const pages = {
            home: document.getElementById('pageHome'),
            order: document.getElementById('pageOrder'),
            profile: document.getElementById('pageProfile')
        };

        function switchTab(pageId, btn) {
            // 隐藏所有页面
            Object.values(pages).forEach(p => p.classList.add('hidden'));
            // 显示目标页面
            const target = document.getElementById(pageId);
            if (target) target.classList.remove('hidden');

            // 更新 Tab 激活状态
            document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
            if (btn) btn.classList.add('active');

            // 滚动到顶部
            document.getElementById('mainContent').scrollTop = 0;
        }

        // ---------- 订单 Tab 切换 ----------
        function switchOrderTab(btn) {
            document.querySelectorAll('.order-tabs button').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            showToast('切换至: ' + btn.textContent);
        }

        // ---------- Toast ----------
        let toastTimer = null;

        function showToast(msg) {
            const el = document.getElementById('toast');
            el.textContent = msg;
            el.classList.add('show');
            clearTimeout(toastTimer);
            toastTimer = setTimeout(() => {
                el.classList.remove('show');
            }, 1400);
        }

        // ---------- 分类入口点击 ----------
        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', function() {
                const label = this.dataset.toast || '分类';
                showToast('📂 ' + label);
            });
        });

        // ---------- 搜索点击 ----------
        document.getElementById('searchInput').addEventListener('click', function() {
            showToast('🔍 搜索功能 (演示)');
        });

        // ---------- 初始化 ----------
        // 默认首页激活
        switchTab('pageHome', document.querySelector('.tab-item[data-page="pageHome"]'));

        // 点击卡片时阻止默认 (已内联)
        console.log('🍽️ 餐云小程序 Demo 已启动 — 点击各模块体验交互');
    </script>
</body>
</html>