「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」
前言
大家好，昨天的分享中我们已经把抽奖页面的背景相关的样式调试完毕，在上一篇分享中没有什么技术难点，都是一些UI方面的工作，涉及到的一些html元素和css样式比较多，并且多数样式都是从官方网站直接copy过来的，一涉及到css样式那么代码量也会相应的比较多，因此在上次分享中贴了很多代码，但还不是全部，后期我会将源码直接上传的github上，这样有需要源码的就会更方便一些。好了话不多说今天继续来完善我们的抽奖页面功能。今天要实现的主要功能如下：
- 抽奖规则弹窗展示
- 幸运大转盘奖品展示
抽奖规则
在做签到日历时我们曾经做过一个签到规则的弹窗展示功能，那么这次这个抽奖规则也是一样采用弹窗展示，并且后台接口返回的属性结构也是一模一样的，因此我们可以直接把签到规则中的代码直接copy过来改吧改吧。涉及到的后台接口rules_text，接口返回的数据是包含text_bold和text_plain两个属性的对象的数组。我们只需要循环数组把每个对象的text_bold和text_plain两个属性值加起来赋值给弹出框的message属性即可。返回数据如下：
我们还是以函数调用的方式来使用vant的弹窗功能
- 定义一个响应式属性luckRules
- 在setup方法中请求后台api拿到规则数据
- 在setup中定义一个showRules方法，并在该方法中调用Dialog.alert弹出框展示抽奖规则 源码及效果图如下：
api.getLuckRules().then((res) => {
console.log(res.data);
res.data.forEach((element) => {
state.ruleText += element.text_bold + element.text_plain;
});
});
const showLuckRules = function () {
Dialog.alert({
title: "抽奖规则",
message: state.ruleText,
theme: "round-button",
confirmButtonText: "关闭",
messageAlign: "left",
}).then(() => {
// on close
});
};
幸运大转盘奖品展示
接下来就是我们本次分享的重头戏-幸运大转盘奖品展示。在上篇分享实现抽奖页面背景时，我们大部分HTML元素和css样式都是从官网那边copy过来的，那么这个幸运大转盘也不例外，为了省事也是直接去官网copy了。
刚开始分析时以为这个幸运大转盘的奖品都是直接写静态的，后来一想不对掘金的工程师不可能这么low，像这种数据肯定都是动态绑定的才对，于是就去network里看看，果然还真是从后台请求的数据。涉及到的接口：get，返回的数据是一个对象：free_count表示免费抽奖次数，lottery则是对应的奖品数据属性，其中包含了奖品名称，奖品图片，奖品类型和解锁次数。
数据已经有了，接下来就是让数据可视化。
- 首先在官网的幸运大转盘中随便找到一个奖品
- 然后右键查看元素
- 找到这个奖品相关的HTML元素及css样式直接copy过来
- 元素和样式都调整好后，再用v-for指令把上面接口中返回的数据动态绑定
- 需要注意的是如果某奖品的unlock_count不为0，则需要让该奖品为禁用状态，同时奖品名称变为“再抽unlock_count次解锁” 源码及效果如下：
<div class="blocks">
<div class="item-container">
<div
v-for="item in lottery"
:key="item.lottery_id"
class="turntable-item item"
>
<div v-if="item.unlock_count > 0" class="locked"></div>
<div class="image">
<img :src="item.lottery_image" alt="image" />
</div>
<div class="text">
{{
item.unlock_count > 0
? `再抽${item.unlock_count}次解锁`
: item.lottery_name
}}
</div>
</div>
</div>
</div>
api.getLuck().then((res) => {
state.lottery = res.data.lottery;
state.freeCount = res.data.free_count;
});
....省略css样式
总结
本次最有成就感的就会实现了幸运大转盘奖品展示及锁定样式的调试。看上去好像跟官网也没什么区别接下来就是要实现真正的抽奖功能了，这个功能我们暂时放在下一篇文章中分享。本次分享就先到这里了。小伙伴们欢迎点赞加关注!
