119 lines
2.2 KiB
Vue
119 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<uni-popup
|
||
|
|
ref="popup"
|
||
|
|
type="center"
|
||
|
|
borderRadius="12px 12px 0 0"
|
||
|
|
@change="changePopup"
|
||
|
|
background-color="#F6F6F6"
|
||
|
|
>
|
||
|
|
<view class="popup-inner">
|
||
|
|
<view class="title">请扫码上传附件</view>
|
||
|
|
<view class="img-box">
|
||
|
|
<canvas canvas-id="qrcode" id="qrcode" />
|
||
|
|
</view>
|
||
|
|
<view class="close-btn" @click="close"></view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import uQRCode from '@/static/js/qrcode';
|
||
|
|
import { ref, inject, getCurrentInstance } from 'vue';
|
||
|
|
const emit = defineEmits(['onSend', 'onClose']);
|
||
|
|
const { $api } = inject('globalFunction');
|
||
|
|
const instance = getCurrentInstance();
|
||
|
|
const popup = ref(null);
|
||
|
|
|
||
|
|
function open() {
|
||
|
|
popup.value.open();
|
||
|
|
makeQrcode();
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
popup.value.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
function changePopup(e) {
|
||
|
|
if (e.show) {
|
||
|
|
} else {
|
||
|
|
emit('onClose');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function makeQrcode() {
|
||
|
|
const code = '111'
|
||
|
|
setTimeout(() => {
|
||
|
|
uQRCode.make({
|
||
|
|
canvasId: 'qrcode',
|
||
|
|
text: code,
|
||
|
|
size: uni.upx2px(300),
|
||
|
|
margin: 0,
|
||
|
|
backgroundColor: '#ffffff',
|
||
|
|
foregroundColor: '#1677ff',
|
||
|
|
fileType: 'png',
|
||
|
|
correctLevel: uQRCode.defaults.correctLevel,
|
||
|
|
success: (res) => {
|
||
|
|
console.log(res,'++');
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ open, close });
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.popup-inner{
|
||
|
|
padding: 30rpx;
|
||
|
|
padding-bottom: 40rpx;
|
||
|
|
width: 400rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.img-box {
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 300rpx;
|
||
|
|
height: 300rpx;
|
||
|
|
canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.close-btn {
|
||
|
|
position: absolute;
|
||
|
|
right: 20rpx;
|
||
|
|
top: 20rpx;
|
||
|
|
width: 56rpx;
|
||
|
|
height: 56rpx;
|
||
|
|
&::before {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
content: '';
|
||
|
|
width: 4rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
background: #5a5a68;
|
||
|
|
transform: translate(50%, -50%) rotate(-45deg);
|
||
|
|
}
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
content: '';
|
||
|
|
width: 4rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
background: #5a5a68;
|
||
|
|
transform: translate(50%, -50%) rotate(45deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|