编辑页面

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; }
        
        .page { max-width: 430px; margin: 0 auto; background: #fff; min-height: 100vh; position: relative; padding-bottom: 60px; }
        
        /* 顶部导航栏 */
        .header { background: linear-gradient(135deg, #07c160, #10b981); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 100; }
        .header-content { display: flex; align-items: center; justify-content: space-between; }
        .header-title { font-size: 18px; font-weight: 600; }
        .header-btn { background: none; border: none; color: #fff; font-size: 14px; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
        
        /* 搜索页 */
        .search-page { display: none; min-height: 100vh; background: #fff; max-width: 430px; margin: 0 auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; }
        .search-page.active { display: block; }
        .search-header { background: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
        .search-input-wrap { flex: 1; display: flex; align-items: center; background: #f5f5f5; border-radius: 20px; padding: 10px 16px; }
        .search-input-wrap input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
        .search-back { width: 24px; height: 24px; cursor: pointer; }
        .search-cancel { display: none; }
        
        /* 搜索历史 */
        .search-history { padding: 16px; background: #fff; margin-bottom: 12px; }
        .search-history-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .search-history-title span { font-size: 14px; color: #666; }
        .search-history-title button { background: none; border: none; color: #999; font-size: 12px; cursor: pointer; }
        .search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .search-tag { padding: 6px 12px; background: #f5f5f5; border-radius: 16px; font-size: 12px; color: #666; cursor: pointer; }
        
        /* 搜索结果 */
        .search-results-header { padding: 12px 16px; background: #fff; display: flex; justify-content: space-around; border-bottom: 1px solid #f0f0f0; }
        .search-result-tab { font-size: 14px; color: #666; padding: 8px 0; cursor: pointer; }
        .search-result-tab.active { color: #07c160; font-weight: 600; }
        
        /* 搜索商品网格 */
        .search-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
        
        /* 搜索空状态 */
        .search-empty { text-align: center; padding: 60px 20px; color: #999; }
        .search-empty img { width: 120px; height: 120px; margin-bottom: 20px; opacity: 0.5; }
        
        /* 搜索框（首页） */
        .search-box { background: #fff; border-radius: 20px; padding: 10px 16px; margin: 12px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .search-box input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
        .search-box input::placeholder { color: #999; }
        
        /* Banner轮播 */
        .banner { margin: 16px; border-radius: 12px; overflow: hidden; position: relative; }
        .banner img { width: 100%; height: 160px; object-fit: cover; }
        .banner > a { display: block; }
        .banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
        .banner-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); }
        .banner-dot.active { background: #fff; }
        
        /* 分类快捷入口 */
        .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 16px; }
        .category-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
        .category-icon { width: 50px; height: 50px; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
        .category-icon img { width: 100%; height: 100%; object-fit: cover; }
        .category-icon > a { display: block; }
        .category-name { font-size: 12px; color: #333; }
        
        /* 区块标题 */
        .section-title { padding: 16px 16px 12px; display: flex; justify-content: space-between; align-items: center; }
        .section-title h3 { font-size: 16px; font-weight: 600; color: #333; }
        .section-title span { font-size: 13px; color: #999; cursor: pointer; }
        
        /* 商品卡片网格 */
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
        .product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
        .product-card img { width: 100%; height: 150px; object-fit: cover; }
        .product-card > a { display: block; }
        .product-info { padding: 12px; }
        .product-name { font-size: 14px; color: #333; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .product-origin { font-size: 12px; color: #999; margin-top: 4px; }
        .product-price { font-size: 16px; color: #ff4d4f; font-weight: 600; margin-top: 8px; }
        
        /* 分类页面 */
        .category-tabs { display: flex; padding: 12px 16px; gap: 12px; overflow-x: auto; background: #fff; border-bottom: 1px solid #f0f0f0; }
        .category-tab { padding: 8px 16px; background: #f5f5f5; border-radius: 20px; font-size: 14px; color: #666; white-space: nowrap; cursor: pointer; flex-shrink: 0; }
        .category-tab.active { background: #07c160; color: #fff; }
        
        .filter-bar { display: flex; padding: 12px 16px; justify-content: space-between; align-items: center; background: #fff; }
        .filter-item { font-size: 13px; color: #666; display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .filter-item.active { color: #07c160; }
        
        /* 我的商品页面 */
        .my-product-item { display: flex; padding: 16px; background: #fff; border-radius: 12px; margin: 12px 16px; gap: 12px; }
        .my-product-item img { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; background: #f5f5f5; }
        .my-product-item > a { display: block; flex-shrink: 0; }
        .my-product-info { flex: 1; display: flex; flex-direction: column; }
        .my-product-info h4 { font-size: 15px; color: #333; font-weight: 500; }
        .my-product-info .origin { font-size: 12px; color: #999; margin-top: 4px; }
        .my-product-info .price { font-size: 16px; color: #ff4d4f; font-weight: 600; margin-top: 8px; }
        .my-product-actions { display: flex; gap: 8px; margin-top: auto; }
        .my-product-actions button { padding: 6px 12px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; }
        .btn-edit { background: #e6f7ff; color: #1890ff; }
        .btn-delete { background: #fff1f0; color: #ff4d4f; }
        .my-product-empty { text-align: center; padding: 60px 20px; color: #999; }
        .my-product-empty img { width: 100px; height: 100px; margin-bottom: 16px; opacity: 0.5; }
        
        /* 个人中心 */
        .profile-header { background: linear-gradient(135deg, #07c160, #10b981); padding: 30px 20px; color: #fff; text-align: center; }
        .profile-avatar { width: 70px; height: 70px; border-radius: 50%; background: #fff; margin: 0 auto 12px; overflow: hidden; }
        .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .profile-avatar > a { display: block; }
        .profile-name { font-size: 18px; font-weight: 500; }
        .profile-phone { font-size: 13px; opacity: 0.8; margin-top: 4px; }
        .login-btn { display: inline-block; background: #fff; color: #07c160; padding: 8px 24px; border-radius: 20px; font-size: 14px; font-weight: 500; margin-top: 12px; cursor: pointer; border: none; }
        
        .menu-list { padding: 16px; }
        .menu-section { margin-bottom: 16px; }
        .menu-section-title { font-size: 12px; color: #999; margin-bottom: 8px; padding-left: 4px; }
        .menu-item { display: flex; align-items: center; padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
        .menu-icon { width: 40px; height: 40px; border-radius: 10px; margin-right: 12px; overflow: hidden; background: #f5f5f5; }
        .menu-icon img { width: 100%; height: 100%; object-fit: cover; }
        .menu-text { flex: 1; font-size: 15px; color: #333; }
        .menu-badge { background: #ff4d4f; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 8px; }
        .menu-arrow { color: #ccc; font-size: 14px; }
        
        /* 功能入口网格 */
        .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #f5f5f5; padding: 0; }
        .feature-item { display: flex; flex-direction: column; align-items: center; padding: 16px; background: #fff; cursor: pointer; }
        .feature-item img { width: 28px; height: 28px; margin-bottom: 8px; }
        .feature-item span { font-size: 12px; color: #666; }
        .feature-item .badge { background: #ff4d4f; color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 10px; margin-left: 4px; }
        
        /* 个人中心 - 简洁卡片 */
        .profile-feature-card { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; position: relative; }
        .profile-feature-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
        .profile-feature-icon svg { width: 22px; height: 22px; }
        .profile-feature-text { font-size: 13px; color: #333; }
        .profile-feature-card .badge { position: absolute; top: 8px; right: 8px; background: #ff4d4f; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
        
        /* 个人中心 - 菜单项 */
        .profile-menu-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border-radius: 10px; margin-bottom: 10px; cursor: pointer; font-size: 14px; color: #333; }
        .profile-menu-item:active { background: #f5f5f5; }
        
        /* 底部标签栏 */
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; display: flex; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
        .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 0; cursor: pointer; }
        .tab-item img { width: 24px; height: 24px; margin-bottom: 4px; }
        .tab-item span { font-size: 11px; color: #999; }
        .tab-item.active span { color: #07c160; }
        
        /* 隐藏页面 */
        .page-section { display: none; }
        .page-section.active { display: block; }
        
        /* 商品详情弹窗 */
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; }
        .modal.show { display: flex; align-items: flex-end; }
        .modal-content { background: #fff; width: 100%; max-width: 430px; margin: 0 auto; border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; }
        .modal-header { position: relative; }
        .modal-header img { width: 100%; height: 280px; object-fit: cover; background: #f5f5f5; }
        .modal-header > a { display: block; }
        .modal-header > a > img { width: 100%; height: 280px; object-fit: cover; }
        .modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .modal-body { padding: 20px; }
        .modal-body h2 { font-size: 18px; color: #333; font-weight: 600; }
        .modal-price { font-size: 24px; color: #ff4d4f; font-weight: 600; margin: 12px 0; }
        .modal-desc { font-size: 14px; color: #666; line-height: 1.6; margin-top: 16px; }
        .modal-contact { display: flex; align-items: center; padding: 12px; background: #f5f5f5; border-radius: 8px; margin-top: 16px; }
        .modal-contact img { width: 40px; height: 40px; border-radius: 8px; margin-right: 12px; object-fit: cover; background: #f5f5f5; }
        .modal-contact > a { flex-shrink: 0; }
        .modal-contact-info { flex: 1; }
        .modal-contact-info .name { font-size: 14px; color: #333; font-weight: 500; }
        .modal-contact-info .phone { font-size: 12px; color: #999; margin-top: 2px; }
        .modal-contact .phone-btn { background: #07c160; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; cursor: pointer; }
        
        /* 发布商品弹窗 */
        .publish-form { padding: 20px; }
        .form-item { margin-bottom: 20px; }
        .form-item label { display: block; font-size: 14px; color: #333; font-weight: 500; margin-bottom: 8px; }
        .form-item input, .form-item select, .form-item textarea { width: 100%; padding: 12px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; }
        .form-item textarea { height: 100px; resize: none; }
        .form-item input:focus, .form-item select:focus, .form-item textarea:focus { border-color: #07c160; }
        
        /* 图片上传 */
        .image-upload-wrap { display: flex; flex-wrap: wrap; gap: 12px; }
        .upload-item { width: 80px; height: 80px; border-radius: 8px; overflow: hidden; position: relative; }
        .upload-item img { width: 100%; height: 100%; object-fit: cover; }
        .upload-item > a { display: block; }
        .upload-item .remove-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: none; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .upload-add { width: 80px; height: 80px; border: 2px dashed #ddd; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
        .upload-add img { width: 32px; height: 32px; margin-bottom: 4px; }
        .upload-add span { font-size: 11px; color: #999; }
        
        .submit-btn { width: 100%; padding: 14px; background: #07c160; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; }
        
        /* 登录弹窗 */
        .login-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
        .login-modal.show { display: flex; }
        .login-content { background: #fff; padding: 40px; border-radius: 16px; text-align: center; width: 280px; position: relative; }
        .login-content img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px; object-fit: cover; background: #f5f5f5; }
        .login-content > a { display: inline-block; }
        .login-content h3 { font-size: 18px; color: #333; margin-bottom: 8px; }
        .login-content p { font-size: 13px; color: #999; margin-bottom: 24px; }
        .login-btn-wechat { width: 100%; padding: 14px; background: #07c160; color: #fff; border: none; border-radius: 24px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .login-btn-wechat img { width: 20px; height: 20px; }
        .close-login { position: absolute; top: 12px; right: 12px; color: #999; font-size: 24px; cursor: pointer; }
        
        /* 我的收藏页 */
        .collect-page { display: none; min-height: 100vh; background: #f5f5f5; }
        .collect-page.active { display: block; }
        .collect-empty { text-align: center; padding: 80px 20px; }
        .collect-empty img { width: 100px; height: 100px; margin-bottom: 16px; opacity: 0.5; }
        .collect-empty p { color: #999; font-size: 14px; margin-bottom: 20px; }
        .go-shop-btn { display: inline-block; background: #07c160; color: #fff; padding: 10px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        
        /* 最近浏览页 */
        .browse-page { display: none; min-height: 100vh; background: #f5f5f5; }
        .browse-page.active { display: block; }
        .browse-item { display: flex; padding: 16px; background: #fff; margin: 12px 16px; border-radius: 12px; gap: 12px; cursor: pointer; }
        .browse-item img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: #f5f5f5; }
        .browse-item > a { display: block; flex-shrink: 0; }
        .browse-info { flex: 1; }
        .browse-info h4 { font-size: 14px; color: #333; font-weight: 500; }
        .browse-info .origin { font-size: 12px; color: #999; margin-top: 4px; }
        .browse-info .price { font-size: 16px; color: #ff4d4f; font-weight: 600; margin-top: 8px; }
        .browse-info .time { font-size: 11px; color: #ccc; margin-top: 4px; }
        .browse-empty { text-align: center; padding: 80px 20px; }
        .browse-empty img { width: 100px; height: 100px; margin-bottom: 16px; opacity: 0.5; }
        .browse-empty p { color: #999; font-size: 14px; }
        
        /* 关于我们页 */
        .about-page { display: none; min-height: 100vh; background: #fff; }
        .about-page.active { display: block; }
        .about-header { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #07c160, #10b981); color: #fff; }
        .about-logo { width: 80px; height: 80px; border-radius: 16px; margin: 0 auto 16px; background: #fff; overflow: hidden; }
        .about-logo img { width: 100%; height: 100%; object-fit: cover; }
        .about-logo > a { display: block; }
        .about-name { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .about-version { font-size: 13px; opacity: 0.8; }
        .about-content { padding: 20px; }
        .about-section { margin-bottom: 24px; }
        .about-section h3 { font-size: 15px; color: #333; font-weight: 600; margin-bottom: 12px; }
        .about-section p { font-size: 14px; color: #666; line-height: 1.8; }
        
        /* Toast提示 */
        #toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 3000; display: none; }
        
        /* 确认弹窗 */
        .confirm-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2500; align-items: center; justify-content: center; }
        .confirm-modal.show { display: flex; }
        .confirm-content { background: #fff; padding: 24px; border-radius: 12px; width: 280px; text-align: center; }
        .confirm-content h3 { font-size: 16px; color: #333; margin-bottom: 12px; }
        .confirm-content p { font-size: 14px; color: #666; margin-bottom: 24px; }
        .confirm-btns { display: flex; gap: 12px; }
        .confirm-btns button { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; cursor: pointer; }
        .confirm-cancel { background: #f5f5f5; color: #666; border: none; }
        .confirm-ok { background: #07c160; color: #fff; border: none; }
    </style>
</head>
<body>
    <div class="page" id="mainPage">
        <!-- 首页 -->
        <div id="page-home" class="page-section active">
            <div class="header">
                <div class="header-content">
                    <span class="header-title">鲜生活</span>
                    <button class="header-btn">消息</button>
                </div>
            </div>
            
            <div class="search-box" onclick="showSearchPage()">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#999"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                <input type="text" placeholder="搜索果蔬商品" readonly>
            </div>
            
            <div class="banner">
                <a href="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1200" target="_blank" rel="noopener noreferrer">
                    <img src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=800" alt="banner">
                </a>
                <div class="banner-dots">
                    <span class="banner-dot active"></span>
                    <span class="banner-dot"></span>
                    <span class="banner-dot"></span>
                </div>
            </div>
            
            <div class="category-grid">
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/1656666/pexels-photo-1656666.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/1656666/pexels-photo-1656666.jpeg?auto=compress&cs=tinysrgb&w=100" alt="蔬菜"></a></div>
                    <span class="category-name">蔬菜类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/2433643/pexels-photo-2433643.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/2433643/pexels-photo-2433643.jpeg?auto=compress&cs=tinysrgb&w=100" alt="肉食"></a></div>
                    <span class="category-name">肉食类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=100" alt="瓜果"></a></div>
                    <span class="category-name">瓜果类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/3007409/pexels-photo-3007409.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/3007409/pexels-photo-3007409.jpeg?auto=compress&cs=tinysrgb&w=100" alt="菌菇"></a></div>
                    <span class="category-name">菌菇类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=100" alt="土特产"></a></div>
                    <span class="category-name">土特产类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/4200/pexels-photo-4200.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/4200/pexels-photo-4200.jpeg?auto=compress&cs=tinysrgb&w=100" alt="坚果"></a></div>
                    <span class="category-name">坚果类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/1435907/pexels-photo-1435907.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/1435907/pexels-photo-1435907.jpeg?auto=compress&cs=tinysrgb&w=100" alt="粮油"></a></div>
                    <span class="category-name">粮油类</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="category-icon"><a href="https://images.pexels.com/photos/1407305/pexels-photo-1407305.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer" onclick="event.stopPropagation();"><img src="https://images.pexels.com/photos/1407305/pexels-photo-1407305.jpeg?auto=compress&cs=tinysrgb&w=100" alt="其他"></a></div>
                    <span class="category-name">其他</span>
                </div>
            </div>
            
            <div class="section-title">
                <h3>精选好货</h3>
                <span onclick="goPage('category')">查看更多 ></span>
            </div>
            
            <div class="product-grid" id="home-products"></div>
        </div>
        
        <!-- 商品分类页 -->
        <div id="page-category" class="page-section">
            <div class="header">
                <div class="header-content">
                    <span class="header-title">商品分类</span>
                </div>
            </div>
            
            <div class="category-tabs">
                <span class="category-tab active" data-category="all">全部</span>
                <span class="category-tab" data-category="vegetable">蔬菜类</span>
                <span class="category-tab" data-category="meat">肉食类</span>
                <span class="category-tab" data-category="fruit">瓜果类</span>
                <span class="category-tab" data-category="mushroom">菌菇类</span>
                <span class="category-tab" data-category="specialty">土特产类</span>
                <span class="category-tab" data-category="nuts">坚果类</span>
                <span class="category-tab" data-category="oil">粮油</span>
                <span class="category-tab" data-category="other">其他</span>
            </div>
            
            <div class="filter-bar">
                <span class="filter-item active" data-sort="default">综合</span>
                <span class="filter-item" data-sort="newest">最新</span>
                <span class="filter-item" data-sort="price-asc">价格⬆</span>
                <span class="filter-item" data-sort="price-desc">价格⬇</span>
            </div>
            
            <div class="product-grid" id="category-products"></div>
        </div>
        
        <!-- 我的商品页 -->
        <div id="page-myproduct" class="page-section">
            <div class="header">
                <div class="header-content">
                    <span class="header-title">我的商品</span>
                    <button class="header-btn" onclick="showPublishModal()">+ 发布</button>
                </div>
            </div>
            
            <div class="my-product-list" id="my-products"></div>
        </div>
        
        <!-- 个人中心页 -->
        <div id="page-profile" class="page-section">
            <div class="profile-header">
                <div class="profile-avatar">
                    <a href="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer"><img src="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=200" alt="avatar" id="avatar-img"></a>
                </div>
                <div class="profile-name" id="profile-name">游客用户</div>
                <div class="profile-phone" id="profile-phone">点击登录获取更多功能</div>
                <button class="login-btn" onclick="showLoginModal()" id="login-btn">微信一键登录</button>
            </div>
            
            <!-- 功能入口 - 简洁卡片式 -->
            <div style="padding: 16px;">
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
                    <div class="profile-feature-card" onclick="showCollectPage()">
                        <div class="profile-feature-icon" style="background: linear-gradient(135deg, #ff6b6b, #ee5a5a);">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                        </div>
                        <span class="profile-feature-text">我的收藏</span>
                        <span class="badge" id="collect-count" style="display:none;">0</span>
                    </div>
                    <div class="profile-feature-card" onclick="showBrowsePage()">
                        <div class="profile-feature-icon" style="background: linear-gradient(135deg, #4ecdc4, #44a08d);">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
                        </div>
                        <span class="profile-feature-text">最近浏览</span>
                    </div>
                    <div class="profile-feature-card" onclick="showAboutPage()">
                        <div class="profile-feature-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                            <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                        </div>
                        <span class="profile-feature-text">关于我们</span>
                    </div>
                </div>
            </div>
            
            <!-- 简洁功能列表 -->
            <div style="padding: 0 16px;">
                <div class="profile-menu-item" onclick="showToast('功能开发中')">
                    <span>联系客服</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#ccc"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
                <div class="profile-menu-item" onclick="showToast('已清除缓存')">
                    <span>清除缓存</span>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#ccc"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>
            </div>
            
            <div style="padding: 24px 16px; text-align: center;">
                <p style="color: #999; font-size: 12px;">鲜生活 v1.0.0</p>
                <p style="color: #ccc; font-size: 11px; margin-top: 4px;">让新鲜触手可及</p>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item active" data-page="home" onclick="switchTab('home')">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2307c160'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E" alt="首页">
                <span>首页</span>
            </div>
            <div class="tab-item" data-page="category" onclick="switchTab('category')">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zM3 21.5h8v-8H3v8zm2-6h4v4H5v-4z'/%3E%3C/svg%3E" alt="分类">
                <span>分类</span>
            </div>
            <div class="tab-item" data-page="myproduct" onclick="switchTab('myproduct')">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E" alt="我的商品">
                <span>我的商品</span>
            </div>
            <div class="tab-item" data-page="profile" onclick="switchTab('profile')">
                <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E" alt="我的">
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <!-- 搜索页 -->
    <div class="search-page" id="searchPage">
        <div class="search-header">
            <svg class="search-back" onclick="closeSearchPage()" viewBox="0 0 24 24" fill="#666"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
            <div class="search-input-wrap">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="#999"><path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                <input type="text" id="search-input" placeholder="搜索商品/商家" onkeypress="handleSearch(event)">
            </div>
            <span class="search-cancel" onclick="closeSearchPage()">取消</span>
        </div>
        
        <div class="search-history" id="search-history-section">
            <div class="search-history-title">
                <span>搜索历史</span>
                <button onclick="clearHistory()">清除</button>
            </div>
            <div class="search-tags" id="search-history-tags"></div>
        </div>
        
        <div class="search-results-header" id="search-results-header" style="display:none;">
            <span class="search-result-tab active" data-sort="default" onclick="changeSearchSort(this)">综合</span>
            <span class="search-result-tab" data-sort="price-asc" onclick="changeSearchSort(this)">价格⬆</span>
            <span class="search-result-tab" data-sort="price-desc" onclick="changeSearchSort(this)">价格⬇</span>
        </div>
        
        <div class="search-product-grid" id="search-results" style="display:none;"></div>
        
        <div class="search-empty" id="search-empty" style="display:none;">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E" alt="">
            <p>未找到相关商品</p>
        </div>
    </div>
    
    <!-- 我的收藏页 -->
    <div class="collect-page" id="collectPage">
        <div class="header">
            <div class="header-content">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" onclick="closeSubPage('collectPage')"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                <span class="header-title">我的收藏</span>
            </div>
        </div>
        <div id="collect-list"></div>
    </div>
    
    <!-- 最近浏览页 -->
    <div class="browse-page" id="browsePage">
        <div class="header">
            <div class="header-content">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" onclick="closeSubPage('browsePage')"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                <span class="header-title">最近浏览</span>
            </div>
        </div>
        <div id="browse-list"></div>
    </div>
    
    <!-- 关于我们页 -->
    <div class="about-page" id="aboutPage">
        <div class="header">
            <div class="header-content">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" onclick="closeSubPage('aboutPage')"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                <span class="header-title">关于我们</span>
            </div>
        </div>
        <div class="about-header">
<div class="about-logo">
                <a href="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=400" target="_blank" rel="noopener noreferrer"><img src="https://images.pexels.com/photos/1132558/pexels-photo-1132558.jpeg?auto=compress&cs=tinysrgb&w=200" alt="logo"></a>
            </div>
            <div class="about-name">鲜生活</div>
            <div class="about-version">Version 1.0.0</div>
        </div>
        <div class="about-content">
            <div class="about-section">
                <h3>产品介绍</h3>
                <p>鲜生活是一款专注于果蔬零售的小程序平台，致力于为用户提供新鲜、优质、实惠的果蔬产品。我们连接产地与餐桌，让新鲜触手可及。</p>
            </div>
            <div class="about-section">
                <h3>我们的使命</h3>
                <p>让每个人都能享受到新鲜、健康的农产品。通过严格的品控和高效的供应链，确保从田间到餐桌的每一环节都新鲜、安全。</p>
            </div>
            <div class="about-section">
                <h3>联系我们</h3>
                <p>客服热线：400-888-8888<br>邮箱：service@freshlife.com<br>地址：上海市浦东新区张江高科技园区</p>
            </div>
        </div>
    </div>
    
    <!-- 商品详情弹窗 -->
    <div class="modal" id="productModal">
        <div class="modal-content">
            <div class="modal-header">
                <a href="" target="_blank" rel="noopener noreferrer" id="modal-product-link"><img id="modal-product-img" src="" alt=""></a>
                <button class="modal-close" onclick="closeModal('productModal')">×</button>
            </div>
            <div class="modal-body">
                <h2 id="modal-product-name"></h2>
                <div class="modal-price" id="modal-product-price"></div>
                <div class="modal-desc" id="modal-product-desc"></div>
                <div class="modal-contact">
                    <a href="https://images.pexels.com/photos/2433643/pexels-photo-2433643.jpeg?auto=compress&cs=tinysrgb&w=200" target="_blank" rel="noopener noreferrer"><img id="modal-seller-img" src="https://images.pexels.com/photos/2433643/pexels-photo-2433643.jpeg?auto=compress&cs=tinysrgb&w=100" alt=""></a>
                    <div class="modal-contact-info">
                        <div class="name" id="modal-seller-name">商家名称</div>
                        <div class="phone" id="modal-phone">电话：138****8888</div>
                    </div>
                    <span class="phone-btn">联系商家</span>
                </div>
                <div style="display: flex; gap: 12px; margin-top: 16px;">
                    <button onclick="toggleCollect()" style="flex: 1; padding: 12px; border: 1px solid #07c160; background: #fff; color: #07c160; border-radius: 8px; font-size: 14px; cursor: pointer;" id="collect-btn">收藏</button>
                    <button onclick="closeModal('productModal')" style="flex: 1; padding: 12px; background: #07c160; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer;">返回</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 发布商品弹窗 -->
    <div class="modal" id="publishModal">
        <div class="modal-content">
            <div class="modal-header">
                <div style="padding: 16px; text-align: center; font-size: 18px; font-weight: 600; color: #333;">发布商品</div>
                <button class="modal-close" onclick="closeModal('publishModal')">×</button>
            </div>
            <div class="publish-form">
                <div class="form-item">
                    <label>商品图片（必填）</label>
                    <div class="image-upload-wrap" id="upload-wrap">
                        <div class="upload-add" onclick="addImage()">
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E" alt="">
                            <span>添加图片</span>
                        </div>
                    </div>
                </div>
                <div class="form-item">
                    <label>商品名称（必填）</label>
                    <input type="text" id="product-name" placeholder="请输入商品名称">
                </div>
                <div class="form-item">
                    <label>商品分类（必填）</label>
                    <select id="product-category">
                        <option value="">请选择分类</option>
                        <option value="vegetable">蔬菜类</option>
                        <option value="meat">肉食类</option>
                        <option value="fruit">瓜果类</option>
                        <option value="mushroom">菌菇类</option>
                        <option value="specialty">土特产类</option>
                        <option value="nuts">坚果类</option>
                        <option value="oil">粮油类</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-item">
                    <label>产地</label>
                    <input type="text" id="product-origin" placeholder="如：山东寿光">
                </div>
                <div class="form-item">
                    <label>价格（元/斤）</label>
                    <input type="number" id="product-price" placeholder="请输入价格">
                </div>
                <div class="form-item">
                    <label>商品描述</label>
                    <textarea id="product-desc" placeholder="请输入商品描述">
编辑页面

微信授权登录

确认删除
