艾永健批发小程序 · 微信小程序

艾永健批发商城 · 界面设计稿

主色与色板

主色
#E53935
渐变亮
#FF5A55
深色
#C62828
浅底
#FFF5F5
主文字
#1F2329
次文字
#5A6069
辅助
#9AA0A6
成功
#07C160

设计规范

  • 背景#FFFFFF 卡片 + #F7F8FA 页面底
  • 圆角卡片 12px / 按钮 23px / 图片 10px
  • 字号标题 17 | 正文 13.5 | 辅助 11
  • 价格红色加粗,¥ 符号 11px,起批量灰色 11px
  • 间距页面左右统一 14px,卡片间距 10px

关键交互规则

  • 登录首登自动注册,后续自动识别身份
  • 下单余额不足 → 按钮置灰 + 提示联系后台充值
  • 购物车结算前统一校验余额(事务扣减)
  • 充值前端无充值入口,余额由管理员线下充值
  • 起批数量不得低于起批量,步进器自动锁定
登录/注册→ 首页 · 分类选品→ 商品详情 · 选规格→ 加入购物车→ 结算(校验余额)→ 余额支付→ 订单跟踪→ 我的 · 余额明细

01登录 / 注册

手机号 + 短信验证码 · 微信一键获取手机号 · 首次登录自动注册
9:41100%
+86138 8888 8888
请输入短信验证码获取验证码
登录 / 注册
✓ 已阅读并同意 《用户服务协议》 与 《隐私政策》,未注册手机号将自动创建账号
其他登录方式
💬 微信一键登录

批发账号由后台开通余额后使用
如需充值请联系管理员

登录 / 注册页验证码 60s 倒计时、防刷限流;微信授权直接取手机号
9:41100%
头像
🙂
昵称
手机号 138 8888 8888(已绑定)
首次登录将自动注册账号,初始余额为 ¥0.00。
下单前请联系管理员为账号充值余额。
完成,开始选货
首次注册 · 资料完善手机号自动带入且不可改,昵称/头像可后续在「我的」修改

02首页 · 分类与商品列表

轮播公告 → 分类宫格 → 分类筛选 → 商品瀑布流(图片 / 名称 / 批发价 / 起批量 / 多规格)
9:41100%
👞
男鞋
👠
女鞋
🧒
童鞋
👟
运动鞋
🥾
马丁靴
🩴
凉拖鞋
👜
箱包
🧦
袜子
🧴
护理
⋯
全部分类
👞
头层牛皮商务正装皮鞋 男款
多规格爆款
¥128/10双起批
👟
轻量透气跑步运动鞋 男女同款
多规格
¥89/20双起批
👠
细高跟尖头单鞋 女款春秋
多规格新品
¥108/12双起批
🥾
厚底英伦马丁靴 秋冬加绒
多规格
¥156/10双起批
首页轮播图可作促销/公告位;分类宫格 + 横向筛选条,商品双列瀑布流
9:41100%
综合
销量
批发价 ⇅
上新
全部商务皮鞋休闲鞋 板鞋豆豆鞋
👞
头层牛皮商务正装皮鞋 男款
多规格爆款
¥128/10双起批
👞
软底驾车豆豆鞋 一脚蹬
多规格
¥96/20双起批
🥾
油蜡皮系带工装靴 男款
多规格新品
¥178/10双起批
👟
轻便透气网面休闲板鞋
多规格
¥76/30双起批
👞
真皮防滑爸爸鞋 软底舒适
多规格
¥118/10双起批
👞
潮流拼接皮鞋 商务休闲两用
多规格
¥136/12双起批
分类商品列表顶部三级排序 + 二级标签筛选,双列卡片滚动加载

03商品详情 · 多规格与起批校验

大图轮播 · 批发价与起批量 · 尺码/颜色多规格 · 库存 · 加入购物车 / 立即购买(余额不足置灰)
9:41100%
👞 ‹ 1 / 6
¥128批发价 · 10双起批
头层牛皮商务正装皮鞋 男款 系带尖头
库存 2,300 双销量 12,860 双48h 发货
规格 黑色 / 39-44码(多规格可选) ›
起批量 10 双起批,可按整箱递增
服务 7天换货厂家直发运费到付

商品详情

• 鞋面:头层牛皮,细腻有光泽,不易变形
• 内里:透气猪皮内里,干爽不闷脚
• 鞋底:橡胶大底,防滑耐磨,静音设计
• 尺码:39 / 40 / 41 / 42 / 43 / 44(标准码)
• 颜色:黑色 / 棕色 / 深灰

👞
💬客服
☆收藏
🛒购物车
加入购物车
立即购买
商品详情页 · 余额充足底部固定操作栏;「立即购买」需通过余额校验才可点击
9:41100%
👞1 / 6
¥128批发价 · 10双起批
头层牛皮商务正装皮鞋 男款 系带尖头
👞
¥128
库存 2,300 双
已选:黑色 / 41码 · 20双
×
颜色
黑色棕色深灰色
尺码 (10双起批)
394041 424344(无货)
购买数量 最低 10 双 −20+
确定
多规格选择面板标签式规格选择,无货规格置灰不可选;数量低于起批量自动回弹
9:41100%
📍
张小朋138 8888 8888 广东省 广州市 白云区 三元里大道 88 号 鞋城 A 座 1203
👞
头层牛皮商务正装皮鞋 男款 系带尖头
黑色 / 41码
¥128×20
支付方式
✓ 余额支付 当前余额 ¥12,800.00
本商城仅支持余额支付,无在线支付通道。
余额不足请联系后台管理员充值。
商品金额¥2,560.00
运费到付
应付金额¥2,560.00
余额不足,无法提交订单

需 ¥2,560.00 | 可用 ¥12,800.00 | 差额 ¥0.00

合计
¥2,560.00
提交订单
确认订单 & 余额不足提示展示可用余额与差额;不足时按钮置灰并提示联系后台充值

04购物车

规格展示 · 修改数量 · 删除 · 全选 · 结算前统一校验余额
9:41100%
✓
👞
头层牛皮商务正装皮鞋 男款 系带尖头
黑色 / 41码
¥128
−20+
✓
🥾
厚底英伦马丁靴 秋冬加绒款
棕色 / 40码
¥156
−10+
👠
细高跟尖头单鞋 女款春秋新款
裸色 / 37码
¥108
−12+
👟
轻量透气跑步运动鞋 男女同款
灰色 / 42码
¥89
−20+
— 已到底部 —
✓全选
合计(不含运费)¥4,120.00
结算(2)
购物车列表展示规格与单价,支持步进改量 / 滑动删除 / 单选全选
9:41100%
已选商品(2 件 / 30 双)
👞
头层牛皮商务正装皮鞋
黑色/41码 ×20
¥2,560
🥾
厚底英伦马丁靴
棕色/40码 ×10
¥1,560
商品金额¥4,120.00
运费到付
应付总额¥4,120.00
⚠️
余额不足,无法结算
账户余额 ¥2,000.00,本单需 ¥4,120.00,还差 ¥2,120.00。
本商城不支持在线支付,请联系后台管理员为账号充值后再提交。
余额不足,无法结算
联系管理员充值
✓全选
合计(不含运费)¥4,120.00
结算(2)
结算余额校验结算前统一校验,不足则拦截并给出差额与充值指引

05订单模块

待付款 / 待发货 / 已发货 / 已完成 / 已取消 · 订单详情 · 物流轨迹跟踪(承运商 / 运单号 / 时间轴)
9:41100%
全部
待付款
待发货
已发货
已完成
订单号 20261008093145待付款
👞
头层牛皮商务正装皮鞋 男款 系带尖头
黑色 / 41码
¥128×20
共 20 双 合计 ¥2,560.00
取消订单
余额支付
订单号 20261007184402待发货
🥾
厚底英伦马丁靴 秋冬加绒款
棕色 / 40码
¥156×10
共 10 双 合计 ¥1,560.00
联系客服
提醒发货
订单号 20261006102388已发货
👟
轻量透气跑步运动鞋 男女同款
灰色 / 42码
¥89×20
共 20 双 合计 ¥1,780.00
查看物流
确认收货
订单号 20261002150011已完成
👠
细高跟尖头单鞋 女款春秋新款
裸色 / 37码
¥108×12
共 12 双 合计 ¥1,296.00
删除订单
再次购买
订单列表(全部)状态色区分:待付款橙、待发货红、已发货绿、已完成灰
9:41100%

待发货

商家正在备货,预计 48 小时内发出

收货信息
📍
张小朋138 8888 8888 广东省 广州市 白云区 三元里大道 88 号 鞋城 A 座 1203
商品清单
🥾
厚底英伦马丁靴 秋冬加绒款
棕色 / 40码
¥156
×10 双
金额明细
商品金额¥1,560.00
运费到付
优惠−¥0.00
实付金额¥1,560.00
支付与订单信息
支付方式余额支付
支付时间2026-10-07 18:44:02
订单编号20261007184402
下单时间2026-10-07 18:43:51
物流单号待商家发货后生成
联系客服
提醒发货
订单详情状态头图 + 收货信息 + 商品清单 + 金额明细 + 余额支付凭证
9:41●●●● ⚡ 100%
🚚

运输中

预计 10-09 18:00 前送达

顺丰速运 SF1234567890123 复制
收货信息
📍
李小美139 6666 6666 上海市 徐汇区 漕溪北路 331 号 汇金大厦 8 楼
物流轨迹

【上海市】快件已到达 上海徐汇分拨中心,正在派送中

2026-10-08 08:20:11

【广州市】快件已到达 广州白云集散中心,正在发往 上海

2026-10-07 09:12:03

【广州市】顺丰速运 已收取快件

2026-10-06 20:35:41

商家已发货,等待快递揽收

2026-10-06 18:12:30

订单已支付,商家备货中

2026-10-06 10:23:08

订单商品
👟
轻量透气跑步运动鞋 男女同款
灰色 / 42码
¥89
×20 双
联系客服
确认收货
物流信息查看页承运商与运单号可一键复制 · 时间轴轨迹倒序展示,最新节点红色高亮

06我的 · 余额 / 收藏 / 浏览 / 资料

余额明细(充值 + 消费)· 收藏夹 · 浏览记录 · 修改资料 · 修改密码 · 退出登录
9:41100%
🙂

张小朋批发客户

138 8888 8888

编辑资料 ›
账户余额(元)
¥12,800.00
仅可用于下单支付 · 充值请联系管理员
›
余额明细
📋我的订单全部订单 ›
💰余额明细充值 / 消费记录 ›
⭐我的收藏12 件商品 ›
🕘浏览记录›
✏️修改资料昵称 / 头像 ›
🔒修改密码›
💬联系客服›
退出登录
我的红色渐变头部 + 悬浮余额卡;前端无充值按钮,仅展示余额与明细入口
9:41100%
当前账户余额(元)
¥12,800.00
累计充值 ¥28,000.00 累计消费 ¥15,200.00
充值记录
消费记录
+
管理员充值2026-10-05 10:22:18
+ ¥10,000.00操作员:admin
+
管理员充值2026-09-28 15:06:41
+ ¥8,000.00备注:秋季备货
−
订单消费2026-09-20 09:31:07
− ¥2,560.00订单 20260920093100
−
订单消费2026-09-12 20:14:55
− ¥1,780.00订单 20260912201400
+
管理员充值2026-09-01 11:40:02
+ ¥10,000.00操作员:admin
— 没有更多了 —
余额明细充值/消费双 Tab;充值记录含操作员、时间、金额、备注;消费关联订单号
9:41100%
共 12 件收藏商品 · 左滑或点「取消」可移除
👞
头层牛皮商务正装皮鞋 男款 系带尖头
收藏于 2026-10-06
¥128/10双起批
取消收藏
🥾
厚底英伦马丁靴 秋冬加绒款
收藏于 2026-10-04
¥156/10双起批
取消收藏
👠
细高跟尖头单鞋 女款春秋新款
收藏于 2026-09-30
¥108/12双起批
取消收藏
👟
轻量透气跑步运动鞋 男女同款
收藏于 2026-09-26
¥89/20双起批
取消收藏
收藏夹列表式展示,含收藏时间、批发价、取消收藏操作
9:41100%
今天
👞
头层牛皮商务正装皮鞋 男款 系带尖头
11:28 浏览 · 库存 2,300
¥128
›
🥾
厚底英伦马丁靴 秋冬加绒款
10:52 浏览 · 库存 860
¥156
›
昨天
👠
细高跟尖头单鞋 女款春秋新款
19:06 浏览 · 库存 1,420
¥108
›
👟
轻量透气跑步运动鞋 男女同款
15:33 浏览 · 库存 3,100
¥89
›
👞
软底驾车豆豆鞋 一脚蹬
09:12 浏览 · 库存 2,050
¥96
›
浏览记录按时间倒序、以自然日分组,显示浏览时刻与库存快照
9:41100%
头像
🙂
›
昵称
手机号 138 8888 8888
微信 已绑定
注册时间 2026-08-15
手机号为账号唯一标识,暂不支持自助修改;如需更换请联系管理员。
保存修改
修改资料头像支持相册/拍照上传,昵称可改,手机号只读展示
9:41100%
手机号 138 8888 8888
验证码 获取验证码
新密码
确认密码

密码强度:中 | 建议 8-20 位,含字母与数字组合

为保障资金安全,修改密码需通过手机号短信验证;
新密码将加密存储(bcrypt),下次登录请使用新密码。
确认修改
修改密码手机号验证 → 设置新密码;含强度提示与加密存储说明
9:41100%
全部
待付款
待发货
已发货
已完成
近 1 个月
近 3 个月
共 2 笔待付款
20261008093145待付款
👞
头层牛皮商务正装皮鞋 男款 系带尖头
黑色 / 41码
¥128×20
⏱ 剩余 22:14 自动取消 | 请尽快使用余额完成支付
共 20 双 合计 ¥2,560.00
取消订单
余额支付
20261007220010待付款
👞
真皮防滑爸爸鞋 软底舒适
深棕色 / 42码
¥118×10
共 10 双 合计 ¥1,180.00
取消订单
余额支付
订单筛选 · 待付款列表顶部时间范围筛选;待付款自动倒计时取消

技术实现要点(对应本设计稿)

1. 余额与订单事务一致性:下单时在同一个数据库事务中 → 校验余额(SELECT ... FOR UPDATE 行锁)→ 扣减余额 → 写余额流水 → 创建订单,任一失败整体回滚,避免超卖或负余额。
2. 登录鉴权:短信验证码 60s 冷却 + 单手机号/IP 频次限制,验证码 5 分钟失效;密码 bcrypt 加密;接口统一 JWT 鉴权,余额/订单类接口需二次校验用户身份。
3. 多规格(SKU):商品表 + SKU 表(颜色 × 尺码),SKU 独立维护库存与价格;C 端库存为 0 的规格自动置灰。
4. 起批量校验:前端步进器锁最小值,后端二次校验,防绕过。
5. 充值审计:余额只允许管理员侧变更,每次变更落 recharge_log(操作员 / 时间 / 金额 / 备注 / 前后余额),用户端不暴露任何充值入口。
6. 物流追踪:发货时录入承运商与运单号,通过快递 100 / 快递鸟等聚合接口按运单号拉取轨迹并缓存;订单列表只取最新节点,物流详情页按时间倒序渲染完整时间轴,最新节点高亮。
7. 推荐技术栈:前端微信小程序原生 / Taro / UniApp;后端 Node.js(NestJS)或 Java(Spring Boot)+ MySQL + Redis(验证码、库存缓存);商品图走对象存储。