# 报名抽奖组件

本组件主要用于展示讲师和管理员等角色发起的报名抽奖。

在引入及使用本功能组件前，需要先对互动功能接收端SDK进行公共配置，详情请查看：[互动功能接收端 UI 组件 - 配置 SDK](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/interactions_receive_sdk/ui/default/overview/README.md#%E9%85%8D%E7%BD%AE-sdk)。

## 引入

#### 在线文件引入方式

```html
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/PcEnrollLottery/PcEnrollLottery.umd.min.js"></script>
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.13.0/lib/PcEnrollLottery/PcEnrollLottery.umd.min.js"></script>
// PC端
<script>
    const EnrollLottery = window.PolyvIRScene.PcEnrollLottery.default;
</script>
```

```html
// script 标签引入，根据版本号引入JS版本。
<script src="https://websdk.videocc.net/interactions-receive-sdk-ui-default/0.24.0/lib/MobileEnrollLottery/MobileEnrollLottery.umd.min.js"></script>
// 移动端
<script>
    const EnrollLottery = window.PolyvIRScene.MobileEnrollLottery.default;
``</script>``
```

#### import 方式引入（推荐）

```javascript
// PC 端
import EnrollLottery from '@polyv/interactions-receive-sdk-ui-default/lib/PcEnrollLottery';
```

```javascript
// 移动端
import EnrollLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileEnrollLottery';
```

### 代码示例

初始化报名抽奖 SDK 实例，并接入组件后，组件内部会处理具体的业务逻辑，接入方只需要提供一个容器，根据组件事件切换显示状态即可：

以 移动 端接入为例：

```vue
<template>
  <div>
    <div class="c-demo-enroll-lottery-pendant">
      <EnrollLotteryPendant :enroll-lottery-sdk="enrollLotterySdk" @to-show-modal="updateModalVisible(true)"/>
    </div>
    <!-- modal是一个弹窗组件，可根据界面风格自行设计-->
    <modal
        draggable
        body-locked
        title="报名抽奖"
        :no-bg="true"
        :visible="visible"
        @close="updateModalVisible(false)"
    >
      <MobileEnrollLottery
          :enroll-lottery-sdk="enrollLotterySdk"
          :lang="lang"
          @to-show="updateModalVisible(true)"
          @to-hide="updateModalVisible(false)"
      />
    </modal>
  </div>
</template>

<script>
import { EnrollLottery } from '@polyv/interactions-receive-sdk';
import EnrollLotteryPendant from '@polyv/interactions-receive-sdk-ui-default/lib/EnrollLotteryPendant';
import MobileEnrollLottery from '@polyv/interactions-receive-sdk-ui-default/lib/MobileEnrollLottery';

export default {
  components: {
    MobileEnrollLottery,
    EnrollLotteryPendant
  },

  data() {
    return {
      // 报名抽奖SDK实例
      enrollLotterySdk: null,
    };
  },

  created() {
    this.enrollLotterySdk = new EnrollLottery();
  },

  beforeDestroy() {
    this.enrollLotterySdk?.destroy();
  },

  methods: {
    updateModalVisible(visible) {
      this.visible = visible;
    },
  },
};
</script>
```

### Attributes （MobileEnrollLottery）

| 属性名                | 类型                    | 默认值       | 含义          |
| ------------------ | --------------------- | --------- | ----------- |
| lang               | string：'zh\_CN', 'en' | `'zh_CN'` | 语言          |
| enroll-lottery-sdk | Object                | null      | 报名抽奖 SDK 实例 |

### Events （MobileEnrollLottery）

| 事件名     | 参数类型 | 参数含义 | 说明     |
| ------- | ---- | ---- | ------ |
| to-show | 无参数  | -    | 需要展示弹窗 |
| to-hide | 无参数  | -    | 需要隐藏弹窗 |

### Attributes （EnrollLotteryPendant）

| 属性名                | 类型                    | 默认值       | 含义          |
| ------------------ | --------------------- | --------- | ----------- |
| lang               | string：'zh\_CN', 'en' | `'zh_CN'` | 语言          |
| enroll-lottery-sdk | Object                | null      | 报名抽奖 SDK 实例 |

### Events （EnrollLotteryPendant）

| 事件名           | 参数类型 | 参数含义 | 说明     |
| ------------- | ---- | ---- | ------ |
| to-show-modal | 无参数  | -    | 需要展示弹窗 |
