编辑页面

页面标题

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

CSS文件（可选）

/* ========================================
   外卖APP - 用户端 样式表
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary-color: #FF6B35;
    --primary-light: #FF8E53;
    --success-color: #4ECDC4;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    --bg-light: #f5f5f5;
    --border-color: #eee;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: #f5f5f5;
    overflow: hidden;
    height: 100%;
}

.app-container {
    max-width: 430px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* ========================================
   状态栏
   ======================================== */
.status-bar {
    height: 24px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
}

.status-icons {
    display: flex;
    gap: 4px;
}

/* ========================================
   页面容器
   ======================================== */
.page-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 60px;
}

.page {
    display: none;
    min-height: 100%;
}

.page.active {
    display: block;
}

/* ========================================
   首页 - 定位栏
   ======================================== */
.location-bar {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
}

.location-left {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.location-text {
    font-size: 14px;
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.switch-location-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
}

/* ========================================
   搜索栏
   ======================================== */
.search-bar {
    margin: 12px 16px;
    padding: 10px 16px;
    background: #f5f5f5;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.search-bar input::placeholder {
    color: var(--text-light);
}

/* ========================================
   分类导航
   ======================================== */
.category-nav {
    padding: 0 12px;
    margin-bottom: 16px;
}

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

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

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

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

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

/* ========================================
   轮播公告
   ======================================== */
.banner-carousel {
    padding: 0 16px;
    margin-bottom: 16px;
    position: relative;
}

.carousel-inner {
    border-radius: 12px;
    overflow: hidden;
}

.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}

.banner-content {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 120px;
    border-radius: 12px;
    color: #fff;
}

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

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

.banner-icon {
    font-size: 48px;
}

.carousel-dots {
    position: absolute;
    bottom: 12px;
    right: 28px;
    display: flex;
    gap: 6px;
}

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

.dot.active {
    background: #fff;
}

/* ========================================
   商家列表
   ======================================== */
.section-title {
    padding: 0 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
}

.title-icon {
    font-size: 18px;
}

.store-list {
    padding: 0 16px;
}

.store-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.store-item:active {
    transform: scale(0.98);
}

.store-info {
    display: flex;
    gap: 12px;
}

.store-logo {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    object-fit: cover;
}

.store-detail {
    flex: 1;
}

.store-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.store-name .recommend-tag {
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: normal;
}

.store-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.rating {
    color: #FF9500;
}

.store-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    background: #FFF5F0;
    color: var(--primary-color);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
}

.store-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

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

.delivery-info span {
    color: var(--primary-color);
    font-weight: 500;
}

.promotion-tag {
    background: #FFEBE6;
    color: var(--primary-color);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ========================================
   商家详情页
   ======================================== */
.store-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 20px 16px;
    position: relative;
}

.store-header .back-btn {
    position: absolute;
    left: 16px;
    top: 20px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-header .favorite-btn {
    position: absolute;
    right: 16px;
    top: 20px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-header-info {
    text-align: center;
    padding-top: 20px;
}

.store-header-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.store-header-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    opacity: 0.9;
}

.store-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

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

.store-tabs .tab.active {
    color: var(--primary-color);
    font-weight: 600;
}

.store-tabs .tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.store-content {
    padding: 16px;
}

/* 菜单分类 */
.menu-category {
    margin-bottom: 16px;
}

.category-title {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    color: var(--text-primary);
}

.menu-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.menu-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.menu-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.menu-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

.menu-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.menu-price {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.menu-price span {
    font-size: 12px;
}

.menu-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn.minus {
    background: #f5f5f5;
    color: var(--text-secondary);
}

.qty-btn.add {
    background: var(--primary-color);
    color: #fff;
}

.qty-num {
    min-width: 20px;
    text-align: center;
    font-size: 14px;
}

/* 评价页面 */
.review-summary {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #FFF9F7;
    border-radius: 12px;
    margin-bottom: 16px;
}

.review-score {
    text-align: center;
}

.review-score .score {
    font-size: 28px;
    color: var(--primary-color);
    font-weight: 600;
}

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

.review-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.review-tag {
    background: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.review-tag .count {
    color: var(--primary-color);
    margin-left: 4px;
}

.review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.review-user {
    flex: 1;
}

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

.review-time {
    font-size: 12px;
    color: var(--text-light);
}

.review-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}

.review-images {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.review-images img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

/* 公告页面 */
.store-notice {
    background: #FFF9F7;
    padding: 16px;
    border-radius: 12px;
}

.notice-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notice-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ========================================
   确认订单页
   ======================================== */
.cart-header, .track-header, .order-list-header, .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.cart-header h2, .track-header h2, .order-list-header h2, .page-header h2 {
    font-size: 16px;
    font-weight: 600;
}

.back-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-primary);
}

.page-header .add-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
}

.cart-content {
    padding: 16px;
}

.delivery-address {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #FFF9F7;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.address-icon {
    width: 40px;
    height: 40px;
    background: #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-info {
    flex: 1;
}

.address-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

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

.delivery-time {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.time-option {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
}

.time-option.active {
    border-color: var(--primary-color);
    background: #FFF9F7;
}

.time-label {
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}

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

.cart-items {
    margin-bottom: 12px;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.cart-item-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.cart-item-price {
    color: var(--primary-color);
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-remark {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 12px;
}

.order-remark label {
    color: var(--text-secondary);
    white-space: nowrap;
}

.order-remark input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.coupon-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
}

.coupon-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coupon-right {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

#selectedCoupon {
    color: var(--primary-color);
}

.order-summary {
    padding: 12px 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.summary-row.total {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
}

.summary-row .value {
    color: var(--primary-color);
}

.payment-section {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.payment-method {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-method span:first-of-type {
    flex: 1;
    font-size: 14px;
}

.check-icon {
    color: var(--success-color);
    font-weight: 600;
}

.cart-footer {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.total-info {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

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

.total-amount {
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
}

.submit-order-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* ========================================
   订单跟踪页
   ======================================== */
.track-content {
    padding: 16px;
}

.order-status-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.status-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.status-text {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-desc {
    font-size: 14px;
    opacity: 0.9;
}

.order-timeline {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.timeline-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #ddd;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.timeline-time {
    font-size: 12px;
    color: var(--text-light);
}

.rider-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 12px;
}

.rider-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.rider-detail {
    flex: 1;
}

.rider-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
}

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

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

.map-container {
    height: 150px;
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.map-placeholder {
    text-align: center;
    color: var(--success-color);
}

.map-placeholder p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.store-contact {
    display: flex;
    gap: 12px;
}

.contact-store-btn, .remind-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
}

.contact-store-btn {
    background: #f5f5f5;
    color: var(--text-primary);
}

.remind-btn {
    background: #FFF3E0;
    color: #FF9800;
}

/* ========================================
   订单列表页
   ======================================== */
.order-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
}

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

.order-tab.active {
    color: var(--primary-color);
    font-weight: 600;
}

.order-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.order-list {
    padding: 16px;
}

.order-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

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

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

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

.order-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
}

.order-item-name {
    color: var(--text-secondary);
}

.order-item-price {
    color: var(--text-primary);
}

.order-total {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.order-total-price {
    color: var(--primary-color);
    font-weight: 600;
    margin-left: 8px;
}

.order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.order-btn {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    border: none;
    cursor: pointer;
}

.order-btn.primary {
    background: var(--primary-color);
    color: #fff;
}

.order-btn.secondary {
    background: #f5f5f5;
    color: var(--text-primary);
}

.order-btn.refund {
    background: #FFF3E0;
    color: #FF9800;
}

/* ========================================
   个人中心页
   ======================================== */
.profile-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    padding: 24px 16px;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
}

.profile-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-phone {
    font-size: 14px;
    opacity: 0.8;
}

.profile-menu {
    padding: 16px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.menu-item span:first-of-type {
    flex: 1;
    font-size: 15px;
}

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

/* ========================================
   地址列表页
   ======================================== */
.address-list {
    padding: 16px;
}

.address-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}

.address-card-info {
    margin-bottom: 12px;
}

.address-card-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

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

.address-card-actions {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.address-card-actions span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.address-card-actions span.default {
    color: var(--primary-color);
}

/* ========================================
   优惠券页
   ======================================== */
.coupon-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
}

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

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

.coupon-list {
    padding: 16px;
}

.coupon-card {
    background: linear-gradient(135deg, #FF6B35, #FF8E53);
    color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.coupon-card::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
}

.coupon-card::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
}

.coupon-value {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 4px;
}

.coupon-value span {
    font-size: 16px;
}

.coupon-condition {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.coupon-time {
    font-size: 12px;
    opacity: 0.8;
}

/* ========================================
   收藏商家页
   ======================================== */
.favorite-list {
    padding: 16px;
}

/* ========================================
   客服页
   ======================================== */
.service-content {
    padding: 16px;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.service-icon {
    font-size: 32px;
}

.service-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
}

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

/* ========================================
   底部导航栏
   ======================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 430px;
    margin: 0 auto;
    background: #fff;
    display: flex;
    padding: 8px 0;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    z-index: 100;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
}

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

.nav-item span {
    font-size: 11px;
}

.nav-item .badge {
    position: absolute;
    top: -2px;
    right: 20px;
    background: var(--primary-color);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ========================================
   购物车悬浮按钮
   ======================================== */
.cart-float-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 99;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #FF3B30;
    color: #fff;
    font-size: 12px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   模态框
   ======================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: center;
    align-items: flex-end;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #fff;
    max-height: 80%;
    overflow-y: auto;
}

.modal-bottom {
    width: 100%;
    max-width: 430px;
    border-radius: 16px 16px 0 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.close-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-secondary);
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.no-coupon-btn {
    width: 100%;
    padding: 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* 地址选择列表 */
.address-select-list .address-item {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.address-select-list .address-item.active {
    background: #FFF9F7;
}

.address-select-list .address-item-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

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

/* 新增地址表单 */
.form-item {
    margin-bottom: 16px;
}

.form-item label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-item input, .form-item select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.address-picker {
    display: flex;
    gap: 8px;
}

.address-picker select {
    flex: 1;
}

.save-address-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    cursor: pointer;
}

/* 位置选择列表 */
.location-search {
    padding: 12px;
    background: #f5f5f5;
    border-radius: 20px;
    margin-bottom: 12px;
}

.location-search input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.location-list {
    max-height: 300px;
    overflow-y: auto;
}

.location-item {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.location-item.active {
    background: #FFF9F7;
}

.location-item .location-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}

.location-item .location-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

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

.toast.show {
    opacity: 1;
}

/* ========================================
   空状态
   ======================================== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

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

/* ========================================
   动画
   ======================================== */
@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.page.slide-in {
    animation: slideIn 0.3s ease;
}

.page.slide-out {
    animation: slideOut 0.3s ease;
}

/* ========================================
   滚动条
   ======================================== */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* ========================================
   响应式
   ======================================== */
@media (max-width: 430px) {
    .app-container {
        max-width: 100%;
    }
    
    .cart-footer, .bottom-nav {
        max-width: 100%;
    }
}

JS文件（可选）

// ========================================
// 外卖APP - 用户端 JavaScript
// ========================================

// 模拟数据
const mockStores = [
    {
        id: 1,
        name: '老地方家常菜',
        logo: 'https://picsum.photos/200?random=1',
        rating: 4.8,
        sales: 1520,
        minPrice: 15,
        deliveryFee: 2,
        deliveryTime: '25-35分钟',
        tags: ['口碑推荐', '月销过千', '快速出餐'],
        promotion: '满25减5',
        category: 'food',
        description: '正宗川菜，色香味俱全'
    },
    {
        id: 2,
        name: '优鲜水果店',
        logo: 'https://picsum.photos/200?random=2',
        rating: 4.9,
        sales: 980,
        minPrice: 20,
        deliveryFee: 0,
        deliveryTime: '20-30分钟',
        tags: ['新鲜直达', '水果新鲜'],
        promotion: '新客立减3元',
        category: 'fruit',
        description: '当日新鲜水果，当日配送'
    },
    {
        id: 3,
        name: '康康大药房',
        logo: 'https://picsum.photos/200?random=3',
        rating: 4.7,
        sales: 560,
        minPrice: 30,
        deliveryFee: 3,
        deliveryTime: '30-45分钟',
        tags: ['24小时营业', '专业药师'],
        promotion: '满50减10',
        category: 'medicine',
        description: '正规药品，品质保证'
    },
    {
        id: 4,
        name: '幸福超市',
        logo: 'https://picsum.photos/200?random=4',
        rating: 4.6,
        sales: 2100,
        minPrice: 25,
        deliveryFee: 1,
        deliveryTime: '25-40分钟',
        tags: ['大型超市', '品类齐全'],
        promotion: '满39减5',
        category: 'supermarket',
        description: '日用百货，应有尽有'
    },
    {
        id: 5,
        name: '茶颜悦色',
        logo: 'https://picsum.photos/200?random=5',
        rating: 4.8,
        sales: 3200,
        minPrice: 18,
        deliveryFee: 0,
        deliveryTime: '15-25分钟',
        tags: ['人气奶茶', '网红推荐'],
        promotion: '第二杯半价',
        category: 'drinks',
        description: '新中式茶饮，味道独特'
    },
    {
        id: 6,
        name: '甜蜜时光烘焙',
        logo: 'https://picsum.photos/200?random=6',
        rating: 4.9,
        sales: 1280,
        minPrice: 22,
        deliveryFee: 2,
        deliveryTime: '20-30分钟',
        tags: ['手工烘焙', '新鲜制作'],
        promotion: '满40减8',
        category: 'cake',
        description: '现做蛋糕，甜蜜每一天'
    }
];

const mockMenu = {
    1: [
        { id: 101, name: '宫保鸡丁', desc: '经典川菜，鸡丁嫩滑', price: 28, img: 'https://picsum.photos/200?random=10' },
        { id: 102, name: '麻婆豆腐', desc: '麻辣鲜香，下饭神器', price: 18, img: 'https://picsum.photos/200?random=11' },
        { id: 103, name: '鱼香肉丝', desc: '酸甜适中，肉丝滑嫩', price: 26, img: 'https://picsum.photos/200?random=12' },
        { id: 104, name: '回锅肉', desc: '肥而不腻，香味浓郁', price: 32, img: 'https://picsum.photos/200?random=13' },
        { id: 105, name: '酸菜鱼', desc: '鱼肉鲜嫩，酸辣可口', price: 38, img: 'https://picsum.photos/200?random=14' },
        { id: 106, name: '水煮牛肉', desc: '麻辣鲜香，牛肉嫩滑', price: 42, img: 'https://picsum.photos/200?random=15' }
    ],
    2: [
        { id: 201, name: '红富士苹果', desc: '脆甜多汁，新鲜直达', price: 8, img: 'https://picsum.photos/200?random=20' },
        { id: 202, name: '香蕉', desc: '自然成熟，口感香甜', price: 5, img: 'https://picsum.photos/200?random=21' },
        { id: 203, name: '西瓜', desc: '夏日解暑，汁多味甜', price: 15, img: 'https://picsum.photos/200?random=22' },
        { id: 204, name: '橙子', desc: '维C满满，酸甜可口', price: 7, img: 'https://picsum.photos/200?random=23' }
    ],
    3: [
        { id: 301, name: '感冒灵颗粒', desc: '缓解感冒症状', price: 12, img: 'https://picsum.photos/200?random=30' },
        { id: 302, name: '止咳糖浆', desc: '润肺止咳', price: 18, img: 'https://picsum.photos/200?random=31' },
        { id: 303, name: '维生素C', desc: '增强免疫力', price: 25, img: 'https://picsum.photos/200?random=32' }
    ],
    4: [
        { id: 401, name: '农夫山泉', desc: '天然矿泉水', price: 2, img: 'https://picsum.photos/200?random=40' },
        { id: 402, name: '方便面', desc: '康师傅红烧牛肉面', price: 4.5, img: 'https://picsum.photos/200?random=41' },
        { id: 403, name: '卫生纸', desc: '抽取式纸巾', price: 12, img: 'https://picsum.photos/200?random=42' },
        { id: 404, name: '洗衣液', desc: '立白洗衣液2kg', price: 28, img: 'https://picsum.photos/200?random=43' }
    ],
    5: [
        { id: 501, name: '幽兰拿铁', desc: '经典招牌，奶香浓郁', price: 18, img: 'https://picsum.photos/200?random=50' },
        { id: 502, name: '声声乌龙', desc: '乌龙茶底，清爽回甘', price: 16, img: 'https://picsum.photos/200?random=51' },
        { id: 503, name: '筝筝纸鸢', desc: '桂花乌龙，清香怡人', price: 17, img: 'https://picsum.photos/200?random=52' },
        { id: 504, name: '人间烟火', desc: '大红袍茶底，醇厚回甘', price: 19, img: 'https://picsum.photos/200?random=53' }
    ],
    6: [
        { id: 601, name: '提拉米苏', desc: '经典意式甜点', price: 35, img: 'https://picsum.photos/200?random=60' },
        { id: 602, name: '芒果慕斯', desc: '芒果清香，入口即化', price: 38, img: 'https://picsum.photos/200?random=61' },
        { id: 603, name: '芝士蛋糕', desc: '浓郁芝士，口感绵密', price: 32, img: 'https://picsum.photos/200?random=62' }
    ]
};

const mockAddresses = [
    { id: 1, name: '张三', phone: '138****8888', town: 'XX镇', village: 'XX村', detail: '1组12号', isDefault: true },
    { id: 2, name: '李四', phone: '139****6666', town: 'XX镇', village: 'YY村', detail: '3组5号', isDefault: false }
];

const mockCoupons = [
    { id: 1, name: '满25减5', value: 5, condition: '满25元可用', expireTime: '2026-06-30', available: true },
    { id: 2, name: '满40减8', value: 8, condition: '满40元可用', expireTime: '2026-06-28', available: true },
    { id: 3, name: '满60减15', value: 15, condition: '满60元可用', expireTime: '2026-06-25', available: false }
];

const mockOrders = [
    {
        id: 'DD20260605001',
        storeName: '老地方家常菜',
        storeLogo: 'https://picsum.photos/200?random=1',
        status: 'preparing',
        statusText: '备餐中',
        items: [
            { name: '宫保鸡丁 x1', price: 28 },
            { name: '麻婆豆腐 x1', price: 18 }
        ],
        total: 48,
        createTime: '16:30'
    },
    {
        id: 'DD20260605002',
        storeName: '茶颜悦色',
        storeLogo: 'https://picsum.photos/200?random=5',
        status: 'completed',
        statusText: '已完成',
        items: [
            { name: '幽兰拿铁 x2', price: 36 }
        ],
        total: 34,
        createTime: '14:20'
    },
    {
        id: 'DD20260605003',
        storeName: '幸福超市',
        storeLogo: 'https://picsum.photos/200?random=4',
        status: 'pending',
        statusText: '待接单',
        items: [
            { name: '农夫山泉 x2', price: 4 },
            { name: '方便面 x3', price: 13.5 }
        ],
        total: 19.5,
        createTime: '10:15'
    }
];

// 全局状态
let state = {
    currentPage: 'home',
    currentStore: null,
    cart: {},
    selectedAddress: mockAddresses[0],
    selectedCoupon: null,
    orders: mockOrders,
    location: 'XX镇XX村'
};

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    renderStoreList();
    renderOrderList();
    renderAddressList();
    renderCouponList();
    initCarousel();
    updateCartBadge();
});

// ========================================
// 页面导航
// ========================================

function showPage(pageId) {
    const pages = document.querySelectorAll('.page');
    pages.forEach(page => page.classList.remove('active'));
    
    const targetPage = document.getElementById(pageId + 'Page');
    if (targetPage) {
        targetPage.classList.add('active');
        state.currentPage = pageId;
    }
}

function goBack() {
    if (state.currentPage === 'store') {
        showPage('home');
    } else if (state.currentPage === 'cart') {
        showPage('store');
    } else if (state.currentPage === 'track') {
        showPage('orders');
    } else {
        showPage('home');
    }
}

function switchTab(tab) {
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => item.classList.remove('active'));
    event.currentTarget.classList.add('active');
    
    switch(tab) {
        case 'home':
            showPage('home');
            break;
        case 'orders':
            showPage('order');
            break;
        case 'cart':
            showPage('cart');
            break;
        case 'profile':
            showPage('profile');
            break;
    }
}

// ========================================
// 商家列表
// ========================================

function renderStoreList(filter = null) {
    const storeList = document.getElementById('storeList');
    let stores = mockStores;
    
    if (filter) {
        stores = mockStores.filter(s => s.category === filter);
    }
    
    storeList.innerHTML = stores.map(store => `
        <div class="store-item" onclick="openStore(${store.id})">
            <div class="store-info">
                <img src="${store.logo}" alt="${store.name}" class="store-logo">
                <div class="store-detail">
                    <div class="store-name">
                        ${store.name}
                        <span class="recommend-tag">推荐</span>
                    </div>
                    <div class="store-meta">
                        <span class="rating">⭐ ${store.rating}</span>
                        <span>月售${store.sales}</span>
                        <span>约${store.deliveryTime}</span>
                    </div>
                    <div class="store-tags">
                        ${store.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
                    </div>
                </div>
            </div>
            <div class="store-bottom">
                <div class="delivery-info">
                    <span>¥${store.minPrice}起送</span>
                    <span>|</span>
                    <span>配送费¥${store.deliveryFee}</span>
                </div>
                <span class="promotion-tag">${store.promotion}</span>
            </div>
        </div>
    `).join('');
}

function filterByCategory(category) {
    renderStoreList(category);
}

function handleSearch(keyword) {
    if (!keyword) {
        renderStoreList();
        return;
    }
    
    const filtered = mockStores.filter(store => 
        store.name.includes(keyword) || 
        store.category.includes(keyword) ||
        store.tags.some(tag => tag.includes(keyword))
    );
    
    const storeList = document.getElementById('storeList');
    if (filtered.length === 0) {
        storeList.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">未找到相关商家</div></div>';
    } else {
        renderStoreList();
    }
}

// ========================================
// 商家详情
// ========================================

function openStore(storeId) {
    state.currentStore = mockStores.find(s => s.id === storeId);
    
    renderStoreHeader();
    renderStoreMenu();
    showPage('store');
}

function renderStoreHeader() {
    const store = state.currentStore;
    const header = document.getElementById('storeHeader');
    
    header.innerHTML = `
        <button class="back-btn" onclick="goBack()">←</button>
        <button class="favorite-btn" onclick="toggleFavorite()">🤍</button>
        <div class="store-header-info">
            <div class="store-header-name">${store.name}</div>
            <div class="store-header-meta">
                <span>⭐ ${store.rating}</span>
                <span>月售${store.sales}</span>
                <span>约${store.deliveryTime}</span>
            </div>
        </div>
    `;
}

function switchStoreTab(tab) {
    const tabs = document.querySelectorAll('.store-tabs .tab');
    tabs.forEach(t => t.classList.remove('active'));
    event.currentTarget.classList.add('active');
    
    switch(tab) {
        case 'menu':
            renderStoreMenu();
            break;
        case 'review':
            renderStoreReview();
            break;
        case 'notice':
            renderStoreNotice();
            break;
    }
}

function renderStoreMenu() {
    const store = state.currentStore;
    const menu = mockMenu[store.id] || [];
    const content = document.getElementById('storeContent');
    
    content.innerHTML = `
        <div class="menu-category">
            <div class="category-title">推荐菜品</div>
            ${menu.map(item => `
                <div class="menu-item">
                    <img src="${item.img}" alt="${item.name}" class="menu-img">
                    <div class="menu-detail">
                        <div class="menu-name">${item.name}</div>
                        <div class="menu-desc">${item.desc}</div>
                        <div class="menu-bottom">
                            <div class="menu-price">¥${item.price}<span>.00</span></div>
                            <div class="menu-actions">
                                ${getCartQty(store.id, item.id) > 0 ? `
                                    <button class="qty-btn minus" onclick="updateCart(${store.id}, ${item.id}, -1)">−</button>
                                    <span class="qty-num">${getCartQty(store.id, item.id)}</span>
                                    <button class="qty-btn add" onclick="updateCart(${store.id}, ${item.id}, 1)">+</button>
                                ` : `
                                    <button class="qty-btn add" onclick="updateCart(${store.id}, ${item.id}, 1)">+</button>
                                `}
                            </div>
                        </div>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
}

function renderStoreReview() {
    const content = document.getElementById('storeContent');
    content.innerHTML = `
        <div class="review-summary">
            <div class="review-score">
                <div class="score">4.8</div>
                <div class="label">综合评分</div>
            </div>
            <div class="review-tags">
                <div class="review-tag">味道好 <span class="count">328</span></div>
                <div class="review-tag">包装精美 <span class="count">256</span></div>
                <div class="review-tag">配送快 <span class="count">198</span></div>
                <div class="review-tag">分量足 <span class="count">156</span></div>
            </div>
        </div>
        <div class="review-item">
            <div class="review-header">
                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=u1" class="review-avatar">
                <div class="review-user">
                    <div class="review-name">用户1***2</div>
                    <div class="review-time">2026-06-04 18:30</div>
                </div>
            </div>
            <div class="review-content">味道不错，分量足，会再来！</div>
        </div>
        <div class="review-item">
            <div class="review-header">
                <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=u2" class="review-avatar">
                <div class="review-user">
                    <div class="review-name">用户2***5</div>
                    <div class="review-time">2026-06-03 12:15</div>
                </div>
            </div>
            <div class="review-content">包装很用心，菜品新鲜，骑手服务好！</div>
            <div class="review-images">
                <img src="https://picsum.photos/100?random=100">
                <img src="https://picsum.photos/100?random=101">
            </div>
        </div>
    `;
}

function renderStoreNotice() {
    const store = state.currentStore;
    const content = document.getElementById('storeContent');
    content.innerHTML = `
        <div class="store-notice">
            <div class="notice-title">📢 店铺公告</div>
            <div class="notice-content">
                <p>欢迎光临${store.name}！</p>
                <p>${store.description}</p>
                <p>营业时间：09:00 - 22:00</p>
                <p>如有任何问题，请联系客服。</p>
            </div>
        </div>
    `;
}

function toggleFavorite() {
    showToast('已收藏店铺');
}

// ========================================
// 购物车
// ========================================

function getCartKey(storeId, itemId) {
    return `${storeId}_${itemId}`;
}

function getCartQty(storeId, itemId) {
    const key = getCartKey(storeId, itemId);
    return state.cart[key]?.qty || 0;
}

function updateCart(storeId, itemId, delta) {
    const key = getCartKey(storeId, itemId);
    const menu = mockMenu[storeId]?.find(m => m.id === itemId);
    if (!menu) return;
    
    const currentQty = state.cart[key]?.qty || 0;
    const newQty = Math.max(0, currentQty + delta);
    
    if (newQty === 0) {
        delete state.cart[key];
    } else {
        state.cart[key] = {
            storeId,
            itemId,
            name: menu.name,
            price: menu.price,
            img: menu.img,
            qty: newQty
        };
    }
    
    updateCartBadge();
    
    // 重新渲染菜单
    if (state.currentPage === 'store') {
        renderStoreMenu();
    }
}

function updateCartBadge() {
    const totalQty = Object.values(state.cart).reduce((sum, item) => sum + item.qty, 0);
    const cartBadge = document.getElementById('cartBadge');
    const cartFloatCount = document.getElementById('cartFloatCount');
    const cartFloatBtn = document.getElementById('cartFloatBtn');
    
    if (totalQty > 0) {
        cartBadge.textContent = totalQty;
        cartBadge.style.display = 'flex';
        cartFloatCount.textContent = totalQty;
        cartFloatBtn.style.display = 'flex';
    } else {
        cartBadge.style.display = 'none';
        cartFloatBtn.style.display = 'none';
    }
}

function showCartPage() {
    renderCartItems();
    showPage('cart');
}

function renderCartItems() {
    const cartItems = document.getElementById('cartItems');
    const items = Object.values(state.cart);
    
    if (items.length === 0) {
        cartItems.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🛒</div><div class="empty-state-text">购物车是空的</div></div>';
        return;
    }
    
    cartItems.innerHTML = items.map(item => `
        <div class="cart-item">
            <img src="${item.img}" alt="${item.name}" class="cart-item-img">
            <div class="cart-item-info">
                <div class="cart-item-name">${item.name}</div>
                <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
            </div>
            <div class="cart-item-qty">
                <button class="qty-btn minus" onclick="updateCartFromCart(${item.storeId}, ${item.itemId}, -1)">−</button>
                <span class="qty-num">${item.qty}</span>
                <button class="qty-btn add" onclick="updateCartFromCart(${item.storeId}, ${item.itemId}, 1)">+</button>
            </div>
        </div>
    `).join('');
    
    updateOrderSummary();
}

function updateCartFromCart(storeId, itemId, delta) {
    updateCart(storeId, itemId, delta);
    renderCartItems();
}

function updateOrderSummary() {
    const items = Object.values(state.cart);
    const goodsAmount = items.reduce((sum, item) => sum + item.price * item.qty, 0);
    const deliveryFee = items.length > 0 ? 2 : 0;
    const packagingFee = items.length > 0 ? 1 : 0;
    const discount = state.selectedCoupon ? state.selectedCoupon.value : 0;
    const total = goodsAmount + deliveryFee + packagingFee - discount;
    
    const summary = document.getElementById('orderSummary');
    summary.innerHTML = `
        <div class="summary-row">
            <span>商品金额</span>
            <span class="value">¥${goodsAmount.toFixed(2)}</span>
        </div>
        <div class="summary-row">
            <span>配送费</span>
            <span class="value">¥${deliveryFee.toFixed(2)}</span>
        </div>
        <div class="summary-row">
            <span>包装费</span>
            <span class="value">¥${packagingFee.toFixed(2)}</span>
        </div>
        ${discount > 0 ? `
            <div class="summary-row">
                <span>优惠券</span>
                <span class="value">-¥${discount.toFixed(2)}</span>
            </div>
        ` : ''}
        <div class="summary-row total">
            <span>合计</span>
            <span class="value">¥${total.toFixed(2)}</span>
        </div>
    `;
    
    document.getElementById('totalAmount').textContent = `¥${total.toFixed(2)}`;
}

// ========================================
// 地址管理
// ========================================

function showAddressModal() {
    const modal = document.getElementById('addressModal');
    const list = document.getElementById('addressModalList');
    
    list.innerHTML = `
        <div class="address-select-list">
            ${mockAddresses.map(addr => `
                <div class="address-item ${addr.id === state.selectedAddress.id ? 'active' : ''}" onclick="selectAddress(${addr.id})">
                    <div class="address-item-name">${addr.name} ${addr.phone}</div>
                    <div class="address-item-detail">${addr.town}${addr.village}${addr.detail}</div>
                </div>
            `).join('')}
        </div>
    `;
    
    modal.classList.add('active');
}

function selectAddress(addressId) {
    const address = mockAddresses.find(a => a.id === addressId);
    if (address) {
        state.selectedAddress = address;
        document.getElementById('selectedAddressName').textContent = `${address.name} ${address.phone}`;
        document.getElementById('selectedAddressDetail').textContent = `${address.town}${address.village}${address.detail}`;
        closeModal('addressModal');
    }
}

function renderAddressList() {
    const list = document.getElementById('addressList');
    list.innerHTML = mockAddresses.map(addr => `
        <div class="address-card">
            <div class="address-card-info">
                <div class="address-card-name">${addr.name} ${addr.phone}</div>
                <div class="address-card-detail">${addr.town}${addr.village}${addr.detail}</div>
            </div>
            <div class="address-card-actions">
                <span class="${addr.isDefault ? 'default' : ''}">✓ 默认地址</span>
                <span onclick="editAddress(${addr.id})">✏️ 编辑</span>
                <span onclick="deleteAddress(${addr.id})">🗑️ 删除</span>
            </div>
        </div>
    `).join('');
}

function showAddAddressModal() {
    const modal = document.getElementById('addAddressModal');
    modal.classList.add('active');
}

function saveNewAddress() {
    const name = document.getElementById('newAddressName').value;
    const phone = document.getElementById('newAddressPhone').value;
    const town = document.getElementById('newAddressTown').value;
    const village = document.getElementById('newAddressVillage').value;
    const detail = document.getElementById('newAddressDetail').value;
    
    if (!name || !phone || !town || !village) {
        showToast('请完善地址信息');
        return;
    }
    
    const newAddress = {
        id: Date.now(),
        name,
        phone,
        town,
        village,
        detail,
        isDefault: false
    };
    
    mockAddresses.push(newAddress);
    renderAddressList();
    closeModal('addAddressModal');
    showToast('地址添加成功');
    
    // 清空表单
    document.getElementById('newAddressName').value = '';
    document.getElementById('newAddressPhone').value = '';
    document.getElementById('newAddressTown').value = '';
    document.getElementById('newAddressVillage').value = '';
    document.getElementById('newAddressDetail').value = '';
}

function editAddress(id) {
    showToast('编辑地址功能');
}

function deleteAddress(id) {
    const index = mockAddresses.findIndex(a => a.id === id);
    if (index > -1) {
        mockAddresses.splice(index, 1);
        renderAddressList();
        showToast('地址已删除');
    }
}

// ========================================
// 优惠券
// ========================================

function showCouponModal() {
    const modal = document.getElementById('couponModal');
    const list = document.getElementById('couponModalList');
    
    list.innerHTML = mockCoupons.filter(c => c.available).map(coupon => `
        <div class="coupon-card" onclick="selectCoupon(${coupon.id})">
            <div class="coupon-value">¥${coupon.value}<span>.00</span></div>
            <div class="coupon-condition">${coupon.condition}</div>
            <div class="coupon-time">有效期至 ${coupon.expireTime}</div>
        </div>
    `).join('');
    
    modal.classList.add('active');
}

function selectCoupon(couponId) {
    if (couponId === null) {
        state.selectedCoupon = null;
        document.getElementById('selectedCoupon').textContent = '暂未选择';
        document.getElementById('selectedCoupon').style.color = '#999';
    } else {
        const coupon = mockCoupons.find(c => c.id === couponId);
        if (coupon) {
            state.selectedCoupon = coupon;
            document.getElementById('selectedCoupon').textContent = `-¥${coupon.value}`;
            document.getElementById('selectedCoupon').style.color = '#FF6B35';
        }
    }
    
    closeModal('couponModal');
    updateOrderSummary();
}

function renderCouponList() {
    const list = document.getElementById('couponList');
    const availableCoupons = mockCoupons.filter(c => c.available);
    
    list.innerHTML = availableCoupons.map(coupon => `
        <div class="coupon-card">
            <div class="coupon-value">¥${coupon.value}<span>.00</span></div>
            <div class="coupon-condition">${coupon.condition}</div>
            <div class="coupon-time">有效期至 ${coupon.expireTime}</div>
        </div>
    `).join('');
}

// ========================================
// 定位切换
// ========================================

function showLocationModal() {
    const modal = document.getElementById('locationModal');
    modal.classList.add('active');
}

function selectLocation(location) {
    state.location = location;
    document.getElementById('locationText').textContent = `当前定位：${location}`;
    closeModal('locationModal');
    showToast('定位已切换');
}

// ========================================
// 配送时间
// ========================================

function selectDeliveryTime(type) {
    const options = document.querySelectorAll('.time-option');
    options.forEach(opt => opt.classList.remove('active'));
    event.currentTarget.classList.add('active');
    
    if (type === 'now') {
        showToast('已选择立即送出');
    } else {
        showToast('请选择预约时间');
    }
}

// ========================================
// 订单提交
// ========================================

function submitOrder() {
    const items = Object.values(state.cart);
    if (items.length === 0) {
        showToast('购物车是空的');
        return;
    }
    
    // 创建订单
    const order = {
        id: 'DD' + Date.now(),
        storeName: items[0].name,
        storeLogo: items[0].img,
        status: 'pending',
        statusText: '待接单',
        items: items.map(item => ({
            name: `${item.name} x${item.qty}`,
            price: item.price * item.qty
        })),
        total: calculateTotal(),
        createTime: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    };
    
    state.orders.unshift(order);
    state.cart = {};
    
    updateCartBadge();
    renderOrderList();
    
    showToast('订单提交成功');
    
    // 跳转到订单跟踪页面
    setTimeout(() => {
        showOrderTracking(order);
    }, 1000);
}

function calculateTotal() {
    const items = Object.values(state.cart);
    const goodsAmount = items.reduce((sum, item) => sum + item.price * item.qty, 0);
    const deliveryFee = 2;
    const packagingFee = 1;
    const discount = state.selectedCoupon ? state.selectedCoupon.value : 0;
    return goodsAmount + deliveryFee + packagingFee - discount;
}

// ========================================
// 订单列表
// ========================================

function renderOrderList(filter = null) {
    const list = document.getElementById('orderList');
    let orders = state.orders;
    
    if (filter && filter !== 'all') {
        orders = state.orders.filter(o => o.status === filter);
    }
    
    if (orders.length === 0) {
        list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📋</div><div class="empty-state-text">暂无订单</div></div>';
        return;
    }
    
    list.innerHTML = orders.map(order => `
        <div class="order-card" onclick="showOrderTracking(state.orders.find(o => o.id === '${order.id}'))">
            <div class="order-card-header">
                <div class="order-store-name">${order.storeName}</div>
                <div class="order-status">${order.statusText}</div>
            </div>
            <div class="order-items">
                ${order.items.map(item => `
                    <div class="order-item">
                        <span class="order-item-name">${item.name}</span>
                        <span class="order-item-price">¥${item.price.toFixed(2)}</span>
                    </div>
                `).join('')}
            </div>
            <div class="order-total">
                共${order.items.length}件，实付
                <span class="order-total-price">¥${order.total.toFixed(2)}</span>
            </div>
            <div class="order-actions">
                ${order.status === 'pending' ? '<button class="order-btn refund" onclick="event.stopPropagation();applyRefund(\'' + order.id + '\')">申请退款</button>' : ''}
                ${order.status === 'completed' ? '<button class="order-btn secondary" onclick="event.stopPropagation();reOrder(\'' + order.id + '\')">再来一单</button>' : ''}
                ${order.status !== 'completed' ? '<button class="order-btn primary" onclick="event.stopPropagation();showOrderTracking(state.orders.find(o => o.id === \'' + order.id + '\'))">查看详情</button>' : '<button class="order-btn primary" onclick="event.stopPropagation();evaluateOrder(\'' + order.id + '\')">立即评价</button>'}
            </div>
        </div>
    `).join('');
}

function filterOrders(filter) {
    const tabs = document.querySelectorAll('.order-tab');
    tabs.forEach(tab => tab.classList.remove('active'));
    event.currentTarget.classList.add('active');
    renderOrderList(filter);
}

function showOrderTracking(order) {
    renderOrderTimeline(order);
    showPage('track');
}

function renderOrderTimeline(order) {
    const timeline = document.getElementById('orderTimeline');
    
    const statusMap = {
        'pending': { icon: '🍔', text: '等待商家接单', desc: '请耐心等待' },
        'preparing': { icon: '👨‍🍳', text: '商家正在备餐', desc: '预计17:05送达' },
        'delivering': { icon: '🚴', text: '骑手正在配送', desc: '骑手已取餐' },
        'completed': { icon: '✅', text: '订单已完成', desc: '感谢您的使用' }
    };
    
    const status = statusMap[order.status] || statusMap['pending'];
    
    document.getElementById('statusIcon').textContent = status.icon;
    document.getElementById('statusText').textContent = status.text;
    document.getElementById('statusDesc').textContent = status.desc;
    
    const timelineData = [
        { title: '订单已提交', time: order.createTime },
        { title: '商家已接单', time: '16:32' },
        { title: '骑手已取餐', time: '16:45' },
        { title: '骑手配送中', time: '16:50' }
    ];
    
    timeline.innerHTML = timelineData.map((item, index) => `
        <div class="timeline-item ${index === timelineData.length - 1 ? 'active' : ''}">
            <div class="timeline-dot"></div>
            <div class="timeline-content">
                <div class="timeline-title">${item.title}</div>
                <div class="timeline-time">${item.time}</div>
            </div>
        </div>
    `).join('');
}

function callRider() {
    showToast('正在拨打骑手电话...');
}

function callStore() {
    showToast('正在拨打商家电话...');
}

function showRemindToast() {
    showToast('已提醒商家尽快备餐');
}

function applyRefund(orderId) {
    showToast('退款申请已提交');
}

function reOrder(orderId) {
    showToast('正在复制订单...');
}

function evaluateOrder(orderId) {
    showToast('评价功能开发中');
}

// ========================================
// 收藏商家
// ========================================

function renderFavoriteList() {
    const list = document.getElementById('favoriteList');
    if (mockStores.length === 0) {
        list.innerHTML = '<div class="empty-state"><div class="empty-state-icon">❤️</div><div class="empty-state-text">暂无收藏商家</div></div>';
    } else {
        list.innerHTML = mockStores.slice(0, 2).map(store => `
            <div class="store-item" onclick="openStore(${store.id})">
                <div class="store-info">
                    <img src="${store.logo}" alt="${store.name}" class="store-logo">
                    <div class="store-detail">
                        <div class="store-name">${store.name}</div>
                        <div class="store-meta">
                            <span class="rating">⭐ ${store.rating}</span>
                            <span>月售${store.sales}</span>
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }
}

// ========================================
// 客服
// ========================================

function showOnlineService() {
    showToast('在线客服功能开发中');
}

function showFAQ() {
    showToast('FAQ功能开发中');
}

// ========================================
// 模态框
// ========================================

function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.classList.remove('active');
    }
}

// 点击模态框背景关闭
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.remove('active');
        }
    });
});

// ========================================
// Toast提示
// ========================================

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

// ========================================
// 轮播图
// ========================================

let currentSlide = 0;

function initCarousel() {
    setInterval(() => {
        const items = document.querySelectorAll('.carousel-item');
        const dots = document.querySelectorAll('.dot');
        
        items[currentSlide].classList.remove('active');
        dots[currentSlide].classList.remove('active');
        
        currentSlide = (currentSlide + 1) % items.length;
        
        items[currentSlide].classList.add('active');
        dots[currentSlide].classList.add('active');
    }, 4000);
}

// ========================================
// 页面加载时初始化收藏列表
// ========================================

document.addEventListener('DOMContentLoaded', function() {
    renderFavoriteList();
});

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>外卖APP - 用户端</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</span>
            <div class="status-icons">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C7.5 3 3.5 6.5 3.5 10.5C3.5 15.5 12 21 12 21C12 21 20.5 15.5 20.5 10.5C20.5 6.5 16.5 3 12 3Z" stroke="currentColor" stroke-width="2" fill="none"/></svg>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M1 9L2 11L3 9M4 14L5 12L6 14M12 6L13 8L14 6M17 4L18 6L19 4M20 19L21 21L22 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="7" width="20" height="14" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M6 11L6 7L18 7L18 11" stroke="currentColor" stroke-width="2"/></svg>
            </div>
        </div>

        <!-- 页面容器 -->
        <div class="page-container" id="pageContainer">
            <!-- 首页 -->
            <div class="page active" id="homePage">
                <!-- 定位栏 -->
                <div class="location-bar">
                    <div class="location-left">
                        <svg width="16" height="16" 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-7z"/></svg>
                        <span class="location-text" id="locationText">当前定位：XX镇XX村</span>
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" fill="none"/></svg>
                    </div>
                    <button class="switch-location-btn" onclick="showLocationModal()">切换</button>
                </div>

                <!-- 搜索栏 -->
                <div class="search-bar">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                    <input type="text" placeholder="搜索商家、商品..." id="searchInput" oninput="handleSearch(this.value)">
                </div>

                <!-- 分类导航 -->
                <div class="category-nav">
                    <div class="category-grid">
                        <div class="category-item" onclick="filterByCategory('food')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M18 8h1c1.1 0 2 .9 2 2v2h-3v3c0 .55-.45 1-1 1h-2v3h-2v-3H9v-3H7c-.55 0-1-.45-1-1v-3H3v-2c0-1.1.9-2 2-2h1V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v4z"/></svg>
                            </div>
                            <span>美食</span>
                        </div>
                        <div class="category-item" onclick="filterByCategory('supermarket')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #4ECDC4 0%, #6EE7DF 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-2 .9-2 2v2h3v-2h10v2h3v-2c0-1.1-.9-2-2-2H7zM2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6l-2-4H4L2 6z"/></svg>
                            </div>
                            <span>超市</span>
                        </div>
                        <div class="category-item" onclick="filterByCategory('fruit')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #95E86E 0%, #B8F09E 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><circle cx="12" cy="14" r="7"/><path d="M12 7V4M9 5l3-2 3 2" stroke="white" stroke-width="1.5" fill="none"/></svg>
                            </div>
                            <span>水果</span>
                        </div>
                        <div class="category-item" onclick="filterByCategory('medicine')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><rect x="3" y="8" width="18" height="8" rx="2"/><rect x="10" y="5" width="4" height="14" rx="1"/></svg>
                            </div>
                            <span>药品</span>
                        </div>
                        <div class="category-item" onclick="filterByCategory('drinks')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #A8E6CF 0%, #C8F0DF 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M8 2h8l-1 10H9L8 2zM9 12h6v2c0 1.1-.9 2-2 2h-2c-1.1 0-2-.9-2-2v-2z"/><rect x="7" y="16" width="10" height="3" rx="1"/></svg>
                            </div>
                            <span>奶茶</span>
                        </div>
                        <div class="category-item" onclick="filterByCategory('cake')">
                            <div class="category-icon" style="background: linear-gradient(135deg, #FFB6C1 0%, #FFC8D6 100%);">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M12 4c-4 0-7 2-7 5v9h14v-9c0-3-3-5-7-5z"/><rect x="5" y="15" width="14" height="4" rx="1"/><circle cx="12" cy="6" r="2"/></svg>
                            </div>
                            <span>甜点</span>
                        </div>
                    </div>
                </div>

                <!-- 轮播公告 -->
                <div class="banner-carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="banner-content" style="background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);">
                                <div class="banner-text">
                                    <h3>新用户专享</h3>
                                    <p>首单立减15元</p>
                                </div>
                                <div class="banner-icon">🎁</div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="banner-content" style="background: linear-gradient(135deg, #4ECDC4 0%, #6EE7DF 100%);">
                                <div class="banner-text">
                                    <h3>准时必达</h3>
                                    <p>超时赔付承诺</p>
                                </div>
                                <div class="banner-icon">⏰</div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="banner-content" style="background: linear-gradient(135deg, #95E86E 0%, #B8F09E 100%);">
                                <div class="banner-text">
                                    <h3>天天特价</h3>
                                    <p>爆款限时抢</p>
                                </div>
                                <div class="banner-icon">🔥</div>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-dots">
                        <span class="dot active"></span>
                        <span class="dot"></span>
                        <span class="dot"></span>
                    </div>
                </div>

                <!-- 推荐商家 -->
                <div class="section-title">
                    <span class="title-icon">⭐</span>
                    <span>推荐商家</span>
                </div>
                <div class="store-list" id="storeList">
                    <!-- 商家列表由JS动态生成 -->
                </div>
            </div>

            <!-- 商家详情页 -->
            <div class="page" id="storePage">
                <div class="store-header" id="storeHeader">
                    <!-- 由JS动态填充 -->
                </div>
                <div class="store-tabs">
                    <div class="tab active" onclick="switchStoreTab('menu')">点餐</div>
                    <div class="tab" onclick="switchStoreTab('review')">评价</div>
                    <div class="tab" onclick="switchStoreTab('notice')">公告</div>
                </div>
                <div class="store-content" id="storeContent">
                    <!-- 由JS动态填充 -->
                </div>
            </div>

            <!-- 购物车页面 -->
            <div class="page" id="cartPage">
                <div class="cart-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>确认订单</h2>
                    <div></div>
                </div>
                <div class="cart-content">
                    <div class="delivery-address" onclick="showAddressModal()">
                        <div class="address-icon">
                            <svg width="24" height="24" 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-7z"/></svg>
                        </div>
                        <div class="address-info">
                            <div class="address-name" id="selectedAddressName">张三 138****8888</div>
                            <div class="address-detail" id="selectedAddressDetail">XX镇XX村XX组XX号</div>
                        </div>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                    <div class="delivery-time">
                        <div class="time-option active" onclick="selectDeliveryTime('now')">
                            <span class="time-label">立即送出</span>
                            <span class="time-desc">预计 17:05 送达</span>
                        </div>
                        <div class="time-option" onclick="selectDeliveryTime('scheduled')">
                            <span class="time-label">预约时间</span>
                            <span class="time-desc">选择时段</span>
                        </div>
                    </div>
                    <div class="cart-items" id="cartItems">
                        <!-- 由JS动态填充 -->
                    </div>
                    <div class="order-remark">
                        <label>备注：</label>
                        <input type="text" placeholder="口味偏好、配送要求等" id="orderRemark">
                    </div>
                    <div class="coupon-section" onclick="showCouponModal()">
                        <div class="coupon-left">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="#FF6B35"><path d="M21 5H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM3 6h18M7 9h10M7 13h6M7 17h8"/></svg>
                            <span>优惠券</span>
                        </div>
                        <div class="coupon-right">
                            <span id="selectedCoupon">暂未选择</span>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                        </div>
                    </div>
                    <div class="order-summary" id="orderSummary">
                        <!-- 由JS动态填充 -->
                    </div>
                    <div class="payment-section">
                        <div class="payment-method">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#07C160"><path d="M3.5 5.5h17c.83 0 1.5.67 1.5 1.5v10c0 .83-.67 1.5-1.5 1.5h-17a1.5 1.5 0 0 1-1.5-1.5v-10a1.5 1.5 0 0 1 1.5-1.5zM5 7h14v2H5zM5 11h10v2H5zM5 15h8v2H5z"/></svg>
                            <span>微信支付</span>
                            <span class="check-icon">✓</span>
                        </div>
                    </div>
                </div>
                <div class="cart-footer">
                    <div class="total-info">
                        <span class="total-label">合计：</span>
                        <span class="total-amount" id="totalAmount">¥0.00</span>
                    </div>
                    <button class="submit-order-btn" onclick="submitOrder()">提交订单</button>
                </div>
            </div>

            <!-- 订单跟踪页 -->
            <div class="page" id="trackPage">
                <div class="track-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>订单跟踪</h2>
                    <div></div>
                </div>
                <div class="track-content">
                    <div class="order-status-card">
                        <div class="status-icon" id="statusIcon">🍔</div>
                        <div class="status-text" id="statusText">商家已接单</div>
                        <div class="status-desc" id="statusDesc">预计 17:05 送达</div>
                    </div>
                    <div class="order-timeline" id="orderTimeline">
                        <!-- 由JS动态填充 -->
                    </div>
                    <div class="rider-section">
                        <div class="rider-info">
                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=rider" alt="骑手" class="rider-avatar">
                            <div class="rider-detail">
                                <div class="rider-name">骑手：李明</div>
                                <div class="rider-phone">电话：138****1234</div>
                            </div>
                        </div>
                        <div class="rider-actions">
                            <button class="rider-btn" onclick="callRider()">📞 联系骑手</button>
                        </div>
                    </div>
                    <div class="map-container" id="mapContainer">
                        <div class="map-placeholder">
                            <svg width="60" height="60" viewBox="0 0 24 24" fill="#4ECDC4"><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-7z"/><circle cx="12" cy="9" r="3" fill="white"/></svg>
                            <p>实时位置展示</p>
                        </div>
                    </div>
                    <div class="store-contact">
                        <button class="contact-store-btn" onclick="callStore()">📞 联系商家</button>
                        <button class="remind-btn" onclick="showRemindToast()">⏰ 催单</button>
                    </div>
                </div>
            </div>

            <!-- 订单列表页 -->
            <div class="page" id="orderPage">
                <div class="order-list-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>我的订单</h2>
                    <div></div>
                </div>
                <div class="order-tabs">
                    <div class="order-tab active" onclick="filterOrders('all')">全部</div>
                    <div class="order-tab" onclick="filterOrders('pending')">待接单</div>
                    <div class="order-tab" onclick="filterOrders('preparing')">备餐中</div>
                    <div class="order-tab" onclick="filterOrders('delivering')">配送中</div>
                    <div class="order-tab" onclick="filterOrders('completed')">已完成</div>
                </div>
                <div class="order-list" id="orderList">
                    <!-- 由JS动态填充 -->
                </div>
            </div>

            <!-- 个人中心页 -->
            <div class="page" id="profilePage">
                <div class="profile-header">
                    <div class="profile-info">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=user" alt="用户头像" class="profile-avatar">
                        <div class="profile-detail">
                            <div class="profile-name">张三</div>
                            <div class="profile-phone">138****8888</div>
                        </div>
                    </div>
                </div>
                <div class="profile-menu">
                    <div class="menu-item" onclick="showPage('addressPage')">
                        <div class="menu-icon" style="background: #E8F5E9;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#4CAF50"><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-7z"/></svg>
                        </div>
                        <span>收货地址</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('couponPage')">
                        <div class="menu-icon" style="background: #FFF3E0;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#FF9800"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42z"/></svg>
                        </div>
                        <span>我的优惠券</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('favoritePage')">
                        <div class="menu-icon" style="background: #FFEBEE;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#F44336"><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>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                    <div class="menu-item" onclick="showPage('servicePage')">
                        <div class="menu-icon" style="background: #E3F2FD;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="#2196F3"><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-2zM9 11h6v2H9v-2zM9 7h6v2H9V7z"/></svg>
                        </div>
                        <span>联系客服</span>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                </div>
            </div>

            <!-- 地址管理页 -->
            <div class="page" id="addressPage">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>收货地址</h2>
                    <button class="add-btn" onclick="showAddAddressModal()">新增</button>
                </div>
                <div class="address-list" id="addressList">
                    <!-- 由JS动态填充 -->
                </div>
            </div>

            <!-- 优惠券页 -->
            <div class="page" id="couponPage">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>我的优惠券</h2>
                    <div></div>
                </div>
                <div class="coupon-tabs">
                    <div class="coupon-tab active">可用(2)</div>
                    <div class="coupon-tab">已用(1)</div>
                    <div class="coupon-tab">已过期(3)</div>
                </div>
                <div class="coupon-list" id="couponList">
                    <!-- 由JS动态填充 -->
                </div>
            </div>

            <!-- 收藏商家页 -->
            <div class="page" id="favoritePage">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>收藏商家</h2>
                    <div></div>
                </div>
                <div class="favorite-list" id="favoriteList">
                    <!-- 由JS动态填充 -->
                </div>
            </div>

            <!-- 客服页 -->
            <div class="page" id="servicePage">
                <div class="page-header">
                    <button class="back-btn" onclick="goBack()">←</button>
                    <h2>联系客服</h2>
                    <div></div>
                </div>
                <div class="service-content">
                    <div class="service-item" onclick="window.open('tel:400-888-8888')">
                        <div class="service-icon">📞</div>
                        <div class="service-info">
                            <div class="service-title">电话客服</div>
                            <div class="service-desc">400-888-8888 (9:00-22:00)</div>
                        </div>
                    </div>
                    <div class="service-item" onclick="showOnlineService()">
                        <div class="service-icon">💬</div>
                        <div class="service-info">
                            <div class="service-title">在线客服</div>
                            <div class="service-desc">24小时随时咨询</div>
                        </div>
                    </div>
                    <div class="service-item" onclick="showFAQ()">
                        <div class="service-icon">❓</div>
                        <div class="service-info">
                            <div class="service-title">常见问题</div>
                            <div class="service-desc">查看FAQ解答</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="switchTab('home')">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                <span>首页</span>
            </div>
            <div class="nav-item" onclick="switchTab('orders')">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><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-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                <span>订单</span>
                <span class="badge" id="orderBadge" style="display: none;">0</span>
            </div>
            <div class="nav-item" onclick="switchTab('cart')">
                <svg width="24" height="24" 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.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
                <span>购物车</span>
                <span class="badge" id="cartBadge" style="display: none;">0</span>
            </div>
            <div class="nav-item" onclick="switchTab('profile')">
                <svg width="24" height="24" 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>

        <!-- 购物车悬浮按钮 -->
        <div class="cart-float-btn" id="cartFloatBtn" style="display: none;" onclick="showCartPage()">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="white"><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.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
            <span class="cart-count" id="cartFloatCount">0</span>
        </div>

        <!-- 模态框 -->
        <!-- 地址选择模态框 -->
        <div class="modal" id="addressModal">
            <div class="modal-content modal-bottom">
                <div class="modal-header">
                    <h3>选择收货地址</h3>
                    <button class="close-btn" onclick="closeModal('addressModal')">×</button>
                </div>
                <div class="modal-body" id="addressModalList">
                    <!-- 由JS动态填充 -->
                </div>
            </div>
        </div>

        <!-- 优惠券选择模态框 -->
        <div class="modal" id="couponModal">
            <div class="modal-content modal-bottom">
                <div class="modal-header">
                    <h3>选择优惠券</h3>
                    <button class="close-btn" onclick="closeModal('couponModal')">×</button>
                </div>
                <div class="modal-body" id="couponModalList">
                    <!-- 由JS动态填充 -->
                </div>
                <div class="modal-footer">
                    <button class="no-coupon-btn" onclick="selectCoupon(null)">不使用优惠券</button>
                </div>
            </div>
        </div>

        <!-- 新增地址模态框 -->
        <div class="modal" id="addAddressModal">
            <div class="modal-content modal-bottom">
                <div class="modal-header">
                    <h3>新增收货地址</h3>
                    <button class="close-btn" onclick="closeModal('addAddressModal')">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-item">
                        <label>联系人</label>
                        <input type="text" placeholder="请输入联系人姓名" id="newAddressName">
                    </div>
                    <div class="form-item">
                        <label>手机号</label>
                        <input type="tel" placeholder="请输入手机号" id="newAddressPhone">
                    </div>
                    <div class="form-item">
                        <label>地址</label>
                        <div class="address-picker">
                            <select id="newAddressTown"><option value="">请选择镇</option><option value="XX镇">XX镇</option><option value="YY镇">YY镇</option></select>
                            <select id="newAddressVillage"><option value="">请选择村</option><option value="XX村">XX村</option><option value="YY村">YY村</option></select>
                        </div>
                        <input type="text" placeholder="详细地址（组/门牌号）" id="newAddressDetail" style="margin-top: 8px;">
                    </div>
                    <button class="save-address-btn" onclick="saveNewAddress()">保存地址</button>
                </div>
            </div>
        </div>

        <!-- 定位切换模态框 -->
        <div class="modal" id="locationModal">
            <div class="modal-content modal-bottom">
                <div class="modal-header">
                    <h3>切换位置</h3>
                    <button class="close-btn" onclick="closeModal('locationModal')">×</button>
                </div>
                <div class="modal-body">
                    <div class="location-search">
                        <input type="text" placeholder="搜索镇/村">
                    </div>
                    <div class="location-list">
                        <div class="location-item active" onclick="selectLocation('XX镇XX村')">
                            <div class="location-name">XX镇XX村</div>
                            <div class="location-detail">当前定位</div>
                        </div>
                        <div class="location-item" onclick="selectLocation('XX镇YY村')">
                            <div class="location-name">XX镇YY村</div>
                            <div class="location-detail">周边</div>
                        </div>
                        <div class="location-item" onclick="selectLocation('YY镇ZZ村')">
                            <div class="location-name">YY镇ZZ村</div>
                            <div class="location-detail">周边</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Toast提示 -->
        <div class="toast" id="toast">
            <span id="toastMessage">提示信息</span>
        </div>
    </div>

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

取消

访问码: f3gw6q4i