update

front/package.json

@@ -26,7 +26,8 @@
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
-    "qrcode": "^1.5.3"
+    "qrcode": "^1.5.3",
+    "qrcode-vue3": "^1.6.8"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

front/src/main/index.js

@@ -57,7 +57,8 @@ app.whenReady().then(() => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
   ipcMain.on('sendMessage', async (eve, msg) => {
-    let res = await axios.post(`http://127.0.0.1:7001/api/upload`, msg)
+    // let res = await axios.post(`http://127.0.0.1:7001/api/upload`, msg)
+    let res = await axios.post(`http://123.249.20.25:9019/api/upload`, msg)
     mainWindow.webContents.send('reply', res.data)
   })
 })

front/src/renderer/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="appClass" v-if="isVip">
     <dv-border-box1 ref="borderRef" style="text-align: center; width: 100vw; height: 100vh">
-      <dv-button style="width: 90%; margin-left: 5%">米微婚礼</dv-button>
+      <span style="font-size:2em;color: aquamarine;">米微婚礼</span>
       <div class="topinput">
         <dv-border-box8 :dur="5" class="topinputinfo">
           <div dv-bg>
@@ -33,13 +33,14 @@
         <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="success" @click="searchQrcode">下载</el-button>
       </div>
       <div class="botimg">
         <div id="camera">
-          <video ref="videoEL" width="500px" height="450px" autoplay v-if="!form.img"></video>
+          <video ref="videoEL" width="500px" height="480px" autoplay v-if="!form.img"></video>
           <!--canvas截取流-->
-          <canvas ref="canvas" width="500px" height="450px" v-show="form.img"></canvas>
+          <canvas ref="canvas" width="500px" height="500px" id="canvas" v-show="form.img"></canvas>
+          <canvas width="180px" height="180px" id="canvas1"
+            style="position: absolute;top: 48vh;left: calc(50vw - 90px);"></canvas>
         </div>
       </div>
     </dv-border-box1>
@@ -49,12 +50,11 @@
       <el-tag type="danger" class="noVipTag">体验已过期，请联系管理员。</el-tag>
     </h3>
   </div>
-  <div calss="yanmo"><canvas id="canvas"></canvas></div>
 </template>
 
 <script>
 import _ from 'lodash'
-import Qrcode from 'qrcode'
+import QRCode from 'qrcode'
 import useConfigStore from './stores/config.js'
 import dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -72,8 +72,7 @@ export default {
       videoEL: null,
       isVip: false,
       pngObj: {},
-      pngDialog: false,
+      qrString: "",
-      qrcodeData: "",
     }
   },
   methods: {
@@ -100,7 +99,7 @@ export default {
               video: {
                 sourceId: device.deviceId, // 把对应的 摄像头ID 放到这里
                 width: 500,
-                height: 450
+                height: 480
                 //如果拍照不清晰，考虑加入以下参数，但考虑下摄像头的高度和画布的高度
                 // width:{min: 1000, ideal: 1000, max: 3264 },
                 // height:{min: 1080, ideal: 1080, max: 2488}
@@ -113,16 +112,24 @@ export default {
               this.$refs['videoEL'].play()
             })
             .catch((error) => {
-              console.error('摄像头开启失败，请检查摄像头是否可用！')
+              ElMessage.error('摄像头开启失败，请检查摄像头是否可用！')
             })
         })
     },
     async takePhoto() {
-      let ctx = this.$refs['canvas'].getContext('2d')
+      // // 清除二维码
+      // let ctx1 = document.getElementById('canvas1').getContext('2d')
+      // ctx1.width=500
+      // ctx1.height=500
+      // ctx.clearRect(0, 0, 500, 500);
+
+      let ctx = document.getElementById('canvas').getContext('2d')
+      ctx.width = 500
+      ctx.height = 480
       // 把当前视频帧内容渲染到canvas上
-      ctx.drawImage(this.$refs['videoEL'], 0, 0)
+      ctx.drawImage(this.$refs['videoEL'], 0, 0, 500, 480)
       // 转base64格式、图片格式转换、图片质量压缩
-      this.form.img = this.$refs['canvas'].toDataURL('image/png', 0.2) // 由字节转换为KB 判断大小
+      this.form.img = this.$refs['canvas'].toDataURL('image/png', 0.5) // 由字节转换为KB 判断大小
       if (!this.$refs['videoEL'].srcObject) return
       let stream = this.$refs['videoEL'].srcObject
       let tracks = stream.getTracks()
@@ -133,6 +140,11 @@ export default {
     },
     async updateSeach() {
       this.pngObj = {}
+      ElMessage({
+        type: 'success',
+        duration: 5000,
+        message: '图片转化成功请5秒后，扫描二维码获取',
+      })
       window.electron.ipcRenderer.send('sendMessage', {
         name: this.form.name,
         age: this.form.age,
@@ -150,40 +162,46 @@ export default {
             type: 'error'
           })
         } else {
-          ElMessage({
+          let ctx = document.getElementById('canvas').getContext('2d')
-            type: 'info',
+          ctx.width = 500
-            duration: duration - 500,
+          ctx.height = 500
-            customClass: 'yanmo',
+          ctx.clearRect(0, 0, 500, 500);
-            icon: 'check',
+          let baseurl = "http://123.249.20.25:9019"
-            message: '恭喜你，答对了！',
+          // let baseurl = "http://127.0.0.1:7001"
-            appendTo: document.getElementById(`yanmo${perIndex}`)
+          that.qrString = `${baseurl}/?id=${_.get(that.pngObj, ["list", "_id"])}`
-          })
+          let canvas = document.getElementById('canvas1')
-          ElMessage({ message: '上传成功', type: 'success' })
+          console.log(777, that.pngObj, baseurl)
-          console.log(999, that.pngObj.list)
+          QRCode.toCanvas(canvas, that.qrString, function (error) {
-          let canvas = document.getElementById('canvas')
+            if (error) {
-          let baseurl="http://127.0.0.1:7001"
+              ElMessage({
-          let res = Qrcode.toCanvas(canvas, `${baseurl}/?id=${_.get(this.pngObj, ["list", "_id"])}`, function (error) {
+                type: 'error',
-            if (error) console.error(error)
+                duration: 5000,
-            console.log('success!');
+                message: error,
+              })
+            } else {
+              ElMessage({
+                type: 'success',
+                duration: 15000,
+                message: '15秒后二维码消失',
+              })
+            }
           })
+          // 设置5秒后关闭弹窗
+          setTimeout(() => {
+            that.qrString = ""
+            let ctx = canvas.getContext("2d")
+            ctx.width = 500
+            ctx.height = 500
+            ctx.clearRect(0, 0, 500, 500);
+          }, 15000);
         }
       })
     },
-    searchQrcode() {
-      this.pngDialog = true
-    },
   },
   async mounted() {
+    console.log(8877, QRCode)
     this.watchPng()
-    // let canvas = document.getElementById('canvas')
+    let fiveDay = dayjs('2024-05-21T00:00:00').valueOf()
-    // let baseurl="http://127.0.0.1:7001"
-    // Qrcode.toCanvas(canvas, `${baseurl}/?id=${_.get(this.pngObj, ["list", "_id"])}`, function (error) {
-    //   if (error) console.error(error)
-    //   console.log('success!');
-    // })
-    // let canvas11 = document.getElementById('canvas')
-    // console.log(874, canvas11)
-    let fiveDay = dayjs('2024-05-18T00:00:00').valueOf()
     if (!this.isVip) {
       if (dayjs().valueOf() > fiveDay) {
         this.isVip = false
@@ -206,17 +224,27 @@ export default {
 }
 
 .topinput {
-  height: calc(40vh - 62px);
+  height: calc(30vh - 62px);
   text-align: -webkit-center;
 }
 
 .topinputinfo {
-  height: 45px;
+  height: 48px;
   width: 360px;
   margin: 12px 0;
 }
 
 .botimg {
-  height: 60vh;
+  height: 70vh;
+}
+
+.yanmo {
+  position: absolute;
+  height: 0vh;
+  width: 0vw;
+  overflow: visible;
+  top: 20vh !important;
+  background-color: #83838399;
+  border: none;
 }
 </style>

front/src/renderer/src/assets/css/base.css

@@ -11,17 +11,3 @@ body {
   line-height: 45px;
 }
 
-.yanmo {
-  position: absolute;
-  height: 0vh;
-  width: 0vw;
-  overflow: visible;
-  top: 20vh !important;
-  background-color: #83838399;
-  border: none;
-}
-
-#canvas {
-  height: 400px;
-  width: 400px;
-}