Wechat applet combines laravel to complete the check-in function

Time:2022-1-4

If the front-end style is not processed, the back-end data can be transferred to the front-end for processing

 

1. Wxml page

Continuous check-in
 {{signnum}} days
 3 points per day after 7 consecutive days of attendance
 
 
 
 
 
 
 +{{min<7?1:3}}
 
 
 +{{min+1<7?1:3}}
 
 
 +{{min+2<7?1:3}}
 
 
 +{{min+3<7?1:3}}
 
 
 +{{min+4<7?1:3}}
 
 
 +{{min+5<7?1:3}}
 
 
 +{{min+6<7?1:3}}
 
 
 
 
 {{min}} days
 {{min + 1}} days
 {{min + 2}} days
 {{min + 3}} days
 {{min + 4}} days
 {{min + 5}} days
 {{Max}} days
 
 
 
 Sign in
 
 


 Date from: {min}} 
 Date end: {Max}} 
 Sign in数:{{signnum}} days
 Multiple of switching cycle: {{be}}

2wxss

.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;}

3:wxjs:

const app = getApp();

Page({

  /**
   *Initial data of the page
   */
  data: {
    //img_ url: config. Imgurl, // picture address

    //Check in module
    Signnum: 0, // sign in number
    Signstate: false, // sign in status
    Min: 1, // default value: 1 on the first day of the date
    Max: 7, // default date last day 7
    Be: 0, // default multiple
    integral: ''
  },

  //Sign in
  bindSignIn(e) {
    //Get token
    var token = wx.getStorageSync('token')
    //User ID
    var userid = wx.getStorageSync('userid')
    wx.request({
      url: ' http://www.yan.com/api/task16/sign ', // is only an example, not a real interface address
      data: {
        userid: userid
      },
      header: { token },
      method: 'POST',
      success(res) {
        if (res.data.code == 200) {
          wx.showToast({
            Title: 'check in succeeded',
          })

        }
        if (res.data.code == 500) {
          wx.showToast({
            Title: 'network exception',
          })

        }
        if (res.data.code == 501) {
          wx.showToast({
            Title: 'check in failed',
          })

        }

      }
    })



  },

  /**
   *Life cycle function -- listening for page loading
   */
  onLoad: function (options) {

  },

  /**
   *Life cycle function -- monitor the completion of the first rendering of the page
   */
  onReady: function () {

  },

  /**
   *Life cycle function -- monitor page display
   */
  onShow: function () {

  },

  /**
   *Life cycle function -- listening for page hiding
   */
  onHide: function () {

  },

  /**
   *Life cycle function -- listen for page unloading
   */
  onUnload: function () {

  },

  /**
   *Page related event handler -- listen to user drop-down actions
   */
  onPullDownRefresh: function () {

  },

  /**
   *Handler for bottom pull event on page
   */
  onReachBottom: function () {

  },

  /**
   *Users click the upper right corner to share
   */
  onShareAppMessage: function () {

  }
})

Laravel Routing:

Route::group(['namespace' => 'Task', 'middleware' => 'jwt'], function () {
//Sign in
    Route::post('task16/sign','task16\[email protected]');
//Points list
    Route::post('task16/details','task16\[email protected]');

});

Laravel controller:

/*
 *
 *Sign in*/
    public function sign(Request $request)
    {
        $userId = $request->input('userid');
        $user = WxUserInfo::where('id',$userId)->first();
        $day = $user->days;
        //Get current time
        $yearMonthDay = date('Y-m-d',time());
        //Open transaction
        DB::beginTransaction();
        try {
            //Add user ID and current check-in days to the table
            $sign = \App\Models\week3\Sign::create(['userid'=>$userId,'ymd'=>$yearMonthDay]);

            $signId = $sign->id;
            //Get the last check-in time of the user
            $lastSignDayObj = \App\Models\week3\Sign::select('ymd')->where('userid',$userId)->where('id','orderBy('id','desc')->limit(1)->first();

            //According to the last check-in time, judge whether it is broken, continuous or the first check-in
            if (empty($lastSignDayObj)){
                //Absence indicates the first check-in
                $days = 1;
                $number = BonusPoints::select('number')->where('day',$days)->first();
                if ($number){
                    $score = $number->number;
                    //Exist
                }else{
                    //Does not exist
                    $score = 7;
                }
                $status = 'first sign in, get points'$ score;
            }else{
                $lastSignDay = $lastSignDayObj->ymd;
                //Exist  将当前天数的时间戳 和 上次签到的时间戳作比较
                $time = strtotime($yearMonthDay) - strtotime($lastSignDay);
                if ($time >= 24*3600 && $time < 48*3600){
                    //Indicates the number of consecutive check-in days plus one
                    $days = $day +1;
                    $number = BonusPoints::select('number')->where('day',$days)->first();

                    if ($number){
                        $score = $number->number;
                    }else{
                        //Does not exist
                        $score = 7;
                    }
                    $status = 'continuous check-in'$ days.' Days, get points'$ score;
                }else if ($time >= 48*3600){
                    //Indicates that the broken sign in is the same as the first sign in
                    $days = 1;
                    $number = BonusPoints::select('number')->where('day',$days)->first();
                    if ($number){
                        $score = $number->number;
                        //Exist
                    }else{
                        //Does not exist
                        $score = 7;
                    }
                    $status = 'sign in for the first time after signing off and get points'$ score;
                }else{
                    Return ['code' = > 500, 'MSG' = > 'network error'];
                }
            }
            //Record the user's points details
            Signuser:: create (['userid '= > $userid,' score '= > $score,' type '= > 1,' FID '= > $signid.' order no. ']);
            //Calculate the user's point balance
            $scores = SignUser::where('userid',$userId)->sum('score');
            //Change the number of consecutive check-in days and points of the user
            WxUserInfo::where('id',$userId)->update(['days'=>$days,'scores'=>$scores]);
            //Transaction commit
            DB::commit();
            Return ['code '= > 200,' MSG '= >' check in succeeded ',' data '= > ['score' = > $score, 'status' = > $status]];
        }catch (\Exception $e){
            //Transaction rollback
            DB::rollBack();
            Return ['code' = > 501, 'MSG' = > 'sign in failed'];
        }
    }

Related models: user tables

CREATE TABLE `wxuserinfos` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `openid` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `session_key` varchar(100) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `avatarUrl` varchar(255) COLLATE utf8mb4_ unicode_ Ci default null comment 'Avatar',
  `nickName` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'nickname',
  `days` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'check in days',
  `scores` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'integral',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
<?php namespace App\Models\Task\task15;

use Illuminate\Database\Eloquent\Model;

class WxUserInfo extends Model
{
    //
    protected $guarded=[];
    public $timestamps=false;
    protected $table='WxUserInfos';
}

 

Check in record form

<?php namespace App\Models\week3;

use Illuminate\Database\Eloquent\Model;

class Sign extends Model
{
    //
    protected $guarded=[];
    public $timestamps=false;
    protected $table='sign_records';
}
CREATE TABLE `sign_records` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `Userid ` int (10) not null comment 'userid',
  `YMD ` date not null comment 'check in time',
  `updated_at` datetime DEFAULT NULL,
  `created_ At ` datetime default null comment 'check in time',
  PRIMARY KEY (`id`,`userid`,`ymd`),
  Unique key ` unique '(` userid', ` YMD ') using BTREE
) ENGINE=MyISAM AUTO_INCREMENT=47 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

 

 

 

Check in points rule table:

<?php namespace App\Models\week3;

use Illuminate\Database\Eloquent\Model;

class BonusPoints extends Model
{
    //
    protected $table='sign_rule';
    protected $guarded=[];
    public $timestamps=false;
}
CREATE TABLE `sign_rule` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `day` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'check in days',
  `number` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'integral',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

 

Points list:

<?php namespace App\Models\week3;

use Illuminate\Database\Eloquent\Model;

class SignUser extends Model
{
    //
public $timestamps=false;
protected $table='sign_detailed';
protected $guarded=[];
}
EATE TABLE `sign_detailed` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Userid ` int (11) default null comment 'userid',
  `Type ` tinyint (4) default null comment 'type of obtaining integral',
  `fid` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'point source',
  `score` varchar(100) COLLATE utf8mb4_ unicode_ Ci default null comment 'score obtained',
  `Time ` datetime default null comment ',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;