| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772 |
- <!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, viewport-fit=cover" />
- <title>中科兴皖 · 微信审批通知菜单 Demo</title>
- <style>
- :root {
- --brand-green: #0a9f6d;
- --brand-green-dark: #087f57;
- --brand-green-soft: #e9f9f2;
- --barley-yellow: #d6a343;
- --barley-yellow-soft: #fff7e8;
- --bg-page: #f5f8f7;
- --surface: #ffffff;
- --text-primary: #1f2a26;
- --text-muted: #6b7b74;
- --border: #dcebe4;
- --danger: #d14343;
- --warning: #cf8a19;
- --success: #189b65;
- --radius-card: 14px;
- --radius-lg: 20px;
- --shadow-soft: 0 4px 16px rgba(8, 127, 87, 0.08);
- }
- * { box-sizing: border-box; }
- html, body {
- margin: 0;
- padding: 0;
- min-height: 100%;
- font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
- color: var(--text-primary);
- background:
- radial-gradient(900px 420px at 10% -10%, rgba(10, 159, 109, 0.14), transparent 55%),
- radial-gradient(700px 380px at 90% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
- linear-gradient(180deg, #eef6f2 0%, #f7faf9 40%, #f3f6f5 100%);
- }
- body {
- display: flex;
- justify-content: center;
- padding: 24px 16px 40px;
- }
- #app {
- width: 100%;
- max-width: 980px;
- display: grid;
- grid-template-columns: 280px 1fr;
- gap: 24px;
- align-items: start;
- }
- @media (max-width: 860px) {
- #app { grid-template-columns: 1fr; }
- .doc-panel { position: static; }
- }
- .doc-panel {
- position: sticky;
- top: 24px;
- background: rgba(255, 255, 255, 0.92);
- border: 1px solid var(--border);
- border-radius: 18px;
- padding: 20px 18px;
- box-shadow: var(--shadow-soft);
- }
- .doc-panel h1 {
- margin: 0 0 6px;
- font-size: 20px;
- line-height: 1.3;
- color: var(--brand-green-dark);
- }
- .doc-panel .sub {
- margin: 0 0 16px;
- font-size: 12px;
- color: var(--text-muted);
- line-height: 1.5;
- }
- .section-title {
- margin: 16px 0 8px;
- font-size: 12px;
- font-weight: 600;
- color: var(--text-muted);
- letter-spacing: 0.04em;
- text-transform: uppercase;
- }
- .screen-nav {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
- .screen-nav button {
- appearance: none;
- border: 1px solid var(--border);
- background: #fff;
- border-radius: 10px;
- padding: 10px 12px;
- text-align: left;
- font-size: 13px;
- color: var(--text-primary);
- cursor: pointer;
- }
- .screen-nav button.is-on {
- border-color: var(--brand-green);
- background: var(--brand-green-soft);
- color: var(--brand-green-dark);
- font-weight: 600;
- }
- .note {
- margin-top: 14px;
- padding: 10px 12px;
- border-radius: 10px;
- background: var(--barley-yellow-soft);
- border: 1px solid #f0dfb4;
- font-size: 12px;
- line-height: 1.55;
- color: #7a5a12;
- }
- .stage {
- display: flex;
- justify-content: center;
- }
- .phone {
- width: 375px;
- max-width: 100%;
- background: var(--bg-page);
- border-radius: 28px;
- border: 1px solid var(--border);
- box-shadow: var(--shadow-soft);
- overflow: hidden;
- min-height: 720px;
- display: flex;
- flex-direction: column;
- }
- .status-bar {
- height: 28px;
- background: linear-gradient(180deg, #0a9f6d 0%, #087f57 100%);
- }
- .screen { display: none; flex: 1; flex-direction: column; }
- .screen.is-on { display: flex; }
- /* —— 首页 —— */
- .home-header {
- background: linear-gradient(180deg, #0a9f6d 0%, #087f57 100%);
- color: #fff;
- padding: 8px 16px 22px;
- border-radius: 0 0 22px 22px;
- }
- .brand { font-size: 13px; opacity: 0.9; }
- .hello { margin-top: 10px; font-size: 22px; font-weight: 700; }
- .meta {
- margin-top: 8px;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 12px;
- font-size: 12px;
- opacity: 0.92;
- }
- .meta__right {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- gap: 6px;
- flex-shrink: 0;
- }
- .home-logout {
- text-decoration: underline;
- text-underline-offset: 2px;
- cursor: pointer;
- opacity: 0.9;
- }
- .home-mp-legacy {
- font-size: 11px;
- text-decoration: underline;
- opacity: 0.75;
- cursor: pointer;
- }
- .home-mp-legacy.is-hidden { display: none; }
- .home-body { padding: 14px 12px 24px; flex: 1; }
- .panel {
- background: var(--surface);
- border-radius: var(--radius-card);
- border: 1px solid var(--border);
- padding: 14px 12px 8px;
- }
- .panel-hd {
- display: flex;
- justify-content: space-between;
- align-items: baseline;
- margin-bottom: 12px;
- padding: 0 4px;
- }
- .panel-title { font-size: 15px; font-weight: 700; }
- .hint { font-size: 12px; color: var(--text-muted); }
- .menu-grid {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 10px 4px;
- }
- .menu-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 6px;
- padding: 8px 4px;
- border: 0;
- background: transparent;
- cursor: pointer;
- border-radius: 10px;
- }
- .menu-item:hover { background: var(--brand-green-soft); }
- .menu-item.is-new .menu-icon {
- outline: 2px solid var(--barley-yellow);
- outline-offset: 2px;
- }
- .menu-icon {
- width: 44px;
- height: 44px;
- border-radius: 12px;
- display: grid;
- place-items: center;
- font-size: 18px;
- color: #fff;
- font-weight: 700;
- overflow: hidden;
- }
- .menu-icon img {
- width: 44px;
- height: 44px;
- object-fit: contain;
- display: block;
- }
- .menu-icon.is-plain {
- background: transparent !important;
- border-radius: 0;
- }
- .menu-title {
- font-size: 11px;
- line-height: 1.3;
- text-align: center;
- color: var(--text-primary);
- }
- .c1 { background: #0a9f6d; }
- .c2 { background: #2f8f7a; }
- .c3 { background: #3d8bb8; }
- .c4 { background: #5b7fbf; }
- .c5 { background: #7a6bb8; }
- .c6 { background: #cf8a19; }
- .c7 { background: transparent; }
- /* —— 通知设置页 —— */
- .nav {
- background: linear-gradient(180deg, #0a9f6d 0%, #087f57 100%);
- color: #fff;
- padding: 10px 12px 14px;
- display: flex;
- align-items: center;
- gap: 8px;
- }
- .nav__back {
- width: 36px;
- height: 36px;
- border: 0;
- background: rgba(255,255,255,0.16);
- color: #fff;
- border-radius: 10px;
- cursor: pointer;
- font-size: 18px;
- }
- .nav__title { font-size: 17px; font-weight: 700; }
- .notify-body { padding: 14px 12px 28px; flex: 1; }
- .status-banner {
- display: none;
- }
- .step-card {
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: var(--radius-card);
- padding: 14px;
- margin-bottom: 10px;
- }
- .step-card.is-done {
- border-color: #b7ebcf;
- background: linear-gradient(180deg, #f6fffb 0%, #fff 60%);
- }
- .step-hd {
- display: flex;
- align-items: flex-start;
- gap: 10px;
- }
- .step-num {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- background: var(--brand-green);
- color: #fff;
- display: grid;
- place-items: center;
- font-size: 14px;
- font-weight: 700;
- flex-shrink: 0;
- }
- .step-card.is-done .step-num {
- background: var(--success);
- }
- .step-title {
- font-size: 15px;
- font-weight: 700;
- line-height: 1.35;
- }
- .step-desc {
- margin-top: 4px;
- font-size: 12px;
- color: var(--text-muted);
- line-height: 1.5;
- }
- .step-badge {
- margin-left: auto;
- font-size: 11px;
- padding: 2px 8px;
- border-radius: 999px;
- background: #eef2f0;
- color: var(--text-muted);
- flex-shrink: 0;
- }
- .step-badge.is-done {
- background: var(--brand-green-soft);
- color: var(--brand-green-dark);
- }
- .step-actions { margin-top: 12px; padding-left: 38px; }
- .btn {
- appearance: none;
- border: 0;
- border-radius: 10px;
- padding: 10px 14px;
- font-size: 14px;
- font-weight: 600;
- cursor: pointer;
- min-height: 40px;
- }
- .btn-primary {
- background: var(--brand-green);
- color: #fff;
- width: 100%;
- }
- .btn-primary:disabled {
- background: #a7d7c4;
- cursor: default;
- }
- .btn-ghost {
- background: #fff;
- color: var(--brand-green-dark);
- border: 1px solid var(--border);
- width: 100%;
- }
- .qr-box {
- margin-top: 10px;
- display: none;
- padding: 12px;
- border-radius: 12px;
- border: 1px dashed #a7f3d0;
- background: #f8fffb;
- text-align: center;
- }
- .qr-box.is-on { display: block; }
- .qr-fake {
- width: 140px;
- height: 140px;
- margin: 0 auto 8px;
- border-radius: 8px;
- background:
- repeating-linear-gradient(0deg, #1f2a26 0 6px, transparent 6px 12px),
- repeating-linear-gradient(90deg, #1f2a26 0 6px, transparent 6px 12px);
- opacity: 0.18;
- }
- .qr-tip { font-size: 12px; color: var(--text-muted); }
- /* —— 登录页(对照:入口已移除) —— */
- .login-page {
- padding: 36px 20px 28px;
- flex: 1;
- background: linear-gradient(180deg, #e9f9f2 0%, #f5f8f7 42%, #f5f8f7 100%);
- }
- .login-brand { text-align: center; margin-bottom: 22px; }
- .login-logo {
- width: 72px;
- height: 72px;
- margin: 0 auto 10px;
- border-radius: 18px;
- background: var(--brand-green);
- color: #fff;
- display: grid;
- place-items: center;
- font-size: 28px;
- font-weight: 800;
- }
- .login-sub { font-size: 13px; color: var(--text-muted); }
- .login-card {
- background: #fff;
- border-radius: 16px;
- border: 1px solid var(--border);
- padding: 16px;
- box-shadow: var(--shadow-soft);
- }
- .field { margin-bottom: 12px; }
- .field label {
- display: block;
- font-size: 12px;
- color: var(--text-muted);
- margin-bottom: 6px;
- }
- .field .box {
- height: 42px;
- border: 1px solid var(--border);
- border-radius: 10px;
- background: #fafcfb;
- padding: 0 12px;
- display: flex;
- align-items: center;
- color: #9aaba3;
- font-size: 14px;
- }
- .login-submit {
- margin-top: 8px;
- height: 44px;
- border-radius: 10px;
- background: var(--brand-green);
- color: #fff;
- display: grid;
- place-items: center;
- font-weight: 700;
- }
- .login-follow-removed {
- margin-top: 16px;
- text-align: center;
- font-size: 12px;
- color: var(--text-muted);
- text-decoration: line-through;
- opacity: 0.55;
- }
- .login-follow-note {
- margin-top: 6px;
- text-align: center;
- font-size: 11px;
- color: var(--warning);
- }
- .toast {
- position: fixed;
- left: 50%;
- bottom: 48px;
- transform: translateX(-50%);
- background: rgba(31, 42, 38, 0.88);
- color: #fff;
- padding: 10px 16px;
- border-radius: 10px;
- font-size: 13px;
- opacity: 0;
- pointer-events: none;
- transition: opacity .2s;
- z-index: 20;
- }
- .toast.is-on { opacity: 1; }
- </style>
- </head>
- <body>
- <div id="app">
- <aside class="doc-panel">
- <h1>微信审批通知 · 菜单方案</h1>
- <p class="sub">
- 在「抄送我的」后新增「开启微信通知」菜单(铃铛图标),
- 把「关注服务号」与「账号绑定」合并为步骤 1 / 2。
- <strong>登录页「关注服务号」与首页顶栏入口均不展示</strong>,只保留新菜单。
- </p>
- <div class="section-title">页面</div>
- <div class="screen-nav" id="nav">
- <button type="button" data-screen="home" class="is-on">① 首页(新菜单)</button>
- <button type="button" data-screen="notify">② 开启微信通知(1 / 2)</button>
- <button type="button" data-screen="login">③ 登录页(入口移除示意)</button>
- </div>
- <div class="section-title">模拟状态</div>
- <div class="screen-nav">
- <button type="button" id="resetState">重置为未开启</button>
- <button type="button" id="markFollowed">仅完成步骤 1</button>
- <button type="button" id="markBound">完成步骤 1+2</button>
- </div>
- <div class="note">
- 交互说明:首页点「开启微信通知」进入设置页。<br />
- 图标:mobile-h5/static/menu-icons/oa-wechat-notify.png<br />
- 步骤 1:模拟关注(可弹二维码)。<br />
- 步骤 2:未关注时禁用;关注后可点「去绑定」。
- </div>
- </aside>
- <main class="stage">
- <div class="phone">
- <div class="status-bar"></div>
- <!-- 首页 -->
- <section class="screen is-on" data-screen="home">
- <div class="home-header">
- <div class="brand">中科兴皖 · 移动工作台</div>
- <div class="hello">您好,张三</div>
- <div class="meta">
- <div>产品经理 · 研发中心</div>
- <div class="meta__right">
- <span class="home-mp-legacy is-hidden" id="legacyHomeEntry">开启微信审批通知</span>
- <span class="home-logout">退出登录</span>
- </div>
- </div>
- </div>
- <div class="home-body">
- <div class="panel">
- <div class="panel-hd">
- <span class="panel-title">功能菜单</span>
- <span class="hint" id="menusHint">共 7 项</span>
- </div>
- <div class="menu-grid" id="menuGrid"></div>
- </div>
- </div>
- </section>
- <!-- 通知设置 -->
- <section class="screen" data-screen="notify">
- <div class="nav">
- <button type="button" class="nav__back" id="backHome" aria-label="返回">‹</button>
- <div class="nav__title">开启微信通知</div>
- </div>
- <div class="notify-body">
- <div class="step-card" id="step1Card">
- <div class="step-hd">
- <div class="step-num">1</div>
- <div style="flex:1;min-width:0">
- <div class="step-title">关注服务号</div>
- <div class="step-desc">关注后才能接收微信模板消息。可跳转服务号主页,或长按识别二维码。</div>
- </div>
- <span class="step-badge" id="step1Badge">未完成</span>
- </div>
- <div class="step-actions">
- <button type="button" class="btn btn-primary" id="btnFollow">去关注</button>
- <div class="qr-box" id="qrBox">
- <div class="qr-fake" aria-hidden="true"></div>
- <div class="qr-tip">长按识别关注(Demo 占位图)</div>
- <button type="button" class="btn btn-ghost" id="btnFollowDone" style="margin-top:10px">我已关注</button>
- </div>
- </div>
- </div>
- <div class="step-card" id="step2Card">
- <div class="step-hd">
- <div class="step-num">2</div>
- <div style="flex:1;min-width:0">
- <div class="step-title">绑定当前账号</div>
- <div class="step-desc">将服务号身份与系统账号关联,审批待办 / 抄送才能推送到你。</div>
- </div>
- <span class="step-badge" id="step2Badge">未完成</span>
- </div>
- <div class="step-actions">
- <button type="button" class="btn btn-primary" id="btnBind">去绑定</button>
- </div>
- </div>
- </div>
- </section>
- <!-- 登录页对照 -->
- <section class="screen" data-screen="login">
- <div class="login-page">
- <div class="login-brand">
- <div class="login-logo">皖</div>
- <div class="login-sub">员工工作台登录</div>
- </div>
- <div class="login-card">
- <div class="field">
- <label>账号</label>
- <div class="box">请输入用户名 / 工号</div>
- </div>
- <div class="field">
- <label>密码</label>
- <div class="box">请输入密码</div>
- </div>
- <div class="login-submit">登录</div>
- </div>
- <div class="login-follow-note" style="margin-top:16px">登录页不再展示「关注服务号」入口</div>
- </div>
- </section>
- </div>
- </main>
- </div>
- <div class="toast" id="toast"></div>
- <script>
- const MENUS = [
- { title: '发起审批', cls: 'c1', icon: '发' },
- { title: '草稿箱', cls: 'c2', icon: '草' },
- { title: '待办中心', cls: 'c3', icon: '待' },
- { title: '已办中心', cls: 'c4', icon: '已' },
- { title: '我发起的', cls: 'c5', icon: '我' },
- { title: '抄送我的', cls: 'c6', icon: '抄' },
- {
- title: '开启微信通知',
- cls: 'c7',
- iconImg: './oa-wechat-notify.png',
- isNew: true,
- openNotify: true,
- plain: true
- }
- ]
- const state = {
- followed: false,
- bound: false,
- showQr: false
- }
- const els = {
- nav: document.getElementById('nav'),
- screens: document.querySelectorAll('.screen'),
- menuGrid: document.getElementById('menuGrid'),
- menusHint: document.getElementById('menusHint'),
- step1Card: document.getElementById('step1Card'),
- step2Card: document.getElementById('step2Card'),
- step1Badge: document.getElementById('step1Badge'),
- step2Badge: document.getElementById('step2Badge'),
- btnFollow: document.getElementById('btnFollow'),
- btnBind: document.getElementById('btnBind'),
- qrBox: document.getElementById('qrBox'),
- toast: document.getElementById('toast')
- }
- function showToast(msg) {
- els.toast.textContent = msg
- els.toast.classList.add('is-on')
- clearTimeout(showToast._t)
- showToast._t = setTimeout(() => els.toast.classList.remove('is-on'), 1600)
- }
- function showScreen(name) {
- els.screens.forEach((s) => s.classList.toggle('is-on', s.dataset.screen === name))
- els.nav.querySelectorAll('button').forEach((b) => {
- b.classList.toggle('is-on', b.dataset.screen === name)
- })
- }
- function renderMenus() {
- els.menusHint.textContent = '共 ' + MENUS.length + ' 项'
- els.menuGrid.innerHTML = MENUS.map((m) => {
- const extra = m.isNew ? ' is-new' : ''
- const iconCls = 'menu-icon ' + m.cls + (m.plain ? ' is-plain' : '')
- const iconInner = m.iconImg
- ? '<img src="' + m.iconImg + '" alt="" />'
- : m.icon
- return (
- '<button type="button" class="menu-item' + extra + '" data-open="' + (m.openNotify ? '1' : '0') + '">' +
- '<span class="' + iconCls + '">' + iconInner + '</span>' +
- '<span class="menu-title">' + m.title + '</span>' +
- '</button>'
- )
- }).join('')
- }
- function renderNotify() {
- els.step1Card.classList.toggle('is-done', state.followed)
- els.step2Card.classList.toggle('is-done', state.bound)
- els.step1Badge.textContent = state.followed ? '已完成' : '未完成'
- els.step2Badge.textContent = state.bound ? '已完成' : '未完成'
- els.step1Badge.classList.toggle('is-done', state.followed)
- els.step2Badge.classList.toggle('is-done', state.bound)
- els.btnFollow.textContent = state.followed ? '重新打开关注页' : '去关注'
- els.qrBox.classList.toggle('is-on', state.showQr && !state.followed)
- els.btnBind.disabled = !state.followed || state.bound
- els.btnBind.textContent = state.bound ? '已绑定' : (state.followed ? '去绑定' : '请先完成步骤 1')
- }
- els.nav.addEventListener('click', (e) => {
- const btn = e.target.closest('button[data-screen]')
- if (!btn) return
- showScreen(btn.dataset.screen)
- })
- document.getElementById('backHome').addEventListener('click', () => showScreen('home'))
- els.menuGrid.addEventListener('click', (e) => {
- const item = e.target.closest('.menu-item')
- if (!item) return
- if (item.dataset.open === '1') {
- showScreen('notify')
- return
- }
- showToast(item.querySelector('.menu-title').textContent)
- })
- els.btnFollow.addEventListener('click', () => {
- state.showQr = true
- renderNotify()
- showToast('Demo:打开服务号主页 / 二维码')
- })
- document.getElementById('btnFollowDone').addEventListener('click', () => {
- state.followed = true
- state.showQr = false
- renderNotify()
- showToast('步骤 1 已完成')
- })
- els.btnBind.addEventListener('click', () => {
- if (!state.followed || state.bound) return
- state.bound = true
- renderNotify()
- showToast('步骤 2 已完成 · 通知已开启')
- })
- document.getElementById('resetState').addEventListener('click', () => {
- state.followed = false
- state.bound = false
- state.showQr = false
- renderNotify()
- showScreen('notify')
- showToast('已重置')
- })
- document.getElementById('markFollowed').addEventListener('click', () => {
- state.followed = true
- state.bound = false
- state.showQr = false
- renderNotify()
- showScreen('notify')
- })
- document.getElementById('markBound').addEventListener('click', () => {
- state.followed = true
- state.bound = true
- state.showQr = false
- renderNotify()
- showScreen('notify')
- })
- renderMenus()
- renderNotify()
- </script>
- </body>
- </html>
|