<template>
<view>
<ss-calendar :checks="checksdata"></ss-calendar>
<u-popup v-model="show" mode="center" closeable border-radius="14" width="500rpx" height="380rpx">
<view class="content" style="padding: 20rpx;text-align: center;">
<view style="margin-top: 60rpx;line-height: 46rpx;font-size: 32rpx;font-weight: bolder;">{
{
titlecontent}}</view>
<view style="line-height: 46rpx;">连续签到7天可增加3积分!</view>
<view class="" style="margin: 30rpx;">
<u-icon name="checkmark-circle" color="#2979ff" size="108"></u-icon>
</view>
</view>
</u-popup>
<button type="default" class="setbtncolor" @click="handleqd">立即签到</button>
</view>
</template>
<script>
import ssCalendar from '@/components/ss-calendar/ss-calendar.vue'
export default {
data() {
return {
show:false,
checksdata:[1,2,3,4,5],
titlecontent:"签到成功"
}
},
methods: {
handleqd(){
this.show = true
let i = 6
if(this.checksdata.indexOf(i)!= -1){
this.titlecontent ="今日已签到,无需重复签到"
}else{
this.checksdata.push(i)
}
}
},
components: {
ssCalendar
}
}
</script>
<style lang="scss" scoped>
.setbtncolor{
background-color: #2B85E4;
}
</style>
用到的插件: https://ext.dcloud.net.cn/plugin?id=272
效果: