/* ============================================================ screens-extra.jsx — 品牌故事 / 會員 / 結帳 / 完成 ============================================================ */ /* ---- 品牌故事 ---- */ function AboutScreen() { const app = useApp(); return (
EST. 2018 · 台灣 · 山林小農
🍌

把一根香蕉,
好好種、好好送到你家

「蕉您來好康」是一群相信土地的農人。我們在海拔 800 公尺的山坡地友善耕作,不催熟、不搶快, 只為了讓你嚐到香蕉本來該有的綿密與香甜。

{[['🏔️', '海拔 800m', '山坡地栽種'], ['🌱', '友善耕作', '減藥草生'], ['🚚', '48 小時', '產地到府'], ['📋', '產銷履歷', '全程可溯源']].map(([e, a, b]) => (
{e}
{a}
{b}
))}

我們的堅持

市場上多數香蕉為了賣相與運送,會提早採收、用藥催熟。我們選擇相反的路——讓香蕉在欉上自然黃熟, 採收後直接走冷鏈宅配。雖然成本更高、損耗更大,但這是我們認為對的事。

每一箱出貨的水果都附上產銷履歷,你可以清楚知道它是誰、在哪裡、怎麼種出來的。 支持我們,就是支持一塊被溫柔對待的土地,以及一群願意慢慢來的農人。

); } /* ---- 會員(登入 / 後台)---- */ function AccountScreen() { const app = useApp(); if (!app.user) return ; return (

嗨,{app.user.name} 👋

{[['12', '累積訂單'], ['NT$8,640', '消費總額'], ['340', '好康紅利']].map(([n, l]) => (
{n}
{l}
))}

最近的訂單

{[['#10231', '有機山蕉 × 2、香蕉脆片 × 1', '已送達', 'var(--success)'], ['#10198', '每週鮮果箱', '配送中', 'var(--accent-strong)']].map(([no, items, st, c]) => (
{no}
{items}
{st}
))}
); } function LoginCard() { const app = useApp(); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const submit = (e) => { e.preventDefault(); app.login({ name: name.trim() || '好康會員', email: email.trim() || 'guest@banana.farm' }); }; return (
🍌

歡迎回來,
一起來好康!

登入即可累積好康紅利、管理訂閱鮮果箱,並追蹤每一筆訂單的配送進度。

🔒 本站為設計示範,不會儲存任何真實資料

會員登入 / 註冊

setName(e.target.value)} placeholder="怎麼稱呼你?" /> setEmail(e.target.value)} placeholder="you@example.com" />
或使用
 ); } /* ---- 結帳 ---- */ function CheckoutScreen() { const app = useApp(); const items = app.cart; const subtotal = items.reduce((s, it) => s + it.p.price * it.qty, 0); const shipping = subtotal >= 600 || subtotal === 0 ? 0 : 80; const submit = (e) => { e.preventDefault(); app.placeOrder(); }; if (items.length === 0) { return (
🧺

購物車是空的

 ); } return (
app.navigate('shop')}> 繼續購物

結帳

收件資訊

付款方式

{[['ph-credit-card', '信用卡 / 行動支付'], ['ph-truck', '貨到付款(+30 元手續費)'], ['ph-bank', 'ATM 轉帳']].map(([i, l], idx) => ( ))}

訂單摘要

{items.map((it) => (
{it.p.emoji}
{it.p.name}
數量 {it.qty}
{NT(it.p.price * it.qty)}
))}
點擊下單即代表同意服務條款(示範用途)
 ); } /* ---- 完成 ---- */ function SuccessScreen() { const app = useApp(); const o = app.lastOrder || { no: '#00000', total: 0 }; return (
🎉

訂單成立!

謝謝你的支持 🍌 我們已收到訂單,將盡快為你新鮮採收、冷鏈出貨。

); }