feat: 新增预约二维码弹窗功能

2026-04-24 17:28:43 +08:00
parent 590ba65ea4
commit 2cc7d75b08
14 changed files with 236 additions and 9 deletions
@@ -0,0 +1,48 @@
+const drawQrcode = require('../../utils/weapp.qrcode.esm.js').default
+
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false
+    },
+    qrcodeId: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    loading: true
+  },
+
+  observers: {
+    'visible'(val) {
+      if (val && this.data.qrcodeId) {
+        this.setData({ loading: true })
+        this.draw()
+      }
+    }
+  },
+
+  methods: {
+    draw() {
+      wx.nextTick(() => {
+        drawQrcode({
+          width: 200,
+          height: 200,
+          canvasId: 'qrcodeCanvas',
+          _this: this,
+          text: this.data.qrcodeId,
+          callback: () => {
+            this.setData({ loading: false })
+          }
+        })
+      })
+    },
+
+    onClose() {
+      this.triggerEvent('close')
+    }
+  }
+})
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
@@ -0,0 +1,13 @@
+<view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose">
+  <view class="qrcode-container" catchtap>
+    <view class="qrcode-title">预约凭证</view>
+    <view class="qrcode-canvas-wrap">
+      <canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
+      <view class="qrcode-loading" wx:if="{{loading}}">
+        <view class="qrcode-spinner"></view>
+      </view>
+    </view>
+    <view class="qrcode-id">{{qrcodeId}}</view>
+    <view class="qrcode-tip">请向工作人员出示此二维码</view>
+  </view>
+</view>
@@ -0,0 +1,79 @@
+.qrcode-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.qrcode-container {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 48rpx 64rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qrcode-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 32rpx;
+}
+
+.qrcode-canvas-wrap {
+  position: relative;
+  width: 400rpx;
+  height: 400rpx;
+}
+
+.qrcode-canvas {
+  width: 400rpx;
+  height: 400rpx;
+}
+
+.qrcode-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+}
+
+.qrcode-spinner {
+  width: 48rpx;
+  height: 48rpx;
+  border: 4rpx solid #e0e0e0;
+  border-top: 4rpx solid #1890ff;
+  border-radius: 50%;
+  animation: qrcode-spin 0.8s linear infinite;
+}
+
+@keyframes qrcode-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.qrcode-id {
+  font-size: 24rpx;
+  color: #999;
+  margin-top: 24rpx;
+  word-break: break-all;
+  text-align: center;
+}
+
+.qrcode-tip {
+  font-size: 24rpx;
+  color: #bbb;
+  margin-top: 12rpx;
+}