init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { clearAuth, request } from '../lib/api';
+
+export default function StatusPage() {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(true);
+  const [store, setStore] = useState<Record<string, unknown> | null>(null);
+  const [lastUpdate, setLastUpdate] = useState('');
+  const [showModal, setShowModal] = useState(false);
+  const [pendingOpen, setPendingOpen] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    request('SHOP_H5', '/shop/dashboard').then((d) => {
+      const s = d.store as Record<string, unknown>;
+      setStore(s);
+      setOpen(String(s?.status) === 'OPEN');
+      if (s?.updatedAt) {
+        setLastUpdate(new Date(String(s.updatedAt)).toLocaleString('zh-CN'));
+      }
+    });
+  }, []);
+
+  function requestToggle(next: boolean) {
+    if (next === open) return;
+    setPendingOpen(next);
+    setShowModal(true);
+  }
+
+  async function confirmToggle() {
+    if (pendingOpen === null) return;
+    const next = pendingOpen ? 'OPEN' : 'PAUSED';
+    try {
+      await request('SHOP_H5', '/shop/store/status', {
+        method: 'PUT',
+        body: JSON.stringify({ status: next }),
+      });
+      setOpen(pendingOpen);
+      setLastUpdate(new Date().toLocaleString('zh-CN'));
+    } catch {
+      /* keep current state */
+    } finally {
+      setShowModal(false);
+      setPendingOpen(null);
+    }
+  }
+
+  const openTime = String(store?.openTime || '09:30');
+  const closeTime = String(store?.closeTime || '22:00');
+
+  return (
+    <div className="shop-status-page">
+      <header className="shop-status-header app-page-header">
+        <button type="button" className="app-page-header-action shop-redeem-back" onClick={() => navigate(-1)} aria-label="返回">
+          <span className="material-symbols-outlined">arrow_back</span>
+        </button>
+        <h1 className="app-page-title">门店管理</h1>
+        <button
+          type="button"
+          className="shop-status-logout app-page-header-action app-page-header-action--end"
+          onClick={() => { clearAuth(); navigate('/login'); }}
+        >
+          <span className="material-symbols-outlined" style={{ fontSize: 20 }}>logout</span>
+          退出登录
+        </button>
+      </header>
+
+      <div className="shop-status-content">
+        <section className="shop-status-card">
+          <div className="shop-status-icon-wrap">
+            <div className={`shop-status-icon-outer${open ? ' open' : ' closed'}`}>
+              <div className={`shop-status-icon-inner${open ? ' open' : ' closed'}`}>
+                <span className="material-symbols-outlined">storefront</span>
+              </div>
+            </div>
+            <span className="shop-status-check">
+              <span className={`material-symbols-outlined shop-fill-icon${open ? '' : ''}`} style={{ fontSize: 14, color: open ? 'var(--color-success-green)' : 'var(--color-subtle-gray)' }}>
+                {open ? 'check_circle' : 'cancel'}
+              </span>
+            </span>
+          </div>
+
+          <h2 className={`shop-status-label${open ? ' open' : ' closed'}`}>
+            {open ? '营业中' : '临时闭店'}
+          </h2>
+
+          <label className="shop-status-switch">
+            <input
+              type="checkbox"
+              checked={open}
+              onChange={(e) => requestToggle(e.target.checked)}
+            />
+            <span className="shop-status-switch-track" />
+          </label>
+
+          <p className="shop-status-hours-label">营业时间</p>
+          <p className="shop-status-hours">{openTime} - {closeTime}</p>
+          {lastUpdate && <p className="shop-status-updated">最后修改于 {lastUpdate}</p>}
+        </section>
+
+        <div className={`shop-status-hint${open ? ' open' : ' closed'}`}>
+          <span className="material-symbols-outlined">info</span>
+          <p>
+            {open
+              ? '当前处于营业状态，用户可在您的门店核销餐券。'
+              : '当前处于休息状态，用户将无法看到您的门店或进行核销。'}
+          </p>
+        </div>
+      </div>
+
+      {showModal && (
+        <div className="shop-status-modal" role="dialog" aria-modal="true">
+          <div className="shop-status-modal-card">
+            <h4 className="shop-status-modal-title">确认切换状态？</h4>
+            <p className="shop-status-modal-desc">
+              {pendingOpen
+                ? '切换至“营业中”后，用户可正常选择本店核销餐券。'
+                : '切换至“临时闭店”后，用户将无法选择本店核销餐券。'}
+            </p>
+            <div className="shop-status-modal-actions">
+              <button type="button" className="shop-status-modal-cancel" onClick={() => { setShowModal(false); setPendingOpen(null); }}>
+                取消
+              </button>
+              <button type="button" className="shop-status-modal-confirm" onClick={confirmToggle}>
+                确认切换
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}