yunshan/pages/index/share.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 uQRCode from '@/components/Sansnn-uQRCode/uqrcode.js'
import { getUserInfo,spread } from '@/api/user.js';
export default {
	props: {
		qrval: {
			// 要生成的二维码值
			type: String
		}
	},
	data() {
		return {
			url: '',
			backImg:'',
			userInfo:''
		};
	},
	onLoad() {
		this.spread();
		this.getInfo();
	},
	computed: {
			cpSize() {
				if(this.unit == "upx"){
					return uni.upx2px(this.size)
				}else{
					return this.size
				}
			}
	},
	methods: {
		spread(){
			let obj = this;
			spread({
				type:2
			}).then(({ data }) => {
				obj.backImg = data[0].wap_poster;
			});
		},
		getInfo(){
			let obj = this;
			getUserInfo({}).then(({ data }) => {
				obj.userInfo = data;
				// obj.loadData()
			});
		},
		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('保存失败')
							}
						})
					}
				}
			})
		},
		//生成二维码
		  // make() {
			 //  let obj = this;
		  //     uQRCode.make({
		  //       canvasId: 'qrcode',
		  //       componentInstance: this,
		  //       text: obj.url,
		  //       size: 150,
		  //       margin: 10,
		  //       backgroundColor: '#ffffff',
		  //       foregroundColor: '#000000',
		  //       fileType: 'png',
		  //       correctLevel: uQRCode.defaults.correctLevel,
		  //       success: res => {
		  //         // console.log(res)
		  //       }
		  //     })
		  //   },
		// 请求载入数据
		// async loadData() {
		// 	let obj = this;
		// 	obj.url = 'http://btex.frp.liuniu946.com/?id='+ obj.userInfo.invite_code;
		// 	obj.make();
		// },
	},
};
</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>