编辑页面

页面标题

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

CSS文件（可选）

/* 酒水速达商城小程序 - 样式表 */

:root {
    --primary: #FF6B35;
    --secondary: #FFB800;
    --bg-dark: #0D0D0D;
    --bg-card: #1A1A1A;
    --bg-card2: #252525;
    --text-primary: #FFFFFF;
    --text-secondary: #999999;
    --success: #00C853;
    --warning: #FF3D00;
    --gold: #FFD700;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --tabbar-height: 56px;
    --header-height: 48px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: "PingFang SC", "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-dark);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

#app {
    min-height: 100vh;
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
}

.page {
    display: none;
    min-height: 100vh;
    background-color: var(--bg-dark);
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 首页样式 */
.home-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark) 80%, transparent 100%);
    padding: 12px 16px 20px;
}

.location-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.location-icon {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.location-icon svg {
    width: 100%;
    height: 100%;
}

.location-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.location-name {
    font-size: 16px;
    font-weight: 600;
}

.arrow-down {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    padding: 10px 16px;
    border-radius: 20px;
    color: var(--text-secondary);
}

.search-bar svg {
    width: 20px;
    height: 20px;
}

.search-bar span {
    font-size: 14px;
}

/* Banner */
.banner-section {
    padding: 0 16px;
    margin-top: -8px;
}

.banner-swiper {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    height: 160px;
}

.banner-track {
    display: flex;
    transition: transform 0.3s ease;
}

.banner-slide {
    min-width: 100%;
    height: 160px;
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.banner-bg {
    position: absolute;
    inset: 0;
}

.banner-1 { background: linear-gradient(135deg, #FF6B35, #FF8C00); }
.banner-2 { background: linear-gradient(135deg, #4169E1, #6495ED); }
.banner-3 { background: linear-gradient(135deg, #FFD700, #FFA500); }

.banner-content {
    position: relative;
    z-index: 1;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    width: fit-content;
}

.banner-content h3 {
    font-size: 20px;
    margin: 8px 0 4px;
}

.banner-content p {
    font-size: 14px;
    opacity: 0.9;
}

.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

.dot.active {
    background: #fff;
    width: 18px;
    border-radius: 3px;
}

/* 分类入口 */
.category-section {
    padding: 20px 16px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-icon svg {
    width: 24px;
    height: 24px;
}

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

/* 限时抢购 */
.flash-sale-section {
    padding: 0 16px;
}

.flash-sale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.flash-sale-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
}

.flash-sale-title svg {
    width: 20px;
    height: 20px;
}

.flash-sale-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.countdown {
    background: var(--bg-card);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--primary);
}

.flash-sale-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.flash-sale-item {
    min-width: 100px;
    flex-shrink: 0;
}

.flash-sale-img {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--bg-card);
}

.flash-sale-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flash-tag {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.flash-sale-info {
    margin-top: 8px;
    text-align: center;
}

.flash-price {
    display: block;
    color: var(--warning);
    font-weight: 600;
    font-size: 14px;
}

.flash-original {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: line-through;
}

/* 商品推荐 */
.recommend-section {
    padding: 20px 16px 40px;
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.section-title span:first-child {
    font-size: 16px;
    font-weight: 600;
}

.section-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.product-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.product-card:active {
    transform: scale(0.98);
}

.product-img {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-card2);
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.product-tag.promo {
    background: var(--warning);
}

.product-info {
    padding: 12px;
}

.product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    min-height: 36px;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.product-price {
    display: flex;
    flex-direction: column;
}

.product-current-price {
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
}

.product-current-price::before {
    content: '¥';
    font-size: 12px;
}

.product-original-price {
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: line-through;
}

.btn-add-cart {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-add-cart svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

/* 分类页 */
.category-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--bg-card);
}

.category-body {
    display: flex;
    height: calc(100vh - var(--tabbar-height) - 50px);
}

.category-nav {
    width: 80px;
    background: var(--bg-card);
    overflow-y: auto;
}

.nav-item {
    padding: 16px 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.nav-item.active {
    background: var(--bg-dark);
    color: var(--primary);
    border-left: 3px solid var(--primary);
}

.category-products {
    flex: 1;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow-y: auto;
    align-content: start;
}

/* 购物车 */
.cart-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--bg-card);
}

.page-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

.btn-back {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-back svg {
    width: 24px;
    height: 24px;
}

.btn-edit {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
}

.cart-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.cart-delivery-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,107,53,0.05));
    border-radius: var(--border-radius);
    margin-bottom: 16px;
}

.cart-delivery-info svg {
    width: 20px;
    height: 20px;
}

.cart-delivery-info span {
    font-size: 13px;
    color: var(--primary);
}

.cart-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
}

.cart-item .checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cart-item.selected .checkbox {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.cart-item .checkbox svg {
    width: 14px;
    height: 14px;
    display: none;
}

.cart-item.selected .checkbox svg {
    display: block;
}

.cart-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-card2);
}

.cart-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-name {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-sku {
    font-size: 12px;
    color: var(--text-secondary);
}

.cart-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cart-price {
    color: var(--primary);
    font-weight: 600;
}

.member-tag {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--bg-card2);
    border: none;
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
}

.quantity-num {
    min-width: 24px;
    text-align: center;
}

.cart-empty {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.cart-empty svg {
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

.cart-empty span {
    margin: 16px 0;
    color: var(--text-secondary);
}

.btn-go-shopping {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
}

.cart-selected-coupon,
.cart-reduction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-top: 12px;
}

.row-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.row-value {
    display: flex;
    align-items: center;
    gap: 4px;
}

.coupon-select {
    color: var(--primary);
    font-size: 13px;
}

.arrow {
    width: 16px;
    height: 16px;
}

.reduction-tag {
    background: rgba(255,107,53,0.1);
    color: var(--primary);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
}

.cart-member-benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05));
    border-radius: var(--border-radius);
    margin-top: 12px;
}

.cart-footer,
.cart-edit-footer {
    position: fixed;
    bottom: var(--tabbar-height);
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--bg-card2);
}

.select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.checkbox svg {
    width: 12px;
    height: 12px;
    display: none;
}

.checkbox.checked {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.checkbox.checked svg {
    display: block;
}

.cart-total {
    display: flex;
    align-items: center;
    gap: 12px;
}

.total-info {
    text-align: right;
}

.total-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.total-price {
    display: block;
    color: var(--primary);
    font-weight: 600;
    font-size: 16px;
}

.btn-checkout {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.edit-actions {
    display: flex;
    gap: 12px;
}

.btn-collect,
.btn-delete {
    background: var(--bg-card2);
    color: var(--text-primary);
    border: none;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

.btn-delete {
    color: var(--warning);
}

/* 个人中心 */
.profile-header {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-dark) 100%);
    padding: 16px;
    padding-top:32px;
}

.profile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-card2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar svg {
    width: 36px;
    height: 36px;
}

.user-info {
    flex: 1;
}

.user-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.member-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: #000;
}

.member-badge svg {
    width: 14px;
    height: 14px;
}

.btn-edit-profile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card2);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-edit-profile svg {
    width: 18px;
    height: 18px;
}

/* 会员卡 */
.member-card {
    background: linear-gradient(135deg, #1A1A1A, #252525);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: var(--border-radius-lg);
    padding: 16px;
}

.member-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.member-level {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
}

.member-level svg {
    width: 20px;
    height: 20px;
}

.member-link {
    font-size: 12px;
    color: var(--primary);
}

.member-privileges {
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.privilege-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.privilege-item svg {
    width: 24px;
    height: 24px;
}

.privilege-item span {
    font-size: 11px;
    color: var(--text-secondary);
}

.growth-progress {
    margin-top: 12px;
}

.growth-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.growth-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.growth-value {
    font-size: 12px;
    color: var(--gold);
}

.growth-bar {
    height: 6px;
    background: var(--bg-card2);
    border-radius: 3px;
    overflow: hidden;
}

.growth-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), #FFA500);
    border-radius: 3px;
}

.growth-levels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.growth-levels .active {
    color: var(--gold);
}

.growth-next {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.profile-body {
    padding: 16px;
}

.profile-section {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 16px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header span:first-child {
    font-size: 15px;
    font-weight: 600;
}

.more-link {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 订单Tab */
.order-tabs {
    display: flex;
    justify-content: space-around;
}

.order-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.tab-icon {
    position: relative;
    width: 36px;
    height: 36px;
}

.tab-icon svg {
    width: 28px;
    height: 28px;
}

.tab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.order-tab span:last-child {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 资产 */
.assets-grid {
    display: flex;
    justify-content: space-around;
}

.asset-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.asset-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.asset-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 工具 */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon svg {
    width: 22px;
    height: 22px;
}

.tool-item span {
    font-size: 11px;
    color: var(--text-secondary);
}

/* 菜单 */
.menu-list {
    background: var(--bg-card);
    border-radius: var(--border-radius);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bg-card2);
    cursor: pointer;
}

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

.menu-item svg:first-child {
    width: 22px;
    height: 22px;
}

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

/* 商品详情 */
.product-detail {
    min-height: 100vh;
    padding-bottom: 60px;
}

.detail-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(13,13,13,0.9);
    z-index: 100;
}

.detail-header .page-title {
    text-align: left;
}

.btn-share {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-share svg {
    width: 22px;
    height: 22px;
}

.detail-body {
    padding-bottom: 20px;
}

.detail-swiper {
    position: relative;
    height: 375px;
    background: var(--bg-card);
}

.detail-track {
    display: flex;
    height: 100%;
}

.detail-slide {
    min-width: 100%;
    height: 100%;
}

.detail-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.detail-info {
    padding: 16px;
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.detail-price {
    display: flex;
    align-items: baseline;
    color: var(--primary);
}

.price-symbol {
    font-size: 14px;
}

.price-value {
    font-size: 28px;
    font-weight: 700;
}

.member-price {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));
    padding: 4px 8px;
    border-radius: 8px;
}

.member-price svg {
    width: 16px;
    height: 16px;
}

.member-price span {
    font-size: 12px;
    color: var(--gold);
}

.detail-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.detail-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.detail-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.detail-section {
    padding: 16px;
    border-top: 1px solid var(--bg-card);
}

.detail-section .section-title {
    margin-bottom: 12px;
}

.sku-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sku-item {
    padding: 8px 16px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sku-item.active {
    background: var(--primary);
    color: #fff;
}

.delivery-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delivery-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-row svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.delivery-row span {
    font-size: 13px;
    color: var(--text-secondary);
}

.detail-content p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.detail-desc {
    margin-top: 12px;
    color: var(--text-primary) !important;
}

.detail-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--bg-card2);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.footer-left {
    display: flex;
    gap: 24px;
}

.footer-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.footer-icon svg {
    width: 22px;
    height: 22px;
}

.footer-icon span {
    font-size: 10px;
    color: var(--text-secondary);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.footer-actions {
    flex: 1;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.footer-actions .btn-add-cart {
    width: auto;
    padding: 0 20px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    background: var(--bg-card2);
    color: var(--text-primary);
}

.footer-actions .btn-buy-now {
    width: auto;
    padding: 0 20px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
}

/* 搜索页 */
.search-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--bg-card);
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: 20px;
}

.search-input-wrapper svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

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

.search-input-wrapper input::placeholder {
    color: var(--text-secondary);
}

.search-clear {
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

.search-clear svg {
    width: 16px;
    height: 16px;
}

.btn-cancel {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.search-hot {
    padding: 16px;
}

.hot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.hot-tag {
    background: var(--bg-card);
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 13px;
    cursor: pointer;
}

/* 优惠券 */
.coupon-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--bg-card);
}

.coupon-tabs {
    display: flex;
    background: var(--bg-card);
}

.coupon-tab {
    flex: 1;
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.coupon-tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.coupon-body {
    padding: 16px;
}

.coupon-card {
    display: flex;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.coupon-left {
    width: 90px;
    background: linear-gradient(135deg, var(--primary), #FF8C00);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.coupon-value {
    font-size: 32px;
    font-weight: 700;
}

.coupon-unit {
    font-size: 12px;
}

.coupon-right {
    flex: 1;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.coupon-condition,
.coupon-range,
.coupon-time {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
}

.btn-receive {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
}

/* 订单列表 */
.order-list-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--bg-card);
}

.order-list-tabs {
    display: flex;
    background: var(--bg-card);
    padding: 0 16px;
}

.order-list-tab {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.order-list-tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.order-list-body {
    padding: 16px;
}

.order-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
}

.order-list-empty svg {
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

.order-list-empty span {
    margin: 16px 0;
    color: var(--text-secondary);
}

.order-list-empty button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
}

/* 订单确认 */
.order-body {
    padding: 16px;
}

.address-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    cursor: pointer;
}

.address-info {
    flex: 1;
}

.address-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.address-name {
    font-size: 15px;
    font-weight: 600;
}

.address-phone {
    font-size: 14px;
    color: var(--text-secondary);
}

.address-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.address-tag.default {
    background: var(--primary);
    color: #fff;
}

.address-detail {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.address-detail svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.address-detail span {
    font-size: 13px;
    color: var(--text-secondary);
}

.delivery-time-section {
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.section-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.time-options {
    display: flex;
    gap: 12px;
}

.time-option {
    flex: 1;
    padding: 12px;
    background: var(--bg-card2);
    border-radius: 8px;
    cursor: pointer;
}

.time-option.active {
    background: rgba(255,107,53,0.2);
    border: 1px solid var(--primary);
}

.time-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
}

.time-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

.order-products {
    margin-bottom: 12px;
}

.product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-product-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
}

.order-product-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-card2);
}

.order-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-product-info {
    flex: 1;
}

.order-product-name {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.order-product-sku {
    font-size: 12px;
    color: var(--text-secondary);
}

.order-product-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.order-product-price {
    color: var(--primary);
    font-weight: 600;
}

.order-product-quantity {
    color: var(--text-secondary);
    font-size: 13px;
}

.order-coupon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    cursor: pointer;
}

.order-reduction {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.order-remark {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
}

.remark-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
}

.remark-input::placeholder {
    color: var(--text-secondary);
}

.order-amount {
    padding: 14px;
    background: var(--bg-card);
    border-radius: var(--border-radius);
}

.amount-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 8px;
}

.amount-row:last-child {
    margin-bottom: 0;
}

.amount-row.total {
    padding-top: 8px;
    border-top: 1px solid var(--bg-card2);
    font-weight: 600;
}

.amount-row.total span:last-child {
    color: var(--primary);
}

.order-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--bg-card2);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.order-total-info {
    flex: 1;
}

.order-total-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.order-total-price {
    display: block;
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
}

.btn-submit-order {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* TabBar */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--tabbar-height);
    background: var(--bg-card);
    border-top: 1px solid var(--bg-card2);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    cursor: pointer;
    position: relative;
}

.tab-item svg {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.tab-item span {
    font-size: 10px;
    color: var(--text-secondary);
}

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

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

.tab-badge {
    position: absolute;
    top: 0;
    right: 8px;
    background: var(--warning);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Toast */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

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

JS文件（可选）

// 酒水速达商城小程序 - JavaScript
// ========================================

// 商品数据
const products = [
    { id: '001', name: '百威啤酒 330ml*6瓶装 经典拉格', price: 39.9, originalPrice: 59, image: 'images/beer1.jpg', category: 'beer', tag: '爆款', memberPrice: 35.9, sku: '330ml*6瓶' },
    { id: '002', name: '科罗娜啤酒 330ml*6瓶 拉美风情', price: 49.9, originalPrice: 72, image: 'images/beer2.jpg', category: 'beer', tag: '热卖', memberPrice: 44.9, sku: '330ml*6瓶' },
    { id: '003', name: '喜力啤酒 330ml*6瓶 荷兰进口', price: 44.9, originalPrice: 65, image: 'images/beer1.jpg', category: 'beer', tag: '特惠', memberPrice: 39.9, sku: '330ml*6瓶' },
    { id: '004', name: '1664白啤酒 330ml*6瓶 法国进口', price: 59.9, originalPrice: 79, image: 'images/beer2.jpg', category: 'beer', memberPrice: 54.9, sku: '330ml*6瓶' },
    { id: '005', name: '青岛啤酒 500ml*12瓶 经典1903', price: 69.9, originalPrice: 89, image: 'images/beer1.jpg', category: 'beer', tag: '新品', memberPrice: 64.9, sku: '500ml*12瓶' },
    { id: '006', name: '人头马VSOP干邑白兰地 700ml', price: 399, originalPrice: 499, image: 'images/whisky.jpg', category: 'whisky', tag: '精选', memberPrice: 379, sku: '700ml' },
    { id: '007', name: '轩尼诗VS干邑白兰地 700ml', price: 459, originalPrice: 559, image: 'images/whisky.jpg', category: 'whisky', memberPrice: 439, sku: '700ml' },
    { id: '008', name: '芝华士12年苏格兰威士忌 750ml', price: 219, originalPrice: 269, image: 'images/whisky.jpg', category: 'whisky', tag: '热卖', memberPrice: 199, sku: '750ml' },
    { id: '009', name: '茅台飞天53度 500ml 酱香经典', price: 1499, originalPrice: 1699, image: 'images/baijiu.jpg', category: 'white', tag: '高端', memberPrice: 1399, sku: '500ml' },
    { id: '010', name: '五粮液52度 500ml 浓香型', price: 899, originalPrice: 999, image: 'images/baijiu.jpg', category: 'white', memberPrice: 859, sku: '500ml' },
    { id: '011', name: '拉菲传奇波尔多干红 750ml', price: 168, originalPrice: 228, image: 'images/wine.jpg', category: 'wine', memberPrice: 148, sku: '750ml' },
    { id: '012', name: '奔富洛神山庄赤霞珠 750ml', price: 89, originalPrice: 119, image: 'images/wine.jpg', category: 'wine', tag: '特惠', memberPrice: 79, sku: '750ml' },
    { id: '013', name: '可口可乐 330ml*6罐 经典汽水', price: 16.9, originalPrice: 22, image: 'images/cola.jpg', category: 'soft', memberPrice: 15.9, sku: '330ml*6罐' },
    { id: '014', name: '元气森林气泡水 480ml*6瓶', price: 35.9, originalPrice: 45, image: 'images/soda.jpg', category: 'soft', tag: '新品', memberPrice: 32.9, sku: '480ml*6瓶' },
    { id: '015', name: '农夫山泉NFC橙汁 300ml*4瓶', price: 29.9, originalPrice: 38, image: 'images/soda.jpg', category: 'soft', memberPrice: 27.9, sku: '300ml*4瓶' },
    { id: '016', name: '薯片组合大礼包 零食套餐', price: 39.9, originalPrice: 55, image: 'images/snacks.jpg', category: 'snacks', memberPrice: 36.9, sku: '组合装' },
    { id: '017', name: '百威啤酒 330ml*12瓶 整箱装', price: 75, originalPrice: 99, image: 'images/beer1.jpg', category: 'beer', tag: '划算', memberPrice: 68, sku: '330ml*12瓶' },
    { id: '018', name: '尊尼获加红牌威士忌 700ml', price: 189, originalPrice: 229, image: 'images/whisky.jpg', category: 'whisky', memberPrice: 175, sku: '700ml' }
];

// 优惠券数据
const coupons = [
    { id: 'c001', name: '新人专享券', value: 20, condition: '满99元可用', range: '全场通用', expireTime: '2026-04-30', status: 'available' },
    { id: 'c002', name: '啤酒专区券', value: 10, condition: '满59元可用', range: '仅限啤酒类', expireTime: '2026-04-25', status: 'available' },
    { id: 'c003', name: '满减券', value: 5, condition: '满39元可用', range: '全场通用', expireTime: '2026-04-20', status: 'available' },
    { id: 'c004', name: '会员专享券', value: 30, condition: '满159元可用', range: '仅限会员', expireTime: '2026-05-01', status: 'available' },
    { id: 'c005', name: '限时特惠券', value: 15, condition: '满79元可用', range: '部分商品', expireTime: '2026-03-15', status: 'expired' }
];

// 购物车数据
let cart = JSON.parse(localStorage.getItem('cart')) || [];

// 当前页面状态
let currentPage = 'home';
let pageHistory = [];

// ========================================
// 页面导航
// ========================================
function navigateTo(page, param) {
    // 隐藏TabBar
    const tabbar = document.getElementById('tabbar');
    if (page !== 'home' && page !== 'category' && page !== 'cart' && page !== 'profile') {
        tabbar.style.display = 'none';
    } else {
        tabbar.style.display = 'flex';
    }

    // 记录历史
    if (currentPage !== page) {
        pageHistory.push(currentPage);
    }

    // 切换页面
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    document.getElementById('page-' + page).classList.add('active');
    
    // 更新TabBar
    if (['home', 'category', 'cart', 'profile'].includes(page)) {
        document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
        document.querySelector(`.tab-item[data-page="${page}"]`).classList.add('active');
    }

    currentPage = page;

    // 页面特定初始化
    if (page === 'category') {
        renderCategoryProducts(param || 'beer');
    } else if (page === 'cart') {
        renderCart();
    } else if (page === 'coupon') {
        renderCoupons();
    } else if (page === 'order') {
        renderOrderProducts();
    } else if (page === 'product' && param) {
        loadProduct(param);
    } else if (page === 'search') {
        document.getElementById('search-input').focus();
    }
}

function goBack() {
    if (pageHistory.length > 0) {
        const prevPage = pageHistory.pop();
        navigateTo(prevPage);
    } else {
        navigateTo('home');
    }
}

function switchTab(page) {
    pageHistory = [];
    navigateTo(page);
}

// ========================================
// TabBar切换
// ========================================
document.querySelectorAll('.tab-item').forEach(tab => {
    tab.addEventListener('click', function() {
        const page = this.dataset.page;
        pageHistory = [];
        navigateTo(page);
    });
});

// ========================================
// 分类页
// ========================================
function selectCategory(el) {
    document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
    el.classList.add('active');
    const category = el.dataset.id;
    renderCategoryProducts(category);
}

function renderCategoryProducts(category) {
    const list = document.getElementById('category-products');
    const filteredProducts = products.filter(p => p.category === category);
    
    list.innerHTML = filteredProducts.map(p => `
        <div class="product-card" onclick="showProduct('${p.id}')">
            <div class="product-img">
                <img src="${p.image}" alt="${p.name}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23333%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22%3E图片%3C/text%3E%3C/svg%3E'">
                ${p.tag ? `<span class="product-tag">${p.tag}</span>` : ''}
            </div>
            <div class="product-info">
                <span class="product-name">${p.name}</span>
                <div class="product-bottom">
                    <div class="product-price">
                        <span class="product-current-price">¥${p.price}</span>
                        <span class="product-original-price">¥${p.originalPrice}</span>
                    </div>
                    <button class="btn-add-cart" onclick="event.stopPropagation(); quickAddToCart('${p.id}')">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

// ========================================
// 首页推荐
// ========================================
function renderRecommendProducts() {
    const grid = document.getElementById('recommend-grid');
    const recommendProducts = products.slice(0, 6);
    
    grid.innerHTML = recommendProducts.map(p => `
        <div class="product-card" onclick="showProduct('${p.id}')">
            <div class="product-img">
                <img src="${p.image}" alt="${p.name}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23333%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22%3E图片%3C/text%3E%3C/svg%3E'">
                ${p.tag ? `<span class="product-tag ${p.tag === '热卖' ? 'promo' : ''}">${p.tag}</span>` : ''}
            </div>
            <div class="product-info">
                <span class="product-name">${p.name}</span>
                <div class="product-bottom">
                    <div class="product-price">
                        <span class="product-current-price">¥${p.price}</span>
                        <span class="product-original-price">¥${p.originalPrice}</span>
                    </div>
                    <button class="btn-add-cart" onclick="event.stopPropagation(); quickAddToCart('${p.id}')">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

// ========================================
// 购物车
// ========================================
function quickAddToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (product) {
        const existItem = cart.find(item => item.id === productId);
        if (existItem) {
            existItem.quantity++;
        } else {
            cart.push({ ...product, quantity: 1, selected: true });
        }
        saveCart();
        updateCartBadge();
        showToast('已加入购物车');
    }
}

function addToCart() {
    const productId = document.getElementById('product-price').dataset.productId;
    quickAddToCart(productId);
}

function buyNow() {
    addToCart();
    navigateTo('order');
}

let isEditMode = false;

function renderCart() {
    const list = document.getElementById('cart-list');
    const empty = document.getElementById('cart-empty');
    const deliveryInfo = document.getElementById('cart-delivery-info');
    const couponRow = document.getElementById('cart-selected-coupon');
    const reduction = document.getElementById('cart-reduction');
    const memberBenefit = document.getElementById('cart-member-benefit');
    const footer = document.getElementById('cart-footer');
    const editFooter = document.getElementById('cart-edit-footer');
    
    if (cart.length === 0) {
        list.style.display = 'none';
        empty.style.display = 'flex';
        deliveryInfo.style.display = 'none';
        couponRow.style.display = 'none';
        reduction.style.display = 'none';
        memberBenefit.style.display = 'none';
        footer.style.display = 'none';
        editFooter.style.display = 'none';
        return;
    }
    
    list.style.display = 'flex';
    empty.style.display = 'none';
    deliveryInfo.style.display = 'block';
    couponRow.style.display = 'flex';
    reduction.style.display = 'flex';
    
    if (isEditMode) {
        footer.style.display = 'none';
        editFooter.style.display = 'flex';
    } else {
        footer.style.display = 'flex';
        editFooter.style.display = 'none';
    }
    
    updateDeliveryTime();
    
    list.innerHTML = cart.map((item, index) => `
        <div class="cart-item ${item.selected ? 'selected' : ''}" data-index="${index}">
            <div class="checkbox" onclick="toggleCartItem(${index})">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
            </div>
            <div class="cart-img" onclick="showProduct('${item.id}')">
                <img src="${item.image}" alt="${item.name}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23333%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22%3E图片%3C/text%3E%3C/svg%3E'">
            </div>
            <div class="cart-info">
                <span class="cart-name" onclick="showProduct('${item.id}')">${item.name}</span>
                <span class="cart-sku">${item.sku || '默认规格'}</span>
                <div class="cart-bottom">
                    <div class="price-group">
                        <span class="cart-price">¥${item.price}</span>
                        <span class="member-tag">会员价</span>
                    </div>
                    <div class="quantity-control">
                        <button class="quantity-btn" onclick="changeQuantity(${index}, -1)">-</button>
                        <span class="quantity-num">${item.quantity}</span>
                        <button class="quantity-btn" onclick="changeQuantity(${index}, 1)">+</button>
                    </div>
                </div>
            </div>
        </div>
    `).join('');
    
    updateCartTotal();
    updateReductionTip();
    updateMemberBenefit();
    updateSelectAll();
}

function updateDeliveryTime() {
    const now = new Date();
    const arrivalTime = new Date(now.getTime() + 30 * 60 * 1000);
    const timeStr = `${arrivalTime.getHours().toString().padStart(2, '0')}:${arrivalTime.getMinutes().toString().padStart(2, '0')}`;
    document.getElementById('delivery-time').textContent = timeStr;
}

function toggleCartItem(index) {
    cart[index].selected = !cart[index].selected;
    saveCart();
    renderCart();
}

function changeQuantity(index, delta) {
    cart[index].quantity += delta;
    if (cart[index].quantity <= 0) {
        cart.splice(index, 1);
    }
    saveCart();
    renderCart();
    updateCartBadge();
}

function toggleSelectAll() {
    const allSelected = cart.length > 0 && cart.every(item => item.selected);
    cart.forEach(item => item.selected = !allSelected);
    saveCart();
    renderCart();
}

function updateSelectAll() {
    const check = document.getElementById('select-all-check');
    const checkEdit = document.getElementById('select-all-check-edit');
    const anySelected = cart.some(item => item.selected);
    
    if (check) check.classList.toggle('checked', anySelected);
    if (checkEdit) checkEdit.classList.toggle('checked', anySelected);
}

function updateCartTotal() {
    const selectedItems = cart.filter(item => item.selected);
    const total = selectedItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
    
    document.getElementById('total-price').textContent = `¥${total.toFixed(2)}`;
    document.getElementById('checkout-count').textContent = `(${selectedItems.length})`;
}

function updateReductionTip() {
    const selectedItems = cart.filter(item => item.selected);
    const total = selectedItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
    const reductionTip = document.getElementById('reduction-tip');
    
    if (total >= 299) {
        reductionTip.textContent = '已满足满299减50条件';
    } else if (total >= 199) {
        reductionTip.textContent = '已满足满199减30条件';
    } else if (total >= 99) {
        reductionTip.textContent = '已满足满99减10条件';
    } else if (total > 0) {
        const diff = 99 - total;
        reductionTip.textContent = `再买¥${diff.toFixed(0)}，可减¥10`;
    } else {
        reductionTip.textContent = '满99减10 | 满199减30 | 满299减50';
    }
}

function updateMemberBenefit() {
    const selectedItems = cart.filter(item => item.selected);
    const total = selectedItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
    const originalTotal = selectedItems.reduce((sum, item) => sum + item.originalPrice * item.quantity, 0);
    const saving = originalTotal - total;
    
    const benefitText = document.getElementById('member-benefit-text');
    const benefitRow = document.getElementById('cart-member-benefit');
    if (saving > 0) {
        benefitText.textContent = `黄金会员已为您节省 ¥${saving.toFixed(2)}`;
        benefitRow.style.display = 'flex';
    } else {
        benefitRow.style.display = 'none';
    }
}

function toggleCartEdit() {
    isEditMode = !isEditMode;
    const btn = document.getElementById('cart-edit');
    btn.textContent = isEditMode ? '完成' : '编辑';
    renderCart();
}

function collectItems() {
    showToast(`已将 ${cart.filter(i => i.selected).length} 件商品移入收藏夹`);
}

function deleteSelected() {
    const selectedIndices = cart.map((item, index) => item.selected ? index : -1).filter(i => i >= 0);
    if (selectedIndices.length === 0) {
        showToast('请先选择要删除的商品');
        return;
    }
    
    selectedIndices.sort((a, b) => b - a).forEach(index => {
        cart.splice(index, 1);
    });
    
    saveCart();
    updateCartBadge();
    renderCart();
    showToast(`已删除 ${selectedIndices.length} 件商品`);
}

function saveCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
}

function updateCartBadge() {
    const count = cart.reduce((sum, item) => sum + item.quantity, 0);
    document.getElementById('cart-badge').textContent = count;
    document.getElementById('detail-cart-badge').textContent = count;
}

// ========================================
// 商品详情
// ========================================
function showProduct(productId) {
    navigateTo('product', productId);
}

function loadProduct(productId) {
    const product = products.find(p => p.id === productId);
    if (product) {
        document.getElementById('product-price').textContent = product.price;
        document.getElementById('product-price').dataset.productId = product.id;
        document.getElementById('product-title').textContent = product.name;
        document.getElementById('member-price').querySelector('span').textContent = `会员价 ¥${product.memberPrice}`;
        
        const detailImg = document.getElementById('detail-product-img');
        if (detailImg) {
            detailImg.src = product.image;
            detailImg.alt = product.name;
        }
        
        const skuList = document.querySelector('.sku-list');
        if (skuList) {
            const skuOptions = getSkuOptions(product.category);
            skuList.innerHTML = skuOptions.map((sku, idx) => 
                `<div class="sku-item ${idx === 0 ? 'active' : ''}" onclick="selectSku(this)">${sku}</div>`
            ).join('');
        }
        
        updateCartBadge();
    }
}

function getSkuOptions(category) {
    const skuMap = {
        'beer': ['330ml*6瓶', '330ml*12瓶', '500ml*6瓶', '500ml*12瓶'],
        'whisky': ['700ml', '1000ml', '礼盒装'],
        'white': ['500ml', '1000ml', '500ml*2瓶'],
        'wine': ['750ml', '1500ml', '375ml*2瓶'],
        'soft': ['330ml*6罐', '500ml*6瓶', '330ml*12罐'],
        'snacks': ['单品装', '组合装', '大礼包']
    };
    return skuMap[category] || ['标准装'];
}

function selectSku(el) {
    document.querySelectorAll('.sku-item').forEach(item => item.classList.remove('active'));
    el.classList.add('active');
}

// ========================================
// 优惠券
// ========================================
function renderCoupons() {
    const list = document.getElementById('coupon-list');
    const availableCoupons = coupons.filter(c => c.status === 'available');
    
    list.innerHTML = availableCoupons.map(c => `
        <div class="coupon-card">
            <div class="coupon-left">
                <span class="coupon-value">${c.value}</span>
                <span class="coupon-unit">元</span>
            </div>
            <div class="coupon-right">
                <div>
                    <span class="coupon-name">${c.name}</span>
                    <span class="coupon-condition">${c.condition}</span>
                    <span class="coupon-range">适用范围：${c.range}</span>
                    <span class="coupon-time">有效期至 ${c.expireTime}</span>
                </div>
                <button class="btn-receive" onclick="receiveCoupon('${c.id}')">立即领取</button>
            </div>
        </div>
    `).join('');
}
function receiveCoupon(id) {
    showToast('优惠券已领取');
}

function switchCouponTab(el, tab) {
    document.querySelectorAll('.coupon-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

// ========================================
// 确认订单
// ========================================
function renderOrderProducts() {
    const list = document.getElementById('order-products');
    const selectedItems = cart.filter(item => item.selected);
    
    list.innerHTML = selectedItems.map(item => `
        <div class="order-product-item">
            <div class="order-product-img">
                <img src="${item.image}" alt="${item.name}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23333%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22%3E图片%3C/text%3E%3C/svg%3E'">
            </div>
            <div class="order-product-info">
                <span class="order-product-name">${item.name}</span>
                <span class="order-product-sku">${item.sku}</span>
                <div class="order-product-bottom">
                    <span class="order-product-price">¥${item.price}</span>
                    <span class="order-product-quantity">x${item.quantity}</span>
                </div>
            </div>
        </div>
    `).join('');
    
    const goodsTotal = selectedItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
    document.getElementById('order-goods-total').textContent = `¥${goodsTotal.toFixed(2)}`;
    
    const reductionDiscount = goodsTotal >= 299 ? 50 : goodsTotal >= 199 ? 30 : goodsTotal >= 99 ? 10 : 0;
    const finalAmount = goodsTotal - 10 - reductionDiscount;
    document.getElementById('order-final-amount').textContent = `¥${finalAmount.toFixed(2)}`;
}

function selectTime(el) {
    document.querySelectorAll('.time-option').forEach(opt => opt.classList.remove('active'));
    el.classList.add('active');
}

function submitOrder() {
    showToast('订单提交成功');
    cart = cart.filter(item => !item.selected);
    saveCart();
    updateCartBadge();
    setTimeout(() => navigateTo('home'), 1500);
}

// ========================================
// 搜索
// ========================================
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', function() {
    const clearBtn = document.querySelector('.search-clear');
    clearBtn.style.display = this.value ? 'flex' : 'none';
    
    if (this.value.length >= 2) {
        doSearch(this.value);
    }
});

function doSearch(keyword) {
    document.getElementById('search-input').value = keyword;
    document.querySelector('.search-clear').style.display = 'flex';
    document.getElementById('search-hot').style.display = 'none';
    document.getElementById('search-result').style.display = 'block';
    
    const results = products.filter(p => 
        p.name.toLowerCase().includes(keyword.toLowerCase())
    );
    
    const grid = document.getElementById('result-grid');
    grid.innerHTML = results.map(p => `
        <div class="product-card" onclick="showProduct('${p.id}')">
            <div class="product-img">
                <img src="${p.image}" alt="${p.name}" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Crect fill=%22%23333%22 width=%22100%22 height=%22100%22/%3E%3Ctext x=%2250%22 y=%2255%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22%3E图片%3C/text%3E%3C/svg%3E'">
                ${p.tag ? `<span class="product-tag">${p.tag}</span>` : ''}
            </div>
            <div class="product-info">
                <span class="product-name">${p.name}</span>
                <div class="product-bottom">
                    <div class="product-price">
                        <span class="product-current-price">¥${p.price}</span>
                        <span class="product-original-price">¥${p.originalPrice}</span>
                    </div>
                    <button class="btn-add-cart" onclick="event.stopPropagation(); quickAddToCart('${p.id}')">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
    
    if (results.length === 0) {
        grid.innerHTML = '<p style="text-align:center;color:var(--text-secondary);padding:40px;">未找到相关商品</p>';
    }
}

function clearSearch() {
    document.getElementById('search-input').value = '';
    document.querySelector('.search-clear').style.display = 'none';
    document.getElementById('search-hot').style.display = 'block';
    document.getElementById('search-result').style.display = 'none';
}

// ========================================
// 倒计时
// ========================================
function startCountdown() {
    let endTime = new Date().getTime() + (2 * 60 * 60 + 35 * 60) * 1000;
    
    function update() {
        const now = new Date().getTime();
        const diff = endTime - now;
        
        if (diff <= 0) {
            document.getElementById('countdown').textContent = '00:00:00';
            return;
        }
        
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        document.getElementById('countdown').textContent = 
            `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    }
    
    update();
    setInterval(update, 1000);
}

// ========================================
// Toast提示
// ========================================
function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

// ========================================
// 订单列表Tab切换
// ========================================
function switchOrderTab(el, status) {
    document.querySelectorAll('.order-list-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
}

// ========================================
// 初始化
// ========================================
document.addEventListener('DOMContentLoaded', function() {
    renderRecommendProducts();
    updateCartBadge();
    startCountdown();
});

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>酒水速达 - 30分钟速达</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 首页 -->
        <div class="page page-home active" id="page-home">
            <!-- 顶部定位栏 -->
            <div class="home-header">
                <div class="location-bar">
                    <div class="location-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-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.5z"/></svg>
                    </div>
                    <div class="location-text">
                        <span class="location-name" id="location-name">科技园店</span>
                        <svg class="arrow-down" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>
                    </div>
                </div>
                <div class="search-bar" onclick="navigateTo('search')">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-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>
                    <span>搜索酒水饮料</span>
                </div>
            </div>

            <!-- 轮播Banner -->
            <div class="banner-section">
                <div class="banner-swiper" id="banner-swiper">
                    <div class="banner-track">
                        <div class="banner-slide" onclick="showToast('Banner活动：啤酒买一送一！')">
                            <div class="banner-bg banner-1"></div>
                            <div class="banner-content">
                                <span class="banner-tag">限时特惠</span>
                                <h3>啤酒买一送一</h3>
                                <p>百威、科罗娜限时活动</p>
                            </div>
                        </div>
                        <div class="banner-slide" onclick="showToast('Banner活动：新人立减20元！')">
                            <div class="banner-bg banner-2"></div>
                            <div class="banner-content">
                                <span class="banner-tag">新人专享</span>
                                <h3>首单立减20元</h3>
                                <p>新人专享优惠</p>
                            </div>
                        </div>
                        <div class="banner-slide" onclick="showToast('Banner活动：会员日来袭！')">
                            <div class="banner-bg banner-3"></div>
                            <div class="banner-content">
                                <span class="banner-tag">会员专享</span>
                                <h3>黄金会员日</h3>
                                <p>双倍积分等你拿</p>
                            </div>
                        </div>
                    </div>
                    <div class="banner-dots">
                        <span class="dot active"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>
            </div>

            <!-- 分类快捷入口 -->
            <div class="category-section">
                <div class="category-grid">
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=beer]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #FFD700, #FFA500);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path d="M5 21V5h2v16H5zm4 0V5h2v16H9zm4 0V5h2v16h-2zm4 0V5h2v16h-2z"/></svg>
                        </div>
                        <span>啤酒</span>
                    </div>
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=whisky]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #8B4513, #D2691E);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path d="M6 2l-2 2v6l2 2v8h12v-8l2-2V4l-2-2H6zm10 4H8V4h8v2z"/></svg>
                        </div>
                        <span>洋酒</span>
                    </div>
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=white]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #DC143C, #8B0000);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path d="M5 21V5h14v16H5zM7 7h10v2H7z"/></svg>
                        </div>
                        <span>白酒</span>
                    </div>
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=wine]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #722F37, #8B0000);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path d="M12 2C9.24 2 7 4.24 7 7v4H5c-1.1 0-2 .9-2 2v9h18v-9c0-1.1-.9-2-2-2h-2V7c0-2.76-2.24-5-5-5zm0 2c1.66 0 3 1.34 3 3v4H9V7c0-1.66 1.34-3 3-3z"/></svg>
                        </div>
                        <span>红酒</span>
                    </div>
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=soft]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #FF6347, #FF4500);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path d="M5 2v20h2V2H5zm12 0v20h2V2h-2zM9 4v16h6V4H9z"/></svg>
                        </div>
                        <span>饮料</span>
                    </div>
                    <div class="category-item" onclick="switchTab('category'); selectCategory(document.querySelector('[data-id=snacks]'))">
                        <div class="category-icon" style="background: linear-gradient(135deg, #FF8C00, #FFA500);">
                            <svg viewBox="0 0 24 24" fill="#FFF"><path 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.5z"/></svg>
                        </div>
                        <span>零食</span>
                    </div>
                </div>
            </div>

            <!-- 限时抢购 -->
            <div class="flash-sale-section">
                <div class="flash-sale-header">
                    <div class="flash-sale-title">
                        <svg viewBox="0 0 24 24" fill="#FF3D00"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                        <span>限时抢购</span>
                    </div>
                    <div class="flash-sale-countdown">
                        <span>距结束</span>
                        <span class="countdown" id="countdown">02:35:00</span>
                    </div>
                </div>
                <div class="flash-sale-scroll">
                    <div class="flash-sale-item">
                        <div class="flash-sale-img">
                            <img src="images/beer1.jpg" alt="百威啤酒">
                            <span class="flash-tag">秒杀</span>
                        </div>
                        <div class="flash-sale-info">
                            <span class="flash-price">¥35.9</span>
                            <span class="flash-original">¥59</span>
                        </div>
                    </div>
                    <div class="flash-sale-item">
                        <div class="flash-sale-img">
                            <img src="images/whisky.jpg" alt="威士忌">
                            <span class="flash-tag">秒杀</span>
                        </div>
                        <div class="flash-sale-info">
                            <span class="flash-price">¥189</span>
                            <span class="flash-original">¥259</span>
                        </div>
                    </div>
                    <div class="flash-sale-item">
                        <div class="flash-sale-img">
                            <img src="images/baijiu.jpg" alt="茅台">
                            <span class="flash-tag">秒杀</span>
                        </div>
                        <div class="flash-sale-info">
                            <span class="flash-price">¥1299</span>
                            <span class="flash-original">¥1699</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品推荐 -->
            <div class="recommend-section">
                <div class="section-title">
                    <span>为你推荐</span>
                    <span class="section-sub">根据你的喜好精选</span>
                </div>
                <div class="product-grid" id="recommend-grid">
                    <!-- 商品通过JS动态渲染 -->
                </div>
            </div>
        </div>

        <!-- 分类页 -->
        <div class="page page-category" id="page-category">
            <div class="category-header">
                <button class="btn-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </button>
                <span class="page-title">分类</span>
            </div>
            <div class="category-body">
                <div class="category-nav" id="category-nav">
                    <div class="nav-item active" data-id="beer" onclick="selectCategory(this)">啤酒</div>
                    <div class="nav-item" data-id="whisky" onclick="selectCategory(this)">洋酒</div>
                    <div class="nav-item" data-id="white" onclick="selectCategory(this)">白酒</div>
                    <div class="nav-item" data-id="wine" onclick="selectCategory(this)">红酒</div>
                    <div class="nav-item" data-id="soft" onclick="selectCategory(this)">饮料</div>
                    <div class="nav-item" data-id="snacks" onclick="selectCategory(this)">零食</div>
                </div>
                <div class="category-products" id="category-products">
                    <!-- 商品列表通过JS动态渲染 -->
                </div>
            </div>
        </div>

        <!-- 购物车页 -->
        <div class="page page-cart" id="page-cart">
            <div class="cart-header">
                <button class="btn-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </button>
                <span class="page-title">购物车</span>
                <button class="btn-edit" id="cart-edit" onclick="toggleCartEdit()">编辑</button>
            </div>

            <div class="cart-body">
                <div class="cart-delivery-info" id="cart-delivery-info">
                    <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    <span>预计 <span id="delivery-time">10:40</span> 前送达</span>
                </div>

                <div class="cart-list" id="cart-list">
                    <!-- 购物车商品通过JS动态渲染 -->
                </div>

                <div class="cart-empty" id="cart-empty" style="display:none;">
                    <svg viewBox="0 0 24 24" fill="#999"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    <span>购物车是空的</span>
                    <button class="btn-go-shopping" onclick="switchTab('home')">去逛逛</button>
                </div>

                <div class="cart-selected-coupon" id="cart-selected-coupon" onclick="navigateTo('coupon')">
                    <span class="row-label">优惠券</span>
                    <div class="row-value">
                        <span id="cart-coupon-select">选择优惠券</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                    </div>
                </div>

                <div class="cart-reduction" id="cart-reduction">
                    <span class="row-label">满减优惠</span>
                    <span class="reduction-tag" id="reduction-tip">满99减10 | 满199减30 | 满299减50</span>
                </div>

                <div class="cart-member-benefit" id="cart-member-benefit" style="display:none;">
                    <span class="member-tag">黄金会员</span>
                    <span id="member-benefit-text">已为您节省 ¥10.00</span>
                </div>
            </div>

            <!-- 结算底部栏 -->
            <div class="cart-footer" id="cart-footer">
                <div class="select-all" onclick="toggleSelectAll()">
                    <div class="checkbox" id="select-all-check">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </div>
                    <span>全选</span>
                </div>
                <div class="cart-total">
                    <div class="total-info">
                        <span class="total-label">合计</span>
                        <span class="total-price" id="total-price">¥0.00</span>
                    </div>
                    <button class="btn-checkout" id="checkout-btn" onclick="navigateTo('order')">去结算<span id="checkout-count">(0)</span></button>
                </div>
            </div>

            <!-- 编辑底部栏 -->
            <div class="cart-edit-footer" id="cart-edit-footer" style="display:none;">
                <div class="select-all" onclick="toggleSelectAll()">
                    <div class="checkbox" id="select-all-check-edit">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                    </div>
                    <span>全选</span>
                </div>
                <div class="edit-actions">
                    <button class="btn-collect" onclick="collectItems()">移入收藏</button>
                    <button class="btn-delete" onclick="deleteSelected()">删除</button>
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <div class="page page-profile" id="page-profile">
            <div class="profile-header">
                <div class="profile-user">
                    <div class="user-avatar">
                        <svg viewBox="0 0 24 24" fill="#999"><path 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"/></svg>
                    </div>
                    <div class="user-info">
                        <span class="user-name">酒水速达会员</span>
                        <div class="member-badge">
                            <svg viewBox="0 0 24 24" fill="#FFD700"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            <span>黄金会员</span>
                        </div>
                    </div>
                    <button class="btn-edit-profile">
                        <svg viewBox="0 0 24 24" fill="#999"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
                    </button>
                </div>

                <div class="member-card">
                    <div class="member-card-header">
                        <div class="member-level">
                            <svg viewBox="0 0 24 24" fill="#FFD700"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            <span>黄金会员</span>
                        </div>
                        <span class="member-link" onclick="showToast('查看全部权益')">查看全部权益 ></span>
                    </div>
                    <div class="member-privileges">
                        <div class="privilege-item">
                            <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1z"/></svg>
                            <span>专享价</span>
                        </div>
                        <div class="privilege-item">
                            <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                            <span>双倍积分</span>
                        </div>
                        <div class="privilege-item">
                            <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                            <span>生日礼包</span>
                        </div>
                    </div>
                    <div class="growth-progress">
                        <div class="growth-info">
                            <span class="growth-label">成长值</span>
                            <span class="growth-value">3,280</span>
                        </div>
                        <div class="growth-bar">
                            <div class="growth-fill" style="width: 65%;"></div>
                        </div>
                        <div class="growth-levels">
                            <span>青铜</span>
                            <span>白银</span>
                            <span class="active">黄金</span>
                            <span>钻石</span>
                        </div>
                        <div class="growth-next">再攒1,720即可升级钻石会员</div>
                    </div>
                </div>
            </div>

            <div class="profile-body">
                <div class="profile-section">
                    <div class="section-header">
                        <span>我的订单</span>
                        <span class="more-link" onclick="navigateTo('order-list')">全部订单 ></span>
                    </div>
                    <div class="order-tabs">
                        <div class="order-tab" onclick="navigateTo('order-list', 'pending')">
                            <div class="tab-icon">
                                <svg viewBox="0 0 24 24" fill="#666"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
                                <span class="tab-badge">2</span>
                            </div>
                            <span>待付款</span>
                        </div>
                        <div class="order-tab" onclick="navigateTo('order-list', 'delivering')">
                            <div class="tab-icon">
                                <svg viewBox="0 0 24 24" fill="#666"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
                                <span class="tab-badge">1</span>
                            </div>
                            <span>配送中</span>
                        </div>
                        <div class="order-tab" onclick="navigateTo('order-list', 'completed')">
                            <div class="tab-icon">
                                <svg viewBox="0 0 24 24" fill="#666"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                            </div>
                            <span>已完成</span>
                        </div>
                        <div class="order-tab" onclick="navigateTo('order-list', 'aftersale')">
                            <div class="tab-icon">
                                <svg viewBox="0 0 24 24" fill="#666"><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-2h2v2zm0-4h-2V7h2v6z"/></svg>
                            </div>
                            <span>售后</span>
                        </div>
                    </div>
                </div>

                <div class="profile-section assets-section">
                    <div class="section-header">
                        <span>账户资产</span>
                    </div>
                    <div class="assets-grid">
                        <div class="asset-item" onclick="showToast('积分商城')">
                            <span class="asset-value">1,280</span>
                            <span class="asset-label">积分</span>
                        </div>
                        <div class="asset-item" onclick="navigateTo('coupon')">
                            <span class="asset-value">5</span>
                            <span class="asset-label">优惠券</span>
                        </div>
                        <div class="asset-item" onclick="showToast('我的红包')">
                            <span class="asset-value">¥50</span>
                            <span class="asset-label">红包</span>
                        </div>
                        <div class="asset-item" onclick="showToast('我的足迹')">
                            <span class="asset-value">12</span>
                            <span class="asset-label">足迹</span>
                        </div>
                    </div>
                </div>

                <div class="profile-section tools-section">
                    <div class="section-header">
                        <span>常用工具</span>
                    </div>
                    <div class="tools-grid">
                        <div class="tool-item" onclick="showToast('积分商城')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #FFD700, #FFA500);">
                                <svg viewBox="0 0 24 24" fill="#FFF"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            </div>
                            <span>积分商城</span>
                        </div>
                        <div class="tool-item" onclick="showToast('邀请有礼')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #4169E1, #6495ED);">
                                <svg viewBox="0 0 24 24" fill="#FFF"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                            </div>
                            <span>邀请有礼</span>
                        </div>
                        <div class="tool-item" onclick="showToast('每日签到')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #32CD32, #228B22);">
                                <svg viewBox="0 0 24 24" fill="#FFF"><path 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-2 10H7v-2h10v2z"/></svg>
                            </div>
                            <span>每日签到</span>
                        </div>
                        <div class="tool-item" onclick="showToast('我的收藏')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #FF69B4, #FF1493);">
                                <svg 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>我的收藏</span>
                        </div>
                        <div class="tool-item" onclick="showToast('浏览记录')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #9370DB, #8A2BE2);">
                                <svg 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>浏览记录</span>
                        </div>
                        <div class="tool-item" onclick="showToast('我的评价')">
                            <div class="tool-icon" style="background: linear-gradient(135deg, #FFB800, #FF8C00);">
                                <svg viewBox="0 0 24 24" fill="#FFF"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                            </div>
                            <span>我的评价</span>
                        </div>
                    </div>
                </div>

                <div class="profile-section">
                    <div class="menu-list">
                        <div class="menu-item" onclick="showToast('发票管理')">
                            <svg viewBox="0 0 24 24" fill="#666"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
                            <span>发票管理</span>
                            <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                        </div>
                        <div class="menu-item" onclick="showToast('消息通知')">
                            <svg viewBox="0 0 24 24" fill="#666"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2V5h2v9zm0-11h-2V3h2v2zm4 11h-2V9h2v6zm0-7h-2V5h2v4zm-6 0H7V5h2v4z"/></svg>
                            <span>消息通知</span>
                            <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                        </div>
                        <div class="menu-item" onclick="showToast('设置')">
                            <svg viewBox="0 0 24 24" fill="#666"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                            <span>设置</span>
                            <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品详情页 -->
        <div class="page page-product" id="page-product">
            <div class="product-detail">
                <div class="detail-header">
                    <button class="btn-back" onclick="goBack()">
                        <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                    </button>
                    <span class="page-title">商品详情</span>
                    <button class="btn-share" onclick="showToast('分享功能')">
                        <svg viewBox="0 0 24 24" fill="#FFF"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
                    </button>
                </div>

                <div class="detail-body">
                    <div class="detail-swiper">
                        <div class="detail-track">
                            <div class="detail-slide">
                                <img id="detail-product-img" src="images/beer1.jpg" alt="商品图">
                            </div>
                        </div>
                        <div class="detail-dots">
                            <span class="dot active"></span>
                            <span class="dot"></span>
                            <span class="dot"></span>
                        </div>
                    </div>

                    <div class="detail-info">
                        <div class="detail-price-row">
                            <div class="detail-price">
                                <span class="price-symbol">¥</span>
                                <span class="price-value" id="product-price">39.9</span>
                            </div>
                            <div class="member-price" id="member-price">
                                <svg viewBox="0 0 24 24" fill="#FFD700"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                                <span>会员价 ¥35.9</span>
                            </div>
                        </div>
                        <div class="detail-title" id="product-title">百威啤酒 330ml*6瓶装 经典拉格啤酒</div>
                        <div class="detail-subtitle" id="product-subtitle">源自1895年，美国进口原料，口感醇厚</div>

                        <div class="detail-tags">
                            <span class="tag">30分钟送达</span>
                            <span class="tag">正品保障</span>
                            <span class="tag">假一赔十</span>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">规格选择</div>
                        <div class="sku-list">
                            <div class="sku-item active" onclick="selectSku(this)">330ml*6瓶</div>
                            <div class="sku-item" onclick="selectSku(this)">330ml*12瓶</div>
                            <div class="sku-item" onclick="selectSku(this)">500ml*6瓶</div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">配送信息</div>
                        <div class="delivery-info">
                            <div class="delivery-row">
                                <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                <span>配送时间：下单后30分钟内送达</span>
                            </div>
                            <div class="delivery-row">
                                <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                <span>配送方式：骑手配送·送货上门</span>
                            </div>
                            <div class="delivery-row">
                                <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                                <span>运费：满99元免运费</span>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <div class="section-title">商品详情</div>
                        <div class="detail-content" id="detail-product-content">
                            <p>【品牌】百威啤酒</p>
                            <p>【规格】330ml*6瓶</p>
                            <p>【产地】湖北武汉</p>
                            <p>【酒精度】≥3.6%vol</p>
                            <p>【保质期】12个月</p>
                            <p>【贮存条件】避光保存，冷藏口感更佳</p>
                            <p class="detail-desc">百威啤酒诞生于1876年，百年传承酿造工艺，甄选优质麦芽和啤酒花，泡沫细腻丰富，口感醇厚清爽。适合朋友聚会、撸串看球、家庭聚餐等多种场景。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作栏 -->
            <div class="detail-footer">
                <div class="footer-left">
                    <div class="footer-icon" onclick="navigateTo('home')">
                        <svg viewBox="0 0 24 24" fill="#666"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                        <span>首页</span>
                    </div>
                    <div class="footer-icon" onclick="navigateTo('cart')">
                        <svg viewBox="0 0 24 24" fill="#666"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                        <span>购物车</span>
                        <span class="cart-badge" id="detail-cart-badge">0</span>
                    </div>
                </div>
                <div class="footer-actions">
                    <button class="btn-add-cart" onclick="addToCart()">加入购物车</button>
                    <button class="btn-buy-now" onclick="buyNow()">立即购买</button>
                </div>
            </div>
        </div>

        <!-- 搜索页 -->
        <div class="page page-search" id="page-search">
            <div class="search-header">
                <div class="search-input-wrapper">
                    <svg viewBox="0 0 24 24" fill="#999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-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="搜索酒水饮料" autocomplete="off">
                    <button class="search-clear" onclick="clearSearch()" style="display:none;">
                        <svg viewBox="0 0 24 24" fill="#999"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                    </button>
                </div>
                <button class="btn-cancel" onclick="goBack()">取消</button>
            </div>

            <div class="search-hot" id="search-hot">
                <div class="search-section">
                    <div class="section-title">搜索热点</div>
                    <div class="hot-tags">
                        <span class="hot-tag" onclick="doSearch('百威啤酒')">百威啤酒</span>
                        <span class="hot-tag" onclick="doSearch('茅台')">茅台</span>
                        <span class="hot-tag" onclick="doSearch('科罗娜')">科罗娜</span>
                        <span class="hot-tag" onclick="doSearch('威士忌')">威士忌</span>
                        <span class="hot-tag" onclick="doSearch('红酒')">红酒</span>
                        <span class="hot-tag" onclick="doSearch('可乐')">可乐</span>
                    </div>
                </div>
            </div>

            <div class="search-result" id="search-result" style="display:none;">
                <div class="product-grid" id="result-grid">
                    <!-- 搜索结果通过JS动态渲染 -->
                </div>
            </div>
        </div>

        <!-- 优惠券页 -->
        <div class="page page-coupon" id="page-coupon">
            <div class="coupon-header">
                <button class="btn-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </button>
                <span class="page-title">优惠券中心</span>
            </div>

            <div class="coupon-tabs">
                <div class="coupon-tab active" onclick="switchCouponTab(this, 'available')">可用优惠券</div>
                <div class="coupon-tab" onclick="switchCouponTab(this, 'used')">已使用</div>
                <div class="coupon-tab" onclick="switchCouponTab(this, 'expired')">已过期</div>
            </div>

            <div class="coupon-body">
                <div class="coupon-list" id="coupon-list">
                    <!-- 优惠券通过JS动态渲染 -->
                </div>
            </div>
        </div>

        <!-- 订单列表页 -->
        <div class="page page-order-list" id="page-order-list">
            <div class="order-list-header">
                <button class="btn-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </button>
                <span class="page-title">我的订单</span>
            </div>

            <div class="order-list-tabs">
                <div class="order-list-tab active" onclick="switchOrderTab(this, 'all')">全部</div>
                <div class="order-list-tab" onclick="switchOrderTab(this, 'pending')">待付款</div>
                <div class="order-list-tab" onclick="switchOrderTab(this, 'delivering')">配送中</div>
                <div class="order-list-tab" onclick="switchOrderTab(this, 'completed')">已完成</div>
            </div>

            <div class="order-list-body">
                <div class="order-list-empty">
                    <svg viewBox="0 0 24 24" fill="#999"><path 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-2zm0 16H5V5h14v14zm-7-2h2v-4h4v-2h-4V7h-2v4H8v2h4z"/></svg>
                    <span>暂无订单</span>
                    <button onclick="switchTab('home')">去购物</button>
                </div>
            </div>
        </div>

        <!-- 确认订单页 -->
        <div class="page page-order" id="page-order">
            <div class="order-header">
                <button class="btn-back" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="#FFF"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
                </button>
                <span class="page-title">确认订单</span>
            </div>

            <div class="order-body">
                <div class="address-section" onclick="showToast('选择收货地址')">
                    <div class="address-info">
                        <div class="address-row">
                            <span class="address-name">张先生</span>
                            <span class="address-phone">138****8888</span>
                            <span class="address-tag default">默认</span>
                        </div>
                        <div class="address-detail">
                            <svg viewBox="0 0 24 24" fill="#FF6B35"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-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.5z"/></svg>
                            <span>深圳市南山区科技园南区高新南七道R2-B栋3楼</span>
                        </div>
                    </div>
                    <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </div>

                <div class="delivery-time-section">
                    <div class="section-label">期望送达时间</div>
                    <div class="time-options">
                        <div class="time-option active">
                            <span class="time-label">立即配送</span>
                            <span class="time-desc">预计 10:40 前送达</span>
                        </div>
                        <div class="time-option" onclick="selectTime(this)">
                            <span class="time-label">选择时间</span>
                            <span class="time-desc">自定义</span>
                        </div>
                    </div>
                </div>

                <div class="order-products">
                    <div class="section-label">商品清单</div>
                    <div class="product-list" id="order-products">
                        <!-- 订单商品通过JS动态渲染 -->
                    </div>
                </div>

                <div class="order-coupon-row" onclick="navigateTo('coupon')">
                    <span class="row-label">优惠券</span>
                    <div class="row-value">
                        <span class="coupon-select" id="order-coupon-select">选择优惠券</span>
                        <svg class="arrow" viewBox="0 0 24 24" fill="#999"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                    </div>
                </div>

                <div class="order-reduction">
                    <span class="row-label">满减优惠</span>
                    <span class="reduction-tag">满99减10</span>
                </div>

                <div class="order-remark">
                    <span class="row-label">订单备注</span>
                    <input type="text" placeholder="选填，可备注特殊需求" class="remark-input">
                </div>

                <div class="order-amount">
                    <div class="amount-row">
                        <span>商品金额</span>
                        <span id="order-goods-total">¥128.80</span>
                    </div>
                    <div class="amount-row">
                        <span>优惠券</span>
                        <span>-¥10.00</span>
                    </div>
                    <div class="amount-row">
                        <span>满减</span>
                        <span>-¥10.00</span>
                    </div>
                    <div class="amount-row total">
                        <span>合计</span>
                        <span id="order-final-amount">¥108.80</span>
                    </div>
                </div>
            </div>

            <div class="order-footer">
                <div class="order-total-info">
                    <span class="order-total-label">实付金额</span>
                    <span class="order-total-price" id="order-final-amount">¥108.80</span>
                </div>
                <button class="btn-submit-order" onclick="submitOrder()">提交订单</button>
            </div>
        </div>
    </div>

    <!-- TabBar -->
    <div class="tabbar" id="tabbar">
        <div class="tab-item active" data-page="home" onclick="switchTab('home')">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            <span>首页</span>
        </div>
        <div class="tab-item" data-page="category" onclick="switchTab('category')">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
            <span>分类</span>
        </div>
        <div class="tab-item" data-page="cart" onclick="switchTab('cart')">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
            <span>购物车</span>
            <span class="tab-badge" id="cart-badge">0</span>
        </div>
        <div class="tab-item" data-page="profile" onclick="switchTab('profile')">
            <svg viewBox="0 0 24 24" fill="currentColor"><path 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"/></svg>
            <span>我的</span>
        </div>
    </div>

    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>

    <script src="app.js"></script>
</body>
</html>

取消

访问码: 3q4yhaq6