shenweishi/pages/code/index.vue

<template>
	<view class="code">
		<view class="code_wrap">
			<view class="codeBox">
				<view class="codeTitle">签到卡</view>
				<view class="name">
					<!-- <view><span style="letter-spacing: 10rpx;">姓名</span> ：{{ patient.name ? patient.name : '爱丽丝'  }}</view>
					<view><span>透析号</span> ：{{ patient.dialysis_no ? patient.dialysis_no : '078' }}</view> -->
					<view class="left">
						<p>姓名：</p>
						<p>透析号：</p>
					</view>
					<view class="right">
						<p>{{ patient.name ? patient.name : '爱丽丝'  }}</p>
						<p>{{ patient.dialysis_no ? patient.dialysis_no : '078' }}</p>
					</view>
				</view>
				<!-- <img class="imgCode" src="../../static/images/avatar.png" alt=""> -->
				<canvas class="imgCode" canvas-id="couponQrcode"></canvas>
				<text class="txt">扫一扫测量你的体重和血压</text>
			</view>
		</view>

	</view>
</template>

<script>
	const qrCode = require('../../static/js/qrcode.js')
	export default {
		data() {
			return {
				patient: {}
			}
		},
		onLoad() {
			this.patient = this.$store.state.data.userInfo
			this.couponQrCode()
		},
		methods: {
			// 二维码生成工具
			couponQrCode() {
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				var patientID = this.patient.id;
				var name = this.patient.name;
				var gender = this.patient.gender;
				if (gender === 1) {
					gender = "男";
				}
				if (gender === 2) {
					gender = "女";
				}
				var idCardNo = this.patient.id_card_no;
				var dialysisNo = this.patient.dialysis_no;
				var phone = this.patient.phone;
				var healthCareNo = this.patient.health_care_no;
				new qrCode('couponQrcode', {
					text: "user_id:" +
						patientID +
						"," +
						"name:" +
						name +
						"," +
						"dialysis_no:" +
						dialysisNo +
						"," +
						"gender:" +
						gender +
						"," +
						"idcard_no:" +
						idCardNo +
						"," +
						"phone:" +
						phone +
						"," +
						"healthcare_no:" +
						healthCareNo,
					width: 175,
					height: 165,
					showLoading: true, // 是否显示loading
					loadingText: '二维码生成中', // loading文字
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
				uni.hideLoading();
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.code {
		background: #f7f7f7;
		height: 100%;
		overflow: hidden;
	}

	.code_wrap {
		margin: 60rpx;
		height: 900rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background: #c4f0ec;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		text-align: center;
	}


	.codeBox {
		height: 850rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		text-align: center;
	}

	.codeTitle {
		font-size: 46rpx;
		color: #00c4b3;
		text-align: center;
		padding-top: 80rpx;
		font-weight: 600;
		letter-spacing: 4rpx;
	}

	.name {
		display: flex;
		justify-content: center;
		/* margin: 0 68rpx; */
		border-bottom: 1px dashed #D8D8D8;
		padding: 44rpx 0 28rpx;
		line-height: 45rpx;
		font-size: 35rpx;
	}

	.imgCode {
		width: 350rpx;
		height: 330rpx;
		text-align: center;
		margin: 40rpx auto;
		display: block;
	}

	.txt {
		font-size: 30rpx;
		color: #22ccbd;
	}
</style>