zhengyi/pages/user/shareQrCode.vue

<template>
	<view class="container" v-if="loaded">
		<image @longtap="bc_code" class="backImg" :src="backImg"></image>
		<!-- <view class="tki-qrcode"><canvas @longtap="bc_code" canvas-id="qrcode" /></view> -->
		<view class="tki-qrcode">
			<tki-qrcode :key="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid" cid="tki-qrcode-canvas"
				ref="qrcode"
				:val="'http://shop.zhengyjk1994.com/register?petent=' + userInfo.uid"
				:size="300" unit="upx" background="#ffffff" foreground="#333333" pdground="#333333" icon=""
				:iconSize="40" :lv="3" :onval="true" :loadMake="true" :usingComponents="true" />
		</view>
	</view>
</template>

<script>
	import {
		spreadBanner
	} from '@/api/user.js';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				url: '',
				backImg: '',
				loaded: false
			};
		},
		onLoad() {
			this.spread();
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
			cpSize() {
				if (this.unit == "upx") {
					return uni.upx2px(this.size)
				} else {
					return this.size
				}
			},
		},
		methods: {
			spread() {
				let obj = this;
				uni.showLoading({
					title: '二维码生成中...'
				})
				spreadBanner({
					type: 2
				}).then(({
					data
				}) => {
					uni.hideLoading()
					console.log(data)
					obj.backImg = data[0].pic;
					console.log(obj.backImg, 'obj.backImg')
					this.loaded = true
					
				}).catch(err => {
					console.log(err)
					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>