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

最新推荐文章于 2024-03-27 17:51:47 发布
最新推荐文章于 2024-03-27 17:51:47 发布
阅读量410 收藏 3
点赞数 2
文章标签： html 前端 css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71349739/article/details/132871043
版权
该篇文章描述了一个使用Vue编写的签到功能，用户每日签到可以获得积分，连续签到七天有额外奖励。文章展示了如何在页面上展示签到状态和操作，以及调用API进行签到操作和获取积分信息。
摘要由CSDN通过智能技术生成

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


<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) }">
            <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="handleSignIn1">签到</view>
      </div>
	  
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		showCalendar: false,
		info: {
			lunar: true,
			range: true,
			insert: false,
			selected: []
		},
      list: [
        { gift_num: "第一天", code: "USER_SIGN_POINT_1", points: null },
        { gift_num: "第二天", code: "USER_SIGN_POINT_2", points: null },
        { gift_num: "第三天", code: "USER_SIGN_POINT_3", points: null },
        { gift_num: "第四天", code: "USER_SIGN_POINT_4", points: null },
        { gift_num: "第五天", code: "USER_SIGN_POINT_5", points: null },
        { gift_num: "第六天", code: "USER_SIGN_POINT_6", points: null },
        { gift_num: "第七天", code: "USER_SIGN_POINT_7", points: null },
      ],
      res: "",
      days: "", // 签到的总天数
      signOK: "",
      headimgUrl: "",
      sevenDay: "",
    };
  },
  onReady() {
  	this.$nextTick(() => {
  		this.showCalendar = true
  	})
  },
  methods: {
	  open() {
	  	this.$refs.calendar.open()
	  },
	 
    async todaySignIn(code) {
      const res = await this.$request.post(
        "user/userSign",
        {
          token: uni.getStorageSync("token").token,
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        uni.showToast({
          title: "签到成功！",
		  duration:2000
        })
		setTimeout(()=>{
			this.getSignIn()
		},2000)
      } else {
        this.handleSignIn()
      }
    },
	handleSignIn1() {
	    const index = Number(this.days) + 1;
	    if (index <= this.list.length) {
	      const code = this.list[index - 1].code;
	      this.todaySignIn(code);
	    } else {
	      uni.showToast({
	        icon: 'none',
	        title: "明天再来签到吧"
	      })
	    }
	  },
    async qiandao(code, index) {
      const res = await this.$request.post(
        "user/getUserConf",
        {
          token: uni.getStorageSync("token").token,
          code: code,
          type: 1
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        console.log(data, "签到");
		this.sevenDay = data[0].values
        this.list[index].points = data[0].values;
      }
    },
    // 点击签到
    handleSignIn(index, code) {
      if (index > Number(this.days) + 1) {
        uni.showToast({
          icon: 'none',
          title: "请按顺序签到"
        })
      } else if (index === Number(this.days) + 1) {
        this.todaySignIn(code);
		
      } else {
        uni.showToast({
          icon: 'none',
          title: "明天再来签到吧"
        })
      }
    },
// async getSignIn() {
//   const res = await this.$request.post(
//     "user/getUserSignList",
//     {
//       token: uni.getStorageSync("token").token,
//     },
//     {
//       native: true,
//     }
//   );
//   if (res.data.status == "ok") {
//     var data = res.data.data;
//     this.days = data.sign_num;
//     this.headimgUrl = data.headimgurl;
// 	console.log(this.headimgUrl,'头像')
//     // 更新签到列表数据
//     for (let i = 0; i < this.list.length; i++) {
//       if (i < 7) {	
//         // 前七天的日期都显示原始的第一天、第二天等日期
//         this.list[i].gift_num = `第${i + 1}天`;
//       } else {
//         // 第八天及以后的日期只有在连续签到七天后才显示
//         if (this.days >= 7) {
//           this.list[i].gift_num = `第${i + 1}天`;
//         } else {
//           this.list[i].gift_num = "";
//         }
//       }
//       this.qiandao(this.list[i].code, i);
//     }
//   }
// },
    async getSignIn() {
      const res = await this.$request.post(
        "user/getUserSignList",
        {
          token: uni.getStorageSync("token").token,
        },
        {
          native: true,
        }
      );
      if (res.data.status == "ok") {
        var data = res.data.data;
        this.days = data.sign_num;
        this.headimgUrl = data.headimgUrl;
		 // this.apiDates = data.map(item => item.create_time.split(' ')[0]); // 提取日期字符串中的日期部分
        console.log(data, "签到列表");
		
        for (let i = 0; i < this.list.length; i++) {
          this.qiandao(this.list[i].code, i);
        }
      }
    },
  },
  components: {},
  onShow(){
	  this.getSignIn();
  },
  created() {
    this.getSignIn();
    this.qiandao("USER_SIGN_POINT_7", 6);
  },
};
</script>

<style lang="scss" scoped>
.back {
  width: 100%;
  height: 460rpx;
  background: url("https://-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308240245145778-Group%2034161%403x.png") no-repeat;
  position: relative;
  top: 0;
  .avatar {
    width: 400rpx;
    position: absolute;
    height: 100rpx;
    left: 40rpx;
    top: 20rpx;
    z-index: 9;
  }
  .sign-date {
   
  }
}
.sign_content {
  position: relative;
  top: -150rpx;
  // width: 96%;
  height: 622rpx;
  background: white;
  border-radius: 24rpx;
  padding: 34rpx;
   display: flex;
    justify-content: center; /* 水平居中 */
  .sign_day {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 436rpx;
  }
}
.signBox {
	width: 100%;
  background: white;
  border-radius: 10px;
  margin: 0 auto;
  .tips {
    margin-top: 3%;
    span {
      font-size: 16px;
      letter-spacing: -0.1px;
      line-height: 22px;
      font-weight: 500;
    }
    :nth-of-type(2) {
      color: #fe9300;
      letter-spacing: -0.1px;
    }
  }
  .signBtnBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    & > li {
      // cursor: pointer;
      width: 22%;
      height: 172rpx;
      background:url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300426108993-Group%2034210%403x.png');
      border-radius: 4px;
	  background-size: 100%;
	  margin-top: 50rpx;
      img {
        margin: 6px 0 0 10px;
      }
      p {
        text-align: center;
        opacity: 0.6;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
	li:nth-child(7){
		 width: 49%;
		  height: 172rpx;
		  color: #333333;
		  background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300506217750-Group%2034211%403x.png');
		  background-size: cover;
		  background-position: center;
		  border-radius: 4px;
		  margin-top: 50rpx;
		  p{
			  text-align: left;
			  padding-left: 50rpx;
		  }
	}
		
		.signed:nth-child(7){
			background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202309070948277933-Group%2034267%403x.png');
			background-size: 100%;
			color: #333333;
			p {
			  opacity: 1 !important;
					color: #333;
			}
		}
    .signed {
      background: url('https://ebk-picture.oss-cn-hangzhou.aliyuncs.com/ebk-wap/img-202308300412527364-Group%2034209%403x.png');
	  background-size: 100%;
      color: #333333;
      p {
        opacity: 1 !important;
		color: #333;
      }
    }
	
  }
}
</style>

修复bug
关注
海底捞小程序 签到 任务脚本
三维点云技术探索
09-11 119
该脚本的主要功能是自动化执行“海底捞小程序”的签到操作，通过模拟登录、获取用户信息、签到和拼图查询等步骤，实现对签到任务的自动化处理，并通过微信推送通知用户签到结果。脚本用于“海底捞小程序”签到，自动登录微信小程序账户，获取用户信息，并执行签到操作。- main: 主流程控制，依次执行登录、获取用户信息、签到、查询拼图等操作。- daily_sign_getAct: 获取每日签到信息，并执行签到操作。- signin_query: 查询签到状态，并根据结果执行签到操作。- signIn: 执行签到操作。
霸王茶姬小程序任务脚本
最新发布
AALoveTouch的博客
07-19 1919
霸王茶姬
微信小程序每日签到
记忆中的夏天
07-16 709
https://www.jianshu.com/p/4569a6c90737
【Java项目】如何设计一个用户签到系统？并且这个签到系统支持7天，14天等不同天数的连续签到功能？
Zhangsama1的博客
06-07 1897
Java面试中遇到如何设计用户签到功能的场景题
微信小程序连续签到获得积分
qq_45645051的博客
08-26 4369
微信小程序连续签到获得积分demo 话不多说！！(伸手党的福利) 直接上代码，先看一下实际图 叮叮叮！！！ wxml代码 <view> <view class='signIn'> <view class='sign-com'> <view class='thead'> <view class='tt'>已连续签到</view> <view class='mm'><label class='n'>
实现 连续15签到记录_MySQL和Redis实现用户签到，你喜欢怎么实现？
竹林幽深
04-11 359
现在的网站和app开发中，签到是一个很常见的功能 如微博签到送积分，签到排行榜 微博签到 如移动app ，签到送流量等活动， 移动app签到 用户签到是提高用户粘性的有效手段，用的好能事半功倍！ 下面我们从技术方面看看常用的实现手段： 一. 方案1 直接存到数据库MySQL 用户表如下： last_checkin_time 上次签到时间 checkin_count 连续签到次数 记录每个用户签到信息 签到流程 1.用户第一次签到 last_checkin_time = t
微信小程序连续签到7天积分获得功能的示例代码
10-14
在微信小程序中实现连续签到7天积分获得功能是一项常见的用户激励策略，旨在鼓励用户保持活跃度和参与度。下面将详细介绍如何通过实例代码来构建这样一个功能。 首先，我们需要了解功能设计。在这个案例中，用户...
微信小程序以7天为周期连续签到7天功能效果的示例代码
11-19
微信小程序的连续签到功能是提高用户粘性和活跃度...总之，微信小程序的7天连续签到功能通过结合前端展示和后端逻辑，实现了对用户参与度的有效激励。开发者可以根据业务需求进行扩展，构建更复杂、更有趣的签到系统。
【微信答题小程序】答题app小程序源码+每日签到+排位赛+群比赛+道具商店+JAVA技术.rar
07-09
每日签到：七天一个周期，每天可签到得积分，如果连续2天以上签到除了可得到本日应得积分外，还可以额外获得连续签到奖励积分。 4、 每日答题 每日答题模式每个用户每天有5次答题机会，进入答题后每答对一题得100...
PHP连续签到功能实现方法详解
10-15
主要介绍了PHP连续签到功能实现方法,结合实例形式详细分析了PHP结合mysql数据库实现连续签到功能相关操作技巧,需要的朋友可以参考下
微信小程序日历签到功能demo
08-13
要实现一个简单的日历，需要先知道几个值： 每月有多少天 每月第一天、最后一天各星期几 每月1号之前应有多少天属于上一个月 每月最后一天之后应有多少天属于下一个月
微信小程序日历积分签到源码包.zip
07-09
自己写的微信小程序日历签到模块;只需修改接口地址和对应返回参数就能动态生成整个模块； 1、签到功能 2、本日已签到、未签到文字提示； 3、已签到积分文字提示； 4、本月日历每日展示，表格头部展示每周的星期几； 5、本月日历每天签到背景色提示；
论坛自动签到小程序
03-31
去年写的一个很简单的论坛自动签到系统,模拟网页登录,而且能够自动点击页面,领取金币. 原理很简单,使用VB开发,一共100多条代码... 直接调用页面的DOM元素进行操作. 进行修改以后,可以用在其他地方进行自动IT管理...比如定时登录网页提交数据.
uniapp连续七日签到功能
m0_59636866的博客
03-27 456
【代码】uniapp连续七日签到功能。
微信小程序 - 日历签到编写
热门推荐
杨京葛
06-01 1万+
预览图wxml签到头部为了方便，我在这里写了两个头部，已签到用这种&lt;view class="headers_wrapper" wx:if="{{signtype=='2'}}"&gt; &lt;view class="for_headerleft"&gt;&lt;image src="../../images/calendar2.png" &gt;&lt;/i
微信小程序结合日历判断累计打卡以及连续打卡
开发路上的AZhe
10-19 5468
利用js生成日历
微信小程序实战：签到功能实现详解
"微信小程序实现签到功能的代码实例" 在微信小程序中实现签到功能是一项常见的需求，它能够帮助用户记录他们的日常习惯，并且通常用于增加用户粘性。本实例将详细介绍如何在微信小程序中创建一个签到系统。下面我们...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值