「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。
前言
接上一篇文章我们继续来完善签到功能。上一篇文章中我们已经封装好了相关的服务接口并简单的实现了签到状态的动态展示。同样两种状态对应着两种不同的行为：
- 当状态为未签到时，点击签到按钮会实现签到功能，同时签到成功后跳转的签到日历页面并跳出抽奖提示框
- 当状态为已签到时，点击按钮则会直接跳转到签到日历页面
本次分享将实现如下功能：
- 点击签到按钮实现签到，签到成功后跳转到签到日历页面
- 点击已签按钮直接跳转的签到日历页面
- 签到日历页面日历展示功能实现
实现签到功能
在上一次分享中我们已经封装好了签到的接口，因此这里实现签到功能也很简单，只需要给签到按钮绑定一个click事件，并在该事件方法中请求相应的签到接口即可。实现思路如下：
- 修改Home.vue，找到<template #right>插槽
- 给该插槽下面的两个div元素同时绑定click事件，方法名为：checkIn
- 在setup方法中定义名为checkIn的方法，在该方法中需要做两件事：
- 通过响应式变量todayStatus判断签到状态，如果已签到则直接跳转到签到日历页面
- 如果未签到，则先请求签到接口进行签到，成功后再跳转到签到日历页面
修改后的Home.vue代码如下：
// Home.vue
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("/checkin");
}
})
.catch((err) => {
console.log(err);
});
};
签到日历
首先来看下签到日历页面的组成，如下图是官方App的签到日历页面。头部是一个带有返回功能的导航栏，紧接着下面显示的是连续签到天数和当前矿石数，再往下就是签到日历展示签到的状态，已签到直接显示一个√，否则直接显示日期。我们这里做一些不同：已签到的日期在显示√的同时再在√的下面把当天获得的矿石数展示出来。
在今天的分享中我们先简单的实现点击签到跳转到签到日历页面，在签到日历页面显示一个静态的“签到天数”和“当前矿石数”。然后在显示一个常规的日历组件。关于样式美化和动态数据绑定我们将在下一篇分享中实现。 大概思路如下：
- 在views下新建一个CheckIn.vue组件（注意别忘记配置路由信息，这里不再代码展示）
- 在该组件头部放入一个van-nav-bar导航组件，并实现点击返回按钮回到首页
- 在导航组件下面放一个div元素，内容为静态数据：连续签到天数和当前矿石数
- 最后在拖入一个van-calendar日历组件（详细配置可参考vant组件库官方文档）并简单的做如下配置：
- 隐藏日历标题
- 设为只读，不可修改
- 设置日期的最大和最小范围，即仅展示当月日期
- 隐藏确认按钮 代码展示：
<template>
<van-nav-bar title="签到赢好礼" left-arrow @click-left="back" />
<div class="checkin-count"> 100 | 5000000 </div>
<van-calendar
:show-title="false"
readonly
:max-date="new Date('2022-01-31')"
:min-date="new Date('2022-01-01')"
:poppable="false"
:show-confirm="false"
:style="{ height: '500px' }"
/>
</template>
import { useRouter } from "vue-router"
export default{
setup(){
const router = useRouter();
const back = function(){
router.push('/');
}
return {
back
}
}
}
.checkin-count{
width:100%;
height:90px;
line-height:90px;
text-align:center;
font-size: 20px;
font-weight: bold;
}
效果图如下：
总结
本次分享我们实现了签到功能，以及签到成功后自动跳转到签到日历页面。同时也简单了实现了签到页面静态签到天数和当前矿石数的展示，以及常规日历组件的配置及展示。下一次分享中我们将实现签到数据的动态绑定及展示。今天的分享就到这里了。
