项目初始化

gaoluyang

4 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_geek/pages/code/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,130 @@
<template xlang="wxml">
   <view class="container">
      <view class="qrimg">
         <view class="qrimg-i">
            <geek-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
               :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
               :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
         </view>
         <view class="qrimg-i">
            <geek-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval"
               :loadMake="loadMake" :usingComponents="true" @result="qrR" />
         </view>
      </view>
      <view class="uni-padding-wrap">
         <view class="uni-title">请输入要生成的二维码内容</view>
      </view>
      <view class="uni-list">
         <input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
      </view>
      <view class="uni-padding-wrap uni-common-mt">
         <view class="uni-title">设置二维码大小</view>
      </view>
      <view class="body-view">
         <slider :value="size" @change="sliderchange" min="50" max="500" show-value />
      </view>
      <view class="uni-padding-wrap">
         <view class="btns">
            <button type="primary" @tap="selectIcon">选择二维码图标</button>
            <button type="primary" @tap="creatQrcode">生成二维码</button>
            <button type="primary" @tap="saveQrcode">保存到图库</button>
            <button type="warn" @tap="clearQrcode">清除二维码</button>
            <button type="warn" @tap="ifQrcode">显示隐藏二维码</button>
         </view>
      </view>
   </view>
</template>
<script>
export default {
   data() {
      return {
         ifShow: true,
         val: '二维码', // è¦ç”Ÿæˆçš„二维码值
         size: 200, // äºŒç»´ç å¤§å°
         unit: 'upx', // å•ä½
         background: '#b4e9e2', // èƒŒæ™¯è‰²
         foreground: '#309286', // å‰æ™¯è‰²
         pdground: '#32dbc6', // è§’标色
         icon: '', // äºŒç»´ç å›¾æ ‡
         iconsize: 40, // äºŒç»´ç å›¾æ ‡å¤§å°
         lv: 3, // äºŒç»´ç å®¹é”™çº§åˆ« ï¼Œ ä¸€èˆ¬ä¸ç”¨è®¾ç½®ï¼Œé»˜è®¤å°±è¡Œ
         onval: false, // val值变化时自动重新生成二维码
         loadMake: true, // ç»„件加载完成后自动生成二维码
         src: '' // äºŒç»´ç ç”ŸæˆåŽçš„图片地址或base64
      }
   },
   methods: {
      sliderchange(e) {
         this.size = e.detail.value
      },
      creatQrcode() {
         this.$refs.qrcode._makeCode()
      },
      saveQrcode() {
         this.$refs.qrcode._saveCode()
      },
      qrR(res) {
         this.src = res
      },
      clearQrcode() {
         this.$refs.qrcode._clearCode()
         this.val = ''
      },
      ifQrcode() {
         this.ifShow = !this.ifShow
      },
      selectIcon() {
         let that = this
         uni.chooseImage({
            count: 1, //默认9
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: function (res) {
               that.icon = res.tempFilePaths[0]
               setTimeout(() => {
                  that.creatQrcode()
               }, 100);
               // console.log(res.tempFilePaths);
            }
         });
      }
   }
}
</script>

<style>
/* @import "../../../common/icon.css"; */
.container {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.qrimg {
   display: flex;
   justify-content: center;
}

.qrimg-i {
   margin-right: 10px;
}

slider {
   width: 100%;
}

input {
   width: 100%;
   margin-bottom: 20upx;
}

.btns {
   display: flex;
   flex-direction: column;
   width: 100%;
}

button {
   width: 100%;
   margin-top: 10upx;
}</style>