hz/pages/user/shareQrCode.vue

<template>
	<view class="container">
		<image @longtap="bc_code" mode="widthFix" 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: '',
				iswei: 1
			};
		},
		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;
				//#ifdef H5
				let ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
				console.log(ua, '123456');
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					obj.iswei = 2;
					console.log('weixin');
				}
				//#endif 
				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
					//#ifdef APP-PLUS
					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%;
	}

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