「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」
前言
大家好，前面几篇文章的分享中已经实现了抽奖页面中的核心功能（免抽，单抽和十连抽），到此我们的抽奖页面功能也已经基本实现了一多半了，整个抽奖页面还剩下幸运值、大奖围观和中奖播报展示功能。本次分享我们将实现幸运值和大奖围观功能。如下图：
幸运值
为了满足久抽不中人的小小中奖愿望，不知从啥时候开始掘金官方提供了幸运值功能，每次抽奖可以增加10幸运值，每天也可以沾喜气沾来10幸运值，当幸运值达到6000就可以必中一个礼物，也总算是给人了一种希望。接下来我们也实现一下幸运值功能。幸运值主要分为两部分：当前幸运值进度已经当前幸运值的数值。这个功能实现起来很简单没有什么技术难点，涉及到的后台接口：my_luck，get请求，返回值为一个对象其中就包含幸运值：
- 首先在nodejs后端中封装好请求幸运值的api - my_luck
- 到官网中将相关元素及样式直接copy过来
- 定义一个响应式属性luckValue，用于接收请求回来的幸运值数据
- 再定义一个计算属性process根据luckValue幸运值数据除以总值6000 计算出幸运值进度条的宽度百分比 核心代码及效果图如下：
<div id="progress-guide-box" class="lucky-wrap lucky-progress-wrap">
<div id="progress-wrap" class="progress-wrap">
<span class="title">幸运值</span>
<div class="progress-box">
</div>
api.myLuck().then((res) => {你妈妈木木木木木木木，
return (state.luckValue / 6000) * 100 + "%";
});
大奖围观
接下来就是大奖围观功能了，每次看到别人中大奖了都忍不住的也去抽几下，但无论怎么抽最终都是中了个寂寞。好了废话不说了，继续来围观大奖吧。
大奖围观功能从技术角度来说也没有难点，但在调试样式时比较繁琐。大奖围观中的元素和样式也是直接从官网上copy过来的，样式虽然也是直接copy过来，但是在页面样式上也是没少花了时间，浪费了不少功夫。
经过一番分析，在围观大奖模块这一块涉及到的后台接口是post请求的global_big，返回的数据格式如下：
- 在nodejs后端服务中封装globalBig接口用于去掘金官方请求数据
- 定义一个响应式属性globalBig用于接收接口返回来数据
- 利用v-for循环将数据结果循环在界面中输出展示 但是在实现过程中遇到了一个问题，同样调用的是官方的global_big后端接口，我们这边调用后返回来的结果跟官方的结果却不一样，还没查清是啥原因，暂时先这样渲染了。除了大奖围观这块除了央视比较繁琐外，其它也没有啥难点。下面就直接贴出js核心源码和效果图：
api.globalBig().then((res) => {
state.globalBig = res.data.lotteries;
});
const luckUsers = computed((users) => {
let userNames = [];
users.forEach((item) => {
userNames.push(item.user_name);
});
return userNames.join("、");
});
总结
今天的分享中竟然憋了一天才实现，主要时间都花在了ui样式调试上，并且最终的大奖围观效果跟官方的还不一样，具体原因还没查明，明天再继续调试，今天的分享就先到这里了。喜欢的小伙伴欢迎点赞加关注！
