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>
|