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

components/qrcode-modal/qrcode-modal.js

@@ -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')
+    }
+  }
+})

components/qrcode-modal/qrcode-modal.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/qrcode-modal/qrcode-modal.wxml

@@ -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>

components/qrcode-modal/qrcode-modal.wxss

@@ -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;
+}

pages/index/index.js

@@ -6,7 +6,9 @@ Page({
   data: {
     isLoggedIn: false,
     loginFailed: false,
-    latestRecord: null
+    latestRecord: null,
+    qrcodeVisible: false,
+    qrcodeId: ''
   },
 
   onLoad() {
@@ -77,5 +79,14 @@ Page({
     wx.navigateTo({
       url: '/pages/records/records'
     })
+  },
+
+  showQrcode(e) {
+    const id = e.currentTarget.dataset.id
+    this.setData({ qrcodeVisible: true, qrcodeId: id })
+  },
+
+  hideQrcode() {
+    this.setData({ qrcodeVisible: false, qrcodeId: '' })
   }
 })

pages/index/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "qrcode-modal": "/components/qrcode-modal/qrcode-modal"
+  },
   "navigationBarTitleText": "访客预约系统"
 }

pages/index/index.wxml

@@ -45,8 +45,14 @@
     <!-- 最新预约摘要 -->
     <view class="latest-card" wx:if="{{latestRecord}}">
       <view class="latest-header">
-        <text class="latest-title">最新预约</text>
-        <view class="status-tag status-{{latestRecord.status}}">{{latestRecord.statusText}}</view>
+        <view style="display: flex; align-items: center;">
+          <text style="margin-right: 10px;" class="latest-title"> 最新预约</text>
+          <view wx:if="{{latestRecord.status === 'approved'}}" class="qrcode-btn" catchtap="showQrcode" data-id="{{latestRecord._id}}">出示凭证</view>
+        </view>
+        <view class="latest-header-right">
+
+          <view class="status-tag status-{{latestRecord.status}}">{{latestRecord.statusText}}</view>
+        </view>
       </view>
       <view class="latest-body">
         <view class="latest-row">
@@ -75,4 +81,7 @@
   <view class="footer">
     <text class="footer-text">协能工厂 · 访客管理</text>
   </view>
-</view>
+
+  <!-- 二维码弹窗 -->
+  <qrcode-modal visible="{{qrcodeVisible}}" qrcode-id="{{qrcodeId}}" bind:close="hideQrcode" />
+</view>

pages/index/index.wxss

@@ -177,6 +177,25 @@ page {
   border-bottom: 1rpx solid #f0f0f0;
 }
 
+.latest-header-right {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.qrcode-btn {
+  font-size: 22rpx;
+  color: #52c41a;
+  background: rgba(82, 196, 26, 0.1);
+  padding: 6rpx 20rpx;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(82, 196, 26, 0.3);
+}
+
+.qrcode-btn:active {
+  background: rgba(82, 196, 26, 0.2);
+}
+
 .latest-title {
   font-size: 28rpx;
   font-weight: 600;
@@ -188,6 +207,7 @@ page {
   padding: 4rpx 16rpx;
   border-radius: 16rpx;
   font-weight: 500;
+  margin-left: auto;
 }
 
 .status-pending {
@@ -251,3 +271,5 @@ page {
   font-size: 24rpx;
   color: #ccc;
 }
+
+

pages/records/records.js

@@ -7,7 +7,9 @@ Page({
     records: [],
     filteredRecords: [],
     currentTab: 'all',
-    loading: true
+    loading: true,
+    qrcodeVisible: false,
+    qrcodeId: ''
   },
 
   onLoad() {
@@ -81,5 +83,14 @@ Page({
     wx.navigateTo({
       url: '/pages/appointment/appointment'
     })
+  },
+
+  showQrcode(e) {
+    const id = e.currentTarget.dataset.id
+    this.setData({ qrcodeVisible: true, qrcodeId: id })
+  },
+
+  hideQrcode() {
+    this.setData({ qrcodeVisible: false, qrcodeId: '' })
   }
 })

pages/records/records.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "qrcode-modal": "/components/qrcode-modal/qrcode-modal"
+  },
   "navigationBarTitleText": "预约记录"
 }

pages/records/records.wxml

@@ -23,7 +23,9 @@
   <view class="record-list" wx:if="{{!loading && filteredRecords.length > 0}}">
     <view class="record-card" wx:for="{{filteredRecords}}" wx:key="_id">
       <view class="record-header">
-        <text class="record-id">{{item._id}}</text>
+        <view wx:if="{{item.status === 'approved'}}" class="qrcode-btn" bindtap="showQrcode" data-id="{{item._id}}">
+          出示凭证
+        </view>
         <view class="status-tag status-{{item.status}}">
           {{item.statusText}}
         </view>
@@ -74,4 +76,7 @@
     <text class="empty-text">暂无预约记录</text>
     <view class="empty-btn" bindtap="goAppointment">去预约</view>
   </view>
+
+  <!-- 二维码弹窗 -->
+  <qrcode-modal visible="{{qrcodeVisible}}" qrcode-id="{{qrcodeId}}" bind:close="hideQrcode" />
 </view>

pages/records/records.wxss

@@ -72,11 +72,25 @@ page {
   color: #999;
 }
 
+.qrcode-btn {
+  font-size: 24rpx;
+  color: #52c41a;
+  background: rgba(82, 196, 26, 0.1);
+  padding: 8rpx 24rpx;
+  border-radius: 24rpx;
+  border: 1rpx solid rgba(82, 196, 26, 0.3);
+}
+
+.qrcode-btn:active {
+  background: rgba(82, 196, 26, 0.2);
+}
+
 .status-tag {
   font-size: 24rpx;
   padding: 6rpx 20rpx;
   border-radius: 20rpx;
   font-weight: 500;
+  margin-left: auto;
 }
 
 .status-pending {
@@ -172,3 +186,5 @@ page {
 .empty-btn:active {
   background: #096dd9;
 }
+
+

utils/config.js

@@ -6,7 +6,7 @@ const ENV_CONFIG = {
   // release: 'https://xcx.yun.588580.xyz',
   trial: 'https://qywx.yun.588580.xyz',
   // 开发版 & 体验版
-  develop: 'https://qywx.yun.588580.xyz'
+  develop: 'http://172.16.60.235:8080'
 }
 
 // 自动判断当前运行环境