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

2023-12-09 02:19:07

到目前为止，我们已经基本完成了签到日历页面，还剩下一个签到规则弹窗展示和点击两个按钮分别跳转到抽奖页和兑换页。今天我们继续来完善这些功能。

另外，在之前的分享中，点击首页右上角的签到状态按钮时，无论是已经签到还是未签到，都会直接跳转到签到日历页面。我们希望对这个功能进行改进，已签到时跳转到抽奖页，未签到时跳转到签到日历页面。

签到规则弹窗展示

首先，我们来实现签到规则弹窗的展示。在签到日历页面，我们有一个签到规则按钮，点击这个按钮后，会弹出签到规则弹窗。

<template>
  <div>
    <van-button @click="showRule">签到规则</van-button>
    <van-popup v-model="showRulePopup" position="bottom">
      <div>签到规则：</div>
      <ul>
        <li>连续签到7天可获得一次抽奖机会。</li>
        <li>连续签到30天可获得一次兑换机会。</li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showRulePopup: false,
    };
  },
  methods: {
    showRule() {
      this.showRulePopup = true;
    },
  },
};
</script>

点击按钮跳转到抽奖页和兑换页

接下来，我们来实现点击按钮跳转到抽奖页和兑换页的功能。在签到日历页面，我们有两个按钮，分别为“抽奖”和“兑换”。点击“抽奖”按钮，会跳转到抽奖页；点击“兑换”按钮，会跳转到兑换页。

<template>
  <div>
    <van-button @click="goToLottery">抽奖</van-button>
    <van-button @click="goToExchange">兑换</van-button>
  </div>
</template>

<script>
export default {
  methods: {
    goToLottery() {
      this.$router.push({ path: '/lottery' });
    },
    goToExchange() {
      this.$router.push({ path: '/exchange' });
    },
  },
};
</script>

首页右上角签到状态按钮的点击事件

最后，我们来改进首页右上角签到状态按钮的点击事件。已签到时跳转到抽奖页，未签到时跳转到签到日历页面。

<template>
  <div>
    <van-button @click="handleSigninStatusBtnClick">签到状态</van-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleSigninStatusBtnClick() {
      if (this.$store.state.user.isSignin) {
        this.$router.push({ path: '/lottery' });
      } else {
        this.$router.push({ path: '/signin' });
      }
    },
  },
};
</script>