zhongwin/pages/user/shareQrCode.vue

<template>
	<view class="container">
		<image @longtap="bc_code" class="backImg" :src="backImg"></image>
		<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
			}).then(({ data }) => {
				console.log(data);
				//#ifdef MP
				obj.backImg = data[0].poster;
				//#endif
				//#ifdef H5
				obj.backImg = data[0].wap_poster;
				//#endif
				uni.hideLoading();
			});
		},
		bc_code() {
			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('保存失败');
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	min-height: 100%;
	.container {
		width: 100%;
		height: 100%;
	}
}
.backImg {
	position: absolute;
	width: 100%;
	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>