编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲜达买菜 - 社区生鲜小程序原型</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  * { -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0;
    background: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 0;
  }
  .phone-frame {
    width: 375px;
    height: 780px;
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 10px #1a1a1a, 0 0 0 12px #333;
    overflow: hidden;
    position: relative;
  }
  .status-bar {
    height: 32px;
    background: linear-gradient(135deg, #00c896, #00b578);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
  }
  .app-container {
    height: calc(780px - 32px);
    position: relative;
    overflow: hidden;
  }
  .page {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #f5f5f5;
    display: none;
    flex-direction: column;
    overflow: hidden;
  }
  .page.active { display: flex; }
  .page-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-content::-webkit-scrollbar { width: 0; }
  .bottom-nav {
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #999;
    cursor: pointer;
    gap: 2px;
  }
  .nav-item.active { color: #00b578; }
  .nav-item .icon { font-size: 22px; }
  .header-bar {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .back-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; color: #333;
  }
  .header-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-right: 32px;
  }
  /* Carousel */
  .carousel {
    position: relative;
    height: 140px;
    overflow: hidden;
    border-radius: 12px;
    margin: 10px 12px;
  }
  .carousel-track {
    display: flex;
    transition: transform 0.4s ease;
    height: 100%;
  }
  .carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    position: relative;
  }
  .carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
  }
  .carousel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
  }
  .carousel-dot.active { background: #fff; width: 16px; border-radius: 3px; }
  /* Category grid */
  .cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 12px;
    background: #fff;
    margin: 0 12px;
    border-radius: 12px;
  }
  .cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }
  .cat-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
  .cat-name { font-size: 11px; color: #333; }
  /* Product card */
  .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 12px;
  }
  .product-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
  }
  .product-img {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
  }
  .product-tag {
    position: absolute;
    top: 6px; left: 6px;
    background: #ff4757;
    color: #fff;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
  }
  .product-info { padding: 8px; }
  .product-name {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
  }
  .product-spec { font-size: 11px; color: #999; margin-top: 2px; }
  .product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
  }
  .product-price {
    color: #ff4757;
    font-weight: 700;
    font-size: 16px;
  }
  .product-price small { font-size: 11px; }
  .add-btn {
    width: 26px; height: 26px;
    background: #00b578;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
  }
  .qty-control {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .qty-btn {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
  }
  .qty-minus { background: #f0f0f0; color: #666; }
  .qty-plus { background: #00b578; color: #fff; }
  .qty-num { font-size: 14px; font-weight: 600; min-width: 16px; text-align: center; }
  /* Section title */
  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
  }
  .section-title h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin: 0;
  }
  .section-title .more { font-size: 12px; color: #999; }
  /* Search bar */
  .search-bar {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 18px;
    padding: 7px 14px;
    margin: 8px 12px;
    gap: 6px;
  }
  .search-bar input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 13px;
    color: #333;
  }
  .search-bar input::placeholder { color: #bbb; }
  /* Coupon banner */
  .coupon-banner {
    margin: 0 12px 10px;
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .coupon-banner .left { display: flex; align-items: center; gap: 8px; }
  .coupon-banner .emoji { font-size: 28px; }
  .coupon-banner .text .t1 { font-size: 14px; font-weight: 700; color: #ff4757; }
  .coupon-banner .text .t2 { font-size: 11px; color: #999; margin-top: 2px; }
  .coupon-banner .get-btn {
    background: #ff4757;
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 12px;
    font-weight: 600;
  }
  /* Category list page */
  .cat-layout { display: flex; flex: 1; overflow: hidden; }
  .cat-sidebar {
    width: 85px;
    background: #f8f8f8;
    overflow-y: auto;
    flex-shrink: 0;
  }
  .cat-sidebar::-webkit-scrollbar { width: 0; }
  .cat-side-item {
    padding: 14px 8px;
    text-align: center;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    border-left: 3px solid transparent;
  }
  .cat-side-item.active {
    background: #fff;
    color: #00b578;
    font-weight: 600;
    border-left-color: #00b578;
  }
  .cat-main {
    flex: 1;
    overflow-y: auto;
    background: #fff;
    padding: 8px;
  }
  .cat-main::-webkit-scrollbar { width: 0; }
  .cat-banner-small {
    height: 70px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
  }
  /* Product detail */
  .detail-img {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    background: #fafafa;
  }
  .detail-info {
    background: #fff;
    padding: 16px;
  }
  .detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .detail-price { font-size: 28px; color: #ff4757; font-weight: 700; }
  .detail-price small { font-size: 14px; }
  .detail-origin { font-size: 13px; color: #bbb; text-decoration: line-through; }
  .detail-name { font-size: 17px; font-weight: 600; color: #333; margin-top: 8px; line-height: 1.4; }
  .detail-desc { font-size: 12px; color: #999; margin-top: 6px; }
  .detail-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .detail-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #e8f8f2;
    color: #00b578;
  }
  .detail-section {
    background: #fff;
    margin-top: 8px;
    padding: 14px 16px;
  }
  .detail-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
  }
  .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 0;
    color: #666;
  }
  .detail-row .label { color: #999; }
  .detail-bottom-bar {
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    flex-shrink: 0;
  }
  .detail-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    color: #999;
    width: 44px;
    cursor: pointer;
  }
  .detail-icon-btn .i { font-size: 20px; }
  .add-cart-btn {
    flex: 1;
    height: 40px;
    background: linear-gradient(135deg, #00c896, #00b578);
    color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  /* Cart */
  .cart-item {
    display: flex;
    background: #fff;
    padding: 12px;
    gap: 10px;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
  }
  .cart-check {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    color: #fff;
  }
  .cart-check.checked { background: #00b578; border-color: #00b578; }
  .cart-img {
    width: 70px; height: 70px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
  }
  .cart-info { flex: 1; min-width: 0; }
  .cart-name { font-size: 13px; color: #333; font-weight: 500; line-height: 1.3; }
  .cart-spec { font-size: 11px; color: #999; margin-top: 3px; }
  .cart-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
  .cart-price { color: #ff4757; font-weight: 700; font-size: 15px; }
  .cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #999;
  }
  .cart-empty .emoji { font-size: 60px; margin-bottom: 12px; }
  .cart-empty .text { font-size: 14px; margin-bottom: 16px; }
  .cart-empty .go-btn {
    background: #00b578;
    color: #fff;
    padding: 8px 24px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
  }
  .cart-bottom-bar {
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    flex-shrink: 0;
  }
  .cart-total { flex: 1; }
  .cart-total .label { font-size: 12px; color: #999; }
  .cart-total .amount { font-size: 18px; color: #ff4757; font-weight: 700; }
  .checkout-btn {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #fff;
    padding: 10px 28px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .checkout-btn.disabled { background: #ccc; }
  /* Checkout */
  .checkout-section {
    background: #fff;
    margin: 8px 12px;
    border-radius: 12px;
    padding: 14px;
  }
  .fulfillment-tabs {
    display: flex;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 14px;
  }
  .fulfillment-tab {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 13px;
    color: #666;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
  }
  .fulfillment-tab.active {
    background: #fff;
    color: #00b578;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .address-card {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }
  .address-icon { font-size: 22px; color: #00b578; }
  .address-info { flex: 1; }
  .address-info .name { font-size: 14px; font-weight: 600; color: #333; }
  .address-info .detail { font-size: 12px; color: #999; margin-top: 3px; }
  .address-arrow { color: #ccc; font-size: 18px; }
  .delivery-note {
    background: #f0faf6;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 11px;
    color: #00b578;
    line-height: 1.6;
  }
  .pickup-point {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
  }
  .pickup-point:last-child { border-bottom: none; }
  .pickup-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid #ddd;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pickup-radio.selected { border-color: #00b578; }
  .pickup-radio.selected::after {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00b578;
  }
  .pickup-info { flex: 1; }
  .pickup-info .name { font-size: 13px; font-weight: 600; color: #333; }
  .pickup-info .addr { font-size: 11px; color: #999; margin-top: 2px; }
  .pickup-info .time { font-size: 10px; color: #00b578; margin-top: 2px; }
  .coupon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .coupon-row .label { font-size: 14px; color: #333; }
  .coupon-row .value { font-size: 13px; color: #ff4757; font-weight: 600; }
  .price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    color: #666;
  }
  .price-row.total {
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
  }
  .price-row.total .val { color: #ff4757; }
  .submit-order-bar {
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 12px;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .submit-order-bar .total-text { font-size: 13px; color: #666; }
  .submit-order-bar .total-amt { font-size: 20px; color: #ff4757; font-weight: 700; }
  .submit-btn {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #fff;
    padding: 10px 30px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  /* Orders */
  .order-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
  }
  .order-tab {
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    position: relative;
  }
  .order-tab.active { color: #00b578; font-weight: 600; }
  .order-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #00b578;
    border-radius: 2px;
  }
  .order-card {
    background: #fff;
    margin: 8px 12px;
    border-radius: 10px;
    padding: 12px;
  }
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
  .order-store { font-size: 13px; font-weight: 600; color: #333; }
  .order-status { font-size: 12px; font-weight: 600; }
  .order-status.pending { color: #ff9500; }
  .order-status.shipping { color: #00b578; }
  .order-status.done { color: #999; }
  .order-status.cancel { color: #ccc; }
  .order-products { padding: 10px 0; }
  .order-product-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
  }
  .order-prod-img {
    width: 48px; height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
  }
  .order-prod-info { flex: 1; }
  .order-prod-name { font-size: 12px; color: #333; }
  .order-prod-spec { font-size: 10px; color: #999; margin-top: 2px; }
  .order-prod-qty { font-size: 12px; color: #999; }
  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
  .order-total { font-size: 13px; color: #333; }
  .order-total .amt { color: #ff4757; font-weight: 700; font-size: 15px; }
  .order-actions { display: flex; gap: 8px; }
  .order-btn {
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #666;
    background: #fff;
  }
  .order-btn.primary {
    background: #00b578;
    color: #fff;
    border-color: #00b578;
  }
  .order-btn.danger {
    background: #fff;
    color: #ff4757;
    border-color: #ff4757;
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    color: #999;
  }
  .empty-state .emoji { font-size: 56px; margin-bottom: 12px; }
  .empty-state .text { font-size: 14px; }
  /* Profile */
  .profile-header {
    background: linear-gradient(135deg, #00c896, #00b578);
    padding: 20px 16px 30px;
    color: #fff;
  }
  .profile-user {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .profile-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }
  .profile-name { font-size: 17px; font-weight: 700; }
  .profile-level {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10px;
    margin-top: 4px;
  }
  .points-card {
    background: #fff;
    margin: -18px 12px 0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    position: relative;
    z-index: 1;
  }
  .points-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
  .points-item .num { font-size: 20px; font-weight: 700; color: #333; }
  .points-item .label { font-size: 11px; color: #999; margin-top: 2px; }
  .points-divider { width: 1px; background: #f0f0f0; }
  .profile-menu {
    background: #fff;
    margin: 10px 12px;
    border-radius: 12px;
    overflow: hidden;
  }
  .profile-menu-item {
    display: flex;
    align-items: center;
    padding: 14px;
    gap: 12px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
  }
  .profile-menu-item:last-child { border-bottom: none; }
  .profile-menu-item .icon { font-size: 20px; width: 24px; text-align: center; }
  .profile-menu-item .label { flex: 1; font-size: 14px; color: #333; }
  .profile-menu-item .arrow { color: #ccc; font-size: 16px; }
  .profile-menu-item .badge {
    background: #ff4757;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-right: 4px;
  }
  /* Points center */
  .points-hero {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    padding: 24px 16px;
    color: #fff;
    text-align: center;
  }
  .points-hero .big-num { font-size: 36px; font-weight: 700; }
  .points-hero .label { font-size: 12px; opacity: 0.9; margin-top: 4px; }
  .points-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
  }
  .points-action-btn {
    background: rgba(255,255,255,0.25);
    padding: 6px 16px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
  }
  .points-section {
    background: #fff;
    margin: 10px 12px;
    border-radius: 12px;
    padding: 14px;
  }
  .points-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
  }
  .exchange-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .exchange-item {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
  }
  .exchange-item .emoji { font-size: 32px; }
  .exchange-item .name { font-size: 12px; color: #333; margin-top: 4px; }
  .exchange-item .cost { font-size: 12px; color: #ff9500; font-weight: 600; margin-top: 4px; }
  /* Coupons list */
  .coupon-card {
    display: flex;
    background: #fff;
    margin: 10px 12px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  }
  .coupon-left {
    width: 90px;
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
  }
  .coupon-left::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #f5f5f5;
    border-radius: 50%;
  }
  .coupon-amount { font-size: 24px; font-weight: 700; }
  .coupon-amount small { font-size: 12px; }
  .coupon-condition { font-size: 10px; opacity: 0.9; margin-top: 2px; }
  .coupon-right {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .coupon-title { font-size: 14px; font-weight: 600; color: #333; }
  .coupon-valid { font-size: 11px; color: #999; margin-top: 4px; }
  .coupon-use-btn {
    align-self: flex-end;
    background: #ff4757;
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 10px;
    margin-top: 6px;
    cursor: pointer;
  }
  .coupon-card.used .coupon-left { background: linear-gradient(135deg, #ccc, #bbb); }
  .coupon-card.used .coupon-use-btn { background: #ccc; }
  /* Address management */
  .address-item-card {
    background: #fff;
    margin: 8px 12px;
    border-radius: 10px;
    padding: 14px;
  }
  .address-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .address-item-name { font-size: 15px; font-weight: 600; color: #333; }
  .address-item-phone { font-size: 13px; color: #666; }
  .address-item-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #e8f8f2;
    color: #00b578;
  }
  .address-item-detail { font-size: 13px; color: #666; margin-top: 8px; line-height: 1.4; }
  .address-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
  .address-default-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
  }
  .address-default-toggle .dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .address-default-toggle.on .dot { border-color: #00b578; background: #00b578; }
  .address-default-toggle.on .dot::after { content: '✓'; color: #fff; font-size: 10px; }
  .address-actions { display: flex; gap: 12px; }
  .address-action { font-size: 12px; color: #999; cursor: pointer; }
  .add-address-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 335px;
    max-width: calc(100% - 40px);
    background: #00b578;
    color: #fff;
    padding: 12px;
    border-radius: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,181,120,0.3);
  }
  /* Modal */
  .modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: #fff;
    border-radius: 14px;
    width: 280px;
    padding: 24px 20px;
    text-align: center;
  }
  .modal-box .emoji { font-size: 48px; margin-bottom: 12px; }
  .modal-box .title { font-size: 17px; font-weight: 700; color: #333; margin-bottom: 8px; }
  .modal-box .desc { font-size: 13px; color: #999; line-height: 1.5; margin-bottom: 18px; }
  .modal-box .btn {
    background: #00b578;
    color: #fff;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
  }
  /* Toast */
  .toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 200;
    display: none;
    white-space: nowrap;
  }
  .toast.show { display: block; }
  /* Cart badge on nav */
  .nav-cart-wrap { position: relative; }
  .cart-badge {
    position: absolute;
    top: -2px;
    right: calc(50% - 18px);
    background: #ff4757;
    color: #fff;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-weight: 600;
  }
  .cart-badge.hidden { display: none; }
  /* Quick category bar on home */
  .quick-entries {
    display: flex;
    background: #fff;
    margin: 0 12px 10px;
    border-radius: 12px;
    padding: 10px 0;
  }
  .quick-entry {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
  .quick-entry .icon { font-size: 24px; }
  .quick-entry .label { font-size: 11px; color: #333; margin-top: 4px; }
  /* Flash sale */
  .flash-sale {
    background: linear-gradient(135deg, #fff0f0, #ffe8e8);
    margin: 0 12px 10px;
    border-radius: 12px;
    padding: 10px 12px;
  }
  .flash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .flash-title { font-size: 14px; font-weight: 700; color: #ff4757; }
  .flash-timer { font-size: 11px; color: #ff4757; }
  .flash-products {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .flash-products::-webkit-scrollbar { display: none; }
  .flash-product {
    min-width: 80px;
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    text-align: center;
    cursor: pointer;
  }
  .flash-product .img { font-size: 32px; height: 50px; display: flex; align-items: center; justify-content: center; }
  .flash-product .name { font-size: 10px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .flash-product .price { font-size: 12px; color: #ff4757; font-weight: 700; margin-top: 2px; }
  /* Fulfillment selector on home header */
  .home-top-bar {
    background: linear-gradient(135deg, #00c896, #00b578);
    padding: 8px 12px 12px;
    flex-shrink: 0;
  }
  .location-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    margin-bottom: 8px;
  }
  .location-row .addr { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .location-row .switch {
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 8px;
    cursor: pointer;
  }
  .home-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 7px 14px;
    gap: 6px;
  }
  .home-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 13px;
  }
  .home-search input::placeholder { color: #bbb; }
  .home-search .search-btn {
    background: #00b578;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 10px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="phone-frame">
  <div class="status-bar">
    <span>9:41</span>
    <span>📶 📡 🔋</span>
  </div>
  <div class="app-container" id="app">

    <!-- ============ 首页 ============ -->
    <div class="page active" id="page-home">
      <div class="home-top-bar">
        <div class="location-row">
          <span>📍</span>
          <span class="addr" id="home-addr-text">光谷软件园A区</span>
          <span class="switch" onclick="showToast('切换自提点/地址')">切换</span>
          <span style="margin-left:auto;font-size:11px;opacity:0.9;">🚚 商家自配送</span>
        </div>
        <div class="home-search">
          <span>🔍</span>
          <input type="text" placeholder="搜索蔬菜、水果、肉禽蛋..." id="home-search-input">
          <span class="search-btn" onclick="doSearch()">搜索</span>
        </div>
      </div>
      <div class="page-content">
        <!-- 轮播 -->
        <div class="carousel" id="carousel">
          <div class="carousel-track" id="carousel-track">
            <div class="carousel-slide" style="background:linear-gradient(135deg,#ff6b6b,#ee5a5a);">🥬 新鲜蔬菜 产地直供</div>
            <div class="carousel-slide" style="background:linear-gradient(135deg,#ffa502,#ff7f50);">🍎 时令水果 满39减8</div>
            <div class="carousel-slide" style="background:linear-gradient(135deg,#00b578,#00a06a);">🐟 鲜活水产 当日送达</div>
          </div>
          <div class="carousel-dots" id="carousel-dots">
            <div class="carousel-dot active"></div>
            <div class="carousel-dot"></div>
            <div class="carousel-dot"></div>
          </div>
        </div>
        <!-- 快捷入口 -->
        <div class="quick-entries">
          <div class="quick-entry" onclick="navigateTo('category')">
            <div class="icon">🏷️</div><div class="label">分类</div>
          </div>
          <div class="quick-entry" onclick="navigateTo('coupons')">
            <div class="icon">🎟️</div><div class="label">领券</div>
          </div>
          <div class="quick-entry" onclick="navigateTo('points')">
            <div class="icon">⭐</div><div class="label">积分</div>
          </div>
          <div class="quick-entry" onclick="showToast('商家自配送，最快30分钟送达')">
            <div class="icon">🚚</div><div class="label">配送说明</div>
          </div>
        </div>
        <!-- 分类导航 -->
        <div class="cat-grid" id="home-cat-grid"></div>
        <!-- 优惠券入口 -->
        <div class="coupon-banner" onclick="navigateTo('coupons')">
          <div class="left">
            <span class="emoji">🎁</span>
            <div class="text">
              <div class="t1">新人专享 满49减15</div>
              <div class="t2">还有3张优惠券待领取</div>
            </div>
          </div>
          <span class="get-btn">立即领取</span>
        </div>
        <!-- 限时秒杀 -->
        <div class="flash-sale">
          <div class="flash-header">
            <span class="flash-title">⚡ 限时秒杀</span>
            <span class="flash-timer" id="flash-timer">距结束 02:35:18</span>
          </div>
          <div class="flash-products" id="flash-products"></div>
        </div>
        <!-- 为你推荐 -->
        <div class="section-title">
          <h3>🔥 为你推荐</h3>
          <span class="more">查看更多 ›</span>
        </div>
        <div class="product-grid" id="home-products"></div>
        <div style="height:20px;"></div>
      </div>
      <div class="bottom-nav" id="bottom-nav-home"></div>
    </div>

    <!-- ============ 分类/商品列表页 ============ -->
    <div class="page" id="page-category">
      <div class="header-bar">
        <div class="back-btn" onclick="navigateTo('home')">‹</div>
        <div class="header-title">商品分类</div>
      </div>
      <div class="search-bar">
        <span>🔍</span>
        <input type="text" placeholder="搜索商品..." id="cat-search-input">
      </div>
      <div class="cat-layout">
        <div class="cat-sidebar" id="cat-sidebar"></div>
        <div class="cat-main" id="cat-main"></div>
      </div>
      <div class="bottom-nav" id="bottom-nav-category"></div>
    </div>

    <!-- ============ 商品详情页 ============ -->
    <div class="page" id="page-detail">
      <div class="header-bar" style="position:absolute;top:0;left:0;right:0;z-index:10;background:transparent;border-bottom:none;">
        <div class="back-btn" onclick="goBack()" style="background:rgba(255,255,255,0.8);border-radius:50%;width:32px;height:32px;">‹</div>
        <div style="flex:1;"></div>
        <div style="background:rgba(255,255,255,0.8);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;" onclick="showToast('已分享')">⤴</div>
      </div>
      <div class="page-content" style="padding-top:0;">
        <div class="detail-img" id="detail-img">🥬</div>
        <div class="detail-info">
          <div class="detail-price-row">
            <span class="detail-price" id="detail-price"><small>¥</small>0.00</span>
            <span class="detail-origin" id="detail-origin">¥0.00</span>
          </div>
          <div class="detail-name" id="detail-name">商品名称</div>
          <div class="detail-desc" id="detail-desc">商品描述</div>
          <div class="detail-tags" id="detail-tags"></div>
        </div>
        <div class="detail-section">
          <h4>📦 履约说明</h4>
          <div class="detail-row"><span class="label">配送方式</span><span>商家自配送（不接入第三方骑手）</span></div>
          <div class="detail-row"><span class="label">预计送达</span><span id="detail-eta">下单后30-60分钟送达</span></div>
          <div class="detail-row"><span class="label">自提选项</span><span>支持门店自提，下单后15分钟可取</span></div>
          <div class="detail-row"><span class="label">配送范围</span><span>门店周边3公里内</span></div>
        </div>
        <div class="detail-section">
          <h4>📋 商品规格</h4>
          <div class="detail-row"><span class="label">规格</span><span id="detail-spec">500g/份</span></div>
          <div class="detail-row"><span class="label">产地</span><span>湖北武汉</span></div>
          <div class="detail-row"><span class="label">储存方式</span><span>冷藏保存，建议24小时内食用</span></div>
        </div>
        <div class="detail-section">
          <h4>💬 用户评价 (328)</h4>
          <div style="font-size:12px;color:#666;line-height:1.6;">
            <div style="padding:6px 0;border-bottom:1px solid #f5f5f5;">
              <span style="color:#ff9500;">★★★★★</span> 张** 2小时前<br>
              很新鲜，配送也很快，商家自己送的态度很好！
            </div>
            <div style="padding:6px 0;">
              <span style="color:#ff9500;">★★★★★</span> 李** 昨天<br>
              分量足，价格实惠，会回购。
            </div>
          </div>
        </div>
        <div style="height:20px;"></div>
      </div>
      <div class="detail-bottom-bar">
        <div class="detail-icon-btn" onclick="navigateTo('home')">
          <span class="i">🏠</span><span>首页</span>
        </div>
        <div class="detail-icon-btn" onclick="navigateTo('cart')">
          <span class="i">🛒</span><span>购物车</span>
        </div>
        <div class="detail-icon-btn" onclick="showToast('已收藏')">
          <span class="i">❤️</span><span>收藏</span>
        </div>
        <div class="add-cart-btn" onclick="addToCartFromDetail()">加入购物车</div>
      </div>
    </div>

    <!-- ============ 购物车页 ============ -->
    <div class="page" id="page-cart">
      <div class="header-bar">
        <div class="back-btn" onclick="navigateTo('home')">‹</div>
        <div class="header-title">购物车</div>
        <div style="font-size:13px;color:#999;cursor:pointer;" onclick="clearCart()">清空</div>
      </div>
      <div class="page-content" id="cart-content"></div>
      <div class="cart-bottom-bar" id="cart-bottom-bar" style="display:none;">
        <div class="cart-check" id="cart-select-all" onclick="toggleSelectAll()" style="width:20px;height:20px;"></div>
        <span style="font-size:13px;color:#333;margin-left:4px;">全选</span>
        <div class="cart-total">
          <div class="label">合计：<span class="amount" id="cart-total-amount">¥0.00</span></div>
        </div>
        <div class="checkout-btn" id="cart-checkout-btn" onclick="goCheckout()">去结算</div>
      </div>
      <div class="bottom-nav" id="bottom-nav-cart"></div>
    </div>

    <!-- ============ 确认下单页 ============ -->
    <div class="page" id="page-checkout">
      <div class="header-bar">
        <div class="back-btn" onclick="goBack()">‹</div>
        <div class="header-title">确认订单</div>
      </div>
      <div class="page-content">
        <!-- 履约方式 -->
        <div class="checkout-section">
          <div class="fulfillment-tabs">
            <div class="fulfillment-tab active" id="tab-delivery" onclick="switchFulfillment('delivery')">🚚 商家配送到家</div>
            <div class="fulfillment-tab" id="tab-pickup" onclick="switchFulfillment('pickup')">🏪 门店自提</div>
          </div>
          <!-- 配送地址 -->
          <div id="delivery-address-block">
            <div class="address-card" onclick="navigateTo('address')">
              <span class="address-icon">📍</span>
              <div class="address-info">
                <div class="name"><span id="ck-addr-name">张三</span> <span id="ck-addr-phone" style="color:#999;font-weight:400;">138****8888</span></div>
                <div class="detail" id="ck-addr-detail">湖北省武汉市洪山区光谷软件园A区1栋101室</div>
              </div>
              <span class="address-arrow">›</span>
            </div>
            <div class="delivery-note">
              🚚 <b>商家自配送</b>：由门店专属配送员送货上门，不接入第三方骑手平台。预计 <b>30-60分钟</b> 送达，配送范围门店周边3公里。满39元免配送费，未满收取3元配送费。
            </div>
          </div>
          <!-- 自提点 -->
          <div id="pickup-point-block" style="display:none;">
            <div class="pickup-point" onclick="selectPickupPoint(this,0)">
              <div class="pickup-radio selected"></div>
              <div class="pickup-info">
                <div class="name">鲜达买菜·光谷软件园店</div>
                <div class="addr">武汉市洪山区光谷软件园A区底商102号</div>
                <div class="time">⏰ 营业时间 07:00-22:00 | 下单后15分钟可取</div>
              </div>
            </div>
            <div class="pickup-point" onclick="selectPickupPoint(this,1)">
              <div class="pickup-radio"></div>
              <div class="pickup-info">
                <div class="name">鲜达买菜·关山大道店</div>
                <div class="addr">武汉市洪山区关山大道光谷天地S1-105</div>
                <div class="time">⏰ 营业时间 07:00-22:00 | 下单后15分钟可取</div>
              </div>
            </div>
            <div class="delivery-note" style="background:#fff8e8;color:#ff9500;">
              🏪 <b>门店自提</b>：下单后系统通知门店备货，一般15分钟内完成。凭取货码到店自提，支持冷藏/冷冻商品保温存放。
            </div>
          </div>
        </div>
        <!-- 商品清单 -->
        <div class="checkout-section">
          <div style="font-size:14px;font-weight:600;color:#333;margin-bottom:10px;">🛒 商品清单</div>
          <div id="checkout-products"></div>
        </div>
        <!-- 优惠券 -->
        <div class="checkout-section">
          <div class="coupon-row" onclick="showCouponPicker()">
            <span class="label">🎟️ 优惠券</span>
            <span class="value" id="checkout-coupon-text">未使用 ›</span>
          </div>
          <div class="coupon-row" style="margin-top:10px;" onclick="showToast('积分抵扣演示：可用500积分抵5元')">
            <span class="label">⭐ 积分抵扣</span>
            <span class="value" id="checkout-points-text">可用 1280 积分 ›</span>
          </div>
        </div>
        <!-- 金额明细 -->
        <div class="checkout-section">
          <div class="price-row"><span>商品金额</span><span id="ck-subtotal">¥0.00</span></div>
          <div class="price-row"><span>配送费</span><span id="ck-delivery-fee">¥0.00</span></div>
          <div class="price-row"><span>优惠券</span><span id="ck-coupon-discount">-¥0.00</span></div>
          <div class="price-row total"><span>实付金额</span><span class="val" id="ck-total">¥0.00</span></div>
        </div>
        <div style="height:20px;"></div>
      </div>
      <div class="submit-order-bar">
        <div>
          <div class="total-text">合计</div>
          <div class="total-amt" id="ck-bottom-total">¥0.00</div>
        </div>
        <div class="submit-btn" onclick="submitOrder()">提交订单</div>
      </div>
    </div>

    <!-- ============ 订单页 ============ -->
    <div class="page" id="page-orders">
      <div class="header-bar">
        <div class="back-btn" onclick="navigateTo('profile')">‹</div>
        <div class="header-title">我的订单</div>
      </div>
      <div class="order-tabs">
        <div class="order-tab active" data-status="pending" onclick="switchOrderTab('pending')">待付款</div>
        <div class="order-tab" data-status="shipping" onclick="switchOrderTab('shipping')">待配送/自提</div>
        <div class="order-tab" data-status="done" onclick="switchOrderTab('done')">已完成</div>
        <div class="order-tab" data-status="cancel" onclick="switchOrderTab('cancel')">已取消</div>
      </div>
      <div class="page-content" id="orders-content"></div>
      <div class="bottom-nav" id="bottom-nav-orders"></div>
    </div>

    <!-- ============ 个人中心 ============ -->
    <div class="page" id="page-profile">
      <div class="page-content" style="background:#f5f5f5;">
        <div class="profile-header">
          <div class="profile-user">
            <div class="profile-avatar">👤</div>
            <div>
              <div class="profile-name">鲜达会员</div>
              <div class="profile-level">🥈 银卡会员</div>
            </div>
          </div>
        </div>
        <div class="points-card">
          <div class="points-item" onclick="navigateTo('points')">
            <div class="num" id="profile-points">1280</div>
            <div class="label">积分</div>
          </div>
          <div class="points-divider"></div>
          <div class="points-item" onclick="navigateTo('coupons')">
            <div class="num" id="profile-coupons">3</div>
            <div class="label">优惠券</div>
          </div>
          <div class="points-divider"></div>
          <div class="points-item" onclick="showToast('收藏商品演示')">
            <div class="num">12</div>
            <div class="label">收藏</div>
          </div>
        </div>
        <!-- 我的订单入口 -->
        <div class="profile-menu">
          <div class="profile-menu-item" onclick="navigateTo('orders')">
            <span class="icon">📦</span>
            <span class="label">我的订单</span>
            <span class="arrow">›</span>
          </div>
          <div style="display:flex;padding:0 14px 12px;gap:0;">
            <div style="flex:1;text-align:center;cursor:pointer;" onclick="navigateTo('orders');setTimeout(()=>switchOrderTab('pending'),50)">
              <div style="font-size:22px;">💰</div>
              <div style="font-size:11px;color:#666;margin-top:2px;">待付款</div>
            </div>
            <div style="flex:1;text-align:center;cursor:pointer;" onclick="navigateTo('orders');setTimeout(()=>switchOrderTab('shipping'),50)">
              <div style="font-size:22px;">🚚</div>
              <div style="font-size:11px;color:#666;margin-top:2px;">待配送</div>
            </div>
            <div style="flex:1;text-align:center;cursor:pointer;" onclick="navigateTo('orders');setTimeout(()=>switchOrderTab('done'),50)">
              <div style="font-size:22px;">✅</div>
              <div style="font-size:11px;color:#666;margin-top:2px;">已完成</div>
            </div>
            <div style="flex:1;text-align:center;cursor:pointer;" onclick="showToast('退款售后演示')">
              <div style="font-size:22px;">↩️</div>
              <div style="font-size:11px;color:#666;margin-top:2px;">退款/售后</div>
            </div>
          </div>
        </div>
        <!-- 营销功能入口 -->
        <div class="profile-menu">
          <div class="profile-menu-item" onclick="navigateTo('points')">
            <span class="icon">⭐</span>
            <span class="label">会员积分中心</span>
            <span class="arrow">›</span>
          </div>
          <div class="profile-menu-item" onclick="navigateTo('coupons')">
            <span class="icon">🎟️</span>
            <span class="label">我的优惠券 <span class="badge">3</span></span>
            <span class="arrow">›</span>
          </div>
          <div class="profile-menu-item" onclick="navigateTo('address')">
            <span class="icon">📍</span>
            <span class="label">地址管理</span>
            <span class="arrow">›</span>
          </div>
        </div>
        <!-- 其他 -->
        <div class="profile-menu">
          <div class="profile-menu-item" onclick="showToast('商家自配送说明：由门店专属配送员送货，不接入第三方骑手平台')">
            <span class="icon">🚚</span>
            <span class="label">配送说明</span>
            <span class="arrow">›</span>
          </div>
          <div class="profile-menu-item" onclick="showToast('客服电话：400-888-8888')">
            <span class="icon">📞</span>
            <span class="label">联系客服</span>
            <span class="arrow">›</span>
          </div>
          <div class="profile-menu-item" onclick="showToast('设置页面演示')">
            <span class="icon">⚙️</span>
            <span class="label">设置</span>
            <span class="arrow">›</span>
          </div>
        </div>
        <div style="height:20px;"></div>
      </div>
      <div class="bottom-nav" id="bottom-nav-profile"></div>
    </div>

    <!-- ============ 积分中心 ============ -->
    <div class="page" id="page-points">
      <div class="header-bar">
        <div class="back-btn" onclick="goBack()">‹</div>
        <div class="header-title">积分中心</div>
      </div>
      <div class="page-content">
        <div class="points-hero">
          <div class="big-num" id="points-big-num">1280</div>
          <div class="label">我的积分</div>
          <div class="points-actions">
            <div class="points-action-btn" onclick="showToast('积分明细演示')">积分明细</div>
            <div class="points-action-btn" onclick="showToast('消费1元=1积分，每日签到+5积分')">如何获得</div>
          </div>
        </div>
        <div class="points-section">
          <h4>🎯 积分规则</h4>
          <div style="font-size:12px;color:#666;line-height:1.8;">
            • 消费 1 元 = 1 积分（实付金额）<br>
            • 每日签到 +5 积分，连续7天额外+20<br>
            • 评价商品 +10 积分/条<br>
            • 100 积分 = 1 元，下单时可抵扣<br>
            • 积分有效期：获得之日起12个月
          </div>
        </div>
        <div class="points-section">
          <h4>🎁 积分兑换</h4>
          <div class="exchange-grid">
            <div class="exchange-item" onclick="exchangePoints(500,'满39减5券')">
              <div class="emoji">🎟️</div>
              <div class="name">满39减5券</div>
              <div class="cost">500积分</div>
            </div>
            <div class="exchange-item" onclick="exchangePoints(1000,'满69减10券')">
              <div class="emoji">🎫</div>
              <div class="name">满69减10券</div>
              <div class="cost">1000积分</div>
            </div>
            <div class="exchange-item" onclick="exchangePoints(800,'5元无门槛券')">
              <div class="emoji">💵</div>
              <div class="name">5元无门槛券</div>
              <div class="cost">800积分</div>
            </div>
            <div class="exchange-item" onclick="exchangePoints(2000,'新鲜蔬菜礼包')">
              <div class="emoji">🥬</div>
              <div class="name">蔬菜礼包</div>
              <div class="cost">2000积分</div>
            </div>
          </div>
        </div>
        <div class="points-section">
          <h4>📜 积分记录</h4>
          <div style="font-size:12px;color:#666;">
            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;">
              <span>消费获得（订单#20260828）</span><span style="color:#00b578;">+68</span>
            </div>
            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;">
              <span>每日签到</span><span style="color:#00b578;">+5</span>
            </div>
            <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f5f5f5;">
              <span>评价商品</span><span style="color:#00b578;">+10</span>
            </div>
            <div style="display:flex;justify-content:space-between;padding:6px 0;">
              <span>积分兑换优惠券</span><span style="color:#ff4757;">-500</span>
            </div>
          </div>
        </div>
        <div style="height:20px;"></div>
      </div>
    </div>

    <!-- ============ 优惠券页 ============ -->
    <div class="page" id="page-coupons">
      <div class="header-bar">
        <div class="back-btn" onclick="goBack()">‹</div>
        <div class="header-title">我的优惠券</div>
      </div>
      <div class="order-tabs">
        <div class="order-tab active" onclick="switchCouponTab('available',this)">可使用</div>
        <div class="order-tab" onclick="switchCouponTab('used',this)">已使用</div>
        <div class="order-tab" onclick="switchCouponTab('expired',this)">已过期</div>
      </div>
      <div class="page-content" id="coupons-content"></div>
      <!-- 领券中心入口 -->
      <div style="padding:10px 12px;background:#fff;border-top:1px solid #f0f0f0;">
        <div style="background:linear-gradient(135deg,#fff5f5,#ffe8e8);border-radius:10px;padding:12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;" onclick="showCouponCenter()">
          <div>
            <div style="font-size:14px;font-weight:700;color:#ff4757;">🎁 领券中心</div>
            <div style="font-size:11px;color:#999;margin-top:2px;">更多好券等你来领</div>
          </div>
          <span style="background:#ff4757;color:#fff;font-size:12px;padding:5px 14px;border-radius:12px;">去领券</span>
        </div>
      </div>
    </div>

    <!-- ============ 地址管理页 ============ -->
    <div class="page" id="page-address">
      <div class="header-bar">
        <div class="back-btn" onclick="goBack()">‹</div>
        <div class="header-title">地址管理</div>
      </div>
      <div class="page-content" id="address-content">
        <div class="address-item-card">
          <div class="address-item-top">
            <span class="address-item-name">张三</span>
            <span class="address-item-phone">138****8888</span>
            <span class="address-item-tag">家</span>
          </div>
          <div class="address-item-detail">湖北省武汉市洪山区光谷软件园A区1栋101室</div>
          <div class="address-item-bottom">
            <div class="address-default-toggle on" onclick="toggleDefault(this)">
              <div class="dot"></div><span>默认地址</span>
            </div>
            <div class="address-actions">
              <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
              <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
            </div>
          </div>
        </div>
        <div class="address-item-card">
          <div class="address-item-top">
            <span class="address-item-name">张三</span>
            <span class="address-item-phone">138****8888</span>
            <span class="address-item-tag">公司</span>
          </div>
          <div class="address-item-detail">湖北省武汉市洪山区关山大道光谷天地写字楼B座1802</div>
          <div class="address-item-bottom">
            <div class="address-default-toggle" onclick="toggleDefault(this)">
              <div class="dot"></div><span>设为默认</span>
            </div>
            <div class="address-actions">
              <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
              <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="add-address-btn" onclick="showToast('新增地址（演示）')">+ 新增收货地址</div>
    </div>

    <!-- Modal -->
    <div class="modal-overlay" id="modal">
      <div class="modal-box">
        <div class="emoji" id="modal-emoji">✅</div>
        <div class="title" id="modal-title">操作成功</div>
        <div class="desc" id="modal-desc">描述内容</div>
        <div class="btn" onclick="closeModal()">确定</div>
      </div>
    </div>
    <!-- Toast -->
    <div class="toast" id="toast"></div>

  </div>
</div>

<script>
// ==================== Mock Data ====================
const categories = [
  { id: 'veg', name: '蔬菜', icon: '🥬', color: '#e8f8f2' },
  { id: 'fruit', name: '水果', icon: '🍎', color: '#fff0f0' },
  { id: 'meat', name: '肉禽蛋', icon: '🥩', color: '#fff5e8' },
  { id: 'seafood', name: '水产海鲜', icon: '🐟', color: '#e8f4ff' },
  { id: 'grain', name: '粮油米面', icon: '🍚', color: '#f8f4e8' },
  { id: 'dairy', name: '乳制品', icon: '🥛', color: '#f0f4ff' },
  { id: 'snack', name: '零食', icon: '🍪', color: '#fff0f8' },
  { id: 'frozen', name: '冷冻食品', icon: '🧊', color: '#e8f8ff' },
  { id: 'seasoning', name: '调味品', icon: '🧂', color: '#f8f0e8' },
  { id: 'drink', name: '酒水饮料', icon: '🍺', color: '#f0fff4' },
  { id: 'daily', name: '日用百货', icon: '🧴', color: '#f4f0ff' },
];

const products = [
  // 蔬菜
  { id:1, cat:'veg', name:'有机小白菜', spec:'约500g/份', price:5.9, origin:8.9, emoji:'🥬', tag:'有机', desc:'产地直供，当日采摘，新鲜脆嫩' },
  { id:2, cat:'veg', name:'精选西红柿', spec:'约500g/份', price:4.5, origin:6.5, emoji:'🍅', tag:'特惠', desc:'自然成熟，沙瓤多汁，酸甜可口' },
  { id:3, cat:'veg', name:'新鲜黄瓜', spec:'约500g/份', price:3.8, origin:5.5, emoji:'🥒', desc:'清脆爽口，可生吃可凉拌' },
  { id:4, cat:'veg', name:'紫皮洋葱', spec:'约1kg/份', price:4.2, origin:6.0, emoji:'🧅', desc:'辣味适中，适合炒菜炖煮' },
  { id:5, cat:'veg', name:'胡萝卜', spec:'约500g/份', price:3.5, origin:5.0, emoji:'🥕', tag:'新品', desc:'脆甜多汁，富含胡萝卜素' },
  { id:6, cat:'veg', name:'土豆', spec:'约1kg/份', price:4.8, origin:6.8, emoji:'🥔', desc:'黄心土豆，粉糯香甜' },
  // 水果
  { id:7, cat:'fruit', name:'红富士苹果', spec:'约1kg/份', price:12.9, origin:18.9, emoji:'🍎', tag:'热销', desc:'脆甜多汁，果肉细腻' },
  { id:8, cat:'fruit', name:'进口香蕉', spec:'约1kg/份', price:8.8, origin:12.8, emoji:'🍌', desc:'软糯香甜，营养丰富' },
  { id:9, cat:'fruit', name:'巨峰葡萄', spec:'约500g/份', price:15.9, origin:22.9, emoji:'🍇', tag:'限时', desc:'颗粒饱满，甜度高达18度' },
  { id:10, cat:'fruit', name:'西瓜', spec:'约4kg/个', price:19.9, origin:29.9, emoji:'🍉', desc:'8424麒麟瓜，沙瓤多汁' },
  { id:11, cat:'fruit', name:'橙子', spec:'约1kg/份', price:11.8, origin:16.8, emoji:'🍊', desc:'赣南脐橙，酸甜可口' },
  { id:12, cat:'fruit', name:'草莓', spec:'约250g/盒', price:18.8, origin:25.8, emoji:'🍓', tag:'新品', desc:'奶油草莓，香甜浓郁' },
  // 肉禽蛋
  { id:13, cat:'meat', name:'土猪五花肉', spec:'约500g/份', price:22.8, origin:28.8, emoji:'🥩', tag:'新鲜', desc:'农家散养土猪，肥瘦相间' },
  { id:14, cat:'meat', name:'散养土鸡蛋', spec:'30枚/盒', price:25.9, origin:35.9, emoji:'🥚', desc:'林下散养，蛋黄金黄' },
  { id:15, cat:'meat', name:'鸡胸肉', spec:'约500g/份', price:13.9, origin:18.9, emoji:'🍗', desc:'低脂高蛋白，健身首选' },
  { id:16, cat:'meat', name:'排骨', spec:'约500g/份', price:28.8, origin:35.8, emoji:'🍖', tag:'特惠', desc:'猪肋排，肉质鲜嫩' },
  // 水产海鲜
  { id:17, cat:'seafood', name:'鲜活基围虾', spec:'约500g/份', price:38.8, origin:48.8, emoji:'🦐', tag:'鲜活', desc:'当日鲜活，肉质Q弹' },
  { id:18, cat:'seafood', name:'草鱼', spec:'约1.5kg/条', price:22.8, origin:28.8, emoji:'🐟', desc:'活鱼现杀，肉质细嫩' },
  { id:19, cat:'seafood', name:'花甲', spec:'约500g/份', price:9.9, origin:14.9, emoji:'🐚', desc:'无沙花甲，鲜嫩肥美' },
  { id:20, cat:'seafood', name:'三文鱼刺身', spec:'约200g/份', price:45.8, origin:58.8, emoji:'🍣', tag:'进口', desc:'挪威进口，冰鲜直达' },
  // 粮油米面
  { id:21, cat:'grain', name:'东北大米', spec:'5kg/袋', price:39.9, origin:49.9, emoji:'🍚', tag:'热销', desc:'五常稻花香，米香浓郁' },
  { id:22, cat:'grain', name:'金龙鱼食用油', spec:'5L/桶', price:69.9, origin:89.9, emoji:'🫒', desc:'调和油，营养均衡' },
  { id:23, cat:'grain', name:'面粉', spec:'2.5kg/袋', price:15.9, origin:20.9, emoji:'🌾', desc:'中筋面粉，适合各类面食' },
  { id:24, cat:'grain', name:'挂面', spec:'1kg/袋', price:8.8, origin:12.8, emoji:'🍜', desc:'劲道爽滑，耐煮不糊' },
  // 乳制品
  { id:25, cat:'dairy', name:'纯牛奶', spec:'250ml*12盒', price:39.9, origin:52.9, emoji:'🥛', tag:'特惠', desc:'优质奶源，营养丰富' },
  { id:26, cat:'dairy', name:'原味酸奶', spec:'100g*8杯', price:19.9, origin:26.9, emoji:'🍶', desc:'浓稠顺滑，益生菌发酵' },
  { id:27, cat:'dairy', name:'黄油', spec:'200g/块', price:25.8, origin:32.8, emoji:'🧈', desc:'动物黄油，奶香浓郁' },
  // 零食
  { id:28, cat:'snack', name:'薯片', spec:'104g/袋', price:6.9, origin:9.9, emoji:'🍟', desc:'香脆可口，多种口味' },
  { id:29, cat:'snack', name:'巧克力', spec:'100g/盒', price:15.9, origin:22.9, emoji:'🍫', tag:'新品', desc:'丝滑醇厚，入口即化' },
  { id:30, cat:'snack', name:'坚果混合', spec:'250g/袋', price:22.8, origin:30.8, emoji:'🥜', desc:'每日坚果，营养健康' },
  // 冷冻食品
  { id:31, cat:'frozen', name:'速冻饺子', spec:'500g/袋', price:12.9, origin:16.9, emoji:'🥟', desc:'猪肉白菜馅，皮薄馅大' },
  { id:32, cat:'frozen', name:'冰淇淋', spec:'500ml/盒', price:18.8, origin:25.8, emoji:'🍦', tag:'热销', desc:'香草口味，丝滑细腻' },
  { id:33, cat:'frozen', name:'速冻汤圆', spec:'400g/袋', price:9.9, origin:13.9, emoji:'🍡', desc:'黑芝麻馅，软糯香甜' },
  // 调味品
  { id:34, cat:'seasoning', name:'生抽酱油', spec:'500ml/瓶', price:9.9, origin:13.9, emoji:'🍶', desc:'酿造酱油，鲜味十足' },
  { id:35, cat:'seasoning', name:'食用盐', spec:'400g/袋', price:2.5, origin:3.5, emoji:'🧂', desc:'加碘精盐，日常必备' },
  { id:36, cat:'seasoning', name:'料酒', spec:'500ml/瓶', price:6.9, origin:9.9, emoji:'🍾', desc:'去腥提鲜，烹饪必备' },
  // 酒水饮料
  { id:37, cat:'drink', name:'矿泉水', spec:'550ml*12瓶', price:15.9, origin:20.9, emoji:'💧', desc:'天然矿泉水，纯净甘甜' },
  { id:38, cat:'drink', name:'可乐', spec:'330ml*6罐', price:12.9, origin:16.9, emoji:'🥤', tag:'特惠', desc:'冰爽畅快，经典口味' },
  { id:39, cat:'drink', name:'啤酒', spec:'500ml*6罐', price:29.9, origin:39.9, emoji:'🍺', desc:'清爽型啤酒，麦香浓郁' },
  // 日用百货
  { id:40, cat:'daily', name:'抽纸', spec:'3层*100抽*6包', price:19.9, origin:26.9, emoji:'🧻', tag:'热销', desc:'柔韧亲肤，无荧光剂' },
  { id:41, cat:'daily', name:'洗衣液', spec:'2kg/瓶', price:25.9, origin:35.9, emoji:'🧴', desc:'深层洁净，留香持久' },
  { id:42, cat:'daily', name:'垃圾袋', spec:'45*50cm*100只', price:9.9, origin:14.9, emoji:'🗑️', desc:'加厚耐用，不易破漏' },
];

const coupons = [
  { id:1, amount:15, condition:'满49可用', title:'新人专享券', valid:'2026.08.01-2026.09.30', status:'available' },
  { id:2, amount:8, condition:'满39可用', title:'品类满减券', valid:'2026.08.15-2026.09.15', status:'available' },
  { id:3, amount:5, condition:'无门槛', title:'会员专享券', valid:'2026.08.20-2026.09.20', status:'available' },
  { id:4, amount:10, condition:'满69可用', title:'周末特惠券', valid:'2026.07.01-2026.07.31', status:'used' },
  { id:5, amount:20, condition:'满99可用', title:'大促满减券', valid:'2026.06.01-2026.06.30', status:'expired' },
];

const mockOrders = {
  pending: [
    { id:'20260828001', store:'鲜达买菜·光谷软件园店', status:'pending', statusText:'待付款', total:68.5, items:[{id:1,name:'有机小白菜',spec:'约500g/份',price:5.9,qty:2,emoji:'🥬'},{id:13,name:'土猪五花肉',spec:'约500g/份',price:22.8,qty:1,emoji:'🥩'},{id:14,name:'散养土鸡蛋',spec:'30枚/盒',price:25.9,qty:1,emoji:'🥚'}] },
  ],
  shipping: [
    { id:'20260827002', store:'鲜达买菜·光谷软件园店', status:'shipping', statusText:'商家配送中', total:45.8, fulfillment:'delivery', items:[{id:7,name:'红富士苹果',spec:'约1kg/份',price:12.9,qty:2,emoji:'🍎'},{id:25,name:'纯牛奶',spec:'250ml*12盒',price:39.9,qty:1,emoji:'🥛'}] },
    { id:'20260827003', store:'鲜达买菜·关山大道店', status:'shipping', statusText:'待自提', total:32.7, fulfillment:'pickup', code:'A2086', items:[{id:17,name:'鲜活基围虾',spec:'约500g/份',price:38.8,qty:1,emoji:'🦐'}] },
  ],
  done: [
    { id:'20260825001', store:'鲜达买菜·光谷软件园店', status:'done', statusText:'已完成', total:128.6, items:[{id:10,name:'西瓜',spec:'约4kg/个',price:19.9,qty:1,emoji:'🍉'},{id:21,name:'东北大米',spec:'5kg/袋',price:39.9,qty:1,emoji:'🍚'},{id:40,name:'抽纸',spec:'3层*100抽*6包',price:19.9,qty:1,emoji:'🧻'}] },
    { id:'20260820002', store:'鲜达买菜·关山大道店', status:'done', statusText:'已完成', total:56.8, items:[{id:9,name:'巨峰葡萄',spec:'约500g/份',price:15.9,qty:2,emoji:'🍇'},{id:26,name:'原味酸奶',spec:'100g*8杯',price:19.9,qty:1,emoji:'🍶'}] },
  ],
  cancel: [
    { id:'20260815001', store:'鲜达买菜·光谷软件园店', status:'cancel', statusText:'已取消', total:88.0, items:[{id:20,name:'三文鱼刺身',spec:'约200g/份',price:45.8,qty:1,emoji:'🍣'},{id:19,name:'花甲',spec:'约500g/份',price:9.9,qty:1,emoji:'🐚'}] },
  ],
};

// ==================== State ====================
let cart = JSON.parse(localStorage.getItem('fresh_cart') || '[]');
let currentPage = 'home';
let pageHistory = ['home'];
let currentCategory = 'veg';
let currentProduct = null;
let selectedCoupon = null;
let fulfillmentMode = 'delivery';
let userPoints = 1280;
let currentOrderTab = 'pending';
let currentCouponTab = 'available';

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

function updateCartBadge() {
  const total = cart.reduce((s,i)=>s+i.qty,0);
  document.querySelectorAll('.cart-badge').forEach(b=>{
    if(total>0){ b.textContent=total; b.classList.remove('hidden'); }
    else { b.classList.add('hidden'); }
  });
}

// ==================== Navigation ====================
function navigateTo(page, addHistory=true) {
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  const target = document.getElementById('page-'+page);
  if(target) target.classList.add('active');
  if(addHistory && currentPage !== page) pageHistory.push(page);
  currentPage = page;
  // Update bottom nav active state
  updateBottomNav(page);
  // Page-specific init
  if(page==='cart') renderCart();
  if(page==='category') renderCategory();
  if(page==='orders') renderOrders();
  if(page==='coupons') renderCoupons();
  if(page==='checkout') renderCheckout();
  if(page==='points') document.getElementById('points-big-num').textContent = userPoints;
  // Scroll to top
  const content = target.querySelector('.page-content');
  if(content) content.scrollTop = 0;
}

function goBack() {
  if(pageHistory.length>1){
    pageHistory.pop();
    const prev = pageHistory[pageHistory.length-1];
    navigateTo(prev, false);
  } else {
    navigateTo('home', false);
  }
}

function updateBottomNav(activePage) {
  const navMap = { home:0, category:1, cart:2, profile:3 };
  const activeIdx = navMap[activePage];
  document.querySelectorAll('.bottom-nav').forEach(nav=>{
    nav.querySelectorAll('.nav-item').forEach((item,i)=>{
      item.classList.toggle('active', i===activeIdx);
    });
  });
}

function buildBottomNav(containerId) {
  const items = [
    { icon:'🏠', label:'首页', page:'home' },
    { icon:'🏷️', label:'分类', page:'category' },
    { icon:'🛒', label:'购物车', page:'cart', hasBadge:true },
    { icon:'👤', label:'我的', page:'profile' },
  ];
  const html = items.map(it=>`
    <div class="nav-item ${it.page===currentPage?'active':''}" onclick="navigateTo('${it.page}')">
      <div class="nav-cart-wrap">
        <span class="icon">${it.icon}</span>
        ${it.hasBadge?'<span class="cart-badge hidden" id="nav-badge-'+containerId+'">0</span>':''}
      </div>
      <span>${it.label}</span>
    </div>
  `).join('');
  document.getElementById(containerId).innerHTML = html;
}

// ==================== Home ====================
function renderHome() {
  // Categories
  const catHtml = categories.slice(0,10).map(c=>`
    <div class="cat-item" onclick="openCategory('${c.id}')">
      <div class="cat-icon" style="background:${c.color}">${c.icon}</div>
      <div class="cat-name">${c.name}</div>
    </div>
  `).join('');
  document.getElementById('home-cat-grid').innerHTML = catHtml;

  // Flash sale products
  const flashIds = [2,9,17,32,38];
  const flashHtml = flashIds.map(id=>{
    const p = products.find(x=>x.id===id);
    return `<div class="flash-product" onclick="openDetail(${p.id})">
      <div class="img">${p.emoji}</div>
      <div class="name">${p.name}</div>
      <div class="price">¥${p.price}</div>
    </div>`;
  }).join('');
  document.getElementById('flash-products').innerHTML = flashHtml;

  // Recommended products
  const recIds = [1,7,13,17,21,25,28,40];
  const recHtml = recIds.map(id=>renderProductCard(id)).join('');
  document.getElementById('home-products').innerHTML = recHtml;
}

function renderProductCard(id) {
  const p = products.find(x=>x.id===id);
  if(!p) return '';
  const cartItem = cart.find(c=>c.id===id);
  const qty = cartItem ? cartItem.qty : 0;
  return `<div class="product-card" onclick="openDetail(${p.id})">
    <div class="product-img" style="background:${getCatColor(p.cat)}">
      ${p.emoji}
      ${p.tag?`<span class="product-tag">${p.tag}</span>`:''}
    </div>
    <div class="product-info">
      <div class="product-name">${p.name}</div>
      <div class="product-spec">${p.spec}</div>
      <div class="product-bottom">
        <span class="product-price"><small>¥</small>${p.price}</span>
        ${qty>0 ? `
          <div class="qty-control" onclick="event.stopPropagation()">
            <span class="qty-btn qty-minus" onclick="changeQty(${p.id},-1)">−</span>
            <span class="qty-num">${qty}</span>
            <span class="qty-btn qty-plus" onclick="changeQty(${p.id},1)">+</span>
          </div>
        ` : `<span class="add-btn" onclick="event.stopPropagation();changeQty(${p.id},1)">+</span>`}
      </div>
    </div>
  </div>`;
}

function getCatColor(catId) {
  const c = categories.find(x=>x.id===catId);
  return c ? c.color : '#f5f5f5';
}

function openCategory(catId) {
  currentCategory = catId;
  navigateTo('category');
}

function openDetail(id) {
  const p = products.find(x=>x.id===id);
  if(!p) return;
  currentProduct = p;
  document.getElementById('detail-img').textContent = p.emoji;
  document.getElementById('detail-img').style.background = getCatColor(p.cat);
  document.getElementById('detail-price').innerHTML = `<small>¥</small>${p.price}`;
  document.getElementById('detail-origin').textContent = '¥'+p.origin;
  document.getElementById('detail-name').textContent = p.name;
  document.getElementById('detail-desc').textContent = p.desc;
  document.getElementById('detail-spec').textContent = p.spec;
  const tags = [];
  if(p.tag) tags.push(p.tag);
  tags.push('当日达','坏果包赔','商家自配送');
  document.getElementById('detail-tags').innerHTML = tags.map(t=>`<span class="detail-tag">${t}</span>`).join('');
  navigateTo('detail');
}

// ==================== Category Page ====================
function renderCategory() {
  // Sidebar
  const sideHtml = categories.map(c=>`
    <div class="cat-side-item ${c.id===currentCategory?'active':''}" onclick="selectCategory('${c.id}')">${c.icon} ${c.name}</div>
  `).join('');
  document.getElementById('cat-sidebar').innerHTML = sideHtml;
  renderCatMain();
}

function selectCategory(catId) {
  currentCategory = catId;
  document.querySelectorAll('.cat-side-item').forEach(el=>el.classList.remove('active'));
  event.target.classList.add('active');
  renderCatMain();
}

function renderCatMain() {
  const cat = categories.find(c=>c.id===currentCategory);
  const catProducts = products.filter(p=>p.cat===currentCategory);
  const bannerColors = ['#00b578','#ff6b6b','#ffa502','#4ecdc4','#a8e6cf'];
  const color = bannerColors[categories.indexOf(cat)%bannerColors.length];
  let html = `<div class="cat-banner-small" style="background:linear-gradient(135deg,${color},${color}dd)">${cat.icon} ${cat.name} · 新鲜直达</div>`;
  html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">';
  catProducts.forEach(p=>{
    html += renderProductCard(p.id);
  });
  html += '</div>';
  if(catProducts.length===0) html += '<div style="text-align:center;padding:40px;color:#999;">暂无商品</div>';
  document.getElementById('cat-main').innerHTML = html;
}

// ==================== Cart ====================
function changeQty(id, delta) {
  const p = products.find(x=>x.id===id);
  if(!p) return;
  let item = cart.find(c=>c.id===id);
  if(delta>0){
    if(item) item.qty += delta;
    else cart.push({ id:p.id, name:p.name, spec:p.spec, price:p.price, emoji:p.emoji, qty:delta, selected:true });
  } else {
    if(item){
      item.qty += delta;
      if(item.qty<=0) cart = cart.filter(c=>c.id!==id);
    }
  }
  saveCart();
  // Re-render current page if needed
  if(currentPage==='home') renderHome();
  if(currentPage==='category') renderCatMain();
  if(currentPage==='cart') renderCart();
  if(delta>0) showToast('已加入购物车');
}

function addToCartFromDetail() {
  if(currentProduct){
    changeQty(currentProduct.id, 1);
  }
}

function renderCart() {
  const content = document.getElementById('cart-content');
  const bottomBar = document.getElementById('cart-bottom-bar');
  if(cart.length===0){
    content.innerHTML = `<div class="cart-empty">
      <div class="emoji">🛒</div>
      <div class="text">购物车还是空的</div>
      <div class="go-btn" onclick="navigateTo('home')">去逛逛</div>
    </div>`;
    bottomBar.style.display = 'none';
    return;
  }
  bottomBar.style.display = 'flex';
  let html = '';
  cart.forEach(item=>{
    html += `<div class="cart-item">
      <div class="cart-check ${item.selected?'checked':''}" onclick="toggleCartItem(${item.id})">${item.selected?'✓':''}</div>
      <div class="cart-img" style="background:${getCatColor(products.find(p=>p.id===item.id)?.cat||'veg')}">${item.emoji}</div>
      <div class="cart-info">
        <div class="cart-name">${item.name}</div>
        <div class="cart-spec">${item.spec}</div>
        <div class="cart-bottom">
          <span class="cart-price">¥${item.price}</span>
          <div class="qty-control">
            <span class="qty-btn qty-minus" onclick="changeQty(${item.id},-1)">−</span>
            <span class="qty-num">${item.qty}</span>
            <span class="qty-btn qty-plus" onclick="changeQty(${item.id},1)">+</span>
          </div>
        </div>
      </div>
    </div>`;
  });
  // Recommend more
  html += `<div style="padding:16px 12px;text-align:center;color:#999;font-size:12px;">— 再去逛逛 —</div>`;
  html += `<div class="product-grid">`;
  const recIds = [3,8,15,22];
  recIds.forEach(id=>{ html += renderProductCard(id); });
  html += `</div><div style="height:20px;"></div>`;
  content.innerHTML = html;
  updateCartTotal();
}

function toggleCartItem(id) {
  const item = cart.find(c=>c.id===id);
  if(item){ item.selected = !item.selected; saveCart(); renderCart(); }
}

function toggleSelectAll() {
  const allSelected = cart.every(c=>c.selected);
  cart.forEach(c=>c.selected = !allSelected);
  saveCart();
  renderCart();
}

function updateCartTotal() {
  const selected = cart.filter(c=>c.selected);
  const total = selected.reduce((s,i)=>s+i.price*i.qty,0);
  document.getElementById('cart-total-amount').textContent = '¥'+total.toFixed(2);
  const btn = document.getElementById('cart-checkout-btn');
  if(selected.length===0){ btn.classList.add('disabled'); btn.textContent='请选择商品'; }
  else { btn.classList.remove('disabled'); btn.textContent='去结算('+selected.reduce((s,i)=>s+i.qty,0)+')'; }
  // Select all state
  const allCheck = document.getElementById('cart-select-all');
  if(cart.length>0 && cart.every(c=>c.selected)){ allCheck.classList.add('checked'); allCheck.textContent='✓'; }
  else { allCheck.classList.remove('checked'); allCheck.textContent=''; }
}

function clearCart() {
  if(cart.length===0) return;
  cart = [];
  saveCart();
  renderCart();
  showToast('购物车已清空');
}

function goCheckout() {
  const selected = cart.filter(c=>c.selected);
  if(selected.length===0){ showToast('请选择商品'); return; }
  navigateTo('checkout');
}

// ==================== Checkout ====================
function renderCheckout() {
  const selected = cart.filter(c=>c.selected);
  let html = '';
  selected.forEach(item=>{
    html += `<div style="display:flex;align-items:center;gap:10px;padding:6px 0;">
      <div style="width:44px;height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:22px;background:${getCatColor('veg')}">${item.emoji}</div>
      <div style="flex:1;">
        <div style="font-size:13px;color:#333;">${item.name}</div>
        <div style="font-size:11px;color:#999;">${item.spec}</div>
      </div>
      <div style="text-align:right;">
        <div style="font-size:13px;color:#333;">¥${item.price}</div>
        <div style="font-size:11px;color:#999;">x${item.qty}</div>
      </div>
    </div>`;
  });
  document.getElementById('checkout-products').innerHTML = html;
  updateCheckoutPrices();
}

function switchFulfillment(mode) {
  fulfillmentMode = mode;
  document.getElementById('tab-delivery').classList.toggle('active', mode==='delivery');
  document.getElementById('tab-pickup').classList.toggle('active', mode==='pickup');
  document.getElementById('delivery-address-block').style.display = mode==='delivery'?'block':'none';
  document.getElementById('pickup-point-block').style.display = mode==='pickup'?'block':'none';
  updateCheckoutPrices();
}

function selectPickupPoint(el, idx) {
  document.querySelectorAll('.pickup-radio').forEach(r=>r.classList.remove('selected'));
  el.querySelector('.pickup-radio').classList.add('selected');
}

function updateCheckoutPrices() {
  const selected = cart.filter(c=>c.selected);
  const subtotal = selected.reduce((s,i)=>s+i.price*i.qty,0);
  let deliveryFee = 0;
  if(fulfillmentMode==='delivery'){
    deliveryFee = subtotal>=39 ? 0 : 3;
  }
  const couponDiscount = selectedCoupon ? selectedCoupon.amount : 0;
  const total = Math.max(0, subtotal + deliveryFee - couponDiscount);
  document.getElementById('ck-subtotal').textContent = '¥'+subtotal.toFixed(2);
  document.getElementById('ck-delivery-fee').textContent = deliveryFee===0?'免配送费':'¥'+deliveryFee.toFixed(2);
  document.getElementById('ck-coupon-discount').textContent = '-¥'+couponDiscount.toFixed(2);
  document.getElementById('ck-total').textContent = '¥'+total.toFixed(2);
  document.getElementById('ck-bottom-total').textContent = '¥'+total.toFixed(2);
}

function showCouponPicker() {
  const available = coupons.filter(c=>c.status==='available');
  let html = available.map(c=>`
    <div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5;cursor:pointer;" onclick="applyCoupon(${c.id})">
      <div style="width:60px;text-align:center;background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;border-radius:6px;padding:8px 4px;">
        <div style="font-size:18px;font-weight:700;">¥${c.amount}</div>
        <div style="font-size:9px;">${c.condition}</div>
      </div>
      <div style="flex:1;">
        <div style="font-size:13px;font-weight:600;color:#333;">${c.title}</div>
        <div style="font-size:11px;color:#999;">${c.valid}</div>
      </div>
    </div>
  `).join('');
  html += `<div style="text-align:center;padding:10px;cursor:pointer;color:#999;font-size:13px;" onclick="applyCoupon(0)">不使用优惠券</div>`;
  document.getElementById('modal-emoji').textContent = '🎟️';
  document.getElementById('modal-title').textContent = '选择优惠券';
  document.getElementById('modal-desc').innerHTML = html;
  document.querySelector('#modal .btn').style.display = 'none';
  document.getElementById('modal').classList.add('show');
}

function applyCoupon(id) {
  if(id===0){ selectedCoupon = null; }
  else { selectedCoupon = coupons.find(c=>c.id===id); }
  document.getElementById('checkout-coupon-text').textContent = selectedCoupon ? `-¥${selectedCoupon.amount}` : '未使用 ›';
  updateCheckoutPrices();
  closeModal();
  document.querySelector('#modal .btn').style.display = 'inline-block';
}

function showCouponCenter() {
  const toClaim = [
    { amount:10, condition:'满59可用', title:'周末满减券' },
    { amount:5, condition:'无门槛', title:'新人专享' },
    { amount:20, condition:'满99可用', title:'大促满减券' },
  ];
  let html = toClaim.map((c,i)=>`
    <div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5;">
      <div style="width:60px;text-align:center;background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;border-radius:6px;padding:8px 4px;">
        <div style="font-size:18px;font-weight:700;">¥${c.amount}</div>
        <div style="font-size:9px;">${c.condition}</div>
      </div>
      <div style="flex:1;text-align:left;">
        <div style="font-size:13px;font-weight:600;color:#333;">${c.title}</div>
      </div>
      <span style="background:#ff4757;color:#fff;font-size:11px;padding:4px 10px;border-radius:10px;cursor:pointer;" onclick="claimCoupon(${i})">领取</span>
    </div>
  `).join('');
  document.getElementById('modal-emoji').textContent = '🎁';
  document.getElementById('modal-title').textContent = '领券中心';
  document.getElementById('modal-desc').innerHTML = html;
  document.querySelector('#modal .btn').style.display = 'none';
  document.getElementById('modal').classList.add('show');
}

function claimCoupon(idx) {
  showToast('领取成功！');
  closeModal();
  document.querySelector('#modal .btn').style.display = 'inline-block';
}

function submitOrder() {
  const selected = cart.filter(c=>c.selected);
  if(selected.length===0){ showToast('请选择商品'); return; }
  // Show payment modal
  document.getElementById('modal-emoji').textContent = '💳';
  document.getElementById('modal-title').textContent = '演示环境';
  document.getElementById('modal-desc').innerHTML = '<div style="font-size:14px;color:#666;margin-bottom:10px;">订单金额：<span style="color:#ff4757;font-weight:700;font-size:18px;">'+document.getElementById('ck-total').textContent+'</span></div><div style="font-size:12px;color:#999;">点击下方按钮模拟支付</div>';
  document.querySelector('#modal .btn').textContent = '确认支付';
  document.querySelector('#modal .btn').onclick = function(){
    // Payment success
    const total = parseFloat(document.getElementById('ck-total').textContent.replace('¥',''));
    const earnedPoints = Math.floor(total);
    userPoints += earnedPoints;
    // Remove selected items from cart
    cart = cart.filter(c=>!c.selected);
    saveCart();
    selectedCoupon = null;
    closeModal();
    document.querySelector('#modal .btn').textContent = '确定';
    document.querySelector('#modal .btn').onclick = closeModal;
    // Show success
    document.getElementById('modal-emoji').textContent = '✅';
    document.getElementById('modal-title').textContent = '支付成功';
    document.getElementById('modal-desc').innerHTML = `<div style="font-size:13px;color:#666;line-height:1.8;">
      订单已提交！<br>
      ${fulfillmentMode==='delivery'?'🚚 商家自配送，预计30-60分钟送达':'🏪 请到店自提，取货码：A'+Math.floor(Math.random()*9000+1000)}<br>
      ⭐ 获得积分：<span style="color:#ff9500;font-weight:600;">+${earnedPoints}</span>
    </div>`;
    document.getElementById('modal').classList.add('show');
    // Navigate to orders after close
    document.querySelector('#modal .btn').onclick = function(){
      closeModal();
      navigateTo('orders');
      switchOrderTab('shipping');
    };
  };
  document.getElementById('modal').classList.add('show');
}

// ==================== Orders ====================
function switchOrderTab(status) {
  currentOrderTab = status;
  document.querySelectorAll('.order-tab').forEach(t=>{
    t.classList.toggle('active', t.dataset.status===status);
  });
  renderOrders();
}

function renderOrders() {
  const orders = mockOrders[currentOrderTab] || [];
  const content = document.getElementById('orders-content');
  if(orders.length===0){
    content.innerHTML = `<div class="empty-state"><div class="emoji">📦</div><div class="text">暂无订单</div></div>`;
    return;
  }
  let html = '';
  orders.forEach(o=>{
    const statusClass = o.status;
    let actions = '';
    if(o.status==='pending'){
      actions = `<button class="order-btn danger" onclick="showToast('取消订单')">取消订单</button>
        <button class="order-btn primary" onclick="showToast('去支付（演示）')">去支付</button>`;
    } else if(o.status==='shipping'){
      if(o.fulfillment==='pickup'){
        actions = `<button class="order-btn" onclick="showToast('取货码：${o.code}')">查看取货码</button>
          <button class="order-btn primary" onclick="showToast('确认收货（演示）')">确认收货</button>`;
      } else {
        actions = `<button class="order-btn" onclick="showToast('商家自配送中，配送员电话：138****9999')">查看配送</button>
          <button class="order-btn primary" onclick="showToast('确认收货（演示）')">确认收货</button>`;
      }
    } else if(o.status==='done'){
      actions = `<button class="order-btn" onclick="showToast('申请售后（演示）')">申请售后</button>
        <button class="order-btn primary" onclick="showToast('评价商品（演示）')">评价</button>`;
    } else {
      actions = `<button class="order-btn primary" onclick="showToast('重新购买（演示）')">重新购买</button>`;
    }
    html += `<div class="order-card">
      <div class="order-header">
        <span class="order-store">🏪 ${o.store}</span>
        <span class="order-status ${statusClass}">${o.statusText}</span>
      </div>
      <div class="order-products">
        ${o.items.map(it=>`
          <div class="order-product-item">
            <div class="order-prod-img" style="background:${getCatColor('veg')}">${it.emoji}</div>
            <div class="order-prod-info">
              <div class="order-prod-name">${it.name}</div>
              <div class="order-prod-spec">${it.spec}</div>
            </div>
            <div class="order-prod-qty">x${it.qty}</div>
          </div>
        `).join('')}
      </div>
      <div class="order-footer">
        <span class="order-total">共${o.items.reduce((s,i)=>s+i.qty,0)}件 合计：<span class="amt">¥${o.total.toFixed(2)}</span></span>
        <div class="order-actions">${actions}</div>
      </div>
    </div>`;
  });
  html += '<div style="height:20px;"></div>';
  content.innerHTML = html;
}

// ==================== Coupons Page ====================
function switchCouponTab(tab, el) {
  currentCouponTab = tab;
  el.parentElement.querySelectorAll('.order-tab').forEach(t=>t.classList.remove('active'));
  el.classList.add('active');
  renderCoupons();
}

function renderCoupons() {
  const list = coupons.filter(c=>c.status===currentCouponTab);
  const content = document.getElementById('coupons-content');
  if(list.length===0){
    content.innerHTML = `<div class="empty-state"><div class="emoji">🎟️</div><div class="text">暂无优惠券</div></div>`;
    return;
  }
  let html = '';
  list.forEach(c=>{
    const usedClass = c.status!=='available'?'used':'';
    const btnText = c.status==='available'?'立即使用':(c.status==='used'?'已使用':'已过期');
    html += `<div class="coupon-card ${usedClass}">
      <div class="coupon-left">
        <div class="coupon-amount"><small>¥</small>${c.amount}</div>
        <div class="coupon-condition">${c.condition}</div>
      </div>
      <div class="coupon-right">
        <div class="coupon-title">${c.title}</div>
        <div class="coupon-valid">有效期：${c.valid}</div>
        ${c.status==='available'?`<div class="coupon-use-btn" onclick="useCoupon(${c.id})">${btnText}</div>`:''}
      </div>
    </div>`;
  });
  content.innerHTML = html;
}

function useCoupon(id) {
  showToast('请在下单时选择使用该优惠券');
  setTimeout(()=>navigateTo('home'), 800);
}

// ==================== Points ====================
function exchangePoints(cost, name) {
  if(userPoints < cost){
    showToast('积分不足');
    return;
  }
  userPoints -= cost;
  document.getElementById('points-big-num').textContent = userPoints;
  document.getElementById('profile-points').textContent = userPoints;
  showToast('兑换成功：'+name);
}

// ==================== Address ====================
function toggleDefault(el) {
  document.querySelectorAll('.address-default-toggle').forEach(t=>{
    t.classList.remove('on');
    t.querySelector('span').textContent = '设为默认';
  });
  el.classList.add('on');
  el.querySelector('span').textContent = '默认地址';
  showToast('已设为默认地址');
}

// ==================== Search ====================
function doSearch() {
  const kw = document.getElementById('home-search-input').value.trim();
  if(!kw){ showToast('请输入搜索关键词'); return; }
  showToast('搜索：'+kw+'（演示）');
}

// ==================== Carousel ====================
let carouselIdx = 0;
function initCarousel() {
  setInterval(()=>{
    carouselIdx = (carouselIdx+1)%3;
    document.getElementById('carousel-track').style.transform = `translateX(-${carouselIdx*100}%)`;
    document.querySelectorAll('.carousel-dot').forEach((d,i)=>d.classList.toggle('active',i===carouselIdx));
  }, 3500);
}

// Flash timer
function initFlashTimer() {
  let total = 2*3600 + 35*60 + 18;
  setInterval(()=>{
    total--;
    if(total<0) total = 2*3600;
    const h = String(Math.floor(total/3600)).padStart(2,'0');
    const m = String(Math.floor((total%3600)/60)).padStart(2,'0');
    const s = String(total%60).padStart(2,'0');
    const el = document.getElementById('flash-timer');
    if(el) el.textContent = `距结束 ${h}:${m}:${s}`;
  }, 1000);
}

// ==================== Utilities ====================
function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(t._timer);
  t._timer = setTimeout(()=>t.classList.remove('show'), 1800);
}

function closeModal() {
  document.getElementById('modal').classList.remove('show');
}

// ==================== Init ====================
function init() {
  // Build bottom navs
  ['bottom-nav-home','bottom-nav-category','bottom-nav-cart','bottom-nav-orders','bottom-nav-profile'].forEach(id=>buildBottomNav(id));
  renderHome();
  initCarousel();
  initFlashTimer();
  updateCartBadge();
  updateBottomNav('home');
  // Search enter
  document.getElementById('home-search-input').addEventListener('keypress', e=>{ if(e.key==='Enter') doSearch(); });
}

init();
</script>
</body>
</html>