63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<el-dialog title="签约码" width="350px" v-model="visible">
|
|
<div class="wrap">
|
|
<el-image :src="srcUrl" style="width: 200px;height: 200px;"></el-image>
|
|
<el-text>请前往{{ type == 1 ? '支付宝' : '微信' }}进行扫码</el-text>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import QRCode from 'qrcode'
|
|
|
|
const visible = ref(false)
|
|
|
|
const srcUrl = ref('')
|
|
const type = ref(1)
|
|
|
|
// 手动生成二维码
|
|
async function generateQrcode(text) {
|
|
try {
|
|
// 生成 Base64 格式的二维码图片
|
|
const base64 = await QRCode.toDataURL(text, {
|
|
width: 200,
|
|
margin: 1,
|
|
color: {
|
|
dark: '#000',
|
|
light: '#fff'
|
|
}
|
|
})
|
|
url.value = base64
|
|
} catch (err) {
|
|
console.error('生成二维码失败：', err)
|
|
}
|
|
}
|
|
|
|
// 显示二维码弹窗
|
|
function show(url, t) {
|
|
// console.log(url);
|
|
visible.value = true
|
|
type.value = t
|
|
if (t == 2) {
|
|
srcUrl.value = url
|
|
} else {
|
|
generateQrcode(url)
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
show
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
padding-bottom: 24px;
|
|
}
|
|
</style> |