溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng)

發(fā)布時間:2020-09-14 11:16:07 來源:腳本之家 閱讀:369 作者:菥蓂尋生 欄目:web開發(fā)

一。手動生成二維碼的.js代碼

這里要引入一個官方文檔wxapp.qrcode.min.js

let drawQrcode = require('../utils/wxapp.qrcode.min.js');//引入wxapp.qrcode.min.js文件
createQRcode(canvasWidth, canvasHeight, canvasId, url) {
  // 調(diào)用qrcode.js里的方法,傳入對應(yīng)參數(shù)
  drawQrcode({
   width: canvasWidth,
   height: canvasHeight,
   canvasId: canvasId,
   text: url
  })
  console.log(drawQrcode.width)
 },
 setCanvasSize() {
  let size = {};
  // getSystemInfoSync 微信小程序提供getSystemInfoSync獲取設(shè)備的信息
  let res = wx.getSystemInfoSync();
  // console.log(res);
  // 獲取比例
  let scale = 686 / 750;
  let width = res.windowWidth * scale;
  let height = width;
  size.w = width;
  size.h = height;
  return size;
 },
 formsubmit(e) {
  let url = e.detail.value.url || this.data.placeholder;
  // let url = e.detail.value.url ? e.detail.value.url : this.data.placeholder;
  wx.showToast({
   title: '生成中',
   icon: 'loading',
   duration: 2000
  })
  let that_ = this;

  let timer = setTimeout(() => {
   let size = that_.setCanvasSize();
   //調(diào)用createQRcode方法
   that_.createQRcode(size.w, size.h, 'mycanvars', url);
   wx.hideToast();
   clearTimeout(timer);
  }, 2000)},


 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  //setCanvasSize 拿到畫布區(qū)域的尺寸(微信小程序不支持dom的操作,所以單獨定義方法去獲?。?  let size = this.setCanvasSize();
  // console.log(size);
  let url = this.data.placeholder;
  //調(diào)用createQRcode方法
  this.createQRcode(size.w, size.h, 'mycanvars', url);
 },

二。準備工作,導(dǎo)入數(shù)據(jù)庫表,和unit.js。獲取時間

const DB = wx.cloud.database().collection("cows")
const TB = wx.cloud.database().collection("log")
let i = 0
let id=''
var util = require('../utils/util.js');

三。寫入簽到簽退按鈕的.js代碼

now(){
  
  var that = this;
  console.log(that.data.nows)
  if (i == 0 && that.data.now =='簽到'){
   i=1;
   var time1 = util.formatTime(new Date())
   DB.add({
    data: {
     statctime:time1,
     endtime: ''
    },
    success(res) {
     id=res._id
     console.log("簽到成功", res._id)
    },
    fail(res) {
     console.log("簽到失敗", res)
    }
   })
   that.setData({
    statc: time1,
    now: '已簽到',
    color: 'rgb(199, 194, 194)'
   })
   wx.showToast({
    title: '簽到成功'
   })
   var timeout= setTimeout(function(){
    wx.switchTab({
     url: '/pages/arrary/first/ones/ones',
    })
   },1000)
   
  }
  else{
   wx.showToast({
    title: '已簽到,請勿重復(fù)簽到',
    icon: 'none'
   })
  }
 },
 nows(){
  var that = this;
  if (i == 1 || that.data.now == '已簽到' && that.data.nows == '簽退'){
   i=2;
   var time2 = util.formatTime(new Date())
   DB.doc(id).update({
    data: {
     endtime: time2
    },
    success(res) {
     console.log("簽退成功", res)
    },
    fail(res) {
     console.log("簽退失敗", res)
    }
   })
   that.setData({
    ends: time2,
    nows: '已簽退',
    colors: 'rgb(199, 194, 194)'
   })
   wx.showToast({
    title: '簽退成功'
   })
  }
  else
  {
   if(i==2){
    wx.showToast({
     title: '已簽退,請勿重復(fù)簽退',
     icon: 'none'
    })
   }
   else{
    wx.showToast({
     title: '請先簽到,簽到之后方可簽退!',
     icon: 'none'
    })
   }
  }
 },

第四。頁面監(jiān)聽簽退后會跳出簽退頁面。重新進入需要監(jiān)聽。

 var that = this
  wx.cloud.callFunction({
   name: "getopenid",
   success(res) {
    var openid = res.result.openid
    DB.get({
     success(e) {
      console.log(e)
      var lenths = e.data.length;
      console.log(lenths);
      var time1 = util.formatTime(new Date())
      for (var i = 0; i < lenths; i++) {
       if (e.data[i]._openid == openid && e.data[i].statctime.substring(0, 10) == time1.substring(0, 10)) {
        var st = e.data[i].statctime
        var en = e.data[i].endtime
        that.setData({
         statc: st,
         now: '已簽到',
         color: 'rgb(199, 194, 194)',
        })
       }
      }
     },
     fail(e) {
      console.log("查詢失敗", e)
     }
    })
    console.log("獲取成功", res.result.openid)

   },
   fail(res) {
    console.log("獲取成功", res)
   }
  })

到這,一個簡單的簽到頁面就完成了。如有不對的地方,小菜鳥期盼大神的指導(dǎo)。
希望對你們有用處。

總結(jié)

以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)二維碼簽到考勤系統(tǒng),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI