# Banner 组件使用说明

这是一个通用的轮播图(Banner)组件，可以在应用的任何页面轻松集成。

## 特点

- 支持配置不同类型的banner（通过type_id参数）
- 自动从后端接口获取数据
- 支持可选的指示器显示
- 处理点击事件跳转到对应页面
- 自动轮播图片
- **支持通过插槽在轮播图上方添加自定义内容**
- **支持自定义轮播图高度**

## 使用方法

### 1. 引入组件

项目已经在 `pages.json` 的 `easycom` 中配置了自动引入规则，因此您无需手动导入组件。

### 2. 在页面中使用

```vue
<template>
  <view>
    <!-- 基本用法 -->
    <banner :type-id="1"></banner>
    
    <!-- 显示指示器 -->
    <banner :type-id="2" :show-indicator="true"></banner>
    
    <!-- 使用插槽添加自定义内容 -->
    <banner :type-id="3">
      <view class="custom-content">
        <text class="title">热门活动</text>
      </view>
    </banner>
    
    <!-- 自定义高度 -->
    <banner :type-id="4" :height="400"></banner>
    
    <!-- 组合使用多个属性 -->
    <banner :type-id="5" :height="500" :show-indicator="true">
      <view class="custom-title">限时活动</view>
    </banner>
  </view>
</template>

<style>
.custom-content {
  width: 100%;
  text-align: center;
  padding: 10rpx 0;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
```

### 3. 参数说明

| 参数名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| typeId | Number/String | 1 | banner类型ID，对应接口的type_id参数 |
| showIndicator | Boolean | false | 是否显示轮播图指示器 |
| height | Number/String | 300 | 轮播图高度，单位rpx |

### 4. 插槽

组件提供了一个默认插槽，可以用来在轮播图上方添加自定义内容。插槽内容会被定位在轮播图的顶部，并且会保持在最上层。

示例：
```vue
<banner :type-id="1">
  <!-- 这里的内容会显示在轮播图上方 -->
  <view class="banner-title">热门推荐</view>
</banner>
```

### 5. 接口数据

组件通过调用 `api/getAdvert` 接口获取数据，传入 `type_id` 参数。

接口返回数据格式示例：
```json
{
  "status": 1,
  "msg": "请求成功",
  "data": [
    {
      "imgurl": "https://example.com/image1.png",
      "ttype": 1,
      "coupon_id": 123,
      "goods_id": 0
    },
    {
      "imgurl": "https://example.com/image2.png",
      "ttype": 2,
      "coupon_id": 0,
      "goods_id": 456
    }
  ]
}
```

### 6. 点击跳转逻辑

根据返回数据中的 `ttype` 和 `goods_id` 属性，组件会自动处理点击跳转：

- ttype=1: 跳转到"领券中心"
- ttype=2: 跳转到"一番赏"详情页
- ttype=3: 跳转到"无限赏"详情页
- ttype=4: 跳转到"连击赏"页面

## 示例

### 首页banner
```vue
<banner :type-id="1"></banner>
```

### 商城页banner带标题和自定义高度
```vue
<banner :type-id="3" :show-indicator="true" :height="400">
  <view class="mall-title">精选商品</view>
</banner>
```

### 活动页banner
```vue
<banner :type-id="5" :height="350"></banner>
```