P12 商城首页（西湖有礼）

P12 商城首页（西湖有礼）

页面概述

• 页面名称：西湖有礼（商城）
• 页面目标：承接统一商品浏览入口，支持搜索与排序，并分发到商品详情与下单确认
• 适用角色：全部用户
• 页面入口：底部 Tab - 商城

页面组成

1. 顶部 Banner

• 字段：bannerImage、jumpUrl
• 说明：用于展示商城运营 Banner

2. 搜索区

• 字段：keyword
• 说明：支持当前页商品模糊搜索

3. 排序区

• 字段：sortType
• 说明：支持以下排序方式：
  • 综合排序
  • 价格高低排序

4. 商品列表区

• 字段：goodsId、goodsImage、title、channel、cashPrice、pointsPrice、linePrice、supportModes、goodsType、status
• 说明：
  • 统一商品列表，可同时展示积分商品与周边商品
  • 商品卡片需明确表达以下状态：
    • 可兑换
    • 可购买
    • 不可用（如下架或售罄）

交互与按钮

按钮/交互	显示条件	动作
搜索	输入关键字	刷新列表
排序切换	固定显示	刷新列表
商品卡片	有数据	打开 P18

交互逻辑

• 进入页面后拉取商城首页聚合数据
• 支持按关键字进行模糊搜索
• 支持排序切换
• 页面返回时需保留滚动位置

校验规则

• keyword 最大长度为 30 字
• 切换排序条件时，需保留当前 keyword 搜索条件

状态处理

• 空状态：提示“暂无商品”
• 加载中：展示骨架屏
• 失败态：提供重试入口

异常提示

• 商城加载失败提示：商城数据加载失败，请稍后再试

页面跳转

• P12 -> P18

埋点建议

• mall_home_show
• mall_search
• mall_sort_change
• mall_goods_click