更新记录
1.0.0(2024-12-05)
下载此版本
第一版
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.8.3 app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
√ |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
cy-qiandao
使用说明:
属性名 |
类型 |
说明 |
qiandaoinfo |
Array |
以签到的日期数据 |
@qiandaodays |
EventHandle |
点击今日签到按钮 |
@clickday |
EventHandle |
点击日期数字 |
如何使用
<template>
<cy-qiandao :qiandaoinfo="qiandaolist" @qiandaodays='qiandao' @clickday='clickday'></cy-qiandao>
<view class="info">
<view class="">
已签到<text> {{qiandaodays}}</text>天
</view>
<view class="">
连续签到<text>{{lianxuqiandaodays}}</text>天
</view>
</view>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
const qiandaolist = ref([]) //数据库中获取已签到的日期 ['2024-12-5']
const qiandaodays = ref('')//已签到的天数
const lianxuqiandaodays = ref('')//连续签到的天数
onLoad(()=>{
getqiandao() //初始化数据
})
// 获取签到的数据
function getqiandao(){
qiandaolist.value = ['2024-12-1','2024-12-3','2024-12-4'] //假设从数据库中获取的数据
// 获取签到的天数
qiandaodays.value = qiandaolist.value.length
//判断是否连续签到 并得到连续签到的天数
iscontinuous()
}
// 判断连续签到的天数
function iscontinuous(){
let qiandao = qiandaolist.value
qiandao = qiandao.sort() //将数组排序
qiandao = qiandao.reverse();//将数组反向排序
let days = 1
for(let i=0;i<qiandao.length;i++){
let date1 = new Date(qiandao[i]).getDate()
let date2 = new Date(qiandao[i+1]).getDate()
console.log(date1,date2);
if(date1 - date2 == 1 ){
days++
}else{
break;
}
}
lianxuqiandaodays.value = days
}
function qiandao(e){ //点击今日签到按钮
qiandaolist.value = e.qiandaoarr //重新获取以前到的日期
qiandaodays.value = e.qiandaoarr.length //计算签到总天数
iscontinuous() //计算连续签到的天数
console.log(e); //打印组件返回的数据
}
function clickday(e){ //点击日期数字
console.log(e); //打印组件返回的数据
}
</script>
<style lang="scss" scoped>
.info{padding: 20rpx;display: flex;justify-content: space-around;font-weight: bold;
text{color: #f55;padding: 0 10rpx;}
}
</style>