From c7b4b9a2f4c0f05aeb60a9e3f5fba5d9a3676f3f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 18 八月 2025 16:22:42 +0800
Subject: [PATCH] 中强恒兴设备管理页面添加
---
src/views/tool/qrCodeDemo/index.vue | 405 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 405 insertions(+), 0 deletions(-)
diff --git a/src/views/tool/qrCodeDemo/index.vue b/src/views/tool/qrCodeDemo/index.vue
new file mode 100644
index 0000000..d62af71
--- /dev/null
+++ b/src/views/tool/qrCodeDemo/index.vue
@@ -0,0 +1,405 @@
+<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>鍨嬪彿锛歋ENSOR-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>锛歋EC_浜у搧缂栫爜_鎵规鍙穇鏃堕棿鎴砡闅忔満鏁�</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鍨嬪彿锛歋ENSOR-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>
--
Gitblit v1.9.3