使用公开页实现扫码签到功能
Up
• 发表于:2021-05-19 17:55:29 • 更新于:2021-12-03 13:44:39
547

功能描述:

使用白码平台的公开页,实现系统里的客户或学生扫描二维码跳转到签到页面,输入手机号码进行签到。

 

前期准备:

1. 在工作台,系统设置--用户管理中,启用公共用户。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418858517_%E5%9B%BE%E7%89%871.png


2. 数据表创建:创建一张签到人表、签到登记表。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418864037_%E5%9B%BE%E7%89%872.png

 

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418870446_%E5%9B%BE%E7%89%873.png

 

功能实现:

1. 创建一个“新增签到人”功能,用于录入签到人信息。设置姓名、手机号等为必填。

 http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418876482_%E5%9B%BE%E7%89%874.png

 


功能效果:

 http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418885435_%E5%9B%BE%E7%89%875.png


2. 创建一个“录入签到信息”的功能,把要参加的人,添加进签到登进表里。

   http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418892256_%E5%9B%BE%E7%89%876.png

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418909575_%E5%9B%BE%E7%89%877.png

功能效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418927772_%E5%9B%BE%E7%89%878.png

录入后签到表效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418959271_%E5%9B%BE%E7%89%879.png


3. 创建一个“签到登记”功能,用于签到页面判断签到情况,以及签到状态、时间信息更新。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621418979832_%E5%9B%BE%E7%89%8710.png

返回“不存在”步骤代码示例,其他返回步骤类似只是返回状态不一样:

代码如下:         复制代码

sync function runProcess($model = model,$plugin = plugin,$params){  
  await $model.result("不存在");
  await $model.command("tips",{});
}

更新签到步骤:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419865916_%E5%9B%BE%E7%89%8711.png

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419875386_%E5%9B%BE%E7%89%8712.png

 

4. 在自定义页面,添加一个签到页面,类型为“公开”,用于签到人签到。由于扫码签到,本次只需设置移动端的签到页面。页面简单设置。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419895106_%E5%9B%BE%E7%89%8713.png

在右边的组件库里,添加三个组件,组件的样式可自己手动调整:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419903702_%E5%9B%BE%E7%89%8714.png

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419914392_%E5%9B%BE%E7%89%8715.png

 把文本框组件与添加的页面属性”phone”进行绑定:

   http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419940978_%E5%9B%BE%E7%89%8716.png

按钮组件触发,代码示例:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621419955957_%E5%9B%BE%E7%89%8717.png

代码如下:         复制代码

function runViewAction(key, value, $ctx = ctx) {  
    let phone = $ctx.$$bpProp["phone"];//获取输入框的手机号码  
       if(phone==""){  
        alert("手机号不能为空哦!");  
        return  
        }  
        //调用签到登记功能,进行签到判断  
           $ctx.cmd({  
            type: "program",  
             value: {  
                flow: "608b70f219c20e20c8dc7cf7",//签到登记功能id  
                skip: true,  
                data: {  
                    "608b71df17f01720c7526b04": {//手机号码步骤的id  
                        "field_1619751404407": phone,//手机号码步骤里,手机号码属性  
                    }  
                }  
            }  
           },{  
            //调用功能后,返回的值进行判断  
             callback:function(res){  
                  let data = res.data;  
                if(data=="签到成功"){  
                    alert("签到成功!" );  
                }if(data=="已签到"){  
                     alert("你已完成过签到!");  
                 }if(data=="不存在"){  
                    alert("本次签到活动没有你哦~");  
                }  
            }  
           });  
   }


5. 添加一个“签到二维码”页面,用于签到人扫码跳转到签到页面。此次的页面类型选为“内部”。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420099410_%E5%9B%BE%E7%89%8718.png

添加一个文本组件,一个二维码组件:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420125290_%E5%9B%BE%E7%89%8719.png

设置二维码的值,让其地址指定到签到页面:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420146046_%E5%9B%BE%E7%89%8720.png

二维码代码示例:

代码如下:         复制代码

<template>  
     <div :style="style" class="bm-view-other-qr-code">
    <qrcode :value="url" :options="options" v-if="url"></qrcode>
     </div>
   </template>
   <script>
   module.exports = {
     setup() {
       return {
         style: {
           //样式 通过 $$bvStyle调用
        position: "absolute",
        width: "80px",
        height: "80px",
           "font-size": 0,
         },
         action: {
           //事件 通过 $$bvAction调用
         },
         adapter: {
           //数据适配器 通过 $$bvData调用
           value: {
          tpl: "string",
          name: "二维码数值",
          default: "二维码",
           },
         },
       };
     },
     computed: {
       //样式
       style() {
      return this.$$bvStyle || {};
       },
       //二维码配置
       options() {
      let style = this.style;
      let width = parseFloat(style["width"]) || 0;
      let height = parseFloat(style["height"]) || 0;
         let map = { width: width, height: height, margin: 2 };
         return map;
       },
       //二维码数值
       url() {
     let projectid="5ffbc04baa277dxxxxxxe7c1";//系统项目id
     let display="608b7691dec57120cee61880";//签到页面id
      let url="https://v1.bnocode.com/app/"+projectid+"/"+display
         return url; 
       },
     },
   };
   </script>
   <style lang="less">
   .bm-view-other-qr-code {
     canvas {
       width: 100% !important;
       height: 100% !important;
     }
   }
   </style>

 

项目id获取:工作台右上角,进入用户端,在用户端地址获取:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420199248_%E5%9B%BE%E7%89%8721.png

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420241223_%E5%9B%BE%E7%89%8722.png


页面id获取:在自定义页,对应的页面“id”复制。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420251332_%E5%9B%BE%E7%89%8723.png

 

6. 创建一个“打开签到二维码功能”,用于打开签到二维码:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420270752_%E5%9B%BE%E7%89%8724.png

 

打开二维码步骤代码示例:

代码如下:         复制代码

async function runProcess($model = model, $plugin = plugin, $params) {  
    let projectid = "5ffbc04baa277dxxxxxxe7c1"//系统项目id
     let display = "608b7c72dec57120cee6189d";//签到二维码页面id
    await $model.command("redirect", {
           blank: true,
        url: "https://v1.bnocode.com/app/" + projectid + "/" + display
       })
   }

 

功能效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420310391_%E5%9B%BE%E7%89%8725.png 

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420377770_%E5%9B%BE%E7%89%8726.png


7. 设置公共用户权限:以上步骤完成后,到系统设置--权限管理,找到“公共用户”的角色,设置其对应功能---“签到登记”,勾选并确认授权。可按功能进行找功能。

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420395140_%E5%9B%BE%E7%89%8727.png 

 

至此完成功能的全部步骤。

 

功能效果示例:

签到前:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420440700_%E5%9B%BE%E7%89%8728.png

手机效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420494728_%E5%9B%BE%E7%89%8729.pnghttp://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420506968_%E5%9B%BE%E7%89%8730.png

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420522391_%E5%9B%BE%E7%89%8731.png


签到后效果:

http://pan.bnocode.com/project/5ebb991f975bfe569224be3e/attachment/20210519/1621420530871_%E5%9B%BE%E7%89%8732.png


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
微信扫码添加白码小助理