Bike Shop Component

一个适用于小程序的商城组件库，基于 Vue 3 和 uni-app 开发。

安装

npm install @wuya31/bike-shop

使用方法

全局注册

// main.js
import { createSSRApp } from 'vue'
import BikeShop from '@wuya31/bike-shop'

export function createApp() {
  const app = createSSRApp(App)
  app.use(BikeShop)
  return {
    app
  }
}

组件使用

商品列表组件

<template>
  <shop-list
    :list="shopList"
    @item-click="handleItemClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const shopList = ref([
  {
    id: 1,
    name: '商品名称',
    price: 99.99,
    image: '商品图片地址'
  }
])

const handleItemClick = (item) => {
  console.log('点击商品', item)
}
</script>

商品详情组件

<template>
  <shop-detail
    :detail="shopDetail"
    @add-cart="handleAddCart"
    @buy-now="handleBuyNow"
  />
</template>

<script setup>
import { ref } from 'vue'

const shopDetail = ref({
  id: 1,
  name: '商品名称',
  price: 99.99,
  originalPrice: 199.99,
  description: '商品描述',
  images: ['图片1', '图片2']
})

const handleAddCart = (item) => {
  console.log('加入购物车', item)
}

const handleBuyNow = (item) => {
  console.log('立即购买', item)
}
</script>

组件属性

ShopList 组件

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | list | Array | 是 | 商品列表数据 |

ShopDetail 组件

| 属性名 | 类型 | 必填 | 说明 | |--------|------|------|------| | detail | Object | 是 | 商品详情数据 |

事件

ShopList 组件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | item-click | 点击商品时触发 | 商品数据对象 |

ShopDetail 组件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | add-cart | 点击加入购物车时触发 | 商品数据对象 | | buy-now | 点击立即购买时触发 | 商品数据对象 |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

License

MIT