我的预约-生成二维码失败

api/personalCenter/index.js

@@ -31,18 +31,6 @@ export function cancelAppointment(subscribeId) {
   })
 }
 
-/**
- * 获取预约二维码
- * @param {string} id - 预约ID
- * @returns {Promise} 返回二维码数据
- */
-export function getAppointmentQRCode(id) {
-  return get(`/app/subscribe/qrcode/${id}`, {}, {
-    timeout: 10000,
-    showLoading: false,
-  })
-}
-
 /**
  * 核销验证码
  * @param {string} subscribeId - 预约ID

components/qrcode-modal/qrcode-modal.vue

@@ -0,0 +1,292 @@
+<template>
+  <view v-if="visible" class="qrcode-modal-overlay" @click="handleOverlayClick">
+    <view class="qrcode-modal" @click.stop>
+      <view class="modal-header">
+        <text class="modal-title">{{ title }}</text>
+        <text class="modal-close" @click="handleClose">×</text>
+      </view>
+      
+      <view class="modal-content">
+        <view class="qrcode-container">
+          <image 
+            v-if="qrCodeDataUrl"
+            class="qrcode-image"
+            :src="qrCodeDataUrl"
+            mode="aspectFit"
+          />
+          <view v-else class="qrcode-loading">
+            <text>生成二维码中...</text>
+          </view>
+        </view>
+        
+        <view class="qrcode-info">
+          <text class="info-text">{{ description }}</text>
+          <text class="subscribe-id">预约ID: {{ subscribeId }}</text>
+        </view>
+      </view>
+      
+      <view class="modal-footer">
+        <button class="btn-secondary" @click="handleClose">关闭</button>
+        <button class="btn-primary" @click="handleSave">保存到相册</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { generateVerificationQRCode } from '@/utils/qrcode.js'
+
+export default {
+  name: 'QRCodeModal',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    subscribeId: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: '核销验证码'
+    },
+    description: {
+      type: String,
+      default: '请出示此二维码给工作人员进行核销'
+    }
+  },
+  data() {
+    return {
+      qrCodeDataUrl: '',
+      loading: false
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal && this.subscribeId) {
+        this.generateQRCode()
+      }
+    }
+  },
+  methods: {
+    async generateQRCode() {
+      if (!this.subscribeId) return
+      
+      this.loading = true
+      try {
+        this.qrCodeDataUrl = await generateVerificationQRCode(this.subscribeId, {
+          width: 300,
+          margin: 4,
+          color: {
+            dark: '#48893B',
+            light: '#FFFFFF'
+          }
+        })
+      } catch (error) {
+        console.error('生成二维码失败:', error)
+        uni.showToast({
+          title: '生成二维码失败',
+          icon: 'none'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    
+    handleOverlayClick() {
+      this.handleClose()
+    },
+    
+    handleClose() {
+      this.$emit('close')
+    },
+    
+    async handleSave() {
+      if (!this.qrCodeDataUrl) {
+        uni.showToast({
+          title: '二维码未生成',
+          icon: 'none'
+        })
+        return
+      }
+      
+      try {
+        // 保存二维码到相册
+        await this.saveImageToAlbum(this.qrCodeDataUrl)
+        uni.showToast({
+          title: '保存成功',
+          icon: 'success'
+        })
+      } catch (error) {
+        console.error('保存失败:', error)
+        uni.showToast({
+          title: '保存失败',
+          icon: 'none'
+        })
+      }
+    },
+    
+    async saveImageToAlbum(base64Data) {
+      return new Promise((resolve, reject) => {
+        // 将base64转换为临时文件路径
+        const base64Data = this.qrCodeDataUrl.split(',')[1]
+        
+        // #ifdef MP-WEIXIN
+        const arrayBuffer = uni.base64ToArrayBuffer(base64Data)
+        const filePath = `${wx.env.USER_DATA_PATH}/qrcode_${Date.now()}.png`
+        
+        uni.getFileSystemManager().writeFile({
+          filePath,
+          data: arrayBuffer,
+          encoding: 'binary',
+          success: () => {
+            // 保存到相册
+            uni.saveImageToPhotosAlbum({
+              filePath,
+              success: () => {
+                resolve()
+              },
+              fail: (err) => {
+                reject(err)
+              }
+            })
+          },
+          fail: (err) => {
+            reject(err)
+          }
+        })
+        // #endif
+        
+        // #ifndef MP-WEIXIN
+        // 其他平台的处理方式
+        uni.showToast({
+          title: '当前平台不支持保存到相册',
+          icon: 'none'
+        })
+        reject(new Error('平台不支持'))
+        // #endif
+      })
+    },
+    
+    // Canvas加载完成事件已移除
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qrcode-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.qrcode-modal {
+  width: 600rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.modal-close {
+  font-size: 40rpx;
+  color: #999;
+  padding: 10rpx;
+  cursor: pointer;
+}
+
+.modal-content {
+  padding: 40rpx;
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 30rpx;
+}
+
+.qrcode-image {
+  width: 300rpx;
+  height: 300rpx;
+  border: 1rpx solid #eee;
+  border-radius: 10rpx;
+}
+
+.qrcode-loading {
+  width: 300rpx;
+  height: 300rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 10rpx;
+  color: #999;
+}
+
+.qrcode-info {
+  text-align: center;
+}
+
+.info-text {
+  display: block;
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+}
+
+.subscribe-id {
+  display: block;
+  font-size: 24rpx;
+  color: #999;
+  font-family: monospace;
+}
+
+.modal-footer {
+  display: flex;
+  padding: 30rpx;
+  border-top: 1rpx solid #eee;
+  gap: 20rpx;
+}
+
+.btn-secondary,
+.btn-primary {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-secondary {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.btn-primary {
+  background-color: #48893B;
+  color: #fff;
+}
+</style> 

package.json

@@ -29,6 +29,7 @@
     "js-md5": "^0.7.3",
     "mp-html": "^2.4.2",
     "mpvue-echarts": "^0.3.2",
+    "qrcode": "^1.5.4",
     "uview-ui": "^1.8.8",
     "weapp-cookie": "^1.4.8"
   },
@@ -38,7 +39,7 @@
     "@typescript-eslint/parser": "^8.39.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-vue": "^10.4.0",

pages/personalCenter/myAppointment.vue

@@ -119,6 +119,13 @@
         <text class="loading-text">加载中...</text>
       </view>
     </view>
+    
+    <!-- 二维码弹窗 -->
+    <qrcode-modal
+      :visible="showQRCodeModal"
+      :subscribe-id="currentSubscribeId"
+      @close="closeQRCodeModal"
+    />
   </view>
 </template>
 
@@ -127,11 +134,15 @@ import { CommonEnum } from "@/enum/common.js";
 import {
   cancelAppointment,
   getAppointmentList,
-  getAppointmentQRCode,
   verifyAppointmentCode,
 } from "@/api/personalCenter/index.js";
+import { generateVerificationQRCode } from "@/utils/qrcode.js";
+import QRCodeModal from "@/components/qrcode-modal/qrcode-modal.vue";
 
 export default {
+  components: {
+    QRCodeModal
+  },
   data() {
     return {
       CommonEnum,
@@ -147,6 +158,9 @@ export default {
         pageSize: 10,
         total: 0,
       },
+      // 二维码弹窗相关
+      showQRCodeModal: false,
+      currentSubscribeId: '',
     };
   },
   onLoad() {
@@ -269,31 +283,16 @@ export default {
       return classMap[state] || "status-default";
     },
 
-    // 核销验证码
+    // 显示核销验证码二维码
-    async showQRCode(item) {
+    showQRCode(item) {
-      try {
+      this.currentSubscribeId = item.subscribeId || item.id;
-        const response = await verifyAppointmentCode(item.subscribeId || item.id);
+      this.showQRCodeModal = true;
-
+    },
-        if (response.code === 200) {
+    
-          uni.showToast({
+    // 关闭二维码弹窗
-            title: "核销成功",
+    closeQRCodeModal() {
-            icon: "success",
+      this.showQRCodeModal = false;
-          });
+      this.currentSubscribeId = '';
-          // 刷新列表
-          this.refreshList();
-        } else {
-          uni.showToast({
-            title: response.msg || "核销失败",
-            icon: "none",
-          });
-        }
-      } catch (error) {
-        console.error("核销失败:", error);
-        uni.showToast({
-          title: "核销失败，请重试",
-          icon: "none",
-        });
-      }
     },
 
     // 取消预约

utils/qrcode.js

@@ -0,0 +1,84 @@
+import QRCode from 'qrcode'
+
+/**
+ * 生成二维码
+ * @param {string} text - 要生成二维码的文本内容
+ * @param {Object} options - 二维码配置选项
+ * @returns {Promise<string>} 返回base64格式的二维码图片
+ */
+export function generateQRCode(text, options = {}) {
+  const defaultOptions = {
+    width: 200,
+    margin: 2,
+    color: {
+      dark: '#000000',
+      light: '#FFFFFF'
+    },
+    errorCorrectionLevel: 'M'
+  }
+
+  const qrOptions = { ...defaultOptions, ...options }
+
+  return new Promise((resolve, reject) => {
+    QRCode.toDataURL(text, qrOptions, (err, url) => {
+      if (err) {
+        console.error('生成二维码失败:', err)
+        reject(err)
+      } else {
+        resolve(url)
+      }
+    })
+  })
+}
+
+/**
+ * 生成核销验证码二维码
+ * @param {string} subscribeId - 预约ID
+ * @param {Object} options - 二维码配置选项
+ * @returns {Promise<string>} 返回base64格式的二维码图片
+ */
+export function generateVerificationQRCode(subscribeId, options = {}) {
+  // 构建核销验证码的文本内容
+  const verificationText = `VERIFY:${subscribeId}`
+  
+  return generateQRCode(verificationText, options)
+}
+
+/**
+ * 生成二维码并保存到本地
+ * @param {string} text - 要生成二维码的文本内容
+ * @param {string} filePath - 保存路径
+ * @param {Object} options - 二维码配置选项
+ * @returns {Promise<string>} 返回保存的文件路径
+ */
+export function generateQRCodeToFile(text, filePath, options = {}) {
+  return new Promise((resolve, reject) => {
+    QRCode.toFile(filePath, text, options, (err) => {
+      if (err) {
+        console.error('生成二维码文件失败:', err)
+        reject(err)
+      } else {
+        resolve(filePath)
+      }
+    })
+  })
+}
+
+/**
+ * 生成二维码的Canvas元素
+ * @param {string} text - 要生成二维码的文本内容
+ * @param {Object} options - 二维码配置选项
+ * @returns {Promise<HTMLCanvasElement>} 返回Canvas元素
+ */
+export function generateQRCodeCanvas(text, options = {}) {
+  return new Promise((resolve, reject) => {
+    QRCode.toCanvas(text, options, (err, canvas) => {
+      if (err) {
+        console.error('生成二维码Canvas失败:', err)
+        reject(err)
+      } else {
+        resolve(canvas)
+      }
+    })
+  })
+}