laravel8 微信小程序（实现简单签到功能）

已于 2022-06-10 19:47:52 修改
阅读量612 收藏
点赞数 1
文章标签： 微信小程序
于 2022-06-10 16:51:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58856770/article/details/125224598
版权 
//小程序页面

<view class='signIn'>
    <view class='sign-com'>
        <view class='thead'>
            <view class='tt'>已连续签到</view>
            <view class='mm'><label class='n'>{{signNum}}</label>天</view>
            <view class='pp'>你的积分为{{ score}}</view>
        </view>
        <view class='modle'>
            <view class='mol'>
                <view class='mol-line'></view>
                <view class='mol-ites'>
                    <view class="ite {{signNum>=min?'hover':''}}" data-n='{{min}}'>
                        <label class='n'>+{{min<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+1?'hover':''}}" data-n='{{min+1}}'>
                        <label class='n'>+{{min+1<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+2?'hover':''}}" data-n='{{min+2}}'>
                        <label class='n'>+{{min+2<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+3?'hover':''}}" data-n='{{min+3}}'>
                        <label class='n'>+{{min+3<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+4?'hover':''}}" data-n='{{min+4}}'>
                        <label class='n'>+{{min+4<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+5?'hover':''}}" data-n='{{min+5}}'>
                        <label class='n'>+{{min+5<7?1:3}}</label>
                    </view>
                    <view class="ite {{signNum>=min+6?'hover':''}}" data-n='{{max}}'>
                        <label class='n'>+{{min+6<7?1:3}}</label>
                    </view>
                </view>
            </view>
            <view class='moday'>
                <label class='dd'>{{min}}天</label>
                <label class='dd'>{{min+1}}天</label>
                <label class='dd'>{{min+2}}天</label>
                <label class='dd'>{{min+3}}天</label>
                <label class='dd'>{{min+4}}天</label>
                <label class='dd'>{{min+5}}天</label>
                <label class='dd'>{{max}}天</label>
            </view>
        </view>
        <view class='the-btn'>
            <button type='button' class='btn' bindtap='bindSignIn' data-num="{{signNum}}" disabled='{{signState}}' data-min="{{min}}" data-max="{{max}}" data-be="{{be}}">签到</button>
        </view>
    </view>
</view>
<view class='explax'>
    <view class=''>日期开始：{{min}} </view>
    <view class=''>日期结束：{{max}} </view>
    <view class=''>签到数：{{signNum}}天</view>
    <view class=''>您的积分为：{{score}}</view>
</view>



//小程序css样式

.signIn {
    width: 100%;
    height: auto;
}

.sign-com {
    width: 100%;
    height: auto;
    padding: 0 30rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.sign-com .thead {
    width: 100%;
    text-align: center;
    padding: 50rpx 0 35rpx;
}

.sign-com .thead .tt {
    font-size: 24rpx;
}

.sign-com .thead .mm {
    margin-top: 10rpx;
    font-size: 24rpx;
}

.sign-com .thead .mm .n {
    font-size: 66rpx;
    margin-right: 25rpx;
}

.sign-com .thead .pp {
    color: #999;
    font-size: 24rpx;
    margin-top: 10rpx;
}

.sign-com .modle {
    width: 100%;
    height: 100rpx;
    margin-top: 10rpx;
}

.sign-com .modle .mol {
    width: 100%;
    height: 52rpx;
    position: relative;
}

.sign-com .mol-line {
    width: 100%;
    height: 4rpx;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.sign-com .mol-ites {
    width: 100%;
    height: 100%;
    position: absolute;
}

.mol-ites .ite {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    border: 1px solid #f5f5f5;
    background-color: #fff;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.mol-ites .ite .n {
    width: 44rpx;
    height: 44rpx;
    line-height: 44rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #f5f5f5;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 22rpx;
}

.mol-ites .ite::after {
    content: "";
    width: 80rpx;
    height: 4rpx;
    background-color: transparent;
    position: absolute;
    left: 52rpx;
    top: 50%;
    margin-top: -2rpx;
    z-index: 2;
}

.mol-ites .ite:last-of-type::after {
    width: 0;
}

.mol-ites .ite:nth-of-type(2) {
    left: 107rpx;
}

.mol-ites .ite:nth-of-type(3) {
    left: 214rpx;
}

.mol-ites .ite:nth-of-type(4) {
    left: 321rpx;
}

.mol-ites .ite:nth-of-type(5) {
    left: 428rpx;
}

.mol-ites .ite:nth-of-type(6) {
    left: 535rpx;
}

.mol-ites .ite:nth-of-type(7) {
    left: 642rpx;
}

.mol-ites .ite.hover {
    border-color: #ff614a;
}

.mol-ites .ite.hover .n {
    background-color: #ff614a;
    color: #fff;
}

.mol-ites .ite.hover::after {
    background-color: #ff614a;
}

.moday {
    width: 100%;
    height: 40rpx;
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;
}

.moday .dd {
    width: 52rpx;
    height: 40rpx;
    line-height: 1;
    text-align: center;
    font-size: 22rpx;
    position: absolute;
    left: 0;
    bottom: 0;
}

.moday .dd:nth-of-type(2) {
    left: 107rpx;
}

.moday .dd:nth-of-type(3) {
    left: 214rpx;
}

.moday .dd:nth-of-type(4) {
    left: 321rpx;
}

.moday .dd:nth-of-type(5) {
    left: 428rpx;
}

.moday .dd:nth-of-type(6) {
    left: 535rpx;
}

.moday .dd:nth-of-type(7) {
    left: 642rpx;
}

.the-btn {
    margin: 50rpx 0;
}

.the-btn .btn {
    background-color: #ff614a;
    color: #fff;
}

.the-btn.signed .btn {
    background-color: rgba(153, 153, 153, 0.61);
}

.explax {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #666;
}




//小程序js代码
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //签到模块
    signNum: 0,  //签到数
    signState: false, //签到状态
    integral: '',
    min: 1,  //默认值日期第一天1
    max: 7,  //默认值日期最后一天7
    score:"0"
  },

  //签到
  bindSignIn(e) {
    //  获取token
    var token = wx.getStorageSync('token');
    let that = this;
    //  用户id
    wx.request({
      url: '**************************//仅为示例，并非真实的接口地址
      data: {},
      header:{"Authorization":"Bearer "+token},
      success(res) {
        //   console.log(res.data.data);
        if (res.data.code == 200) {
          wx.showToast({
            title: res.data.msg,
          })
          that.setData({
            signNum:res.data.data.days,
            score:res.data.data.score,
            signState:true
          })
        }
        if (res.data.code == 500) {
          wx.showToast({
            title: '网络异常',
          })

        }
        if (res.data.code == 501) {
          wx.showToast({
            title: '签到失败',
          })

        }

      }
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var token = wx.getStorageSync('token');
    let that = this;
    //  用户id
    wx.request({
      url: '**************************', //仅为示例，并非真实的接口地址
      data: {},
      header:{"Authorization":"Bearer "+token},
      success(res) {
        if (res.data.code == 200) {
          that.setData({
            signNum:res.data.data.days,
            score:res.data.data.score,
          })
          
        }
      }
    })
  },
})


//php代码

public function sign(Request $request)
    {
         //测试用户id
        $userId =1;
        $user = User::where('id',$userId)->first();
        $day = $user->days;
        //获取当前的时间
        $yearMonthDay = date('Y-m-d',time());
       $has =  Sign::where('userid',$userId)->where('ymd',$yearMonthDay)->first();
       if($has)
       {
           return ['code'=>200,'msg'=>'已签到','data'=>[]];
       }
        //开启事务
        DB::beginTransaction();
        try {
            //将用户id 和 当前签到天数添加到表里面
            $sign = Sign::create(['userid'=>$userId,'ymd'=>$yearMonthDay]);
            $signId = $sign->id;
            //获取用户上次签到时间
            $lastSignDayObj = Sign::select('ymd')->where('userid',$userId)->where('id','<',$signId)->orderBy('id','desc')->limit(1)->first();
            //根据上次的签到时间来判断是 断签 ，还是连续签到 ，还是第一次签到
            if (empty($lastSignDayObj)){
                //不存在 表示第一次签到
                $days = 1;
                $number = SginRule::select('number')->where('day',$days)->first();

                if ($number){
                    $score = $number->number;
                    //存在
                }else{
                    //不存在
                    $score = 7;
                }

                $status = '第一次签到,获得积分'.$score;
            }else{
                $lastSignDay = $lastSignDayObj->ymd;
                //存在  将当前天数的时间戳 和 上次签到的时间戳作比较
                $time = strtotime($yearMonthDay) - strtotime($lastSignDay);
                if ($time >= 24*3600 && $time < 48*3600){
                    //表示连续签到 签到天数加一
                    $days = $day +1;
                    $number = SginRule::select('number')->where('day',$days)->first();

                    if ($number){
                        $score = $number->number;
                    }else{
                        //不存在
                        $score = 7;
                    }
                    $status = '连续签到'.$days.'天，获得积分'.$score;
                }else if ($time >= 48*3600){
                    //表示断签 和 第一次签到是一样的
                    $days = 1;
                    $number = SginRule::select('number')->where('day',$days)->first();
                    if ($number){
                        $score = $number->number;
                        //存在
                    }else{
                        //不存在
                        $score = 7;
                    }
                    $status = '断签后第一次签到，获得积分'.$score;
                }else{
                    return ['code'=>500,'msg'=>'网路错误'];
                }
            }
            //记录用户的积分明细    
    SginDetail::create(['userid'=>$userId,'score'=>$score,'type'=>1,'fid'=>$signId.'订单号']);
            //求用户的积分余额
            $scores = SginDetail::where('userid',$userId)->sum('score');
            //更改用户的连续签到天数 和 积分
            User::where('id',$userId)->update(['days'=>$days,'scores'=>$scores]);
            //事务提交
            DB::commit();
            return ['code'=>200,'msg'=>'签到成功','data'=>                        
                      ['score'=>$scores,'status'=>$status,'days'=>$days]];
        }catch (\Exception $e){
            //事务回滚
            DB::rollBack();
            return ['code'=>501,'msg'=>'签到失败'];
        }
    }
//页面初始化
    public function startSign()
    {
        //用户ID
        $uid =1;
        $data = User::where('id',$uid)->first();
        return ['code'=>200,'msg'=>'签到成功','data'=>$data];
    }


//表说明


//用户表
CREATE TABLE `users` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '123456@qq.com',
  `email_verified_at` timestamp NULL DEFAULT NULL,
  `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `days` int(11) DEFAULT NULL,
  `scores` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


//积分表
CREATE TABLE `sign_detailed` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userid` int(11) DEFAULT NULL COMMENT '用户id',
  `type` tinyint(4) DEFAULT NULL COMMENT '获取积分的类型',
  `fid` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '积分来源',
  `score` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '获取到的积分',
  `time` datetime DEFAULT NULL COMMENT '时间',
  `created_at` datetime DEFAULT NULL,
  `updated_at` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


//签到表
CREATE TABLE `sign_records` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `userid` int(10) NOT NULL COMMENT '用户id',
  `ymd` date NOT NULL COMMENT '签到时间',
  `updated_at` datetime DEFAULT NULL,
  `created_at` datetime DEFAULT NULL COMMENT '签到具体时间',
  PRIMARY KEY (`id`,`userid`,`ymd`),
  UNIQUE KEY `唯一` (`userid`,`ymd`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

//积分
CREATE TABLE `sign_rule` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `day` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '签到天数',
  `number` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '积分',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

//注意模型要写上   protected $guarded = [];

//模型示例

 

 

坚持与努力的成果
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Laravel租房小程序项目实战开发
菜鸟教程
05-07 1802
〖课程介绍〗 本课程用laravel5.8开发的一个关于租房的微信小程序项目。 地址：https://www.piaodoo.com/9422.html 菜鸟教程https://www.piaodoo.com 项目设计内容比较广，内容丰富，会充分的用到laravel实现RBAC权限功能，无刷新技术，还有restfulAPI等，本课程已经更新完整，总共12天课程，206节视频,完整代码,完整详细笔记...
laravel接口+微信小程序调用
qq_48905744的博客
11-13 2082
微信小程序调用laravel后台接口 laravel后台数据接口 //api路由 前缀 Route::group(['prefix'=>'api'],function (){ //在Api文件下的控制器 Route::get('路由名字','Api\控制器@方法'); }); //控制器 public function index(Request $request) { //获取数据库全部数据 $data = 模型层::get()...
uniapp+Laravel实现微信小程序手机号一键登录全流程（附前后端代码及详细解释）
最新发布
man2017的博客
05-24 302
实现微信小程序手机号一键登录的流程主要分为以下几个步骤，并结合UniApp（一个使用Vue.js开发所有前端应用的框架）和Laravel（一个PHP Web开发框架）来完成。这里将详细介绍每一步骤及其涉及的前后端代码。
小程序实现第三方登录，后台采用的是laravel框架
tanyueisme的博客
11-01 8873
在本次小程序开发的过程中，踩了比较多的坑，也受到了很多开源代码、技术博客的启迪，一直想找时间写一篇博文，总结一下小程序实现第三方登录的流程。文章为本人原创，如有不同见解可互相交流。 1、何为小程序的第三方登录？ 用过小程序的人都知道，很多小程序在用户进入的时候会询问用户“是否允许获得你的公开信息（昵称、头像等）”。点击“允许”的话，就以微信账户的身份登录了小程序。另外一种情况是手机和验
全栈大神黄秀杰小程序实战
Dreawer微信小程序联盟
08-14 2477
秀杰实战教程系列《一》：记账应用开发 秀杰实战教程系列《二》：微信小程序绘图课程之饼图 秀杰实战教程系列《三》：下拉筛选菜单WXDropDownMenu组件 秀杰实战教程系列《四》：倒计时组件，LXStepper组件-商品数量加减 .. 秀杰实战教程系列《五》：实战课程之记账应用开发（续） 秀杰实战教程系列《六》：服务端之用户注册与登录基于ThinkPHP5描述
微信小程序实现签到功能
12-29
本文实例为大家分享了微信小程序实现签到功能的具体代码，供大家参考，具体内容如下 效果图： 今天是16号，所以显示已签到，渲染页面时请求后台传的参数为这月签到的日期 如：[“16”, “14”] 点击签到执行 ...
Laravel 微信小程序后端实现用户登录的示例代码
10-15
主要介绍了Laravel 微信小程序后端实现用户登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用python实现微信小程序自动签到功能
09-16
主要介绍了使用python实现微信小程序自动签到功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序—上课签到系统源码.zip
06-19
微信小程序—上课签到系统源码，高分项目，课程设计，期末大作业都适合。二维码签到，图片验证。 微信小程序—上课签到系统源码，高分项目，课程设计，期末大作业都适合。二维码签到，图片验证。微信小程序—上课...
微信小程序实现简单评论功能
01-20
本文实例为大家分享了微信小程序实现评论功能的具体代码，供大家参考，具体内容如下 具体直接看代码 wxml: <button bindtap='showTalks'>查看评论</button> <!-- 整个评论区 --> <!-- ...
laravel引用微信小程序加密解密算法
xinzi11243094的博客
07-04 1584
PHP 7.1 微信小程序加密解密算法PHP 7.1 微信小程序加密解密算法安装包composer require frowhy/mini-program-aes调用方法，在需要调用的控制器中添加use Leto\MiniProgramAES\WXBizDataCrypt;使用方法$appid = 'wx4f4bc4dec97d474b';        $sessionKey = 'tiihtN...
Laravel 微信小程序登录（前后端分离）
Memory_wz0125的博客
09-09 3250
微信开发者工具、开发者账号、小程序文档。 使用JWT—auth。 API接口：login、post 请求：code、rowData。（code使用一次换一次，比较麻烦。） 返回参数：id 、token。 自定义类：WeChat.php <?php namespace App\Helpers; class WeChat { /** * 获取session_...
实战：微信小程序支付开发
weixin_34387468的博客
12-08 427
该文章纪录了我在开发小程序支付过程中的具体流程自己写的一个简单电商小程序：https://github.com/ateddy/Wec... 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 填写企业信息对公账户并上传凭证后，微信支付会打一笔随机金额到对公账户，输入金额完成验证后，在线签署协议，这样整个微信支付的申请流程完...
laravel小程序微信支付
xiaoshu611的博客
01-27 1991
php小程序微信支付类 laravel小程序微信支付分享地址http://www.xiaoshu168.com/php/232.html
Laravel + 微信小程序多图片
Dream的博客
07-03 491
我们在开发项目的时候，经常会用到多图片上传，我这次来分享一下微信小程序+laravel的多图片上传。首先，我用简单点的，我们先去Lin UI官网 Lin UI 使用npm安装 Lin UI 继续执行下面的命令 执行成功后，会在根目录里生成项目依赖文件夹 （小程序IDE的目录结构里不会显示此文件夹）。 然后用小程序官方IDE打开我们的小程序项目，找到 选项，点击下拉选中 ，等待构建完成即可。然后，我们打开微信小程序，你可以设置全局文件在app.json中引入Lin-UI组件和引入自己写的组件
laravel 微信小程序 登录
lh25946的博客
07-12 458
登录页面 <button bind:tap="getUserProfile">授权</button> js处理事件 Page({ /** * 页面的初始数据 */ data: { userInfo: {}, hasUserInfo: false, avatarUrl: '', nickname: '', }, getUserProfile(e) { wx.getUserProfil
微信小程序签到功能实现
热门推荐
阵雨的博客
12-16 6万+
sign.wxml 一 二 三 四 五 六 日 \n {{item+1}} {{item+1}} {{date}
微信小程序实现每日签到、连续签到
flying meng的菜鸟居
10-06 1万+
昨天在看自己写的小程序项目，无意中打开了CSDN APP，突然间觉得，我去，如果在小程序中加个“签到”功能，岂不美哉！（好吧，其实是昨天买的书没到货，然后闲着无事，就想起了大明湖畔的“签到”） 但是吧，又不想写和服务器交互的，本着“简单点”的原则，我想起了曾经的挚爱—— 本地存储 。 先说说相关注意吧： 其一就是 storage中只能存放字符串！ 我去，昨晚大部分时间都是在搞这个。以前一直认为存放...
微信小程序查寝打卡微信小程序源码数据库论文.docx
07-01
微信小程序查寝打卡微信小程序源码数据库论文.docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值