mycajt/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 { my } from '@/api/merchant.js';
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: true, //监听val值变化自动重新生成二维码
			loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
			usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
			showLoading: false, //是否显示loading
			loadingText: '二维码生成中', //loading文字
			src: '', // 二维码生成后的图片地址或base64
			ratio: 1, //页面比例用于计算
			ctxSrc: '', //要显示的图片
			loading: true, //是否载入图片中
			canHeight: '', //画布高度
			canWeidth: '', //画布宽度
			id: '',
			uid: ''
		};
	},
	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)
		}
	},
	async onLoad(opt) {
		await my({}).then(({ data }) => {
			this.id = data.id;
			this.uid = data.uid;
		});
		this.val = this.baseURL + '/index/pages/index/index?store_id=' + this.id + '&spread=' + this.uid;
		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>