Vue3 + Vant3打造网页版掘金签到页面（续）：更全面的功能提升

前端

2023-11-17 15:57:10

从上一篇继续

在上篇文章中，我们已经完成了签到页面的大部分功能，包括每日签到状态的动态绑定、连续签到天数和累计矿石数的动态绑定，以及每天获取到的矿石数的展示。今天，我们将继续完善这个页面，使其功能更加全面，体验更加完善。

新增功能概览

修复签到日期错误问题
签到后的提示信息
输入邀请码功能

修复签到日期错误问题

在上篇教程中，我们发现了一个小问题，即签到日期总是显示为当天日期，而实际签到日期可能是前一天。为了解决这个问题，我们需要对签到日期的计算逻辑进行一些修改。

首先，我们需要获取当前服务器时间。我们可以使用 JavaScript 的 Date.now() 方法来获取当前时间戳，并将其转换成日期对象。然后，我们可以将这个日期对象与本地时间进行比较，以确定当前是否已经进入下一天。

// 获取当前服务器时间
const serverTime = new Date(Date.now());

// 获取本地时间
const localTime = new Date();

// 如果当前服务器时间比本地时间晚，则说明已经进入下一天
if (serverTime > localTime) {
  // 更新签到日期
  签到日期 = serverTime.toLocaleDateString();
}

签到后的提示信息

当用户签到成功后，我们希望提供一个提示信息，告知用户签到成功以及获得了多少矿石。我们可以使用 Vant 的 Toast 组件来实现这个功能。

// 签到成功后
Toast({
  message: `签到成功，获得 ${矿石数量} 矿石`,
  duration: 1500,
});

输入邀请码功能

最后，我们还将添加一个输入邀请码的功能。当用户输入邀请码后，可以获得额外的矿石奖励。

// 监听邀请码输入框
邀请码输入框.addEventListener('input', (e) => {
  // 获取邀请码
  const 邀请码 = e.target.value;

  // 向服务器发送请求，验证邀请码
  axios.post('/api/verify_invite_code', { 邀请码 }).then((res) => {
    // 如果邀请码有效
    if (res.data.success) {
      // 提示邀请码有效，并给予奖励
      Toast({
        message: `邀请码有效，获得 ${奖励矿石数量} 矿石`,
        duration: 1500,
      });

      // 更新累计矿石数
      累计矿石数 += 奖励矿石数量;
    } else {
      // 提示邀请码无效
      Toast({
        message: `邀请码无效`,
        duration: 1500,
      });
    }
  }).catch((err) => {
    // 出现错误时提示
    Toast({
      message: `验证邀请码失败`,
      duration: 1500,
    });
  });
});