shanxia2.0/mobile-ui/shanxia-mp-pattern-feedback.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" />
</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 href="shanxia-mp-pattern-view.html">查看</a>
    <a href="shanxia-mp-pattern-form.html">表单</a>
    <a class="active" href="shanxia-mp-pattern-feedback.html">弹窗</a>
  </nav>

  <main class="phone no-tabbar">
    <header class="mp-navbar">
      <a class="mp-navbar__back" href="shanxia-mp-pattern-index.html">← 返回</a>
      <h1 class="mp-navbar__title">弹窗与反馈</h1>
      <span class="mp-navbar__action" style="visibility:hidden">占位</span>
    </header>

    <div class="mp-pattern-note" style="margin-top:8px">
      <strong>P-FEEDBACK · 弹窗 / 抽屉 / 提示</strong>
      居中确认框用于破坏性操作；底部抽屉用于半屏查看或选择器；Action Sheet 用于更多操作；Toast 用于轻量结果反馈。
    </div>

    <section class="mp-section">
      <div class="mp-list">
        <button class="mp-card" type="button" id="demo-dialog" style="width:100%;text-align:left">
          <div class="mp-card__title">居中确认弹窗</div>
          <div class="mp-card__sub">删除、作废、退出登录等二次确认</div>
        </button>
        <button class="mp-card" type="button" id="demo-sheet" style="width:100%;text-align:left">
          <div class="mp-card__title">底部抽屉</div>
          <div class="mp-card__sub">半屏详情预览、筛选面板、选择器</div>
        </button>
        <button class="mp-card" type="button" id="demo-action" style="width:100%;text-align:left">
          <div class="mp-card__title">操作菜单 Action Sheet</div>
          <div class="mp-card__sub">详情页「更多」、长按卡片</div>
        </button>
        <button class="mp-card" type="button" id="demo-toast-success" style="width:100%;text-align:left">
          <div class="mp-card__title">Toast · 成功</div>
          <div class="mp-card__sub">提交成功、保存成功</div>
        </button>
        <button class="mp-card" type="button" id="demo-toast-error" style="width:100%;text-align:left">
          <div class="mp-card__title">Toast · 失败</div>
          <div class="mp-card__sub">网络异常、校验失败摘要</div>
        </button>
      </div>
    </section>

    <section class="mp-block">
      <h2 class="mp-block__title">使用场景对照</h2>
      <div class="mp-block__panel">
        <table class="mp-mini-table">
          <thead><tr><th>组件</th><th>场景</th></tr></thead>
          <tbody>
            <tr><td>mp-dialog</td><td>删除确认、退出登录、提交前确认</td></tr>
            <tr><td>mp-sheet</td><td>列表快捷查看、下拉选择、筛选面板</td></tr>
            <tr><td>mp-action-sheet</td><td>编辑/分配/分享等 3+ 操作入口</td></tr>
            <tr><td>mp-toast</td><td>操作结果轻提示（1.5s 自动消失）</td></tr>
            <tr><td>mp-empty</td><td>列表无数据</td></tr>
            <tr><td>mp-skeleton</td><td>首屏加载占位</td></tr>
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <div class="mp-overlay" id="ov-dialog"></div>
  <div class="mp-dialog" id="dlg">
    <div class="mp-dialog__body">
      <div class="mp-dialog__title">确认提交？</div>
      <p class="mp-dialog__text">提交后将进入审批流程，审批通过前不可修改。</p>
    </div>
    <div class="mp-dialog__foot">
      <button class="mp-dialog__btn" type="button" data-close="dlg">取消</button>
      <button class="mp-dialog__btn mp-dialog__btn--primary" type="button" data-close="dlg">确认</button>
    </div>
  </div>

  <div class="mp-overlay" id="ov-sheet"></div>
  <aside class="mp-sheet" id="sheet">
    <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">
      <div class="mp-form-panel" style="margin:12px 16px">
        <button class="mp-field-row" type="button" style="width:100%;background:#fff"><span class="mp-field-row__label">官网表单</span><span class="mp-field-row__value" style="color:var(--brand-green-dark)">✓</span></button>
        <button class="mp-field-row" type="button" style="width:100%;background:#fff"><span class="mp-field-row__label">线下展会</span><span class="mp-field-row__value"></span></button>
        <button class="mp-field-row" type="button" style="width:100%;background:#fff"><span class="mp-field-row__label">电话来访</span><span class="mp-field-row__value"></span></button>
        <button class="mp-field-row" type="button" style="width:100%;background:#fff"><span class="mp-field-row__label">客户转介绍</span><span class="mp-field-row__value"></span></button>
      </div>
    </div>
    <footer class="mp-sheet__foot">
      <button class="mp-btn mp-btn--primary" type="button" data-close="sheet">确定</button>
    </footer>
  </aside>

  <div class="mp-overlay" id="ov-action"></div>
  <div class="mp-action-sheet" id="action">
    <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 mp-action-sheet__item--danger" type="button">删除</button>
    </div>
    <button class="mp-action-sheet__cancel" type="button" data-close="action">取消</button>
  </div>

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

  <script>
    const pairs = {
      dialog: ['ov-dialog', 'dlg'],
      sheet: ['ov-sheet', 'sheet'],
      action: ['ov-action', 'action']
    }
    function openPair(key) {
      const [ov, panel] = pairs[key]
      document.getElementById(ov).classList.add('is-open')
      document.getElementById(panel).classList.add('is-open')
    }
    function closePair(key) {
      const [ov, panel] = pairs[key]
      document.getElementById(ov).classList.remove('is-open')
      document.getElementById(panel).classList.remove('is-open')
    }
    function showToast(text) {
      const t = document.getElementById('toast')
      t.textContent = text
      t.classList.add('is-open')
      setTimeout(() => t.classList.remove('is-open'), 1500)
    }
    document.getElementById('demo-dialog').onclick = () => openPair('dialog')
    document.getElementById('demo-sheet').onclick = () => openPair('sheet')
    document.getElementById('demo-action').onclick = () => openPair('action')
    document.getElementById('demo-toast-success').onclick = () => showToast('提交成功')
    document.getElementById('demo-toast-error').onclick = () => showToast('提交失败，请重试')
    document.querySelectorAll('[data-close]').forEach(btn => {
      btn.addEventListener('click', () => closePair(btn.dataset.close))
    })
    Object.keys(pairs).forEach(key => {
      const [ov] = pairs[key]
      document.getElementById(ov).addEventListener('click', () => closePair(key))
    })
  </script>
</body>
</html>