【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 签到日历页面继续完善

西瓜watermelon
566 阅读4分钟

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

前言

到目前为止关于签到日历页面我们已经基本完成了，还剩下一个签到规则弹窗展示和点击两个按钮分别跳转到抽奖页和兑换页。今天我们继续来完善这些功能。另外在之前的分享中，点击首页右上角的签到状态按钮时，无论是已签到状态还是未签到状态都会跳转到签到日历页面，有一点是不太合理的，就是在未签到状态下签到成功后应该跳转的抽奖页面，因为每次签到成功后都有一次免费抽奖的机会，这样用户体验会更好些。今天要实现的功能有：

  • 点击签到规则弹窗展示签到规则
  • 点击去抽奖按钮跳转的抽奖页面
  • 点击去兑换按钮跳转到兑换页面
  • 签到成功后跳转的抽奖页面

签到规则弹窗展示

签到规则展示比较容易实现，我们只需要根据官方的api获取到签到规则的内容，然后将内容通过弹窗的形式展示出来即可。弹窗组件依然用的是vant提供的Dialog弹窗组件，但是在使用这个组件时遇到了一个麻烦：该Dialog组件有两种用法，一种是通过函数调用的形式使用，另一种是通过组件标签的形式使用。刚开始使用的是组件标签的形式，但是点了按钮后却没反应怎么也弹不出来，最后不得不放弃该方法而是使用函数调用的形式实现，大概思路如下：

  • 封装api，涉及到官方api：get_rules_text，get请求，返回值为对象数组，对象包含text_bold和text_plain两个属性，在获取到数据时需要将两个属性的值拼在一起才是完整的签到规则
  • 给“签到规则”标签注册点击事件，并绑定方法showCheckRules
  • 定义一个checkinRules响应式属性
  • 在setup方法中请求api：get_rules_text获取规则数据，并将数据拼接后赋值给响应式属性checkinRules
  • 定义方法showCheckRules，在该方法中通过函数调用的方式使用Dialog，将规则信息展示出来 关键代码及效果图如下：
 <div
  style="
    float: right;
    color: #bbb;
    font-size: 14px;
    margin-right: 8px;
    margin-top: 5px;
  "
  @click="showCheckRules" <!--本次新增-->
>
  签到规则
</div>

api.getRulesText().then((res) => {
  res.data.forEach((element) => {
    state.checkinRules += element.text_bold + element.text_plain;
  });
});

const showCheckRules = function () {
  Dialog.alert({
    title: "签到规则",
    message: state.checkinRules,
    theme: "round-button",
    confirmButtonText: "关闭",
    messageAlign: "left",
  }).then(() => {
    // on close
  });
};

效果图

test2.gif

抽奖页和兑换页跳转

最后还剩下两个按钮功能就更简单了，点击“去抽奖”按钮跳转到对应的抽奖页面，点击“去兑换”跳转到兑换页面，我们首先需要新添加对应的两个空页面，对应的具体内容再根据情况酌情补充。

  • 在views下新增抽奖和兑换对应的两个组件：Luck.vue和exchange.vue（页面内容暂时先用图片代替）
  • 配置两个页面对应的路由信息
  • 在checkin.vue的setup方法中分别定义两个对应的方法luck和exchange
  • 在以上两个方法中通过router.push的形式实现对应页面跳转
  • 最后再给“去抽奖”和“去兑换”两个按钮的click事件绑定上对应的方法 关键代码及效果图：
<div class="luck-button" @click="luck">去抽奖 >></div>
<div class="luck-button" @click="exchange" style="margin-left: 8px">去兑换 >></div>

const luck = function luck() {
  router.push("/luck");
};
const exchange = function exchange() {
  router.push("/exchange");
};

test2.gif

签到成功后跳转的抽奖页面

在前面的分享中，无论首页右上角的签到状态是什么状态，点击后都是跳转的签到日历页面，这有一点点不太合理，今天我们就来对该功能改造一下，实现：当状态是未签到时，点击按钮实现签到功能，并在签到成功后自动跳转到抽奖页面，而如果是已签到状态时则直接跳转到签到日历页面

  • 在首页Home.vue的setup方法中找到checkIn方法
  • 并在该方法的if分支外，也就是api.checkIn异步请求中，将router.push中的“/checkin”改为“/luck”即签到成功后跳转到抽奖页面 关键代码及效果图
// Home.vue
setup(){
const checkIn = function () {
      if (state.todayStatus) {
        router.push("/checkin");
        return;
      }
      api
        .checkIn()
        .then((res) => {
          if (res.err_no == 0 && res.data) {
            state.todayStatus = true;
            router.push("/luck");//本次修改内容， 其它未添加注释的均不作修改
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
}

test2.gif

总结

本次分享我们实现了签到规则的获取及弹窗展示，点击按钮实现抽奖页和兑换页的跳转，最后将首页右上角签到成功后的行为进行了改造。到此我们的签到日历页面终于算是全部完善了，终于可以告一段落了。今天的分享就到这里了。喜欢的小伙伴欢迎点赞加关注哦！

avatar
文章
阅读
粉丝