二维码组件的兼容性优化和使用

components/qrcode-modal/qrcode-modal.vue

@@ -21,7 +21,7 @@
         
         <view class="qrcode-info">
           <text class="info-text">{{ description }}</text>
-          <text class="subscribe-id">预约ID: {{ subscribeId }}</text>
+          <text class="subscribe-id">票号: {{ ticketNumber }}</text>
         </view>
       </view>
       
@@ -43,9 +43,20 @@ export default {
       type: Boolean,
       default: false
     },
+    // 二维码内容值
+    value: {
+      type: String,
+      default: ''
+    },
+    // 预约ID（兼容旧版本）
     subscribeId: {
       type: String,
-      required: true
+      default: ''
+    },
+    // 票号
+    ticketNumber: {
+      type: String,
+      default: ''
     },
     title: {
       type: String,
@@ -53,7 +64,7 @@ export default {
     },
     description: {
       type: String,
-      default: '请出示此二维码给工作人员进行核销'
+      default: '此二维码可直接检票'
     }
   },
   data() {
@@ -64,18 +75,28 @@ export default {
   },
   watch: {
     visible(newVal) {
-      if (newVal && this.subscribeId) {
+      if (newVal) {
         this.generateQRCode()
       }
     }
   },
   methods: {
     async generateQRCode() {
-      if (!this.subscribeId) return
+      // 优先使用value，如果没有则使用subscribeId
+      const qrValue = this.value || this.subscribeId
+      
+      if (!qrValue) {
+        console.error('没有提供二维码内容')
+        uni.showToast({
+          title: '缺少二维码内容',
+          icon: 'none'
+        })
+        return
+      }
       
       this.loading = true
       try {
-        this.qrCodeDataUrl = await generateVerificationQRCode(this.subscribeId, {
+        this.qrCodeDataUrl = await generateVerificationQRCode(qrValue, {
           width: 300,
           margin: 4,
           color: {
@@ -167,9 +188,7 @@ export default {
         reject(new Error('平台不支持'))
         // #endif
       })
-    },
+    }
-    
-    // Canvas加载完成事件已移除
   }
 }
 </script>

pages/personalCenter/myAppointment.vue

@@ -123,7 +123,9 @@
     <!-- 二维码弹窗 -->
     <qrcode-modal
       :visible="showQRCodeModal"
-      :subscribe-id="currentSubscribeId"
+      :value="currentSubscribeId"
+      :ticket-number="currentTicketNumber"
+      :title="'核销验证码'"
       @close="closeQRCodeModal"
     />
   </view>
@@ -161,6 +163,7 @@ export default {
       // 二维码弹窗相关
       showQRCodeModal: false,
       currentSubscribeId: '',
+      currentTicketNumber: '',
     };
   },
   onLoad() {
@@ -285,7 +288,10 @@ export default {
 
     // 显示核销验证码二维码
     showQRCode(item) {
-      this.currentSubscribeId = item.subscribeId || item.id;
+      // 生成核销码值，格式：VERIFY:预约ID
+      const qrValue = `VERIFY:${item.subscribeId || item.id}`;
+      this.currentSubscribeId = qrValue;
+      this.currentTicketNumber = item.subscribeId || item.id;
       this.showQRCodeModal = true;
     },
     
@@ -293,6 +299,7 @@ export default {
     closeQRCodeModal() {
       this.showQRCodeModal = false;
       this.currentSubscribeId = '';
+      this.currentTicketNumber = '';
     },
 
     // 取消预约

utils/qrcode.js

@@ -33,13 +33,13 @@ export function generateQRCode(text, options = {}) {
 
 /**
  * 生成核销验证码二维码
- * @param {string} subscribeId - 预约ID
+ * @param {string} value - 核销码值或预约ID
  * @param {Object} options - 二维码配置选项
  * @returns {Promise<string>} 返回base64格式的二维码图片
  */
-export function generateVerificationQRCode(subscribeId, options = {}) {
+export function generateVerificationQRCode(value, options = {}) {
-  // 构建核销验证码的文本内容
+  // 如果值已经包含VERIFY:前缀，直接使用；否则添加前缀
-  const verificationText = `VERIFY:${subscribeId}`
+  const verificationText = value.startsWith('VERIFY:') ? value : `VERIFY:${value}`
   
   return generateQRCode(verificationText, options)
 }