groupon-wx/components/ay-qrcode/ay-qrcode.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>