编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>电动车换电柜小程序</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5;color:#333;max-width:430px;margin:0 auto;min-height:100vh;position:relative}
.page{position:absolute;top:0;left:0;right:0;bottom:65px;background:#f5f5f5;overflow-y:auto;display:none;z-index:1}
.page.active{display:block}
.page-header{background:linear-gradient(135deg,#00b578,#00897b);color:#fff;padding:45px 16px 16px;position:sticky;top:0;z-index:10}
.page-header .back{position:absolute;left:12px;top:42px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;background:rgba(255,255,255,0.2);font-size:18px;line-height:1;border:none}
.page-header h2{font-size:18px;text-align:center}
.card{background:#fff;border-radius:12px;padding:16px;margin:12px 16px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.card-title{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card-title .icon{width:26px;height:26px;background:#e8f5f0;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px}
.sub-item{display:flex;align-items:center;padding:13px 16px;background:#fff;border-radius:10px;margin:6px 16px}
.sub-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-right:12px;font-size:18px;flex-shrink:0}
.info{flex:1;min-width:0}
.info h4{font-size:14px;color:#333;font-weight:500}
.info p{font-size:11px;color:#999;margin-top:2px}
.arrow{color:#ccc;font-size:18px;margin-left:8px}
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:65px;background:#fff;display:flex;box-shadow:0 -1px 8px rgba(0,0,0,0.08);z-index:100}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#999;font-size:10px}
.tab-item.active{color:#00b578}
.tab-icon{font-size:22px;margin-bottom:2px}
.badge{background:#f44336;color:#fff;font-size:10px;padding:2px 5px;border-radius:8px}
.header-bg{background:linear-gradient(135deg,#00b578,#00897b);color:#fff;padding:18px 16px 55px;text-align:center}
.header-bg h1{font-size:20px;font-weight:600}
.header-bg p{font-size:11px;opacity:0.9;margin-top:4px}
.module-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:-35px 16px 0;position:relative;z-index:2}
.module-item{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:12px;padding:14px 6px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.module-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:6px}
.module-item span{font-size:11px;color:#666}
.green .module-icon{background:linear-gradient(135deg,#4caf50,#2e7d32)}
.blue .module-icon{background:linear-gradient(135deg,#2196f3,#1565c0)}
.orange .module-icon{background:linear-gradient(135deg,#ff9800,#ef6c00)}
.purple .module-icon{background:linear-gradient(135deg,#9c27b0,#7b1fa2)}
.red .module-icon{background:linear-gradient(135deg,#f44336,#c62828)}
.teal .module-icon{background:linear-gradient(135deg,#009688,#00695c)}
.pink .module-icon{background:linear-gradient(135deg,#e91e63,#ad1457)}
.cabinet-item{display:flex;align-items:center;padding:12px 14px;background:#fff;border-radius:10px;margin:6px 0}
.cabinet-icon{width:44px;height:44px;background:#e8f5f0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-right:12px}
.cabinet-info{flex:1}
.cabinet-info h4{font-size:13px;color:#333}
.cabinet-info p{font-size:10px;color:#999;margin-top:2px}
.battery-count{font-size:18px;font-weight:700;color:#4caf50;text-align:right}
.battery-label{font-size:9px;color:#999;text-align:right}
.map-placeholder{height:140px;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1976d2;margin-bottom:6px}
.map-icon{font-size:36px;margin-bottom:6px}
.map-placeholder p{font-size:11px}
.wallet-card{background:linear-gradient(135deg,#00b578,#00897b);border-radius:14px;padding:18px;color:#fff;margin:12px 16px}
.balance{font-size:32px;font-weight:700;margin:6px 0}
.label{font-size:11px;opacity:0.9}
.wallet-actions{display:flex;gap:10px;margin-top:14px}
.wallet-btn{flex:1;padding:10px;background:rgba(255,255,255,0.2);border:none;border-radius:8px;color:#fff;font-size:13px}
.order-card{background:#fff;border-radius:12px;padding:13px;margin:6px 16px}
.order-header{display:flex;justify-content:space-between;margin-bottom:8px}
.order-type{font-size:13px;color:#333;font-weight:500}
.order-status{font-size:11px;color:#00b578}
.order-detail{font-size:11px;color:#666;line-height:1.5}
.order-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid #f0f0f0}
.order-time{font-size:10px;color:#999}
.order-price{color:#00b578;font-weight:600;font-size:14px}
.battery-display{display:flex;align-items:center;padding:14px;background:#fff;border-radius:12px;margin:12px 16px}
.battery-large{font-size:48px;margin-right:14px}
.battery-info{flex:1}
.battery-info h4{font-size:15px;color:#333}
.battery-info p{font-size:11px;color:#999;margin-top:3px}
.battery-pct{font-size:28px;font-weight:700;color:#4caf50}
.package-card{background:#fff;border-radius:12px;padding:14px;margin:6px 16px}
.package-header{display:flex;justify-content:space-between;align-items:center}
.package-name{font-size:14px;font-weight:500;color:#333}
.package-price{font-size:16px;font-weight:700;color:#00b578}
.package-desc{font-size:11px;color:#999;margin-top:5px}
.package-tag{display:inline-block;padding:2px 7px;background:#fff3e0;color:#ff9800;font-size:10px;border-radius:4px;margin-top:5px}
.coupon-card{display:flex;align-items:center;padding:12px;background:#fff;border-radius:10px;margin:6px 0}
.coupon-icon{width:40px;height:40px;background:#f44336;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:12px;flex-shrink:0}
.coupon-info{flex:1}
.coupon-info h4{font-size:13px;color:#333}
.coupon-info p{font-size:10px;color:#999;margin-top:2px}
.coupon-btn{padding:6px 12px;background:#f44336;color:#fff;border:none;border-radius:12px;font-size:11px;flex-shrink:0}
.profile-header{text-align:center;padding:28px 16px;background:linear-gradient(135deg,#00b578,#00897b);color:#fff;border-radius:0 0 28px 28px;margin-bottom:10px}
.profile-avatar{width:70px;height:70px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 10px}
.profile-name{font-size:18px;font-weight:600}
.profile-level{display:inline-block;padding:3px 12px;background:rgba(255,255,255,0.2);border-radius:10px;font-size:11px;margin-top:5px}
.list-card{background:#fff;border-radius:12px;margin:12px 16px;overflow:hidden}
.list-item{display:flex;align-items:center;padding:14px;border-bottom:1px solid #f5f5f5}
.list-item:last-child{border-bottom:none}
.list-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-right:12px;font-size:17px;flex-shrink:0}
.list-text{flex:1}
.list-text h4{font-size:14px;color:#333}
.list-text p{font-size:11px;color:#999;margin-top:2px}
.list-arrow{color:#ccc;font-size:16px}
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:#fff;padding:12px 24px;border-radius:8px;font-size:13px;z-index:1000;display:none;pointer-events:none}
.search-bar{display:flex;gap:8px;padding:0 16px;margin:12px 0}
.search-bar input{flex:1;padding:10px 14px;border:1px solid #e0e0e0;border-radius:20px;font-size:13px;background:#fff}
.search-bar button{padding:10px 16px;background:#00b578;color:#fff;border:none;border-radius:20px;font-size:12px}
.scan-box{text-align:center;padding:35px 20px;background:#fff;border-radius:14px;margin:12px 16px}
.scan-frame{width:180px;height:180px;border:3px dashed #00b578;border-radius:14px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:50px;background:#f5f5f5}
.clickable{cursor:pointer}
.clickable:active{opacity:0.8}
</style>
</head>
<body>

<!-- 首页 -->
<div id="home" class="page active">
  <div class="header-bg">
    <h1>电动车换电柜</h1>
    <p>满电出行，畅行无忧</p>
  </div>
  
  <div class="module-grid">
    <div class="module-item green clickable" data-page="scan-page">
      <div class="module-icon">📷</div>
      <span>扫码换电</span>
    </div>
    <div class="module-item blue clickable" data-page="battery-page">
      <div class="module-icon">🔋</div>
      <span>当前电池</span>
    </div>
    <div class="module-item orange clickable" data-page="orders-page">
      <div class="module-icon">📋</div>
      <span>订单记录</span>
    </div>
    <div class="module-item purple clickable" data-page="package-page">
      <div class="module-icon">💎</div>
      <span>套餐购买</span>
    </div>
  </div>
  
  <div class="card">
    <div class="card-title"><span class="icon">🗺️</span>附近换电柜</div>
    <div class="map-placeholder">
      <div class="map-icon">📍</div>
      <p>点击下方列表查看详情</p>
    </div>
    <div class="cabinet-item clickable" data-page="cabinet-detail">
      <div class="cabinet-icon">🗄️</div>
      <div class="cabinet-info"><h4>星巴克前柜</h4><p>120m · 24小时营业</p></div>
      <div><div class="battery-count">8</div><div class="battery-label">可用</div></div>
    </div>
    <div class="cabinet-item clickable" data-page="cabinet-detail">
      <div class="cabinet-icon">🗄️</div>
      <div class="cabinet-info"><h4>小区北门柜</h4><p>350m</p></div>
      <div><div class="battery-count">5</div><div class="battery-label">可用</div></div>
    </div>
    <div class="cabinet-item clickable" data-page="cabinet-detail">
      <div class="cabinet-icon">🗄️</div>
      <div class="cabinet-info"><h4>商场地下柜</h4><p>500m</p></div>
      <div><div class="battery-count">12</div><div class="battery-label">可用</div></div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-title"><span class="icon">💰</span>我的账户</div>
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <p style="font-size:11px;color:#999">账户余额</p>
        <p style="font-size:26px;font-weight:700;color:#00b578;margin-top:3px">¥128.50</p>
      </div>
      <div class="wallet-btn clickable" data-page="account-detail" style="padding:8px 18px">充值</div>
    </div>
  </div>
</div>

<!-- 换电柜详情 -->
<div id="cabinet-detail" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>换电柜详情</h2>
  </div>
  <div class="card">
    <div style="display:flex;align-items:center;margin-bottom:14px">
      <div style="font-size:44px;margin-right:14px">🗄️</div>
      <div>
        <h3 style="font-size:16px;color:#333">星巴克前换电柜</h3>
        <p style="font-size:11px;color:#999;margin-top:3px">朝阳区建国路88号</p>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center">
      <div style="padding:12px;background:#f5f5f5;border-radius:8px"><div style="font-size:22px;font-weight:700;color:#4caf50">8</div><div style="font-size:10px;color:#999;margin-top:3px">可用电池</div></div>
      <div style="padding:12px;background:#f5f5f5;border-radius:8px"><div style="font-size:22px;font-weight:700;color:#ff9800">85%</div><div style="font-size:10px;color:#999;margin-top:3px">柜电量</div></div>
      <div style="padding:12px;background:#f5f5f5;border-radius:8px"><div style="font-size:22px;font-weight:700;color:#2196f3">24h</div><div style="font-size:10px;color:#999;margin-top:3px">营业</div></div>
    </div>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="正在导航...">
    <div class="sub-icon" style="background:#4caf50">🗺️</div>
    <div class="info"><h4>一键导航</h4><p>导航到换电柜位置</p></div>
  </div>
  <div class="sub-item clickable" data-page="scan-page">
    <div class="sub-icon" style="background:#2196f3">📷</div>
    <div class="info"><h4>扫码换电</h4><p>扫描柜体二维码开始换电</p></div>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="已提交故障反馈">
    <div class="sub-icon" style="background:#ff9800">⚠️</div>
    <div class="info"><h4>异常反馈</h4><p>电池/柜门异常反馈</p></div>
  </div>
</div>

<!-- 扫码换电 -->
<div id="scan-page" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>扫码换电</h2>
  </div>
  <div class="scan-box">
    <div class="scan-frame">📷</div>
    <p style="color:#666;font-size:13px">请扫描换电柜上的二维码</p>
    <p style="color:#999;font-size:11px;margin-top:5px">或将电池放入空槽位</p>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="电池借出成功">
    <div class="sub-icon" style="background:#4caf50">⬆️</div>
    <div class="info"><h4>电池借出</h4><p>取出满电电池</p></div>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="电池已归还">
    <div class="sub-icon" style="background:#ff9800">⬇️</div>
    <div class="info"><h4>电池归还</h4><p>归还旧电池</p></div>
  </div>
<div class="sub-item clickable" data-action="toast" data-msg="扣费成功：¥3.00">
    <div class="sub-icon" style="background:#2196f3">💰</div>
    <div class="info"><h4>自动扣费</h4><p>根据套餐或按次扣费</p></div>
  </div>
  <div class="sub-item clickable" data-page="orders-detail">
    <div class="sub-icon" style="background:#9c27b0">📋</div>
    <div class="info"><h4>换电记录</h4><p>查看换电历史</p></div>
  </div>
  <div class="sub-item clickable" data-page="abnormal-page">
    <div class="sub-icon" style="background:#f44336">⚠️</div>
    <div class="info"><h4>异常处理</h4><p>电池/柜门异常反馈</p></div>
  </div>
</div>

<!-- 当前电池 -->
<div id="battery-page" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>当前电池</h2>
  </div>
  <div class="battery-display">
    <div class="battery-large">🔋</div>
    <div class="battery-info">
      <h4>当前使用中电池</h4>
      <p>电池编号：EB2024001234</p>
    </div>
    <div class="battery-pct">78%</div>
  </div>
  <div class="card">
    <div style="padding:10px;background:#f5f5f5;border-radius:8px">
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">预估续航</span><span style="font-size:12px;color:#333">约35km</span></div>
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">电池健康</span><span style="font-size:12px;color:#4caf50">优秀</span></div>
      <div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:#666">使用时长</span><span style="font-size:12px;color:#333">15天</span></div>
    </div>
  </div>
  <div class="sub-item clickable" data-page="battery-location">
    <div class="sub-icon" style="background:#2196f3">📍</div>
    <div class="info"><h4>电池定位</h4><p>查看电池当前位置</p></div>
  </div>
  <div class="sub-item clickable" data-page="battery-bind">
    <div class="sub-icon" style="background:#9c27b0">🔗</div>
    <div class="info"><h4>电池绑定</h4><p>绑定专属电池</p></div>
  </div>
</div>

<!-- 电池定位 -->
<div id="battery-location" class="page">
  <div class="page-header">
    <button class="back" data-page="battery-page">←</button>
    <h2>电池定位</h2>
  </div>
  <div class="map-placeholder" style="height:250px;margin:12px 16px">
    <div class="map-icon">📍</div>
    <p>电池当前位置</p>
  </div>
  <div class="card">
    <div style="display:flex;align-items:center">
      <div style="font-size:36px;margin-right:12px">🔋</div>
      <div>
        <h4 style="font-size:14px;color:#333">EB2024001234</h4>
        <p style="font-size:11px;color:#999;margin-top:3px">朝阳区建国路88号星巴克前</p>
        <p style="font-size:10px;color:#00b578;margin-top:3px">最后更新：2分钟前</p>
      </div>
    </div>
  </div>
</div>

<!-- 电池绑定 -->
<div id="battery-bind" class="page">
  <div class="page-header">
    <button class="back" data-page="battery-page">←</button>
    <h2>电池绑定</h2>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🔗</span>绑定专属电池</div>
    <p style="font-size:12px;color:#666;line-height:1.5">绑定后您的电池将享受专属服务，每次换电优先获取绑定电池</p>
  </div>
  <div class="sub-item" style="background:#f0f9f4">
    <div class="sub-icon" style="background:#4caf50">🔋</div>
    <div class="info"><h4>EB2024001234</h4><p>已绑定 · 绑定时间：2024-03-01</p></div>
    <span style="font-size:11px;color:#4caf50">已绑定</span>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="请扫描电池二维码">
    <div class="sub-icon" style="background:#2196f3">➕</div>
    <div class="info"><h4>添加绑定</h4><p>扫描电池二维码绑定新电池</p></div>
  </div>
</div>

<!-- 订单记录 -->
<div id="orders-page" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>订单记录</h2>
  </div>
  <div style="display:flex;gap:8px;padding:0 16px;margin-bottom:10px">
    <div class="filter-chip active">全部</div>
    <div class="filter-chip">换电订单</div>
    <div class="filter-chip">充值订单</div>
    <div class="filter-chip">套餐订单</div>
  </div>
  <div class="order-card">
    <div class="order-header"><span class="order-type">🪫 换电订单</span><span class="order-status">已完成</span></div>
    <div class="order-detail">星巴克前换电柜 · 满电电池 × 1</div>
    <div class="order-footer"><span class="order-time">2024-03-15 14:30</span><span class="order-price">¥3.00</span></div>
  </div>
  <div class="order-card">
    <div class="order-header"><span class="order-type">💳 套餐订单</span><span class="order-status">已完成</span></div>
    <div class="order-detail">月卡套餐 · 30天有效</div>
    <div class="order-footer"><span class="order-time">2024-03-10 09:15</span><span class="order-price">¥99.00</span></div>
  </div>
  <div class="order-card">
    <div class="order-header"><span class="order-type">💰 充值订单</span><span class="order-status">已完成</span></div>
    <div class="order-detail">账户充值 · 赠送 ¥20</div>
    <div class="order-footer"><span class="order-time">2024-03-10 09:10</span><span class="order-price">¥100.00</span></div>
  </div>
  <div class="sub-item clickable" data-page="invoice-page">
    <div class="sub-icon" style="background:#f44336">🧾</div>
    <div class="info"><h4>发票申请</h4><p>申请开具发票</p></div>
  </div>
</div>

<!-- 订单详情 -->
<div id="orders-detail" class="page">
  <div class="page-header">
    <button class="back" data-page="scan-page">←</button>
    <h2>换电记录</h2>
  </div>
  <div class="order-card" style="margin-top:12px">
    <div style="display:flex;align-items:center;margin-bottom:12px">
      <span style="font-size:26px;margin-right:12px">🔋</span>
      <div><h4 style="font-size:15px;color:#333">换电完成</h4><p style="font-size:11px;color:#999;margin-top:2px">2024-03-15 14:30</p></div>
    </div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px">
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">换电柜</span><span style="font-size:12px;color:#333">星巴克前换电柜</span></div>
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">借出电池</span><span style="font-size:12px;color:#333">EB2024001234</span></div>
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">归还电池</span><span style="font-size:12px;color:#333">EB2024000567</span></div>
      <div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:#666">扣费金额</span><span style="font-size:12px;color:#00b578;font-weight:600">¥3.00</span></div>
    </div>
  </div>
</div>

<!-- 发票申请 -->
<div id="invoice-page" class="page">
  <div class="page-header">
    <button class="back" data-page="orders-page">←</button>
    <h2>发票申请</h2>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🧾</span>发票信息</div>
    <div style="display:flex;justify-content:space-between;align-items:center;border:none;padding:0">
      <div><h4 style="font-size:13px;color:#333">电子发票</h4><p style="font-size:11px;color:#999">发送到邮箱</p></div>
      <span style="font-size:11px;color:#00b578">已开票：3张</span>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">📋</span>可申请发票订单</div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center">
      <div><h4 style="font-size:13px;color:#333">月卡套餐</h4><p style="font-size:11px;color:#999">¥99.00 · 2024-03-10</p></div>
      <div class="wallet-btn clickable" data-action="toast" data-msg="已提交开票申请" style="padding:6px 12px;font-size:11px">申请</div>
    </div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px;display:flex;justify-content:space-between;align-items:center">
      <div><h4 style="font-size:13px;color:#333">账户充值</h4><p style="font-size:11px;color:#999">¥100.00 · 2024-03-10</p></div>
      <div class="wallet-btn clickable" data-action="toast" data-msg="已提交开票申请" style="padding:6px 12px;font-size:11px">申请</div>
    </div>
  </div>
</div>

<!-- 套餐购买 -->
<div id="package-page" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>套餐购买</h2>
  </div>
  <div class="wallet-card">
    <div class="label">当前套餐</div>
    <div style="font-size:18px;font-weight:600;margin-top:5px">黄金会员</div>
    <p style="font-size:11px;opacity:0.8;margin-top:3px">有效期至 2024-12-31</p>
  </div>
  <div class="package-card clickable" data-page="package-month">
    <div class="package-header"><span class="package-name">月卡套餐</span><span class="package-price">¥99/月</span></div>
    <p class="package-desc">每天无限次换电，每月最多60次</p>
    <span class="package-tag">热门推荐</span>
  </div>
  <div class="package-card clickable" data-page="package-season">
    <div class="package-header"><span class="package-name">季卡套餐</span><span class="package-price">¥269/季</span></div>
    <p class="package-desc">每天无限次换电，每月最多60次</p>
    <span class="package-tag">省 ¥28</span>
  </div>
  <div class="package-card clickable" data-page="package-year">
    <div class="package-header"><span class="package-name">年卡套餐</span><span class="package-price">¥999/年</span></div>
    <p class="package-desc">每天无限次换电，每月最多60次</p>
    <span class="package-tag">省 ¥189</span>
  </div>
</div>

<!-- 套餐续费 -->
<div id="package-renew" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>套餐续费</h2>
  </div>
  <div class="wallet-card">
    <div class="label">当前套餐</div>
    <div style="font-size:18px;font-weight:600;margin-top:5px">黄金会员 · 月卡</div>
    <p style="font-size:11px;opacity:0.8;margin-top:3px">2024-03-10 到期</p>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🔄</span>续费方式</div>
    <div class="sub-item" style="background:#e8f5f4">
      <div class="sub-icon" style="background:#4caf50">📅</div>
      <div class="info"><h4>自动续费</h4><p>到期自动续费，避免中断</p></div>
      <span style="font-size:11px;color:#4caf50">已开启</span>
    </div>
    <div class="sub-item clickable" data-action="toast" data-msg="续费成功">
      <div class="sub-icon" style="background:#2196f3">💳</div>
      <div class="info"><h4>立即续费</h4><p>手动续费一个月</p></div>
    </div>
  </div>
</div>

<!-- 套餐升级 -->
<div id="package-upgrade" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>套餐升级</h2>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">⬆️</span>当前等级：黄金会员</div>
    <p style="font-size:12px;color:#666;line-height:1.5">升级后可享受更多权益，每月换电次数无限制</p>
  </div>
  <div class="package-card" style="border-color:#00b578;background:#f8fff8">
    <div class="package-header"><span class="package-name">钻石会员</span><span class="package-price">¥299/月</span></div>
    <p class="package-desc">无限次换电 · 专属客服 · 优先借电 · 免费上门维修</p>
    <span class="package-tag" style="background:#e8f5e9;color:#4caf50">限时优惠</span>
  </div>
  <div class="package-card">
    <div class="package-header"><span class="package-name">铂金会员</span><span class="package-price">¥199/月</span></div>
    <p class="package-desc">每天无限次换电 · 优先借电 · 专属客服</p>
  </div>
  <div style="padding:12px 16px">
    <button class="wallet-btn clickable" data-action="toast" data-msg="升级成功" style="width:100%;background:#00b578;font-size:14px;padding:12px">立即升级</button>
  </div>
</div>

<!-- 套餐转让 -->
<div id="package-transfer" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>套餐转让</h2>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🎁</span>转让套餐</div>
    <p style="font-size:12px;color:#666;line-height:1.5;margin-bottom:14px">将当前套餐转让给其他用户，转让后您将无法使用该套餐</p>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">📱</span>受让用户</div>
    <div class="search-bar" style="padding:0">
      <input type="text" placeholder="输入手机号或扫码">
      <button>搜索</button>
    </div>
    <div class="sub-item" style="margin-top:12px">
      <div class="sub-icon" style="background:#2196f3">👤</div>
      <div class="info"><h4>李四</h4><p>138****8888</p></div>
      <div class="wallet-btn clickable" data-action="toast" data-msg="转让成功" style="padding:6px 14px;font-size:11px">确认</div>
    </div>
  </div>
</div>

<!-- 套餐查询 -->
<div id="package-query" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>套餐查询</h2>
  </div>
  <div class="wallet-card">
    <div class="label">当前套餐</div>
    <div style="font-size:22px;font-weight:700;margin-top:6px">黄金会员</div>
    <div style="margin-top:14px;opacity:0.9">
      <div style="display:flex;justify-content:space-between"><span>开通时间</span><span>2024-01-01</span></div>
      <div style="display:flex;justify-content:space-between;margin-top:6px"><span>到期时间</span><span>2024-12-31</span></div>
      <div style="display:flex;justify-content:space-between;margin-top:6px"><span>剩余天数</span><span>287天</span></div>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">📊</span>套餐使用情况</div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px">
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">本月已换电</span><span style="font-size:12px;color:#333">12次</span></div>
      <div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:#666">本月剩余次数</span><span style="font-size:12px;color:#4caf50">48次</span></div>
    </div>
  </div>
</div>

<!-- 会员权益 -->
<div id="member-rights" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>会员权益</h2>
  </div>
  <div class="wallet-card">
    <div class="label">黄金会员专属权益</div>
  </div>
  <div class="list-card">
    <div class="list-item"><div class="list-icon" style="background:#4caf50">🔄</div><div class="list-text"><h4>无限次换电</h4><p>每天最多60次换电</p></div></div>
    <div class="list-item"><div class="list-icon" style="background:#2196f3">⏰</div><div class="list-text"><h4>优先借电</h4><p>优先使用满电电池</p></div></div>
    <div class="list-item"><div class="list-icon" style="background:#ff9800">💰</div><div class="list-text"><h4>专属折扣</h4><p>换电享9折优惠</p></div></div>
    <div class="list-item"><div class="list-icon" style="background:#9c27b0">🎧</div><div class="list-text"><h4>专属客服</h4><p>24小时专属客服服务</p></div></div>
  </div>
</div>

<!-- 会员等级 -->
<div id="member-level" class="page">
  <div class="page-header">
    <button class="back" data-page="package-page">←</button>
    <h2>会员等级</h2>
  </div>
  <div class="wallet-card">
    <div class="label">当前等级</div>
    <div style="font-size:26px;font-weight:700;margin-top:6px">🏆 黄金会员</div>
    <div style="margin-top:14px;opacity:0.9">
      <div style="display:flex;justify-content:space-between"><span>成长值</span><span>850/1000</span></div>
      <div style="height:5px;background:rgba(255,255,255,0.3);border-radius:3px;margin-top:6px"><div style="width:85%;height:100%;background:#fff;border-radius:3px"></div></div>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🏆</span>等级说明</div>
    <div class="sub-item" style="background:#f5f5f5"><div style="width:34px;height:34px;border-radius:50%;background:#cd7f32;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-right:12px">🥉</div><div class="info"><h4>青铜会员</h4><p>0-200成长值</p></div></div>
    <div class="sub-item" style="background:#f5f5f5"><div style="width:34px;height:34px;border-radius:50%;background:#c0c0c0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-right:12px">🥈</div><div class="info"><h4>白银会员</h4><p>200-500成长值</p></div></div>
    <div class="sub-item" style="background:#fff3e0"><div style="width:34px;height:34px;border-radius:50%;background:#ffd700;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-right:12px">🥇</div><div class="info"><h4>黄金会员</h4><p>500-1000成长值（当前）</p></div></div>
    <div class="sub-item" style="background:#f5f5f5"><div style="width:34px;height:34px;border-radius:50%;background:#b9f2f1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-right:12px">💎</div><div class="info"><h4>钻石会员</h4><p>1000+成长值</p></div></div>
  </div>
</div>

<!-- 账户详情 -->
<div id="account-detail" class="page">
  <div class="page-header">
    <button class="back" data-page="home">←</button>
    <h2>我的账户</h2>
  </div>
  <div class="wallet-card">
    <div class="label">账户余额</div>
    <div class="balance">¥128.50</div>
    <div class="wallet-actions">
      <div class="wallet-btn clickable" data-page="recharge-page">💰 充值</div>
      <div class="wallet-btn clickable" data-page="recharge-gift">🎁 充值赠送</div>
    </div>
  </div>
  <div class="sub-item clickable" data-page="consume-detail">
    <div class="sub-icon" style="background:#2196f3">📝</div>
    <div class="info"><h4>消费明细</h4><p>查看消费记录</p></div>
  </div>
  <div class="sub-item clickable" data-page="deposit-page">
    <div class="sub-icon" style="background:#ff9800">💵</div>
    <div class="info"><h4>押金管理</h4><p>缴纳/退还押金</p></div>
  </div>
</div>

<!-- 充值页面 -->
<div id="recharge-page" class="page">
  <div class="page-header">
    <button class="back" data-page="account-detail">←</button>
    <h2>账户充值</h2>
  </div>
  <div class="wallet-card">
    <div class="label">当前余额</div>
    <div class="balance">¥128.50</div>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">💰</span>选择充值金额</div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px">
      <div class="package-card clickable" data-action="select" data-amount="50" style="text-align:center;padding:12px">¥50</div>
      <div class="package-card clickable" data-action="select" data-amount="100" style="text-align:center;padding:12px">¥100</div>
      <div class="package-card clickable" data-action="select" data-amount="200" style="text-align:center;padding:12px">¥200</div>
      <div class="package-card clickable" data-action="select" data-amount="500" style="text-align:center;padding:12px">¥500</div>
      <div class="package-card clickable" data-action="select" data-amount="1000" style="text-align:center;padding:12px">¥1000</div>
      <div class="package-card clickable" data-action="toast" data-msg="请输入自定义金额" style="text-align:center;padding:12px">自定义</div>
    </div>
  </div>
  <div style="padding:12px 16px">
    <button class="wallet-btn clickable" data-action="toast" data-msg="充值成功" style="width:100%;background:#00b578;font-size:14px;padding:12px">立即充值</button>
  </div>
</div>

<!-- 充值赠送 -->
<div id="recharge-gift" class="page">
  <div class="page-header">
    <button class="back" data-page="account-detail">←</button>
    <h2>充值赠送</h2>
  </div>
  <div class="card" style="background:linear-gradient(135deg,#ff9800,#ff5722);color:#fff">
    <h3 style="font-size:16px;margin-bottom:6px">🎉 限时充赠活动</h3>
    <p style="font-size:12px;opacity:0.9">活动期间充值享受额外赠送</p>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🎁</span>充赠规则</div>
    <div class="sub-item" style="background:#e8f5e9"><div class="info"><h4>充50送5元</h4></div><span style="font-size:11px;color:#4caf50">+10%</span></div>
    <div class="sub-item" style="background:#e8f5e9"><div class="info"><h4>充100送15元</h4></div><span style="font-size:11px;color:#4caf50">+15%</span></div>
    <div class="sub-item" style="background:#e8f5e9"><div class="info"><h4>充200送40元</h4></div><span style="font-size:11px;color:#4caf50">+20%</span></div>
    <div class="sub-item" style="background:#fff3e0"><div class="info"><h4>充500送150元</h4></div><span style="font-size:11px;color:#ff9800">+30%</span></div>
  </div>
</div>

<!-- 消费明细 -->
<div id="consume-detail" class="page">
  <div class="page-header">
    <button class="back" data-page="account-detail">←</button>
    <h2>消费明细</h2>
  </div>
  <div class="order-card" style="margin-top:12px">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div><h4 style="font-size:13px;color:#333">换电消费</h4><p style="font-size:10px;color:#999;margin-top:2px">2024-03-15 14:30</p></div>
      <span style="font-size:14px;color:#f44336;font-weight:600">-¥3.00</span>
    </div>
  </div>
  <div class="order-card">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div><h4 style="font-size:13px;color:#333">套餐购买</h4><p style="font-size:10px;color:#999;margin-top:2px">2024-03-10 09:15</p></div>
      <span style="font-size:14px;color:#f44336;font-weight:600">-¥99.00</span>
    </div>
  </div>
  <div class="order-card">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div><h4 style="font-size:13px;color:#333">账户充值</h4><p style="font-size:10px;color:#999;margin-top:2px">2024-03-10 09:10</p></div>
      <span style="font-size:14px;color:#4caf50;font-weight:600">+¥100.00</span>
    </div>
  </div>
</div>

<!-- 押金管理 -->
<div id="deposit-page" class="page">
  <div class="page-header">
    <button class="back" data-page="account-detail">←</button>
    <h2>押金管理</h2>
  </div>
  <div class="wallet-card">
    <div class="label">已缴纳押金</div>
    <div class="balance">¥299.00</div>
    <p style="font-size:11px;opacity:0.8;margin-top:3px">缴纳时间：2024-01-01</p>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">💵</span>押金说明</div>
    <p style="font-size:12px;color:#666;line-height:1.5">押金用于电池保障，正常使用可随时退还。退还后如需再次使用需重新缴纳。</p>
  </div>
  <div style="padding:12px 16px">
    <button class="wallet-btn clickable" data-action="toast" data-msg="退款申请已提交" style="width:100%;background:#fff;color:#f44336;border:1px solid #f44336;font-size:14px;padding:12px">申请退还押金</button>
  </div>
</div>

<!-- 个人中心 -->
<div id="profile-page" class="page">
  <div class="profile-header">
    <div class="profile-avatar">👤</div>
    <div class="profile-name">张三</div>
    <div class="profile-level">🏆 黄金会员</div>
  </div>
  <div class="sub-item clickable" data-page="profile-info"><div class="sub-icon" style="background:#2196f3">👤</div><div class="info"><h4>个人信息</h4><p>查看/编辑个人信息</p></div></div>
  <div class="sub-item clickable" data-page="auth-page"><div class="sub-icon" style="background:#ff9800">📋</div><div class="info"><h4>实名认证</h4><p>外卖骑手需资质认证</p></div></div>
  <div class="sub-item clickable" data-page="vehicle-page"><div class="sub-icon" style="background:#9c27b0">🚲</div><div class="info"><h4>车辆管理</h4><p>绑定电动车信息</p></div></div>
  <div class="sub-item clickable" data-page="address-page"><div class="sub-icon" style="background:#4caf50">📍</div><div class="info"><h4>收货地址</h4><p>管理收货地址</p></div></div>
  <div class="sub-item clickable" data-page="message-page"><div class="sub-icon" style="background:#f44336">🔔</div><div class="info"><h4>消息通知</h4><p>查看系统/订单通知</p></div><span class="badge">3</span></div>
  <div class="sub-item clickable" data-page="service-page"><div class="sub-icon" style="background:#00b578">🎧</div><div class="info"><h4>客服中心</h4><p>联系客服</p></div></div>
  <div class="sub-item clickable" data-page="guide-page"><div class="sub-icon" style="background:#795548">📖</div><div class="info"><h4>使用指南</h4><p>换电柜使用教程</p></div></div>
  <div class="sub-item clickable" data-page="fault-page"><div class="sub-icon" style="background:#607d8b">⚠️</div><div class="info"><h4>故障上报</h4><p>上报换电柜故障</p></div></div>
  <div class="sub-item clickable" data-page="feedback-page"><div class="sub-icon" style="background:#3f51b5">💬</div><div class="info"><h4>意见反馈</h4><p>提交意见建议</p></div></div>
  <div class="sub-item clickable" data-page="about-page"><div class="sub-icon" style="background:#9e9e9e">ℹ️</div><div class="info"><h4>关于我们</h4><p>查看平台介绍</p></div></div>
  <div class="sub-item clickable" style="margin-bottom:10px" data-page="setting-page"><div class="sub-icon" style="background:#424242">⚙️</div><div class="info"><h4>设置</h4><p>账号/通知/隐私设置</p></div></div>
</div>

<!-- 个人信息 -->
<div id="profile-info" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>个人信息</h2></div>
  <div class="list-card" style="margin-top:12px">
    <div class="list-item"><div style="width:44px;height:44px;background:#00b578;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-right:12px">👤</div><div class="list-text"><h4>头像</h4></div></div>
    <div class="list-item"><div class="list-text"><h4>昵称</h4><p>张三</p></div><span class="list-arrow">›</span></div>
    <div class="list-item"><div class="list-text"><h4>手机号</h4><p>138****8888</p></div><span class="list-arrow">›</span></div>
  </div>
</div>

<!-- 实名认证 -->
<div id="auth-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>实名认证</h2></div>
  <div class="wallet-card"><div class="label">认证状态</div><div style="font-size:18px;font-weight:600;margin-top:6px">✅ 已认证</div><p style="font-size:11px;opacity:0.8;margin-top:3px">认证时间：2024-01-15</p></div>
  <div class="card">
    <div class="card-title"><span class="icon">📋</span>认证信息</div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px">
      <div style="display:flex;justify-content:space-between;margin-bottom:8px"><span style="font-size:12px;color:#666">姓名</span><span style="font-size:12px;color:#333">张*</span></div>
      <div style="display:flex;justify-content:space-between"><span style="font-size:12px;color:#666">身份证</span><span style="font-size:12px;color:#333">110***********1234</span></div>
    </div>
  </div>
  <div class="card">
    <div class="card-title"><span class="icon">🏍️</span>骑手资质</div>
    <p style="font-size:12px;color:#666;line-height:1.5">外卖骑手需上传相关资质证明方可使用换电服务</p>
    <div class="sub-item" style="margin-top:10px;background:#e8f5e9"><div class="sub-icon" style="background:#4caf50">✅</div><div class="info"><h4>健康证</h4><p>有效期至2025-06-30</p></div></div>
    <div class="sub-item" style="background:#e8f5e9"><div class="sub-icon" style="background:#4caf50">✅</div><div class="info"><h4>外卖平台认证</h4><p>美团、饿了么均已认证</p></div></div>
  </div>
</div>

<!-- 车辆管理 -->
<div id="vehicle-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>车辆管理</h2></div>
  <div class="sub-item" style="background:#e8f5e9"><div class="sub-icon" style="background:#4caf50">🚲</div><div class="info"><h4>雅迪 TDR2960Z</h4><p>绑定时间：2024-01-01 · 车辆牌照：京A12345</p></div><span style="font-size:11px;color:#4caf50">已绑定</span></div>
  <div class="sub-item clickable" data-action="toast" data-msg="请扫描车辆二维码"><div class="sub-icon" style="background:#2196f3">➕</div><div class="info"><h4>添加车辆</h4><p>扫描车辆二维码绑定</p></div></div>
</div>

<!-- 收货地址 -->
<div id="address-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>收货地址</h2></div>
  <div class="sub-item" style="background:#e8f5e9"><div class="sub-icon" style="background:#4caf50">🏠</div><div class="info"><h4>家</h4><p>朝阳区建国路88号1号楼1001</p></div><span style="font-size:10px;color:#00b578;margin-right:6px">默认</span></div>
  <div class="sub-item"><div class="sub-icon" style="background:#2196f3">🏢</div><div class="info"><h4>公司</h4><p>海淀区中关村大街1号20层</p></div></div>
  <div class="sub-item clickable" data-action="toast" data-msg="新增地址"><div class="sub-icon" style="background:#ff9800">➕</div><div class="info"><h4>新增地址</h4><p>添加新的收货地址</p></div></div>
</div>

<!-- 消息通知 -->
<div id="message-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>消息通知</h2></div>
  <div class="order-card" style="margin-top:12px">
    <div style="display:flex;align-items:center"><span style="font-size:22px;margin-right:10px">🔔</span><div style="flex:1"><h4 style="font-size:13px;color:#333">套餐即将到期</h4><p style="font-size:11px;color:#666;margin-top:3px">您的黄金会员套餐还有7天到期</p></div></div>
    <p style="font-size:10px;color:#999;margin-top:8px;text-align:right">03-15 10:00</p>
  </div>
  <div class="order-card">
    <div style="display:flex;align-items:center"><span style="font-size:22px;margin-right:10px">📋</span><div style="flex:1"><h4 style="font-size:13px;color:#333">换电成功提醒</h4><p style="font-size:11px;color:#666;margin-top:3px">您已成功换电，扣费¥3.00</p></div></div>
    <p style="font-size:10px;color:#999;margin-top:8px;text-align:right">03-15 14:30</p>
  </div>
  <div class="order-card">
    <div style="display:flex;align-items:center"><span style="font-size:22px;margin-right:10px">💰</span><div style="flex:1"><h4 style="font-size:13px;color:#333">充值成功</h4><p style="font-size:11px;color:#666;margin-top:3px">充值¥100.00，赠送¥20.00</p></div></div>
    <p style="font-size:10px;color:#999;margin-top:8px;text-align:right">03-10 09:10</p>
  </div>
</div>

<!-- 客服中心 -->
<div id="service-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>客服中心</h2></div>
  <div class="card" style="text-align:center">
    <div style="padding:26px 0"><div style="font-size:52px;margin-bottom:12px">🎧</div><p style="font-size:14px;color:#333;margin-bottom:6px">24小时在线客服</p><p style="font-size:12px;color:#999">为您提供全天候服务</p></div>
  </div>
  <div class="sub-item clickable" data-action="toast" data-msg="正在连接人工客服..."><div class="sub-icon" style="background:#4caf50">💬</div><div class="info"><h4>在线客服</h4><p>即时对话解答疑问</p></div></div>
  <div class="sub-item clickable" data-action="toast" data-msg="客服热线：400-888-8888"><div class="sub-icon" style="background:#2196f3">📞</div><div class="info"><h4>电话客服</h4><p>400-888-8888</p></div></div>
  <div class="sub-item clickable" data-action="toast" data-msg="常见问题列表"><div class="sub-icon" style="background:#ff9800">❓</div><div class="info"><h4>常见问题</h4><p>查看常见问题解答</p></div></div>
</div>

<!-- 使用指南 -->
<div id="guide-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>使用指南</h2></div>
  <div class="card" style="margin-top:12px">
    <div class="card-title"><span class="icon">📖</span>换电教程</div>
    <div style="padding:10px;background:#f5f5f5;border-radius:8px">
      <p style="font-size:12px;color:#666;line-height:1.7">1. 打开小程序，查找附近换电柜</p>
      <p style="font-size:12px;color:#666;line-height:1.7;margin-top:6px">2. 导航到换电柜，扫描柜体二维码</p>
      <p style="font-size:12px;color:#666;line-height:1.7;margin-top:6px">3. 取出满电电池，将旧电池放入空槽</p>
      <p style="font-size:12px;color:#666;line-height:1.7;margin-top:6px">4. 关闭柜门，系统自动扣费</p>
    </div>
  </div>
</div>

<!-- 故障上报 -->
<div id="fault-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>故障上报</h2></div>
  <div class="card">
    <div class="card-title"><span class="icon">⚠️</span>选择故障类型</div>
    <div class="sub-item clickable" data-action="toast" data-msg="故障已上报"><div class="sub-icon" style="background:#f44336">🚫</div><div class="info"><h4>柜门无法打开</h4></div></div>
    <div class="sub-item clickable" data-action="toast" data-msg="故障已上报"><div class="sub-icon" style="background:#ff9800">🔋</div><div class="info"><h4>电池无法取出</h4></div></div>
    <div class="sub-item clickable" data-action="toast" data-msg="故障已上报"><div class="sub-icon" style="background:#2196f3">⚡</div><div class="info"><h4>电池充电异常</h4></div></div>
    <div class="sub-item clickable" data-action="toast" data-msg="故障已上报"><div class="sub-icon" style="background:#9c27b0">📱</div><div class="info"><h4>屏幕故障</h4></div></div>
  </div>
</div>

<!-- 意见反馈 -->
<div id="feedback-page" class="page">
  <div class="page-header"><button class="back" data-page="profile-page">←</button><h2>意见反馈</h2></div>
  <div class="card" style="margin-top:12px">
    <div class="card-title"><span class="icon">💬</span>反馈类型</div>
    <div style="display:flex;flex-wrap:wrap;gap:8px">
      <div style="padding:7px 14px;background:#e8f5e9;color:#4caf50;border-radius:14px;font-size:12px;cursor:pointer">功能建议</div>
      <div style="padding:7px 14px;background:#f5f5f5;color:#666;border-radius:14px;font-size:12px;cursor:pointer">体验问题</div>
      <div style="padding:7px 14px;background:#f5f5f5;color:#666;border-radius:14px;font-size:12px;cursor:pointer">其他</div>
    </div>
  </div>
  <div style="padding:12px 16px">
    <textarea style="width:100%;height:120px;padding:10px;border:1px solid #e0e0e0;border-radius:10px;resize:none;font-size:13px" placeholder="请输入您的意见或建议...">
编辑页面

关于我们

换电侠

服务协议

隐私政策

资质证书

设置

消息通知

账号安全

隐私设置

清除缓存

营销优惠

新人专享券

满减优惠券

邀请有礼

积分商城

签到打卡

邀请有礼

邀请好友得优惠券

积分商城

异常处理

柜门无法打开

电池取出失败

电池电量不足

扣费异常

搜索换电柜

编辑页面

关于我们

换电侠

服务协议

隐私政策

资质证书

设置

消息通知

账号安全

隐私设置

清除缓存

营销优惠

新人专享券

满减优惠券

邀请有礼

积分商城

签到打卡

邀请有礼

邀请好友得优惠券

积分商城

签到打卡

今日签到

异常处理

柜门无法打开

电池取出失败

电池电量不足

扣费异常

搜索换电柜
