二维码样式修改0.5

components/qrcode-modal/qrcode-modal.vue

@@ -1,196 +1,77 @@
 <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 
+          <uv-qrcode
-            v-if="qrCodeDataUrl"
+            :options="qrcodeOptions"
-            class="qrcode-image"
+            :value="ticketNumber"
-            :src="qrCodeDataUrl"
+            size="500rpx"
-            mode="aspectFit"
+          ></uv-qrcode>
-          />
-          <view v-else class="qrcode-loading">
-            <text>生成二维码中...</text>
-          </view>
         </view>
-        
+
         <view class="qrcode-info">
-          <text class="info-text">{{ description }}</text>
           <text class="subscribe-id">票号: {{ ticketNumber }}</text>
+          <text class="info-text">{{ description }}</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',
+  name: "QRCodeModal",
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 二维码内容值
     value: {
       type: String,
-      default: ''
+      default: "",
     },
     // 预约ID（兼容旧版本）
     subscribeId: {
       type: String,
-      default: ''
+      default: "",
     },
     // 票号
     ticketNumber: {
       type: String,
-      default: ''
+      default: "",
     },
     title: {
       type: String,
-      default: '核销验证码'
+      default: "核销验证码",
     },
     description: {
       type: String,
-      default: '此二维码可直接检票'
+      default: "此二维码可直接检票",
-    }
+    },
   },
   data() {
     return {
-      qrCodeDataUrl: '',
+      qrcodeOptions: {
-      loading: false
+        errorCorrectLevel: "Q",
-    }
+        margin: 10,
-  },
+        areaColor: "#fff",
-  watch: {
+      },
-    visible(newVal) {
+      loading: false,
-      if (newVal) {
+    };
-        this.generateQRCode()
-      }
-    }
   },
+
   methods: {
-    async generateQRCode() {
-      // 优先使用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(qrValue, {
-          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()
+      this.handleClose();
     },
-    
+
     handleClose() {
-      this.$emit('close')
+      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
-      })
-    }
-  }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -268,20 +149,22 @@ export default {
   text-align: center;
 }
 
+.subscribe-id {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #7f7f7f;
+  font-family: monospace;
+  padding-bottom: 10rpx;
+}
+
 .info-text {
   display: block;
   font-size: 28rpx;
-  color: #666;
+  color: #522510;
   margin-bottom: 20rpx;
 }
 
-.subscribe-id {
-  display: block;
-  font-size: 24rpx;
-  color: #999;
-  font-family: monospace;
-}
-
 .modal-footer {
   display: flex;
   padding: 30rpx;
@@ -305,7 +188,7 @@ export default {
 }
 
 .btn-primary {
-  background-color: #48893B;
+  background-color: #48893b;
   color: #fff;
 }
-</style> 
+</style>