测试页面生成二维码1.0

pages/basePage/test.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="page">
-    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
+    <view class="qrcode-container">
       <uv-qrcode
         ref="qrcode"
-        :options="options"
         :value="value"
+        :options="options"
         canvas-id="qrcode"
         size="300rpx"
       ></uv-qrcode>
@@ -19,49 +19,42 @@ export default {
   components: { UvQrcode },
   data() {
     return {
-      value: "sb",
+      value: "测试二维码内容",
       options: {
-        useDynamicSize: false,
         errorCorrectLevel: "Q",
         margin: 10,
-        areaColor: "#fff",
+        areaColor: "#fff"
-
+      }
-        // 指定二维码前景，一般可在中间放logo
-      },
     };
   },
   onLoad() {
-    // 页面加载时获取数据
-
     this.$nextTick(() => {
       this.$refs.qrcode.remake({
         success: () => {
-          console.log("生成成功");
+          console.log("二维码生成成功");
         },
         fail: (err) => {
-          console.log(err);
+          console.error("二维码生成失败:", err);
-        },
+        }
       });
     });
-  },
+  }
-  methods: {
-    // 加载页面数据
-  },
 };
 </script>
 
 <style lang="scss" scoped>
 .page {
   background: #f5f0e7;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.header {
+.qrcode-container {
-  width: 100%;
+  padding: 40rpx;
-  //min-height: 100vh;//可能导致页面留白
+  background: white;
-  display: flex;
+  border-radius: 20rpx;
-  align-items: flex-start;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
-  flex-direction: column;
-  padding: 200rpx 200rpx;
-  padding-bottom: 40rpx;
 }
 </style>