hqshop/pages/user/shareQrCode.vue

<template>
	<view class="container">
		<image  class="backImg" :src="backImg" @click="bc_code(backImg)"></image>
<!-- 		<view class="" @longtap="bc_code">
			保存分享海报
		</view> -->
		<!-- <view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view> -->
	</view>
</template>

<script>
	import {
		spreadBanner
	} from '@/api/user.js';
	export default {
		// components: { tkiQrcode },
		data() {
			return {
				url: '',
				backImg: '',
				userInfo: ''
			};
		},
		onLoad() {
			this.spread();
		},
		computed: {
			cpSize() {
				if (this.unit == 'upx') {
					return uni.upx2px(this.size);
				} else {
					return this.size;
				}
			}
		},
		methods: {
			spread() {
				uni.showLoading({
					title: '加载中'
				});
				let obj = this;
				spreadBanner({
					//#ifdef H5
					type: 2,
					//#endif
					//#ifdef MP
					type: 1,
					//#endif
					//#ifdef APP-PLUS
					type: 2,
					//#endif
				}).then(({
					data
				}) => {
					console.log(data);
					//#ifdef MP
					obj.backImg = data[0].poster;
					//#endif
					//#ifdef H5
					obj.backImg = data[0].wap_poster;
					//#endif
					//#ifdef APP-PLUS
					obj.backImg = data[0].wap_poster;
					//#endif
					uni.hideLoading();
				});
			},
			bc_code(imgUrl) {

				let that = this;
				console.log('保存二维码', this.backImg);
				uni.downloadFile({
					//获得二维码的临时地址
					url: this.backImg,
					success: res => {
						//console.log('获取url',res)
						if (res.statusCode == 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath, //传入临时地址
								success() {
									that.$api.msg('保存成功'); //封装的提示
								},
								fail() {
									that.$api.msg('保存失败');
								}
							});
						}
					}
				});
				// let imageUrl = 'http://yg.hqgjsmc.com' + imgUrl
				// window.URL = window.URL || window.webkitURL;
				// var xhr = new XMLHttpRequest();
				// console.log(xhr,imgUrl)
				// xhr.open("get", imgUrl, true);
				// xhr.responseType = "blob";
				// xhr.onload = function() {
				// 	if (this.status == 200) {
				// 		//得到一个blob对象
				// 		var blob = this.response;
				// 		console.log("blob", blob)
				// 		// 至关重要
				// 		let oFileReader = new FileReader();
				// 		oFileReader.onloadend = function(e) {
				// 			// 此处拿到的已经是base64的图片了,可以赋值做相应的处理
				// 			console.log(e.target.result)
				// 		}
				// 		oFileReader.readAsDataURL(blob);
				// 	}
				// }
				// xhr.send();
				// alert(xhr.send())
				// console.log(xhr.send(),'ddddddddddddddd')
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;

		.container {
			width: 100%;
			height: 100%;
		}
	}

	.backImg {
		position: absolute;
		width: 100%;
		// width: 750rpx;
		height: 100%;
	}

	.portrait {
		width: 100%;
		text-align: center;
		padding-top: 80rpx;
		padding-bottom: 30rpx;

		image {
			width: 250rpx;
			height: 250rpx;
		}
	}

	.text {
		text-align: center;
		width: 100%;
		color: #ffffff;
		font-size: 55rpx;
		letter-spacing: 15rpx;
	}

	.uid-name {
		padding: 50rpx 0rpx;
		text-align: center;
		width: 100%;
		color: #ffffff;
	}

	.copy-btn {
		color: #ffffff;
		background-color: #4ba6ed;
		border-radius: 50rpx;
		width: 170rpx;
		line-height: 70rpx;
		margin: 0rpx auto;
		text-align: center;
	}

	.tki-qrcode {
		position: fixed;
		bottom: 10%;
		left: 30%;
	}

	canvas {
		width: 150px;
		height: 150px;
		margin: auto;
	}
</style>