二维码生成

pages/device/transfer.vue

@@ -1,11 +1,15 @@
 <template>
-    <Cn-page :loading='loading'>
-        <view slot='body'>
-            <view class='transfer'>
-                <image class="transfer-img" src="/static/transfer.png" mode="scaleToFill" />
+    <Cn-page :loading="loading">
+        <view slot="body">
+            <view class="transfer">
+                <!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
+                <uqrcode ref="uqrcode" canvas-id="qrcode" :value="devId" :options="{ margin: 10 }"></uqrcode>
+                <canvas id="qrcode" width="200" height="200"></canvas>
                 <view class="transfer-text">请让接收人员扫码接收</view>
                 <view class="transfer-btn">
-                    <button class="transfer-btn-item" style="background-color:#fff;color:#111" @click="back">返回</button>
+                    <button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
+                        返回
+                    </button>
                     <button class="transfer-btn-item ml20" @click="home">转移成功</button>
                 </view>
             </view>
@@ -13,27 +17,34 @@
     </Cn-page>
 </template>
 <script>
+// import QRCode from 'qrcodejs2'
+// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
+
 export default {
-    data () {
+    data() {
         return {
-            loading: false
+            loading: false,
+            devId: '',
         }
     },
     methods: {
-        back () {
+        back() {
             uni.navigateBack({
-                delta: 1
+                delta: 1,
             })
         },
-        home () {
+        home() {
             uni.switchTab({
-                url: '/pages/index/index'
+                url: '/pages/index/index',
             })
-        }
-    }
+        },
+    },
+    onLoad(options) {
+        this.devId = options.id
+    },
 }
 </script>
-<style lang='scss'>
+<style lang="scss">
 .transfer {
     padding: 200rpx 34rpx 0;
     display: flex;
@@ -41,9 +52,6 @@ export default {
     align-items: center;
 
     .transfer-img {
-        width: 500rpx;
-        height: 500rpx;
-        background: $uni-theme-blue ;
     }
 
     .transfer-text {
@@ -72,4 +80,4 @@ export default {
         }
     }
 }
-</style>
+</style>