信用卡积分商城产品系统

1. 立项原因：持卡用户要用积分换商品、买卡券、参加活动，账号和支付必须走 App，不能在 H5 里再做一套登录。旧版首屏慢、埋点各页不一致、组件复用不了，机型一多，活动量上来浏览和下单就撑不住。项目用 Vue3 重构，把首页、交易和 App 通信收成一条链路。
2. 业务背景：银行信用卡的积分运营。商城是 App 里的流量转化入口：看会场、兑商品、付积分或付款、查订单。大促时浏览、下单、支付要同时稳住。

1. 首页与活动会场：轮播推荐、活动专区、商品列表、积分进度。
2. 交易：商品详情、积分兑换、下单支付、订单查询和状态追踪。
3. 与 App 的衔接：同步登录态和用户信息、打开原生页、调起支付、把埋点参数传给原生。超时可重试，失败有降级。
4. 运营数据：页面曝光、按钮点击、关键路径和转化漏斗，供活动复盘使用。

1. 作为核心开发参与重构和首页搭建，完成轮播、进度条、全局 Loading，并参与首页、商品详情、订单页的方案和落地。
2. 做首屏专项：骨架屏、图片懒加载、代码分割、资源压缩。材料口径首屏由 2.5 秒降到 1.2 秒。用 FastClick 处理部分 iOS 上点击延迟和图片一点就放大的问题。
3. 把核心页从旧写法迁到组合式写法，按模块拆开，收掉组件复用不足、逻辑散在各页的问题。商品列表、用户积分等高频数据用内存加本地存储两层缓存，带版本和增量，减少重复请求。
4. 封装 H5 与 App 的 JSBridge：取登录态和用户信息、打开原生页、调起支付、把埋点参数传给原生。超时重试，失败有降级，避免某台机器或某个 App 版本把整条交易卡住。
5. 落地声明式埋点，页面曝光、按钮点击和关键路径自动采集，埋点与业务代码分开。大促时浏览、下单、支付主链路保持稳定。