篮球扫码入场

pages/basketballGym/index.js

@@ -1,9 +1,19 @@
 // pages/basketballGym/index.js
+// import QRCode from './qrcode';
+import drawQrcode from './weapp.qrcode.js';
 const app = getApp();
 import {
   getCurrentPageUrl
 } from './../../utils/util.js'
 let id = ''
+// let qrcode = new QRCode('canvas', {
+//   text: "123456",
+//   width: 120,
+//   height: 120,
+//   colorDark: '#000000',
+//   colorLight: '#ffffff',
+//   correctLevel: QRCode.correctLevel.H
+// });
 Page({
 
   /**
@@ -32,19 +42,7 @@ Page({
       id = options.scene;
     }
 
-    wx.showLoading({
-      title: '加载中...',
-      mask: true,
-    })
-    app.$api.venueDetail({
-      venueId: id
-    }).then(res => {
-      this.setData({
-        venues: res.venues
-      })
-    }, err => {
-
-    });
+    this.initPage()
   },
 
   /**
@@ -105,6 +103,23 @@ Page({
     }
   },
 
+  initPage() {
+    wx.showLoading({
+      title: '加载中...',
+      mask: true,
+    })
+    app.$api.venueDetail({
+      venueId: id
+    }).then(res => {
+      console.log(res);
+      this.setData({
+        venues: res.venues
+      })
+    }, err => {
+
+    });
+  },
+
   // 打开导航,
   opnGPS() {
     wx.openLocation({
@@ -158,7 +173,41 @@ Page({
       venueId: id
     }).then(res => {
       this.setData({
-        flg: res.flg
+        flg: res.join.flg
+      })
+      drawQrcode({
+        width: 180,
+        height: 180,
+        x: 10,
+        y: 10,
+        canvasId: 'myQrcode',
+        // ctx: wx.createCanvasContext('myQrcode'),
+        typeNumber: 10,
+        text: res.join.barcode
+      })
+    }, err => {
+      console.log(err);
+    })
+
+  },
+
+  // 我要出场
+  out() {
+    app.$api.venueOut({
+      venueId: id
+    }).then(res => {
+      this.setData({
+        flg: res.out.flg
+      })
+      drawQrcode({
+        width: 180,
+        height: 180,
+        x: 10,
+        y: 10,
+        canvasId: 'myQrcode',
+        // ctx: wx.createCanvasContext('myQrcode'),
+        typeNumber: 10,
+        text: res.out.barcode
       })
     }, err => {
       console.log(err);
@@ -176,6 +225,7 @@ Page({
     this.setData({
       flg: 100
     })
+    this.initPage()
   },
 
   // 关闭购买vip弹框

pages/basketballGym/index.wxml

@@ -70,7 +70,8 @@
     </view>
   </view>
 
-  <view class='footer-btn' bindtap='enter'>我要进场</view>
+  <view class='footer-btn' wx:if="{{venues.enterFlag=='0'}}" bindtap='out'>我要出场</view>
+  <view class='footer-btn' wx:else bindtap='enter'>我要进场</view>
 </view>
 
 <view class='in-step-popup' catchtouchmove='unMove' wx:if="{{flg == 0}}">
@@ -78,28 +79,22 @@
     <view class='top'>
       <view class='title'>
         <image src='../../images/24@3x.png'></image>
-        <text>进场步骤</text>
+        <text>请出示二维码</text>
       </view>
       <image src='../../images/23@3x.png' bindtap='closeInStep'></image>
     </view>
     <view class='center'>
       <view class='item'>
-        <view class='step'>第一步</view>
-        <view class='message'>进入您所在的智能门禁人脸识别区域</view>
+        <view class='step'>扫码开门</view>
+        <view class='barcode'>
+          <canvas class="barcode-canvas" style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
+<!--          <canvas type="2d" class='title' canvas-id="myQrcode" style="width: 400rpx; height: 400rpx"></canvas>-->
+        </view>
       </view>
       <image src='../../images/22@3x.png'></image>
       <view class='item'>
-        <view class='step'>第二步</view>
-        <view class='message'>贴近门禁摄像头进行人脸识别</view>
+        <view class='message'>如有问题，请联系管理员</view>
       </view>
-      <image src='../../images/22@3x.png'></image>
-      <view class='item'>
-        <view class='step'>第三步</view>
-        <view class='message'>识别成功，门锁打开，请在5秒钟内进门</view>
-      </view>
-    </view>
-    <view class='bottom'>
-      说明: 余额充足情况下，可直接进行人脸识别进场，无需再次使用手机。
     </view>
   </view>
 </view>
@@ -124,6 +119,23 @@
   </view>
 </view>
 
+<view class='in-step-popup' catchtouchmove='unMove' wx:if="{{flg == 999}}">
+  <view class='small-body body'>
+    <view class='top'>
+      <view class='title'>
+        <image src='../../images/24@3x.png'></image>
+        <text>门禁异常</text>
+      </view>
+      <image src='../../images/23@3x.png' bindtap='closeInStep'></image>
+    </view>
+    <view class='center'>
+      <view class='item'>
+        <view class='step'>门禁已掉线，请联系管理员</view>
+      </view>
+    </view>
+  </view>
+</view>
+
 <view class='unclick-mask' wx:if="{{showUnclickMask}}"></view>
 
 <view class='card-mask' catchtouchmove='unMove' wx:if="{{showCardMask}}" bindtap='cancelCardMask'>
@@ -138,11 +150,11 @@
 
 <confirm-dialog title="提示" message="余额不足，请先充值余额" confirmBtnTitle="充值" bindcancelselect="cancelDeleteDialog" bindconfirmselect="confirmDeleteDialog" wx:if="{{flg == 2}}"></confirm-dialog>
 
-<confirm-dialog title="提示" message="请先上传照片，以供人脸识别入场" bindcancelselect="cancelDeleteDialog" bindconfirmselect="confirmDeleteDialog" wx:if="{{flg == 1}}"></confirm-dialog>
+<!--<confirm-dialog title="提示" message="请先上传照片，以供人脸识别入场" bindcancelselect="cancelDeleteDialog" bindconfirmselect="confirmDeleteDialog" wx:if="{{flg == 1}}"></confirm-dialog>-->
 
 <confirm-dialog title="提示" message="请先绑定微信" confirmBtnTitle="绑定" isUserInfo="{{true}}" bindcancelselect="cancelWXDialog" bindgetuserinfo="getUserInfo" wx:if="{{isWxLogin}}"></confirm-dialog>
 
 <view class='share-btn-box'>
   <button open-type='share'></button>
   <image src='../../images/10@3x.png' style='width:100%; height: 100%'></image>
-</view>
+</view>

pages/basketballGym/index.wxss

@@ -166,6 +166,13 @@
   border-radius: 10rpx;
 }
 
+.in-step-popup .small-body {
+  width: 600rpx;
+  height: 222rpx;
+  background: #252330;
+  border-radius: 10rpx;
+}
+
 .in-step-popup .body .top {
   display: flex;
   justify-content: space-between;
@@ -223,6 +230,19 @@
   text-align: center;
 }
 
+.in-step-popup .body .center .item .barcode {
+  width: 450rpx;
+  background: #fff;
+  position: relative;
+}
+
+.barcode-canvas {
+  width: 366rpx;
+  margin: 0 auto;
+  padding-top: 40rpx;
+  border-top: 2rpx solid #F4F5F7;
+}
+
 .in-step-popup .body .bottom {
   margin: 40rpx 20rpx 0 20rpx;
   font-size: 26rpx;
@@ -389,4 +409,4 @@
 }
 .share-btn-box>button::after {
   border: none;
-}
+}