diff --git a/front/src/renderer/index.html b/front/src/renderer/index.html
index 079bc6f..6e808cb 100644
--- a/front/src/renderer/index.html
+++ b/front/src/renderer/index.html
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
- <title>桌面应用</title>
+ <title>时光机</title>
<!-- <link rel="icon" href="/icon/icon.jpg" /> -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
diff --git a/front/src/renderer/src/App.vue b/front/src/renderer/src/App.vue
index 8650371..3455254 100644
--- a/front/src/renderer/src/App.vue
+++ b/front/src/renderer/src/App.vue
@@ -1,21 +1,21 @@
<template>
<div class="appClass" v-if="isVip">
- <dv-border-box1 ref="borderRef" style="text-align: center; width: 100vw; height: 100vh">
+ <dv-border-box1 ref="borderRef" style="text-align: center; width: 100vw; height: 100vh" class="maincss">
<span style="font-size:2em;color: aquamarine;">米微婚礼</span>
<div class="topinput">
<dv-border-box8 :dur="5" class="topinputinfo">
<div dv-bg>
- <span>姓名：</span>
+ <span style="color: #fff;">姓名：</span>
<span>
- <el-input v-model="form.name" style="width: 280px" placeholder="请输入姓名" />
+ <el-input v-model="form.name" style="width: 280px;color: #fff;" placeholder="请输入姓名" />
</span>
</div>
</dv-border-box8>
<dv-border-box8 :reverse="true" class="topinputinfo">
<div dv-bg>
- <span>年龄：</span>
+ <span style="color: #fff;">年龄：</span>
<span>
- <el-input-number v-model="form.age" style="width: 280px" :max="200" :min="0">
+ <el-input-number v-model="form.age" style="width: 280px;color: #fff;" :max="200" :min="0">
<template #decrease-icon>
<el-icon>
<ArrowDown />
@@ -30,9 +30,9 @@
</span>
</div>
</dv-border-box8>
- <el-button type="primary" @click="takePhotoUpload">打开视频</el-button>
- <el-button type="primary" @click="takePhoto">拍照</el-button>
- <el-button type="success" @click="updateSeach">上传查看</el-button>
+ <el-button type="primary" @click="takePhotoUpload" :disabled="shexiangotuBtn">打开摄像头</el-button>
+ <el-button type="primary" @click="takePhoto" :disabled="paizhaoBtn">拍照</el-button>
+ <el-button type="success" @click="updateSeach" :disabled="uploadBtn">上传查看</el-button>
</div>
<div class="botimg">
<div id="camera">
@@ -70,9 +70,12 @@ export default {
img: ''
},
videoEL: null,
- isVip: false,
+ isVip: true,
pngObj: {},
qrString: "",
+ shexiangotuBtn: false,
+ paizhaoBtn: true,
+ uploadBtn: true,
}
},
methods: {
@@ -108,8 +111,11 @@ export default {
.then((success) => {
// 摄像头开启成功
this.$refs['videoEL'].srcObject = success
+ this.paizhaoBtn = false
+ this.uploadBtn = true
// 实时拍照效果
this.$refs['videoEL'].play()
+
})
.catch((error) => {
ElMessage.error('摄像头开启失败，请检查摄像头是否可用！')
@@ -137,19 +143,25 @@ export default {
track.stop()
})
this.$refs['videoEL'].srcObject = null
+ this.shexiangotuBtn = false
+ this.paizhaoBtn = true
+ this.uploadBtn = false
},
async updateSeach() {
this.pngObj = {}
ElMessage({
type: 'success',
duration: 5000,
- message: '图片转化成功请5秒后，扫描二维码获取',
+ message: '图片转化成功请10秒后，扫描二维码获取',
})
window.electron.ipcRenderer.send('sendMessage', {
name: this.form.name,
age: this.form.age,
img: this.form.img
})
+ this.shexiangotuBtn = false
+ this.paizhaoBtn = true
+ this.uploadBtn = true
},
watchPng() {
let that = this
@@ -182,7 +194,7 @@ export default {
ElMessage({
type: 'success',
duration: 15000,
- message: '15秒后二维码消失',
+ message: '10分钟后二维码消失',
})
}
})
@@ -193,14 +205,46 @@ export default {
ctx.width = 500
ctx.height = 500
ctx.clearRect(0, 0, 500, 500);
- }, 15000);
+ }, 1000 * 60 * 10);
}
})
},
+ testFun() {
+ let that = this
+ let baseurl = "http://123.249.20.25:9019"
+ // let baseurl = "http://127.0.0.1:7001"
+ that.qrString = `${baseurl}/?id=${_.get(that.pngObj, ["list", "_id"]) || '66470a958b5bc46070f6d6d8'}`
+ let canvas = document.getElementById('canvas1')
+ console.log(777, that.pngObj, baseurl, canvas)
+ QRCode.toCanvas(canvas, that.qrString, function (error) {
+ if (error) {
+ ElMessage({
+ type: 'error',
+ duration: 5000,
+ message: error,
+ })
+ } else {
+ ElMessage({
+ type: 'success',
+ duration: 15000,
+ message: '10分钟后二维码消失',
+ })
+ }
+ })
+ // 设置5秒后关闭弹窗
+ setTimeout(() => {
+ that.qrString = ""
+ let ctx = canvas.getContext("2d")
+ ctx.width = 500
+ ctx.height = 500
+ ctx.clearRect(0, 0, 500, 500);
+ }, 1000 * 60 * 10);
+ }
},
async mounted() {
console.log(8877, QRCode)
this.watchPng()
+ // this.testFun()
let fiveDay = dayjs('2024-05-21T00:00:00').valueOf()
if (!this.isVip) {
if (dayjs().valueOf() > fiveDay) {
@@ -223,6 +267,11 @@ export default {
background-color: #00b8ca;
}
+.maincss {
+ background: url("./assets/imgs/bg.jpg");
+ background-size: 100% 100%;
+}
+
.topinput {
height: calc(30vh - 62px);
text-align: -webkit-center;
diff --git a/front/src/renderer/src/assets/imgs/bg.jpg b/front/src/renderer/src/assets/imgs/bg.jpg
new file mode 100644
index 0000000..4464424
Binary files /dev/null and b/front/src/renderer/src/assets/imgs/bg.jpg differ