myjtp/pages/certificate/showCertificate.vue

<template>
	<view class="box position-relative">
		<image class="bg" src="../../static/img/zgxy.png" mode="widthFix"></image>
		<view class="content">
			<view class="flex">
				<image class="avImg" :src="info.photo" mode="scaleToFill"></image>
				<view class="title padding-b-10">
					<view class="item flex">
						<view class="name">
							姓<text class="jg1"></text>名：
						</view>
						<view class="text">
							{{info.name}}
						</view>
					</view>
					<view class="item flex">
						<view class="name">
							性<text class="jg1"></text>别：
						</view>
						<view class="text">
								{{info.gender_name}}
						</view>
					</view>
					<view class="item flex">
						<view class="name">
							证件号：
						</view>
						<view class="text">
								{{info.idcard}}
						</view>
					</view>
				</view>
			</view>
			<view class="according">
				<view class="indentation padding-t-20">
					依据 Q /ZG2001-2018和 Q /ZG3001-2018评价标准及母婴健康专委会服务网人才入库规定，经母婴健康专委会服务网审核，您的信息符合入库条件，同意加入人才库，特此证明。
				</view>
				<view class="indentation padding-t-30">
					According to the O/ZG2001-2018 and G3001-2018evaluation standards and the talent pool regulationsof
					Zhonggong Credit Service Network,after thereview of Zhonggong Credit Service Network,yourinformation
					meets the requirements,Agree to jointhe talent pool, Hereby certify.
				</view>
			</view>
			<view class="lsbox margin-b-30 padding-t-20 padding-b-10">
				<view class="item flex">
					<view class="name">
						岗位职业：
					</view>
					<view class="text">
						{{info.job}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库登记：
					</view>
					<view class="text">
						{{info.level_name}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库编号：
					</view>
					<view class="text">
						{{info.code}}
					</view>
				</view>
				<view class="item flex">
					<view class="name">
						入库日期：
					</view>
					<view class="text">
						{{info.date}}
					</view>
				</view>
			</view>
			<div class="qrCode" ref="qrCodeDiv"></div>
			<view class="tip">
				扫码可查看在线版本证书
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cert
	} from '@/api/certificate.js'
	import {
		getUserInfo
	} from '@/api/login.js'
	import QRCode from 'qrcodejs2';
	export default {
		data() {
			return {
				id:1,
				typeList: [{
					type: 0,
					name: '男'
				}, {
					type: 1,
					name: '女'
				}],
				info:{},
			}
		},
		onLoad(res) {
			const that = this;
			if(!res.id){
				getUserInfo().then((res)=>{
					that.id = res.data.uid;
					
					
					that.$nextTick(
						() => {
							that.bindQRCode();
						}
					)
				}).catch((res)=>{
					console.log(res);
				});
			}else{
				that.id = res.id;
				that.cert();
				that.$nextTick(
					() => {
						that.bindQRCode();
					}
				)
			}
		},
		methods: {
			bindQRCode() {
				new QRCode(this.$refs.qrCodeDiv, {
					render: "canvas",
					text:this.$store.state.baseURL+this.$store.state.urlFile+'/pages/certificate/showCertificate?id=' +this.id,
					width: 100,
					height: 100,
					colorDark: "#333333", //二维码颜色
					colorLight: "#ffffff", //二维码背景色
					correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				})
			},
			cert(){
				cert({
					id:this.id
				}).then((e)=>{
					this.info = e.data.info;
				}).catch((e)=>{
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		.bg {
			width: 750rpx;
		}

		.content {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 0 80rpx;
			padding-top: 150rpx;

			.title {
				padding-left: 20rpx;
				flex-grow: 1;
				align-self: flex-end;
				

				.jg1 {
					width: 1em;
					display: inline-block;
				}
			}

			.according {
				padding-top: 100rpx;

				.indentation {
					text-indent: 2em;
				}
			}

			.avImg {
				width: 160rpx;
				height: 215rpx;
				background-color: red;
			}
		}
	}

	.item {
		font-weight: bold;
		padding-top: 20rpx;

		.name {
			font-size: 28rpx;
		}

		.text {
			flex-grow: 1;
			border-bottom: 1px solid rgb(90, 90, 86);
		}
	}
	.qrCode{
		margin: 0 auto;
		width: 200rpx;
		height: 200rpx;
	}
	.tip{
		text-align: center;
		margin-top: 10rpx;
	}
</style>