<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true"><block slot="backText">返回</block><block slot="content">交接卡</block></cu-custom>
			<view class="photoView">
				<image src="/static/headPhoto.jpg" class="photoImage"></image>
			</view>
			<view class="textView">
				<p class="headTitle">北京智感云医废交接码</p>
				<p class="title">使用二维码和收集人员进行交接</p>
			</view>
			<view class="photoView_1">
				<canvas class="canvas-code" canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import QRCode from '../component/weapp-qrcode.js'
	export default {
		data() {
			return {}
		},
		mounted() {
			let that = this;
			uni.request({
				url: 'https://lekapi.opmonitor.com/?c=app_api&a=getHandCardInfo',
				data: {openid: getApp().globalData.openid},
				header: {
					'Content-type': 'application/json'
				},
				success: function(res){
					new QRCode('myQrcode',{
					  text: res.data.data,
					  width: 200,
					  height: 200,
					  padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
					  correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
					  callback: (res) => {
					    console.log(res.path)
					  }
					})
				},
				fail: () => {
					console.info('小程序域名不正确，请检查域名正确性')
				}
			})
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100Vh;
	}
	
	.photoView {
		text-align: center;
		padding-top: 50rpx;
	}
	
	.photoImage {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}
	
	.photoView_1 {
		text-align: center;
		padding-top: 100rpx;
	}
	
	.photeImage_1 {
		width: 400rpx;
		height: 450rpx;
	}
	
	.textView {
		padding-top: 80rpx;
		text-align: center;
	}
	.title {
		padding-top: 20rpx;
		font-size: 30rpx;
	}
	.headTitle {
		font-weight: bold;
		font-size: 45rpx;
	}
</style>
