抽奖
<p>[TOC]</p>
<h4>使用</h4>
<p>使用思路： 操作权限端打开抽奖的创建面板，然后有业务层监听消息，打开对应的弹窗
中间涉及到的 props 参数和方法请参照下面的 vhLottery 文档</p>
<p>基础功能中包括</p>
<ul>
<li>
<p>发起抽奖</p>
<p>中奖规则: 虚拟的抽奖规则,用于观看端端展示;如果没填写,观看端将不展示中奖规则(非必填)
参与抽奖人员: 抽奖的范围(必填)
中奖人数: 预设总共有多少人中奖(必填)
预设抽奖: 预先设定中奖的人员(非必填)</p>
</li>
<li>
<p>抽奖中</p>
<p>抽奖规则: 如果发起抽奖时,设置了抽奖规则观看端将显示该规则,否则不显示
抽奖中有以展位图,业务层可根据自己需求,对插槽(lotteryDoing)进行设置
结束抽奖按钮: 只有发起端会显示</p>
</li>
<li>
<p>抽奖结束</p>
<p>观看端将看到中奖的昵称列表
发起端: 如果中奖了,面板头部显示'恭喜您中奖了！',以及填写相关信息</p>
</li>
<li>
<p>显示隐私政策 privacyPolicyUrl 为条款链接 privacyPolicy="privacyPolicy" 如果不传,或者 privacyPolicy.privacyPolicyUrl 为空，则隐私条款不显示</p>
<pre><code class="language-html"><vhLottery
ref="lottery"
:roomId="roomInfo.room_id"
:accountId="userInfo.accountId"
:optionType="['all', 'que', 'sign', 'exam', 'vote']"
:isPrivacy = "true"
:editPermission="roomInfo.role_name==1"
></vhLottery></code></pre>
<h4>props</h4>
</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 id</td>
<td style="text-align: left;">object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">editPermission</td>
<td style="text-align: left;">是否操作权限</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户 id</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">optionType</td>
<td style="text-align: left;">抽奖的类型</td>
<td style="text-align: left;">Array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">['all', 'que', 'sign', 'exam', 'vote']</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isPrivacy</td>
<td style="text-align: left;">是否展示隐私协议</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">true/false</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isCheckRequired</td>
<td style="text-align: left;">隐私协议是否必选</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">true/false</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">check</td>
<td style="text-align: left;">是否勾选隐私政策</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">true/false</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">reciveInfo</td>
<td style="text-align: left;">传入自定义中奖人信息</td>
<td style="text-align: left;">object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>主持端打开抽奖控制面板</h4>
<pre><code class="language-javascript">this.$refs.lottery.lotteryShow()</code></pre>
<p><img src="http://t-static01-open.e.vhall.com/vss/06/a1/06a1d820ec4214b3a7207b6ebfb2bec8.png" alt="" /></p>
<h4>关键消息</h4>
<p>消息都使用组件提供的 EventBus 进行监听
以下均为示例，业务层可根据需求进行调整</p>
<ul>
<li>
<p>发起抽奖消息
触发时机，在发起端使用创建接口（/v1/lottery/add）后触发，上图的 开始抽奖 按钮</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('lottery_push', msg => {
this.$refs.lottery.startLottery(msg.data.lottery_id, msg.data.lottery_rule_text) // 打开抽奖的
})</code></pre>
</li>
<li>
<p>中奖后信息填写，隐私声明没有勾选
触发时机，隐私声明没有勾选</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_lottery_un_checked', msg => {
alert("请勾选隐私声明")
})</code></pre>
</li>
</ul>
<p>打开抽奖的样式</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/c4/ac/c4ace5087e83b31a5d8b4f03633bc1b4.png" alt="" /></p>
<p>操作权限端：</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/18/69/1869329702e6956436606c83cbd1223e.png" alt="" /></p>
<p>非操作权限端：</p>
<ul>
<li>
<p>结束抽奖的消息</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('lottery_result_notice', msg => {
this.$refs.lottery.endResult(msg.data.lottery_id, msg.lottery_winners) // 打开抽奖的结果
})</code></pre>
</li>
</ul>
<p>操作权限端：</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/d1/6b/d16b00984704fb3ba8ab1de35d8d805e.png" alt="" /></p>
<p>未中奖:</p>
<p><img src="http://t-static01-open.e.vhall.com/vss/d1/6b/d16b00984704fb3ba8ab1de35d8d805e.png" alt="" /></p>
<ul>
<li>
<p>从聊天中打开抽奖</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('component_check_lottery', msg => {
this.$refs.lottery.endResult(msg.lottery_id, msg.lottery_winners) // 打开抽奖接口
})</code></pre>
</li>
</ul>
<h4>方法</h4>
<ul>
<li>
<p>startLottery(id, rule)
参数：
id: 抽奖 id，消息体中 lottery_id，必传
rule：虚拟的抽奖规则，消息体中 lottery_rule_text，非必传
说明：调用该函数可打开抽奖中的面板，并显示抽奖的结果。常用使用场景：收到消息打开抽奖中的面板</p>
</li>
<li>
<p>endResult(id, list)
参数：
id: 抽奖 id，消息体中 lottery_id，必传
list：中奖人员列表，消息体中 lottery_winners，必传
说明：调用该函数可打开抽奖的结果面板，并显示抽奖的结果。常用使用场景：收到消息打开抽奖结果页面，或从聊天中打开抽奖结果页面</p>
</li>
<li>endRecive(id)
参数：
id: 抽奖 id，必传
说明：根据抽奖 id，获取本次抽奖的接口。常用使用场景：用户关闭了抽奖的结果面板，根据抽奖 id 再次打开结果面板</li>
</ul>
<h4>slot</h4>
<ul>
<li>
<p>lotteryEdit
说明：编辑页顶部插槽</p>
<pre><code class="language-html"><slot name="lotteryEdit"></slot></code></pre>
</li>
<li>
<p>lotteryDoing
说明：业务层可根据需求配置抽奖中的面板中间的动图</p>
<pre><code class="language-html"><slot name="lotteryDoing">
<img src="../../assets/lottery-loading.gif" alt />
<p>{{ t('正在进行抽奖') }}...</p>
</slot></code></pre>
</li>
<li>
<p>lotteryResult
说明：编辑页顶部插槽</p>
<pre><code class="language-html"><slot name="lotteryResult"></slot></code></pre>
</li>
</ul>