更新记录

1.0.5（2024-01-04）

连续签到天数、获取的积分动态实现 新增checkinDays、integral、isIntegral三个参数

1.0.4（2023-12-28）

新增显示已经签到的日期功能，效果看预览图

1.0.3（2023-04-04）

1、新增是否启动点击日期补签功能 2、根据需求调整了前后显示时间 3、解决了用户提出的bug

平台兼容性

1.引入组件

引入nvue 在首页引入，看你的需求选择引入的文件

import youlanSignIn from '@/components/youlan-SignIn/youlan-SignIn.nvue'

引入vue

import youlanSignIn from '@/components/youlan-SignIn/youlan-SignIn.vue'

注册组件

components: {
    youlanSignIn
},
// 调用组件
<youlanSignIn
    :integral="integral"
    :isIntegral="isIntegral" 
    :checkinDays="checkinDays" 
    :already="data" 
    type="sign" 
    lang="zh" 
    @change="signDate" 
/>

// already 参数使用方法
data() {
    return {
        data: [],
        checkinDays: 0,     // 连续签到天数
        integral: 0,        // 本次签到获取的积分
        isIntegral: false,  // 是否显示签到积分模块
    }
}

onLoad() {
    setTimeout(() => {
        let arr = ["2024-01-01", "2024-01-02"];     // 假设这是从后台获取的签到数据
        arr.forEach(el => {
            // 需要换成时间戳
            this.data.push(new Date(el).getTime())
        })
    }, 2000)
},
methods: {
    signDate(v) {
        // 签到成功后需要更新连续签到的数据
        this.checkinDays = this.checkinDays + 1;
        // 获取随机整数
        const randomInteger = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
        // 模拟获取的积分,这个根据你的实际情况来，如果你没有积分系统，可以忽略这些
        this.integral = randomInteger;
        this.isIntegral = true;

        console.log(v);
    }
}

2.属性说明

3.方法

4.联系我

遇到问题可以在下方留言，或者私信我，要是我回复不及时或者问题比较急的，可以微信找我