新建盐城德森项目

skyouc

2024-12-21 c9c263dc43ad90f95f24a036cee9e6b47afb596c

 pages/print/qr.vue

@@ -1,105 +1,105 @@
<template>	
   <view class='pages'>			
      <view class='father_view'> 
         <view class='son_view'> 
           <view class="title-bg">需要转换的文本：</view>
           <textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请在这里输入" /> 
         </view>
      </view>
		
      <!-- 二维码 -->
      <view class="qr-box">
         <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/>
      </view>		
			
      <button @click='btn'>生成二维码</button>				
   </view>		
</template>

<script>
   import uQRCode from '@/static/js/uqrcode.js' //引入uqrcode.js
   export default {
      data() {
         return {
            qrShow: false,				
            text1:''
         }
      },
				
      methods: {	
         //*获取文本框内容*//
         inputText:function (e) {
            this.text1 = e.detail.value	
         },
		
         //*按钮*//
         btn: function () {										
            if (this.text1 == '' ) {
               uni.showToast({  //显示对话框
                  title: "请输入文本",
                  icon: 'none',
                  duration: 1000,
               })
            } else {
               this.qrFun(this.text1) //调用二维码方法
            }
         },
			
         //**生成二维码**//
         qrFun: function(text) {
            this.qrShow = true
            uQRCode.make({
               canvasId: 'qrcode',
               componentInstance: this,
               text: text,
               size: 150,
               margin: 0,
               backgroundColor: '#ffffff',
               foregroundColor: '#000000',
               fileType: 'jpg',
               errorCorrectLevel: uQRCode.errorCorrectLevel.H,
               success: res => {}
            })
         }
      }
   }
</script>

<style>	
   .pages {
      width: 98%;
      margin: auto;
      overflow: hidden;
   }	
	
   /* 多行文本 */
   textarea {
      width: 98%;
      height: 250rpx;
      margin-left: 10rpx;
      margin-right: 10rpx;
      margin-top: 10rpx;
   }
	
   .textarea-bg {
      width: 94%;
      border-style: solid;
      border-color: #ff007f;
      font-size: 32rpx;
   }
	
   button {
      width: 80%;
      margin-top: 180rpx;
      background-color: #ffaa00;
   }
	
   .qr-box {
      width: 400rpx;
      height: 460rpx;
      margin: 0 auto;
      margin-top: 20rpx;
   }
</style>


<template>	
   <view class='pages'>			
      <view class='father_view'> 
         <view class='son_view'> 
           <view class="title-bg">需要转换的文本：</view>

           <textarea class="textarea-bg" v-model="text1" @blur="inputText"  placeholder="请在这里输入" /> 
         </view>

      </view>

		
      <!-- 二维码 -->

      <view class="qr-box">

         <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;margin: 0 auto;"/>

      </view>		
			
      <button @click='btn'>生成二维码</button>				
   </view>		
</template>



<script>

   import uQRCode from '@/static/js/uqrcode.js' //引入uqrcode.js

   export default {

      data() {

         return {

            qrShow: false,				
            text1:''

         }

      },

				
      methods: {	
         //*获取文本框内容*//

         inputText:function (e) {

            this.text1 = e.detail.value	
         },

		
         //*按钮*//

         btn: function () {										
            if (this.text1 == '' ) {

               uni.showToast({  //显示对话框

                  title: "请输入文本",

                  icon: 'none',

                  duration: 1000,

               })

            } else {

               this.qrFun(this.text1) //调用二维码方法

            }

         },

			
         //**生成二维码**//

         qrFun: function(text) {

            this.qrShow = true

            uQRCode.make({

               canvasId: 'qrcode',

               componentInstance: this,

               text: text,

               size: 150,

               margin: 0,

               backgroundColor: '#ffffff',

               foregroundColor: '#000000',

               fileType: 'jpg',

               errorCorrectLevel: uQRCode.errorCorrectLevel.H,

               success: res => {}

            })

         }

      }

   }

</script>



<style>	
   .pages {

      width: 98%;

      margin: auto;

      overflow: hidden;

   }	
	
   /* 多行文本 */

   textarea {

      width: 98%;

      height: 250rpx;

      margin-left: 10rpx;

      margin-right: 10rpx;

      margin-top: 10rpx;

   }

	
   .textarea-bg {

      width: 94%;

      border-style: solid;

      border-color: #ff007f;

      font-size: 32rpx;

   }

	
   button {

      width: 80%;

      margin-top: 180rpx;

      background-color: #ffaa00;

   }

	
   .qr-box {

      width: 400rpx;

      height: 460rpx;

      margin: 0 auto;

      margin-top: 20rpx;

   }

</style>