myc/pages/merchant/storeQr.vue

<template>
	<view class="content">
		<view class="user-logo">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="user-name">{{userInfo.nickname}}</view>
		</view>
		<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">
				{{val}}
			</view> -->
		</view>
		<view class="btm">
			扫一扫进店铺
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	import { mapState, mapMutations } from 'vuex';
	export default {
		comments:{
			tkiQrcode
		},
		data() {
			return {
				// code: '10250035810',
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 448, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true,//默认使用组件中的image标签显示二维码
				val: '', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 0, //二维码图标大小
				lv: 3, //容错级别
				onval: false, //监听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'])
		},
		onShow() {
			console.log(this.userInfo)
			// 判断是否已经登录
			if (this.hasLogin) {
				// this.loadBaseData();
				// this.getSpreadCount()
				console.log(this.userInfo)
				// console.log(this.userInfo)
			}
		},
		onLoad(opt) {
			this.val = 'hello word'
			console.log(this.val )
		},
		methods: {
			// 生成二维码后返回base64
			qrR(res) {
				this.src = res;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #fff;
	}
	.user-logo {
		
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			background-color: #eee;
			width: 129rpx;
			height: 129rpx;
			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 #52C696;
		// padding-top: 46rpx;
		position: relative;
		.code-content {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 448rpx;
			height: 448rpx;
			background-color: #eee;
			margin: 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;
	}
</style>