mnsx/pages/order/verifyCode.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 code1" v-if="val.length <= 25">
				{{val}}
			</view>
			<view class="code " v-else>
				{{val}}
			</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: 362, //生成的二维码大小
				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'])
		},
		onShow() {
			console.log(this.userInfo)
			// 判断是否已经登录
			if (this.hasLogin) {
				// this.loadBaseData();
				// this.getSpreadCount()
				console.log(this.userInfo)
				// console.log(this.userInfo)
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				if (opt.type == 'exchange') {
					this.val = opt.vcode
				} else {
					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>
	page {
		height: 100%;
		background-color: #fff;
	}

	.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;

		.code-content {
			width: 362rpx;
			height: 365rpx;
			// background-color: red;
			margin: 0 auto;
		}

		.code {
			padding: 0 40rpx;
			padding-top: 5rpx;
			// line-height: 1;
			height: 80rpx;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
			word-wrap: break-word;
			word-break: break-all;
			// overflow: hidden;
		}
		.code1 {
			padding-top: 31rpx;
		}
	}

	.btm {
		padding-top: 45rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
</style>