佳佳edit icon

创建者：
用户wodEjcwc
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
BUG反馈
index.html
app.js
style.css
index.html
            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>顾好家用户端交互Demo</title>
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <div class="app-shell">
    <div class="status-bar"></div>
    <main id="app"></main>
    <nav class="bottom-nav">
      <button class="nav-btn active" data-tab="home">首页</button>
      <button class="nav-btn" data-tab="service">服务</button>
      <button class="nav-btn" data-tab="orders">订单</button>
      <button class="nav-btn" data-tab="profile">我的</button>
    </nav>
  </div>

  <template id="tpl-home">
    <section class="page home-page">
      <header class="hero-header">
        <div class="hero-main">
          <div class="hero-top-row hero-top-row-main">
            <h1>翠苑新城</h1>
            <button class="community-switch-link" data-page="communities">切换小区</button>
          </div>
          <p class="sub">让社区生活更美好</p>
        </div>
        <button class="icon-btn">🔔</button>
      </header>

      <section class="entry-grid entry-grid-home entry-grid-home-nine">
        <button class="entry-item entry-health" data-action="health"><span class="entry-icon">🩺</span><span class="entry-label">健康小屋</span></button>
        <button class="entry-item entry-blue" data-page="booking"><span class="entry-icon">👨‍⚕️</span><span class="entry-label">陪诊服务</span></button>
        <button class="entry-item entry-purple" data-page="childcare"><span class="entry-icon">🧒</span><span class="entry-label">托管服务</span></button>
        <button class="entry-item entry-orange" data-page="meal"><span class="entry-icon">🥗</span><span class="entry-label">健康膳食</span></button>
        <button class="entry-item entry-blue" data-action="property"><span class="entry-icon">🏠</span><span class="entry-label">物业服务</span></button>
        <button class="entry-item entry-cyan" data-page="helper"><span class="entry-icon">🛠️</span><span class="entry-label">生活帮手</span></button>
        <button class="entry-item entry-pink" data-page="activity"><span class="entry-icon">🎉</span><span class="entry-label">社区活动</span></button>
        <button class="entry-item entry-orange" data-action="shop"><span class="entry-icon">🛒</span><span class="entry-label">社区商城</span></button>
        <button class="entry-item entry-property" data-page="forum"><span class="entry-icon">💬</span><span class="entry-label">社区贴吧</span></button>
      </section>

      <section class="notice-bar notice-bar-home" data-page="notices">
        <span class="notice-icon">📣</span>
        <div class="marquee"><span>【社区通知】关于6月燃气安全检查的温馨提示，请各位业主留意家中留人，并提前整理阳台及厨房区域。</span></div>
        <span class="time">10:30</span>
      </section>

      <section class="banner-card" data-page="news">
        <div class="banner-slide active">
          <div class="banner-overlay"></div>
          <div class="banner-content">
            <small>社区精选</small>
            <h2>顾好家社区服务平台</h2>
            <p>一站式生活服务、陪诊、膳食、托管、活动、商城与物业联动。</p>
          </div>
        </div>
        <div class="banner-dots">
          <span class="active"></span><span></span><span></span>
        </div>
      </section>

      <section class="content-section">
        <div class="section-title-row"><h3>精彩内容</h3><button class="text-btn" data-page="news">更多 ›</button></div>
        <div class="content-list content-list-home">
          <article class="content-card content-card-home content-card-home-text" data-page="news">
            <div class="content-body">
              <span class="content-tag">社区焕新</span>
              <h4>翠苑新城绿化升级工程启动，预计8月底完工</h4>
              <p>新增樱花大道、儿童游乐区及老年人健身场地，持续改善公共环境体验。</p>
              <span class="content-meta">2026-05-28 · 物业发布</span>
            </div>
          </article>
          <article class="content-card content-card-home content-card-home-text" data-page="news">
            <div class="content-body">
              <span class="content-tag">安全巡检</span>
              <h4>6月燃气入户巡检安排公布，请业主提前留意时间</h4>
              <p>物业将分楼栋开展年度安全巡检，请提前整理厨房区域并确保家中留人。</p>
              <span class="content-meta">2026-05-27 · 物业发布</span>
            </div>
          </article>
        </div>
      </section>
    </section>
  </template>

  <template id="tpl-service">
    <section class="page service-page">
      <header class="sub-header compact">
        <h2>服务大厅</h2>
        <span></span>
      </header>
      <section class="service-list two-col">
        <button class="service-card primary" data-page="booking"><span class="emoji">👨‍⚕️</span><strong>陪诊服务</strong><small>挂号 / 取药 / 陪同就医</small></button>
        <button class="service-card" data-page="meal"><span class="emoji">🥗</span><strong>健康膳食</strong><small>每日套餐 / 送餐到家</small></button>
        <button class="service-card" data-page="childcare"><span class="emoji">🧒</span><strong>托管服务</strong><small>学期托管 / 假期托管 / 接送</small></button>
        <button class="service-card"><span class="emoji">🏠</span><strong>物业服务</strong><small>报修 / 缴费 / 第三方小程序</small></button>
        <button class="service-card" data-page="helper"><span class="emoji">🛠️</span><strong>生活帮手</strong><small>家政 / 跑腿 / 上门协助</small></button>
        <button class="service-card" data-page="activity"><span class="emoji">🎉</span><strong>社区活动</strong><small>活动列表 / 报名入口</small></button>
        <button class="service-card"><span class="emoji">🛒</span><strong>社区商城</strong><small>日用品 / 爆款商品</small></button>
        <button class="service-card" data-page="forum"><span class="emoji">💬</span><strong>社区贴吧</strong><small>发帖 / 互动 / 邻里交流</small></button>
      </section>
      <section class="panel summary">
        <h4>服务说明</h4>
        <p>围绕业主日常生活、社区互动与物业协同提供统一服务入口；其中物业服务按需求文档口径仅作为第三方物业管理系统跳转入口，社区商城为二期入口展示。</p>
      </section>
    </section>
  </template>

  <template id="tpl-booking">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>陪诊服务</h2>
        <span></span>
      </header>
      <section class="hero-card warm">
        <small>专业陪诊服务</small>
        <h3>为老人、行动不便者提供一站式陪诊</h3>
        <p>挂号、取药、陪同就诊、检查协助，按小时计费。</p>
        <div class="price">¥<b id="bookingPricePerHour">80</b>/小时起</div>
      </section>
      <section class="panel summary">
        <h4>服务项目</h4>
        <div class="ledger-item"><span>医院挂号协助</span><b>基础服务</b></div>
        <div class="ledger-item"><span>陪同检查与缴费</span><b>基础服务</b></div>
        <div class="ledger-item"><span>取药与返程陪送</span><b>按需安排</b></div>
      </section>
      <section class="panel">
        <div class="selector-row"><span>陪诊时长</span><div class="stepper"><button data-step="-1" data-target="bookingHours">−</button><strong id="bookingHours">2</strong><button data-step="1" data-target="bookingHours">+</button></div></div>
        <div class="selector-row"><span>陪诊日期</span><button class="selector-link" id="bookingDateBtn">2026-06-02</button></div>
        <div class="selector-row"><span>陪诊地址</span><button class="selector-link" id="bookingAddrBtn">翠苑新城 3栋1201</button></div>
      </section>
      <section class="panel summary">
        <h4>订单摘要</h4>
        <div class="summary-row"><span>陪诊时长 <em id="bookingSummaryHours">2小时</em></span><span id="bookingFee">¥160</span></div>
        <div class="summary-row"><span>服务日期</span><span id="bookingSummaryDate">2026-06-02</span></div>
        <div class="summary-row"><span>服务地址</span><span id="bookingSummaryAddr">翠苑新城 3栋1201</span></div>
        <div class="summary-row"><span>服务费</span><span>¥0</span></div>
        <div class="summary-total"><span>合计</span><b id="bookingTotal">¥160</b></div>
      </section>
      <section class="panel summary">
        <h4>支付方式</h4>
        <div class="selector-row"><span>支付方式</span><button class="selector-link" id="bookingPayBtn">微信支付</button></div>
        <div class="summary-row"><span>支付说明</span><span id="bookingPayHint">推荐使用微信支付</span></div>
        <div class="summary-row"><span>实付金额</span><span id="bookingActualPay">¥160</span></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="bookingSubmitBtn">提交订单 · ¥160</button>
        <p>支持微信支付 / 支付宝支付 · 陪诊日期前可全额退款</p>
      </div>
    </section>
  </template>

  <template id="tpl-meal">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>健康膳食</h2>
        <span></span>
      </header>
      <section class="hero-card food">
        <small>明日套餐（截止今日20:00）</small>
        <h3>红烧肉套餐</h3>
        <p>红烧肉 + 蒜蓉西兰花 + 紫菜蛋花汤 + 米饭</p>
        <div class="price">¥<b>22</b> <span class="strike">¥28</span></div>
      </section>
      <section class="panel">
        <div class="selector-row"><span>报餐份数</span><div class="stepper"><button data-step="-1" data-target="mealCount">−</button><strong id="mealCount">1</strong><button data-step="1" data-target="mealCount">+</button></div></div>
        <div class="selector-row"><div><span>送餐上门</span><small>额外收取送餐费 ¥3/份</small></div><button class="toggle on" id="mealToggle"><span></span></button></div>
        <div class="selector-row"><span>送餐地址</span><button class="selector-link" id="mealAddrBtn">翠苑新城 3栋1201</button></div>
      </section>
      <section class="panel summary">
        <h4>费用明细（预估冻结额度）</h4>
        <div class="summary-row"><span>餐费 × <em id="mealSummaryCount">1</em>份</span><span>¥<b id="mealFoodFee">22</b></span></div>
        <div class="summary-row"><span>送餐方式</span><span id="mealDeliveryText">送餐上门</span></div>
        <div class="summary-row" id="mealDeliveryRow"><span>送餐费 × <em id="mealDeliveryCount">1</em>份</span><span>+¥<b id="mealDeliveryFee">3</b></span></div>
        <div class="summary-total"><span>合计冻结</span><b id="mealTotal">¥25</b></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="mealSubmitBtn">提交报餐 · 冻结 ¥25 顾家币</button>
        <p>今日20:00前可取消，额度全额解冻</p>
      </div>
    </section>
  </template>

  <template id="tpl-childcare">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>托管服务</h2>
        <span></span>
      </header>
      <section class="hero-card mint">
        <small>学期托管 / 假期托管</small>
        <h3>家长放心托管，物业统一安排服务人员</h3>
        <p>支持学期日托、学期周末托、寒假托、暑假托，按周期报名并冻结顾家币额度。</p>
        <div class="price">¥<b id="childcarePriceBase">68</b>/人/周期起</div>
      </section>
      <section class="panel">
        <div class="selector-row"><span>托管周期</span><button class="selector-link" id="childcareTypeBtn">学期日托</button></div>
        <div class="selector-row"><span>托管人数</span><div class="stepper"><button data-step="-1" data-target="childcareDays">−</button><strong id="childcareDays">1</strong><button data-step="1" data-target="childcareDays">+</button></div></div>
        <div class="selector-row"><span>是否接送</span><button class="selector-link" id="childcarePickupBtn">需要接送</button></div>
        <div class="selector-row"><span>接送地址</span><button class="selector-link" id="childcareAddrBtn">翠苑新城 3栋1201</button></div>
      </section>
      <section class="panel summary">
        <h4>申请摘要</h4>
        <div class="summary-row"><span>托管周期</span><span id="childcareSummaryType">学期日托</span></div>
        <div class="summary-row"><span>接送状态</span><span id="childcareSummaryPickup">需要接送</span></div>
        <div class="summary-row"><span>托管服务费</span><span id="childcareServiceFee">¥68</span></div>
        <div class="summary-row"><span>接送费</span><span id="childcarePickupFee">¥20</span></div>
        <div class="summary-total"><span>预计冻结</span><b id="childcareTotal">¥88</b></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="childcareSubmitBtn">提交托管报名 · 冻结 ¥88</button>
        <p>额度冻结成功后报名生效，系统仅记录报名、账单及支付信息。</p>
      </div>
    </section>
  </template>

  <template id="tpl-helper">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>生活帮手</h2>
        <span></span>
      </header>
      <section class="panel helper-top">
        <h3>提交生活需求</h3>
        <p>适用于家政协助、代买代送、家电安装、临时跑腿等服务，提交后同步至物业后台，由楼栋管家线下联系处理。</p>
      </section>
      <section class="panel option-list">
        <button class="choice-chip active helper-type-chip" data-value="家政协助">家政协助</button>
        <button class="choice-chip helper-type-chip" data-value="代买代送">代买代送</button>
        <button class="choice-chip helper-type-chip" data-value="上门维修">上门维修</button>
        <button class="choice-chip helper-type-chip" data-value="临时跑腿">临时跑腿</button>
      </section>
      <section class="panel">
        <div class="selector-row"><span>帮助类型</span><button class="selector-link" id="helperTypeBtn">家政协助</button></div>
        <div class="selector-row"><span>需求情况</span><button class="selector-link" id="helperDescBtn">老人陪同买药并送回家</button></div>
        <div class="selector-row"><span>图片资料</span><button class="selector-link" id="helperImageBtn">上传 0/9</button></div>
        <div class="selector-row"><span>视频资料</span><button class="selector-link" id="helperVideoBtn">上传 0/3</button></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="helperSubmitBtn">提交需求</button>
        <p>提交后同步至物业后台，由楼栋管家线下联系并处理。</p>
      </div>
    </section>
  </template>

  <template id="tpl-activity">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>社区活动</h2>
        <span></span>
      </header>
      <section class="panel search-filter-row">
        <input class="search-input" type="text" value="亲子" readonly />
        <button class="outline-btn small" id="activityFilterBtn">筛选</button>
      </section>
      <section class="tabs-inline">
        <button class="mini-tab active">全部</button>
        <button class="mini-tab">报名中</button>
        <button class="mini-tab">即将开始</button>
        <button class="mini-tab">已结束</button>
      </section>
      <section class="panel summary">
        <h4>活动说明</h4>
        <p>社区活动仅负责活动浏览、详情查看与报名登记，APP作为活动报名入口，不承载电子票、核销或现场签到流程。</p>
      </section>
      <section class="section-stack">
        <article class="event-card featured">
          <div class="event-banner purple">🎉</div>
          <div class="event-body">
            <div class="event-meta"><span class="badge info">报名中</span><span>06-08 周六 15:00</span></div>
            <h3>亲子手作生日会</h3>
            <p>报名时间：05-30 至 06-07 · 状态：报名中</p>
            <div class="event-actions"><button class="primary-btn small" id="activityJoinBtn">立即报名</button></div>
          </div>
        </article>
        <article class="event-card">
          <div class="event-banner green">🏃</div>
          <div class="event-body">
            <div class="event-meta"><span class="badge success">已报名</span><span>06-12 周三 07:30</span></div>
            <h3>晨跑打卡活动</h3>
            <p>报名时间：05-28 至 06-11 · 状态：已报名</p>
            <div class="event-actions"><button class="outline-btn event-record-btn">查看报名记录</button></div>
          </div>
        </article>
        <article class="event-card">
          <div class="event-banner orange">📚</div>
          <div class="event-body">
            <div class="event-meta"><span class="badge neutral">即将开始</span><span>06-20 周六 10:00</span></div>
            <h3>暑期阅读分享会</h3>
            <p>报名时间：06-10 至 06-18 · 状态：即将开始</p>
            <div class="event-actions"><button class="outline-btn event-disabled-btn">暂未开放</button></div>
          </div>
        </article>
        <article class="event-card">
          <div class="event-banner blue">🏆</div>
          <div class="event-body">
            <div class="event-meta"><span class="badge warning">名额已满</span><span>06-15 周日 14:00</span></div>
            <h3>邻里棋牌赛</h3>
            <p>报名时间：06-01 至 06-12 · 状态：名额已满</p>
            <div class="event-actions"><button class="outline-btn event-disabled-btn">名额已满</button></div>
          </div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-notices">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>社区通知</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>通知说明</h4>
        <p>仅展示当前小区物业发布的通知公告，点击查看文字详情，不与社区活动或贴吧内容混用。</p>
      </section>
      <section class="content-list">
        <article class="content-card news-card">
          <div class="content-thumb orange">📢</div>
          <div class="content-body">
            <h4>关于6月燃气安全检查的温馨提示</h4>
            <p>发布时间：2026-05-30 10:30 · 物业服务中心</p>
            <span>请各位业主留意家中留人，并提前整理阳台及厨房区域，方便物业联合燃气公司开展安全巡检。</span>
          </div>
        </article>
        <article class="content-card news-card">
          <div class="content-thumb blue">💧</div>
          <div class="content-body">
            <h4>3栋二次供水设备维护通知</h4>
            <p>发布时间：2026-05-29 16:20 · 物业服务中心</p>
            <span>5月31日 09:00-11:00 将进行设备维护，请住户提前做好蓄水准备，恢复时间以现场通知为准。</span>
          </div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-news">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>物业资讯</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>资讯说明</h4>
        <p>精彩内容用于展示物业发布的图文资讯文章，可查看封面、摘要与正文详情，不承担活动报名功能。</p>
      </section>
      <section class="section-stack">
        <article class="content-card news-card">
          <div class="content-thumb green">🌳</div>
          <div class="content-body">
            <h4>翠苑新城绿化升级工程启动，预计8月底完工</h4>
            <p>发布时间：2026-05-28 · 发布方：物业服务中心</p>
            <span>本次升级将新增樱花大道、儿童游乐区及老年人健身场地，并同步优化夜间照明与休憩区。</span>
          </div>
        </article>
        <article class="content-card news-card">
          <div class="content-thumb orange">📢</div>
          <div class="content-body">
            <h4>6月燃气入户巡检安排公布，请业主提前留意时间</h4>
            <p>发布时间：2026-05-27 · 发布方：物业服务中心</p>
            <span>巡检覆盖1-8栋，物业将按楼栋分时段上门检查燃气设备安全情况，详情可联系楼栋管家咨询。</span>
          </div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-forum">
    <section class="page detail-page forum-page">
      <header class="sub-header compact">
        <button class="back ghost" data-back>←</button>
        <h2>社区贴吧</h2>
        <button class="text-btn" id="forumPostBtn">发帖</button>
      </header>
      <section class="panel summary">
        <h4>贴吧说明</h4>
        <p>社区贴吧用于邻里交流、闲置转让和互助发帖，属于UGC互动内容，与物业通知、资讯文章、社区活动独立。</p>
      </section>
      <section class="tabs-inline forum-tags">
        <button class="mini-tab active">全部</button>
        <button class="mini-tab">闲置转让</button>
        <button class="mini-tab">邻里互助</button>
        <button class="mini-tab">活动分享</button>
      </section>
      <section class="post-list">
        <article class="post-card">
          <div class="post-head"><strong>李阿姨</strong><span>刚刚 · 邻里互助</span></div>
          <h4>有没有顺路去市医院的邻居，明早想一起拼车</h4>
          <p>明天 8:30 从翠苑新城东门出发，有顺路的可以留言联系我。</p>
          <div class="post-foot"><span>👍 12</span><span>💬 8</span><button class="text-btn forum-reply-btn">回复</button></div>
        </article>
        <article class="post-card">
          <div class="post-head"><strong>张先生</strong><span>今天 12:20 · 闲置转让</span></div>
          <h4>九成新儿童书桌转让，自提优先</h4>
          <p>翠苑新城 3栋，成色很好，有需要的邻居可私信。</p>
          <div class="post-foot"><span>👍 21</span><span>💬 15</span><button class="text-btn forum-reply-btn">回复</button></div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-orders">
    <section class="page orders-page">
      <header class="sub-header compact">
        <h2>我的订单</h2>
        <span></span>
      </header>
      <section class="tabs-inline">
        <button class="mini-tab active">全部</button>
        <button class="mini-tab">陪诊</button>
        <button class="mini-tab">托管</button>
        <button class="mini-tab">膳食</button>
      </section>
      <section class="panel summary">
        <h4>订单概览</h4>
        <p>统一查看陪诊、膳食、托管三类服务记录；当前仅展示需求文档定义的订单状态、退款入口与评价入口承接，不扩展线下服务过程跟踪。</p>
      </section>
      <section class="order-list">
        <article class="order-card" data-order-key="booking" data-order="陪诊服务订单">
          <div class="order-head"><span class="order-type">陪诊服务</span><span class="badge warning">已支付</span></div>
          <h4>陪诊服务（2小时）</h4>
          <p>服务时间：2026-06-02 09:00</p>
          <p>服务地址：翠苑新城 3栋1201</p>
          <div class="order-foot"><div class="order-amount"><small>实付金额</small><b>¥160</b></div><button class="outline-btn order-detail-btn">详情</button></div>
        </article>
        <article class="order-card" data-order-key="meal" data-order="健康膳食订单">
          <div class="order-head"><span class="order-type">健康膳食</span><span class="badge info">已确认</span></div>
          <h4>红烧肉套餐（2份）</h4>
          <p>送餐方式：送餐上门</p>
          <p>冻结顾家币：¥50；今日20:00前可取消</p>
          <div class="order-foot"><div class="order-amount"><small>冻结金额</small><b>¥50</b></div><button class="outline-btn order-detail-btn">详情</button></div>
        </article>
        <article class="order-card" data-order-key="childcare" data-order="托管服务申请单">
          <div class="order-head"><span class="order-type">托管服务</span><span class="badge info">已确认</span></div>
          <h4>学期日托（1人）</h4>
          <p>接送地址：翠苑新城 3栋1201</p>
          <p>冻结顾家币：¥88</p>
          <div class="order-foot"><div class="order-amount"><small>冻结金额</small><b>¥88</b></div><button class="outline-btn order-detail-btn">详情</button></div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-profile">
    <section class="page profile-page">
      <header class="profile-top">
        <div class="avatar">👤</div>
        <h2>张先生</h2>
        <p id="profileHouseText">翠苑新城 · 3栋1201（业主）</p>
        <button class="profile-house-switch" id="profileHouseSwitchBtn">切换房号</button>
      </header>
      <section class="wallet-card" data-page="wallet">
        <div class="wallet-head"><strong>💰 顾家币额度</strong><span>查看明细 →</span></div>
        <div class="wallet-main"><div><h3>2,000<span>元</span></h3><p>可用额度</p></div><div class="wallet-side"><span>总额度 5,000</span><span>已用 3,000</span></div></div>
        <div class="progress"><span style="width:60%"></span></div>
        <div class="wallet-bottom"><span>冻结中 ¥790</span><span>待结算 ¥2,210</span></div>
      </section>
      <section class="alert-card">
        <div>⚠️</div>
        <div><strong>有待支付账单</strong><p>托管账单 ¥680 · 膳食账单 ¥220 · 逾期将影响额度使用</p></div>
        <span>→</span>
      </section>
      <section class="profile-shortcuts">
        <button class="profile-mini-card" data-tab-jump="orders"><span class="profile-mini-icon">📦</span><strong>我的订单</strong><em>查看全部</em></button>
        <button class="profile-mini-card" data-page="demands"><span class="profile-mini-icon">🛠️</span><strong>我的需求</strong><em>2条记录</em></button>
        <button class="profile-mini-card" data-page="registrations"><span class="profile-mini-icon">🎉</span><strong>我的报名</strong><em>1个活动</em></button>
        <button class="profile-mini-card" data-page="myposts"><span class="profile-mini-icon">💬</span><strong>我的帖子</strong><em>3条互动</em></button>
      </section>
      <section class="profile-group">
        <div class="section-title-row"><h3>账户与家庭</h3></div>
        <div class="menu-list compact-menu-list">
          <button class="menu-row" data-page="profile-detail"><span>🪪 我的资料</span><em>头像 / 昵称 / 手机号</em></button>
          <button class="menu-row" data-page="family"><span>👪 我的家庭</span><em>3位成员</em></button>
          <button class="menu-row" data-page="houses"><span>🏠 我的房号</span><em>翠苑新城 3-1201</em></button>
          <button class="menu-row" data-page="steward"><span>📞 我的管家</span><em>李管家</em></button>
        </div>
      </section>
      <section class="profile-group">
        <div class="section-title-row"><h3>账单与额度</h3></div>
        <div class="menu-list compact-menu-list">
          <button class="menu-row" data-page="wallet"><span>💰 我的额度</span><em>查看明细</em></button>
          <button class="menu-row" data-page="childcare-bills"><span>📋 托管账单</span><em class="danger">待付 ¥680</em></button>
          <button class="menu-row" data-page="meal-bills"><span>🍽️ 膳食账单</span><em class="danger">待付 ¥220</em></button>
        </div>
      </section>
    </section>
  </template>

  <template id="tpl-profile-detail">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的资料</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <div class="summary-row"><span>头像</span><span>默认头像</span></div>
        <div class="summary-row"><span>昵称</span><span>张先生</span></div>
        <div class="summary-row"><span>绑定小区和房号</span><span>翠苑新城 3栋1201</span></div>
        <div class="summary-row"><span>手机号</span><span>138****5678</span></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="profileEditBtn">修改昵称</button>
        <p>演示版展示更换头像、修改昵称、换绑手机号入口。</p>
      </div>
    </section>
  </template>

  <template id="tpl-family">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的家庭</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>已绑定成员</h4>
        <div class="ledger-item"><span>张太太 · 配偶 · 绑定于 2026-03-12</span><b>已绑定</b></div>
        <div class="ledger-item"><span>张小朋友 · 子女 · 绑定于 2026-03-15</span><b>已绑定</b></div>
        <div class="ledger-item"><span>李阿姨 · 家属 · 绑定于 2026-04-01</span><b>已绑定</b></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="familyInviteBtn">邀请绑定</button>
        <p>演示版展示邀请二维码与解除绑定入口。</p>
      </div>
    </section>
  </template>

  <template id="tpl-houses">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的房号</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <div class="summary-row"><span>当前小区</span><span>翠苑新城</span></div>
        <div class="ledger-item"><span>翠苑新城 · 3栋1201</span><b>当前使用</b></div>
        <div class="ledger-item"><span>阳光花园 · 5栋802</span><b>可切换</b></div>
      </section>
    </section>
  </template>

  <template id="tpl-steward">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的管家</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <div class="summary-row"><span>楼栋管家</span><span>李管家</span></div>
        <div class="summary-row"><span>电话</span><span>400-800-1234</span></div>
        <div class="summary-row"><span>保安亭电话</span><span>0731-88886666</span></div>
        <div class="summary-row"><span>微信二维码</span><span>长按识别添加</span></div>
      </section>
    </section>
  </template>

  <template id="tpl-childcare-bills">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>托管账单</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <div class="summary-row"><span>待支付金额</span><span>¥680</span></div>
        <div class="ledger-item"><span>2026年5月 · 学期日托</span><b>待支付</b></div>
        <div class="ledger-item"><span>2026年4月 · 学期日托</span><b>已支付</b></div>
      </section>
    </section>
  </template>

  <template id="tpl-meal-bills">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>膳食账单</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <div class="summary-row"><span>待支付金额</span><span>¥220</span></div>
        <div class="ledger-item"><span>2026年5月 · 月度账单</span><b>待支付</b></div>
        <div class="ledger-item"><span>2026年4月 · 月度账单</span><b>已支付</b></div>
      </section>
    </section>
  </template>

  <template id="tpl-communities">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>小区切换</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>已绑定小区</h4>
        <div class="ledger-item"><span>翠苑新城</span><b>当前</b></div>
        <div class="ledger-item"><span>阳光花园</span><b>可切换</b></div>
      </section>
      <section class="panel summary">
        <h4>未绑定小区</h4>
        <div class="ledger-item"><span>滨江华府</span><b>未绑定</b></div>
      </section>
    </section>
  </template>

  <template id="tpl-wallet">
    <section class="page wallet-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>顾家币额度</h2>
        <span></span>
      </header>
      <section class="panel wallet-detail">
        <div class="wallet-big">¥2,000</div>
        <p>当前可用额度</p>
        <div class="stat-grid">
          <div><strong>¥5,000</strong><span>总额度</span></div>
          <div><strong>¥790</strong><span>冻结中</span></div>
          <div><strong>¥2,210</strong><span>待结算</span></div>
          <div><strong>¥3,000</strong><span>累计已用</span></div>
        </div>
      </section>
      <section class="panel ledger-list">
        <h4>最近明细</h4>
        <div class="ledger-item"><span>膳食报餐冻结</span><b>-¥50</b></div>
        <div class="ledger-item"><span>托管服务冻结</span><b>-¥88</b></div>
        <div class="ledger-item"><span>膳食账单结算</span><b>-¥220</b></div>
        <div class="ledger-item"><span>物业充值入账</span><b class="up">+¥1,000</b></div>
      </section>
    </section>
  </template>

  <template id="tpl-registrations">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的报名</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>报名记录说明</h4>
        <p>展示活动报名记录列表，仅包含活动名称、报名时间和状态；支持查看详情，并在报名截止前发起取消报名。</p>
      </section>
      <section class="order-list">
        <article class="order-card" data-registration-key="birthday">
          <div class="order-head"><strong>#ACT-0608-018</strong><span class="badge info">报名中</span></div>
          <h4>亲子手作生日会</h4>
          <p>报名时间：2026-05-30 14:15 · 活动时间：2026-06-08 15:00</p>
          <div class="order-foot"><b>可取消</b><button class="outline-btn registration-detail-btn">查看详情</button></div>
        </article>
        <article class="order-card" data-registration-key="morningrun">
          <div class="order-head"><strong>#ACT-0612-009</strong><span class="badge success">已报名</span></div>
          <h4>晨跑打卡活动</h4>
          <p>报名时间：2026-05-28 18:20 · 活动时间：2026-06-12 07:30</p>
          <div class="order-foot"><b>已记录</b><button class="outline-btn registration-detail-btn">查看详情</button></div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-registration-detail">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>报名详情</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4 id="registrationDetailName">亲子手作生日会</h4>
        <div class="summary-row"><span>报名时间</span><span id="registrationDetailCreated">2026-05-30 14:15</span></div>
        <div class="summary-row"><span>活动时间</span><span id="registrationDetailEventTime">2026-06-08 15:00</span></div>
        <div class="summary-row"><span>状态</span><span id="registrationDetailStatus">报名中</span></div>
      </section>
      <section class="panel summary">
        <h4>报名信息</h4>
        <div class="summary-row"><span>姓名</span><span id="registrationDetailUser">张先生</span></div>
        <div class="summary-row"><span>手机号</span><span id="registrationDetailPhone">138****5678</span></div>
        <div class="summary-row"><span>备注</span><span id="registrationDetailRemark">带1名儿童参加</span></div>
      </section>
      <section class="panel summary">
        <h4>活动详情</h4>
        <div class="summary-row"><span>地点</span><span id="registrationDetailLocation">社区活动中心 2楼</span></div>
        <div class="summary-row"><span>限制人数</span><span id="registrationDetailLimit">30人</span></div>
        <div class="summary-row"><span>已报名人数</span><span id="registrationDetailJoined">12人</span></div>
        <p id="registrationDetailIntro">活动包含手作蛋糕、亲子互动和生日祝福环节。</p>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="registrationCancelBtn">取消报名</button>
        <p>仅在报名截止前可取消，取消后记录仍保留。</p>
      </div>
    </section>
  </template>

  <template id="tpl-order-detail">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>订单详情</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4 id="orderDetailName">陪诊服务（2小时）</h4>
        <div class="summary-row"><span>商品名称</span><span id="orderDetailProduct">陪诊服务</span></div>
        <div class="summary-row"><span>价格</span><span id="orderDetailPrice">¥160</span></div>
        <div class="summary-row"><span>实际支付费用</span><span id="orderDetailPaid">¥160</span></div>
        <div class="summary-row"><span>支付时间</span><span id="orderDetailPaidAt">2026-05-30 14:20</span></div>
        <div class="summary-row"><span>账单结算状态</span><span id="orderDetailSettleStatus">待结算</span></div>
        <div class="summary-row"><span>结算时间</span><span id="orderDetailSettleAt">--</span></div>
        <div class="summary-row"><span>订单状态</span><span id="orderDetailStatus">已支付</span></div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="orderRefundBtn">申请退款</button>
        <p>仅展示需求文档中定义的订单详情、退款申请与评价入口，不展示线下服务执行进度。</p>
      </div>
    </section>
  </template>

  <template id="tpl-myposts">
    <section class="page detail-page forum-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的帖子</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>帖子说明</h4>
        <p>展示本人已发布帖子列表，支持查看详情与删除帖子；仅可删除自己发布的帖子。</p>
      </section>
      <section class="post-list">
        <article class="post-card mine" data-post-key="post1" data-post-title="有没有顺路去市医院的邻居，明早想一起拼车">
          <div class="post-head"><strong>张先生</strong><span>2026-05-30 09:20 · 邻里互助</span></div>
          <h4>有没有顺路去市医院的邻居，明早想一起拼车</h4>
          <p>明天 8:30 从翠苑新城东门出发，有顺路的可以留言联系我。</p>
          <div class="post-foot"><span>👍 12</span><span>💬 8</span><button class="text-btn mypost-detail-btn">查看详情</button><button class="text-btn danger-text mypost-delete-btn">删除帖子</button></div>
        </article>
        <article class="post-card mine" data-post-key="post2" data-post-title="九成新儿童书桌转让，自提优先">
          <div class="post-head"><strong>张先生</strong><span>2026-05-29 12:20 · 闲置转让</span></div>
          <h4>九成新儿童书桌转让，自提优先</h4>
          <p>翠苑新城 3栋，成色很好，有需要的邻居可私信。</p>
          <div class="post-foot"><span>👍 21</span><span>💬 15</span><button class="text-btn mypost-detail-btn">查看详情</button><button class="text-btn danger-text mypost-delete-btn">删除帖子</button></div>
        </article>
        <article class="post-card mine" data-post-key="post3" data-post-title="周末亲子手作活动体验很好，给物业点个赞">
          <div class="post-head"><strong>张先生</strong><span>2026-05-27 18:40 · 活动分享</span></div>
          <h4>周末亲子手作活动体验很好，给物业点个赞</h4>
          <p>孩子玩得很开心，现场组织也很有秩序，希望以后多办这类活动。</p>
          <div class="post-foot"><span>👍 36</span><span>💬 11</span><button class="text-btn mypost-detail-btn">查看详情</button><button class="text-btn danger-text mypost-delete-btn">删除帖子</button></div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-post-detail">
    <section class="page detail-page forum-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>帖子详情</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4 id="postDetailTitle">有没有顺路去市医院的邻居，明早想一起拼车</h4>
        <div class="summary-row"><span>发布人</span><span id="postDetailAuthor">张先生</span></div>
        <div class="summary-row"><span>发布时间</span><span id="postDetailTime">2026-05-30 09:20</span></div>
        <div class="summary-row"><span>点赞数</span><span id="postDetailLikes">12</span></div>
        <div class="summary-row"><span>评论数</span><span id="postDetailComments">8</span></div>
      </section>
      <section class="panel summary">
        <h4>正文内容</h4>
        <p id="postDetailContent">明天 8:30 从翠苑新城东门出发，有顺路的可以留言联系我。</p>
        <div class="content-thumb green" id="postDetailMedia">🖼️</div>
      </section>
      <section class="panel summary">
        <h4>评论列表</h4>
        <div id="postDetailReplyList">
          <div class="ledger-item"><span>王阿姨：我明天也去医院，可以一起</span><b>10:05</b></div>
          <div class="ledger-item"><span>楼主回复：太好了，我私信您</span><b>10:10</b></div>
        </div>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="postLikeBtn">点赞</button>
        <p>演示版展示点赞、评论输入与回复入口，不扩展额外业务功能。</p>
      </div>
    </section>
  </template>

  <template id="tpl-demands">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>我的需求</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4>生活帮手记录</h4>
        <p>展示需求提交记录列表，仅包含类型、时间、描述；支持查看详情与删除记录，不展示处理进度。</p>
      </section>
      <section class="order-list">
        <article class="order-card" data-demand-key="demand1">
          <div class="order-head"><strong>#HELP-0530-108</strong><span class="badge neutral">已提交</span></div>
          <h4>家政协助</h4>
          <p>提交时间：2026-05-30 15:10 · 描述：老人陪同买药并送回家</p>
          <div class="order-foot"><b>已记录</b><button class="outline-btn demand-detail-btn">查看详情</button><button class="text-btn danger-text demand-delete-btn">删除记录</button></div>
        </article>
        <article class="order-card" data-demand-key="demand2">
          <div class="order-head"><strong>#HELP-0528-091</strong><span class="badge neutral">已提交</span></div>
          <h4>临时跑腿</h4>
          <p>提交时间：2026-05-28 18:20 · 描述：代取快递并送至3栋1201</p>
          <div class="order-foot"><b>已记录</b><button class="outline-btn demand-detail-btn">查看详情</button><button class="text-btn danger-text demand-delete-btn">删除记录</button></div>
        </article>
      </section>
    </section>
  </template>

  <template id="tpl-demand-detail">
    <section class="page detail-page">
      <header class="sub-header">
        <button class="back ghost" data-back>←</button>
        <h2>需求详情</h2>
        <span></span>
      </header>
      <section class="panel summary">
        <h4 id="demandDetailType">家政协助</h4>
        <div class="summary-row"><span>提交时间</span><span id="demandDetailTime">2026-05-30 15:10</span></div>
      </section>
      <section class="panel summary">
        <h4>需求描述</h4>
        <p id="demandDetailDesc">老人陪同买药并送回家</p>
      </section>
      <div class="sticky-action">
        <button class="primary-btn" id="demandDeleteBtn">删除记录</button>
        <p>仅展示提交记录详情，不展示处理进度。</p>
      </div>
    </section>
  </template>

  <script src="./app.js"></script>
</body>
</html>
编辑器加载中
预览
控制台