@wuya31/bike-shop/README.md

一个适用于小程序的商城组件库

# Bike Shop Component

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

## 安装

```bash
npm install @wuya31/bike-shop
```

## 使用方法

### 全局注册

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

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

### 组件使用

#### 商品列表组件

```vue
<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>
```

#### 商品详情组件

```vue
<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 | 点击立即购买时触发 | 商品数据对象 |

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build
```

## License

MIT