Test_Project_Web/QRCode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[add] 人數

Browse Source
This commit is contained in:
建喵 2022-04-21 17:53:52 +08:00
parent 2b80d6fd7b
commit f514ce114d
15 changed files with 1785 additions and 1325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/assets/ZenMaruGothic-Regular.2d389171.ttf vendored Normal file
View File

Binary file not shown.

1
dist/assets/index.06d14ce2.css vendored
View File

@ -1 +0,0 @@
#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}

6
dist/assets/index.376fffd7.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

33
dist/assets/index.42a79cc2.js vendored
View File

File diff suppressed because one or more lines are too long

78
dist/assets/index.8e1874c4.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
dist/index.html vendored
View File

@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 QR Code with Vue js</title> <title>HTML5 QR Code with Vue js</title>
<script type="module" crossorigin src="./assets/index.42a79cc2.js"></script> <script type="module" crossorigin src="./assets/index.8e1874c4.js"></script>
<link rel="stylesheet" href="./assets/index.06d14ce2.css"> <link rel="stylesheet" href="./assets/index.376fffd7.css">
</head> </head>
<body> <body>

2902
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -8,6 +8,8 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^5.1.3",
"element-plus": "^2.1.10",
"html5-qrcode": "^2.2.1", "html5-qrcode": "^2.2.1",
"vue": "^3.2.25" "vue": "^3.2.25"
}, },
@ -17,4 +19,4 @@
"vite": "^2.9.5", "vite": "^2.9.5",
"vue-tsc": "^0.34.7" "vue-tsc": "^0.34.7"
} }
} }

3
src/App.vue
View File

@ -9,6 +9,8 @@ import QRCode from './components/QRCode.vue';
</template> </template>
<style> <style>
@import url('../src/assets/fonts.css');
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -16,5 +18,6 @@ import QRCode from './components/QRCode.vue';
text-align: center; text-align: center;
color: #2c3e50; color: #2c3e50;
margin-top: 60px; margin-top: 60px;
font-family: 'Zen Maru Gothic', sans-serif;
} }
</style> </style>

13
src/assets/fonts.css Normal file
View File

@ -0,0 +1,13 @@
@font-face {
/* 重命名字体名 */
font-family: 'Zen Maru Gothic';
src: url('./fonts/ZenMaruGothic-Regular.ttf');
font-weight: normal;
font-style: normal;
}
.btn {
font-size: 25px;
/* width: 200px; */
/* height: 60px; */
}

BIN
src/assets/fonts/ZenMaruGothic-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/assets/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 593 KiB

50
src/components/QRCode.vue
View File

@ -1,12 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { nextTick, ref } from 'vue';
import QRCodeScanner from './QRCodeScanner.vue'; import QRCodeScanner from './QRCodeScanner.vue';
// defineProps<{ msg: string }>() // defineProps<{ msg: string }>()
let result = ref('') let result = ref('');
let smscontent = ref('') let count = ref(1);
let isSHowSMS = ref('visibility:hidden') let smscontent = ref('');
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
const decodedCode = function (decodedText: string, decodedResult: any) { const decodedCode = function (decodedText: string, decodedResult: any) {
// console.log(`Scan result ${decodedText}`, decodedResult); // console.log(`Scan result ${decodedText}`, decodedResult);
@ -21,21 +25,43 @@ function smsto1922(decodedText: string) {
let contents = decodedText.split('1922:'); let contents = decodedText.split('1922:');
let sms = contents[1]; let sms = contents[1];
result.value = `內容:${sms}`; result.value = `內容:${sms}`;
// smscontent.value = sms; smscontent.value = sms;
let smsto = document.getElementById("smsto")!; let Btn_Open = document.getElementById("Btn_Open")!;
smsto.innerHTML = `<a href="sms:1922&body=${sms}">按我傳送簡訊</a>`; Btn_Open.style.display = "inline";
} }
function OnclickOpen() {
let addcount = "";
if (count.value > 1) {
addcount = `+${count.value - 1}`;
}
window.open(`sms:1922&body=${smscontent.value}${addcount}`, "_self");
}
async function onLoad(): Promise<void> {
// 这里获取DOM的是旧值
await nextTick()
// nextTick 后获取DOM的是更新后的值
let Btn_Open = document.getElementById("Btn_Open")!;
Btn_Open.style.display = "none";
if (!isAndroid && !isiOS) {
let section = document.getElementById("section")!;
section.style.width = '500px';
}
}
onLoad();
</script> </script>
<template> <template>
<div class="section" style="width: 500px; margin: auto;"> <div id="section" class="section" style="width: 70%; margin: auto;">
<QRCodeScanner :qrbox="250" :fps="10" style="width: 100%;" @decodedCode="decodedCode"> <QRCodeScanner :qrbox="200" :fps="10" @decodedCode="decodedCode">
</QRCodeScanner> </QRCodeScanner>
</div> </div>
<div> {{ result }} </div> <div> {{ result }} </div>
<div id="smsto"> <div>
<!-- <div style="visibility:hidden"> --> <el-input-number v-model="count" :min="1" size="large" />
<!-- <a href="sms:1922&body={{content}}">Click here to text us!</a> -->
</div> </div>
<el-button id="Btn_Open" type="success" @click.native="() => { OnclickOpen() }" size="large" round>按我傳送簡訊
</el-button>
</template> </template>

4
src/components/QRCodeScanner.vue
View File

@ -15,6 +15,8 @@ if (props.qrbox) {
config['qrbox'] = props.qrbox; config['qrbox'] = props.qrbox;
} }
let html5QrcodeScanner: Html5QrcodeScanner = null!;
function onScanSuccess(decodedText: string, decodedResult: any) { function onScanSuccess(decodedText: string, decodedResult: any) {
// $this.$root.$emit('decodedCode', decodedText, decodedResult); // $this.$root.$emit('decodedCode', decodedText, decodedResult);
if (nowresult === decodedText) { if (nowresult === decodedText) {
@ -32,7 +34,7 @@ async function onLoad(): Promise<void> {
// 这里获取DOM的是旧值 // 这里获取DOM的是旧值
await nextTick() await nextTick()
// nextTick 后获取DOM的是更新后的值 // nextTick 后获取DOM的是更新后的值
var html5QrcodeScanner = new Html5QrcodeScanner( html5QrcodeScanner = new Html5QrcodeScanner(
"qr-code-full-region", config, undefined); "qr-code-full-region", config, undefined);
html5QrcodeScanner.render(onScanSuccess, onScanError); html5QrcodeScanner.render(onScanSuccess, onScanError);
} }

12
src/main.ts
View File

@ -1,4 +1,10 @@
import { createApp } from 'vue' import "bootstrap";
import App from './App.vue' import "bootstrap/dist/css/bootstrap.min.css";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import locale from "element-plus/lib/locale/lang/zh-tw";
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount('#app')
createApp(App).use(ElementPlus, { locale }).mount("#app");