shanxia2.0/mobile-ui/shanxia-mp-pattern-view.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>山峡化工 · 查看详情 Pattern</title>
  <link rel="stylesheet" href="shanxia-mp-base.css" />
  <style>.mp-subpage-back { color: #fff; font-size: 13px; opacity: 0.95; }</style>
</head>
<body>
  <nav class="proto-nav">
    <strong>Pattern</strong>
    <a href="shanxia-mp-pattern-index.html">索引</a>
    <a href="shanxia-mp-pattern-list.html">列表</a>
    <a class="active" href="shanxia-mp-pattern-view.html">查看</a>
    <a href="shanxia-mp-pattern-form.html">表单</a>
    <a href="shanxia-mp-pattern-feedback.html">弹窗</a>
  </nav>

  <main class="phone no-tabbar mp-form-page">
    <header class="mp-navbar" style="background:var(--bg-page);border:none;padding-bottom:0">
      <a class="mp-navbar__back" href="shanxia-mp-pattern-list.html">← 返回</a>
      <h1 class="mp-navbar__title">线索详情</h1>
      <button class="mp-navbar__action" type="button" id="btn-more">更多</button>
    </header>

    <div class="mp-pattern-note" style="margin-top:8px">
      <strong>P-VIEW · 查看详情（全页）</strong>
      Hero 摘要 + 分块信息 + 子表/附件/审批流。底栏放主操作；「更多」打开 Action Sheet。
    </div>

    <!-- Hero -->
    <section class="mp-detail-hero">
      <div class="mp-detail-hero__top">
        <div>
          <div class="mp-detail-hero__title">苏州新材料询价</div>
          <div class="mp-detail-hero__sub">XS-20260706-001</div>
        </div>
        <span class="mp-tag mp-tag--info">新线索</span>
      </div>
      <div class="mp-detail-hero__meta">
        <span class="mp-detail-hero__chip">官网表单</span>
        <span class="mp-detail-hero__chip">销售一部</span>
        <span class="mp-detail-hero__chip">未分配</span>
      </div>
    </section>

    <!-- 基本信息 -->
    <section class="mp-block">
      <h2 class="mp-block__title">基本信息</h2>
      <div class="mp-block__panel">
        <div class="mp-kv-list" style="border:none;border-radius:0">
          <div class="mp-kv"><span>联系人</span><span>陈先生</span></div>
          <div class="mp-kv"><span>手机号</span><span>138****2201</span></div>
          <div class="mp-kv"><span>公司名称</span><span>苏州新材料科技有限公司</span></div>
          <div class="mp-kv"><span>意向产品</span><span>甲醇</span></div>
          <div class="mp-kv"><span>预估用量</span><span>32 吨/月</span></div>
          <div class="mp-kv"><span>创建时间</span><span>2026-07-06 09:12</span></div>
          <div class="mp-kv"><span>备注</span><span>希望下周安排样品寄送，关注含税到厂价</span></div>
        </div>
      </div>
    </section>

    <!-- 跟进记录 -->
    <section class="mp-block">
      <h2 class="mp-block__title">跟进记录</h2>
      <div class="mp-block__panel">
        <div class="mp-timeline">
          <div class="mp-timeline__item">
            <span class="mp-timeline__dot"></span>
            <div class="mp-timeline__body">
              <strong>电话沟通</strong>
              <span>王销售 · 2026-07-06 10:30</span>
              <p>客户关注交期与到厂价，已发送产品手册。</p>
            </div>
          </div>
          <div class="mp-timeline__item">
            <span class="mp-timeline__dot mp-timeline__dot--muted"></span>
            <div class="mp-timeline__body">
              <strong>线索创建</strong>
              <span>系统 · 2026-07-06 09:12</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 附件 -->
    <section class="mp-block">
      <h2 class="mp-block__title">附件</h2>
      <div class="mp-block__panel">
        <div class="mp-attach-row">
          <div class="mp-attach-card">
            <div class="mp-attach-card__thumb">PDF</div>
            <span class="mp-attach-card__name">产品手册.pdf</span>
          </div>
          <div class="mp-attach-card">
            <div class="mp-attach-card__thumb">IMG</div>
            <span class="mp-attach-card__name">名片照片.jpg</span>
          </div>
        </div>
      </div>
    </section>

    <p style="margin:0 16px 20px;font-size:11px;color:var(--text-muted)">
      快捷预览：列表页也可弹出半屏抽屉，<button type="button" id="btn-sheet" style="color:var(--brand-green-dark);font-size:11px;font-weight:600">点击查看抽屉示例</button>
    </p>

    <!-- 底栏操作 -->
    <footer class="mp-footer-bar">
      <button class="mp-btn mp-btn--ghost" type="button">分配</button>
      <button class="mp-btn mp-btn--primary" type="button">跟进</button>
    </footer>
  </main>

  <!-- 底部抽屉：快捷查看 -->
  <div class="mp-overlay" id="overlay-sheet"></div>
  <aside class="mp-sheet" id="sheet-view" aria-hidden="true">
    <div class="mp-sheet__handle"></div>
    <div class="mp-sheet__head">
      <h2 class="mp-sheet__title">线索详情</h2>
      <button class="mp-sheet__close" type="button" data-close="sheet">关闭</button>
    </div>
    <div class="mp-sheet__body">
      <section class="mp-detail-hero" style="margin-top:12px">
        <div class="mp-detail-hero__top">
          <div>
            <div class="mp-detail-hero__title">苏州新材料询价</div>
            <div class="mp-detail-hero__sub">XS-20260706-001</div>
          </div>
          <span class="mp-tag mp-tag--info">新线索</span>
        </div>
      </section>
      <section class="mp-block">
        <h2 class="mp-block__title">基本信息</h2>
        <div class="mp-block__panel">
          <div class="mp-kv-list" style="border:none;border-radius:0">
            <div class="mp-kv"><span>联系人</span><span>陈先生</span></div>
            <div class="mp-kv"><span>手机号</span><span>138****2201</span></div>
            <div class="mp-kv"><span>意向产品</span><span>甲醇 · 32吨/月</span></div>
          </div>
        </div>
      </section>
    </div>
    <footer class="mp-sheet__foot">
      <button class="mp-btn mp-btn--ghost" type="button" data-close="sheet">关闭</button>
      <button class="mp-btn mp-btn--primary" type="button">查看完整详情</button>
    </footer>
  </aside>

  <!-- Action Sheet -->
  <div class="mp-overlay" id="overlay-action"></div>
  <div class="mp-action-sheet" id="action-sheet">
    <div class="mp-action-sheet__group">
      <button class="mp-action-sheet__item" type="button">编辑</button>
      <button class="mp-action-sheet__item" type="button">分配负责人</button>
      <button class="mp-action-sheet__item" type="button">转化商机</button>
      <button class="mp-action-sheet__item mp-action-sheet__item--danger" type="button" id="btn-delete">删除</button>
    </div>
    <button class="mp-action-sheet__cancel" type="button" data-close="action">取消</button>
  </div>

  <!-- 确认弹窗 -->
  <div class="mp-overlay" id="overlay-dialog"></div>
  <div class="mp-dialog" id="dialog-confirm">
    <div class="mp-dialog__body">
      <div class="mp-dialog__title">确认删除？</div>
      <p class="mp-dialog__text">删除后线索将进入回收站，可在 PC 端恢复。</p>
    </div>
    <div class="mp-dialog__foot">
      <button class="mp-dialog__btn" type="button" data-close="dialog">取消</button>
      <button class="mp-dialog__btn mp-dialog__btn--danger" type="button" id="btn-confirm-delete">删除</button>
    </div>
  </div>

  <div class="mp-toast" id="toast">已删除</div>

  <script>
    function openLayer(overlayId, panelId) {
      document.getElementById(overlayId).classList.add('is-open')
      document.getElementById(panelId).classList.add('is-open')
    }
    function closeLayer(overlayId, panelId) {
      document.getElementById(overlayId).classList.remove('is-open')
      document.getElementById(panelId).classList.remove('is-open')
    }
    document.getElementById('btn-sheet').addEventListener('click', () => openLayer('overlay-sheet', 'sheet-view'))
    document.getElementById('btn-more').addEventListener('click', () => openLayer('overlay-action', 'action-sheet'))
    document.getElementById('btn-delete').addEventListener('click', () => {
      closeLayer('overlay-action', 'action-sheet')
      openLayer('overlay-dialog', 'dialog-confirm')
    })
    document.querySelectorAll('[data-close="sheet"]').forEach(el => {
      el.addEventListener('click', () => closeLayer('overlay-sheet', 'sheet-view'))
    })
    document.getElementById('overlay-sheet').addEventListener('click', () => closeLayer('overlay-sheet', 'sheet-view'))
    document.querySelectorAll('[data-close="action"]').forEach(el => {
      el.addEventListener('click', () => closeLayer('overlay-action', 'action-sheet'))
    })
    document.getElementById('overlay-action').addEventListener('click', () => closeLayer('overlay-action', 'action-sheet'))
    document.querySelectorAll('[data-close="dialog"]').forEach(el => {
      el.addEventListener('click', () => closeLayer('overlay-dialog', 'dialog-confirm'))
    })
    document.getElementById('btn-confirm-delete').addEventListener('click', () => {
      closeLayer('overlay-dialog', 'dialog-confirm')
      const t = document.getElementById('toast')
      t.classList.add('is-open')
      setTimeout(() => t.classList.remove('is-open'), 1500)
    })
  </script>
</body>
</html>