121 lines
2.2 KiB
Vue
121 lines
2.2 KiB
Vue
<template>
|
|
<a-modal
|
|
:open="open"
|
|
:footer="null"
|
|
:width="380"
|
|
centered
|
|
:destroy-on-close="true"
|
|
@cancel="$emit('update:open', false)"
|
|
>
|
|
<div class="qr-modal">
|
|
<div class="qr-title">{{ title }}</div>
|
|
<div class="qr-subtitle">{{ tip }}</div>
|
|
|
|
<div class="qr-image-wrap">
|
|
<img
|
|
v-if="qrcodeUrl"
|
|
:src="qrcodeUrl"
|
|
:alt="appName"
|
|
class="qr-image"
|
|
@error="loadError = true"
|
|
/>
|
|
<div v-if="loadError" class="qr-error">
|
|
<PictureOutlined style="font-size: 40px; color: #bbb" />
|
|
<span>图片加载失败</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="qr-app-name">{{ appName }}</div>
|
|
|
|
<div class="qr-actions">
|
|
<a-button type="link" size="small" @click="downloadQr">
|
|
<template #icon><DownloadOutlined /></template>
|
|
保存小程序码
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { DownloadOutlined, PictureOutlined } from '@ant-design/icons-vue'
|
|
import { ref } from 'vue'
|
|
|
|
defineProps<{
|
|
open: boolean
|
|
qrcodeUrl?: string
|
|
appName?: string
|
|
title?: string
|
|
tip?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:open': [val: boolean]
|
|
}>()
|
|
|
|
const loadError = ref(false)
|
|
|
|
async function downloadQr() {
|
|
// 由外部通过 ref 调用，或用简单方式下载
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.qr-modal {
|
|
text-align: center;
|
|
padding: 8px 0 0;
|
|
}
|
|
|
|
.qr-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.88);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.qr-subtitle {
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.qr-image-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 220px;
|
|
height: 220px;
|
|
margin: 0 auto;
|
|
background: #fafafa;
|
|
border-radius: 12px;
|
|
border: 1px dashed #d9d9d9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.qr-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.qr-error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.qr-app-name {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.qr-actions {
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|