掃碼籤到怎麼做到的（使用公開頁實現掃碼籤到功能）

2023-05-30 08:12:58 4

功能描述：

使用白碼低代碼開發平臺的公開頁，實現系統裡的客戶或學生掃描二維碼跳轉到籤到頁面，輸入手機號碼進行籤到。

前期準備：

1. 在工作檯，系統設置--用戶管理中，啟用公共用戶。

2. 數據表創建：創建一張籤到人表、籤到登記表。

功能實現：

1. 創建一個「新增籤到人」功能，用於錄入籤到人信息。設置姓名、手機號等為必填。

功能效果：

2. 創建一個「錄入籤到信息」的功能，把要參加的人，添加進籤到登進表裡。

功能效果：

錄入後籤到表效果：

3. 創建一個「籤到登記」功能，用於籤到頁面判斷籤到情況，以及籤到狀態、時間信息更新。

返回「不存在」步驟代碼示例，其他返回步驟類似只是返回狀態不一樣：

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

更新籤到步驟：

4. 在自定義頁面，添加一個籤到頁面，類型為「公開」，用於籤到人籤到。由於掃碼籤到，本次只需設置移動端的籤到頁面。頁面簡單設置。

在右邊的組件庫裡，添加三個組件，組件的樣式可自己手動調整：

把文本框組件與添加的頁面屬性」phone」進行綁定：

按鈕組件觸發，代碼示例：

functionrunViewAction(key,value,$ctx=ctx){letphone=$ctx.$$bpProp["phone"];//獲取輸入框的手機號碼if(phone==""){alert("手機號不能為空哦！");return}//調用籤到登記功能，進行籤到判斷$ctx.cmd({type:"program",value:{flow:"608b70f219c20e20c8dc7cf7",//籤到登記功能idskip:true,data:{"608b71df17f01720c7526b04":{//手機號碼步驟的id"field_1619751404407":phone,//手機號碼步驟裡，手機號碼屬性}}}},{//調用功能後，返回的值進行判斷callback:function(res){letdata=res.data;if(data=="籤到成功"){alert("籤到成功!");}if(data=="已籤到"){alert("你已完成過籤到！");}if(data=="不存在"){alert("本次籤到活動沒有你哦~");}}});}

5. 添加一個「籤到二維碼」頁面，用於籤到人掃碼跳轉到籤到頁面。此次的頁面類型選為「內部」。

添加一個文本組件，一個二維碼組件：

設置二維碼的值，讓其地址指定到籤到頁面：

二維碼代碼示例：

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{returnthis.$$bvStyle||{};},//二維碼配置options{letstyle=this.style;letwidth=parseFloat(style["width"])||0;letheight=parseFloat(style["height"])||0;letmap={width:width,height:height,margin:2};returnmap;},//二維碼數值url{letprojectid="5ffbc04baa277dxxxxxxe7c1";//系統項目idletdisplay="608b7691dec57120cee61880";//籤到頁面idleturl="https://v1.bnocode.com/app/" projectid "/" displayreturnurl;},},};.bm-view-other-qr-code{canvas{width:100%!important;height:100%!important;}}

項目id獲取：工作檯右上角，進入用戶端，在用戶端地址獲取：

頁面id獲取：在自定義頁，對應的頁面「id」複製。

6. 創建一個「打開籤到二維碼功能」，用於打開籤到二維碼：

打開二維碼步驟代碼示例：

asyncfunctionrunProcess($model=model,$plugin=plugin,$params){letprojectid="5ffbc04baa277dxxxxxxe7c1"//系統項目idletdisplay="608b7c72dec57120cee6189d";//籤到二維碼頁面idawait$model.command("redirect",{blank:true,url:"https://v1.bnocode.com/app/" projectid "/" display})}

功能效果：