STYLE · A 轻奢金棕

多用户商城 H5 · 页面规划原型

基于项目已有「轻奢金棕」设计令牌体系（uni.scss → :root CSS 变量）规划并可视化商城 H5 核心页面。组件写法沿用工程现有约定（c-card / c-button / c-tag + app.scss 工具类），仅套用本地后端 API（见《商城前端设计方案》v3）。

主色 #D4AF37 金 辅助 #6B3E1B 棕 底 #F8F5F0 米白 目标 H5 / 小程序 / APP 三端同构 日期 2026-08-10

设计令牌（轻奢金棕）

已沉淀在 uni.scss / styles/app.scss，换肤即改这两个文件，组件零改动。下方为 H5 预览实际映射值。
--primary 金
#D4AF37
--primary-dark
#B88A1A
--primary-light
#FFF9E6
--secondary 棕
#6B3E1B
--bg 米白
#F8F5F0
--primary-bg
#FDF6E3
--gradient-gold
135deg 金→深金
--bg-product
#F5F0E6
圆角：sm 8 / md 12 / lg 16 / xl 20 / pill 999；阴影：柔和小尺度（0 4px 16px rgba(0,0,0,.06)）；字体：PingFang SC；价格/强调一律用金色。

H5 页面规划（MVP 闭环）

阶段 1 优先落地「购物闭环」相关页面，与《商城前端设计方案》v3 分阶段一致。括号内为页面文件（pages/mall/...）。

① 购物主链路

商城首页 mall/index
商品分类 mall/category
商品搜索 mall/search
商品列表 mall/goods/list
商品详情 mall/goods/detail
确认订单 mall/order/confirm
支付结果 mall/pay/result

② 购物车 / 订单

购物车 mall/cart
我的订单 mall/order/list
订单详情 mall/order/detail
申请退款 mall/order/refund
收货地址 mall/address
物流跟踪 mall/logistics

③ 用户中心

个人中心 ucenter/index
会员信息 ucenter/member
我的收藏 ucenter/favorite
优惠券 ucenter/coupon
我的钱包 ucenter/wallet
消息中心 ucenter/message

④ 高级业务（P2）

拼团 mall/group
秒杀 mall/seckill
权益中心 ucenter/rights
团队邀请 ucenter/team
积分商城 mall/point

可复用 UI 组件清单

基于现有 c-button / c-card / c-tag / c-modal 扩展，统一走金棕令牌。组件写法沿用 Options API + app.scss 工具类。
🔍
搜索栏 SearchBar
金棕胶囊、金色图标
🖼️
轮播 Banner
金棕渐变占位图
🧭
金刚区 IconNav
浅金圆角图标
🎟️
优惠券 Coupon
金边虚线卡
🛍️
商品卡 GoodsCard
grid/list 双形态
💰
价格 Price
金色大号+划线原价
🏪
店铺卡 ShopCard
金标 logo+进店
📐
规格弹窗 Spec
pill 选项高亮
🛒
购物车行 CartItem
勾选+步进器
🧾
结算栏 SettleBar
底部固定金色支付
📑
分段 Tab Tabs
金 underline 指示
📭
空态 Empty
金棕插画+引导
🔘
按钮 Button
c-btn 金渐变主按钮

可视化原型（可交互）

点击下方手机底部 Tab 切换页面；在首页/详情点击商品可跳转详情。所有组件按金棕令牌渲染。
原型为规划示意，文案/图片为占位，落地时由本地 API 注入真实数据。
金 #D4AF37棕 #6B3E1B米白 #F8F5F0
9:41●●● 5G 100%
🔍 搜索
🆕
新品
🔥
热销
🏷️
特惠
🎁
礼盒
🏪
店铺
领券中心更多 ›
¥50
全场满 399 可用
会员专享 · 7天有效
领取
¥20
无门槛券
新客礼遇 · 限领1张
领取
臻选好物查看全部 ›
👜
轻奢真皮手提包 头层牛皮通勤
会员价
¥899¥1299
⌚
金棕机械腕表 自动上链商务
热销
¥1680¥2380
🧴
臻养精华套装 抗皱紧致礼盒
礼盒
¥569¥799
🕯️
香氛蜡烛 雪松琥珀居家氛围
新品
¥199¥259
🏠首页
📑分类
🛒购物车
👤我的
说明：本原型为「轻奢金棕」商城 H5 规划示意，覆盖首页 / 分类 / 商品详情 / 购物车 / 个人中心 5 个核心屏。
详情页通过首页/分类/购物车点击商品触发；底部 Tab 切换其余页面。落地时数据全部来自本地 ThinkPHP 后端（/api + /app/member）。
更多页面（确认订单 / 地址 / 订单列表 / 优惠券 / 钱包 / 消息 等）按阶段规划逐步补齐，组件复用上述清单。