Loading...
加载中...

Bootstrap5 实战 商城页面规划

以下是基于 Bootstrap 5.3.8 构建的多商户商城 C 端用户前端完整页面清单。所有页面均依托 Bootstrap 5 的 12 列栅格系统、6 级响应式断点与原生交互组件(轮播、标签页、模态框、折叠面板等)实现,天然适配桌面端与移动端,保证全端交互体验统一。

页面按用户使用路径与业务模块划分,共 8 大模块 40+ 核心页面,且全部突出多商户场景的核心特性(商户独立主页、订单按商户拆分、购物车按店分组、商户独立客服等):


一、公共入口与基础页面

  1. 平台首页 商城流量主入口,集成顶部全局搜索栏、全部分类导航、轮播广告位、平台推荐入驻商户、热销爆款商品、营销活动入口、快捷功能区;底部展示平台信息、友情链接与备案信息,是用户浏览商品与参与活动的核心集散页。
  2. 全站搜索结果页 支持关键词同时搜索商品与入驻商户,提供综合、销量、价格、好评等排序方式,可按商品分类、价格区间、商户类型、配送方式等多维度筛选;搜索结果同时展示匹配商品与匹配商户入口,满足多商户场景下的复合搜索需求。
  3. 商品分类页 左侧展示平台一级 / 二级 / 三级分类树,右侧展示对应分类下的商品列表,支持排序与条件筛选;顶部展示分类 Banner 与热门子分类,帮助用户快速定位目标品类。
  4. 用户登录页 提供手机号验证码登录、账号密码登录两种方式,支持第三方账号快捷登录;内置注册入口、忘记密码入口,勾选用户协议与隐私政策后即可登录。
  5. 用户注册页 支持手机号注册,完成短信验证、设置登录密码、确认协议流程;可拓展邮箱注册渠道,注册成功后自动登录并跳转首页。
  6. 找回密码页 通过绑定手机号 / 邮箱接收验证码,验证身份后重置登录密码,完成后跳转登录页。
  7. 系统错误页(404/500) 页面不存在或系统异常时的友好提示页,提供返回首页、返回上一步快捷按钮,降低用户流失率。

二、商品与商户浏览模块(多商户核心场景)

  1. 商品详情页 展示商品主图轮播、视频预览、规格参数、价格库存、销量评分等核心信息;支持规格选择、数量调整、加入购物车、立即购买、收藏商品操作;内置商品详情图文、用户评价、问大家、商品参数等 Tab 板块;突出展示所属商户信息(商户名称、服务评分、进店按钮、联系商户入口),明确多商户归属。
  2. 商户主页(店铺首页) 单个入驻商户的独立展示页面,包含店铺轮播 Banner、商户公告、店铺评分(描述 / 服务 / 物流)、关注店铺按钮、店内分类导航、推荐商品、热销榜单等模块;是用户了解商户、浏览店内全量商品的核心页面。
  3. 商户商品列表页 展示某商户的全部在售商品,支持按店内分类筛选、按销量 / 价格 / 新品排序,支持店内关键词搜索,可快速加购或跳转商品详情。
  4. 商品评价列表页 聚合某商品的全部用户评价,支持按全部、好评、中评、差评、有图、追评维度筛选;展示评价星级、文字内容、晒图、追评信息与商户回复,辅助用户购买决策。

三、购物车与结算模块

  1. 购物车页面按入驻商户分组展示已加入购物车的商品,支持单选 / 全选、商品数量增减、删除商品、移入收藏夹操作;自动计算选中商品的金额合计与优惠抵扣;提供凑单推荐、一键结算功能,结算时按商户自动拆分订单。
  2. 我的收藏页 分为「商品收藏」与「店铺收藏」两个标签页;商品收藏支持批量管理、取消收藏、快速加购;店铺收藏支持取消关注、跳转商户主页,统一管理用户关注的商品与商户。
  3. 订单确认页(结算页) 展示待结算商品清单,按商户维度拆分显示商品、运费与优惠;支持选择收货地址、配送方式、发票类型、填写订单备注;自动计算各商户订单金额、平台 / 商户优惠抵扣、实付总额,提交订单后跳转支付环节。
  4. 支付页面 展示待支付订单列表与实付总金额,提供微信支付、支付宝、余额支付等多种支付方式;显示支付倒计时,支持选择不同支付渠道完成付款,支付完成后跳转结果页。
  5. 支付结果页 清晰展示支付成功 / 失败状态与订单编号;支付成功场景下提供查看订单详情、继续购物、查看物流等快捷入口;支付失败场景下提供重新支付、返回订单列表选项。

四、订单与售后模块

  1. 我的订单列表页 按全部、待付款、待发货、待收货、待评价、售后、已取消 7 个状态分类展示订单;订单卡片按商户维度聚合展示,支持取消订单、提醒发货、确认收货、立即评价、查看物流等快捷操作;支持按商户名称、商品名称搜索订单。
  2. 订单详情页 展示单条订单的完整信息,包含商品明细、商户信息、收货地址、配送物流、支付明细、订单状态时间线;提供申请售后、联系商户客服、查看物流、复制订单号等操作入口。
  3. 物流详情页 以时间线形式展示完整物流轨迹,包含快递公司、物流单号、收货信息、预计送达时间;支持一键复制单号,实时同步物流更新状态。
  4. 订单评价页 对已完成订单内的商品分别进行星级评分、文字评价、上传图片 / 视频;支持对商户的服务态度、发货速度、物流服务进行分项评分;提供匿名评价选项,提交后同步至商品评价区。
  5. 售后申请页 针对订单商品发起售后申请,支持仅退款、退货退款两种售后类型;选择售后原因、填写问题描述、上传凭证图片、选择退货商品数量,提交后由对应商户处理。
  6. 售后列表页 展示用户全部售后申请,支持按售后状态筛选;可查看售后进度、撤销申请、联系商户客服,追踪退款到账状态。
  7. 售后详情页 展示售后申请的完整信息与状态时间线,包含申请信息、商家处理记录、退款金额、退货地址;支持填写 / 查看退货物流信息,实时同步售后处理进度。

五、个人中心与账户模块

  1. 个人中心首页 用户个人信息总览,展示头像、昵称、会员等级、积分余额;提供待付款、待发货、待收货、待评价、售后 5 个订单状态快捷入口;下方集成收货地址、我的收藏、优惠券、客服等常用功能入口,以及账户资产概览。
  2. 个人资料设置页 支持修改用户头像、昵称、性别、出生日期、个性签名等基础信息;可查看与更换绑定手机号、绑定邮箱,维护个人基础资料。
  3. 收货地址管理页 管理用户的收货地址列表,支持新增、编辑、删除地址,设置默认收货地址;基于省市区三级地址库快速选择,提升地址填写效率。
  4. 账户安全页 账户安全管理中心,支持修改登录密码、设置 / 修改支付密码、更换绑定手机号、第三方账号绑定与解绑;提供账号注销入口,保障用户账户安全。
  5. 我的优惠券页 分为可使用、已使用、已过期三个标签页,展示平台券与商户券的面额、使用条件、有效期、适用范围;支持一键去使用,自动跳转对应商品 / 商户页面。
  6. 我的积分页 展示用户当前积分余额、积分明细(获取 / 消耗记录);提供积分规则说明、积分兑换商品 / 优惠券入口,完善积分体系。
  7. 我的余额页 展示账户余额、充值记录、消费记录、提现记录;支持余额充值、申请提现、管理提现收款账户,清晰呈现资金流水。
  8. 发票管理页 管理发票抬头信息,支持添加个人 / 企业发票抬头;展示历史开票记录,可查看开票状态与下载电子发票。

六、客服与消息模块

  1. 商户在线客服页 与对应入驻商户的客服进行实时对话,支持发送文字、图片、表情;可发送订单、商品卡片快速发起咨询,查看历史聊天记录。
  2. 平台客服中心页 平台官方客服入口,提供常见问题分类导航、关键词搜索;支持在线联系平台客服、提交投诉建议,处理跨商户纠纷与平台规则咨询。
  3. 消息中心页 聚合所有系统消息,分为订单通知、物流通知、售后通知、营销活动、系统公告 5 个分类;支持消息标记已读、一键全部已读,点击消息可跳转对应详情页。

七、营销活动模块

  1. 领券中心页 集中展示平台发放与各商户发放的优惠券,支持按品类、面额筛选;一键领取优惠券,可查看已领数量与剩余库存。
  2. 活动专题页 平台大促(618、双 11 等)或主题活动的专属落地页,包含活动规则、优惠券领取区、活动商品分区、参与商户列表;支持自定义装修,适配不同活动主题。
  3. 秒杀活动页 展示限时秒杀活动的场次与商品列表,包含秒杀价格、原价、倒计时、已抢数量;支持立即抢购,秒杀商品关联对应商户库存。
  4. 拼团活动页 展示拼团活动商品,包含拼团价、单独购买价、在拼团列表;支持一键开团、参团,拼团成功后由对应商户发货。

八、帮助与基础服务模块

  1. 帮助中心页 常见问题分类导航,支持关键词搜索问题;涵盖购物流程、订单售后、账户安全、平台规则等分类,自助解答用户常见疑问。
  2. 关于我们页 展示平台介绍、联系方式、商务合作、商户入驻入口、招聘信息等平台基础信息。
  3. 协议与政策页 展示用户服务协议、隐私政策、商户服务协议、知识产权声明等法律文档,支持用户查阅。

Copyright © 2026 文档系统 All Rights Reserved