xwfb/pages/user/shareQrCode.vue

<template>
	<view class="content">
		<!-- <view class="user-logo">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="user-name">{{userInfo.nickname}}</view>
		</view> -->
		<image src="../../static/img/sharebase.png" mode="" class="sharebg" ></image>
		<view class="code-warpper">
			<view class="code-content">
				<tki-qrcode
					:cid="cid"
					ref="qrcode"
					:val="val"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:iconSize="iconSize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="usingComponents"
					@result="qrR"
				/>
			</view>
			<view class="code">
				邀请码：{{userInfo.uid}}
			</view>
		</view>
		<view class="btm">
			<!-- 向商家出示二维码 -->
		</view>
	</view>
</template>

<script>
	import { orderDetail } from '@/api/order.js';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import { mapState, mapMutations } from 'vuex';
	export default {
		comments:{
			tkiQrcode
		},
		data() {
			return {
				id:'',
				// code: '10250035810',
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 300, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true,//是否载入图片中
				canHeight: '',//画布高度
				canWeidth: ''//画布宽度
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
			...mapState(['baseURL'])
		},
		onShow() {
			console.log(this.userInfo)
			// 判断是否已经登录
			if (this.hasLogin) {
				// this.loadBaseData();
				// this.getSpreadCount()
				console.log(this.userInfo)
				// console.log(this.userInfo)
			}
		},
		onLoad(opt) {
			this.val = this.baseURL + '/register?spread=' + this.userInfo.uid
			// if(opt.id) {
			// 	this.id = opt.id
			// 	orderDetail({}, this.id).then(e => {
			// 		this.val = e.data._verify_code;
			// 		this.val = this.val.replace(/\s/g, '')
			// 	});
			// }else {
			// 	this.val = opt.code.replace(/\s/g, '')
			// }
			// console.log(this.val )
		},
		methods: {
			// 生成二维码后返回base64
			qrR(res) {
				this.src = res;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		background-color: #ff341a;
		height: 100vh;
		min-height: 100%;
	}
	page {
		height: 100vh;
		min-height: 100%;
		background-color: #ff341a;
	}
	.user-logo {
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
		}
		.user-name {
			padding-top: 25rpx;
			font-size: 34rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #2B2B2B;
		}
		
	}
	.code-warpper {
		width: 515rpx;
		height: 515rpx;
		margin: 0 auto;
		// border: 3rpx solid #901B21;
		padding-top: 46rpx;
		position: absolute;
		top:600rpx;
		left: 0;
		right: 0;
		margin: auto;
		.code-content {
			width: 300rpx;
			height: 300rpx;
			// background-color: red;
			margin: 0 auto;
		}
		.code {
			padding-top: 31rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
	}
	.btm {
		padding-top: 45rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.sharebg {
		width: 750rpx;
		height: 1206rpx;
		position: absolute;
		top: 0;
	}
</style>