编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>酸奶铺子 - 新鲜酸奶送到家</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: #f5f5f5;
            max-width: 414px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        .page { display: none; padding-bottom: 70px; }
        .page.active { display: block; }
        
        /* 通用样式 */
        .header {
            background: linear-gradient(135deg, #fff5f5 0%, #ffeef0 100%);
            padding: 15px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .search-bar {
            display: flex;
            align-items: center;
            background: #fff;
            border-radius: 20px;
            padding: 10px 16px;
            box-shadow: 0 2px 8px rgba(255, 107, 129, 0.1);
        }
        .search-bar input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            margin-left: 8px;
            color: #333;
        }
        .search-bar input::placeholder { color: #999; }
        .page-header {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 100;
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .back-btn { margin-right: 12px; cursor: pointer; font-size: 20px; }
        .page-header h2 { font-size: 17px; font-weight: 600; }
        
        /* 首页 */
        .banner {
            margin: 12px 16px;
            border-radius: 12px;
            overflow: hidden;
        }
        .banner-content {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
        }
        .banner-content h2 { font-size: 20px; margin-bottom: 5px; }
        .banner-content p { font-size: 12px; opacity: 0.9; }
        .category-tabs {
            display: flex;
            padding: 12px 16px;
            gap: 20px;
            overflow-x: auto;
            background: #fff;
        }
        .category-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 60px;
            cursor: pointer;
            opacity: 0.6;
        }
        .category-tab.active { opacity: 1; }
        .category-tab .icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 6px;
        }
        .category-tab span { font-size: 11px; color: #333; }
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 16px 12px;
        }
        .section-title h3 { font-size: 16px; font-weight: 600; color: #333; }
        .section-title a { font-size: 12px; color: #ff6b81; text-decoration: none; cursor: pointer; }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0 16px;
        }
        .product-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
        }
        .product-card .img {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
        }
        .product-card .info { padding: 10px; }
        .product-card .name {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-card .tags { display: flex; gap: 4px; margin-bottom: 6px; }
        .product-card .tag {
            font-size: 10px;
            padding: 2px 6px;
            background: #fff5f5;
            color: #ff6b81;
            border-radius: 4px;
        }
        .product-card .bottom { display: flex; justify-content: space-between; align-items: center; }
        .product-card .price { color: #ff4757; font-weight: bold; }
        .product-card .price small { font-size: 12px; }
        .product-card .add-btn {
            width: 26px;
            height: 26px;
            background: #ff6b81;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        /* 商品详情 */
        .detail-banner {
            width: 100%;
            height: 280px;
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
        }
        .detail-info { background: #fff; padding: 16px; margin-bottom: 10px; }
        .detail-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
        .detail-price .current { font-size: 24px; color: #ff4757; font-weight: bold; }
        .detail-price .original { font-size: 14px; color: #999; text-decoration: line-through; }
        .detail-name { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 8px; }
        .detail-desc { font-size: 13px; color: #666; line-height: 1.6; }
        .detail-specs { background: #fff; padding: 16px; margin-bottom: 10px; }
        .spec-title { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 12px; }
        .spec-options { display: flex; gap: 10px; flex-wrap: wrap; }
        .spec-option {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            background: #fff;
        }
        .spec-option.active { border-color: #ff6b81; background: #fff5f5; color: #ff6b81; }
        .detail-rules { background: #fff; padding: 16px; margin-bottom: 10px; }
        .rule-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; margin-bottom: 8px; }
        .rule-item:last-child { margin-bottom: 0; }
        .rule-item .icon { color: #52c41a; }
        .detail-bottom {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 10px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
.detail-bottom .cart-icon { position: relative; margin-right: 16px; font-size: 24px; cursor: pointer; }
        .add-cart-btn {
            flex: 1;
            height: 44px;
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            border-radius: 22px;
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
        }

        /* 购物车 */
        .cart-header {
            position: sticky;
            top: 0;
            background: #fff;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-header h2 { font-size: 17px; font-weight: 600; }
        .cart-header .edit-btn { font-size: 13px; color: #ff6b81; cursor: pointer; }
        .cart-promo {
            background: linear-gradient(135deg, #fff5f5 0%, #ffeef0 100%);
            margin: 10px 16px;
            border-radius: 12px;
            padding: 12px 16px;
        }
        .cart-promo .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .cart-promo .tag { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ff6b81; }
        .cart-promo .tag .icon { background: #ff6b81; color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 10px; }
        .cart-promo .progress-bar { height: 6px; background: #fff; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
        .cart-promo .progress-bar .fill { height: 100%; background: linear-gradient(90deg, #ff6b81, #ff4757); border-radius: 3px; }
        .cart-promo .tips { font-size: 11px; color: #ff6b81; }
        .cart-coupon {
            background: #fff;
            margin: 0 16px 10px;
            border-radius: 12px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .cart-coupon .left { display: flex; align-items: center; gap: 8px; }
        .cart-coupon .left .text { font-size: 13px; color: #333; }
        .cart-coupon .right { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ff6b81; }
        .cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; }
        .cart-empty .icon { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }
        .cart-empty p { color: #999; font-size: 14px; margin-bottom: 20px; }
        .cart-empty .shop-btn {
            padding: 10px 30px;
            background: #ff6b81;
            color: #fff;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .cart-list { background: #fff; }
        .cart-item {
            display: flex;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            align-items: center;
            background: #fff;
        }
        .cart-item .check {
            width: 22px;
            height: 22px;
            border: 2px solid #ddd;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            flex-shrink: 0;
        }
        .cart-item .check.checked { background: #ff6b81; border-color: #ff6b81; color: #fff; }
        .cart-item .img {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            border-radius: 8px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            flex-shrink: 0;
        }
        .cart-item .detail { flex: 1; min-width: 0; }
        .cart-item .name { font-size: 14px; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cart-item .spec { font-size: 12px; color: #999; margin-bottom: 6px; display: inline-block; padding: 2px 8px; background: #f5f5f5; border-radius: 4px; }
        .cart-item .price { font-size: 15px; color: #ff4757; font-weight: bold; }
        .cart-item .num-control { display: flex; align-items: center; background: #f5f5f5; border-radius: 16px; overflow: hidden; }
        .cart-item .num-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: #666; }
        .cart-item .num { width: 32px; text-align: center; font-size: 14px; color: #333; }
        .cart-item .delete-btn { margin-left: 12px; color: #ff4757; font-size: 18px; cursor: pointer; }
        .cart-recommend { background: #fff; margin: 10px 0; padding: 16px; }
        .cart-recommend h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .cart-recommend .product-row { display: flex; gap: 10px; overflow-x: auto; }
        .cart-recommend .mini-card { min-width: 100px; background: #f9f9f9; border-radius: 8px; overflow: hidden; cursor: pointer; }
        .cart-recommend .mini-card .img { width: 100px; height: 100px; background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .cart-recommend .mini-card .info { padding: 8px; }
        .cart-recommend .mini-card .name { font-size: 12px; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .cart-recommend .mini-card .price { font-size: 14px; color: #ff4757; font-weight: bold; }
        .cart-bottom {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 10px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        .cart-bottom .all-check { display: flex; align-items: center; margin-right: 16px; cursor: pointer; }
        .cart-bottom .all-check .check {
            width: 22px;
            height: 22px;
            border: 2px solid #ddd;
            border-radius: 50%;
            margin-right: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .cart-bottom .all-check .check.checked { background: #ff6b81; border-color: #ff6b81; color: #fff; }
        .cart-bottom .total { flex: 1; }
        .cart-bottom .total .price { color: #ff4757; font-size: 18px; font-weight: bold; }
        .cart-bottom .total .tips { font-size: 11px; color: #999; }
        .cart-bottom .checkout-btn {
            padding: 12px 24px;
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            color: #fff;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            border: none;
        }

        /* 优惠券页 */
        .coupon-list { padding: 16px; }
        .coupon-card {
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            color: #fff;
            display: flex;
        }
        .coupon-card .value { text-align: center; margin-right: 16px; border-right: 1px dashed rgba(255,255,255,0.5); padding-right: 16px; }
        .coupon-card .value .num { font-size: 32px; font-weight: bold; }
        .coupon-card .value .unit { font-size: 12px; opacity: 0.8; }
        .coupon-card .info { flex: 1; }
        .coupon-card .info .title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
        .coupon-card .info .desc { font-size: 11px; opacity: 0.8; margin-bottom: 8px; }
        .coupon-card .info .time { font-size: 10px; opacity: 0.6; }
        .coupon-card .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 12px;
            background: #fff;
            color: #ff4757;
            border-radius: 14px;
            font-size: 12px;
            cursor: pointer;
            align-self: center;
        }

        /* 订单确认页 */
        .address-card {
            background: #fff;
            margin: 10px 16px;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .address-icon {
            width: 40px;
            height: 40px;
            background: #fff5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 12px;
        }
        .address-info { flex: 1; }
        .address-info .name { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
        .address-info .tel { font-size: 13px; color: #666; margin-bottom: 4px; }
        .address-info .addr { font-size: 12px; color: #999; }
        .order-list { background: #fff; margin: 10px 0; }
        .order-list-item { display: flex; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
        .order-list-item .img {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            border-radius: 8px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        .order-list-item .info { flex: 1; }
        .order-list-item .name { font-size: 14px; color: #333; margin-bottom: 4px; }
        .order-list-item .spec { font-size: 12px; color: #999; margin-bottom: 4px; }
        .order-list-item .bottom { display: flex; justify-content: space-between; }
        .order-list-item .price { color: #ff4757; font-weight: bold; }
        .order-list-item .num { color: #666; font-size: 13px; }
        .order-summary { background: #fff; margin: 10px 0; padding: 16px; }
        .summary-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
        .summary-row:last-child { margin-bottom: 0; padding-top: 10px; border-top: 1px solid #f0f0f0; font-weight: bold; }
        .summary-row .label { color: #666; }
        .summary-row.total .value { color: #ff4757; font-size: 18px; }
        .order-bottom {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 10px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        .order-bottom .total { flex: 1; }
        .order-bottom .total .label { font-size: 12px; color: #666; }
        .order-bottom .total .price { font-size: 20px; color: #ff4757; font-weight: bold; }
        .order-bottom .pay-btn {
            padding: 12px 32px;
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            color: #fff;
            border-radius: 22px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            border: none;
        }

        /* 支付页 */
        .pay-amount {
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            color: #fff;
            text-align: center;
            padding: 40px 20px;
        }
        .pay-amount .label { font-size: 14px; opacity: 0.9; margin-bottom: 8px; }
        .pay-amount .money { font-size: 36px; font-weight: bold; }
        .pay-methods { background: #fff; margin: 10px 0; }
        .pay-method {
            display: flex;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .pay-method .icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .pay-method .name { flex: 1; font-size: 15px; }
        .pay-method .check {
            width: 22px;
            height: 22px;
            border: 2px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .pay-method .check.checked { background: #ff6b81; border-color: #ff6b81; color: #fff; }
        .pay-bottom {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: #fff;
            padding: 10px 16px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        .pay-bottom .confirm-btn {
            width: 100%;
            height: 48px;
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            color: #fff;
            border-radius: 24px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            border: none;
        }

        /* 支付成功 */
        .success-content { text-align: center; padding: 60px 20px; }
        .success-icon {
            width: 80px;
            height: 80px;
            background: #52c41a;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #fff;
            margin: 0 auto 20px;
        }
        .success-content h2 { font-size: 20px; margin-bottom: 8px; }
        .success-content p { font-size: 14px; color: #666; margin-bottom: 30px; }
        .success-btns { display: flex; gap: 12px; justify-content: center; }
        .success-btns .btn { padding: 12px 24px; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .success-btns .btn-primary { background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%); color: #fff; }
        .success-btns .btn-default { background: #f5f5f5; color: #666; }

        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            padding: 30px 16px 40px;
            color: #fff;
        }
        .profile-user { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
        .profile-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            border: 2px solid rgba(255,255,255,0.5);
        }
        .profile-info .name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
        .profile-info .level {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            background: rgba(255,255,255,0.2);
            padding: 2px 10px;
            border-radius: 10px;
        }
        .profile-stats {
            display: flex;
            justify-content: space-around;
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            padding: 16px 0;
        }
        .profile-stats .stat { text-align: center; cursor: pointer; }
        .profile-stats .stat .num { font-size: 18px; font-weight: bold; margin-bottom: 2px; }
        .profile-stats .stat .label { font-size: 11px; opacity: 0.8; }
        .profile-assets {
            background: #fff;
            margin: -20px 16px 10px;
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            position: relative;
            z-index: 1;
        }
        .assets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .assets-item { text-align: center; cursor: pointer; }
        .assets-item .num { font-size: 18px; font-weight: bold; color: #ff4757; margin-bottom: 2px; }
        .assets-item .label { font-size: 11px; color: #666; }
        .profile-orders { background: #fff; margin: 0 16px 10px; border-radius: 12px; padding: 16px; }
        .orders-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .orders-header h3 { font-size: 15px; font-weight: 600; }
        .orders-header a { font-size: 12px; color: #999; text-decoration: none; cursor: pointer; }
        .orders-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .order-tab-item { text-align: center; cursor: pointer; position: relative; }
        .order-tab-item .icon { font-size: 26px; margin-bottom: 6px; }
        .order-tab-item .label { font-size: 12px; color: #666; }
        .order-tab-item .badge {
            position: absolute;
            top: -4px;
            right: 10px;
            background: #ff4757;
            color: #fff;
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .profile-menu { background: #fff; margin: 0 16px 10px; border-radius: 12px; overflow: hidden; }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .menu-item:last-child { border-bottom: none; }
        .menu-item .icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .menu-item .text { flex: 1; font-size: 14px; color: #333; }
        .menu-item .arrow { color: #ccc; font-size: 14px; }

        /* 订单列表页 */
        .order-tabs {
            display: flex;
            background: #fff;
            padding: 0 16px;
        }
        .order-tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #666;
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }
        .order-tab.active { color: #ff6b81; border-bottom-color: #ff6b81; }
        .order-card {
            background: #fff;
            margin: 10px 16px;
            border-radius: 12px;
            overflow: hidden;
        }
        .order-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-card-header .store { font-size: 13px; color: #333; display: flex; align-items: center; gap: 6px; }
        .order-card-header .status { font-size: 12px; color: #ff4757; }
        .order-card-item {
            display: flex;
            padding: 12px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .order-card-item:last-child { border-bottom: none; }
        .order-card-item .img {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            border-radius: 8px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
        .order-card-item .info { flex: 1; }
        .order-card-item .name { font-size: 14px; color: #333; margin-bottom: 4px; }
        .order-card-item .spec { font-size: 12px; color: #999; margin-bottom: 6px; }
        .order-card-item .bottom { display: flex; justify-content: space-between; }
        .order-card-item .price { color: #ff4757; font-weight: bold; }
        .order-card-item .num { color: #666; font-size: 13px; }
        .order-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-top: 1px solid #f5f5f5;
        }
        .order-card-footer .total { font-size: 13px; color: #666; }
        .order-card-footer .total span { color: #ff4757; font-weight: bold; }
        .order-card-footer .btn {
            padding: 6px 16px;
            border: 1px solid #ff6b81;
            color: #ff6b81;
            border-radius: 16px;
            font-size: 12px;
            cursor: pointer;
        }
        .order-card-footer .btn.primary {
            background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
            color: #fff;
            border: none;
        }

        /* 收货地址页 */
        .address-list { padding: 10px 16px; }
        .address-item {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
        }
        .address-item-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
        .address-item-header .name { font-size: 15px; font-weight: 500; }
        .address-item-header .tel { font-size: 14px; color: #666; }
        .address-item .addr { font-size: 13px; color: #666; margin-bottom: 12px; line-height: 1.5; }
        .address-item-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f5f5f5; }
        .address-item-footer .default-tag { font-size: 11px; color: #ff6b81; background: #fff5f5; padding: 2px 8px; border-radius: 4px; }
        .address-item-footer .actions { display: flex; gap: 16px; }
        .address-item-footer .action { font-size: 13px; color: #666; display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .address-item-footer .action.danger { color: #ff4757; }
        .add-address-btn {
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            color: #ff6b81;
        }

        /* 消息通知页 */
        .message-list { padding: 10px 16px; }
        .message-item {
            background: #fff;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .message-item.unread { border-left: 3px solid #ff6b81; }
        .message-item .header { display: flex; justify-content: space-between; margin-bottom: 6px; }
        .message-item .header .title { font-size: 14px; font-weight: 600; }
        .message-item .header .time { font-size: 11px; color: #999; }
        .message-item .content { font-size: 13px; color: #666; line-height: 1.5; }

        /* 设置页 */
        .settings-list { background: #fff; margin: 10px 16px; border-radius: 12px; overflow: hidden; }
        .setting-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .setting-item:last-child { border-bottom: none; }
        .setting-item .icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .setting-item .text { flex: 1; font-size: 14px; color: #333; }
        .setting-item .arrow { color: #ccc; }
        .setting-item .switch {
            width: 44px;
            height: 24px;
            background: #ddd;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
        }
        .setting-item .switch::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: 0.3s;
        }
        .setting-item .switch.active { background: #52c41a; }
        .setting-item .switch.active::after { left: 22px; }

        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 414px;
            background: #fff;
            display: flex;
            z-index: 200;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            cursor: pointer;
            opacity: 0.6;
        }
        .tab-item.active { opacity: 1; }
        .tab-item .icon { font-size: 22px; margin-bottom: 2px; }
        .tab-item span { font-size: 10px; }
        .tab-item .badge { position: relative; }
        .tab-item .badge::after {
            content: attr(data-count);
            position: absolute;
            top: -4px;
            right: -8px;
            background: #ff4757;
            color: #fff;
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        /* Toast */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.75);
            color: #fff;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 9999;
            display: none;
        }
        .toast.show { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body>
    <div class="toast" id="toast"></div>

    <!-- 首页 -->
    <div class="page active" id="page-home">
        <div class="header">
            <div class="search-bar">
                <span style="font-size:18px;">🔍</span>
                <input type="text" placeholder="搜索酸奶商品">
            </div>
        </div>
        <div class="banner">
            <div class="banner-content">
                <h2>春日限时特惠</h2>
                <p>满59元减15元 新用户专享</p>
            </div>
        </div>
        <div class="category-tabs">
            <div class="category-tab active"><div class="icon" style="background:#fff5f5;">🥛</div><span>原味酸奶</span></div>
            <div class="category-tab"><div class="icon" style="background:#f0fff0;">🥝</div><span>水果酸奶</span></div>
            <div class="category-tab"><div class="icon" style="background:#fff8dc;">🍯</div><span>蜂蜜酸奶</span></div>
            <div class="category-tab"><div class="icon" style="background:#f0f8ff;">🫐</div><span>蓝莓酸奶</span></div>
            <div class="category-tab"><div class="icon" style="background:#fff0f5;">🍓</div><span>草莓酸奶</span></div>
        </div>
        <div class="section-title"><h3>热门推荐</h3><a onclick="showToast('更多商品开发中')">查看全部 ></a></div>
        <div class="product-grid" id="product-grid"></div>
    </div>

    <!-- 商品详情页 -->
    <div class="page" id="page-detail">
        <div class="page-header">
            <div class="back-btn" onclick="goBack()">←</div>
            <h2>商品详情</h2>
        </div>
        <div class="detail-banner" id="detail-banner">🥛</div>
        <div class="detail-info">
            <div class="detail-price"><span class="current" id="detail-price">¥12.80</span><span class="original" id="detail-original">¥16.80</span></div>
            <div class="detail-name" id="detail-name">新疆原味酸奶</div>
            <div class="detail-desc" id="detail-desc">源自新疆天山牧场优质奶源</div>
        </div>
        <div class="detail-specs">
            <div class="spec-title">规格选择</div>
            <div class="spec-options">
                <div class="spec-option active" onclick="selectSpec(this)">100g</div>
                <div class="spec-option" onclick="selectSpec(this)">200g</div>
                <div class="spec-option" onclick="selectSpec(this)">500g</div>
            </div>
        </div>
        <div class="detail-rules">
            <div class="rule-item"><span class="icon">✓</span> 48小时内新鲜配送</div>
            <div class="rule-item"><span class="icon">✓</span> 满59元包邮</div>
            <div class="rule-item"><span class="icon">✓</span> 7天无理由退换</div>
        </div>
        <div style="height:70px;"></div>
        <div class="detail-bottom">
            <div class="cart-icon" onclick="showCart()">🛒</div>
            <button class="add-cart-btn" onclick="addToCart()">加入购物车</button>
        </div>
    </div>

    <!-- 购物车页 -->
    <div class="page" id="page-cart">
        <div class="cart-header">
            <h2>购物车</h2>
            <span class="edit-btn" id="edit-btn" onclick="toggleEdit()">编辑</span>
        </div>
        <div id="cart-content"></div>
        <div style="height:150px;"></div>
        <div class="cart-bottom" id="cart-bottom" style="display:none;">
            <div class="all-check" onclick="toggleAllCheck()"><div class="check" id="all-check-icon"></div><span>全选</span></div>
            <div class="total"><div class="price" id="cart-total">¥0.00</div><div class="tips" id="cart-tips">不含运费</div></div>
            <button class="checkout-btn" id="checkout-btn" onclick="goOrder()">去结算</button>
        </div>
    </div>

    <!-- 优惠券页 -->
    <div class="page" id="page-coupon">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>优惠券</h2></div>
        <div class="coupon-list">
            <div class="coupon-card">
                <div class="value"><div class="num">¥15</div><div class="unit">满59可用</div></div>
                <div class="info"><div class="title">新人专享券</div><div class="desc">全场通用·特例商品除外</div><div class="time">有效期至 2026.05.31</div></div>
                <div class="btn" onclick="showToast('已领取')">立即领取</div>
            </div>
            <div class="coupon-card">
                <div class="value"><div class="num">¥8</div><div class="unit">满49可用</div></div>
                <div class="info"><div class="title">限时折扣券</div><div class="desc">全场通用</div><div class="time">有效期至 2026.05.15</div></div>
                <div class="btn" onclick="showToast('已领取')">立即领取</div>
            </div>
            <div class="coupon-card">
                <div class="value"><div class="num">¥5</div><div class="unit">无门槛</div></div>
                <div class="info"><div class="title">会员专享券</div><div class="desc">仅限黄金会员使用</div><div class="time">有效期至 2026.06.30</div></div>
                <div class="btn" onclick="showToast('已领取')">立即领取</div>
            </div>
        </div>
    </div>

    <!-- 订单确认页 -->
    <div class="page" id="page-order">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>确认订单</h2></div>
        <div class="address-card" onclick="showToast('地址管理')">
            <div class="address-icon">📍</div>
            <div class="address-info">
                <div class="name">张三 138****8888</div>
                <div class="addr">北京市朝阳区建国路88号SOHO现代城1号楼1201室</div>
            </div>
            <div class="arrow" style="color:#ccc;">></div>
        </div>
        <div class="order-list" id="order-list"></div>
        <div class="order-summary">
            <div class="summary-row"><span class="label">商品金额</span><span class="value" id="order-goods-price">¥0.00</span></div>
            <div class="summary-row"><span class="label">运费</span><span class="value" id="order-delivery-fee">¥0.00</span></div>
            <div class="summary-row"><span class="label">优惠</span><span class="value" style="color:#52c41a;">-¥0.00</span></div>
            <div class="summary-row total"><span class="label">合计</span><span class="value" id="order-total">¥0.00</span></div>
        </div>
        <div style="height:80px;"></div>
        <div class="order-bottom">
            <div class="total"><div class="label">实付款</div><div class="price" id="order-pay">¥0.00</div></div>
            <button class="pay-btn" onclick="goPay()">提交订单</button>
        </div>
    </div>

    <!-- 支付页 -->
    <div class="page" id="page-pay">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>订单支付</h2></div>
        <div class="pay-amount"><div class="label">支付金额</div><div class="money" id="pay-amount">¥0.00</div></div>
        <div class="pay-methods">
            <div class="pay-method" onclick="selectPay(this)"><div class="icon" style="background:#07c160;color:#fff;">💳</div><div class="name">微信支付</div><div class="check checked"></div></div>
            <div class="pay-method" onclick="selectPay(this)"><div class="icon" style="background:#1677ff;color:#fff;">💰</div><div class="name">支付宝</div><div class="check"></div></div>
            <div class="pay-method" onclick="selectPay(this)"><div class="icon">🍀</div><div class="name">云闪付</div><div class="check"></div></div>
        </div>
        <div style="height:80px;"></div>
        <div class="pay-bottom"><button class="confirm-btn" onclick="confirmPay()">确认支付</button></div>
    </div>

    <!-- 支付成功页 -->
    <div class="page" id="page-success">
        <div class="page-header"><div class="back-btn" onclick="goHome()">←</div><h2>支付结果</h2></div>
        <div class="success-content">
            <div class="success-icon">✓</div>
            <h2>支付成功</h2>
            <p>订单已提交，请注意查收</p>
            <div class="success-btns">
                <div class="btn btn-default" onclick="goHome()">返回首页</div>
                <div class="btn btn-primary" onclick="goOrderList()">查看订单</div>
            </div>
        </div>
    </div>

    <!-- 个人中心页 -->
    <div class="page" id="page-profile">
        <div class="profile-header">
            <div class="profile-user">
                <div class="profile-avatar">😊</div>
                <div class="profile-info">
                    <div class="name">酸奶爱好者</div>
                    <div class="level">⭐ 黄金会员</div>
                </div>
            </div>
            <div class="profile-stats">
                <div class="stat"><div class="num">128</div><div class="label">全部订单</div></div>
                <div class="stat"><div class="num">3</div><div class="label">待付款</div></div>
                <div class="stat"><div class="num">1</div><div class="label">待收货</div></div>
                <div class="stat"><div class="num">5</div><div class="label">收藏</div></div>
            </div>
        </div>
        <div class="profile-assets">
            <div class="assets-grid">
                <div class="assets-item" onclick="goCoupon()"><div class="num">5</div><div class="label">优惠券</div></div>
                <div class="assets-item"><div class="num">860</div><div class="label">积分</div></div>
                <div class="assets-item"><div class="num">¥50.00</div><div class="label">余额</div></div>
                <div class="assets-item"><div class="num">¥0.00</div><div class="label">红包</div></div>
            </div>
        </div>
        <div class="profile-orders">
            <div class="orders-header"><h3>我的订单</h3><a onclick="goOrderList()">全部订单 ></a></div>
            <div class="orders-grid">
                <div class="order-tab-item" onclick="goOrderList('unpaid')"><div class="icon">💳</div><div class="label">待付款</div><div class="badge">3</div></div>
                <div class="order-tab-item" onclick="goOrderList('shipped')"><div class="icon">📦</div><div class="label">待发货</div><div class="badge">2</div></div>
                <div class="order-tab-item" onclick="goOrderList('delivering')"><div class="icon">🚚</div><div class="label">待收货</div><div class="badge">1</div></div>
                <div class="order-tab-item" onclick="goOrderList('review')"><div class="icon">⭐</div><div class="label">待评价</div></div>
            </div>
        </div>
        <div class="profile-menu">
            <div class="menu-item" onclick="goAddress()"><div class="icon">📍</div><div class="text">收货地址</div><div class="arrow">></div></div>
            <div class="menu-item" onclick="goMessage()"><div class="icon">🔔</div><div class="text">消息通知</div><div class="arrow">></div></div>
            <div class="menu-item" onclick="showToast('客服电话: 400-888-8888')"><div class="icon">📞</div><div class="text">联系客服</div><div class="arrow">></div></div>
            <div class="menu-item" onclick="goSettings()"><div class="icon">⚙️</div><div class="text">设置</div><div class="arrow">></div></div>
        </div>
    </div>

    <!-- 订单列表页 -->
    <div class="page" id="page-order-list">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>我的订单</h2></div>
        <div class="order-tabs">
            <div class="order-tab active" onclick="switchOrderTab(this, 'all')">全部</div>
            <div class="order-tab" onclick="switchOrderTab(this, 'unpaid')">待付款</div>
            <div class="order-tab" onclick="switchOrderTab(this, 'shipped')">待发货</div>
            <div class="order-tab" onclick="switchOrderTab(this, 'delivering')">待收货</div>
            <div class="order-tab" onclick="switchOrderTab(this, 'review')">待评价</div>
        </div>
        <div id="order-list-content" style="padding-bottom:20px;"></div>
    </div>

    <!-- 收货地址页 -->
    <div class="page" id="page-address">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>收货地址</h2></div>
        <div class="address-list">
            <div class="address-item">
                <div class="address-item-header"><span class="name">张三</span><span class="tel">138****8888</span></div>
                <div class="addr">北京市朝阳区建国路88号SOHO现代城1号楼1201室</div>
                <div class="address-item-footer">
                    <span class="default-tag">默认</span>
                    <div class="actions">
                        <span class="action"><span>✏️</span> 编辑</span>
                        <span class="action danger"><span>🗑</span> 删除</span>
                    </div>
                </div>
            </div>
            <div class="address-item">
                <div class="address-item-header"><span class="name">李四</span><span class="tel">139****6666</span></div>
                <div class="addr">上海市浦东新区陆家嘴金融中心88号</div>
                <div class="address-item-footer">
                    <div class="actions">
                        <span class="action"><span>✓</span> 设为默认</span>
                        <span class="action"><span>✏️</span> 编辑</span>
                        <span class="action danger"><span>🗑</span> 删除</span>
                    </div>
                </div>
            </div>
            <div class="add-address-btn"><span>➕</span> 添加新地址</div>
        </div>
    </div>

    <!-- 消息通知页 -->
    <div class="page" id="page-message">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>消息通知</h2></div>
        <div class="message-list">
            <div class="message-item unread">
                <div class="header"><span class="title">🎉 恭喜获得新人优惠券</span><span class="time">2026-04-29</span></div>
                <div class="content">您已获得一张15元新人优惠券，满59元即可使用，有效期至5月31日，快去选购心仪的酸奶吧！</div>
            </div>
            <div class="message-item unread">
                <div class="header"><span class="title">📦 订单已发货</span><span class="time">2026-04-28</span></div>
                <div class="content">您的订单 #20260428001 已发货，预计2天内送达，请注意查收。</div>
            </div>
            <div class="message-item">
                <div class="header"><span class="title">💰 积分变动提醒</span><span class="time">2026-04-27</span></div>
                <div class="content">您的账户新增86积分，当前可用积分860，积分可抵扣现金使用。</div>
            </div>
            <div class="message-item">
                <div class="header"><span class="title">🎁 会员权益升级</span><span class="time">2026-04-20</span></div>
                <div class="content">恭喜您已成为黄金会员，专享9折优惠和每月免费配送服务。</div>
            </div>
        </div>
    </div>

    <!-- 设置页 -->
    <div class="page" id="page-settings">
        <div class="page-header"><div class="back-btn" onclick="goBack()">←</div><h2>设置</h2></div>
        <div class="settings-list">
            <div class="setting-item" onclick="showToast('账户信息')"><span class="icon">👤</span><span class="text">账户信息</span><span class="arrow">></span></div>
            <div class="setting-item" onclick="showToast('修改密码')"><span class="icon">🔐</span><span class="text">修改密码</span><span class="arrow">></span></div>
            <div class="setting-item"><span class="icon">🔔</span><span class="text">消息推送</span><div class="switch active" onclick="this.classList.toggle('active')"></div></div>
            <div class="setting-item"><span class="icon">📍</span><span class="text">位置权限</span><div class="switch active" onclick="this.classList.toggle('active')"></div></div>
        </div>
        <div class="settings-list" style="margin-top:10px;">
            <div class="setting-item" onclick="showToast('关于我们')"><span class="icon">ℹ️</span><span class="text">关于我们</span><span class="arrow">></span></div>
            <div class="setting-item" onclick="showToast('帮助中心')"><span class="icon">❓</span><span class="text">帮助中心</span><span class="arrow">></span></div>
            <div class="setting-item" onclick="showToast('退出登录')"><span class="icon">🚪</span><span class="text" style="color:#ff4757;">退出登录</span><span class="arrow">></span></div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="tab-bar" id="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')"><div class="icon">🏠</div><span>首页</span></div>
        <div class="tab-item" onclick="switchTab('cart')"><div class="icon badge" id="tab-cart-icon" data-count="0">🛒</div><span>购物车</span></div>
        <div class="tab-item" onclick="goOrderList()"><div class="icon">📋</div><span>订单</span></div>
        <div class="tab-item" onclick="switchTab('profile')"><div class="icon">👤</div><span>我的</span></div>
    </div>

    <script>
        const products = [
            { id: 1, name: '新疆原味酸奶', desc: '源自新疆天山牧场优质奶源', price: 12.80, original: 16.80, icon: '🥛', tags: ['热销', '新品'] },
            { id: 2, name: '草莓风味酸奶', desc: '精选丹东草莓，酸甜可口', price: 14.90, original: 18.90, icon: '🍓', tags: ['爆款'] },
            { id: 3, name: '蓝莓益生菌酸奶', desc: '添加北欧蓝莓，富含活性益生菌', price: 16.80, original: 21.80, icon: '🫐', tags: ['健康'] },
            { id: 4, name: '黄桃燕麦酸奶', desc: '澳洲燕麦搭配新鲜黄桃', price: 13.50, original: 17.50, icon: '🍑', tags: ['推荐'] },
            { id: 5, name: '原味希腊酸奶', desc: '浓郁奶香，蛋白质含量高', price: 18.80, original: 24.80, icon: '🧊', tags: ['高端'] },
            { id: 6, name: '蜂蜜柠檬酸奶', desc: '新西兰蜂蜜搭配新鲜柠檬', price: 15.60, original: 19.60, icon: '🍯', tags: ['新品'] },
            { id: 7, name: '芒果百香果酸奶', desc: '热带水果组合，酸甜解腻', price: 14.50, original: 18.50, icon: '🥭', tags: ['爆款'] },
            { id: 8, name: '红枣枸杞酸奶', desc: '养生食材，温润滋补', price: 13.80, original: 17.80, icon: '🫘', tags: ['养生'] }
        ];

        let cart = [];
        let currentProduct = null;
        let selectedSpec = '100g';
        let orderTotal = 0;
        let isEditMode = false;
        let pageStack = ['home'];

        function init() { renderProducts(); updateCartBadge(); }

        function renderProducts() {
            document.getElementById('product-grid').innerHTML = products.map(p => `
                <div class="product-card" onclick="showDetail(${p.id})">
                    <div class="img">${p.icon}</div>
                    <div class="info">
                        <div class="name">${p.name}</div>
                        <div class="tags">${p.tags.map(t => `<span class="tag">${t}</span>`).join('')}</div>
                        <div class="bottom">
                            <div class="price"><small>¥</small>${p.price.toFixed(2)}</div>
                            <div class="add-btn" onclick="event.stopPropagation(); quickAdd(${p.id})">+</div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function showDetail(id) {
            currentProduct = products.find(p => p.id === id);
            document.getElementById('detail-banner').textContent = currentProduct.icon;
            document.getElementById('detail-price').textContent = '¥' + currentProduct.price.toFixed(2);
            document.getElementById('detail-original').textContent = '¥' + currentProduct.original.toFixed(2);
            document.getElementById('detail-name').textContent = currentProduct.name;
            document.getElementById('detail-desc').textContent = currentProduct.desc;
            showPage('detail');
        }

        function selectSpec(el) {
            document.querySelectorAll('.spec-option').forEach(e => e.classList.remove('active'));
            el.classList.add('active');
            selectedSpec = el.textContent;
        }

        function addToCart() {
            if (!currentProduct) return;
            const existing = cart.find(item => item.id === currentProduct.id && item.spec === selectedSpec);
            if (existing) existing.num++;
            else cart.push({ id: currentProduct.id, name: currentProduct.name, icon: currentProduct.icon, price: currentProduct.price, spec: selectedSpec, num: 1, checked: true });
            updateCartBadge();
            showToast('已加入购物车');
        }

        function quickAdd(id) {
            const product = products.find(p => p.id === id);
            const existing = cart.find(item => item.id === id && item.spec === '100g');
            if (existing) existing.num++;
            else cart.push({ id: product.id, name: product.name, icon: product.icon, price: product.price, spec: '100g', num: 1, checked: true });
            updateCartBadge();
            showToast('已加入购物车');
        }

        function updateCartBadge() {
            const count = cart.reduce((sum, item) => sum + item.num, 0);
            document.getElementById('tab-cart-icon').setAttribute('data-count', count > 0 ? count : '0');
        }

        function showCart() { renderCart(); showPage('cart'); }

        function renderCart() {
            const content = document.getElementById('cart-content');
            const bottom = document.getElementById('cart-bottom');
            if (cart.length === 0) {
                content.innerHTML = '<div class="cart-empty"><div class="icon">🛒</div><p>购物车空空如也</p><div class="shop-btn" onclick="goHome()">去逛逛</div></div>';
                bottom.style.display = 'none';
                return;
            }
            const selected = cart.filter(item => item.checked);
            const selectedTotal = selected.reduce((sum, item) => sum + item.price * item.num, 0);
            const progress = Math.min((selectedTotal / 59) * 100, 100);
            const remain = Math.max(59 - selectedTotal, 0);
            content.innerHTML = `
                <div class="cart-promo">
                    <div class="top"><div class="tag"><span class="icon">🎉</span> 满59元包邮</div>${remain > 0 ? `<span style="font-size:11px;color:#ff6b81;">还差¥${remain.toFixed(2)}</span>` : '<span style="font-size:11px;color:#52c41a;">已免运费</span>'}</div>
                    <div class="progress-bar"><div class="fill" style="width:${progress}%"></div></div>
                    <div class="tips">${remain > 0 ? '再买' + remain.toFixed(2) + '元即可包邮' : '已满足包邮条件'}</div>
                </div>
                <div class="cart-coupon" onclick="goCoupon()"><div class="left"><span>🎫</span><span class="text">优惠券</span></div><div class="right"><span>5张可用</span><span>></span></div></div>
                <div class="cart-list">
                    ${cart.map((item, idx) => `
                        <div class="cart-item">
                            <div class="check ${item.checked ? 'checked' : ''}" onclick="toggleCheck(${idx})">✓</div>
                            <div class="img">${item.icon}</div>
                            <div class="detail">
                                <div class="name">${item.name}</div>
                                <div class="spec">${item.spec}</div>
                                <div class="bottom">
                                    <div class="price">¥${item.price.toFixed(2)}</div>
                                    ${isEditMode ? `<div class="num-control"><div class="num-btn" onclick="decNum(${idx})">-</div><div class="num">${item.num}</div><div class="num-btn" onclick="incNum(${idx})">+</div></div><div class="delete-btn" onclick="deleteItem(${idx})">🗑</div>` : `<div class="num-control"><div class="num-btn">-</div><div class="num">${item.num}</div><div class="num-btn" onclick="incNum(${idx})">+</div></div>`}
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
                <div class="cart-recommend"><h3>👀 猜你喜欢</h3><div class="product-row">${products.slice(0,4).map(p => `<div class="mini-card" onclick="showDetail(${p.id})"><div class="img">${p.icon}</div><div class="info"><div class="name">${p.name}</div><div class="price">¥${p.price.toFixed(2)}</div></div></div>`).join('')}</div></div>
            `;
            bottom.style.display = 'flex';
            updateCartTotal();
        }

        function toggleEdit() {
            isEditMode = !isEditMode;
            document.getElementById('edit-btn').textContent = isEditMode ? '完成' : '编辑';
            document.getElementById('checkout-btn').textContent = isEditMode ? '删除' : '去结算';
            document.getElementById('checkout-btn').onclick = isEditMode ? deleteSelected : goOrder;
            renderCart();
        }

        function deleteSelected() {
            cart = cart.filter(item => !item.checked);
            renderCart();
            updateCartBadge();
            if (cart.length === 0) { isEditMode = false; document.getElementById('edit-btn').textContent = '编辑'; }
        }

        function deleteItem(idx) {
            cart.splice(idx, 1);
            renderCart();
            updateCartBadge();
            if (cart.length === 0) { isEditMode = false; document.getElementById('edit-btn').textContent = '编辑'; }
        }

        function toggleCheck(idx) { cart[idx].checked = !cart[idx].checked; renderCart(); }
        function toggleAllCheck() {
            const allChecked = cart.every(item => item.checked);
            cart.forEach(item => item.checked = !allChecked);
            document.getElementById('all-check-icon').classList.toggle('checked', !allChecked);
            renderCart();
        }
        function incNum(idx) { cart[idx].num++; renderCart(); updateCartBadge(); }
        function decNum(idx) {
            if (cart[idx].num > 1) cart[idx].num--;
            else cart.splice(idx, 1);
            renderCart();
            updateCartBadge();
        }

        function updateCartTotal() {
            const selected = cart.filter(item => item.checked);
            const total = selected.reduce((sum, item) => sum + item.price * item.num, 0);
            document.getElementById('cart-total').textContent = '¥' + total.toFixed(2);
            document.getElementById('cart-tips').textContent = total >= 59 ? '已免运费' : '运费¥6.00';
            document.getElementById('all-check-icon').classList.toggle('checked', cart.length > 0 && selected.length === cart.length);
        }

        function goOrder() {
            const selected = cart.filter(item => item.checked);
            if (selected.length === 0) { showToast('请选择商品'); return; }
            orderTotal = selected.reduce((sum, item) => sum + item.price * item.num, 0);
            const deliveryFee = orderTotal >= 59 ? 0 : 6;
            document.getElementById('order-list').innerHTML = selected.map(item => `
                <div class="order-list-item">
                    <div class="img">${item.icon}</div>
                    <div class="info"><div class="name">${item.name}</div><div class="spec">${item.spec}</div><div class="bottom"><div class="price">¥${item.price.toFixed(2)}</div><div class="num">x${item.num}</div></div></div>
                </div>
            `).join('');
            document.getElementById('order-goods-price').textContent = '¥' + orderTotal.toFixed(2);
            document.getElementById('order-delivery-fee').textContent = deliveryFee === 0 ? '免运费' : '¥' + deliveryFee.toFixed(2);
            document.getElementById('order-total').textContent = '¥' + (orderTotal + deliveryFee).toFixed(2);
            document.getElementById('order-pay').textContent = '¥' + (orderTotal + deliveryFee).toFixed(2);
            showPage('order');
        }

        function goPay() { document.getElementById('pay-amount').textContent = document.getElementById('order-pay').textContent; showPage('pay'); }

        function selectPay(el) {
            document.querySelectorAll('.pay-method .check').forEach(e => e.classList.remove('checked'));
            el.querySelector('.check').classList.add('checked');
        }

        function confirmPay() {
            showToast('支付中...');
            setTimeout(() => {
                cart = cart.filter(item => !item.checked);
                updateCartBadge();
                showPage('success');
            }, 1500);
        }

        function goCoupon() { showPage('coupon'); }
        function goAddress() { showPage('address'); }
        function goMessage() { showPage('message'); }
        function goSettings() { showPage('settings'); }

        function goOrderList(tab) {
            const content = document.getElementById('order-list-content');
            const orders = [
                { id: '20260429001', status: 'delivering', icon: '🥛', name: '新疆原味酸奶', spec: '100g x2', price: 25.60, statusText: '待收货' },
                { id: '20260428001', status: 'unpaid', icon: '🍓', name: '草莓风味酸奶', spec: '200g x1', price: 14.90, statusText: '待付款' },
                { id: '20260427001', status: 'review', icon: '🫐', name: '蓝莓益生菌酸奶', spec: '100g x3', price: 50.40, statusText: '待评价' },
                { id: '20260426001', status: 'shipped', icon: '🍯', name: '蜂蜜柠檬酸奶', spec: '500g x1', price: 15.60, statusText: '待发货' },
            ];
            const filtered = tab && tab !== 'all' ? orders.filter(o => o.status === tab) : orders;
            content.innerHTML = filtered.map(o => `
                <div class="order-card">
                    <div class="order-card-header"><div class="store">🏪 酸奶铺子官方店</div><div class="status">${o.statusText}</div></div>
                    <div class="order-card-item">
                        <div class="img">${o.icon}</div>
                        <div class="info"><div class="name">${o.name}</div><div class="spec">${o.spec}</div><div class="bottom"><div class="price">¥${o.price.toFixed(2)}</div><div class="num">订单号: ${o.id}</div></div></div>
                    </div>
                    <div class="order-card-footer">
                        <div class="total">共1件商品，实付<span>¥${o.price.toFixed(2)}</span></div>
                        ${o.status === 'unpaid' ? '<div class="btn primary">去支付</div>' : o.status === 'delivering' ? '<div class="btn primary">确认收货</div>' : o.status === 'review' ? '<div class="btn primary">去评价</div>' : '<div class="btn">查看详情</div>'}
                    </div>
                </div>
            `).join('');
            showPage('order-list');
        }

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

        function goHome() { showPage('home'); }

        function goBack() {
            if (pageStack.length > 1) {
                pageStack.pop();
                showPage(pageStack[pageStack.length - 1], false);
            }
        }

        function switchTab(tab) {
            if (tab === 'home') showPage('home');
            else if (tab === 'cart') showCart();
            else if (tab === 'profile') showPage('profile');
            document.querySelectorAll('.tab-item').forEach((item, idx) => {
                const tabs = ['home', 'cart', 'order', 'profile'];
                item.classList.toggle('active', tabs[idx] === tab);
            });
        }

        function showPage(page, pushStack = true) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-' + page).classList.add('active');
            const tabBar = document.getElementById('tab-bar');
            if (['home', 'cart', 'profile'].includes(page)) tabBar.style.display = 'flex';
            else tabBar.style.display = 'none';
            if (pushStack) pageStack.push(page);
            document.querySelectorAll('.tab-item').forEach((item, idx) => {
                const tabs = ['home', 'cart', 'order', 'profile'];
                item.classList.toggle('active', tabs[idx] === page);
            });
        }

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

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