编辑页面

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; }
        html, body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            color: #333;
            font-size: 14px;
            max-width: 430px;
            margin: 0 auto;
            -webkit-font-smoothing: antialiased;
        }
        .page { display: none; min-height: 100vh; padding-bottom: 70px; }
        .page.active { display: block; }
        
        /* 顶部状态栏 */
        .status-bar {
            background: #fff;
            padding: 8px 15px;
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
        
        /* 标题栏 */
        .title-bar {
            background: linear-gradient(135deg, #ff6b00, #ff4500);
            padding: 12px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
        }
        .title-bar h1 { font-size: 17px; }
        .title-bar button { background: none; border: none; color: #fff; cursor: pointer; padding: 5px; }
        
        /* 滚动通知 */
        .notice-bar {
            background: #fff8e6;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
        }
        .notice-scroll {
            flex: 1;
            height: 20px;
            overflow: hidden;
            position: relative;
        }
        .notice-item {
            color: #ff6b00;
            animation: scrollNotice 4s infinite;
        }
        @keyframes scrollNotice {
            0%, 45% { transform: translateY(0); opacity: 1; }
            55%, 100% { transform: translateY(-20px); opacity: 0; }
        }
        
        /* 活动卡片 */
        .activity-card {
            background: #fff;
            margin: 10px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .activity-main { display: flex; gap: 12px; margin-bottom: 12px; }
        .activity-img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
        .activity-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
        .activity-date { font-size: 12px; color: #999; margin-bottom: 8px; }
        .activity-tags { display: flex; gap: 8px; }
        .tag { padding: 3px 8px; border-radius: 4px; font-size: 11px; }
        .tag.self-pick { background: #e6f7ff; color: #1890ff; }
        .tag.location { background: #fff7e6; color: #fa8c16; }
        .activity-rule { background: #fafafa; padding: 10px; border-radius: 6px; margin-bottom: 8px; }
        .activity-rule p { font-size: 12px; color: #666; line-height: 1.6; }
        
        /* 拼团进度条 */
        .progress-bar {
            margin: 0 10px 10px;
            background: linear-gradient(135deg, #ff4500, #ff6b00);
            border-radius: 8px;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            color: #fff;
        }
        .progress-left { display: flex; align-items: center; gap: 8px; font-size: 12px; }
        .progress-right { text-align: right; font-size: 12px; }
        .progress-right strong { font-size: 16px; }
        
        /* 搜索栏 */
        .search-section {
            background: #fff;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .search-bar {
            flex: 1;
            background: #f5f5f5;
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-bar input { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; }
        .search-right { text-align: right; }
        .group-status { display: block; font-size: 12px; color: #52c41a; font-weight: 500; }
        .group-count { display: block; font-size: 11px; color: #999; }
        
        /* 分类导航 */
        .category-tabs {
            background: #fff;
            display: flex;
            padding: 0 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        .category-tab {
            flex: 1;
            text-align: center;
            padding: 12px 8px;
            font-size: 13px;
            color: #666;
            position: relative;
            cursor: pointer;
        }
        .category-tab.active { color: #ff4500; font-weight: 600; }
        .category-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 25px;
            height: 3px;
            background: #ff4500;
            border-radius: 3px;
        }
        
        /* 商品列表 */
        .product-list { padding: 10px; }
        .product-card {
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 10px;
            display: flex;
            gap: 12px;
            position: relative;
            cursor: pointer;
        }
        .product-img { width: 90px; height: 90px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
        .product-info { flex: 1; display: flex; flex-direction: column; }
        .product-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
        .product-spec { font-size: 12px; color: #999; margin-bottom: 6px; }
        .product-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4px; }
        .current-price { color: #ff4500; font-size: 16px; font-weight: 700; }
        .original-price { color: #999; font-size: 11px; text-decoration: line-through; margin-left: 4px; }
        .sales-info { text-align: right; }
        .sales-count { display: block; font-size: 11px; color: #999; }
        .stock-count { display: block; font-size: 11px; color: #ff6b00; }
        .product-pick-time { font-size: 12px; color: #999; }
        .add-cart-btn {
            position: absolute;
            right: 12px;
            bottom: 12px;
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #ff6b00, #ff4500);
            border: none;
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 参团人员 */
        .group-members {
            background: #fff;
            margin: 10px;
            border-radius: 12px;
            padding: 15px;
        }
        .member-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .member-title { font-size: 14px; font-weight: 600; border-left: 3px solid #ff6b00; padding-left: 8px; }
        .copy-btn {
            background: #fff7e6;
            color: #ff6b00;
            border: 1px solid #ff6b00;
            padding: 4px 10px;
            border-radius: 15px;
            font-size: 11px;
            cursor: pointer;
        }
        .member-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .member-item:last-child { border-bottom: none; }
        .member-num { width: 18px; height: 18px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999; }
        .member-avatar { width: 30px; height: 30px; border-radius: 50%; }
        .member-name { width: 55px; font-size: 12px; }
        .member-products { flex: 1; font-size: 11px; color: #666; }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 430px;
            max-width: 100%;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            color: #666;
            font-size: 11px;
            cursor: pointer;
            padding: 5px 15px;
        }
        .nav-item.active { color: #ff4500; }
        .nav-cart { display: flex; align-items: center; gap: 15px; }
        .cart-info { text-align: right; }
        .cart-label { font-size: 12px; color: #999; }
        .cart-price { display: block; font-size: 15px; font-weight: 600; color: #ff4500; }
        .checkout-btn {
            background: linear-gradient(135deg, #ff6b00, #ff4500);
            color: #fff;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* ========== 消息页面 ========== */
.page-header {
            background: #fff;
            padding: 15px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .page-header h1 { font-size: 17px; font-weight: 600; }
        .message-tabs { display: flex; background: #fff; margin-bottom: 10px; }
        .msg-tab { flex: 1; text-align: center; padding: 12px; color: #666; cursor: pointer; position: relative; }
        .msg-tab.active { color: #ff4500; font-weight: 600; }
        .msg-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: #ff4500; border-radius: 3px; }
        .message-list { background: #fff; }
        .message-item { display: flex; padding: 15px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
        .message-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
        .delivery-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; }
        .order-icon { background: linear-gradient(135deg, #fa709a, #fee140); color: #fff; }
        .message-content { flex: 1; }
        .message-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .message-desc { font-size: 12px; color: #999; margin-bottom: 4px; }
        .message-time { font-size: 11px; color: #bbb; }
        .hidden { display: none !important; }
        
        /* ========== 我的页面 ========== */
        .profile-header {
            background: linear-gradient(135deg, #ff6b00, #ff4500);
            padding: 25px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-info { display: flex; align-items: center; gap: 12px; }
        .avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.3); overflow: hidden; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; }
        .user-name { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
        .vip-badge { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #ffd700, #ffb347); color: #fff; padding: 3px 10px; border-radius: 10px; font-size: 11px; }
        .edit-btn { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 6px 12px; border-radius: 15px; font-size: 12px; cursor: pointer; }
        
        .vip-card { background: linear-gradient(135deg, #2d3436, #636e72); margin: 12px; padding: 15px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
        .vip-title { color: #ffd700; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .vip-desc { color: #b2bec3; font-size: 11px; }
        .vip-btn { background: linear-gradient(135deg, #ffd700, #ffb347); border: none; color: #333; padding: 6px 15px; border-radius: 15px; font-size: 12px; font-weight: 600; cursor: pointer; }
        
        .order-section { background: #fff; margin-bottom: 10px; }
        .section-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f0f0f0; }
        .section-title { font-size: 14px; font-weight: 600; }
        .section-more { color: #999; font-size: 12px; cursor: pointer; }
        .order-status { display: flex; justify-content: space-around; padding: 15px 0; }
        .status-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
        .status-icon { width: 40px; height: 40px; background: #fff5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ff4500; }
        .status-item span { font-size: 12px; color: #666; }
        
        .menu-section { background: #fff; }
        .menu-item { display: flex; align-items: center; padding: 14px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; color: #fff; }
        .address-icon { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .coupon-icon { background: linear-gradient(135deg, #fa709a, #fee140); }
        .pickup-icon { background: linear-gradient(135deg, #a8edea, #fed6e3); color: #666; }
        .service-icon { background: linear-gradient(135deg, #667eea, #764ba2); }
        .menu-item span:not(.badge):not(.arrow-icon) { flex: 1; font-size: 14px; }
        .badge { background: #ff4500; color: #fff; padding: 2px 6px; border-radius: 8px; font-size: 11px; margin-left: auto; margin-right: 8px; }
        .arrow-icon { color: #ccc; }
        
        /* ========== 子页面通用 ========== */
        .sub-page { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 430px; max-width: 100%; height: 100vh; background: #f5f5f5; z-index: 200; display: none; flex-direction: column; }
        .sub-page.active { display: flex; }
        .sub-header { background: #fff; padding: 12px 15px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .back-btn { background: none; border: none; font-size: 18px; color: #333; cursor: pointer; }
        .sub-header h1 { flex: 1; font-size: 16px; text-align: center; }
        .add-btn { background: #ff4500; border: none; color: #fff; padding: 5px 12px; border-radius: 12px; font-size: 12px; cursor: pointer; }
        
        /* 地址列表 */
        .address-list { flex: 1; overflow-y: auto; padding: 12px; }
        .address-item { background: #fff; padding: 12px; border-radius: 10px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
        .address-item.default { border: 2px solid #ff4500; }
        .address-user { font-size: 14px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
        .default-tag { background: #ff4500; color: #fff; padding: 2px 6px; border-radius: 8px; font-size: 10px; }
        .address-phone { color: #666; font-size: 12px; margin-bottom: 4px; }
        .address-detail { color: #999; font-size: 12px; }
        .edit-address-btn { background: #f5f5f5; border: none; padding: 6px 12px; border-radius: 12px; font-size: 12px; color: #666; cursor: pointer; }
        
        /* 优惠券 */
        .coupon-tabs { display: flex; background: #fff; padding: 0 12px; margin-bottom: 10px; }
        .coupon-tab { padding: 10px 12px; color: #666; font-size: 13px; position: relative; cursor: pointer; }
        .coupon-tab.active { color: #ff4500; font-weight: 600; }
        .coupon-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 25px; height: 3px; background: #ff4500; border-radius: 3px; }
        .coupon-list { flex: 1; overflow-y: auto; padding: 0 12px; }
        .coupon-card { background: #fff; border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; overflow: hidden; }
        .coupon-left { background: linear-gradient(135deg, #ff6b00, #ff4500); padding: 15px 12px; text-align: center; min-width: 85px; }
        .coupon-price { color: #fff; font-size: 20px; font-weight: 700; }
        .coupon-condition { color: rgba(255,255,255,0.8); font-size: 11px; margin-top: 2px; }
        .coupon-right { flex: 1; padding: 12px; }
        .coupon-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .coupon-time { color: #999; font-size: 11px; margin-bottom: 2px; }
        .coupon-desc { color: #666; font-size: 11px; }
        .coupon-use { background: #ff4500; color: #fff; padding: 12px 10px; font-size: 12px; writing-mode: vertical-rl; cursor: pointer; }
        
        /* 提货二维码 */
        .pickup-content { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 30px 20px; }
        .pickup-info { text-align: center; margin-bottom: 20px; }
        .pickup-info p { color: #666; font-size: 13px; margin-bottom: 6px; }
        .pickup-code { color: #ff4500; font-weight: 600; }
        .qrcode { background: #fff; padding: 15px; border-radius: 10px; }
        .qrcode img { width: 180px; height: 180px; }
        .refresh-btn { margin-top: 20px; background: linear-gradient(135deg, #ff6b00, #ff4500); border: none; color: #fff; padding: 10px 25px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* 联系客服 */
        .service-content { flex: 1; padding: 15px; }
        .service-info { text-align: center; padding: 25px 0; background: #fff; border-radius: 10px; margin-bottom: 15px; }
        .service-avatar { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; }
        .service-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .service-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
        .service-status { color: #52c41a; font-size: 12px; }
        .service-buttons { display: flex; gap: 10px; margin-bottom: 15px; }
        .service-btn-item { flex: 1; background: #fff; border: none; padding: 15px 8px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .service-btn-item svg { color: #ff4500; }
        .service-btn-item span { font-size: 12px; color: #333; }
        .service-hotline { background: #fff; padding: 18px; border-radius: 10px; text-align: center; }
        .hotline-title { color: #999; font-size: 12px; margin-bottom: 6px; }
        .hotline-number { color: #ff4500; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
        .hotline-time { color: #999; font-size: 11px; }
        
        /* 商品详情页 */
        .detail-nav { background: #fff; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; }
        .nav-back { background: none; border: none; color: #333; cursor: pointer; }
        .nav-tabs { display: flex; gap: 18px; }
        .nav-tab { font-size: 14px; color: #666; padding: 5px 0; cursor: pointer; }
        .nav-tab.active { color: #ff4500; font-weight: 600; border-bottom: 2px solid #ff4500; }
        .nav-more { background: none; border: none; color: #333; cursor: pointer; }
        
        .detail-images { position: relative; }
        .detail-images img { width: 100%; height: 300px; object-fit: cover; }
        .image-nav { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.4); color: #fff; padding: 3px 10px; border-radius: 10px; font-size: 11px; }
        
        .detail-info { background: #fff; padding: 15px; margin-bottom: 10px; }
        .detail-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
        .detail-price .current-price { font-size: 22px; }
        .detail-price .discount { background: #fff5f5; color: #ff4500; padding: 2px 6px; border-radius: 4px; font-size: 11px; }
        .detail-title { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
        .detail-tags { display: flex; gap: 12px; }
        .detail-tags span { font-size: 12px; color: #666; }
        
        .group-buy-info { background: #fff; padding: 12px 15px; margin-bottom: 10px; }
        .group-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
        .group-header span { color: #ff6b00; font-size: 13px; }
        .group-timer { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #666; }
        .timer-box { background: #333; color: #fff; padding: 3px 6px; border-radius: 3px; font-weight: 600; }
        
        .detail-members { background: #fff; margin: 0 10px 10px; border-radius: 10px; padding: 12px; }
        
        .product-detail-section { background: #fff; padding: 15px; margin-bottom: 70px; }
        .detail-section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
        .product-detail-section img { width: 100%; display: block; margin-bottom: 8px; }
        
        .buy-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 430px; max-width: 100%; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
        .footer-left { display: flex; gap: 15px; }
        .footer-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #666; background: none; border: none; font-size: 10px; cursor: pointer; }
        .footer-right { display: flex; gap: 8px; }
        .add-cart-btn { padding: 10px 15px; border: 1px solid #ff6b00; background: #fff; color: #ff6b00; border-radius: 18px; font-size: 13px; cursor: pointer; }
        .buy-now-btn { padding: 10px 20px; border: none; background: linear-gradient(135deg, #ff6b00, #ff4500); color: #fff; border-radius: 18px; font-size: 13px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="app">
        <!-- 首页 -->
        <div id="home" class="page active">
            <div class="status-bar">
                <span>13:35</span>
                <span>5G</span>
                <span>100%</span>
            </div>
            <div class="title-bar">
                <button>☰</button>
                <h1>优选拼团</h1>
                <button>···</button>
            </div>
            
            <div class="notice-bar">
                <span>📢</span>
                <div class="notice-scroll">
                    <div class="notice-item">王女士刚刚参团成功！</div>
                </div>
            </div>
            
            <div class="activity-card">
<div class="activity-main">
                    <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=140&h=140&fit=crop" class="activity-img">
                    <div>
                        <div class="activity-title">当季特惠水果拼团</div>
                        <div class="activity-date">2026.4.21 - 2026.4.25</div>
                        <div class="activity-tags">
                            <span class="tag self-pick">自提</span>
                            <span class="tag location">东方超市一店</span>
                        </div>
                    </div>
                </div>
                <div class="activity-rule">
                    <p>开团时间：4月21日 08:00</p>
                    <p>提货时间：4月25日 14:00-18:00</p>
                </div>
            </div>
            
            <div class="progress-bar">
                <div class="progress-left">
                    <span>✓</span>
                    <span>满10人成团，未成团100%退款</span>
                </div>
                <div class="progress-right">
                    <span>距成团还差 <strong>3</strong> 人</span>
                </div>
            </div>
            
            <div class="search-section">
                <div class="search-bar">
                    <span>🔍</span>
                    <input type="text" placeholder="搜索商品">
                </div>
                <div class="search-right">
                    <span class="group-status">拼团进行中</span>
                    <span class="group-count">18人已参团</span>
                </div>
            </div>
            
            <div class="category-tabs">
                <div class="category-tab active" onclick="switchCategory(this)">全部</div>
                <div class="category-tab" onclick="switchCategory(this)">水果</div>
                <div class="category-tab" onclick="switchCategory(this)">蔬菜</div>
                <div class="category-tab" onclick="switchCategory(this)">肉禽</div>
                <div class="category-tab" onclick="switchCategory(this)">粮油</div>
            </div>
            
            <div class="product-list">
                <div class="product-card" onclick="showProductDetail()">
                    <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=180&h=180&fit=crop" class="product-img">
                    <div class="product-info">
                        <div class="product-name">陕西红富士苹果 脆甜多汁</div>
                        <div class="product-spec">规格：5斤装</div>
                        <div class="product-price-row">
                            <div><span class="current-price">¥19.9</span><span class="original-price">¥39.9</span></div>
                            <div class="sales-info">
                                <span class="sales-count">已售128份</span>
                                <span class="stock-count">仅剩26份</span>
                            </div>
                        </div>
                        <div class="product-pick-time">预计自提：4月25日</div>
                    </div>
                    <button class="add-cart-btn" onclick="event.stopPropagation(); addToCart()">+</button>
                </div>
                
                <div class="product-card" onclick="showProductDetail()">
                    <img src="https://images.unsplash.com/photo-1546548970-71785318a17b?w=180&h=180&fit=crop" class="product-img">
                    <div class="product-info">
                        <div class="product-name">新奇士有机脐橙 鲜甜</div>
                        <div class="product-spec">规格：3斤装</div>
                        <div class="product-price-row">
                            <div><span class="current-price">¥15.9</span><span class="original-price">¥29.9</span></div>
                            <div class="sales-info">
                                <span class="sales-count">已售98份</span>
                                <span class="stock-count">仅剩42份</span>
                            </div>
                        </div>
                        <div class="product-pick-time">预计自提：4月25日</div>
                    </div>
                    <button class="add-cart-btn" onclick="event.stopPropagation(); addToCart()">+</button>
                </div>
                
                <div class="product-card" onclick="showProductDetail()">
                    <img src="https://images.unsplash.com/photo-1518977676601-b28b5e4dd746?w=180&h=180&fit=crop" class="product-img">
                    <div class="product-info">
                        <div class="product-name">有机生菜 新鲜蔬菜</div>
                        <div class="product-spec">规格：约500g</div>
                        <div class="product-price-row">
                            <div><span class="current-price">¥4.9</span><span class="original-price">¥9.9</span></div>
                            <div class="sales-info">
                                <span class="sales-count">已售256份</span>
                                <span class="stock-count">仅剩44份</span>
                            </div>
                        </div>
                        <div class="product-pick-time">预计自提：4月25日</div>
                    </div>
                    <button class="add-cart-btn" onclick="event.stopPropagation(); addToCart()">+</button>
                </div>
            </div>
            
            <div class="group-members">
                <div class="member-header">
                    <span class="member-title">参团情况（共18人）</span>
                    <button class="copy-btn" onclick="copyGroupInfo()">一键复制</button>
                </div>
                <div class="member-item">
                    <span class="member-num">18</span>
                    <img src="https://picsum.photos/60/60?random=1" class="member-avatar">
                    <span class="member-name">王女士</span>
                    <span class="member-products">红富士苹果 x1</span>
                </div>
                <div class="member-item">
                    <span class="member-num">17</span>
                    <img src="https://picsum.photos/60/60?random=2" class="member-avatar">
                    <span class="member-name">李先生</span>
                    <span class="member-products">红富士苹果 x2</span>
                </div>
                <div class="member-item">
                    <span class="member-num">16</span>
                    <img src="https://picsum.photos/60/60?random=3" class="member-avatar">
                    <span class="member-name">张先生</span>
                    <span class="member-products">有机脐橙 x1</span>
                </div>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item active" onclick="switchPage('home')">
                    <span>🏠</span>
                    <span>首页</span>
                </div>
                <div class="nav-item" onclick="switchPage('message')">
                    <span>💬</span>
                    <span>消息</span>
                    <span style="position:absolute;top:0;right:8px;background:#ff4500;color:#fff;padding:1px 5px;border-radius:8px;font-size:9px;">5</span>
                </div>
                <div class="nav-item" onclick="switchPage('profile')">
                    <span>👤</span>
                    <span>我的</span>
                </div>
                <div class="nav-cart">
                    <div class="cart-info">
                        <span class="cart-label">合计</span>
                        <span class="cart-price" id="cartPrice">¥ 0.00</span>
                    </div>
                    <button class="checkout-btn" onclick="checkout()">去结算</button>
                </div>
            </div>
        </div>
        
        <!-- 消息页面 -->
        <div id="message" class="page">
            <div class="status-bar"><span>13:35</span><span>5G</span><span>100%</span></div>
            <div class="page-header"><h1>消息通知</h1></div>
            
            <div class="message-tabs">
                <div class="msg-tab active" onclick="switchMsgTab(this, 'delivery')">发货通知</div>
                <div class="msg-tab" onclick="switchMsgTab(this, 'order')">下单成功</div>
            </div>
            
            <div class="message-list" id="delivery-list">
                <div class="message-item" onclick="alert('查看发货详情')">
                    <div class="message-icon delivery-icon">🚚</div>
                    <div class="message-content">
                        <div class="message-title">您的订单已发货</div>
                        <div class="message-desc">订单号：DD20260422001 顺丰 SF1234567890</div>
                        <div class="message-time">今天 10:30</div>
                    </div>
                </div>
                <div class="message-item" onclick="alert('查看发货详情')">
                    <div class="message-icon delivery-icon">🚚</div>
                    <div class="message-content">
                        <div class="message-title">您的订单已发货</div>
                        <div class="message-desc">订单号：DD20260421045 中通 ZT9876543210</div>
                        <div class="message-time">昨天 15:22</div>
                    </div>
                </div>
                <div class="message-item" onclick="alert('查看发货详情')">
                    <div class="message-icon delivery-icon">🚚</div>
                    <div class="message-content">
                        <div class="message-title">您的订单已发货</div>
                        <div class="message-desc">订单号：DD20260419088 圆通 YT5678901234</div>
                        <div class="message-time">4月19日</div>
                    </div>
                </div>
            </div>
            
            <div class="message-list hidden" id="order-list">
                <div class="message-item" onclick="alert('查看订单详情')">
                    <div class="message-icon order-icon">📦</div>
                    <div class="message-content">
                        <div class="message-title">下单成功</div>
                        <div class="message-desc">感谢购买！订单号：DD20260422015</div>
                        <div class="message-time">今天 09:15</div>
                    </div>
                </div>
                <div class="message-item" onclick="alert('查看订单详情')">
                    <div class="message-icon order-icon">📦</div>
                    <div class="message-content">
                        <div class="message-title">下单成功</div>
                        <div class="message-desc">感谢购买！订单号：DD20260421032</div>
                        <div class="message-time">昨天 18:45</div>
                    </div>
                </div>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item" onclick="switchPage('home')"><span>🏠</span><span>首页</span></div>
                <div class="nav-item active" onclick="switchPage('message')"><span>💬</span><span>消息</span><span style="position:absolute;top:0;right:8px;background:#ff4500;color:#fff;padding:1px 5px;border-radius:8px;font-size:9px;">5</span></div>
                <div class="nav-item" onclick="switchPage('profile')"><span>👤</span><span>我的</span></div>
                <div class="nav-cart">
                    <div class="cart-info">
                        <span class="cart-label">合计</span>
                        <span class="cart-price">¥ 0.00</span>
                    </div>
                    <button class="checkout-btn">去结算</button>
                </div>
            </div>
        </div>
        
        <!-- 我的页面 -->
        <div id="profile" class="page">
            <div class="status-bar"><span>13:35</span><span>5G</span><span>100%</span></div>
            <div class="profile-header">
                <div class="user-info">
                    <div class="avatar"><img src="https://picsum.photos/120/120?random=10"></div>
                    <div>
                        <div class="user-name">张小明</div>
                        <div class="vip-badge">⭐ 黄金会员</div>
                    </div>
                </div>
                <button class="edit-btn" onclick="alert('编辑资料')">编辑</button>
            </div>
            
            <div class="vip-card">
                <div>
                    <div class="vip-title">会员权益</div>
                    <div class="vip-desc">专享折扣 · 积分翻倍 · 专属客服</div>
                </div>
                <button class="vip-btn" onclick="alert('升级会员')">立即升级</button>
            </div>
            
            <div class="order-section">
                <div class="section-header">
                    <span class="section-title">我的订单</span>
                    <span class="section-more" onclick="alert('查看全部订单')">全部订单 ></span>
                </div>
                <div class="order-status">
                    <div class="status-item" onclick="alert('待付款订单')">
                        <div class="status-icon">💰</div>
                        <span>待付款</span>
                    </div>
                    <div class="status-item" onclick="alert('待发货订单')">
                        <div class="status-icon">📤</div>
                        <span>待发货</span>
                    </div>
                    <div class="status-item" onclick="alert('待收货订单')">
                        <div class="status-icon">📥</div>
                        <span>待收货</span>
                    </div>
                    <div class="status-item" onclick="alert('待评价订单')">
                        <div class="status-icon">⭐</div>
                        <span>待评价</span>
                    </div>
                </div>
            </div>
            
            <div class="menu-section">
                <div class="menu-item" onclick="showSubPage('address')">
                    <div class="menu-icon address-icon">📍</div>
                    <span>我的地址</span>
                    <svg class="arrow-icon" width="16" height="16" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item" onclick="showSubPage('coupon')">
                    <div class="menu-icon coupon-icon">🎫</div>
                    <span>优惠券</span>
                    <span class="badge">3</span>
                    <svg class="arrow-icon" width="16" height="16" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item" onclick="showSubPage('pickup')">
                    <div class="menu-icon pickup-icon">⊞</div>
                    <span>提货二维码</span>
                    <svg class="arrow-icon" width="16" height="16" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
                <div class="menu-item" onclick="showSubPage('service')">
                    <div class="menu-icon service-icon">💁</div>
                    <span>联系客服</span>
                    <svg class="arrow-icon" width="16" height="16" fill="#ccc"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
                </div>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item" onclick="switchPage('home')"><span>🏠</span><span>首页</span></div>
                <div class="nav-item" onclick="switchPage('message')"><span>💬</span><span>消息</span><span style="position:absolute;top:0;right:8px;background:#ff4500;color:#fff;padding:1px 5px;border-radius:8px;font-size:9px;">5</span></div>
                <div class="nav-item active" onclick="switchPage('profile')"><span>👤</span><span>我的</span></div>
                <div class="nav-cart">
                    <div class="cart-info">
                        <span class="cart-label">合计</span>
                        <span class="cart-price">¥ 0.00</span>
                    </div>
                    <button class="checkout-btn">去结算</button>
                </div>
            </div>
        </div>
        
        <!-- 商品详情页 -->
        <div id="product-detail" class="page">
            <div class="status-bar"><span>13:35</span><span>5G</span><span>100%</span></div>
            <div class="detail-nav">
                <button class="nav-back" onclick="switchPage('home')">←</button>
                <div class="nav-tabs">
                    <span class="nav-tab active">商品</span>
                    <span class="nav-tab" onclick="alert('查看商品详情')">详情</span>
                    <span class="nav-tab" onclick="alert('查看参团信息')">参团</span>
                </div>
                <button class="nav-more">···</button>
            </div>
            
            <div class="detail-images">
                <img src="https://images.unsplash.com/photo-1560806887-1e4cd0b6cbd6?w=750&h=750&fit=crop">
                <div class="image-nav">1/3</div>
            </div>
            
            <div class="detail-info">
                <div class="detail-price">
                    <span class="current-price">¥19.9</span>
                    <span class="original-price">¥39.9</span>
                    <span class="discount">5折</span>
                </div>
                <div class="detail-title">陕西红富士苹果 脆甜多汁 新鲜当季水果 5斤装</div>
                <div class="detail-tags">
                    <span>7天无理由退换</span>
                    <span>正品保证</span>
                </div>
            </div>
            
            <div class="group-buy-info">
                <div class="group-header">
                    <span>👥</span>
                    <span>正在拼团中，距成团还差3人</span>
                </div>
                <div class="group-timer">
                    <span>剩余</span>
                    <span class="timer-box">02</span>:<span class="timer-box">15</span>:<span class="timer-box">33</span>
                    <span>结束</span>
                </div>
            </div>
            
            <div class="detail-members">
                <div class="member-header">
                    <span class="member-title">参团情况（共18人）</span>
                    <button class="copy-btn" onclick="copyGroupInfo()">一键复制</button>
                </div>
                <div class="member-item">
                    <span class="member-num">18</span>
                    <img src="https://picsum.photos/60/60?random=1" class="member-avatar">
                    <span class="member-name">王女士</span>
                    <span class="member-products">红富士苹果 x1</span>
                </div>
                <div class="member-item">
                    <span class="member-num">17</span>
                    <img src="https://picsum.photos/60/60?random=2" class="member-avatar">
                    <span class="member-name">李先生</span>
                    <span class="member-products">红富士苹果 x2</span>
                </div>
                <div class="member-item">
                    <span class="member-num">16</span>
                    <img src="https://picsum.photos/60/60?random=3" class="member-avatar">
                    <span class="member-name">张先生</span>
                    <span class="member-products">有机脐橙 x1</span>
                </div>
            </div>
            
            <div class="product-detail-section">
                <div class="detail-section-title">商品详情</div>
                <img src="https://images.unsplash.com/photo-1579613832125-5d34a13ffe2a?w=750&fit=crop">
                <img src="https://images.unsplash.com/photo-1584306670957-acf935f5033c?w=750&fit=crop">
            </div>
            
            <div class="buy-footer">
                <div class="footer-left">
                    <button class="footer-btn" onclick="alert('联系客服')">
                        <span>💬</span>
                        <span>客服</span>
                    </button>
                    <button class="footer-btn" onclick="alert('已收藏')">
                        <span>❤️</span>
                        <span>收藏</span>
                    </button>
                </div>
                <div class="footer-right">
                    <button class="add-cart-btn" onclick="addToCart()">加入购物车</button>
                    <button class="buy-now-btn" onclick="alert('立即参团')">立即参团</button>
                </div>
            </div>
        </div>
        
        <!-- 子页面：地址管理 -->
        <div id="address-page" class="sub-page">
            <div class="sub-header">
                <button class="back-btn" onclick="hideSubPage()">←</button>
                <h1>收货地址</h1>
                <button class="add-btn">新增</button>
            </div>
            <div class="address-list">
                <div class="address-item default">
                    <div>
                        <div class="address-user">
                            张小明
                            <span class="default-tag">默认</span>
                        </div>
                        <div class="address-phone">138****8888</div>
                        <div class="address-detail">广东省深圳市南山区科技园南区高新南七道R2-B栋3楼</div>
                    </div>
                    <button class="edit-address-btn">编辑</button>
                </div>
                <div class="address-item">
                    <div>
                        <div class="address-user">李小红</div>
                        <div class="address-phone">139****6666</div>
                        <div class="address-detail">北京市朝阳区望京SOHO T3 20层</div>
                    </div>
                    <button class="edit-address-btn">编辑</button>
                </div>
                <div class="address-item">
                    <div>
                        <div class="address-user">王大力</div>
                        <div class="address-phone">137****5555</div>
                        <div class="address-detail">上海市浦东新区陆家嘴环路1000号</div>
                    </div>
                    <button class="edit-address-btn">编辑</button>
                </div>
            </div>
        </div>
        
        <!-- 子页面：优惠券 -->
        <div id="coupon-page" class="sub-page">
            <div class="sub-header">
                <button class="back-btn" onclick="hideSubPage()">←</button>
                <h1>我的优惠券</h1>
            </div>
            <div class="coupon-tabs">
                <div class="coupon-tab active">可用(3)</div>
                <div class="coupon-tab">已用(1)</div>
                <div class="coupon-tab">已过期(2)</div>
            </div>
            <div class="coupon-list">
                <div class="coupon-card">
                    <div class="coupon-left">
                        <div class="coupon-price">¥20</div>
                        <div class="coupon-condition">满99可用</div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-name">新人专享券</div>
                        <div class="coupon-time">有效期至 2026.05.01</div>
                        <div class="coupon-desc">全品类通用</div>
                    </div>
                    <div class="coupon-use">立即使用</div>
                </div>
                <div class="coupon-card">
                    <div class="coupon-left">
                        <div class="coupon-price">¥50</div>
                        <div class="coupon-condition">满299可用</div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-name">会员专属券</div>
                        <div class="coupon-time">有效期至 2026.05.15</div>
                        <div class="coupon-desc">指定商品可用</div>
                    </div>
                    <div class="coupon-use">立即使用</div>
                </div>
                <div class="coupon-card">
                    <div class="coupon-left">
                        <div class="coupon-price">¥10</div>
                        <div class="coupon-condition">无门槛</div>
                    </div>
                    <div class="coupon-right">
                        <div class="coupon-name">限时秒杀券</div>
                        <div class="coupon-time">有效期至 2026.04.25</div>
                        <div class="coupon-desc">仅限秒杀商品</div>
                    </div>
                    <div class="coupon-use">立即使用</div>
                </div>
            </div>
        </div>
        
        <!-- 子页面：提货二维码 -->
        <div id="pickup-page" class="sub-page">
            <div class="sub-header">
                <button class="back-btn" onclick="hideSubPage()">←</button>
                <h1>提货二维码</h1>
            </div>
            <div class="pickup-content">
                <div class="pickup-info">
                    <p>请将此二维码出示给门店工作人员扫描</p>
                    <p class="pickup-code">会员码：V88888888</p>
                </div>
                <div class="qrcode">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=V88888888">
                </div>
                <button class="refresh-btn" onclick="alert('二维码已刷新')">刷新二维码</button>
            </div>
        </div>
        
        <!-- 子页面：联系客服 -->
        <div id="service-page" class="sub-page">
            <div class="sub-header">
                <button class="back-btn" onclick="hideSubPage()">←</button>
                <h1>联系客服</h1>
            </div>
            <div class="service-content">
                <div class="service-info">
                    <div class="service-avatar"><img src="https://picsum.photos/140/140?random=20"></div>
                    <div class="service-name">在线客服小优</div>
                    <div class="service-status">在线 · 随时为您服务</div>
                </div>
                <div class="service-buttons">
                    <button class="service-btn-item" onclick="alert('打开在线聊天')">
                        <span>💬</span>
                        <span>在线聊天</span>
                    </button>
                    <button class="service-btn-item" onclick="alert('拨打电话：400-888-8888')">
                        <span>📞</span>
                        <span>电话客服</span>
                    </button>
                    <button class="service-btn-item" onclick="alert('查看常见问题')">
                        <span>❓</span>
                        <span>常见问题</span>
                    </button>
                </div>
                <div class="service-hotline">
                    <div class="hotline-title">客服热线</div>
                    <div class="hotline-number">400-888-8888</div>
                    <div class="hotline-time">服务时间：9:00 - 21:00</div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let cartTotal = 0;
        
        function switchPage(page) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById(page).classList.add('active');
        }
        
        function switchMsgTab(el, type) {
            document.querySelectorAll('.msg-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            document.getElementById('delivery-list').classList.add('hidden');
            document.getElementById('order-list').classList.add('hidden');
            if (type === 'delivery') document.getElementById('delivery-list').classList.remove('hidden');
            else document.getElementById('order-list').classList.remove('hidden');
        }
        
        function switchCategory(el) {
            document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
        }
        
        function showProductDetail() {
            switchPage('product-detail');
        }
        
        function showSubPage(name) {
            document.getElementById(name + '-page').classList.add('active');
        }
        
        function hideSubPage() {
            document.querySelectorAll('.sub-page').forEach(p => p.classList.remove('active'));
        }
        
        function addToCart() {
            cartTotal += 19.9;
            document.querySelectorAll('.cart-price').forEach(el => el.textContent = '¥ ' + cartTotal.toFixed(2));
            alert('已添加到购物车');
        }
        
        function checkout() {
            if (cartTotal === 0) {
                alert('购物车为空，请先添加商品');
            } else {
                alert('正在跳转订单确认页面...');
            }
        }
        
        function copyGroupInfo() {
            alert('已复制团购信息到剪贴板');
        }
    </script>
</body>
</html>