uniapp做签到功能(利用dcloud插件)

<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
效果:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45432996/article/details/114403272
今日推荐