412 lines
8.0 KiB
Vue
412 lines
8.0 KiB
Vue
|
<template>
|
|||
|
|
<view :class="modal?'show-qrcode':'hide-qrcode'">
|
|||
|
|
<view class="box-qrcode" :style="{'margin-left': marginLeft + 'px'}" @longtap="longtapCode">
|
|||
|
|
<!-- style="width: 550rpx;height: 550rpx;" -->
|
|||
|
|
|
|||
|
|
<canvas class="canvas-qrcode" :style="style_w_h" :canvas-id="qrcode_id">
|
|||
|
|
|
|||
|
|
<!-- #ifndef MP -->
|
|||
|
|
<view v-if="modal&&is_themeImg" :style="style_w_h" class="box-img-qrcode">
|
|||
|
|
<image :style="style_w_h_img" mode="scaleToFill" :src="themeImg"></image>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
</canvas>
|
|||
|
|
|
|||
|
|
<!-- <image mode="scaleToFill" :src="imagePath"></image> -->
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
var qr_we = require("./qrcode_wx.js");
|
|||
|
|
const qrCode = require('./weapp-qrcode.js')
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isAndroid : false ,
|
|||
|
|
show: true,
|
|||
|
|
imagePath: '',
|
|||
|
|
// qrcode_id: 'qrcode_id',
|
|||
|
|
marginLeft: 0,
|
|||
|
|
//一般的安卓app只需加30就能显示全
|
|||
|
|
//苹果app的不加就能显示全，加了就要弄margin-left
|
|||
|
|
//有些安卓app显示不全
|
|||
|
|
add_num : 30 ,
|
|||
|
|
add_num_key : 'rectify_code_key',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
modal: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
url: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
height: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 260
|
|||
|
|
},
|
|||
|
|
width: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 260
|
|||
|
|
},
|
|||
|
|
themeColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333333',
|
|||
|
|
},
|
|||
|
|
qrcode_id: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'qrcode_id',
|
|||
|
|
},
|
|||
|
|
is_themeImg: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
themeImg: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'https://cdn.pixabay.com/photo/2016/11/29/13/24/balloons-1869816__340.jpg',
|
|||
|
|
},
|
|||
|
|
h_w_img: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 30
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
style_w_h() {
|
|||
|
|
return this.set_style_w_h();
|
|||
|
|
},
|
|||
|
|
style_w_h_img() {
|
|||
|
|
let that = this;
|
|||
|
|
var height = parseInt(that.h_w_img);
|
|||
|
|
var width = parseInt(that.h_w_img);
|
|||
|
|
var style = '';
|
|||
|
|
if (height > 0) {
|
|||
|
|
style = `height:${height*2}rpx;`;
|
|||
|
|
}
|
|||
|
|
if (width > 0) {
|
|||
|
|
style += `width:${width*2}rpx;z-index: 2;`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return style;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created: function() {
|
|||
|
|
let that = this;
|
|||
|
|
try {
|
|||
|
|
//app苹果二维码不居中
|
|||
|
|
//#ifndef MP
|
|||
|
|
let isAndroid = false ;
|
|||
|
|
const res = uni.getSystemInfoSync();
|
|||
|
|
if(res.platform == 'android'){
|
|||
|
|
isAndroid = true ;
|
|||
|
|
}else{
|
|||
|
|
isAndroid = false ;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (!isAndroid) {
|
|||
|
|
that.marginLeft = 46;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
that.isAndroid = isAndroid ;
|
|||
|
|
try {
|
|||
|
|
const add_num = uni.getStorageSync(that.add_num_key);
|
|||
|
|
if (add_num) {
|
|||
|
|
that.add_num = add_num;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} catch (e) {
|
|||
|
|
// error
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
} catch (e) {
|
|||
|
|
// error
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//#ifdef MP
|
|||
|
|
//that.marginLeft = 40;
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
set_style_w_h(){
|
|||
|
|
|
|||
|
|
let that = this;
|
|||
|
|
var height = parseInt(that.height);
|
|||
|
|
var width = parseInt(that.width);
|
|||
|
|
var style = '';
|
|||
|
|
var height = height*2 ;
|
|||
|
|
var width = width*2 ;
|
|||
|
|
|
|||
|
|
//#ifndef MP
|
|||
|
|
var add = that.add_num ;
|
|||
|
|
|
|||
|
|
height += add;
|
|||
|
|
width += add;
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
if (height > 0) {
|
|||
|
|
style = `height:${height}rpx;`;
|
|||
|
|
}
|
|||
|
|
if (width > 0) {
|
|||
|
|
style += `width:${width}rpx;`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return style;
|
|||
|
|
},
|
|||
|
|
hideQrcode() {
|
|||
|
|
this.$emit("hideQrcode")
|
|||
|
|
},
|
|||
|
|
// 二维码生成工具
|
|||
|
|
crtQrCode() {
|
|||
|
|
let that = this;
|
|||
|
|
//#ifndef MP
|
|||
|
|
new qrCode(that.qrcode_id, {
|
|||
|
|
text: this.url,
|
|||
|
|
width: that.width,
|
|||
|
|
height: that.height,
|
|||
|
|
colorDark: that.themeColor,//#333333
|
|||
|
|
colorLight: "#FFFFFF",
|
|||
|
|
correctLevel: qrCode.CorrectLevel.H,
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
//#ifdef MP
|
|||
|
|
that.createQrCode(this.url, that.qrcode_id, that.width, that.height,that.themeColor,that.is_themeImg,that.themeImg,that.h_w_img);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
//that.createQrCode(this.url, that.qrcode_id, that.width, that.height);
|
|||
|
|
},
|
|||
|
|
//#ifdef MP
|
|||
|
|
|
|||
|
|
createQrCode: function(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize) {
|
|||
|
|
//调用插件中的draw方法，绘制二维码图片
|
|||
|
|
qr_we.api.draw(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize, this, this.canvasToTempImage);
|
|||
|
|
// setTimeout(() => { this.canvasToTempImage();},100);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// #endif
|
|||
|
|
//获取临时缓存照片路径，存入data中
|
|||
|
|
canvasToTempImage: function() {
|
|||
|
|
var that = this;
|
|||
|
|
},
|
|||
|
|
saveImage: function() {
|
|||
|
|
var that = this;
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
canvasId: that.qrcode_id,
|
|||
|
|
success: function(res) {
|
|||
|
|
var tempFilePath = res.tempFilePath;
|
|||
|
|
console.log(tempFilePath);
|
|||
|
|
that.imagePath = tempFilePath;
|
|||
|
|
|
|||
|
|
//保存到相册
|
|||
|
|
// uni.saveFile({
|
|||
|
|
// tempFilePath: tempFilePath,
|
|||
|
|
// success: function (res2) {
|
|||
|
|
// var savedFilePath = res2.savedFilePath;
|
|||
|
|
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath : tempFilePath ,
|
|||
|
|
success: function (res3) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '保存成功',
|
|||
|
|
confirmText: '确定',
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmColor: '#33CCCC',
|
|||
|
|
success(res4) {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: function(res) {
|
|||
|
|
console.log(res);
|
|||
|
|
}
|
|||
|
|
}, that);
|
|||
|
|
},
|
|||
|
|
//微信小程序支持：长按二维码，提示是否保存相册
|
|||
|
|
//安卓APP长按校正二维码
|
|||
|
|
longtapCode(){
|
|||
|
|
var that = this;
|
|||
|
|
|
|||
|
|
//#ifndef MP
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '校正二维码',
|
|||
|
|
content: '二维码是否异常',
|
|||
|
|
confirmText: '确定',
|
|||
|
|
confirmColor: '#33CCCC',
|
|||
|
|
success(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
that.rectify_code();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
//#ifdef MP-WEIXIN
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '是否保存到相册',
|
|||
|
|
confirmText: '确定',
|
|||
|
|
confirmColor: '#33CCCC',
|
|||
|
|
success(res) {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
that.saveImage();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
//安卓有些手机不正常，长按可选择矫正
|
|||
|
|
rectify_code(){
|
|||
|
|
var that = this;
|
|||
|
|
let add_num = that.add_num ;
|
|||
|
|
add_num += 30 ;
|
|||
|
|
that.add_num = add_num;
|
|||
|
|
that.crtQrCode();//重新生成才会立即覆盖
|
|||
|
|
try {
|
|||
|
|
//第一次长按校正设置了就不用在设置
|
|||
|
|
uni.setStorage({
|
|||
|
|
key: that.add_num_key,
|
|||
|
|
data: add_num,
|
|||
|
|
success: function() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
// error
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
// .qrcode-box {
|
|||
|
|
// position: fixed;
|
|||
|
|
// left: 0;
|
|||
|
|
// top: 0;
|
|||
|
|
// right: 0;
|
|||
|
|
// bottom: 0;
|
|||
|
|
// height: 100vh;
|
|||
|
|
// width: 100vw;
|
|||
|
|
// background-color: rgba(59, 59, 59, 0.6);
|
|||
|
|
// // opacity: 0.8;
|
|||
|
|
// text-align: center;
|
|||
|
|
// display: flex;
|
|||
|
|
// align-items: center;
|
|||
|
|
// display: none;
|
|||
|
|
|
|||
|
|
// .qrcode-item {
|
|||
|
|
// flex: 1;
|
|||
|
|
// position: relative;
|
|||
|
|
// text-align: center;
|
|||
|
|
|
|||
|
|
// .item-box {
|
|||
|
|
// width: 90%;
|
|||
|
|
// margin: auto;
|
|||
|
|
// display: inline-block;
|
|||
|
|
// margin-top: 30%;
|
|||
|
|
// padding-bottom: 30rpx;
|
|||
|
|
|
|||
|
|
// // animation: show 0.7s;
|
|||
|
|
// .title {
|
|||
|
|
// font-size: 46rpx;
|
|||
|
|
// text-align: center;
|
|||
|
|
// margin-bottom: 24rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// .canvas {
|
|||
|
|
// margin: auto;
|
|||
|
|
// display: inline-block;
|
|||
|
|
// margin: auto;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// background-color: #FFFFFF;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
.box-qrcode{
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
.box-img-qrcode{
|
|||
|
|
position: absolute;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
image{
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.canvas-qrcode {
|
|||
|
|
|
|||
|
|
margin: auto;
|
|||
|
|
display: inline-block;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.opacity-qrcode {
|
|||
|
|
opacity: 0;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.show-qrcode {
|
|||
|
|
display: block;
|
|||
|
|
animation: fade 0.7s;
|
|||
|
|
|
|||
|
|
// -moz-animation: fade 0.5s; /* Firefox */
|
|||
|
|
// -webkit-animation: fade 0.5s; /* Safari 和 Chrome */
|
|||
|
|
// -o-animation: fade 0.5s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hide-qrcode {
|
|||
|
|
animation: hide 0.7s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fade {
|
|||
|
|
from {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes hide {
|
|||
|
|
from {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|