更新记录

2.0.0（2026-04-22）

更新页面

1.0.0（2026-04-22）

• 个人中心 - 用户信息、订单入口、我的资产、功能菜单
• 收货地址 - 地址列表、新增、编辑、删除、设为默认
• 会员中心 - 会员等级、成长值、会员特权、邀请系统
• 充值页面 - 充值套餐、自定义金额、支付选择
• 优惠券 - 可使用、已使用、已过期优惠券列表
• 我的订单 - 全部订单、待付款、待发货、待收货、待评价
• 关注店铺 - 关注店铺列表、店铺商品预览、取消关注
• 在线客服 - 客服聊天、快捷回复

平台兼容性

uni-app(3.8.1)

uni-app x(3.8.12)

其他

fraise-shop 完整商城模板

一套完整的电商商城组件和页面模板，包含首页、分类、商品详情、购物车、订单、会员等功能页面，支持 easycom 引入。

功能特性

📱 页面列表

首页模块

• 首页 - 轮播图、分类导航、活动入口、商品推荐
• 商品详情 - 商品轮播、规格选择、商品介绍、用户评价

购物模块

• 购物车 - 商品列表、数量调整、价格计算、结算
• 订单确认 - 收货地址、商品清单、优惠券、订单备注、支付方式

用户模块

• 个人中心 - 用户信息、订单入口、我的资产、功能菜单
• 收货地址 - 地址列表、新增、编辑、删除、设为默认
• 会员中心 - 会员等级、成长值、会员特权、邀请系统
• 充值页面 - 充值套餐、自定义金额、支付选择
• 优惠券 - 可使用、已使用、已过期优惠券列表
• 我的订单 - 全部订单、待付款、待发货、待收货、待评价
• 关注店铺 - 关注店铺列表、店铺商品预览、取消关注
• 在线客服 - 客服聊天、快捷回复

活动模块

• 限时秒杀 - 秒杀倒计时、时段选择、秒杀商品
• 每日签到 - 签到日历、连续签到、积分奖励
• 拼团活动 - 拼团商品、人数显示、成团进度

其他页面

• 商品分类 - 左侧分类、右侧商品、分类切换
• 店铺首页 - 店铺信息、关注功能、店铺商品

安装使用

1. 引入组件

组件支持 easycom 自动引入，无需手动 import：

<template>
  <view>
    <fraise-shop />
  </view>
</template>

或者手动引入：

<template>
  <view>
    <fraise-shop />
  </view>
</template>

<script>
import fraiseShop from '@/uni_modules/fraise-shop/components/fraise-shop/fraise-shop.vue'

export default {
  components: { fraiseShop }
}
</script>

2. 配置页面路由

在项目的 pages.json 中添加以下页面配置：

{
  "pages": [
    {
      "path": "uni_modules/fraise-shop/pages/index/index",
      "style": {
        "navigationBarTitleText": "优品商城"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/category/category",
      "style": {
        "navigationBarTitleText": "商品分类"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/detail/detail",
      "style": {
        "navigationBarTitleText": "商品详情"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/cart/cart",
      "style": {
        "navigationBarTitleText": "购物车"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/checkout/checkout",
      "style": {
        "navigationBarTitleText": "确认订单"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/user/user",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/address/address",
      "style": {
        "navigationBarTitleText": "收货地址"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/seckill/seckill",
      "style": {
        "navigationBarTitleText": "限时秒杀"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/signin/signin",
      "style": {
        "navigationBarTitleText": "每日签到"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/groupbuy/groupbuy",
      "style": {
        "navigationBarTitleText": "拼团活动"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/member/member",
      "style": {
        "navigationBarTitleText": "会员中心"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/recharge/recharge",
      "style": {
        "navigationBarTitleText": "账户充值"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/coupon/coupon",
      "style": {
        "navigationBarTitleText": "我的优惠券"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/shop/shop",
      "style": {
        "navigationBarTitleText": "店铺首页"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/chat/chat",
      "style": {
        "navigationBarTitleText": "在线客服"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/order-list/order-list",
      "style": {
        "navigationBarTitleText": "我的订单"
      }
    },
    {
      "path": "uni_modules/fraise-shop/pages/follow-shop/follow-shop",
      "style": {
        "navigationBarTitleText": "关注店铺"
      }
    }
  ],
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff6b6b",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "uni_modules/fraise-shop/pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "uni_modules/fraise-shop/pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "uni_modules/fraise-shop/pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "uni_modules/fraise-shop/pages/user/user",
        "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "优品商城",
    "navigationBarBackgroundColor": "#fff",
    "backgroundColor": "#f5f5f5"
  }
}

3. 配置启动页面

在 pages.json 中将首页设置为启动页面（已在上面的配置中包含）。

目录结构

fraise-shop/
├── components/fraise-shop/  # 入口组件
│   └── fraise-shop.vue
├── pages/                   # 页面文件
│   ├── index/               # 首页
│   ├── category/            # 分类页
│   ├── detail/              # 商品详情
│   ├── cart/                # 购物车
│   ├── checkout/            # 订单确认
│   ├── user/                # 用户中心
│   ├── address/             # 地址管理
│   ├── seckill/             # 限时秒杀
│   ├── signin/              # 每日签到
│   ├── groupbuy/            # 拼团活动
│   ├── member/              # 会员中心
│   ├── recharge/            # 充值页面
│   ├── coupon/              # 优惠券
│   ├── shop/                # 店铺首页
│   ├── chat/                # 在线客服
│   ├── order-list/          # 订单列表
│   └── follow-shop/         # 关注店铺
├── static/                  # 静态资源
├── package.json             # 插件配置
├── index.js                # 插件入口
├── pages.json.example       # 配置示例
├── README.md               # 说明文档
└── QUICKSTART.md           # 快速开始指南

二次开发

修改数据

所有页面使用模拟数据，可以在对应页面的 data() 方法中修改数据内容。

修改样式

样式使用 SCSS/普通 CSS，可直接在页面的 <style> 标签中修改。

接入后端 API

将页面中的模拟数据替换为真实的 API 请求即可：

methods: {
  async getProductList() {
    const res = await uni.request({
      url: 'https://your-api.com/products'
    });
    this.productList = res.data;
  }
}

支持平台

• ✅ App（Vue）
• ✅ H5
• ✅ 微信小程序
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 字节跳动小程序
• ✅ QQ小程序

更新日志

v1.0.0

• 🎉 首次发布
• ✅ 完成首页、分类、购物车、用户中心等基础页面
• ✅ 新增地址管理、秒杀、签到、拼团等活动页面
• ✅ 完善会员中心、充值、优惠券、店铺、客服等功能
• ✅ 支持 easycom 组件自动引入

注意事项

1. 本插件为组件和页面模板，不包含后端接口
2. 图片使用 picsum.photos 占位图服务，实际使用请替换为真实图片
3. 支付功能需要对接真实的支付接口
4. 可根据实际项目需求修改页面样式和数据结构

联系方式

如有问题或建议，欢迎联系。

版权声明

本插件仅供学习和商业项目使用，二次开发后请保留原作者信息。