编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲜蔬饮品站 - 蔬菜饮料购物小程序交互原型</title>
<style>
  :root{
    --green:#22a85b; --green-dark:#178a49; --green-light:#e8f7ee;
    --orange:#ff7a2f; --orange-dark:#f4621a;
    --red:#ff4d4f;
    --bg:#f5f6f7; --card:#fff; --line:#f0f0f0;
    --text:#1f2329; --sub:#8a8f99; --price:#ff4d4f;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#e9eef2;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;}
  .frame{width:390px;height:820px;background:var(--bg);border-radius:36px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);border:8px solid #1f2329;display:flex;flex-direction:column;}
  .statusbar{height:28px;background:var(--card);display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:12px;color:#1f2329;flex:none;}
  .screen{flex:1;overflow:hidden;position:relative;}
  .page{position:absolute;inset:0;overflow-y:auto;background:var(--bg);display:none;}
  .page.active{display:block;animation:fadeIn .25s ease;}
  @keyframes fadeIn{from{opacity:.4;transform:translateX(12px)}to{opacity:1;transform:none}}
  .page::-webkit-scrollbar{display:none;}

  /* bottom nav */
  .tabbar{height:56px;background:var(--card);border-top:1px solid var(--line);display:flex;flex:none;}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--sub);cursor:pointer;gap:2px;}
  .tab .ico{font-size:20px;line-height:1;}
  .tab.active{color:var(--green);font-weight:600;}
  .tab .badge{position:relative;}
  .tab .badge::after{content:attr(data-n);position:absolute;top:-6px;right:-12px;background:var(--red);color:#fff;font-size:9px;border-radius:8px;padding:0 4px;min-width:14px;text-align:center;}

  /* generic */
  .nav{height:48px;background:var(--card);display:flex;align-items:center;padding:0 8px;position:sticky;top:0;z-index:5;}
  .nav .back{font-size:18px;padding:4px 10px;cursor:pointer;color:#1f2329;}
  .nav h2{flex:1;text-align:center;font-size:16px;color:var(--text);}
  .nav .sp{width:40px;}
  .sec{padding:12px;background:var(--bg);}
  .card{background:var(--card);border-radius:14px;margin-bottom:12px;overflow:hidden;}
  .row{display:flex;align-items:center;}
  .p{color:var(--price);font-weight:700;}
  .p small{font-size:11px;}
  .btn{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;border:none;border-radius:22px;font-size:14px;font-weight:600;padding:10px 22px;cursor:pointer;}
  .btn:disabled{opacity:.5;}
  .btn-orange{background:linear-gradient(135deg,#ffa229,#ff7a2f);}
  .btn-ghost{background:#fff;color:var(--text);border:1px solid #d8dbe0;border-radius:20px;font-size:13px;padding:7px 16px;cursor:pointer;}
  .tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--green-light);color:var(--green-dark);font-weight:600;}
  .tag.red{background:#fff1f0;color:var(--red);}
  .tag.orange{background:#fff4ec;color:var(--orange);}

  /* ---------- 首页 ---------- */
  .home-head{background:linear-gradient(135deg,#22a85b,#17a05a 60%,#16a056);padding:10px 14px 14px;position:relative;}
  .home-top{display:flex;align-items:center;gap:8px;color:#fff;}
  .city{display:flex;align-items:center;gap:3px;font-size:14px;font-weight:600;cursor:pointer;}
  .search{flex:1;background:rgba(255,255,255,.22);border-radius:16px;padding:7px 12px;font-size:12px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px;}
  .banner-wrap{position:relative;margin:12px;overflow:hidden;border-radius:14px;}
  .banner{display:flex;transition:transform .45s ease;}
  .banner-slide{flex:0 0 100%;min-height:118px;padding:18px;color:#fff;position:relative;}
  .banner-slide .bt{font-size:17px;font-weight:800;}
  .banner-slide .bs{font-size:11px;opacity:.92;margin-top:6px;line-height:1.6;}
  .banner-slide .bb{margin-top:10px;background:rgba(255,255,255,.92);color:#1f2329;display:inline-block;padding:5px 14px;border-radius:14px;font-size:11px;font-weight:700;}
  .banner-slide .bi{position:absolute;right:16px;bottom:8px;font-size:52px;opacity:.9;}
  .banner-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;}
  .banner-dots i{width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);transition:all .3s;}
  .banner-dots i.on{background:#fff;width:20px;}

  .cat-switch{display:flex;background:var(--card);margin:0 12px 12px;border-radius:12px;padding:4px;gap:4px;}
  .cat-switch div{flex:1;text-align:center;padding:8px 0;font-size:13px;color:var(--sub);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
  .cat-switch div.on{background:var(--green-light);color:var(--green-dark);font-weight:700;}
  .cat-title{display:flex;align-items:center;gap:6px;padding:2px 14px 10px;font-size:14px;font-weight:700;color:var(--text);}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px;}
  .gitem{background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer;}
  .gitem .gimg{width:100%;height:104px;overflow:hidden;background:#f2f3f5;display:flex;align-items:center;justify-content:center;position:relative;}
  .gitem .gimg .eimg{font-size:52px;}
  .gitem .gimg .sale{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:9px;padding:2px 6px;border-radius:6px;}
  .gitem .gbody{padding:10px;}
  .gitem .pname{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gitem .pdesc{font-size:10px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gitem .gfoot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
  .home-stepper{display:flex;align-items:center;gap:6px;}
  .home-stepper .hnum{font-size:13px;font-weight:600;color:var(--text);min-width:18px;text-align:center;}
  .padd.mns{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green);}
  .padd{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:18px;line-height:26px;text-align:center;cursor:pointer;flex:none;}
  .notice{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--sub);padding:10px 14px;}
  .notice .dot{width:6px;height:6px;background:var(--red);border-radius:50%;}

  /* ---------- 商品详情 ---------- */
  #page-detail{flex-direction:column;}
  #page-detail.active{display:flex;flex-direction:column;overflow:hidden;}
  #page-detail .pd-scroll{flex:1;overflow-y:auto;}
  .pd-img{height:250px;overflow:hidden;background:#f2f3f5;display:flex;align-items:center;justify-content:center;}
  .pd-img .eimg{font-size:120px;}
  .pd-sec{padding:14px;background:var(--card);margin-bottom:10px;}
  .pd-price{display:flex;align-items:baseline;gap:8px;}
  .pd-name{font-size:17px;font-weight:700;color:var(--text);margin-top:8px;}
  .pd-sub{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.7;}
  .pd-sold{margin-top:10px;font-size:11px;color:var(--sub);}
  .spec{display:flex;gap:8px;margin-top:12px;}
  .spec span{padding:6px 14px;border-radius:16px;background:#f5f6f7;font-size:12px;color:var(--text);cursor:pointer;}
  .spec span.on{background:var(--green-light);color:var(--green-dark);border:1px solid var(--green);}
  .qty{display:flex;align-items:center;gap:12px;margin-top:12px;justify-content:flex-end;}
  .qty b{font-size:13px;color:var(--text);}
  .stepper{display:flex;align-items:center;}
  .stepper button{width:26px;height:26px;border:none;background:#f2f3f5;font-size:16px;cursor:pointer;}
  .stepper .num{width:36px;text-align:center;font-size:14px;font-weight:600;}
  .pd-cart{flex:none;background:var(--card);padding:10px 14px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);}
  .pd-cart .cart-icon{font-size:22px;position:relative;cursor:pointer;color:var(--green);}
  .pd-cart .cart-icon b{position:absolute;top:-6px;right:-10px;background:var(--red);color:#fff;font-size:10px;border-radius:8px;padding:1px 5px;}
  .pd-btns{flex:1;display:flex;gap:10px;}
  .pd-btns .btn{flex:1;border-radius:20px;padding:11px 0;font-size:14px;}

  /* ---------- 购物车 ---------- */
  #page-cart{flex-direction:column;}
  #page-cart.active{display:flex;flex-direction:column;overflow:hidden;}
  #page-cart #cartList{flex:1;overflow-y:auto;padding:12px;}
  .ck{width:20px;height:20px;border-radius:50%;border:2px solid #d8dbe0;cursor:pointer;flex:none;}
  .ck.on{background:var(--green);border-color:var(--green);position:relative;}
  .ck.on::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
  .cart-item{display:flex;align-items:center;gap:10px;padding:14px;}
  .pimg{width:64px;height:64px;border-radius:12px;flex:none;overflow:hidden;background:#f2f3f5;display:flex;align-items:center;justify-content:center;font-size:32px;}
  .cart-foot{background:var(--card);border-top:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px;flex:none;}
  .cart-foot .total{flex:1;text-align:right;font-size:12px;color:var(--sub);}
  .empty{text-align:center;padding:70px 0;color:#b8bcc4;}
  .empty .big{font-size:44px;margin-bottom:10px;}
  .empty p{font-size:13px;}

  /* ---------- 确认订单 ---------- */
  #page-order{flex-direction:column;}
  #page-order.active{display:flex;flex-direction:column;overflow:hidden;}
  #page-order .od-scroll{flex:1;overflow-y:auto;}
  .addr{display:flex;gap:10px;padding:14px;cursor:pointer;align-items:flex-start;}
  .addr .t{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5;}
  .addr h3{font-size:15px;color:var(--text);display:flex;align-items:center;gap:6px;}
  .addr-tag{background:var(--green-light);color:var(--green-dark);font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;}
  .deliv-time{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;}
  .deliv-time .t{font-size:14px;color:var(--text);font-weight:600;flex:1;}
  .deliv-time .s{font-size:11px;color:var(--sub);}
  .fee{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--line);}
  .note-in{flex:1;border:none;outline:none;font-size:13px;color:var(--text);text-align:right;background:transparent;}
  .summary{padding:12px 14px;}
  .summary .row{justify-content:space-between;font-size:13px;color:var(--text);margin-bottom:10px;}
  .summary .row:last-child{margin-bottom:0;}
  .sum-total{color:var(--price);font-size:16px;font-weight:700;}
  .pay-bar{position:sticky;bottom:0;background:var(--card);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);}
  .pay-bar .pl{font-size:11px;color:var(--sub);}
  .pay-bar .amt{font-size:20px;color:var(--price);font-weight:800;}
  .success{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;}
  .success .ring{width:72px;height:72px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .success .ring i{width:34px;height:20px;border:solid var(--green);border-width:0 4px 4px 0;transform:rotate(45deg);margin-top:-8px;}
  .success h2{font-size:19px;color:var(--text);margin-bottom:8px;}
  .success p{font-size:13px;color:var(--sub);margin-bottom:26px;text-align:center;line-height:1.7;padding:0 30px;}

  /* ---------- 活动中心 ---------- */
  .act-head{background:linear-gradient(135deg,#ff7a2f,#ff5f3d);padding:16px 14px;color:#fff;}
  .act-head h2{font-size:18px;font-weight:800;}
  .act-head p{font-size:11px;opacity:.92;margin-top:5px;}
  .act-chip{display:flex;gap:8px;padding:12px;overflow-x:auto;}
  .act-chip::-webkit-scrollbar{display:none;}
  .act-chip span{flex:none;padding:6px 16px;border-radius:16px;background:var(--card);font-size:12px;color:var(--text);cursor:pointer;border:1px solid var(--line);}
  .act-chip span.on{background:var(--green-light);color:var(--green-dark);border-color:var(--green);font-weight:700;}
  .act-list{padding:0 12px;}
  .act-card{border-radius:14px;overflow:hidden;margin-bottom:12px;background:var(--card);cursor:pointer;}
  .act-cover{height:96px;padding:16px;color:#fff;position:relative;display:flex;flex-direction:column;justify-content:center;}
  .act-cover .at{font-size:16px;font-weight:800;}
  .act-cover .as{font-size:11px;opacity:.92;margin-top:5px;line-height:1.5;}
  .act-cover .ai{position:absolute;right:16px;bottom:8px;font-size:40px;opacity:.9;}
  .act-cover .go{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.9);color:#1f2329;font-size:10px;padding:3px 10px;border-radius:12px;font-weight:700;}
  .act-body{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12px;color:var(--sub);}
  .act-body .rule{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .act-body .a-btn{flex:none;background:var(--green);color:#fff;font-size:11px;padding:5px 14px;border-radius:14px;}
  .act-body .a-btn.orange{background:var(--orange);}

  /* ---------- 商家入驻 ---------- */
  .mform{padding:12px;}
  .mform .card{padding:4px 14px;}
  .mf-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
  .mf-row:last-child{border-bottom:none;}
  .mf-lab{font-size:13px;color:var(--text);width:72px;flex:none;}
  .mf-lab em{color:var(--red);font-style:normal;margin-right:2px;}
  .mf-in{flex:1;border:none;outline:none;font-size:13px;color:var(--text);background:transparent;}
  .mf-in.sel{text-align:right;}
  .mf-tip{font-size:11px;color:var(--sub);margin-top:4px;}
  .upload-grid{display:flex;gap:8px;padding:10px 0;}
  .upload-tile{width:76px;height:76px;border:1px dashed #c8ccd4;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;background:#fafbfc;flex:none;}
  .upload-tile.done{border-color:var(--green);border-style:solid;background:var(--green-light);}
  .upload-tile .up{font-size:20px;color:#9aa0a8;}
  .upload-tile .ut{font-size:10px;color:var(--sub);}
  .upload-tile.done .ut{color:var(--green-dark);font-weight:700;}
  .agree{display:flex;align-items:center;gap:8px;padding:4px 0 12px;font-size:12px;color:var(--sub);}

  /* ---------- 我的 ---------- */
  .my-head{background:linear-gradient(135deg,#22a85b,#16a056);padding:22px 16px;color:#fff;display:flex;align-items:center;gap:12px;}
  .avatar{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:22px;}
  .my-name{font-size:17px;font-weight:700;display:flex;align-items:center;gap:6px;}
  .my-phone{font-size:12px;opacity:.85;margin-top:3px;}
  .my-edit{font-size:10px;border:1px solid rgba(255,255,255,.6);border-radius:10px;padding:2px 8px;cursor:pointer;}
  .order-tabs{display:flex;padding:14px 0;cursor:pointer;}
  .order-tabs div{flex:1;text-align:center;font-size:12px;color:var(--text);position:relative;}
  .order-tabs .oi{font-size:20px;display:block;margin-bottom:4px;}
  .order-tabs .cnt{position:absolute;top:-4px;right:calc(50% - 24px);background:var(--red);color:#fff;font-size:9px;border-radius:8px;padding:0 4px;}
  .menu-item{display:flex;align-items:center;gap:10px;padding:14px;font-size:14px;color:var(--text);border-bottom:1px solid var(--line);cursor:pointer;}
  .menu-item:last-child{border-bottom:none;}
  .menu-item .m-ico{font-size:18px;}
  .menu-item .arr{margin-left:auto;color:#c4c8cf;}
  .my-logout{background:var(--card);text-align:center;padding:14px;font-size:14px;color:var(--red);cursor:pointer;margin:12px;border-radius:12px;}

  /* ---------- 我的订单 ---------- */
  .od-tabs{display:flex;background:var(--card);margin-bottom:12px;}
  .od-tabs div{flex:1;text-align:center;font-size:13px;color:var(--text);padding:12px 0;position:relative;cursor:pointer;}
  .od-tabs div.on{color:var(--green-dark);font-weight:600;}
  .od-tabs div.on::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:28px;height:3px;background:var(--green);border-radius:2px;}
  .order-card{padding:14px;}
  .order-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-bottom:12px;}
  .order-top .id{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
  .order-top .st{color:var(--green-dark);font-weight:600;flex:none;white-space:nowrap;}
  .order-top .st.red{color:var(--red);}
  .order-item{display:flex;gap:12px;margin-bottom:14px;}
  .order-item .pimg{width:52px;height:52px;border-radius:8px;font-size:26px;}
  .order-item .nm{font-size:13px;color:var(--text);}
  .order-item .sp{font-size:11px;color:var(--sub);margin-top:3px;}
  .order-item .pr{margin-left:auto;text-align:right;font-size:12px;}
  .order-item .q{font-size:11px;color:var(--sub);margin-top:5px;}
  .order-item:last-child{margin-bottom:0;}
  .order-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;color:var(--sub);margin-top:12px;}
  .order-foot .btn{font-size:12px;padding:6px 14px;}
  .order-foot .ghost{background:#fff;color:var(--text);border:1px solid #d8dbe0;}
  .od-time{margin-top:10px;font-size:11px;color:var(--sub);}

  /* ---------- 收货地址 ---------- */
  .addr-item{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;}
  .addr-item .an{font-size:14px;color:var(--text);font-weight:600;display:flex;align-items:center;gap:8px;}
  .addr-item .ap{font-size:12px;color:var(--sub);font-weight:400;}
  .addr-item .ad{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5;}
  .addr-item .aops{display:flex;flex-direction:column;gap:6px;}
  .addr-item .aops span{border:1px solid var(--green);color:var(--green-dark);border-radius:10px;padding:2px 9px;font-size:11px;cursor:pointer;text-align:center;}
  .addr-add{position:sticky;bottom:0;background:var(--card);padding:10px 14px;border-top:1px solid var(--line);}

  /* ---------- 编辑资料 ---------- */
  .pf-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line);}
  .pf-row:last-child{border-bottom:none;}
  .pf-lab{font-size:14px;color:var(--text);width:60px;flex:none;}
  .pf-in{flex:1;border:none;outline:none;font-size:14px;color:var(--text);text-align:right;background:transparent;}
  .pf-ava{width:52px;height:52px;border-radius:50%;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:24px;}
  .pf-sex{display:flex;gap:8px;flex:1;justify-content:flex-end;}
  .pf-sex span{border:1px solid #e5e7ea;border-radius:14px;padding:5px 18px;font-size:13px;color:var(--text);cursor:pointer;}
  .pf-sex span.on{background:var(--green-light);color:var(--green-dark);border-color:var(--green);}

  /* ---------- 客服 ---------- */
  .faq{padding:14px;border-bottom:1px solid var(--line);cursor:pointer;}
  .faq:last-child{border-bottom:none;}
  .faq-q{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px;}
  .faq-q span{background:var(--green-light);color:var(--green-dark);font-size:10px;border-radius:4px;padding:1px 6px;font-weight:700;flex:none;}
  .faq-q b{margin-left:auto;color:#c4c8cf;font-size:12px;}
  .faq-a-body{display:none;font-size:12px;color:var(--sub);line-height:1.7;margin-top:8px;padding-left:26px;}
  .svc-banner{background:linear-gradient(135deg,#22a85b,#16a056);padding:18px 14px;color:#fff;display:flex;align-items:center;gap:12px;}
  .svc-banner .sv{font-size:30px;}
  .svc-banner b{font-size:15px;display:block;}
  .svc-banner span{font-size:11px;opacity:.9;display:block;margin-top:3px;}

  /* ---------- 弹层 ---------- */
  .toast{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.78);color:#fff;font-size:13px;padding:12px 20px;border-radius:10px;z-index:99;display:none;white-space:nowrap;}
  .mask{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:60;display:none;}
  .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:16px 16px 0 0;z-index:61;display:none;padding:16px 14px 20px;animation:sheetUp .25s ease;}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .sheet-h{text-align:center;font-size:15px;font-weight:700;color:var(--text);padding-bottom:16px;}
  .slot{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;}
  .slot.on{border-color:var(--green);background:var(--green-light);}
  .slot .st{font-size:13px;color:var(--text);font-weight:600;}
  .slot .ss{font-size:11px;color:var(--sub);}
  .slot .sck{margin-left:auto;}
  .sheet-cancel{background:#f5f6f7;text-align:center;padding:12px;border-radius:12px;font-size:14px;color:var(--text);cursor:pointer;margin-top:6px;}
</style>
</head>
<body>
<div class="frame">
  <div class="statusbar"><span>09:41</span><span>5G ▮▮▮▮</span></div>
  <div class="screen">

    <!-- ============ 首页 ============ -->
    <div class="page active" id="page-home">
      <div class="home-head">
        <div class="home-top">
          <div class="city" onclick="toast('示例：城市选择');">杭州市 ▾</div>
          <div class="search">🔍 搜索蔬菜 / 饮料 / 特价</div>
        </div>
      </div>

      <div class="banner-wrap">
        <div class="banner" id="bannerTrack"></div>
        <div class="banner-dots" id="bannerDots"></div>
      </div>

      <div class="cat-switch">
        <div class="on" data-cat="veg" onclick="switchCat('veg')">🥬 蔬菜</div>
        <div data-cat="drink" onclick="switchCat('drink')">🧃 饮料</div>
      </div>

      <div class="cat-title" id="catTitle">🥬 时令蔬菜</div>
      <div class="pgrid" id="homeGrid"></div>

      <div class="notice"><span class="dot"></span><span>满 29 元免运费，满 39 元立减 5 元</span></div>
      <div class="notice"><span class="dot"></span><span>同城最快 30 分钟送达，新鲜看得见</span></div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 商品详情 ============ -->
    <div class="page" id="page-detail">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>商品详情</h2><span class="sp"></span></div>
      <div class="pd-scroll">
        <div class="pd-img" id="pdImg"></div>
        <div class="pd-sec">
          <div class="pd-price"><span class="p" style="font-size:24px"><small>¥</small><span id="pdPrice">0.00</span></span><span class="tag">每日现采</span><span class="old" id="pdOld" style="font-size:12px;color:#b8bcc4;text-decoration:line-through"></span></div>
          <div class="pd-name" id="pdName">商品名称</div>
          <div class="pd-sub" id="pdDesc"></div>
          <div class="pd-sold">已售 <span id="pdSold">0</span> 件 · 剩余库存充足</div>
          <div class="spec"><span class="on">标准装</span><span>家庭装</span><span>礼盒装</span></div>
          <div class="qty"><b>购买数量</b>
            <div class="stepper">
              <button onclick="chgQty(-1)">−</button>
              <span class="num" id="detailQty">1</span>
              <button onclick="chgQty(1)">+</button>
            </div>
          </div>
        </div>
        <div class="pd-sec">
          <div style="font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px">商品信息</div>
          <div style="font-size:12px;color:var(--sub);line-height:1.9">
            产地直采，全程冷链配送，保证新鲜到家。<br>
            规格：<span id="pdSpec"></span><br>
            保质期：冷藏 3 天 / 冷冻 30 天
          </div>
        </div>
        <div style="height:10px"></div>
      </div>
      <div class="pd-cart">
        <div class="cart-icon" onclick="goTab('page-cart')">🛒<b id="detailBadge" style="display:none">0</b></div>
        <div class="pd-btns">
          <button class="btn btn-ghost" onclick="addToCartFromDetail(false)">加入购物车</button>
          <button class="btn btn-orange" onclick="addToCartFromDetail(true)">立即购买</button>
        </div>
      </div>
    </div>

    <!-- ============ 购物车 ============ -->
    <div class="page" id="page-cart">
      <div class="nav"><span class="sp"></span><h2>购物车</h2><span class="sp"></span></div>
      <div id="cartList"></div>
      <div class="cart-foot">
        <div class="ck on" id="ckAll" onclick="toggleAll()"></div>
        <span style="font-size:12px;color:var(--text)">全选</span>
        <div class="total">合计：<span class="p" style="font-size:18px">¥<span id="cartTotal">0.00</span></span><br><span style="font-size:10px">已选 <b id="cartCount">0</b> 件 · 满29免运费</span></div>
        <button class="btn" onclick="checkout()">去结算</button>
      </div>
    </div>

    <!-- ============ 确认订单 ============ -->
    <div class="page" id="page-order">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>确认订单</h2><span class="sp"></span></div>
      <div class="od-scroll">
        <div class="card addr" onclick="goAddrPick()">
          <div style="font-size:20px;color:var(--green)">📍</div>
          <div style="flex:1" id="orderAddrBox"></div>
          <div style="color:#c4c8cf">›</div>
        </div>

        <div class="card deliv-time" onclick="openTimeSheet()">
          <div style="font-size:20px">🕐</div>
          <div style="flex:1">
            <div class="t" id="timeVal">尽快送达（约30分钟）</div>
            <div class="s">点击选择配送时间</div>
          </div>
          <div style="color:#c4c8cf">›</div>
        </div>

        <div class="card" style="padding:4px 14px">
          <div class="fee"><span>配送方式</span><span style="color:var(--green-dark);font-weight:600">极速达 · 免运费</span></div>
          <div class="fee"><span>优惠券</span><span style="color:var(--orange);cursor:pointer" onclick="toast('示例：优惠券列表弹窗')">2张可用 ›</span></div>
          <div class="fee"><span>备注</span><input class="note-in" id="orderNote" placeholder="选填，如：不要葱"></div>
        </div>

        <div class="card">
          <div style="padding:12px 14px;font-size:13px;font-weight:700;color:var(--text)">商品清单</div>
          <div id="orderItems"></div>
        </div>

        <div class="card summary">
          <div class="row"><span>商品金额</span><span id="sumGoods">¥0.00</span></div>
          <div class="row"><span>配送费</span><span id="sumFee" style="color:var(--green-dark)">¥0.00（满29免运费）</span></div>
          <div class="row"><span>满减优惠</span><span id="sumDisc" style="color:var(--orange)">-¥0.00</span></div>
          <div class="row"><span>应付金额</span><span class="sum-total" id="sumTotal">¥0.00</span></div>
        </div>
        <div style="height:10px"></div>
      </div>
      <div class="pay-bar">
        <div>
          <div class="amt">¥<span id="payTotal">0.00</span></div>
          <div class="pl" id="cartTip"></div>
        </div>
        <button class="btn btn-orange" style="border-radius:20px;padding:11px 34px" onclick="submitOrder()">提交订单</button>
      </div>
    </div>

    <!-- ============ 活动中心 ============ -->
    <div class="page" id="page-activity">
      <div class="act-head">
        <h2>🎉 活动中心</h2>
        <p>平台热门活动 · 商家入驻 · 优惠好礼</p>
      </div>
      <div class="act-chip" id="actChips">
        <span class="on" data-f="all" onclick="filterAct('all')">全部</span>
        <span data-f="coupon" onclick="filterAct('coupon')">优惠券</span>
        <span data-f="merchant" onclick="filterAct('merchant')">商家活动</span>
        <span data-f="new" onclick="filterAct('new')">新人专区</span>
      </div>
      <div class="act-list" id="actList"></div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 商家入驻 ============ -->
    <div class="page" id="page-merchant">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>商家入驻申请</h2><span class="sp"></span></div>
      <div style="padding:12px 14px 0">
        <div class="card" style="background:linear-gradient(135deg,#ff7a2f,#ff5f3d);color:#fff;padding:14px">
          <div style="font-size:15px;font-weight:800">🏪 加入「鲜蔬饮品站」</div>
          <div style="font-size:11px;opacity:.92;margin-top:5px;line-height:1.7">0 平台费 · 0 保证金入驻<br>平台提供流量扶持、配送体系与经营培训</div>
        </div>
      </div>
      <div class="mform">
        <div class="card">
          <div class="mf-row"><span class="mf-lab"><em>*</em>门店名称</span><input class="mf-in" placeholder="请输入门店名称"></div>
          <div class="mf-row"><span class="mf-lab"><em>*</em>经营品类</span><span class="mf-in sel" onclick="toast('示例：品类下拉选择')">蔬菜 ▾</span></div>
          <div class="mf-row"><span class="mf-lab"><em>*</em>联系人</span><input class="mf-in" placeholder="请输入联系人姓名"></div>
          <div class="mf-row"><span class="mf-lab"><em>*</em>手机号</span><input class="mf-in" placeholder="请输入手机号"></div>
          <div class="mf-row"><span class="mf-lab"><em>*</em>门店地址</span><input class="mf-in" placeholder="请输入详细地址"></div>
          <div class="mf-row"><span class="mf-lab">营业执照号</span><input class="mf-in" placeholder="选填"></div>
          <div class="mf-row" style="align-items:flex-start;padding:12px 0">
            <span class="mf-lab"><em>*</em>入驻材料</span>
            <div style="flex:1">
              <div class="upload-grid">
                <div class="upload-tile" id="up1" onclick="uploadTile(1,'营业执照')"><span class="up">📄</span><span class="ut">营业执照</span></div>
                <div class="upload-tile" id="up2" onclick="uploadTile(2,'法人身份证')"><span class="up">🪪</span><span class="ut">法人身份证</span></div>
                <div class="upload-tile" id="up3" onclick="uploadTile(3,'门店照片')"><span class="up">📷</span><span class="ut">门店照片</span></div>
              </div>
              <div class="mf-tip">支持 jpg / png，单张不超过 5MB</div>
            </div>
          </div>
        </div>
        <div class="agree"><div class="ck on" id="agreeCk" onclick="toggleAgree()"></div><span>我已阅读并同意 <b style="color:var(--green-dark)">《平台入驻服务协议》</b></span></div>
        <button class="btn" style="width:100%;height:44px" id="merchantSubmit" onclick="submitMerchant()">提交入驻申请</button>
        <p style="text-align:center;font-size:11px;color:var(--sub);margin-top:10px">提交后平台将在 1-3 个工作日内审核并联系您</p>
      </div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 个人中心 ============ -->
    <div class="page" id="page-my">
      <div class="my-head">
        <div class="avatar" id="myAvatar">🥬</div>
        <div style="flex:1">
          <div class="my-name"><span id="myNick">果蔬爱好者</span><span class="my-edit" onclick="go('page-profile')">编辑资料 ✎</span></div>
          <div class="my-phone" id="myPhone">138****6621 · 会员</div>
        </div>
      </div>

      <div class="card" style="margin:12px">
        <div class="order-tabs">
          <div data-t="pay" onclick="goOrders('pay')"><span class="oi">💰</span>待付款<span class="cnt" id="cntPay">0</span></div>
          <div data-t="send" onclick="goOrders('send')"><span class="oi">📦</span>待发货<span class="cnt" id="cntSend">0</span></div>
          <div data-t="go" onclick="goOrders('go')"><span class="oi">🚚</span>配送中<span class="cnt" id="cntGo">0</span></div>
          <div data-t="done" onclick="goOrders('done')"><span class="oi">✅</span>已完成<span class="cnt" id="cntDone">0</span></div>
          <div data-t="after" onclick="goOrders('after')"><span class="oi">🔄</span>退款/售后<span class="cnt" id="cntAfter">0</span></div>
        </div>
      </div>

      <div class="card" style="margin:0 12px">
        <div class="menu-item" onclick="go('page-orders')"><span class="m-ico">🧾</span>我的订单<span class="arr">›</span></div>
        <div class="menu-item" onclick="go('page-address')"><span class="m-ico">📍</span>收货地址管理<span class="arr">›</span></div>
        <div class="menu-item" onclick="toast('示例：优惠券列表')"><span class="m-ico">🎫</span>我的优惠券<span class="arr">›</span></div>
        <div class="menu-item" onclick="go('page-service')"><span class="m-ico">💬</span>联系客服<span class="arr">›</span></div>
        <div class="menu-item" onclick="go('page-activity')"><span class="m-ico">🏪</span>商家入驻<span class="arr">›</span></div>
        <div class="menu-item" onclick="toast('示例：设置页面（消息通知/隐私/账号）')"><span class="m-ico">⚙️</span>设置<span class="arr">›</span></div>
      </div>
      <div class="my-logout" onclick="toast('示例：退出登录确认')">退出登录</div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 编辑资料 ============ -->
    <div class="page" id="page-profile">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>编辑资料</h2><span class="sp"></span></div>
      <div style="padding:12px">
        <div class="card">
          <div class="pf-row"><span class="pf-lab">头像</span><div style="flex:1;display:flex;justify-content:flex-end"><div class="pf-ava" id="pfAva">🥬</div></div></div>
          <div class="pf-row"><span class="pf-lab">昵称</span><input class="pf-in" id="pfNick" value="果蔬爱好者"></div>
          <div class="pf-row"><span class="pf-lab">手机号</span><input class="pf-in" id="pfPhone" value="13800006621"></div>
          <div class="pf-row"><span class="pf-lab">性别</span>
            <div class="pf-sex">
              <span class="on" id="sexF" onclick="selSex('女')">女</span>
              <span id="sexM" onclick="selSex('男')">男</span>
            </div>
          </div>
          <div class="pf-row"><span class="pf-lab">生日</span><input class="pf-in" id="pfBirth" value="1992-03-18"></div>
        </div>
        <button class="btn" style="width:100%" onclick="saveProfile()">保存</button>
        <div style="height:10px"></div>
      </div>
    </div>

    <!-- ============ 我的订单 ============ -->
    <div class="page" id="page-orders">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>我的订单</h2><span class="sp"></span></div>
      <div style="padding:12px 12px 0">
        <div class="od-tabs" id="odTab">
          <div data-t="all" class="on">全部</div>
          <div data-t="pay">待付款</div>
          <div data-t="send">待发货</div>
          <div data-t="go">配送中</div>
          <div data-t="done">已完成</div>
          <div data-t="after">退款/售后</div>
        </div>
        <div id="orderList"></div>
      </div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 收货地址 ============ -->
    <div class="page" id="page-address">
      <div class="nav"><span class="back" onclick="addrExit()">‹</span><h2>收货地址</h2><span class="sp"></span></div>
      <div id="addrPickTip" style="display:none;background:var(--green-light);color:var(--green-dark);font-size:12px;padding:10px 14px;text-align:center">👇 点击地址即可选择为本次配送地址</div>
      <div style="padding:12px">
        <div id="addrList"></div>
      </div>
      <div class="addr-add"><button class="btn" style="width:100%" onclick="goAddrEdit()">+ 新增收货地址</button></div>
    </div>

    <!-- ============ 编辑地址 ============ -->
    <div class="page" id="page-addr-edit">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2 id="aeTitle">新增地址</h2><span class="sp"></span></div>
      <div style="padding:12px">
        <div class="card">
          <div class="pf-row"><span class="pf-lab">收货人</span><input class="pf-in" id="aeName" placeholder="请输入收货人姓名"></div>
          <div class="pf-row"><span class="pf-lab">手机号</span><input class="pf-in" id="aePhone" placeholder="请输入手机号"></div>
          <div class="pf-row"><span class="pf-lab">所在地区</span><span class="pf-in" style="text-align:right" id="aeRegion" onclick="toast('示例：省市区选择器')">浙江省 杭州市 西湖区 ›</span></div>
          <div class="pf-row"><span class="pf-lab">详细地址</span><input class="pf-in" id="aeDetail" placeholder="街道、小区、楼栋门牌号"></div>
          <div class="pf-row"><span class="pf-lab">标签</span>
            <div class="pf-sex" id="aeTags">
              <span data-t="家">家</span><span data-t="公司">公司</span><span data-t="学校">学校</span>
            </div>
          </div>
          <div class="pf-row"><span class="pf-lab">设为默认</span><div style="flex:1;display:flex;justify-content:flex-end"><div class="ck" id="aeDef" onclick="this.classList.toggle('on')"></div></div></div>
        </div>
        <button class="btn" style="width:100%" onclick="saveAddr()">保存地址</button>
        <div style="height:10px"></div>
      </div>
    </div>

    <!-- ============ 联系客服 ============ -->
    <div class="page" id="page-service">
      <div class="nav"><span class="back" onclick="back()">‹</span><h2>联系客服</h2><span class="sp"></span></div>
      <div style="padding:12px 12px 0">
        <div class="card svc-banner">
          <div class="sv">💬</div>
          <div style="flex:1">
            <b>鲜蔬饮品站 · 在线客服</b>
            <span>服务时间 8:00 - 22:00，实时回复</span>
          </div>
          <div style="background:rgba(255,255,255,.25);border-radius:14px;padding:7px 14px;font-size:12px;cursor:pointer" onclick="toast('示例：跳转客服会话窗口')">在线咨询</div>
        </div>

        <div class="card">
          <div class="menu-item" onclick="toast('拨打客服热线 400-888-6688')"><span class="m-ico">📞</span>客服热线<span style="margin-left:auto;color:var(--green-dark);font-size:13px">400-888-6688 ›</span></div>
          <div class="menu-item" onclick="toast('示例：意见反馈表单（问题描述 + 截图）')"><span class="m-ico">✍️</span>意见反馈<span class="arr">›</span></div>
          <div class="menu-item" onclick="toast('示例：售后申请（商品破损/缺漏）')"><span class="m-ico">🔧</span>售后服务<span class="arr">›</span></div>
        </div>

        <div class="card" id="faqList"></div>
      </div>
      <div style="height:10px"></div>
    </div>

    <!-- ============ 支付成功浮层 ============ -->
    <div class="success" id="paySuccess" style="display:none">
      <div class="ring"><i></i></div>
      <h2>下单成功</h2>
      <p>订单已提交，配送员将按所选时间送达<br>预计送达：<span id="psTime">尽快送达</span></p>
      <button class="btn" style="padding:11px 60px" onclick="doneOrder()">查看订单</button>
    </div>

    <!-- ============ 配送时间选择 ============ -->
    <div class="mask" id="timeMask" onclick="closeTimeSheet()"></div>
    <div class="sheet" id="timeSheet">
      <div class="sheet-h">选择配送时间</div>
      <div id="slotList"></div>
      <div class="sheet-cancel" onclick="closeTimeSheet()">取消</div>
    </div>

    <div class="toast" id="toast"></div>
  </div>

  <!-- tab bar -->
  <div class="tabbar">
    <div class="tab active" data-go="page-home"><span class="ico">🏠</span>首页</div>
    <div class="tab" data-go="page-activity"><span class="ico">🎉</span>活动</div>
    <div class="tab" data-go="page-cart"><span class="ico badge" data-n="0" id="cartBadgeTab">🛒</span>购物车</div>
    <div class="tab" data-go="page-my"><span class="ico">👤</span>我的</div>
  </div>
</div>

<script>
  const $ = s => document.querySelector(s);
  let cart = {}, cartSel = {};
  let pageStack = [], detailPid = null;
  let currentCat = 'veg';
  let currentAddrId = 1, addrPickMode = false, editingAddrId = null;
  let selectedTime = {t:'尽快送达（约30分钟）', s:'今日 09:00 - 22:00 随时可送'};
  let merchantApplied = false;
  let user = {nick:'果蔬爱好者', phone:'138****6621', sex:'女', birth:'1992-03-18'};
  let agree = true;

  const products = {
    tomato:{name:'普罗旺斯西红柿 500g',price:4.50,old:6.80,cat:'veg',emoji:'🍅',bg:'linear-gradient(135deg,#ff9f43,#ff5f3d)',desc:'沙瓤爆汁，自然成熟，酸甜可口。可当水果生吃，亦适合煲汤做菜。',sold:2866,spec:'约 3-4 个 / 盒'},
    broccoli:{name:'有机西兰花 400g',price:6.80,old:9.90,cat:'veg',emoji:'🥦',bg:'linear-gradient(135deg,#43a047,#1e7d32)',desc:'现采现发，嫩绿饱满，冷链直达锁鲜。富含维生素，轻食减脂优选。',sold:1920,spec:'约 1-2 颗 / 盒'},
    cucumber:{name:'水果黄瓜 500g',price:3.50,old:5.80,cat:'veg',emoji:'🥒',bg:'linear-gradient(135deg,#66bb6a,#2e7d32)',desc:'顶花带刺，清甜爽口，低热量，可当水果生吃，凉拌清炒皆宜。',sold:1540,spec:'约 3-4 根 / 份'},
    carrot:{name:'沙地胡萝卜 1斤',price:2.90,old:4.20,cat:'veg',emoji:'🥕',bg:'linear-gradient(135deg,#ffa726,#ef6c00)',desc:'沙地种植，口感脆甜，富含胡萝卜素。炖汤、清炒、榨汁都合适。',sold:2380,spec:'约 4-5 根 / 份'},
    spinach:{name:'本地小菠菜 300g',price:4.20,old:6.50,cat:'veg',emoji:'🥬',bg:'linear-gradient(135deg,#43a047,#2e7d32)',desc:'清晨采摘，叶嫩茎甜，无农残检测合格。清炒涮锅打汤皆可。',sold:980,spec:'约 1 把 / 份'},
    potato:{name:'黄心土豆 2斤',price:2.50,old:3.90,cat:'veg',emoji:'🥔',bg:'linear-gradient(135deg,#bcaaa4,#795548)',desc:'黄心粉糯，适合炖煮煎炸。新鲜到货，产地直发。',sold:3120,spec:'约 6-8 个 / 份'},
    eggplant:{name:'长紫茄 500g',price:3.80,old:5.50,cat:'veg',emoji:'🍆',bg:'linear-gradient(135deg,#ab47bc,#6a1b9a)',desc:'皮薄肉嫩，籽少不涩。鱼香茄子、烤茄子必备好食材。',sold:860,spec:'约 2-3 根 / 份'},
    corn:{name:'云南水果玉米 4根',price:4.90,old:7.90,cat:'veg',emoji:'🌽',bg:'linear-gradient(135deg,#fdd835,#f9a825)',desc:'云南高原水果玉米，皮薄汁多，生吃脆甜，微波即食。',sold:1750,spec:'约 4 根 / 袋'},

    orangeJuice:{name:'鲜榨橙汁 300ml',price:12.00,old:16.00,cat:'drink',emoji:'🍊',bg:'linear-gradient(135deg,#ffa726,#ef6c00)',desc:'鲜果现榨，不添加一滴水与糖，酸甜清爽。冷藏配送，即开即饮。',sold:2680,spec:'300ml / 瓶'},
    coconut:{name:'泰国椰青水 330ml',price:9.90,old:13.90,cat:'drink',emoji:'🥥',bg:'linear-gradient(135deg,#8d6e63,#4e342e)',desc:'天然椰青水，低卡无负担，运动补水好搭档。',sold:1420,spec:'330ml / 罐'},
    honeytea:{name:'蜂蜜柚子茶 500ml',price:8.80,old:12.80,cat:'drink',emoji:'🍯',bg:'linear-gradient(135deg,#ffb74d,#f57c00)',desc:'真蜂蜜配柚子果肉，温水冲饮或冷藏直饮，清润养人。',sold:980,spec:'500ml / 瓶'},
    soda:{name:'柠檬气泡水 330ml',price:6.50,old:8.50,cat:'drink',emoji:'🥤',bg:'linear-gradient(135deg,#4dd0e1,#0288d1)',desc:'0糖0脂0卡，气泡充足，柠檬香气清爽解腻。',sold:3200,spec:'330ml / 罐'},
    yogurt:{name:'原味酸奶 200ml',price:7.50,old:9.90,cat:'drink',emoji:'🥛',bg:'linear-gradient(135deg,#e0e0e0,#9e9e9e)',desc:'低温发酵，奶香浓郁，质地浓稠。早餐搭配谷物更佳。',sold:2100,spec:'200ml / 杯'},
    soymilk:{name:'现磨豆浆 350ml',price:4.50,old:6.00,cat:'drink',emoji:'🧋',bg:'linear-gradient(135deg,#ffcc80,#ff8f00)',desc:'每日现磨，豆香浓郁，无添加蔗糖可选。热饮/冰饮皆可。',sold:1860,spec:'350ml / 杯'},
    herbtea:{name:'凉茶 310ml',price:5.50,old:7.50,cat:'drink',emoji:'🍵',bg:'linear-gradient(135deg,#8d6e63,#3e2723)',desc:'传统配方熬制，清热降火，夏日常备。',sold:760,spec:'310ml / 罐'},
    plum:{name:'青梅汁 330ml',price:10.90,old:14.90,cat:'drink',emoji:'🍹',bg:'linear-gradient(135deg,#66bb6a,#2e7d32)',desc:'青梅原果榨取，酸甜生津，饭后来一瓶解腻开胃。',sold:1150,spec:'330ml / 瓶'}
  };

  const timeSlots = [
    {t:'尽快送达', s:'约 30 分钟内 · 今日 09:00 - 22:00'},
    {t:'今天 10:00 - 12:00', s:'适合预约配送'},
    {t:'今天 14:00 - 16:00', s:'适合预约配送'},
    {t:'今天 18:00 - 20:00', s:'下班高峰配送'},
    {t:'明天 09:00 - 11:00', s:'次日达 · 预约配送'},
    {t:'明天 14:00 - 16:00', s:'次日达 · 预约配送'}
  ];

  const addrData = [
    {id:1,name:'张女士',phone:'138****6621',region:'浙江省 杭州市 西湖区',addr:'文三路 138 号 2 幢 501 室',tag:'家',def:true},
    {id:2,name:'李先生',phone:'186****2233',region:'浙江省 杭州市 拱墅区',addr:'莫干山路 100 号 3 幢 1202 室',tag:'公司',def:false},
    {id:3,name:'王同学',phone:'159****8877',region:'浙江省 杭州市 滨江区',addr:'江南大道 588 号学生公寓 6 栋',tag:'学校',def:false}
  ];

  const orders = [
    {id:'CG202608160001',st:'待发货',cls:'',time:'今天 14:00 - 16:00',items:[{pid:'tomato',qty:2},{pid:'orangeJuice',qty:1}],total:21.00},
    {id:'CG202608160002',st:'待付款',cls:'red',time:'尽快送达',items:[{pid:'corn',qty:2},{pid:'yogurt',qty:2}],total:24.80},
    {id:'CG202608150021',st:'配送中',cls:'',time:'今天 10:00 - 12:00',items:[{pid:'broccoli',qty:1},{pid:'coconut',qty:2}],total:26.60},
    {id:'CG202608140033',st:'已完成',cls:'',time:'昨天 18:00 - 20:00',items:[{pid:'potato',qty:1},{pid:'spinach',qty:2},{pid:'soda',qty:1}],total:13.90},
    {id:'CG202608130017',st:'已完成',cls:'',time:'8月13日 09:00 - 11:00',items:[{pid:'carrot',qty:2},{pid:'soymilk',qty:2}],total:14.80},
    {id:'CG202608120006',st:'退款/售后',cls:'red',time:'8月12日 14:00 - 16:00',items:[{pid:'herbtea',qty:1}],total:5.50}
  ];
  const cntMap = {pay:1,send:1,go:1,done:2,after:1};

  /* ---------- 导航 ---------- */
  function go(id){
    const prev = $('.page.active');
    if(prev && prev.id!==id) pageStack.push(prev.id);
    $('.page.active').classList.remove('active');
    $('#'+id).classList.add('active');
    const t = document.querySelector(`.tab[data-go="${id}"]`);
    if(t){ $('.tab.active').classList.remove('active'); t.classList.add('active'); }
    refreshPage(id);
  }
  function refreshPage(id){
    if(id==='page-home'){ renderHome(); }
    else if(id==='page-cart'){ renderCart(); }
    else if(id==='page-order'){ renderOrder(); }
    else if(id==='page-activity'){ renderAct(); }
    else if(id==='page-my'){ renderMy(); }
    else if(id==='page-orders'){ renderOrders('all'); }
    else if(id==='page-address'){ renderAddrList(); }
    else if(id==='page-profile'){ fillProfile(); }
    else if(id==='page-service'){ renderFaq(); }
  }
  function goTab(id){
    pageStack=[];
    go(id);
  }
  function back(){
    if(!pageStack.length){ const cur=$('.page.active').id; if(cur!=='page-home') goTab('page-home'); return; }
    const id=pageStack.pop();
    $('.page.active').classList.remove('active');
    $('#'+id).classList.add('active');
    const t=document.querySelector(`.tab[data-go="${id}"]`);
    if(t){ $('.tab.active').classList.remove('active'); t.classList.add('active'); }
    refreshPage(id);
  }
  document.querySelectorAll('.tab').forEach(t=>t.addEventListener('click',()=>{ pageStack=[]; go(t.dataset.go); }));

  function toast(msg){
    const t=$('#toast'); t.textContent=msg; t.style.display='block';
    clearTimeout(toastTimer); toastTimer=setTimeout(()=>t.style.display='none',1600);
  }
  let toastTimer;

  /* ---------- 首页 banner ---------- */
  const banners = [
    {bt:'新人专享礼包', bs:'首单立减 10 元 · 全场通用', bb:'立即领取', bi:'🎁', bg:'linear-gradient(135deg,#ff7a2f,#ff5f3d)', go:'page-activity'},
    {bt:'时令蔬菜 · 产地直采', bs:'每日清晨采摘，冷链直达，48小时鲜', bb:'去逛逛', bi:'🥬', bg:'linear-gradient(135deg,#22a85b,#16a056)', go:'page-home'},
    {bt:'商家入驻 · 免平台费', bs:'0 保证金开店，平台流量扶持', bb:'立即申请', bi:'🏪', bg:'linear-gradient(135deg,#4fc3f7,#1976d2)', go:'page-merchant'}
  ];
  let banIdx = 0;
  function renderBanner(){
    $('#bannerTrack').innerHTML = banners.map(b=>`
      <div class="banner-slide" style="background:${b.bg};cursor:pointer" onclick="go('${b.go}')">
        <div class="bt">${b.bt}</div>
        <div class="bs">${b.bs}</div>
        <div class="bb">${b.bb}</div>
        <div class="bi">${b.bi}</div>
      </div>`).join('');
    $('#bannerDots').innerHTML = banners.map((_,i)=>`<i class="${i===0?'on':''}" data-i="${i}" onclick="jumpBanner(${i})"></i>`).join('');
    setBannerPos();
  }
  function setBannerPos(){ $('#bannerTrack').style.transform = `translateX(-${banIdx*100}%)`;
    document.querySelectorAll('#bannerDots i').forEach((d,i)=>d.classList.toggle('on',i===banIdx)); }
  function jumpBanner(i){ banIdx=i; setBannerPos(); }
  setInterval(()=>{ banIdx=(banIdx+1)%banners.length; setBannerPos(); },3800);

  /* ---------- 首页商品 ---------- */
  function switchCat(c){
    currentCat=c;
    document.querySelectorAll('.cat-switch div').forEach(x=>x.classList.toggle('on',x.dataset.cat===c));
    $('#catTitle').textContent = c==='veg' ? '🥬 时令蔬菜' : '🧃 精选饮料';
    renderHome();
  }
  function renderHome(){
    const list = Object.keys(products).filter(pid=>products[pid].cat===currentCat).map(pid=>({pid, ...products[pid]}));
    $('#homeGrid').innerHTML = list.map(p=>{
      const qty = cart[p.pid]?cart[p.pid].qty:0;
      const btns = qty>0
        ? `<div class="home-stepper"><div class="padd mns" data-pid="${p.pid}">−</div><span class="hnum">${qty}</span><div class="padd pls" data-pid="${p.pid}">+</div></div>`
        : `<div class="padd pls" data-pid="${p.pid}">+</div>`;
      return `<div class="gitem" data-pid="${p.pid}">
        <div class="gimg" style="background:${p.bg}"><span class="sale" style="${p.cat==='drink'?'display:none':''}">现采</span><div class="eimg">${p.emoji}</div></div>
        <div class="gbody">
          <div class="pname">${p.name}</div>
          <div class="pdesc">已售 ${p.sold} 件 · ${p.spec}</div>
          <div class="gfoot">
            <span class="p" style="font-size:15px"><small>¥</small>${p.price.toFixed(2)}</span>
            ${btns}
          </div>
        </div>
      </div>`;
    }).join('');
  }
  document.addEventListener('click',e=>{
    const g=e.target.closest('.gitem');
    const pls=e.target.closest('.pls');
    if(pls){ addToCart(pls.dataset.pid,1); renderHome(); return; }
    const mns=e.target.closest('.mns');
    if(mns){
      const pid=mns.dataset.pid;
      if(cart[pid]){ cart[pid].qty--; if(cart[pid].qty<=0) delete cart[pid]; }
      updateBadge(); renderHome(); return;
    }
    if(g && !e.target.closest('.padd')){ openDetail(g.dataset.pid); }
  });

  /* ---------- 购物车 ---------- */
  function addToCart(pid,qty){
    qty=qty||1;
    const p=products[pid];
    if(!cart[pid]){ cart[pid]={...p,pid,qty}; toast('已加入购物车'); }
    else cart[pid].qty+=qty;
    updateBadge();
  }
  function updateBadge(){
    let n=0; for(const k in cart) n+=cart[k].qty;
    $('#cartBadgeTab').dataset.n = n>99?'99+':n;
    const db=$('#detailBadge'); db.textContent=n; db.style.display=n>0?'block':'none';
  }
  function renderCart(){
    const keys=Object.keys(cart);
    $('#cartList').innerHTML = keys.length ? keys.map(pid=>{
      const c=cart[pid];
      const sel = cartSel[pid]!==false;
      return `<div class="cart-item card" style="margin-bottom:10px">
        <div class="ck ${sel?'on':''}" onclick="toggleSel('${pid}')"></div>
        <div class="pimg" style="background:${c.bg}">${c.emoji}</div>
        <div style="flex:1">
          <div class="pname" style="font-size:13px">${c.name}</div>
          <div style="font-size:11px;color:var(--sub);margin-top:3px">${c.cat==='veg'?'🥬 蔬菜':'🧃 饮料'}</div>
          <div class="row" style="justify-content:space-between;margin-top:6px">
            <span class="p" style="font-size:15px"><small>¥</small>${c.price.toFixed(2)}</span>
            <div class="stepper">
              <button onclick="chgCart('${pid}',-1)">−</button>
              <span class="num">${c.qty}</span>
              <button onclick="chgCart('${pid}',1)">+</button>
            </div>
          </div>
        </div>
      </div>`;
    }).join('') : `<div class="empty"><div class="big">🛒</div><p>购物车还是空的</p><p style="font-size:11px;margin-top:6px">去首页挑选新鲜蔬菜和饮料吧</p><button class="btn" style="margin-top:16px" onclick="goTab('page-home')">去逛逛</button></div>`;
    renderCartFoot();
  }
  function toggleSel(pid){ cartSel[pid]=cartSel[pid]!==false?false:true; renderCart(); }
  function toggleAll(){
    const keys=Object.keys(cart); if(!keys.length) return;
    const anyOff=keys.some(k=>cartSel[k]===false);
    keys.forEach(k=>cartSel[k]=anyOff); renderCart();
  }
  function chgCart(pid,d){
    cart[pid].qty+=d;
    if(cart[pid].qty<=0) delete cart[pid];
    updateBadge(); renderCart();
  }
  function renderCartFoot(){
    let tot=0,cnt=0;
    for(const pid in cart){ if(cartSel[pid]!==false){ tot+=cart[pid].price*cart[pid].qty; cnt+=cart[pid].qty; } }
    $('#cartTotal').textContent=tot.toFixed(2); $('#cartCount').textContent=cnt;
    const onAll=Object.keys(cart).length && Object.keys(cart).every(k=>cartSel[k]!==false);
    $('#ckAll').classList.toggle('on',onAll);
  }
  function checkout(){
    const cnt=Object.keys(cart).filter(pid=>cartSel[pid]!==false).length;
    if(!cnt){ toast('请先选择要结算的商品'); return; }
    go('page-order');
  }

  /* ---------- 商品详情 ---------- */
  function openDetail(pid){
    const p=products[pid]; detailPid=pid;
    $('#pdImg').innerHTML=`<div class="eimg" style="text-shadow:0 4px 16px rgba(0,0,0,.15)">${p.emoji}</div>`;
    $('#pdPrice').textContent=p.price.toFixed(2);
    $('#pdOld').textContent = p.old?('¥'+p.old.toFixed(2)):'';
    $('#pdName').textContent=p.name; $('#pdDesc').textContent=p.desc;
    $('#pdSold').textContent=p.sold; $('#pdSpec').textContent=p.spec;
    $('#detailQty').textContent = Math.max(cart[pid]?cart[pid].qty:1, 1);
    updateBadge();
    go('page-detail');
  }
  function chgQty(d){ let n=+$('#detailQty').textContent+d; if(n<1)n=1; $('#detailQty').textContent=n; }
  function addToCartFromDetail(buyNow){
    addToCart(detailPid, +$('#detailQty').textContent);
    if(buyNow){ cartSel[detailPid]=true; go('page-order'); }
    else toast('已加入购物车');
  }

  /* ---------- 确认订单 ---------- */
  function getAddr(){ return addrData.find(a=>a.id===currentAddrId)||addrData[0]; }
  function renderAddrBox(){
    const a=getAddr();
    $('#orderAddrBox').innerHTML = `<h3>${a.name} <span class="ap" style="font-size:12px;color:var(--sub);font-weight:400">${a.phone}</span>${a.def?'<span class="addr-tag">默认</span>':''}</h3>
      <div class="t">${a.region} ${a.addr}</div>`;
  }
  function renderOrder(){
    let goods=0,cnt=0;
    const selPids=Object.keys(cart).filter(pid=>cartSel[pid]!==false);
    selPids.forEach(pid=>{ goods+=cart[pid].price*cart[pid].qty; cnt+=cart[pid].qty; });
    $('#orderItems').innerHTML = selPids.length ? selPids.map(pid=>{
      const c=cart[pid];
      return `<div class="order-item" style="padding:10px 14px;border-top:1px solid var(--line)">
        <div class="pimg" style="background:${c.bg}">${c.emoji}</div>
        <div><div class="nm">${c.name}</div><div class="sp">${c.cat==='veg'?'🥬 蔬菜':'🧃 饮料'}</div></div>
        <div class="pr"><span class="p">¥${c.price.toFixed(2)}</span><div class="q">x${c.qty}</div></div>
      </div>`;
    }).join('') : `<div class="empty" style="padding:30px 0"><div class="big" style="font-size:30px">🛒</div><p>没有选择商品</p></div>`;
    const fee = goods>=29 ? 0 : 5;
    const disc = goods>=39 ? 5 : 0;
    const total = goods + fee - disc;
    $('#timeVal').textContent = selectedTime.t;
    $('#sumGoods').textContent='¥'+goods.toFixed(2);
    $('#sumFee').textContent = goods>=29 ? '¥0.00（满29免运费）' : '¥5.00（满29免运费）';
    $('#sumDisc').textContent = disc>0 ? '-¥'+disc.toFixed(2) : '-¥0.00';
    $('#sumTotal').textContent='¥'+total.toFixed(2);
    $('#payTotal').textContent=total.toFixed(2);
    $('#cartTip').textContent = cnt?`共 ${cnt} 件 · 已选配送时间：${selectedTime.t}`:'请先选择商品';
    renderAddrBox();
  }
  /* 配送时间弹窗 */
  function openTimeSheet(){
    $('#slotList').innerHTML = timeSlots.map((s,i)=>{
      const on = selectedTime.t===s.t;
      return `<div class="slot ${on?'on':''}" onclick="pickTime(${i})">
        <div><div class="st">${s.t}</div><div class="ss">${s.s}</div></div>
        <div class="sck"><div class="ck ${on?'on':''}"></div></div>
      </div>`;
    }).join('');
    $('#timeMask').style.display='block'; $('#timeSheet').style.display='block';
  }
  function pickTime(i){
    selectedTime=timeSlots[i];
    closeTimeSheet();
    renderOrder();
  }
  function closeTimeSheet(){ $('#timeMask').style.display='none'; $('#timeSheet').style.display='none'; }
  /* 修改配送地址 */
  function goAddrPick(){
    addrPickMode=true;
    go('page-address');
  }
  function submitOrder(){
    const selPids=Object.keys(cart).filter(pid=>cartSel[pid]!==false);
    if(!selPids.length){ toast('购物车没有可选商品'); return; }
    $('#psTime').textContent = selectedTime.t + ' · ' + selectedTime.s;
    $('#paySuccess').style.display='flex';
  }
  function doneOrder(){
    $('#paySuccess').style.display='none';
    const now=new Date(); const m=(now.getMonth()+1)<10?'0'+(now.getMonth()+1):(now.getMonth()+1);
    const d=now.getDate()<10?'0'+now.getDate():now.getDate();
    const total=+$('#payTotal').textContent||0;
    const items=Object.keys(cart).filter(pid=>cartSel[pid]!==false).map(pid=>({pid,qty:cart[pid].qty}));
    orders.unshift({id:'CG'+now.getFullYear()+('0'+(now.getMonth()+1)).slice(-2)+('0'+now.getDate()).slice(-2)+('00'+orders.length).slice(-3),st:'待发货',cls:'',time:selectedTime.t,items,total});
    cart={}; cartSel={}; updateBadge(); renderCart();
    pageStack=[]; go('page-orders');
  }

  /* ---------- 活动中心 ---------- */
  let actFilter='all';
  const acts=[
    {id:'merchant1',cat:'merchant',bt:'商家入驻 · 免平台费',bs:'0 保证金开店，平台提供流量扶持、配送体系与经营培训',bi:'🏪',bg:'linear-gradient(135deg,#4fc3f7,#1976d2)',btn:'立即申请',btnClass:'',go:'page-merchant',rule:'活动长期有效 · 首批入驻享专属补贴'},
    {id:'new1',cat:'new',bt:'新人专享 · 立减 10 元',bs:'新用户首单立减，满 39 元可用',bi:'🎁',bg:'linear-gradient(135deg,#ff7a2f,#ff5f3d)',btn:'立即领取',btnClass:'orange',rule:'每位新用户限领 1 次 · 有效期 7 天'},
    {id:'coupon1',cat:'coupon',bt:'满 39 减 5 元',bs:'全场蔬菜饮料通用，下单自动抵扣',bi:'🎫',bg:'linear-gradient(135deg,#ab47bc,#7b1fa2)',btn:'去抢券',btnClass:'',rule:'活动至 8 月 31 日 · 可与满减叠加'},
    {id:'coupon2',cat:'coupon',bt:'满 29 免运费',bs:'单笔订单满 29 元即免同城配送费',bi:'🚚',bg:'linear-gradient(135deg,#22a85b,#16a056)',btn:'去逛逛',btnClass:'',rule:'每日不限次数 · 自动生效'},
    {id:'merchant2',cat:'merchant',bt:'时令尝鲜季 · 供应商招募',bs:'诚邀蔬菜种植户 / 饮料品牌入驻供货',bi:'🌾',bg:'linear-gradient(135deg,#fdd835,#f9a825)',btn:'查看详情',btnClass:'orange',go:'page-merchant',rule:'长期招募 · 平台助农补贴'}
  ];
  function renderAct(){
    const list=acts.filter(a=>actFilter==='all'||a.cat===actFilter);
    $('#actList').innerHTML = list.map(a=>`
      <div class="act-card">
        <div class="act-cover" style="background:${a.bg}" onclick="go('${a.go}')">
          <div class="go">查看 ›</div>
          <div class="at">${a.bt}</div>
          <div class="as">${a.bs}</div>
          <div class="ai">${a.bi}</div>
        </div>
        <div class="act-body">
          <span class="rule">${a.rule}</span>
          <span class="a-btn ${a.btnClass}" onclick="actBtn('${a.id}')">${a.btn}</span>
        </div>
      </div>`).join('');
  }
  function filterAct(f){
    actFilter=f;
    document.querySelectorAll('#actChips span').forEach(x=>x.classList.toggle('on',x.dataset.f===f));
    renderAct();
  }
  function actBtn(id){
    if(id==='merchant1'||id==='merchant2'){ go('page-merchant'); return; }
    if(id==='new1') toast('示例：新人券已领取，下单立减 10 元');
    else if(id==='coupon1') toast('示例：5 元优惠券已放入卡包');
    else if(id==='coupon2') toast('已满 29 元免运费，下单自动生效');
  }

  /* ---------- 商家入驻 ---------- */
  function toggleAgree(){ agree=!agree; $('#agreeCk').classList.toggle('on',agree); }
  function uploadTile(i,label){
    const el=$('#up'+i);
    if(el.classList.contains('done')){ toast(label+'已上传（示例：可重新选择）'); return; }
    el.classList.add('done');
    el.innerHTML='<span class="up" style="color:var(--green)">✔</span><span class="ut">'+label+'</span>';
    toast('已选择 '+label+'（示例：本地文件选择）');
  }
  function submitMerchant(){
    if(!agree){ toast('请先阅读并同意入驻协议'); return; }
    if(merchantApplied){ toast('您已提交过入驻申请，请等待审核'); return; }
    merchantApplied=true;
    $('#merchantSubmit').textContent='已提交，等待平台审核';
    $('#merchantSubmit').disabled=true;
    toast('入驻申请已提交，平台将在 1-3 个工作日内审核');
    setTimeout(()=>{ goTab('page-activity'); },1200);
  }

  /* ---------- 个人中心 ---------- */
  function renderMy(){
    $('#myNick').textContent=user.nick;
    $('#myPhone').textContent=user.phone+' · 会员';
    for(const k in cntMap){ $('#cnt'+k.charAt(0).toUpperCase()+k.slice(1)).textContent=cntMap[k]; }
  }
  function goOrders(t){
    go('page-orders');
    setTimeout(()=>{
      const d=document.querySelector(`#odTab div[data-t="${t}"]`);
      if(d) d.click();
    },30);
  }

  /* ---------- 我的订单 ---------- */
  function renderOrders(t){
    t=t||'all';
    const map={all:orders,pay:orders.filter(o=>o.st==='待付款'),send:orders.filter(o=>o.st==='待发货'),go:orders.filter(o=>o.st==='配送中'),done:orders.filter(o=>o.st==='已完成'),after:orders.filter(o=>o.st==='退款/售后')};
    const list=map[t]||[];
    $('#orderList').innerHTML = list.length ? list.map((o,i)=>{
      const itemsHtml=o.items.map(it=>{
        const p=products[it.pid];
        return `<div class="order-item">
          <div class="pimg" style="background:${p.bg}">${p.emoji}</div>
          <div><div class="nm">${p.name}</div><div class="sp">${p.cat==='veg'?'🥬 蔬菜':'🧃 饮料'}</div></div>
          <div class="pr"><span class="p">¥${p.price.toFixed(2)}</span><div class="q">x${it.qty}</div></div>
        </div>`;
      }).join('');
      return `<div class="card order-card">
        <div class="order-top"><span class="id">${o.id}</span><span class="st ${o.cls}">${o.st}</span></div>
        ${itemsHtml}
        <div class="od-time">🕐 ${o.time} · 配送至 ${getAddrName(o)}</div>
        <div class="order-foot">
          <span>共 ${o.items.reduce((s,x)=>s+x.qty,0)} 件 · 实付 <b class="p">¥${o.total.toFixed(2)}</b></span>
          ${o.st==='待付款'?`<button class="btn ghost" onclick="toast('示例：订单已取消')">取消订单</button><button class="btn" onclick="toast('示例：跳转收银台支付 ¥${o.total.toFixed(2)}')">去支付</button>`:''}
          ${o.st==='待发货'?`<button class="btn ghost" onclick="toast('示例：申请修改配送时间/地址')">修改配送</button><button class="btn" onclick="toast('示例：联系客服催单')">催单</button>`:''}
          ${o.st==='配送中'?`<button class="btn ghost" onclick="toast('示例：联系骑手 ${o.id.slice(-4)}')">联系骑手</button><button class="btn" onclick="toast('示例：确认收货成功')">确认收货</button>`:''}
          ${o.st==='已完成'?`<button class="btn ghost" onclick="toast('示例：再次购买')">再来一单</button><button class="btn" onclick="toast('示例：评价有礼')">评价</button>`:''}
          ${o.st==='退款/售后'?`<button class="btn ghost" onclick="toast('示例：查看退款进度')">退款进度</button>`:''}
        </div>
      </div>`;
    }).join('') : `<div class="empty"><div class="big">📦</div><p>暂无相关订单</p></div>`;
  }
  function getAddrName(o){
    const a=addrData.find(x=>x.id===1);
    return a?a.region+' '+a.addr:'';
  }
  document.getElementById('odTab').addEventListener('click',e=>{
    const d=e.target.closest('div[data-t]'); if(!d) return;
    document.querySelectorAll('#odTab div').forEach(x=>x.classList.remove('on'));
    d.classList.add('on'); renderOrders(d.dataset.t);
  });

  /* ---------- 收货地址 ---------- */
  function renderAddrList(){
    $('#addrList').innerHTML = addrData.map(a=>`
      <div class="addr-item card" onclick="addrPick(${a.id})">
        <div class="ck ${a.def?'on':''}"></div>
        <div style="flex:1">
          <div class="an">${a.name}<span class="ap">${a.phone}</span>${a.tag?'<span class="addr-tag">'+a.tag+'</span>':''}${a.def?'<span class="addr-tag">默认</span>':''}</div>
          <div class="ad">${a.region} ${a.addr}</div>
        </div>
        <div class="aops">
          <span onclick="event.stopPropagation();addrPick(${a.id});">${addrPickMode?'选择':'设为默认'}</span>
          <span onclick="event.stopPropagation();editAddr(${a.id})">✏️ 编辑</span>
          <span onclick="event.stopPropagation();delAddr(${a.id})">🗑 删除</span>
        </div>
      </div>`).join('');
    $('#addrPickTip').style.display = addrPickMode?'block':'none';
  }
  function addrPick(id){
    if(addrPickMode){
      currentAddrId=id;
      addrPickMode=false;
      renderOrder();
      back();
      toast('已切换配送地址');
    } else {
      addrData.forEach(x=>x.def=x.id===id);
      renderAddrList();
      toast('已设为默认地址');
    }
  }
  function editAddr(id){
    const a=addrData.find(x=>x.id===id); if(!a) return;
    editingAddrId=id;
    $('#aeTitle').textContent='编辑地址';
    $('#aeName').value=a.name; $('#aePhone').value=a.phone;
    $('#aeRegion').textContent=a.region+' ›';
    $('#aeDetail').value=a.addr;
    document.querySelectorAll('#aeTags span').forEach(x=>x.classList.toggle('on',x.dataset.t===a.tag));
    $('#aeDef').classList.toggle('on',a.def);
    go('page-addr-edit');
  }
  function delAddr(id){
    const i=addrData.findIndex(x=>x.id===id); if(i<0) return;
    addrData.splice(i,1);
    if(currentAddrId===id) currentAddrId=addrData.length?addrData[0].id:0;
    renderAddrList(); toast('已删除该地址');
  }
  function goAddrEdit(){
    editingAddrId=null;
    $('#aeTitle').textContent='新增地址';
    $('#aeName').value=''; $('#aePhone').value='';
    $('#aeRegion').textContent='浙江省 杭州市 西湖区 ›';
    $('#aeDetail').value='';
    document.querySelectorAll('#aeTags span').forEach(x=>x.classList.remove('on'));
    $('#aeDef').classList.remove('on');
    go('page-addr-edit');
  }
  document.getElementById('aeTags').addEventListener('click',e=>{
    const s=e.target.closest('span'); if(!s) return;
    document.querySelectorAll('#aeTags span').forEach(x=>x.classList.remove('on'));
    s.classList.add('on');
  });
  function saveAddr(){
    const name=$('#aeName').value.trim(), phone=$('#aePhone').value.trim(), detail=$('#aeDetail').value.trim();
    if(!name||!phone||!detail){ toast('请完整填写收货人/手机号/详细地址'); return; }
    const tag=document.querySelector('#aeTags span.on')?.dataset.t||'家';
    const isDef=$('#aeDef').classList.contains('on');
    if(editingAddrId){
      const a=addrData.find(x=>x.id===editingAddrId);
      Object.assign(a,{name,phone,detail,addr:detail,tag});
      if(isDef){ addrData.forEach(x=>x.def=(x.id===editingAddrId)); }
      toast('地址已保存');
    } else {
      const newId=Math.max(...addrData.map(x=>x.id),0)+1;
      addrData.push({id:newId,name,phone,region:'浙江省 杭州市 西湖区',addr:detail,tag,def:isDef});
      if(isDef) addrData.forEach(x=>x.def=(x.id===newId));
      if(!addrData.some(x=>x.def)) addrData[0].def=true;
      toast('地址已新增');
    }
    back(); renderAddrList();
  }
  function addrExit(){ addrPickMode=false; back(); }

  /* ---------- 编辑资料 ---------- */
  function fillProfile(){
    $('#pfNick').value=user.nick;
    $('#pfPhone').value=user.phone.replace(/\*/g,'0');
    $('#pfBirth').value=user.birth;
    $('#sexF').classList.toggle('on',user.sex==='女');
    $('#sexM').classList.toggle('on',user.sex==='男');
  }
  function selSex(s){
    user.sex=s;
    $('#sexF').classList.toggle('on',s==='女');
    $('#sexM').classList.toggle('on',s==='男');
  }
  function saveProfile(){
    const nick=$('#pfNick').value.trim();
    if(!nick){ toast('昵称不能为空'); return; }
    user.nick=nick;
    user.birth=$('#pfBirth').value;
    toast('资料已保存');
    back();
    renderMy();
  }

  /* ---------- 客服 ---------- */
  const faqData=[
    {q:'订单可以修改配送时间吗？',a:'可以。在「确认订单」页点击配送时间即可重新选择；已下单未发货的订单，可在「我的订单」中申请修改配送时间或配送地址。'},
    {q:'蔬菜和饮料怎么保证新鲜？',a:'蔬菜每日清晨产地直采，饮料均为正规品牌供货，全程冷链配送，同城最快 30 分钟送达。'},
    {q:'运费如何计算？',a:'同城配送满 29 元免运费，未满 29 元收取 5 元配送费。'},
    {q:'如何申请退款？',a:'未发货订单可随时申请退款；已收货订单如遇商品破损、品质问题，可在订单详情发起售后申请，1 个工作日内处理。'},
    {q:'商家如何入驻？',a:'进入「活动中心-商家入驻」，填写门店信息并上传营业执照等材料，平台 1-3 个工作日内审核并联系您。'}
  ];
  function renderFaq(){
    $('#faqList').innerHTML = `<div style="padding:12px 14px;font-size:13px;font-weight:700;color:var(--text);border-bottom:1px solid var(--line)">常见问题</div>` + faqData.map((f,i)=>`
      <div class="faq" onclick="toggleFaq(${i})">
        <div class="faq-q"><span>Q${i+1}</span>${f.q}<b>▾</b></div>
        <div class="faq-a-body" id="faqBody${i}">${f.a}</div>
      </div>`).join('');
  }
  function toggleFaq(i){
    const body=document.getElementById('faqBody'+i);
    const open=body.style.display==='block';
    document.querySelectorAll('.faq-a-body').forEach(x=>x.style.display='none');
    if(!open) body.style.display='block';
  }

  /* ---------- init ---------- */
  renderBanner();
  renderHome();
  renderCart();
  renderAddrBox();
  renderAct();
  renderMy();
  renderOrders('all');
  renderAddrList();
  renderFaq();
  updateBadge();
</script>
</body>
</html>