Files
mwims-mtx-mini-program/pages/plugin/handCardCode.vue
T

93 lines
1.9 KiB
Vue

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