【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 抽奖转转转之单抽

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

前言

大家好，今天我们继续来实现的我们类掘金app项目，在前面的分享中，我们已经实现了当前矿石总数的展示、抽奖规则的弹窗展示已经幸运大转盘中的奖品展示及样式调试。那么接下来要实现的就是激动人心的抽奖环节了。本次分享中要实现的功能如下：

抽奖按钮
实现免费抽，单抽

抽奖按钮

在上次分享中我们只是把幸运大转盘实现了，但要想让大转盘转起来还得需要有东西来触发，没错就是需要点击按钮触发。抽过奖的小伙伴都知道，目前的掘金官方提供了三种抽奖方式：免抽一次，单抽（消费200矿石）和十连抽（消费2000矿石），我们也是一样实现两个按钮三种功能。

免抽一次按钮：与单抽按钮是同一个按钮，只是显示文本不同，在上一次分享我们用到的get接口中，其中返回一个值free_count对应的就是免抽次数，如果该值不为0则按钮文本显示免抽一次
单抽：与免抽按钮是同一个按钮，如果free_count为0则表示已经参与过免抽，则该按钮文本显示为单抽，并且有个矿石图标和200的字样
十连抽，则是单独的按钮点击一次实现十次抽奖

代码及效果如下

<div id="cost-box" class="cost-box">
          <div id="turntable-item-0" class="turntable-item lottery">
            <div v-if="freeCount > 0" class="lottery-text" @click="draw(0)">免抽一次</div>
            <div v-else>
              <div class="lottery-text" @click="draw(1)" >单抽</div>
              <div class="icon-num-box">
                <!--svg图片省略-->
                <div class="text">200</div>
              </div>
            </div>
          </div>
          <div id="turntable-item-1" class="turntable-item lottery">
            <div class="lottery-text"  @click="draw(10)">十连抽</div>
            <div class="icon-num-box">
              <!--svg图片省略-->
              <div class="text">2000</div>
            </div>
          </div>
        </div>
复制代码

实现抽奖

首先抽奖分为三种类型，在上面的抽奖按钮中我们已经分析过了，当签到成功后会跳转到抽奖页面，此时有一次免费抽奖的机会，同时第一个按钮文本显示“免抽一次”，当已经参与过免费抽奖后第一个按钮文本则变为单抽同时下面会有个200矿石的提示。当抽奖完成后会将抽奖结果以弹窗的方式呈现给我们。通过浏览器的network分析我们发现免抽和单抽调用的都是同一个post请求的接口draw，只是传递的参数不同，免抽只需要将cookie信息传递即可，而单抽在传递cookie信息的同时还需要将传递一个token信息，参数名为：_signature。该接口返回的数据包含了所抽中的奖品信息，如下图所示下面我们就来代码实现一下这两个按钮的抽奖功能

首先在我们的nodejs服务端项目中封装好两个api分别调用官方的接口draw
回到前端类掘金项目，在luck.vue中的setup方法中定义方法draw，接收一个type作为参数：0表示免抽调用免抽接口，1表示单抽调用单抽接口，10表示十连抽调用十连抽对应的api
当调用免抽接口成功后需要将抽奖结果以弹窗的形式展示给用户，同时需要再次调用getLuck接口（也就是对应的官方的get接口）用于更新免抽次数数据freeCount，调用getPoint接口用于更新总矿石数
当按钮变为单抽后，则需要给draw方法的type参数传递1，同时请求单抽api，请求成功后同样将抽奖结果弹窗展示，并同时需要再次调用getLuck接口（也就是对应的官方的get接口）用于更新免抽次数数据freeCount，调用getPoint接口用于更新总矿石数

核心代码及效果如下：

const showResult = function (name, image) {
      Dialog.alert({
        title: `恭喜抽中${name}`,
        allowHtml,
        message: `<div><img src="${image}" alt="image" /></div>;`,
        theme: "round-button",
        confirmButtonText: "收下奖励",
        messageAlign: "left",
      }).then(() => {
        api.getLuck().then((res) => {
          state.lottery = res.data.lottery;
          state.freeCount = res.data.free_count;
        });
        api.getPoint().then((res) => {
          state.currentPoint = res.data;
        });
      });
    };
    const draw = function (type) {
      console.log(type);
      if (type === 0) {
        //免抽一次
        api.drawFree().then((res) => {
          showResult(res.data.lottery_name, res.data.lottery_image);
        });
      } else if (type === 1) {
        //单抽消耗200矿石
        api.draw1().then((res) => {
          showResult(res.data.lottery_name, res.data.lottery_image);
        });
      } else if (type === 10) {
        //十连抽
      }
    };
复制代码

总结

本次的分享中我们实现了免费抽一次和单抽（消耗200矿石）的抽奖功能，并将抽奖结果以弹窗的形式告诉给用户，虽然已经实现了免抽和单抽的抽奖功能，但还有一个最大的不足就是：抽奖时幸运大转盘没有转动的效果，啪一下就弹出了抽奖结果，这显然体验不是很好。在下一次分享中我们将实现十连抽和幸运大转盘的转动效果。本次分享就先到这里了，欢迎小伙伴们点赞加关注哦！