From a6456e3b55870139bb3c92f6548cde2dd9feb398 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Sat, 18 Dec 2021 16:09:31 +0800
Subject: [PATCH] =?UTF-8?q?:tada:=20=E6=96=B0=E5=A2=9E=20scQrCode=20?=
 =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  1 +
 src/components/scQrCode/index.vue | 88 +++++++++++++++++++++++++++++++
 src/scui.js                       |  2 +
 src/views/vab/qrcode.vue          | 47 +++++++++++++++++
 4 files changed, 138 insertions(+)
 create mode 100644 src/components/scQrCode/index.vue
 create mode 100644 src/views/vab/qrcode.vue

diff --git a/package.json b/package.json
index f84ee24c..12a8ef96 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
 		"echarts": "5.2.2",
 		"element-plus": "1.2.0-beta.6",
 		"nprogress": "0.2.0",
+		"qrcodejs2": "0.0.2",
 		"sortablejs": "1.14.0",
 		"tinymce": "5.10.2",
 		"vue": "3.2.23",
diff --git a/src/components/scQrCode/index.vue b/src/components/scQrCode/index.vue
new file mode 100644
index 00000000..0166ec32
--- /dev/null
+++ b/src/components/scQrCode/index.vue
@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 生成二维码组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月20日14:22:20
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<img ref="img"/>
+</template>
+
+<script>
+	import QRcode from "qrcodejs2"
+
+	export default {
+		props: {
+			text: { type: String, required: true, default: "" },
+			size: { type: Number, default: 100 },
+			logo: { type: String, default: "" },
+			logoSize: { type: Number, default: 30 },
+			logoPadding: { type: Number, default: 5 },
+			colorDark: { type: String, default: "#000000" },
+			colorLight: { type: String, default: "#ffffff" },
+			correctLevel: { type: Number, default: 2 },
+		},
+		data() {
+			return {
+				qrcode: null
+			}
+		},
+		watch:{
+			text(){
+				this.draw()
+			}
+		},
+		mounted() {
+			this.draw()
+		},
+		methods: {
+			//创建原始二维码DOM
+			async create(){
+				return new Promise((resolve) => {
+					var element = document.createElement("div");
+					new QRcode(element, {
+						text: this.text,
+						width: this.size,
+						height: this.size,
+						colorDark: this.colorDark,
+						colorLight: this.colorLight,
+						correctLevel: this.correctLevel
+					})
+					if (element.getElementsByTagName("canvas")[0]) {
+						this.qrcode = element
+						resolve()
+					}
+				})
+			},
+			//绘制LOGO
+			async drawLogo(){
+				return new Promise((resolve) => {
+					var logo = new Image()
+					logo.src = this.logo
+					const logoPos = (this.size - this.logoSize) / 2
+					const rectSize = this.logoSize + this.logoPadding
+					const rectPos = (this.size - rectSize) / 2
+					var ctx = this.qrcode.getElementsByTagName("canvas")[0].getContext("2d")
+					logo.onload = ()=>{
+						ctx.fillRect(rectPos, rectPos, rectSize, rectSize)
+						ctx.drawImage(logo, logoPos, logoPos, this.logoSize, this.logoSize)
+						resolve()
+					}
+				})
+			},
+			async draw(){
+				await this.create()
+				if(this.logo){
+					await this.drawLogo()
+				}
+				this.$refs.img.src = this.qrcode.getElementsByTagName("canvas")[0].toDataURL("image/png")
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/scui.js b/src/scui.js
index 63f23c29..13541d4f 100644
--- a/src/scui.js
+++ b/src/scui.js
@@ -16,6 +16,7 @@ import scDialog from './components/scDialog'
 import scForm from './components/scForm'
 import scTitle from './components/scTitle'
 import scWaterMark from './components/scWaterMark'
+import scQrCode from './components/scQrCode'
 
 import scStatusIndicator from './components/scMini/scStatusIndicator'
 import scTrend from './components/scMini/scTrend'
@@ -52,6 +53,7 @@ export default {
 		app.component('scForm', scForm);
 		app.component('scTitle', scTitle);
 		app.component('scWaterMark', scWaterMark);
+		app.component('scQrCode', scQrCode);
 		app.component('scStatusIndicator', scStatusIndicator);
 		app.component('scTrend', scTrend);
 
diff --git a/src/views/vab/qrcode.vue b/src/views/vab/qrcode.vue
new file mode 100644
index 00000000..10c97e7c
--- /dev/null
+++ b/src/views/vab/qrcode.vue
@@ -0,0 +1,47 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="常用">
+					<sc-qr-code text="scui"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="带Logo">
+					<sc-qr-code text="scui" logo="img/logo.png"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="自定义颜色大小">
+					<sc-qr-code text="scui" :size="100" colorDark="#088200" colorLight="#fff"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="动态">
+					<sc-qr-code :text="qrcode"></sc-qr-code>
+					<el-input v-model="qrcode" placeholder="Please input"  style="margin-top: 20px;"/>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'qrcode',
+		data() {
+			return {
+				qrcode: "scui"
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>