<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>省胜优铺 轻商城 - 品质生活从这里开始</title>
  <link rel="icon" type="image/svg+xml" href="/lib/favicon.svg">
  <!-- Element Plus CSS -->
  <link rel="stylesheet" href="/lib/element-plus.css">
  <style>*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;font-size:14px;color:#1a1a2e;background:#f5f6fa;min-width:1200px;}[v-cloak]{display:none !important;}a{text-decoration:none;color:inherit;}:root{--primary:#4A7CF7;--primary-light:#7C9FFF;--primary-dark:#3568E0;--danger:#ee0a24;--success:#00B578;--warning:#ff9500;--text-primary:#1a1a2e;--text-secondary:#666;--text-muted:#999;--border:#eee;--bg:#f5f6fa;--radius:8px;--shadow:0 2px 12px rgba(0,0,0,0.06);}.page-wrapper{min-height:100vh;display:flex;flex-direction:column;}.main-content{flex:1;width:1200px;margin:0 auto;padding:20px 0;}.page-section{display:none;}.page-section.active{display:block;}.top-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,0.04);}.top-header-inner{width:1200px;margin:0 auto;height:64px;display:flex;align-items:center;gap:24px;}.top-logo{font-size:22px;font-weight:800;color:var(--primary);letter-spacing:-0.5px;cursor:pointer;flex-shrink:0;}.top-search{flex:1;max-width:480px;}.top-nav{display:flex;align-items:center;gap:16px;flex-shrink:0;}.top-nav-item{display:flex;align-items:center;gap:4px;color:var(--text-secondary);cursor:pointer;font-size:14px;white-space:nowrap;transition:color 0.2s;position:relative;}.top-nav-item:hover,.top-nav-item.active{color:var(--primary);}.top-nav-item .badge{position:absolute;top:-6px;right:-12px;background:var(--danger);color:#fff;font-size:11px;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:8px;padding:0 4px;}.category-bar{background:#fff;border-bottom:1px solid var(--border);}.category-bar-inner{width:1200px;margin:0 auto;display:flex;align-items:center;height:44px;}.category-bar-item{padding:0 16px;height:44px;line-height:44px;cursor:pointer;font-size:14px;color:var(--text-secondary);transition:color 0.2s;white-space:nowrap;}.category-bar-item:hover,.category-bar-item.active{color:var(--primary);border-bottom:2px solid var(--primary);}.banner-wrap{width:1200px;margin:16px auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}.banner-wrap img{width:100%;height:360px;object-fit:cover;display:block;}.banner-placeholder{width:100%;height:360px;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:700;}.seckill-section{width:1200px;margin:0 auto 16px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;}.seckill-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}.seckill-header .label{font-size:18px;font-weight:700;color:var(--danger);}.seckill-countdown{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--text-secondary);}.seckill-countdown .num{background:#1a1a2e;color:#fff;padding:2px 6px;border-radius:4px;font-size:16px;font-weight:700;min-width:28px;text-align:center;}.seckill-list{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;}.seckill-card{flex-shrink:0;width:180px;cursor:pointer;transition:transform 0.2s;}.seckill-card:hover{transform:translateY(-2px);}.seckill-card img{width:180px;height:180px;object-fit:cover;border-radius:6px;background:#f5f6fa;}.seckill-card .name{font-size:13px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.seckill-card .price-wrap{display:flex;align-items:center;gap:8px;margin-top:4px;}.seckill-card .seckill-price{color:var(--danger);font-size:18px;font-weight:700;}.seckill-card .orig-price{color:var(--text-muted);font-size:12px;text-decoration:line-through;}.section-title{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px;}.section-title .more{font-size:13px;font-weight:400;color:var(--text-muted);cursor:pointer;margin-left:auto;}.section-title .more:hover{color:var(--primary);}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}.product-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;}.product-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}.product-card .img-wrap{width:100%;height:276px;overflow:hidden;background:#f5f6fa;}.product-card .img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s;}.product-card:hover .img-wrap img{transform:scale(1.05);}.product-card .info{padding:12px 14px 16px;}.product-card .name{font-size:14px;line-height:1.4;height:39px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.product-card .price-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}.product-card .price{color:var(--danger);font-size:20px;font-weight:700;}.product-card .price .unit{font-size:14px;}.product-card .sales{color:var(--text-muted);font-size:12px;}.product-card .tag{display:inline-block;background:linear-gradient(135deg,var(--danger),#ff4757);color:#fff;font-size:11px;padding:1px 6px;border-radius:3px;margin-right:4px;vertical-align:top;}.product-list-layout{display:flex;gap:20px;}.product-list-sidebar{width:220px;flex-shrink:0;}.product-list-main{flex:1;}.detail-layout{display:flex;gap:40px;}.detail-gallery{width:480px;flex-shrink:0;}.detail-main-img{width:480px;height:480px;border-radius:var(--radius);overflow:hidden;background:#f5f6fa;}.detail-main-img img{width:100%;height:100%;object-fit:cover;}.detail-thumbs{display:flex;gap:8px;margin-top:12px;}.detail-thumbs .thumb{width:60px;height:60px;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s;}.detail-thumbs .thumb.active{border-color:var(--primary);}.detail-thumbs .thumb img{width:100%;height:100%;object-fit:cover;}.detail-info{flex:1;}.detail-info .name{font-size:22px;font-weight:700;margin-bottom:12px;}.detail-info .subtitle{color:var(--text-muted);font-size:14px;margin-bottom:16px;}.detail-price-box{background:#fff5f5;border-radius:var(--radius);padding:16px 20px;margin-bottom:16px;}.detail-price-box .price{color:var(--danger);font-size:28px;font-weight:700;}.detail-price-box .price .unit{font-size:16px;}.detail-price-box .orig-price{color:var(--text-muted);font-size:14px;text-decoration:line-through;margin-left:12px;}.detail-price-box .sales-stock{margin-top:8px;color:var(--text-secondary);font-size:13px;}.detail-price-box .sales-stock span{margin-right:20px;}.detail-specs{margin:16px 0;}.detail-spec-row{display:flex;align-items:flex-start;margin-bottom:12px;}.detail-spec-row .label{width:60px;color:var(--text-secondary);flex-shrink:0;line-height:32px;}.detail-spec-values{display:flex;flex-wrap:wrap;gap:8px;}.detail-spec-value{padding:6px 16px;border:1px solid var(--border);border-radius:20px;cursor:pointer;font-size:13px;transition:all 0.2s;}.detail-spec-value:hover{border-color:var(--primary);color:var(--primary);}.detail-spec-value.active{border-color:var(--primary);background:var(--primary);color:#fff;}.detail-actions{display:flex;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);}.detail-actions .btn-buy{background:var(--danger);color:#fff;border:none;padding:12px 36px;border-radius:24px;font-size:15px;cursor:pointer;transition:opacity 0.2s;}.detail-actions .btn-buy:hover{opacity:0.9;}.detail-actions .btn-cart{background:var(--primary);color:#fff;border:none;padding:12px 36px;border-radius:24px;font-size:15px;cursor:pointer;transition:opacity 0.2s;}.detail-actions .btn-cart:hover{opacity:0.9;}.review-section{margin-top:40px;}.review-stats{display:flex;gap:40px;align-items:center;background:#fff;border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin-bottom:16px;}.review-stats .avg-score{text-align:center;}.review-stats .avg-score .num{font-size:36px;font-weight:700;color:var(--danger);}.review-stats .avg-score .label{color:var(--text-muted);font-size:13px;}.review-bar{flex:1;}.review-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}.review-bar-row .label{width:20px;font-size:12px;color:var(--text-secondary);}.review-bar-row .bar{flex:1;height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;}.review-bar-row .bar-inner{height:100%;background:#ffbc3b;border-radius:4px;}.review-bar-row .count{font-size:12px;color:var(--text-muted);width:30px;text-align:right;}.review-filter-tabs{display:flex;gap:8px;margin-bottom:16px;}.review-card{background:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow);}.review-card .user-info{display:flex;align-items:center;gap:10px;margin-bottom:10px;}.review-card .user-info .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#f0f0f0;}.review-card .user-info .nickname{font-size:14px;font-weight:600;}.review-card .user-info .time{color:var(--text-muted);font-size:12px;margin-left:auto;}.review-card .rating{margin-bottom:8px;}.review-card .content{font-size:14px;line-height:1.6;}.review-card .review-images{display:flex;gap:8px;margin-top:8px;}.review-card .review-images img{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;}.review-card .follow-up{background:#f8f9fc;border-radius:6px;padding:10px 12px;margin-top:10px;}.review-card .follow-up .label{font-size:12px;color:var(--primary);font-weight:600;}.review-card .reply-bar{background:#f0f4ff;border-radius:6px;padding:8px 12px;margin-top:8px;font-size:13px;color:var(--text-secondary);}.review-card .like-btn{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);cursor:pointer;font-size:13px;margin-top:8px;}.review-card .like-btn:hover{color:var(--primary);}.detail-desc{background:#fff;border-radius:var(--radius);padding:24px;margin-top:16px;box-shadow:var(--shadow);line-height:1.8;min-height:200px;}.cart-empty{text-align:center;padding:100px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);}.cart-empty .icon{font-size:80px;margin-bottom:16px;}.cart-table{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);}.cart-item{display:flex;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);}.cart-item:last-child{border-bottom:none;}.cart-item .col-check{width:40px;}.cart-item .col-img{width:80px;}.cart-item .col-img img{width:80px;height:80px;object-fit:cover;border-radius:6px;}.cart-item .col-info{flex:1;padding:0 20px;}.cart-item .col-info .name{font-size:14px;font-weight:600;}.cart-item .col-info .spec{font-size:12px;color:var(--text-muted);margin-top:4px;}.cart-item .col-price{width:120px;text-align:center;color:var(--danger);font-weight:700;font-size:16px;}.cart-item .col-qty{width:140px;text-align:center;}.cart-item .col-subtotal{width:120px;text-align:center;color:var(--danger);font-weight:700;font-size:16px;}.cart-item .col-action{width:60px;text-align:center;color:var(--text-muted);cursor:pointer;}.cart-item .col-action:hover{color:var(--danger);}.cart-footer{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#fff;border-radius:0 0 var(--radius) var(--radius);border-top:1px solid var(--border);}.cart-footer .left{display:flex;align-items:center;gap:16px;}.cart-footer .right{display:flex;align-items:center;gap:16px;}.cart-footer .total-text{font-size:14px;}.cart-footer .total-price{color:var(--danger);font-size:24px;font-weight:700;}.cart-footer .total-price .unit{font-size:16px;}.checkout-section{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;}.checkout-section-title{font-size:16px;font-weight:700;padding:16px 24px;border-bottom:1px solid var(--border);}.checkout-section-body{padding:16px 24px;}.user-layout{display:flex;gap:20px;}.user-sidebar{width:200px;flex-shrink:0;}.user-main{flex:1;min-height:400px;}.user-card{background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius);padding:24px;color:#fff;}.user-card .name{font-size:18px;font-weight:600;}.user-card .phone{font-size:13px;opacity:0.8;margin-top:4px;}.user-card .level{font-size:13px;opacity:0.9;margin-top:8px;}.order-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;}.order-card-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);}.order-card-header .no{font-size:13px;color:var(--text-muted);}.order-card-header .status{font-size:14px;font-weight:600;}.order-card-body{padding:14px 20px;}.order-card-item{display:flex;gap:12px;padding:8px 0;}.order-card-item img{width:64px;height:64px;border-radius:6px;object-fit:cover;}.order-card-item .info{flex:1;}.order-card-item .info .name{font-size:14px;}.order-card-item .info .spec{font-size:12px;color:var(--text-muted);}.order-card-item .info .price{color:var(--danger);font-weight:700;margin-top:4px;}.order-card-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--border);}.order-status-bar{display:flex;justify-content:center;gap:60px;background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:16px;}.order-status-step{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);}.order-status-step .step-icon{width:40px;height:40px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:18px;}.order-status-step.done{color:var(--success);}.order-status-step.done .step-icon{background:#e8f8f0;}.order-status-step.current{color:var(--primary);}.order-status-step.current .step-icon{background:#eef3ff;}.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}.plan-card{background:#fff;border-radius:var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:transform 0.2s;border:2px solid transparent;}.plan-card:hover{transform:translateY(-4px);}.plan-card.recommended{border-color:var(--primary);position:relative;}.plan-card .name{font-size:18px;font-weight:700;margin-bottom:8px;}.plan-card .price{font-size:32px;font-weight:700;color:var(--danger);margin-bottom:12px;}.plan-card .price .unit{font-size:16px;}.plan-card .features{text-align:left;}.plan-card .feature{padding:4px 0;font-size:13px;color:var(--text-secondary);}.plan-card .feature::before{content:'✓ ';color:var(--success);}.dist-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}.dist-stat-card{background:#fff;border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow);}.dist-stat-card .num{font-size:28px;font-weight:700;color:var(--primary);}.dist-stat-card .label{font-size:13px;color:var(--text-muted);margin-top:4px;}.site-footer{background:#2c3e50;color:rgba(255,255,255,0.7);padding:40px 0 24px;margin-top:40px;}.site-footer-inner{width:1200px;margin:0 auto;}.site-footer .links{display:flex;justify-content:center;gap:32px;margin-bottom:16px;}.site-footer .links a{color:rgba(255,255,255,0.7);font-size:13px;transition:color 0.2s;}.site-footer .links a:hover{color:#fff;}.site-footer .copyright{text-align:center;font-size:12px;}.site-footer .copyright a{color:rgba(255,255,255,0.7);}.site-footer .copyright a:hover{color:#fff;}.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:var(--text-muted);}.breadcrumb a{color:var(--text-muted);}.breadcrumb a:hover{color:var(--primary);}.breadcrumb .sep{color:#ccc;}.el-menu{border-right:none;}.el-sub-menu__title{font-size:14px;}.el-menu-item{font-size:14px;}.el-menu-item.is-active{color:var(--primary) !important;}.el-dialog{border-radius:var(--radius);}.el-button--primary{--el-button-bg-color:var(--primary);--el-button-border-color:var(--primary);--el-button-hover-bg-color:var(--primary-dark);}.address-list{max-height:300px;overflow-y:auto;}.address-item{display:flex;align-items:center;padding:12px 16px;border:1px solid var(--border);border-radius:6px;margin-bottom:8px;cursor:pointer;transition:border-color 0.2s;}.address-item:hover{border-color:var(--primary);}.address-item.active{border-color:var(--primary);background:#f0f4ff;}.address-item .info{flex:1;}.address-item .name{font-weight:600;}.address-item .detail{font-size:12px;color:var(--text-muted);margin-top:2px;}.spec-selector{padding:16px 0;}.empty-state{text-align:center;padding:80px 0;color:var(--text-muted);}.empty-state .icon{font-size:64px;margin-bottom:12px;}.img-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;}.img-preview-overlay img{max-width:80vw;max-height:80vh;border-radius:8px;}.payment-options{display:flex;gap:16px;}.payment-option{display:flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:border-color 0.2s;}.payment-option:hover{border-color:var(--primary);}.payment-option.active{border-color:var(--primary);background:#f0f4ff;}.payment-option .p-icon{font-size:24px;}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.page-section.active{animation:fadeInUp 0.3s ease;}.level-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;}.level-badge.l1{background:#f0f0f0;color:#666;}.level-badge.l2{background:#fff3cd;color:#856404;}.level-badge.l3{background:#cce5ff;color:#004085;}.level-badge.l4{background:#f8d7da;color:#721c24;}</style>
  <meta name="litemall-copyright" content="4c6974654d616c6c5f436f707972696768745f46554c4c5f45444954494f4e5f3037656566306534" />
</head>
<body>
<div id="app" v-cloak>

  <!-- ==================== 顶部导航 ==================== -->
  <header class="top-header">
    <div class="top-header-inner">
      <div class="top-logo" @click="goHome">省胜优铺</div>
      <div class="top-search">
        <el-input v-model="searchKeyword" placeholder="搜索商品..." clearable size="large" @keyup.enter="doSearch" :prefix-icon="'Search'">
          <template #append>
            <el-button @click="doSearch" style="background:var(--primary);color:#fff;border:none">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="top-nav">
        <div class="top-nav-item" :class="{active:currentPage==='home'}" @click="goHome">
          <span>🏠</span> 首页
        </div>
        <div class="top-nav-item" :class="{active:currentPage==='promotion'}" @click="navTo('promotion')" style="color:#e0245e">
          <span>🏷️</span> 促销中心
        </div>
        <div class="top-nav-item" :class="{active:currentPage==='cart'}" @click="openCart" style="position:relative">
          <span>🛒</span> 购物车
          <span class="badge" v-if="cartTotalCount>0">{{cartTotalCount>99?'99+':cartTotalCount}}</span>
        </div>
        <div class="top-nav-item" :class="{active:currentPage==='user'}" @click="navTo('user')" v-if="isLoggedIn">
          <span>👤</span> {{userInfo.nickname||userInfo.phone||'我的'}}
        </div>
        <el-button type="primary" size="small" @click="showLogin" v-else>登录</el-button>
      </div>
    </div>
  </header>

  <!-- ==================== 分类导航 ==================== -->
  <div class="category-bar">
    <div class="category-bar-inner">
      <div class="category-bar-item" :class="{active:currentPage==='home'}" @click="goHome">全部</div>
      <div class="category-bar-item" v-for="cat in categories" :key="cat.id" :class="{active:currentCategory===cat.id}" @click="selectCategory(cat)">
        {{cat.name}}
      </div>
    </div>
  </div>

  <!-- ==================== 页面容器 ==================== -->
  <div class="page-wrapper">

    <!-- ========== 首页 ========== -->
    <div class="page-section" :class="{active: currentPage==='home'}">
      <div class="main-content">

        <!-- 🔧 装修渲染层(v1.4.3): 授权版渲染design模板, free降级默认 -->
        <div id="decor-home-pc" v-if="decorPC.enabled && decorPC.page==='home'" class="decor-home-pc" style="margin-bottom:16px"></div>
        <template v-if="!decorPC.enabled">

        <!-- 轮播Banner -->
        <div class="banner-wrap">
          <div v-if="banners.length" style="position:relative">
            <el-carousel :interval="4000" height="360px" indicator-position="outside" trigger="click">
              <el-carousel-item v-for="b in banners" :key="b.id">
                <img :src="b.image" :alt="b.title||'Banner'" loading="lazy" @error="handleImgError">
                <div v-if="!b.image" class="banner-placeholder">{{b.title||'省胜优铺 优选'}}</div>
              </el-carousel-item>
              <el-carousel-item v-if="!banners.length">
                <div class="banner-placeholder">省胜优铺 优选</div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div v-else class="banner-placeholder">省胜优铺 优选</div>
        </div>

        <!-- 秒杀倒计时 -->
        <div class="seckill-section" v-if="seckillProducts.length">
          <div class="seckill-header">
            <span class="label">⏰ 限时秒杀</span>
            <span class="seckill-countdown">
              距结束 <span class="num">{{countdown.h}}</span>:<span class="num">{{countdown.m}}</span>:<span class="num">{{countdown.s}}</span>
            </span>
            <span style="color:var(--text-muted);font-size:13px;margin-left:auto;cursor:pointer" @click="routerPush('product-list',{seckill:true})">更多 ›</span>
          </div>
          <div class="seckill-list">
            <div class="seckill-card" v-for="s in seckillProducts" :key="s.id" @click="goProduct(s.product_id)">
              <img :src="s.image" loading="lazy" @error="handleImgError">
              <div class="name">{{s.name}}</div>
              <div class="price-wrap">
                <span class="seckill-price">¥{{(+s.seckill_price).toFixed(2)}}</span>
                <span class="orig-price">¥{{(+s.original_price).toFixed(2)}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐商品 -->
        <div>
          <div class="section-title">
            🔥 精选推荐
            <span class="more" @click="routerPush('product-list',{recommend:true})">查看更多 ›</span>
          </div>
          <div class="product-grid">
            <div class="product-card" v-for="p in recommendProducts" :key="p.id" @click="goProduct(p.id)">
              <div class="img-wrap">
                <img :src="p.image" loading="lazy" :alt="p.name" @error="handleImgError">
              </div>
              <div class="info">
                <div class="name">
                  <span class="tag" v-if="p.is_recommend">推荐</span>
                  {{p.name}}
                </div>
                <div class="price-row">
                  <span class="price"><span class="unit">¥</span>{{(+p.price).toFixed(2)}}</span>
                  <span class="sales" v-if="p.sales">已售 {{p.sales}}</span>
                </div>
              </div>
            </div>
          </div>
          <div style="text-align:center;margin:24px 0" v-if="recommendTotal>recommendProducts.length">
            <el-button plain @click="loadMoreRecommend" :loading="recommendLoading">加载更多</el-button>
          </div>

        <!-- 热卖单品 -->
        <div style="margin-top:24px">
          <div class="section-title">
            🔥 热卖单品
            <span class="more" @click="routerPush('product-list',{sort:'sales'})">查看更多 ›</span>
          </div>
          <div class="product-grid" v-if="hotProducts.length">
            <div class="product-card" v-for="p in hotProducts" :key="p.id" @click="goProduct(p.id)">
              <div class="img-wrap"><img :src="p.image" loading="lazy" @error="handleImgError"></div>
              <div class="info">
                <div class="name"><span class="tag" v-if="p.is_hot">热卖</span>{{p.name}}</div>
                <div class="price-row"><span class="price"><span class="unit">¥</span>{{(+p.price).toFixed(2)}}</span><span class="sales" v-if="p.sales">已售 {{p.sales}}</span></div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无热卖商品" :image-size="60" />
        </div>

        <!-- 新品首发 -->
        <div style="margin-top:24px">
          <div class="section-title">
            🆕 新品首发
            <span class="more" @click="routerPush('product-list',{sort:'new'})">查看更多 ›</span>
          </div>
          <div class="product-grid" v-if="newProducts.length">
            <div class="product-card" v-for="p in newProducts" :key="p.id" @click="goProduct(p.id)">
              <div class="img-wrap"><img :src="p.image" loading="lazy" @error="handleImgError"></div>
              <div class="info">
                <div class="name"><span class="tag" style="background:#00B578">新品</span>{{p.name}}</div>
                <div class="price-row"><span class="price"><span class="unit">¥</span>{{(+p.price).toFixed(2)}}</span><span class="sales" v-if="p.sales">已售 {{p.sales}}</span></div>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无新品" :image-size="60" />
        </div>

        <!-- 分类楼层 -->
        <div v-for="floor in floorProducts" :key="floor.id" style="margin-top:24px">
          <div class="section-title" style="border-bottom:2px solid var(--primary);padding-bottom:8px">
            📂 {{floor.name}}
            <span class="more" @click="selectCategory(floor)">更多 ›</span>
          </div>
          <div class="product-grid">
            <div class="product-card" v-for="p in floor.products" :key="p.id" @click="goProduct(p.id)">
              <div class="img-wrap"><img :src="p.image" loading="lazy" @error="handleImgError"></div>
              <div class="info">
                <div class="name">{{p.name}}</div>
                <div class="price-row"><span class="price"><span class="unit">¥</span>{{(+p.price).toFixed(2)}}</span></div>
              </div>
            </div>
          </div>
        </div>

        </div>
      </div>
    </div>

        </template>

    <!-- ========== 促销中心 ========== -->
    <div class="page-section" :class="{active: currentPage==='promotion'}">
      <div class="main-content">
        <div class="section-title" style="font-size:20px">🏷️ 促销中心 <span style="font-size:13px;color:#999;font-weight:400">秒杀 · 拼团 · 砍价 · 预售 · 领券 一站尽享</span></div>
        <div class="promo-tabs" style="background:#fff;border-radius:8px;padding:10px 16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06);display:flex;gap:8px;overflow-x:auto">
          <el-button v-for="t in promoFilterTabs" :key="t.v" :type="promoActiveTab===t.v?'primary':'default'" size="small" round @click="promoActiveTab=t.v">{{t.label}}</el-button>
        </div>
        <div id="pc-promo-area" style="min-height:200px"><div style="text-align:center;color:#999;padding:40px 0">加载中...</div></div>
      </div>
    </div>

    <!-- ========== 商品列表页 ========== -->
    <div class="page-section" :class="{active: currentPage==='product-list'}">
      <div class="main-content">
        <!-- 🔧 装修渲染层(四页): 授权版render, free降级默认 -->
        <div id="decor-category-pc" v-if="decorPC.enabled && decorPC.page==='category'" class="decor-home-pc" style="margin-bottom:16px"></div>
        <template v-if="!decorPC.enabled || decorPC.page!=='category'">

        <!-- 面包屑 -->
        <div class="breadcrumb">
          <a href="javascript:;" @click="goHome">首页</a>
          <span class="sep">/</span>
          <span v-if="currentCategoryData">{{currentCategoryData.name}}</span>
          <span v-else>全部商品</span>
        </div>

        <div class="product-list-layout">
          <!-- 左侧分类树 -->
          <div class="product-list-sidebar">
            <el-card shadow="never" style="border-radius:8px">
              <template #header><span style="font-weight:700">商品分类</span></template>
              <el-menu :default-active="String(currentCategory||'all')" @select="onCategorySelect" style="border-right:none">
                <el-menu-item index="all">全部商品</el-menu-item>
                <el-menu-item v-for="cat in categories" :key="cat.id" :index="String(cat.id)">
                  {{cat.name}}
                </el-menu-item>
              </el-menu>
            </el-card>
            <!-- 价格区间筛选 -->
            <el-card shadow="never" style="border-radius:8px;margin-top:12px">
              <template #header><span style="font-weight:700">价格区间</span></template>
              <div style="display:flex;gap:8px;align-items:center">
                <el-input v-model.number="priceMin" placeholder="最低" size="small" style="width:80px" />
                <span>-</span>
                <el-input v-model.number="priceMax" placeholder="最高" size="small" style="width:80px" />
                <el-button size="small" @click="applyPriceFilter">确定</el-button>
              </div>
            </el-card>
          </div>

          <!-- 右侧商品列表 -->
          <div class="product-list-main">
            <!-- 排序和筛选工具栏 -->
            <div style="display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:8px;padding:12px 16px;margin-bottom:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06)">
              <div style="display:flex;gap:8px">
                <el-button :type="listSort==='default'?'primary':''" size="small" plain @click="changeSort('default')">综合</el-button>
                <el-button :type="listSort==='sales'?'primary':''" size="small" plain @click="changeSort('sales')">销量</el-button>
                <el-button :type="listSort==='price'?'primary':''" size="small" plain @click="changeSort('price')">价格</el-button>
                <el-button :type="listSort==='new'?'primary':''" size="small" plain @click="changeSort('new')">新品</el-button>
              </div>
              <div style="font-size:13px;color:var(--text-muted)">
                共 <b>{{listTotal}}</b> 件商品
              </div>
            </div>

            <!-- 商品Grid -->
            <div v-if="productList.length" class="product-grid">
              <div class="product-card" v-for="p in productList" :key="p.id" @click="goProduct(p.id)">
                <div class="img-wrap">
                  <img :src="p.image" loading="lazy" :alt="p.name" @error="handleImgError">
                </div>
                <div class="info">
                  <div class="name">{{p.name}}</div>
                  <div class="price-row">
                    <span class="price"><span class="unit">¥</span>{{(+p.price).toFixed(2)}}</span>
                    <span class="sales" v-if="p.sales">已售 {{p.sales}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="empty-state" v-else-if="listLoaded">
              <div class="icon">📦</div>
              <div>暂无商品</div>
            </div>

            <!-- 分页 -->
            <div style="margin-top:20px;text-align:center" v-if="listTotal>0">
              <el-pagination
                v-model:current-page="listPage"
                :page-size="listPageSize"
                :total="listTotal"
                layout="prev, pager, next, total"
                background
                @current-change="onListPageChange"
              />
            </div>
          </div>
        </div>
      </template>
</div>
    </div>

    <!-- ========== 商品详情页 ========== -->
    <div class="page-section" :class="{active: currentPage==='product-detail'}">
      <div class="main-content">
        <div class="breadcrumb">
          <a href="javascript:;" @click="goHome">首页</a>
          <span class="sep">/</span>
          <span v-if="currentCategoryData" style="cursor:pointer;color:var(--primary)" @click="selectCategory(currentCategoryData)">{{currentCategoryData.name}}</span>
          <span class="sep" v-if="currentCategoryData">/</span>
          <span>{{detail.name||'商品详情'}}</span>
        </div>

        <div class="detail-layout">
          <!-- 商品图片 -->
          <div class="detail-gallery">
            <div class="detail-main-img">
              <img :src="detailMainImage" :alt="detail.name" @error="handleImgError">
            </div>
            <div class="detail-thumbs" v-if="detail.images&&detail.images.length">
              <div class="thumb" v-for="(img,idx) in detail.images" :key="idx" :class="{active:detailImgIndex===idx}" @click="detailImgIndex=idx">
                <img :src="img" @error="handleImgError">
              </div>
            </div>
          </div>

          <!-- 商品信息 -->
          <div class="detail-info">
            <div class="name">{{detail.name}}</div>
            <div class="subtitle" v-if="detail.subtitle">{{detail.subtitle}}</div>

            <div class="detail-price-box">
              <span class="price"><span class="unit">¥</span>{{(+currentPrice).toFixed(2)}}</span>
              <span class="orig-price" v-if="detail.original_price&&+detail.original_price>+currentPrice">¥{{(+detail.original_price).toFixed(2)}}</span>
              <div class="sales-stock">
                <span>销量: {{detail.sales||0}}</span>
                <span>库存: {{currentStock}}</span>
                <span v-if="detail.unit">单位: {{detail.unit}}</span>
              </div>
            </div>

            <!-- 规格选择 -->
            <div class="detail-specs" v-if="detail.specs&&detail.specs.length">
              <div class="detail-spec-row" v-for="spec in detail.specs" :key="spec.id">
                <div class="label">{{spec.name}}</div>
                <div class="detail-spec-values">
                  <div class="detail-spec-value" v-for="val in spec.values" :key="val"
                    :class="{active:selectedSpecs[spec.id]===val}"
                    @click="selectSpec(spec.id,val)">
                    {{val}}
                  </div>
                </div>
              </div>
            </div>

            <!-- 数量选择 -->
            <div class="detail-spec-row" style="margin-top:16px">
              <div class="label">数量</div>
              <el-input-number v-model="detailQuantity" :min="1" :max="currentStock||99" size="small" />
            </div>

            <!-- 操作按钮 -->
            <div class="detail-actions">
              <button class="btn-cart" @click="addToCart">加入购物车</button>
              <button class="btn-buy" @click="buyNow">立即购买</button>
            </div>
          </div>
        </div>

        <!-- 商品评价 -->
        <div class="review-section">
          <div class="section-title">📝 商品评价</div>
          <div class="review-stats" v-if="reviewStats">
            <div class="avg-score">
              <div class="num">{{reviewStats.avg_rating}}</div>
              <div class="label">综合评分</div>
            </div>
            <div class="review-bar">
              <div class="review-bar-row" v-for="s in 5" :key="6-s">
                <div class="label">{{6-s}}分</div>
                <div class="bar">
                  <div class="bar-inner" :style="{width: (reviewStats.total ? (reviewStats.distribution[6-s]/reviewStats.total*100) : 0) + '%'}"></div>
                </div>
                <div class="count">{{reviewStats.distribution[6-s]||0}}</div>
              </div>
            </div>
            <div style="text-align:center">
              <div style="font-size:24px">{{reviewStats.good_rate||0}}%</div>
              <div style="font-size:12px;color:var(--text-muted)">好评率</div>
            </div>
          </div>

          <!-- 评价筛选 -->
          <div class="review-filter-tabs" v-if="reviews.length||reviewStats">
            <el-button :type="reviewFilter==='all'?'primary':''" size="small" plain @click="reviewFilter='all';loadReviews()">全部</el-button>
            <el-button :type="reviewFilter==='good'?'primary':''" size="small" plain @click="reviewFilter='good';loadReviews()">好评</el-button>
            <el-button :type="reviewFilter==='mid'?'primary':''" size="small" plain @click="reviewFilter='mid';loadReviews()">中评</el-button>
            <el-button :type="reviewFilter==='bad'?'primary':''" size="small" plain @click="reviewFilter='bad';loadReviews()">差评</el-button>
            <el-button :type="reviewFilter==='image'?'primary':''" size="small" plain @click="reviewFilter='image';loadReviews()">晒图</el-button>
          </div>

          <!-- 评价列表 -->
          <div v-if="reviews.length">
            <div class="review-card" v-for="r in reviews" :key="r.id">
              <div class="user-info">
                <img :src="r.avatar" class="avatar" @error="handleImgError">
                <span class="nickname">{{r.nickname||'匿名用户'}}</span>
                <span class="time">{{r.created_at}}</span>
              </div>
              <div class="rating">
                <span v-for="i in 5" :key="i" style="color:#ffbc3b;font-size:14px;margin-right:2px">{{i<=r.rating?'★':'☆'}}</span>
              </div>
              <div class="content">{{r.content}}</div>
              <div class="review-images" v-if="r.images&&r.images.length">
                <img v-for="(img,idx) in r.images" :key="idx" :src="img" @click="previewImg=img">
              </div>
              <!-- 追评 -->
              <div class="follow-up" v-if="r.follow_up_content">
                <div class="label">追评：</div>
                <div style="font-size:13px;margin-top:4px">{{r.follow_up_content}}</div>
                <div style="display:flex;gap:8px;margin-top:6px" v-if="r.follow_up_images&&r.follow_up_images.length">
                  <img v-for="(img,idx) in r.follow_up_images" :key="idx" :src="img" style="width:60px;height:60px;border-radius:4px;object-fit:cover;cursor:pointer" @click="previewImg=img">
                </div>
              </div>
              <!-- 商家回复 -->
              <div class="reply-bar" v-if="r.replies&&r.replies.length">
                <div v-for="(rep,idx) in r.replies" :key="idx">
                  <b>商家回复：</b>{{rep.content}}<span style="color:var(--text-muted);font-size:12px;margin-left:8px">{{rep.created_at}}</span>
                </div>
              </div>
              <!-- 点赞 -->
              <div class="like-btn" @click="toggleLike(r)">
                <span>{{r.is_liked?'❤️':'🤍'}}</span> 赞 {{r.like_count||0}}
              </div>
            </div>
          </div>
          <div class="empty-state" v-else-if="reviewLoaded">
            <div class="icon">💬</div>
            <div>暂无评价</div>
          </div>

          <!-- 评价分页 -->
          <div style="text-align:center;margin-top:16px" v-if="reviewTotal>reviewPageSize">
            <el-pagination
              v-model:current-page="reviewPage"
              :page-size="reviewPageSize"
              :total="reviewTotal"
              layout="prev, pager, next"
              background
              small
              @current-change="loadReviews"
            />
          </div>
        </div>

        <!-- 商品详情描述 -->
        <div class="section-title" style="margin-top:40px">📄 商品详情</div>
        <div class="detail-desc" v-if="detail.description" v-html="detail.description"></div>
        <div class="detail-desc" v-else-if="detail.images&&detail.images.length">
          <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px">
            <div v-for="(img,idx) in detail.images" :key="idx">
              <img :src="img" style="width:100%;border-radius:8px;display:block">
            </div>
          </div>
        </div>
        <div class="detail-desc" v-else>暂无详情描述</div>
      </div>
    </div>

    <!-- ========== 购物车页 ========== -->
    <div class="page-section" :class="{active: currentPage==='cart'}">
      <div class="main-content">
        <!-- 🔧 装修渲染层(四页): 授权版render, free降级默认 -->
        <div id="decor-cart-pc" v-if="decorPC.enabled && decorPC.page==='cart'" class="decor-home-pc" style="margin-bottom:16px"></div>
        <template v-if="!decorPC.enabled || decorPC.page!=='cart'">

        <div class="section-title">🛒 购物车</div>

        <div class="cart-empty" v-if="!cartItems.length && cartLoaded">
          <div class="icon">🛒</div>
          <div style="font-size:18px;font-weight:600;margin-bottom:8px">购物车是空的</div>
          <div style="color:var(--text-muted);margin-bottom:20px">快去挑选心仪的商品吧</div>
          <el-button type="primary" @click="goHome">去逛逛</el-button>
        </div>

        <div v-if="cartItems.length">
          <!-- 购物车列表表头 -->
          <div class="cart-table">
            <div class="cart-item" style="border-bottom:2px solid var(--border);font-weight:600;color:var(--text-secondary);font-size:13px">
              <div class="col-check"><el-checkbox v-model="cartAllSelected" @change="toggleCartAll" /></div>
              <div class="col-img">商品</div>
              <div class="col-info">商品信息</div>
              <div class="col-price">单价</div>
              <div class="col-qty">数量</div>
              <div class="col-subtotal">小计</div>
              <div class="col-action">操作</div>
            </div>
            <div class="cart-item" v-for="(item,idx) in cartItems" :key="item.id">
              <div class="col-check"><el-checkbox v-model="item.selected" @change="calcCart" /></div>
              <div class="col-img">
                <img :src="item.product_image||item.sku_image" @error="handleImgError">
              </div>
              <div class="col-info">
                <div class="name">{{item.product_name}}</div>
                <div class="spec" v-if="item.specs">{{formatCartSpecs(item.specs)}}</div>
              </div>
              <div class="col-price">¥{{(+item.sku_price||+item.price).toFixed(2)}}</div>
              <div class="col-qty">
                <el-input-number v-model="item.quantity" :min="1" :max="item.sku_stock||99" size="small" controls-position="right" @change="updateCartItem(item)" style="width:120px" />
              </div>
              <div class="col-subtotal">¥{{((+item.sku_price||+item.price)*(item.quantity||1)).toFixed(2)}}</div>
              <div class="col-action" @click="removeCartItem(item)">删除</div>
            </div>

            <!-- 购物车底栏 -->
            <div class="cart-footer">
              <div class="left">
                <el-checkbox v-model="cartAllSelected" @change="toggleCartAll">全选</el-checkbox>
                <span style="color:var(--text-muted);cursor:pointer" @click="clearCart">清空购物车</span>
              </div>
              <div class="right">
                <span class="total-text">
                  已选 <b>{{cartSelectedCount}}</b> 件
                </span>
                <span>
                  合计: <span class="total-price"><span class="unit">¥</span>{{cartTotalPrice.toFixed(2)}}</span>
                </span>
                <el-button type="danger" size="large" style="padding:12px 40px;border-radius:24px;font-size:16px" :disabled="!cartSelectedCount" @click="goCheckout">去结算</el-button>
              </div>
            </div>
          </div>
        </div>
      </template>
</div>
    </div>

    <!-- ========== 结算页 ========== -->
    <div class="page-section" :class="{active: currentPage==='checkout'}">
      <div class="main-content">
        <div class="section-title">📋 确认订单</div>

        <!-- 收货地址 -->
        <div class="checkout-section">
          <div class="checkout-section-title">收货地址</div>
          <div class="checkout-section-body">
            <div v-if="addressList.length" style="display:flex;gap:12px;flex-wrap:wrap">
              <div class="address-item" :class="{active:selectedAddressId===a.id}" v-for="a in addressList" :key="a.id" @click="selectedAddressId=a.id">
                <div class="info">
                  <div class="name">{{a.name}} <span style="color:var(--text-muted);font-weight:400;font-size:12px">{{a.phone}}</span></div>
                  <div class="detail">{{a.province}}{{a.city}}{{a.district}}{{a.detail}}</div>
                </div>
                <el-tag size="small" type="warning" v-if="a.is_default">默认</el-tag>
              </div>
            </div>
            <div v-else style="color:var(--text-muted);margin-bottom:8px">暂无收货地址</div>
            <el-button size="small" @click="showAddressDialog=true" style="margin-top:8px">+ 新增地址</el-button>
          </div>
        </div>

        <!-- 商品清单 -->
        <div class="checkout-section">
          <div class="checkout-section-title">商品清单</div>
          <div class="checkout-section-body">
            <div v-for="i in checkoutItems" :key="i.id" style="display:flex;gap:12px;padding:8px 0;align-items:center">
              <img :src="i.product_image||i.image" style="width:64px;height:64px;border-radius:6px;object-fit:cover" @error="handleImgError">
              <div style="flex:1">
                <div style="font-size:14px">{{i.product_name}}</div>
                <div style="font-size:12px;color:var(--text-muted)" v-if="i.specs">{{formatCartSpecs(i.specs)}}</div>
              </div>
              <div style="width:100px;text-align:right;color:var(--text-muted)">x{{i.quantity}}</div>
              <div style="width:100px;text-align:right;color:var(--danger);font-weight:700">¥{{((+i.price)*(i.quantity||1)).toFixed(2)}}</div>
            </div>
          </div>
        </div>

        <!-- 优惠券 -->
        <div class="checkout-section">
          <div class="checkout-section-title">优惠券</div>
          <div class="checkout-section-body">
            <div v-if="myCoupons.length">
              <el-select v-model="selectedCouponId" placeholder="选择优惠券" clearable style="width:300px">
                <el-option v-for="c in myCoupons" :key="c.id" :label="c.name + ' (¥'+(+c.value).toFixed(2)+')'" :value="c.id" />
              </el-select>
            </div>
            <div v-else style="color:var(--text-muted)">暂无可用优惠券</div>
          </div>
        </div>

        <!-- 支付方式 -->
        <div class="checkout-section">
          <div class="checkout-section-title">支付方式</div>
          <div class="checkout-section-body">
            <div class="payment-options">
              <div class="payment-option" :class="{active:paymentMethod==='wechat'}" @click="paymentMethod='wechat'">
                <span class="p-icon">💚</span> 微信支付
              </div>
              <div class="payment-option" :class="{active:paymentMethod==='alipay'}" @click="paymentMethod='alipay'">
                <span class="p-icon">💙</span> 支付宝
              </div>
            </div>
          </div>
        </div>

        <!-- 订单备注 -->
        <div class="checkout-section">
          <div class="checkout-section-title">订单备注</div>
          <div class="checkout-section-body">
            <el-input v-model="orderRemark" placeholder="给商家留言（选填）" maxlength="200" show-word-limit />
          </div>
        </div>

        <!-- 提交 -->
        <div style="text-align:right;margin-top:20px;padding:16px 24px;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,0.06)">
          <span style="font-size:16px;margin-right:16px">
            合计: <span style="color:var(--danger);font-size:24px;font-weight:700">¥{{checkoutTotalAmount.toFixed(2)}}</span>
          </span>
          <el-button type="danger" size="large" style="padding:12px 48px;border-radius:24px;font-size:16px" @click="submitOrder" :loading="submittingOrder">提交订单</el-button>
        </div>
      </div>
    </div>

    <!-- ========== 用户中心 ========== -->
    <div class="page-section" :class="{active: currentPage==='user'}">
      <div class="main-content">
        <!-- 🔧 装修渲染层(四页): 授权版render, free降级默认 -->
        <div id="decor-user-pc" v-if="decorPC.enabled && decorPC.page==='user'" class="decor-home-pc" style="margin-bottom:16px"></div>
        <template v-if="!decorPC.enabled || decorPC.page!=='user'">

        <div class="section-title">👤 个人中心</div>

        <div class="user-layout">
          <!-- 左侧导航 -->
          <div class="user-sidebar">
            <el-card shadow="never" style="border-radius:8px">
              <el-menu :default-active="userTab" @select="v=>userTab=v" style="border-right:none">
                <el-menu-item index="profile">个人信息</el-menu-item>
                <el-menu-item index="orders">订单中心</el-menu-item>
                <el-menu-item index="favorites">我的收藏</el-menu-item>
                <el-menu-item index="addresses">收货地址</el-menu-item>
                <el-menu-item index="security">安全设置</el-menu-item>
                <el-menu-item index="reviews">我的评价</el-menu-item>
                <el-menu-item index="divider" disabled style="cursor:default;color:var(--text-muted);font-weight:700">会员服务</el-menu-item>
                <el-menu-item index="exchange" @click="navTo('exchange')">🎁 积分商城</el-menu-item>
                <el-menu-item index="points">💎 我的积分</el-menu-item>
                <el-menu-item index="recharge" @click="navTo('recharge')">💰 余额充值</el-menu-item>
                <el-menu-item index="group-buy" @click="navTo('group-buy')">🤝 拼团</el-menu-item>
                <el-menu-item index="presale" @click="navTo('presale')">🚀 预售</el-menu-item>
                <el-menu-item index="bargain" @click="navTo('bargain')">🔪 砍价</el-menu-item>
                <el-menu-item index="checkin" @click="navTo('checkin')">✅ 每日签到</el-menu-item>
                <el-menu-item index="notification" @click="navTo('notification')">🔔 消息通知</el-menu-item>
                <el-menu-item index="browse-history" @click="navTo('browse-history')">🕘 浏览足迹</el-menu-item>
              </el-menu>
            </el-card>
          </div>

          <!-- 右侧内容 -->
          <div class="user-main">
            <!-- 个人信息 -->
            <div v-show="userTab==='profile'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header><span style="font-weight:700">个人信息</span></template>
                <el-form label-width="100px" v-if="userInfo.id">
                  <el-form-item label="手机号">{{userInfo.phone}}</el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="editProfile.nickname" style="width:300px" />
                  </el-form-item>
                  <el-form-item label="头像">
                    <img :src="userInfo.avatar" style="width:64px;height:64px;border-radius:50%;object-fit:cover" v-if="userInfo.avatar" @error="handleImgError">
                    <el-upload
                      action="/api/upload/image"
                      :headers="authHeader"
                      :show-file-list="false"
                      :on-success="onAvatarSuccess"
                      accept="image/*"
                      style="margin-top:8px">
                      <el-button size="small" plain>上传头像</el-button>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="会员等级">
                    <span :class="'level-badge l'+(userInfo.level_id||1)">{{levelName}}</span>
                    <span style="color:var(--text-muted);font-size:12px;margin-left:8px">
                      经验值: {{userInfo.experience||0}}
                    </span>
                  </el-form-item>
                  <el-form-item label=" ">
                    <el-button type="primary" @click="saveProfile" :loading="savingProfile">保存修改</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>

            <!-- 我的积分 -->
            <div v-show="userTab==='points'">
              <el-card shadow="never" style="border-radius:8px;margin-bottom:16px">
                <template #header><span style="font-weight:700">我的积分</span></template>
                <div style="display:flex;gap:32px;align-items:center">
                  <div>
                    <div style="font-size:13px;color:var(--text-muted)">当前积分</div>
                    <div style="font-size:40px;font-weight:700;color:#7C3AED">{{pointsData.balance||0}}</div>
                    <div style="font-size:12px;color:var(--text-muted)">累计获得 {{pointsData.total||0}} 分 · 100积分抵1元 · 消费送积分</div>
                  </div>
                </div>
              </el-card>
              <el-card shadow="never" style="border-radius:8px">
                <template #header><span style="font-weight:700">积分明细</span></template>
                <el-table :data="pointsLogs" size="small" v-loading="pointsLoading">
                  <el-table-column label="类型">
                    <template #default="{row}">{{pointsTypeText(row.change_type)}}</template>
                  </el-table-column>
                  <el-table-column label="备注" prop="remark">
                    <template #default="{row}">{{row.remark||row.ref_no||'-'}}</template>
                  </el-table-column>
                  <el-table-column label="变动" width="120">
                    <template #default="{row}">
                      <span :style="{color: row.change_amount<0 ? '#E74C3C':'#27AE60', fontWeight:600}">{{row.change_amount>0?'+':''}}{{row.change_amount}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="时间" prop="created_at" width="180" />
                  <template #empty><el-empty description="暂无积分记录" :image-size="60" /></template>
                </el-table>
              </el-card>
            </div>

            <!-- 订单中心 -->
            <div v-show="userTab==='orders'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header>
                  <div style="display:flex;justify-content:space-between;align-items:center">
                    <span style="font-weight:700">我的订单</span>
                    <el-button size="small" @click="routerPush('order-detail',{orderNo:''})" v-if="false">查看订单</el-button>
                  </div>
                </template>
                <el-tabs v-model="orderTab" @tab-change="loadOrders">
                  <el-tab-pane label="全部" name="all"></el-tab-pane>
                  <el-tab-pane label="待付款" name="pending_pay"></el-tab-pane>
                  <el-tab-pane label="待发货" name="pending_ship"></el-tab-pane>
                  <el-tab-pane label="待收货" name="shipped"></el-tab-pane>
                  <el-tab-pane label="待评价" name="received"></el-tab-pane>
                </el-tabs>

                <div v-if="orderList.length">
                  <div class="order-card" v-for="o in orderList" :key="o.order_no">
                    <div class="order-card-header">
                      <span class="no">订单号: {{o.order_no}}</span>
                      <span class="status" :style="{color:statusColor(o.status)}">{{statusLabel(o.status)}}</span>
                    </div>
                    <div class="order-card-body">
                      <div class="order-card-item" v-for="item in o.items" :key="item.id" @click="routerPush('order-detail',{orderNo:o.order_no})" style="cursor:pointer">
                        <img :src="item.image" @error="handleImgError">
                        <div class="info">
                          <div class="name">{{item.product_name}}</div>
                          <div class="spec" v-if="item.sku_info">{{item.sku_info}}</div>
                          <div class="price">¥{{(+item.price).toFixed(2)}} x {{item.quantity}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="order-card-footer">
                      <span style="color:var(--text-muted);font-size:13px">{{o.created_at}}</span>
                      <span style="font-size:14px">实付: <b style="color:var(--danger);font-size:18px">¥{{(+o.pay_amount).toFixed(2)}}</b></span>
                      <el-button size="small" plain @click="routerPush('order-detail',{orderNo:o.order_no})">查看详情</el-button>
                      <el-button size="small" type="primary" v-if="o.status==='pending_pay'" @click="payOrder(o)">去付款</el-button>
                      <el-button size="small" v-if="o.status==='shipped'" type="primary" @click="confirmReceive(o)">确认收货</el-button>
                      <el-button size="small" v-if="o.status==='received'" @click="goReview(o)">去评价</el-button>
                      <el-button size="small" v-if="o.status==='pending_pay'" @click="cancelOrder(o)">取消订单</el-button>
                    </div>
                  </div>
                  <!-- 订单分页 -->
                  <div style="text-align:center;margin-top:16px" v-if="orderTotal>orderPageSize">
                    <el-pagination
                      v-model:current-page="orderPage"
                      :page-size="orderPageSize"
                      :total="orderTotal"
                      layout="prev, pager, next"
                      background
                      small
                      @current-change="loadOrders"
                    />
                  </div>
                </div>
                <div class="empty-state" v-else-if="orderLoaded">
                  <div class="icon">📋</div>
                  <div>暂无订单</div>
                </div>
              </el-card>
            </div>

            <!-- 我的收藏 -->
            <div v-show="userTab==='favorites'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header><span style="font-weight:700">我的收藏</span></template>
                <div class="product-grid" v-if="favorites.length">
                  <div class="product-card" v-for="(f,idx) in favorites" :key="idx" @click="goProduct(f.product_id)">
                    <div class="img-wrap">
                      <img :src="f.image" loading="lazy" @error="handleImgError">
                    </div>
                    <div class="info">
                      <div class="name">{{f.name}}</div>
                      <div class="price-row">
                        <span class="price"><span class="unit">¥</span>{{(+f.price).toFixed(2)}}</span>
                        <el-button size="small" text type="danger" @click.stop="removeFavorite(f)">取消收藏</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="empty-state" v-else-if="favLoaded">
                  <div class="icon">❤️</div>
                  <div>暂无收藏</div>
                </div>
              </el-card>
            </div>

            <!-- 收货地址管理 -->
            <div v-show="userTab==='addresses'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header>
                  <div style="display:flex;justify-content:space-between;align-items:center">
                    <span style="font-weight:700">收货地址</span>
                    <el-button size="small" type="primary" @click="showAddressDialog=true">新增地址</el-button>
                  </div>
                </template>
                <div v-for="a in addressList" :key="a.id" style="display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)">
                  <div style="flex:1">
                    <div>
                      <span style="font-weight:600">{{a.name}}</span>
                      <span style="color:var(--text-muted);margin-left:12px">{{a.phone}}</span>
                      <el-tag size="small" type="warning" style="margin-left:8px" v-if="a.is_default">默认</el-tag>
                    </div>
                    <div style="color:var(--text-muted);font-size:13px;margin-top:4px">{{a.province}}{{a.city}}{{a.district}}{{a.detail}}</div>
                  </div>
                  <div style="display:flex;gap:8px">
                    <el-button size="small" plain @click="editAddress(a)">编辑</el-button>
                    <el-button size="small" text type="danger" @click="deleteAddress(a)" v-if="a.is_default!=1">删除</el-button>
                    <el-button size="small" plain @click="setDefaultAddress(a)" v-if="!a.is_default">设为默认</el-button>
                  </div>
                </div>
                <div class="empty-state" v-if="!addressList.length">
                  <div class="icon">📍</div>
                  <div>暂无地址</div>
                </div>
              </el-card>
            </div>

            <!-- 安全设置 -->
            <div v-show="userTab==='security'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header><span style="font-weight:700">安全设置</span></template>
                <el-form label-width="120px">
                  <el-form-item label="手机号">{{userInfo.phone}}</el-form-item>
                  <el-form-item label="旧密码">
                    <el-input v-model="pwForm.old_password" type="password" show-password style="width:300px" placeholder="请输入旧密码" />
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input v-model="pwForm.new_password" type="password" show-password style="width:300px" placeholder="至少6位" />
                  </el-form-item>
                  <el-form-item label="确认新密码">
                    <el-input v-model="pwForm.confirm_password" type="password" show-password style="width:300px" placeholder="再次输入新密码" />
                  </el-form-item>
                  <el-form-item label=" ">
                    <el-button type="primary" @click="changePassword" :loading="changingPw">修改密码</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>

            <!-- 我的评价 -->
            <div v-show="userTab==='reviews'">
              <el-card shadow="never" style="border-radius:8px">
                <template #header><span style="font-weight:700">我的评价</span></template>
                <div v-if="myReviews.length">
                  <div class="review-card" v-for="r in myReviews" :key="r.id">
                    <div style="display:flex;gap:10px;margin-bottom:8px" @click="goProduct(r.product_id)" style="cursor:pointer">
                      <img :src="r.product_image" style="width:56px;height:56px;border-radius:6px;object-fit:cover">
                      <div style="font-size:13px;font-weight:600;flex:1">{{r.product_name}}</div>
                    </div>
                    <div class="rating">
                      <span v-for="i in 5" :key="i" style="color:#ffbc3b;font-size:14px;margin-right:2px">{{i<=r.rating?'★':'☆'}}</span>
                    </div>
                    <div class="content">{{r.content}}</div>
                    <div class="review-images" v-if="r.images&&r.images.length">
                      <img v-for="(img,idx) in r.images" :key="idx" :src="img" style="width:60px;height:60px;border-radius:4px;object-fit:cover;cursor:pointer" @click="previewImg=img">
                    </div>
                    <div style="color:var(--text-muted);font-size:12px;margin-top:8px">{{r.created_at}}</div>
                    <div class="reply-bar" v-if="r.replies&&r.replies.length">
                      <div v-for="rep in r.replies" :key="rep.id">
                        <b>商家回复：</b>{{rep.content}}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="empty-state" v-else-if="myReviewLoaded">
                  <div class="icon">💬</div>
                  <div>暂无评价</div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </template>
</div>
    </div>

    <!-- ========== 订单详情页 ========== -->
    <div class="page-section" :class="{active: currentPage==='order-detail'}">
      <div class="main-content">

        <!-- 订单状态 -->
        <div class="order-status-bar">
          <div class="order-status-step" :class="{done:orderStatusIndex>=1,current:orderStatusIndex===1}">
            <div class="step-icon">📋</div>
            <span>提交订单</span>
          </div>
          <div class="order-status-step" :class="{done:orderStatusIndex>=2,current:orderStatusIndex===2}">
            <div class="step-icon">💰</div>
            <span>支付</span>
          </div>
          <div class="order-status-step" :class="{done:orderStatusIndex>=3,current:orderStatusIndex===3}">
            <div class="step-icon">📦</div>
            <span>发货</span>
          </div>
          <div class="order-status-step" :class="{done:orderStatusIndex>=4,current:orderStatusIndex===4}">
            <div class="step-icon">🚚</div>
            <span>收货</span>
          </div>
          <div class="order-status-step" :class="{done:orderStatusIndex>=5,current:orderStatusIndex===5}">
            <div class="step-icon">⭐</div>
            <span>完成</span>
          </div>
        </div>

        <!-- 收货信息 -->
        <div class="checkout-section">
          <div class="checkout-section-title">收件信息</div>
          <div class="checkout-section-body">
            <div v-if="currentOrder">
              <div style="font-size:15px;font-weight:600">{{currentOrder.consignee||'—'}} <span style="color:var(--text-muted);font-weight:400;font-size:13px">{{currentOrder.phone||'—'}}</span></div>
              <div style="color:var(--text-secondary);margin-top:4px">{{currentOrder.province||''}}{{currentOrder.city||''}}{{currentOrder.district||''}}{{currentOrder.address||'—'}}</div>
            </div>
          </div>
        </div>

        <!-- 商品明细 -->
        <div class="checkout-section">
          <div class="checkout-section-title">商品信息</div>
          <div class="checkout-section-body">
            <div v-for="item in (currentOrder.items||[])" :key="item.id" style="display:flex;gap:12px;padding:8px 0;align-items:center">
              <img :src="item.image" style="width:64px;height:64px;border-radius:6px;object-fit:cover" @error="handleImgError">
              <div style="flex:1">
                <div style="font-size:14px;font-weight:600">{{item.product_name}}</div>
                <div style="font-size:12px;color:var(--text-muted)" v-if="item.sku_info">{{item.sku_info}}</div>
              </div>
              <div style="color:var(--text-muted)">x{{item.quantity}}</div>
              <div style="color:var(--danger);font-weight:700">¥{{(+item.price).toFixed(2)}}</div>
            </div>
          </div>
        </div>

        <!-- 价格明细 -->
        <div class="checkout-section">
          <div class="checkout-section-title">价格明细</div>
          <div class="checkout-section-body">
            <div style="display:flex;justify-content:space-between;padding:4px 0"><span>商品总额</span><span>¥{{(+currentOrder.total_amount||0).toFixed(2)}}</span></div>
            <div style="display:flex;justify-content:space-between;padding:4px 0"><span>优惠</span><span style="color:var(--success)">-¥{{(+currentOrder.discount_amount||0).toFixed(2)}}</span></div>
            <div style="display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--border);margin-top:4px;padding-top:8px;font-size:16px;font-weight:700">
              <span>实付金额</span>
              <span style="color:var(--danger);font-size:22px">¥{{(+currentOrder.pay_amount||0).toFixed(2)}}</span>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div style="text-align:right;margin-top:16px" v-if="currentOrder">
          <el-button v-if="currentOrder.status==='pending_pay'" type="primary" size="large" @click="payOrder(currentOrder)">去付款</el-button>
          <el-button v-if="currentOrder.status==='pending_pay'" @click="cancelOrder(currentOrder)">取消订单</el-button>
          <el-button v-if="currentOrder.status==='shipped'" type="primary" @click="confirmReceive(currentOrder)">确认收货</el-button>
          <el-button v-if="currentOrder.status==='received'" @click="goReview(currentOrder)">去评价</el-button>
          <el-button @click="userTab='orders';currentPage='user'">返回订单列表</el-button>
        </div>
      </div>
    </div>

    <!-- ========== 会员中心 ========== -->
    <div class="page-section" :class="{active: currentPage==='membership'}">
      <div class="main-content">
        <div class="section-title">⭐ 会员中心</div>

        <!-- 当前等级 -->
        <div class="checkout-section" v-if="memberInfo">
          <div class="checkout-section-title">我的会员</div>
          <div class="checkout-section-body">
            <div style="display:flex;gap:24px;align-items:center;flex-wrap:wrap">
              <span :class="'level-badge l'+(memberInfo.level?.id||1)" style="font-size:16px;padding:4px 16px">
                {{memberInfo.level?.name||'普通会员'}}
              </span>
              <span style="color:var(--text-muted)">经验值: {{memberInfo.experience||0}}</span>
              <span v-if="memberInfo.membership" style="color:var(--success)">
                会员到期: {{memberInfo.membership.end_time}}
              </span>
            </div>
          </div>
        </div>

        <!-- 套餐选购 -->
        <div class="checkout-section" v-if="memberPlans.length">
          <div class="checkout-section-title">开通会员套餐</div>
          <div class="checkout-section-body">
            <div class="plan-cards">
              <div class="plan-card" v-for="plan in memberPlans" :key="plan.id"
                :class="{recommended: plan.is_recommend}"
                @click="buyMembership(plan)">
                <div class="name">{{plan.name}}</div>
                <div class="price"><span class="unit">¥</span>{{(+plan.price).toFixed(2)}}</div>
                <div style="color:var(--text-muted);font-size:13px;margin-bottom:12px">{{plan.type==='monthly'?'月卡':plan.type==='quarterly'?'季卡':plan.type==='yearly'?'年卡':'永久'}}</div>
                <div class="features">
                  <div class="feature" v-if="plan.give_experience>0">赠送 {{plan.give_experience}} 经验值</div>
                  <div class="feature" v-if="plan.discount>0">享 {{(plan.discount*10).toFixed(1)}} 折购物优惠</div>
                  <div class="feature" v-for="(f,idx) in (plan.features||[])" :key="idx">{{f}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== 分销中心 ========== -->
    <div class="page-section" :class="{active: currentPage==='distribution'}">
      <div class="main-content">
        <div class="section-title">📢 分销中心</div>

        <!-- 统计 -->
        <div class="dist-stats">
          <div class="dist-stat-card">
            <div class="num">¥{{(+distInfo.total_commission||0).toFixed(2)}}</div>
            <div class="label">累计佣金</div>
          </div>
          <div class="dist-stat-card">
            <div class="num">¥{{(+distInfo.withdrawable||0).toFixed(2)}}</div>
            <div class="label">可提现</div>
          </div>
          <div class="dist-stat-card">
            <div class="num">¥{{(+distInfo.pending||0).toFixed(2)}}</div>
            <div class="label">待结算</div>
          </div>
          <div class="dist-stat-card">
            <div class="num">{{distInfo.team_count||0}}</div>
            <div class="label">团队人数</div>
          </div>
        </div>

        <!-- 分享二维码 -->
        <div class="checkout-section">
          <div class="checkout-section-title">推广分享</div>
          <div class="checkout-section-body" style="text-align:center">
            <div style="font-size:14px;margin-bottom:8px">分享链接给好友，注册即绑定关系</div>
            <el-input :model-value="distQrUrl" readonly style="max-width:500px;margin:0 auto">
              <template #append>
                <el-button @click="copyDistUrl">复制链接</el-button>
              </template>
            </el-input>
          </div>
        </div>

        <!-- 提现 -->
        <div class="checkout-section">
          <div class="checkout-section-title">提现申请</div>
          <div class="checkout-section-body">
            <el-form inline>
              <el-form-item label="金额">
                <el-input-number v-model="withdrawAmount" :min="(distInfo.config?.min_withdraw||10)" :precision="2" style="width:180px" />
              </el-form-item>
              <el-form-item label="账户">
                <el-select v-model="withdrawAccountType" style="width:120px">
                  <el-option label="微信" value="wechat" />
                  <el-option label="支付宝" value="alipay" />
                  <el-option label="银行卡" value="bank" />
                </el-select>
              </el-form-item>
              <el-form-item label="账号">
                <el-input v-model="withdrawAccountInfo" placeholder="请输入账号" style="width:200px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitWithdraw" :loading="withdrawing">申请提现</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 推广订单 -->
        <div class="checkout-section">
          <div class="checkout-section-title">佣金记录</div>
          <div class="checkout-section-body">
            <el-table :data="distCommissions" stripe style="width:100%" v-if="distCommissions.length">
              <el-table-column prop="created_at" label="时间" width="160" />
              <el-table-column prop="order_no" label="订单号" width="180" />
              <el-table-column prop="commission" label="佣金" width="100">
                <template #default="{row}">¥{{(+row.commission).toFixed(2)}}</template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag :type="row.status==='settled'?'success':row.status==='pending'?'warning':'info'" size="small">
                    {{row.status==='settled'?'已结算':row.status==='pending'?'待结算':'已过期'}}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <div class="empty-state" v-else>
              <div class="icon">📊</div>
              <div>暂无佣金记录</div>
            </div>
          </div>
        </div>

        <!-- 提现记录 -->
        <div class="checkout-section">
          <div class="checkout-section-title">提现记录</div>
          <div class="checkout-section-body">
            <el-table :data="withdrawRecords" stripe style="width:100%" v-if="withdrawRecords.length">
              <el-table-column prop="created_at" label="时间" width="160" />
              <el-table-column prop="amount" label="提现金额" width="100">
                <template #default="{row}">¥{{(+row.amount).toFixed(2)}}</template>
              </el-table-column>
              <el-table-column prop="real_amount" label="实际到账" width="100">
                <template #default="{row}">¥{{(+row.real_amount||+row.amount).toFixed(2)}}</template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag :type="row.status==='paid'?'success':row.status==='approved'?'warning':'info'" size="small">
                    {{row.status==='paid'?'已打款':row.status==='approved'?'审核通过':row.status==='pending'?'审核中':'已驳回'}}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <div class="empty-state" v-else>
              <div class="icon">💸</div>
              <div>暂无提现记录</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ========== 售后中心 ========== -->
    <div class="page-section" :class="{active: currentPage==='refund'}">
      <div class="main-content">
        <div class="section-title">🔄 售后中心</div>
        <el-card shadow="never" style="border-radius:8px">
          <el-tabs v-model="refundTab">
            <el-tab-pane label="申请退款" name="apply">
              <el-form label-width="100px" style="max-width:600px">
                <el-form-item label="订单号">
                  <el-select v-model="refundForm.order_id" placeholder="选择要退款的订单" filterable style="width:300px">
                    <el-option v-for="o in refundableOrders" :key="o.id" :label="o.order_no + ' (¥'+(+o.pay_amount).toFixed(2)+')'" :value="o.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="退款原因">
                  <el-select v-model="refundForm.reason" placeholder="选择退款原因" style="width:300px">
                    <el-option label="质量问题" value="质量问题" />
                    <el-option label="商品与描述不符" value="商品与描述不符" />
                    <el-option label="发错货" value="发错货" />
                    <el-option label="不想要了" value="不想要了" />
                    <el-option label="其他" value="其他" />
                  </el-select>
                </el-form-item>
                <el-form-item label="退款金额">
                  <el-input-number v-model="refundForm.amount" :precision="2" :min="0.01" :max="99999" style="width:180px" />
                </el-form-item>
                <el-form-item label=" ">
                  <el-button type="primary" @click="submitRefund" :loading="submittingRefund">提交申请</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="退款记录" name="records">
              <el-table :data="refundRecords" stripe style="width:100%" v-if="refundRecords.length">
                <el-table-column prop="refund_no" label="退款单号" width="180" />
                <el-table-column prop="amount" label="退款金额" width="100">
                  <template #default="{row}">¥{{(+row.amount).toFixed(2)}}</template>
                </el-table-column>
                <el-table-column prop="reason" label="原因" width="150" />
                <el-table-column prop="status" label="状态" width="100">
                  <template #default="{row}">
                    <el-tag :type="row.status==='approved'?'success':row.status==='pending'?'warning':'danger'" size="small">
                      {{row.status==='approved'?'已退款':row.status==='pending'?'审核中':row.status==='rejected'?'已驳回':'已取消'}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" label="申请时间" width="160" />
              </el-table>
              <div class="empty-state" v-else>
                <div class="icon">🔄</div>
                <div>暂无退款记录</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>

  </div><!-- end page-wrapper -->

  <!-- ==================== 底部Footer ==================== -->
  <footer class="site-footer">
    <div class="site-footer-inner">
      <div class="links">
        <a href="javascript:;" @click="goHome">首页</a>
        <a href="javascript:;" @click="navTo('membership')">会员中心</a>
        <a href="javascript:;" @click="navTo('distribution')">分销中心</a>
        <a href="javascript:;" @click="navTo('refund')">售后中心</a>
        <a href="javascript:;" @click="showAbout=true">关于我们</a>
        <a href="javascript:;" @click="ElMessage.info('客服电话: 400-000-0000')">联系客服</a>
      </div>
      <div class="copyright">
        &copy; 2024-2026 省胜优铺 轻商城 · 保留所有权利 ·
        <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">粤ICP备xxxxxxxx号</a>
      </div>
    </div>
  </footer>

  <!-- ==================== 登录弹窗 ==================== -->
  <el-dialog v-model="loginDialogVisible" title="登录" width="420px" :close-on-click-modal="false">
    <el-form ref="loginFormRef" :model="loginForm" label-width="0" :rules="loginRules">
      <el-form-item prop="phone">
        <el-input v-model="loginForm.phone" placeholder="手机号" size="large" prefix-icon="Iphone" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" prefix-icon="Lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width:100%" @click="doLogin" :loading="loginLoading">登 录</el-button>
      </el-form-item>
      <div style="text-align:center">
        <el-button link type="primary" @click="loginDialogVisible=false;registerDialogVisible=true">没有账号？去注册</el-button>
      </div>
    </el-form>
  </el-dialog>

  <!-- ==================== 注册弹窗 ==================== -->
  <el-dialog v-model="registerDialogVisible" title="注册" width="420px" :close-on-click-modal="false">
    <el-form :model="regForm" label-width="0">
      <el-form-item>
        <el-input v-model="regForm.phone" placeholder="手机号" size="large" prefix-icon="Iphone" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="regForm.password" type="password" placeholder="密码（至少6位）" size="large" prefix-icon="Lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-input v-model="regForm.nickname" placeholder="昵称（选填）" size="large" prefix-icon="User" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width:100%" @click="doRegister" :loading="regLoading">注 册</el-button>
      </el-form-item>
      <div style="text-align:center">
        <el-button link type="primary" @click="registerDialogVisible=false;loginDialogVisible=true">已有账号？去登录</el-button>
      </div>
    </el-form>
  </el-dialog>

  <!-- ==================== 地址编辑弹窗 ==================== -->
  <el-dialog v-model="showAddressDialog" :title="editingAddress?'编辑地址':'新增地址'" width="520px">
    <el-form ref="addressFormRef" :model="addressForm" label-width="80px">
      <el-form-item label="收货人" prop="name">
        <el-input v-model="addressForm.name" placeholder="请输入收货人" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="addressForm.phone" placeholder="请输入手机号" maxlength="11" />
      </el-form-item>
      <el-form-item label="所在地区">
        <div style="display:flex;gap:8px">
          <el-input v-model="addressForm.province" placeholder="省" style="width:120px" />
          <el-input v-model="addressForm.city" placeholder="市" style="width:120px" />
          <el-input v-model="addressForm.district" placeholder="区" style="width:120px" />
        </div>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="addressForm.detail" placeholder="街道/门牌号等" />
      </el-form-item>
      <el-form-item label="默认地址">
        <el-switch v-model="addressForm.is_default" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showAddressDialog=false">取消</el-button>
      <el-button type="primary" @click="saveAddress" :loading="savingAddress">保存</el-button>
    </template>
  </el-dialog>

  <!-- ==================== 评价弹窗 ==================== -->
  <el-dialog v-model="showReviewDialog" title="评价商品" width="560px">
    <el-form :model="reviewForm" label-width="80px">
      <el-form-item label="评分">
        <el-rate v-model="reviewForm.rating" :max="5" show-score style="--rate-fill-color:#ffbc3b" />
      </el-form-item>
      <el-form-item label="评价内容">
        <el-input v-model="reviewForm.content" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="说说您的使用感受" />
      </el-form-item>
      <el-form-item label="晒图">
        <el-upload
          action="/api/upload/image"
          :headers="authHeader"
          :on-success="(res)=>reviewForm.images.push(res.data?.url||res.data)"
          :on-remove="(f)=>reviewForm.images.splice(reviewForm.images.indexOf(f.url),1)"
          list-type="picture-card"
          accept="image/*"
          multiple>
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showReviewDialog=false">取消</el-button>
      <el-button type="primary" @click="submitReview" :loading="submittingReview">提交评价</el-button>
    </template>
  </el-dialog>

  <!-- ==================== 支付结果弹窗 ==================== -->
  <el-dialog v-model="showPayResult" title="支付结果" width="380px" :close-on-click-modal="false">
    <div style="text-align:center;padding:20px 0">
      <div style="font-size:64px;margin-bottom:12px">✅</div>
      <div style="font-size:20px;font-weight:700;color:var(--success);margin-bottom:8px">支付成功！</div>
      <div style="color:var(--text-muted)">您的订单已提交，请等待发货</div>
    </div>
    <template #footer>
      <el-button type="primary" @click="showPayResult=false;navTo('user');userTab='orders';loadOrders()">查看订单</el-button>
    </template>
  </el-dialog>

  <!-- ==================== 关于我们弹窗 ==================== -->
  <el-dialog v-model="showAbout" title="关于我们" width="500px">
    <div style="padding:16px 0;line-height:1.8">
      <p style="font-size:16px;font-weight:700;margin-bottom:8px">省胜优铺 轻商城</p>
      <p>品质生活从这里开始。省胜优铺轻商城致力于为您提供优质的商品和便捷的购物体验。</p>
      <p style="margin-top:12px">客服电话：400-000-0000</p>
      <p>客服邮箱：support@litemall.com</p>
    </div>
  </el-dialog>

  <!-- ==================== 图片预览 ==================== -->
  <div class="img-preview-overlay" v-if="previewImg" @click="previewImg=null">
    <img :src="previewImg" alt="预览图片">
  </div>

  <!-- ==================== 积分商城 ==================== -->
  <div class="page-section" :class="{active: currentPage==='exchange'}">
    <div class="main-content">
      <div class="section-title">🎁 积分商城</div>
      <el-card shadow="never" style="border-radius:8px">
        <div v-loading="exchangeLoading" style="min-height:200px">
          <el-empty v-if="!exchangeProducts.length && !exchangeLoading" description="暂无积分商品" />
          <div class="product-grid">
            <div class="product-card" v-for="p in exchangeProducts" :key="p.id" @click="doExchange(p)">
              <div class="img-wrap" style="height:200px"><img :src="p.image_url||p.image||''" @error="handleImgError"></div>
              <div class="info">
                <div class="name">{{p.name}}</div>
                <div class="price-row">
                  <span class="price" style="font-size:16px;color:var(--success)">{{p.points}} 积分</span>
                  <span class="sales">库存 {{p.stock||0}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>

  <!-- ==================== 余额充值 ==================== -->
  <div class="page-section" :class="{active: currentPage==='recharge'}">
    <div class="main-content">
      <div class="section-title">💰 余额充值</div>
      <div class="user-layout">
        <div class="user-main" style="flex:1">
          <el-card shadow="never" style="border-radius:8px;margin-bottom:16px">
            <div style="display:flex;align-items:center;gap:24px;padding:8px 0">
              <div>
                <div style="font-size:13px;color:var(--text-muted)">当前余额</div>
                <div style="font-size:32px;font-weight:700;color:var(--primary)">¥{{(+rechargeBalance).toFixed(2)}}</div>
              </div>
              <el-input-number v-model="rechargeAmount" :min="1" :precision="0" style="width:160px" />
              <span style="color:var(--text-muted)">元</span>
              <el-button type="primary" @click="doRecharge" :loading="rechargeLoading">立即充值</el-button>
            </div>
          </el-card>
          <el-card shadow="never" style="border-radius:8px">
            <template #header><span style="font-weight:700">充值记录</span></template>
            <el-table :data="rechargeRecords" stripe style="width:100%">
              <el-table-column prop="order_no" label="充值单号" width="180" />
              <el-table-column prop="amount" label="金额" width="120"><template #default="{row}">¥{{(+row.amount).toFixed(2)}}</template></el-table-column>
              <el-table-column prop="status" label="状态" width="120"><template #default="{row}"><el-tag :type="row.status==='paid'?'success':'warning'" size="small">{{row.status==='paid'?'已到账':'待支付'}}</el-tag></template></el-table-column>
              <el-table-column prop="created_at" label="时间" width="160" />
            </el-table>
            <el-empty v-if="!rechargeRecords.length" description="暂无充值记录" />
          </el-card>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== 拼团 ==================== -->
  <div class="page-section" :class="{active: currentPage==='group-buy'}">
    <div class="main-content">
      <div class="section-title">🤝 拼团专区</div>
      <div v-loading="groupBuyLoading" style="min-height:200px">
        <el-empty v-if="!groupBuys.length && !groupBuyLoading" description="暂无拼团活动" />
        <div class="product-grid">
          <div class="product-card" v-for="g in groupBuys" :key="g.id" @click="goProduct(g.product_id||g.id)">
            <div class="img-wrap" style="height:200px"><img :src="g.image_url||g.image||''" @error="handleImgError"></div>
            <div class="info">
              <div class="name">{{g.name||g.title}}</div>
              <div class="price-row">
                <span class="price" style="font-size:16px">¥{{(+g.group_price||+g.price||0).toFixed(2)}}</span>
                <span class="sales" v-if="+g.original_price>0">原价 ¥{{(+g.original_price).toFixed(2)}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ==================== 预售 ==================== -->
  <div class="page-section" :class="{active: currentPage==='presale'}">
    <div class="main-content">
      <div class="section-title" style="display:flex;justify-content:space-between;align-items:center">
        <span>🚀 预售专区</span>
        <span>
          <el-button size="small" :type="presaleView==='list'?'primary':'default'" @click="presaleView='list';loadPresales()">预售活动</el-button>
          <el-button size="small" :type="presaleView==='orders'?'primary':'default'" @click="presaleView='orders';loadPresaleOrders()">我的预售</el-button>
        </span>
      </div>

      <!-- 活动列表 -->
      <div v-if="presaleView==='list'" style="min-height:200px">
        <div v-if="!presales.length" style="text-align:center;padding:60px 0;color:#999">暂无预售活动</div>
        <div class="product-grid">
          <div class="product-card" v-for="(p, pi) in presales" :key="'ps'+pi" @click="openPresale(p.id)">
            <div class="img-wrap" style="height:200px"><img :src="p.product_image||''" @error="handleImgError"></div>
            <div class="info">
              <div class="name">{{p.name}}</div>
              <div class="price-row">
                <span class="price" style="font-size:15px">定金 ¥{{(+p.deposit||0).toFixed(2)}}</span>
              </div>
              <div style="font-size:12px;color:var(--text-muted);margin-top:2px">尾款 ¥{{Math.max(0,(+p.product_price||0)-(+p.deposit_expand||0)).toFixed(2)}}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动详情 -->
      <div v-else-if="presaleView==='detail'" style="min-height:200px">
        <el-card shadow="never" style="max-width:720px;margin:0 auto;border-radius:8px">
          <div style="display:flex;gap:20px;flex-wrap:wrap">
            <div style="width:260px;border-radius:8px;overflow:hidden"><img :src="presaleDetail.product_image||''" @error="handleImgError" style="width:100%;height:200px;object-fit:cover;display:block"></div>
            <div style="flex:1;min-width:260px">
              <div style="font-size:18px;font-weight:700">{{presaleDetail.name}}</div>
              <div style="margin:12px 0;padding:14px;background:#f8f8f8;border-radius:8px;font-size:14px;line-height:2">
                <div style="display:flex;justify-content:space-between"><span style="color:#666">原价</span><b>¥{{(+presaleDetail.product_price||0).toFixed(2)}}</b></div>
                <div style="display:flex;justify-content:space-between"><span style="color:#666">定金膨胀</span><b>抵 ¥{{(+presaleDetail.deposit_expand||0).toFixed(2)}}</b></div>
                <div style="display:flex;justify-content:space-between"><span style="color:#666">发货时间</span><b>{{presaleDetail.delivery_time||'尾款后发货'}}</b></div>
              </div>
              <div style="display:flex;align-items:center;gap:12px;margin-top:8px">
                <span style="font-size:14px;color:#666">购买数量</span>
                <el-input-number v-model="presaleQty" :min="1" :max="999" size="small" />
              </div>
              <el-button type="primary" size="large" style="margin-top:16px;width:100%" :loading="presalePaying" @click="presaleDeposit">
                提交定金 ¥{{((+presaleDetail.deposit||0)*presaleQty).toFixed(2)}}
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 我的预售订单 -->
      <div v-else-if="presaleView==='orders'" style="min-height:200px">
        <div v-if="!presaleOrders.length" style="text-align:center;padding:60px 0;color:#999">暂无预售订单</div>
        <el-card v-for="o in presaleOrders" :key="o.id" shadow="never" style="border-radius:8px;margin-bottom:10px">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
            <span style="font-weight:600;font-size:14px">{{o.order_no}}</span>
            <el-tag :type="presaleStatusType(o.status)" size="small">{{presaleStatusLabel(o.status)}}</el-tag>
          </div>
          <div style="display:flex;gap:12px;align-items:center">
            <img :src="o.product_image||''" @error="handleImgError" style="width:56px;height:56px;border-radius:6px;object-fit:cover">
            <div style="flex:1">
              <div style="font-size:14px">{{o.product_name}}</div>
              <div style="font-size:12px;color:var(--text-muted);margin-top:2px">定金 ¥{{(+o.deposit||0).toFixed(2)}} · 尾款 ¥{{(+o.final_amount||0).toFixed(2)}}</div>
            </div>
          </div>
          <div v-if="o.status==='deposit_paid'" style="text-align:right;margin-top:10px">
            <el-button type="primary" size="small" @click="presalePayFinal(o.order_no)">付尾款</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>

  <!-- ==================== 砍价 ==================== -->
  <div class="page-section" :class="{active: currentPage==='bargain'}">
    <div class="main-content">
      <div class="section-title" style="display:flex;justify-content:space-between;align-items:center">
        <span>🔪 砍价专区</span>
        <span>
          <el-button size="small" :type="bargainView==='list'?'primary':'default'" @click="bargainView='list';loadBargains()">砍价活动</el-button>
          <el-button size="small" :type="bargainView==='mysess'?'primary':'default'" @click="bargainView='mysess';loadMyBargainSessions()">我的砍价</el-button>
        </span>
      </div>

      <!-- 活动列表 -->
      <div v-if="bargainView==='list'" style="min-height:200px">
        <div v-if="!bargainList.length" style="text-align:center;padding:60px 0;color:#999">暂无砍价活动</div>
        <div class="product-grid">
          <div class="product-card" v-for="(b, bi) in bargainList" :key="'bk'+bi" @click="openBargainDetail(b.id)">
            <div class="img-wrap" style="height:200px"><img :src="b.product_image||''" @error="handleImgError"></div>
            <div class="info">
              <div class="name">{{b.name}}</div>
              <div class="price-row">
                <span class="price" style="font-size:17px;color:#FF6A00">¥{{(+b.floor_price||0).toFixed(2)}}</span>
                <span class="origin-price" style="font-size:12px;color:#999;text-decoration:line-through">¥{{(+b.original_price||0).toFixed(2)}}</span>
              </div>
              <div style="font-size:12px;color:var(--text-muted);margin-top:2px">砍到底价可下单 · 库存 {{b.stock}}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动详情(发起砍价) -->
      <div v-else-if="bargainView==='detail'" style="min-height:200px">
        <el-card shadow="never" style="max-width:720px;margin:0 auto;border-radius:8px">
          <div style="display:flex;gap:20px;flex-wrap:wrap">
            <div style="width:260px;border-radius:8px;overflow:hidden"><img :src="bargainDetail.product_image||''" @error="handleImgError" style="width:100%;height:200px;object-fit:cover;display:block"></div>
            <div style="flex:1;min-width:260px">
              <div style="font-size:18px;font-weight:700">{{bargainDetail.name}}</div>
              <div style="margin:12px 0;padding:14px;background:#f8f8f8;border-radius:8px;font-size:14px;line-height:2">
                <div style="display:flex;justify-content:space-between"><span style="color:#666">商品原价</span><b>¥{{(+bargainDetail.original_price||0).toFixed(2)}}</b></div>
                <div style="display:flex;justify-content:space-between"><span style="color:#666">砍到底价</span><b style="color:#FF6A00">¥{{(+bargainDetail.floor_price||0).toFixed(2)}}</b></div>
                <div style="display:flex;justify-content:space-between"><span style="color:#666">活动库存</span><b>{{bargainDetail.stock}} 件</b></div>
                <div style="display:flex;justify-content:space-between"><span style="color:#666">砍价有效期</span><b>{{bargainDetail.expire_hours||24}} 小时</b></div>
              </div>
              <el-button type="primary" size="large" style="margin-top:16px;width:100%" custom-class="bargain-btn" :loading="bargainStarting" @click="bargainStart">
                发起砍价
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 我的砍价单 -->
      <div v-else-if="bargainView==='mysess'" style="min-height:200px">
        <div v-if="!bargainSessions.length" style="text-align:center;padding:60px 0;color:#999">暂无砍价单，去发起一个吧</div>
        <el-card v-for="o in bargainSessions" :key="o.id" shadow="never" style="border-radius:8px;margin-bottom:10px">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
            <span style="font-weight:600;font-size:14px">{{o.session_no}}</span>
            <el-tag :type="bargainStatusType(o.status)" size="small">{{bargainStatusLabel(o.status)}}</el-tag>
          </div>
          <div style="display:flex;gap:12px;align-items:center">
            <img :src="o.product_image||''" @error="handleImgError" style="width:56px;height:56px;border-radius:6px;object-fit:cover">
            <div style="flex:1">
              <div style="font-size:14px">{{o.product_name||o.activity_name}}</div>
              <div style="font-size:12px;color:var(--text-muted);margin-top:2px">当前 ¥{{(+o.current_price||0).toFixed(2)}} / 底价 ¥{{(+o.floor_price||0).toFixed(2)}} · 已帮砍 {{o.helped_count}} 人</div>
            </div>
          </div>
          <div style="text-align:right;margin-top:12px">
            <el-button v-if="o.status==='bargaining'" size="small" @click="openBargainSession(o.session_no)">查看 / 分享砍价</el-button>
            <el-button v-if="o.status==='can_order'" type="primary" size="small" style="background:#FF6A00;border-color:#FF6A00" @click="bargainOrder(o.session_no)">立即下单 ¥{{(+o.current_price||0).toFixed(2)}}</el-button>
          </div>
        </el-card>
      </div>

      <!-- 砍价单详情(帮砍/下单) -->
      <div v-else-if="bargainView==='session'" style="min-height:200px">
        <el-card shadow="never" style="max-width:720px;margin:0 auto;border-radius:8px">
          <template #header>
            <el-button size="small" @click="bargainView='mysess';loadMyBargainSessions()">‹ 返回我的砍价</el-button>
          </template>
          <div v-if="bargainSession.id" style="text-align:center">
            <div style="display:flex;gap:10px;justify-content:center;align-items:center;margin-bottom:12px">
              <img :src="bargainSession.product_image||''" @error="handleImgError" style="width:60px;height:60px;border-radius:6px;object-fit:cover">
              <div style="text-align:left"><div style="font-weight:600">{{bargainSession.product_name||bargainSession.activity_name}}</div><div style="font-size:12px;color:#999">{{bargainSession.session_no}}</div></div>
            </div>
            <div style="font-size:40px;font-weight:800;color:#FF6A00">¥{{(+bargainSession.current_price||0).toFixed(2)}}</div>
            <div style="font-size:13px;color:#999;margin:6px 0 14px">底价 ¥{{(+bargainSession.floor_price||0).toFixed(2)}} · 原价 ¥{{(+bargainSession.original_price||0).toFixed(2)}}</div>
            <div style="height:8px;background:#ffe0cc;border-radius:6px;overflow:hidden"><div :style="{width: bargainProgress+'%', height:'100%', background:'linear-gradient(90deg,#FF6A00,#FF9500)'}"></div></div>
            <div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin:8px 0 12px"><span>已砍 ¥{{(+bargainSession.original_price - +bargainSession.current_price).toFixed(2)}}</span><span>状态：{{bargainStatusLabel(bargainSession.status)}}</span></div>
            <div style="text-align:left;font-size:13px;color:#666;line-height:1.9;min-height:40px">
              <span v-if="!bargainSession.helps||!bargainSession.helps.length">还没有人帮砍，邀请好友来帮 TA 砍一刀吧～</span>
              <span v-else>
                <div v-for="(hp, hi) in bargainSession.helps" :key="hi">「{{hp.nickname||'好友'}}」帮砍了 <b style="color:#FF6A00">¥{{(+hp.amount||0).toFixed(2)}}</b></div>
              </span>
            </div>
            <div style="display:flex;gap:10px;margin-top:16px">
              <el-button v-if="bargainSession.status==='bargaining' && bargainSession.user_id!==bargainMyUserId" type="warning" size="large" style="flex:1" :loading="bargainHelping" @click="bargainHelp">🔪 帮 TA 砍一刀</el-button>
              <el-button v-if="bargainSession.status==='bargaining' && bargainSession.user_id===bargainMyUserId" size="large" style="flex:1;background:#FF6A00;border-color:#FF6A00;color:#fff" @click="copyBargainLink">📣 邀请好友帮砍</el-button>
              <el-button v-if="bargainSession.status==='can_order' && bargainSession.user_id===bargainMyUserId" type="danger" size="large" style="flex:1;background:#FF6A00;border-color:#FF6A00" :loading="bargainOrdering" @click="bargainOrder(bargainSession.session_no)">立即下单 ¥{{(+bargainSession.current_price||0).toFixed(2)}}</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>

  <!-- ==================== 签到 ==================== -->
  <div class="page-section" :class="{active: currentPage==='checkin'}">
    <div class="main-content">
      <div class="section-title">✅ 每日签到</div>
      <el-card shadow="never" style="border-radius:8px">
        <div style="text-align:center;padding:24px 0">
          <div style="font-size:56px;margin-bottom:8px">📅</div>
          <div style="font-size:18px;font-weight:700;margin-bottom:4px">
            {{checkinToday ? '今日已签到' : '签到得积分'}}
          </div>
          <div style="color:var(--text-muted);margin-bottom:16px">连续签到可获得更多积分奖励</div>
          <el-button type="primary" size="large" @click="doCheckin" :disabled="checkinToday">
            {{checkinToday ? '已签到' : '立即签到'}}
          </el-button>
        </div>
      </el-card>
    </div>
  </div>

  <!-- ==================== 消息通知 ==================== -->
  <div class="page-section" :class="{active: currentPage==='notification'}">
    <div class="main-content">
      <div class="section-title">🔔 消息通知</div>
      <div v-loading="notifLoading" style="min-height:200px">
        <el-card shadow="never" style="border-radius:8px;margin-bottom:12px" v-for="n in notifications" :key="n.id" @click="readNotification(n)">
          <div style="display:flex;align-items:center;gap:12px">
            <el-badge is-dot :hidden="!!n.is_read"><span style="font-size:22px">📩</span></el-badge>
            <div style="flex:1">
              <div style="font-weight:600">{{n.title}}</div>
              <div style="color:var(--text-muted);font-size:13px;margin-top:4px">{{n.content||n.message}}</div>
              <div style="color:var(--text-muted);font-size:12px;margin-top:4px">{{n.created_at}}</div>
            </div>
          </div>
        </el-card>
        <el-empty v-if="!notifications.length && !notifLoading" description="暂无消息" />
      </div>
    </div>
  </div>

  <!-- ==================== 浏览足迹 ==================== -->
  <div class="page-section" :class="{active: currentPage==='browse-history'}">
    <div class="main-content">
      <div class="section-title">🕘 浏览足迹
        <span style="margin-left:auto;font-size:13px;color:var(--danger);cursor:pointer" @click="clearBrowseHistory" v-if="browseHistory.length">清空</span>
      </div>
      <div v-loading="browseLoading" style="min-height:200px">
        <div class="product-grid">
          <div class="product-card" v-for="b in browseHistory" :key="b.id" @click="goProduct(b.product_id||b.id)">
            <div class="img-wrap" style="height:200px"><img :src="b.image_url||b.image||''" @error="handleImgError"></div>
            <div class="info">
              <div class="name">{{b.name||b.product_name}}</div>
              <div class="price-row"><span class="price" style="font-size:16px">¥{{(+b.price||0).toFixed(2)}}</span></div>
            </div>
          </div>
        </div>
        <el-empty v-if="!browseHistory.length && !browseLoading" description="暂无浏览记录" />
      </div>
    </div>
  </div>

</div>

<!-- ==================== Vue 3 + Element Plus + Axios CDN ==================== -->
<script src="/lib/vue.global.prod.js"></script>
<script src="/lib/element-plus.umd.js"></script>
<script src="/lib/axios.min.js"></script>
<script src="/lib/icons-vue.umd.js"></script>

<script src="/lib/pc-app.js?v=0804-bargain"></script>

<div class="lm-copyright" style="text-align:center;padding:16px 0;font-size:12px;color:#999;border-top:1px solid #eee;margin-top:20px;background:#fafafa;clear:both;">
  Powered By 省胜优铺商城 | 版权所有 &copy; 2026 保留一切权利 免费商用禁止移除版权
  <span class="lm-copyright-hash" style="display:none;">a1b2c3d4</span>
</div>
<script>(function(){function c(){var e=document.querySelector(".lm-copyright"),h=document.querySelector(".lm-copyright-hash");if(!e||!h)return;var t=e.textContent.trim().replace(/\s+/g,"");if(t.indexOf("省胜优铺商城")===-1||t.indexOf("免费商用禁止移除版权")===-1){var w=document.createElement("div");w.style.cssText="position:fixed;top:0;left:0;right:0;z-index:99999;background:#ee0a24;color:#fff;text-align:center;padding:8px;font-size:13px;font-weight:600";w.textContent="系统版权信息异常，请重新安装正版授权";document.body.insertBefore(w,document.body.firstChild)}}document.readyState==="complete"?setTimeout(c,1e3):window.addEventListener("load",function(){setTimeout(c,1e3)});setInterval(c,3e4)})();</script>

<script>(function(){'use strict';var C={CHECK_INTERVAL:15000,b3:'#ee0a24',WARN_FG:'#ffffff',b2:2147483647,KW:[String.fromCharCode(40857,34430,76,105,116,101,21830,22478),String.fromCharCode(20813,36153,21830,29992,31105,27490,31227,38500,29256,26435)]};function T(){var e=document.querySelector('.lm-copyright'),h=document.querySelector('.lm-copyright-hash');if(!e||!h)return {t:true,r:'版权DOM已被移除'};var t=(e.textContent||e.innerText||'').replace(/\s+/g,'');for(var i=0;i<C.KW.length;i++){if(t.indexOf(C.KW[i])===-1)return {t:true,r:'版权文案被篡改: 缺少"'+C.KW[i]]+'"'};}if(h.textContent!=='a1b2c3d4')return {t:true,r:'版权校验码异常'};return {t:false};}var L=null,B=false;function S(r){if(L&&L.parentNode)L.parentNode.removeChild(L);L=document.createElement('div');L.id='lm-block';L.style.cssText='position:fixed;top:0;left:0;right:0;bottom:0;z-index:'+C.b2+';background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"PingFang SC","Microsoft YaHei",sans-serif';var ic=document.createElement('div');ic.textContent='⚠️';ic.style.cssText='font-size:64px;margin-bottom:16px;';L.appendChild(ic);var ti=document.createElement('div');ti.textContent='版权标识不可移除';ti.style.cssText='font-size:22px;font-weight:700;color:white;margin-bottom:12px;';L.appendChild(ti);var de=document.createElement('div');de.textContent='违规操作已记录，系统将限制核心功能使用';de.style.cssText='font-size:14px;color:rgba(255,255,255,0.8);margin-bottom:20px;text-align:center;line-height:1.6;padding:0 30px;';L.appendChild(de);var er=document.createElement('div');er.textContent='原因: '+(r||'版权信息异常');er.style.cssText='font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:24px;';L.appendChild(er);var bw=document.createElement('div');bw.style.cssText='display:flex;gap:12px;';var bc=document.createElement('button');bc.textContent='我知道了';bc.style.cssText='padding:10px 32px;border:none;border-radius:24px;background:#ee0a24;color:white;font-size:15px;cursor:pointer;font-weight:600';bc.onclick=function(){if(L&&L.parentNode){L.style.display='none';setTimeout(function(){S(r);},12*60*1000);}};bw.appendChild(bc);L.appendChild(bw);var gu=document.createElement('div');gu.textContent='请重新安装正版授权包覆盖';gu.style.cssText='font-size:12px;color:rgba(255,255,255,0.3);margin-top:24px;';L.appendChild(gu);document.body.appendChild(L);}function X(){var F=window.fetch;if(F){window.fetch=function(){var u=arguments[0]||'',s=typeof u==='string'?u:(u.url||'');if(s.indexOf('/api/order/create')!==-1||s.indexOf('/api/payment/create')!==-1||s.indexOf('/api/review/create')!==-1||s.indexOf('/api/review/follow-up')!==-1){console.warn('[LM]功能已禁用');return Promise.resolve(new Response(JSON.stringify({code:1,message:'系统版权异常，功能暂不可用'}),{status:200,headers:{'Content-Type':'application/json'}}));}return F.apply(this,arguments);};}var O=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(){var u=arguments[1]||'';if(u.indexOf('/api/order')!==-1||u.indexOf('/api/payment')!==-1||u.indexOf('/api/review')!==-1){this._lmB=true;}return O.apply(this,arguments);};var Q=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send=function(){if(this._lmB){console.warn('[LM]请求被版权保护拦截');Object.defineProperty(this,'readyState',{value:4});Object.defineProperty(this,'status',{value:200});Object.defineProperty(this,'responseText',{value:JSON.stringify({code:1,message:'版权异常，功能暂不可用'})});if(this.onreadystatechange)this.onreadystatechange();if(this.onload)this.onload();return;}return Q.apply(this,arguments);};}var D=null;function M(){var r=T();if(r.t){B=true;S(r.r);X();return;}D=setInterval(function(){var r2=T();if(r2.t&&!B){B=true;clearInterval(D);S(r2.r);X();}},C.CHECK_INTERVAL);var CI=window.clearInterval;window.clearInterval=function(id){if(id===D){D=setInterval(function(){var r3=T();if(r3.t&&!B){B=true;S(r3.r);X();}},C.CHECK_INTERVAL);return;}return CI.apply(this,arguments);};}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',M);else M();if(document.readyState!=='complete')window.addEventListener('load',function(){if(!D&&!B)M();});})();</script>
</body>
</html>
