您的当前位置:首页正文

微信小程序实现连续签到七天

2024-11-29 来源:个人技术集锦

签到满了七天之后,签到第八天会回到第一天重新开始签到

断签之后会从第一天重新开始



<template>
  <view class="content" style="height: 100vh;background: white;">
    <view class="back">
      <view style="position: absolute;bottom: 200rpx;left: 40rpx;width: 90%;">
		  <image :src="headimgUrl" mode="widthFix" style="width: 92rpx;height: 92rpx;border-radius: 50%;float: left;margin-top: -6rpx;margin-right: 14rpx;"></image>
			<view style="float: left;">
				
				<span style="font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;">连续签到 </span> <span style="font-size: 44rpx;color: #FF7D00;line-height: 40rpx;">{
   { days }}</span><span style="font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;"></span>
				        <view style="font-size: 24rpx;
				font-weight: 100;
				color: #FFFFFF;">连续签到七天可获得{
   {
    sevenDay }}积分</view>
			</view>
			 <uni-calendar ref="calendar" class="uni-calendar--hook"
			      :clear-date="true" :date="info.date"
			      :insert="info.insert" 
			      :startDate="info.startDate"
			      :endDate="info.endDate" :range="info.range" @confirm="confirm"  />
      </view>
    
    </view>
    <view class="sign_content">
      <div class="signBox">
        <text style="font-size: 30rpx;
font-weight: bold;
color: #0D052C;">签到得积分,直接当钱花</text>

        <ul class="signBtnBox">
          <li class="signBtnOne" v-for="(item, index) in list" :key="index" :class="{ signed: index + 1 <= Number(days) && (!resetSign || index === 0 || index >= 7) }">
            <div @click="handleSignIn(index+1, item.code)">
              <p style="line-height: 50rpx;">{
   {
    item.gift_num }}</p>
            <!--  <p v-if="index + 1 <= Number(days)">已签到</p>
              <p v-else>签到</p> -->
              <p style="line-height: 210rpx;font-size: 20rpx;">{
   {
    item.points }}积分</p>
            </div>
          </li>
        </ul>
		<view style="background: linear-gradient(to bottom right, #FF5A23, #FF920D);width: 80%;margin: 0 auto;text-align: center;color: white;font-size: 34rpx;height: 88rpx;line-height: 88rpx;margin-top: 120rpx;border-radius: 40rpx;" @click="todaySignIn">签到</view>
      </div<
显示全文