微信小程序连续签到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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 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中的字符串函数
2006/11/24 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
理解javascript正则表达式
2016/03/08 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
奇怪的鱼:Weird Fish
2018/03/18 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
日语求职信范文
2013/12/17 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
预备党员的自我评价
2014/03/12 职场文书
农业开发项目建议书
2014/05/16 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫