微信小程序连续签到7天积分获得功能的示例代码


Posted in Javascript onAugust 20, 2020

每周每天签到获得积分的案例
功能设计:计算每天签到得1分,显示得到的签到积分,连续签到3天[周一二三]即得+多3分,连续签到7天[周一二三四五六日]+多7分,没有连续即不显示多余的3分或7分的提示…

微信小程序连续签到7天积分获得功能的示例代码
微信小程序连续签到7天积分获得功能的示例代码

wxml结构:

<!--pages/signIn2/signIn2.wxml-->
<view class='sign-new'>
 <view class='in'>
 <view class='new-head'>
  <view class='sig-tl'>
  <view class='tln'>已连续签到<label class='n'>{{newSignNum}}</label>天</view>
  <view class='tlf'>积分:<label class='f'>{{newSignIntegral}}</label></view>
  </view>
 
  <!-- 未签到 -->
  <view wx:if='{{!newSignBtnState}}' class='sig-qiu sig-qiu-no' bindtap='bindSignFn' >
  <label class='ti'>签到</label>
  </view>
  <!-- 已签到 -->
  <view wx:else class='sig-qiu sig-qiu-yes'>
  <label class='ti'>已签到</label>
  </view>
 </view>

 <view class='new-week' >
  <view class='we-mod'>
  <view class='mo-fen'>
   <label class='f f3' wx:if='{{continuityDays3}}'>+3积分</label>
   <label class='f f7' wx:if='{{continuityDays7}}'>+7积分</label>
  </view>
  <view class='mo-line'>
   <block wx:for="{{isNewSignedArr}}" wx:for-item="v" wx:key="k">
   <label class="q {{v.isSigned?'hover':''}}"></label>
   </block>
  </view>
  <view class='mo-ri'>
   <block wx:for="{{isNewSignedArr}}" wx:for-item="v" wx:key="k">
   <label class="t">{{v.day}}</label>
   </block>
  </view>
  </view>
 </view>
 </view>
</view>

js方法:

Page({

 /**
 * 页面的初始数据
 */
 data: {
 newSignBtnState: false, //按钮签到状态
 continuityDays7: false, //连续7
 continuityDays3: false, //连续3 
 myToday: '',   //周几
 newSignNum: 0,  //签到天数
 newSignIntegral:0, //签到积分
 //签到数组
 isNewSignedArr: [
  {
  "day": "一",
  "isSigned": false
  },
  {
  "day": "二",
  "isSigned": false
  },
  {
  "day": "三",
  "isSigned": false
  },
  {
  "day": "四",
  "isSigned": false
  },
  {
  "day": "五",
  "isSigned": false
  },
  {
  "day": "六",
  "isSigned": false
  },
  {
  "day": "日",
  "isSigned": false
  }
 ],
 },

 //-------点击签到---------
 bindSignFn(e){
 var that = this,
  newSignNum = that.data.newSignNum,
  today = that.data.myToday;
 const arr = [],
   newSignArr = [...arr, ...that.data.isNewSignedArr];
 //
 today = today - 1 > 0 ? today - 1 : 6;
 newSignArr[today].isSigned = true;
 
 //当前积分
 newSignNum++;
 var curFen = that.data.newSignIntegral + 1;

 that.setData({
  newSignBtnState: true,
  newSignNum: newSignNum,
  newSignIntegral: curFen,
  isNewSignedArr: newSignArr,
 })

 that.signAddFen();
 },

 //签到积分函数 
 //连续 天数-积分: 周三+3:周一,周二,周三(1+1+3=5); 周六+7:周日到周六(1+1+3+1+1+1+7=15)
 signAddFen(e) {
 var that = this,
  oneIsSigned = that.data.isNewSignedArr[0].isSigned,
  twoIsSigned = that.data.isNewSignedArr[1].isSigned,
  threeIsSigned = that.data.isNewSignedArr[2].isSigned,
  fourIsSigned = that.data.isNewSignedArr[3].isSigned,
  fiveIsSigned = that.data.isNewSignedArr[4].isSigned,
  sixIsSigned = that.data.isNewSignedArr[5].isSigned,
  sevenIsSigned = that.data.isNewSignedArr[6].isSigned;
  
 // 另外加分-黄色小框显示 周三+3 , 周日+7
 if (oneIsSigned && twoIsSigned && that.data.myToday == 3) {
  that.setData({
  continuityDays3: true
  })
 } else if (oneIsSigned && twoIsSigned && threeIsSigned && fourIsSigned && fiveIsSigned && sixIsSigned && that.data.myToday == 0) {
  that.setData({
  continuityDays7: true
  })
 }

 //签到后执行
 if (that.data.newSignBtnState) {
  // 周三 : 一 二 三
  if (oneIsSigned && twoIsSigned && threeIsSigned) {
  var fens = that.data.newSignIntegral + 3 - 1;
  that.setData({
   newSignIntegral: fens
  })
  }
  // 所有签了: 一 二 三 四 五 六 日
  if (oneIsSigned && twoIsSigned && threeIsSigned && fourIsSigned && fiveIsSigned && sixIsSigned && sevenIsSigned) {
  var fens = that.data.newSignIntegral + 7 - 1;
  that.setData({
   newSignIntegral: fens
  })
  }
 }
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this,
  myDate = new Date(),
  myToday = myDate.getDay(); //周几 0 1 2 3 4 5 6
 that.setData({
  myToday: myToday
 })
 that.signAddFen();
 },

})

有什么错误或优化的地方,可以提出来,大家一起学习研究…
完整案例可访问本人github:https://github.com/xiexikang/xcx-signIn

ps:
[微信小程序:以7天为周期,连续签到7天功能效果]

到此这篇关于微信小程序连续签到7天积分获得功能的示例代码的文章就介绍到这了,更多相关微信小程序签到功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
有关Promises异步问题详解
Nov 13 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 #Javascript
JavaScript 空间坐标的使用
Aug 19 #Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 #Javascript
jQuery实现评论模块
Aug 19 #jQuery
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 #Javascript
jQuery实现简单评论功能
Aug 19 #jQuery
原生JS实现多条件筛选
Aug 19 #Javascript
You might like
php 模拟get_headers函数的代码示例
2013/04/27 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
js实现微信分享代码
2020/10/11 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
python进阶教程之异常处理
2014/08/30 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Python中实现三目运算的方法
2015/06/21 Python
Python数组定义方法
2016/04/13 Python
使用Python对SQLite数据库操作
2017/04/06 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
python使用配置文件过程详解
2019/12/28 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
容易被忽略的Python内置类型
2020/09/03 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
python 进程池pool使用详解
2020/10/15 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
超市总经理岗位职责
2014/02/02 职场文书
就业表自我评价分享
2014/02/06 职场文书
体育专业自荐书
2014/05/29 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
入党个人总结范文
2015/03/02 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书