xpl/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({
				type:2
			}).then(({ data }) => {
				console.log(data)
				obj.backImg = data[0].wap_poster;
				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>