更新记录

1.0.0（2026-10-13） 下载此版本

• 首次发布青柠商城 ShopUI 整套电商前端模板
• 覆盖首页 / 探索 / 购物车 / 收藏 / 我的一级页面与入场动画
• 支持商品详情、店铺与达人主页、议价、结算、订单与评价
• 支持地址管理、消息通知、账号设置、优惠券领取与使用演示
• 提供 mock 数据层与本地 store，便于替换真实接口

平台兼容性

uni-app(3.8.5)

青柠商城 ShopUI · 插件使用说明

UniApp + Vue3 跨端电商前端整套模板（插件 ID：tlzp0630-shopui）。

主题色 #c8f000，自定义导航与悬浮 TabBar，纯前端模拟数据，可运行于 App / H5 / 微信小程序 / 鸿蒙等。

开发者微信：tlzp_0630

一、导入与运行

1. 使用 HBuilderX 打开本插件示例工程目录。
2. 菜单选择：运行 → 运行到浏览器 / 手机 / 小程序模拟器。
3. 建议使用支持 Vue3 的 HBuilderX，uni-app 版本建议 ≥ 3.6.0。

重要提示

• 新增页面后（或首次导入后）请完整重新编译运行，仅热更新可能导致 pages.json 路由未注册，navigateTo 静默失败。
• 微信小程序端需在后台配置图片合法域名（演示图使用 Unsplash）。
• 本模板为演示项目，下单 / 优惠券 / 关注等仅写入本地存储，不会产生真实支付或物流。

二、目录说明

components/     通用组件（商品卡、搜索、TabBar、分类 Chips、空状态等）
mock/           模拟数据 data.js + 异步 API api.js
store/          购物车、收藏、订单、地址、通知、关注、设置、优惠券
pages/          业务页面
static/icons/   SVG 图标
styles/         全局样式与一级页入场动画
utils/          toast、价格与数量格式化等工具

三、功能概览

一级 Tab

二级页面

• 商品详情、店铺主页、达人主页、发起议价
• 确认订单、订单列表 / 详情、评价
• 收货地址、消息通知、设置、优惠券
• 搜索、AI 搜索

一级 Tab 切换时带布局分段入场动画。

四、对接真实后端

页面与 store 可尽量保留，主要替换：

1. 将 mock/api.js 中的模拟请求改为真实 HTTP（如 uni.request）。
2. 按后端字段调整 store/* 与鉴权（Token / 登录态）。
3. 支付、上传、登录等能力按业务自行补齐。

接口约定（模拟层）：

{ code: 0, message: 'success', data: ... }

code === 0 表示成功，页面侧按此判断即可。

五、主题与样式

• 主色：#c8f000（青柠）
• 辅助色：#00b4a6、#111111
• 全局样式：styles/common.scss（含 layout-enter 入场动画类）
• 自定义导航页在 H5 下通过 App.vue 隐藏系统 uni-page-head

修改主题时，建议全局搜索 #c8f000 与相关 SCSS 变量一并调整。

六、常见问题

1. 点击页面无跳转

检查该路径是否已写入 pages.json，并重新运行项目（非仅热更新）。

2. 小程序图片不显示

在微信公众平台配置 downloadFile / 图片域名，加入演示图床域名，或将图片改为自有合法域名资源。

3. 底部被遮挡

模板使用自定义悬浮 TabBar，页面需带 page-with-tabbar 类，并已预留 safe-area-inset-bottom。

4. 数据被清空

设置页「清除缓存」会删除除账号设置外的本地演示数据；需要可重新进入对应流程写入。

七、适配说明

八、联系与定制

如需二次开发、界面定制或接入指导，欢迎添***：

微信：tlzp_0630

感谢使用青柠商城 ShopUI。