1

pages/history/detail.js

@@ -16,7 +16,15 @@ Page({
     tenant: '',
     meal: {},
     info: {},
+    show: false,
   },
+  showQR() {
+    this.setData({ show: true });
+  },
+  clearQR() {
+    this.setData({ show: false });
+  },
+  noop() { },
   // 返回
   back: function () {
     wx.reLaunch({
@@ -29,6 +37,9 @@ Page({
   onLoad: function (options) {
     this.searchST();
     const { id, label, date } = options
+    // let id = '60d3ed0c55bc8a3b58245b73';
+    // let label = '午餐';
+    // let date = '2021-06-25';
     this.setData({ info: { label, date } })
     this.getMeal(id);
     this.initQrCode(id);

pages/history/detail.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "nav-bar": "/commpents/navbar/index"
+    "nav-bar": "/commpents/navbar/index",
+    "van-overlay": "/miniprogram_npm/@vant/weapp/overlay/index"
   }
 }

pages/history/detail.wxml

@@ -1,7 +1,7 @@
 <nav-bar navbar-data='{{navbarData}}' bind:back="back"></nav-bar>
 <view class="main" style="padding-top:{{height}}px;height:{{windowHeight-height}}px">
-  <view class="one">
-    <text class="iconfont icon-erweima" style="display:none"></text>
+  <view class="one" bindtap="showQR">
+    <text class="iconfont icon-erweima"></text>
     <text>{{info.date}}</text>
     <text>{{info.label}}</text>
     <text>{{meal.is_use==0?'待使用':meal.is_use=='1'?'待评价':meal.is_use=='2'?'已完成':meal.is_use=='3'?'已失效':'未识别'}}</text>
@@ -15,7 +15,9 @@
       <view class="list_3">{{item.num}}份</view>
     </view>
   </view>
-  <view class="thr" wx:if="{{meal.is_use=='0'}}">
-    <canvas class="qrcode" canvas-id="myQrcode"></canvas>
-  </view>
+  <van-overlay show="{{ show }}" bind:click="clearQR">
+    <view class="wrapper">
+      <view class="block" catch:tap="noop"><canvas class="qrcode" canvas-id="myQrcode"></canvas></view>
+    </view>
+  </van-overlay>
 </view>

pages/history/detail.wxss

@@ -73,9 +73,15 @@
   font-size: 15px;
 }
 
-.main .thr {
-  float: left;
-  width: 100%;
-  text-align: center;
-  padding: 20px 30%;
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 130px;
+  height: 130px;
+  background-color: #fff;
 }