131 lines
3.3 KiB
Vue
131 lines
3.3 KiB
Vue
<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>
|