<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<template #header>
|
<div class="card-header">
|
<span>二维码生成器演示</span>
|
<el-tag type="success">功能完整版</el-tag>
|
</div>
|
</template>
|
|
<el-alert
|
title="功能说明"
|
type="info"
|
:closable="false"
|
show-icon
|
>
|
<p>本演示页面展示了二维码生成器的完整功能，包括：</p>
|
<ul>
|
<li>基础二维码生成</li>
|
<li>防伪码生成</li>
|
<li>批量生成功能</li>
|
<li>图片下载功能</li>
|
</ul>
|
</el-alert>
|
|
<el-divider content-position="center">快速体验</el-divider>
|
|
<!-- 快速生成示例 -->
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-card shadow="hover" class="demo-card">
|
<template #header>
|
<div class="demo-header">
|
<span>网址二维码</span>
|
<el-button type="primary" size="small" @click="generateDemo('url')">
|
生成
|
</el-button>
|
</div>
|
</template>
|
<div class="demo-content">
|
<p>生成指向特定网址的二维码</p>
|
<p class="demo-text">https://www.example.com</p>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="8">
|
<el-card shadow="hover" class="demo-card">
|
<template #header>
|
<div class="demo-header">
|
<span>联系方式</span>
|
<el-button type="primary" size="small" @click="generateDemo('contact')">
|
生成
|
</el-button>
|
</div>
|
</template>
|
<div class="demo-content">
|
<p>生成包含联系信息的二维码</p>
|
<p class="demo-text">姓名：张三<br>电话：13800138000</p>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="8">
|
<el-card shadow="hover" class="demo-card">
|
<template #header>
|
<div class="demo-header">
|
<span>产品信息</span>
|
<el-button type="primary" size="small" @click="generateDemo('product')">
|
生成
|
</el-button>
|
</div>
|
</template>
|
<div class="demo-content">
|
<p>生成产品信息的二维码</p>
|
<p class="demo-text">产品：工业传感器<br>型号：SENSOR-001</p>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-divider content-position="center">功能入口</el-divider>
|
|
<!-- 功能入口 -->
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card shadow="hover" class="feature-card">
|
<div class="feature-content">
|
<div class="feature-icon">
|
<el-icon size="40" color="#409EFF"><QrCode /></el-icon>
|
</div>
|
<div class="feature-text">
|
<h3>基础二维码生成</h3>
|
<p>快速生成各种内容的二维码，支持自定义样式和下载</p>
|
<el-button type="primary" @click="goToSimple">开始使用</el-button>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
|
<el-col :span="12">
|
<el-card shadow="hover" class="feature-card">
|
<div class="feature-content">
|
<div class="feature-icon">
|
<el-icon size="40" color="#E6A23C"><Shield /></el-icon>
|
</div>
|
<div class="feature-text">
|
<h3>防伪码生成</h3>
|
<p>生成具有防伪功能的二维码，支持批量生成和下载</p>
|
<el-button type="warning" @click="goToAdvanced">开始使用</el-button>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-divider content-position="center">使用说明</el-divider>
|
|
<!-- 使用说明 -->
|
<el-collapse v-model="activeNames">
|
<el-collapse-item title="二维码生成步骤" name="1">
|
<div class="instruction-content">
|
<ol>
|
<li>选择要生成的内容类型（文本、网址、联系方式等）</li>
|
<li>输入具体内容</li>
|
<li>选择二维码尺寸和颜色</li>
|
<li>点击生成按钮</li>
|
<li>预览生成的二维码</li>
|
<li>下载图片到本地</li>
|
</ol>
|
</div>
|
</el-collapse-item>
|
|
<el-collapse-item title="防伪码特点" name="2">
|
<div class="instruction-content">
|
<ul>
|
<li><strong>唯一性</strong>：每个防伪码都包含时间戳和随机数</li>
|
<li><strong>高纠错</strong>：使用最高纠错级别，扫描成功率更高</li>
|
<li><strong>批量生成</strong>：支持一次生成多个防伪码</li>
|
<li><strong>格式规范</strong>：SEC_产品编码_批次号_时间戳_随机数</li>
|
</ul>
|
</div>
|
</el-collapse-item>
|
|
<el-collapse-item title="应用场景" name="3">
|
<div class="instruction-content">
|
<div class="scenario-grid">
|
<div class="scenario-item">
|
<el-icon color="#67C23A"><Goods /></el-icon>
|
<span>产品包装</span>
|
</div>
|
<div class="scenario-item">
|
<el-icon color="#409EFF"><Document /></el-icon>
|
<span>文档验证</span>
|
</div>
|
<div class="scenario-item">
|
<el-icon color="#E6A23C"><Tickets /></el-icon>
|
<span>票据防伪</span>
|
</div>
|
<div class="scenario-item">
|
<el-icon color="#F56C6C"><Medal /></el-icon>
|
<span>证书验证</span>
|
</div>
|
</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<!-- 生成的二维码预览 -->
|
<el-dialog v-model="previewVisible" title="生成的二维码" width="400px" center>
|
<div class="preview-container">
|
<img v-if="previewUrl" :src="previewUrl" alt="预览二维码" />
|
<div class="preview-info">
|
<p><strong>内容：</strong>{{ previewContent }}</p>
|
<p><strong>类型：</strong>{{ previewType }}</p>
|
</div>
|
<div class="preview-actions">
|
<el-button type="success" @click="downloadPreview" icon="Download">
|
下载图片
|
</el-button>
|
<el-button @click="previewVisible = false">关闭</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { QrCode, Shield, Goods, Document, Tickets, Medal } from '@element-plus/icons-vue'
|
import QRCode from 'qrcode'
|
|
defineOptions({
|
name: 'QRCodeDemo'
|
})
|
|
const router = useRouter()
|
const activeNames = ref(['1'])
|
const previewVisible = ref(false)
|
const previewUrl = ref('')
|
const previewContent = ref('')
|
const previewType = ref('')
|
|
// 生成演示二维码
|
const generateDemo = async (type) => {
|
try {
|
let content = ''
|
let typeName = ''
|
|
switch (type) {
|
case 'url':
|
content = 'https://www.example.com'
|
typeName = '网址二维码'
|
break
|
case 'contact':
|
content = 'BEGIN:VCARD\nVERSION:3.0\nFN:张三\nTEL:13800138000\nEND:VCARD'
|
typeName = '联系方式二维码'
|
break
|
case 'product':
|
content = '产品名称：工业传感器\n型号：SENSOR-001\n规格：高精度型\n用途：工业自动化'
|
typeName = '产品信息二维码'
|
break
|
}
|
|
const qrCodeUrl = await QRCode.toDataURL(content, {
|
width: 256,
|
margin: 2,
|
color: {
|
dark: '#000000',
|
light: '#FFFFFF'
|
}
|
})
|
|
previewUrl.value = qrCodeUrl
|
previewContent.value = content
|
previewType.value = typeName
|
previewVisible.value = true
|
|
} catch (error) {
|
console.error('生成演示二维码失败:', error)
|
ElMessage.error('生成失败：' + error.message)
|
}
|
}
|
|
// 下载预览的二维码
|
const downloadPreview = () => {
|
if (!previewUrl.value) {
|
ElMessage.warning('没有可下载的二维码')
|
return
|
}
|
|
const a = document.createElement('a')
|
a.href = previewUrl.value
|
a.download = `${previewType.value}_${new Date().getTime()}.png`
|
document.body.appendChild(a)
|
a.click()
|
document.body.removeChild(a)
|
ElMessage.success('下载成功！')
|
}
|
|
// 跳转到简化版页面
|
const goToSimple = () => {
|
router.push('/tool/qrCodeSimple')
|
}
|
|
// 跳转到高级版页面
|
const goToAdvanced = () => {
|
router.push('/tool/qrCodeGenerator')
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.box-card {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.demo-card {
|
margin-bottom: 20px;
|
}
|
|
.demo-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.demo-content {
|
text-align: center;
|
}
|
|
.demo-text {
|
font-size: 12px;
|
color: #666;
|
background: #f8f9fa;
|
padding: 8px;
|
border-radius: 4px;
|
margin-top: 10px;
|
}
|
|
.feature-card {
|
margin-bottom: 20px;
|
}
|
|
.feature-content {
|
display: flex;
|
align-items: center;
|
gap: 20px;
|
}
|
|
.feature-icon {
|
flex-shrink: 0;
|
}
|
|
.feature-text h3 {
|
margin: 0 0 10px 0;
|
color: #303133;
|
}
|
|
.feature-text p {
|
margin: 0 0 15px 0;
|
color: #606266;
|
line-height: 1.5;
|
}
|
|
.instruction-content {
|
padding: 10px 0;
|
}
|
|
.instruction-content ol,
|
.instruction-content ul {
|
margin: 0;
|
padding-left: 20px;
|
}
|
|
.instruction-content li {
|
margin: 8px 0;
|
line-height: 1.6;
|
}
|
|
.scenario-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 20px;
|
margin-top: 15px;
|
}
|
|
.scenario-item {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
padding: 15px;
|
background: #f8f9fa;
|
border-radius: 8px;
|
text-align: center;
|
}
|
|
.scenario-item span {
|
font-weight: 500;
|
color: #303133;
|
}
|
|
.preview-container {
|
text-align: center;
|
}
|
|
.preview-container img {
|
max-width: 100%;
|
height: auto;
|
border: 2px solid #e0e0e0;
|
border-radius: 8px;
|
margin-bottom: 20px;
|
}
|
|
.preview-info {
|
text-align: left;
|
background: #f8f9fa;
|
padding: 15px;
|
border-radius: 8px;
|
margin-bottom: 20px;
|
}
|
|
.preview-info p {
|
margin: 8px 0;
|
color: #666;
|
}
|
|
.preview-actions {
|
display: flex;
|
justify-content: center;
|
gap: 15px;
|
}
|
</style>
|
