uniapp做签到功能（利用dcloud插件）

我就是我 2022-10-23 12:56 739阅读 0赞

<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][https_ext.dcloud.net.cn_plugin_id_272]  
效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 2]

[https_ext.dcloud.net.cn_plugin_id_272]: https://ext.dcloud.net.cn/plugin?id=272
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: /images/20221023/10451a0d16064c99bf40ef93860eb5bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 1]: /images/20221023/739a3be3c2864be684d8ede977dc55ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70 2]: /images/20221023/afd130a8e64a4512b96587e02cd0b6b4.png