lichong
/
h5_api_v1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

master
lc18518571399 11 months ago
parent
c0939d0a6b
commit
793c5f6d65
3 changed files with 62 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      front/src/renderer/index.html
  2. 73
      front/src/renderer/src/App.vue
  3. BIN
      front/src/renderer/src/assets/imgs/bg.jpg

2
front/src/renderer/index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>桌面应用</title> <title>时光机</title>
<!-- <link rel="icon" href="/icon/icon.jpg" /> --> <!-- <link rel="icon" href="/icon/icon.jpg" /> -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta <meta

73
front/src/renderer/src/App.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<div class="appClass" v-if="isVip"> <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> <span style="font-size:2em;color: aquamarine;">米微婚礼</span>
<div class="topinput"> <div class="topinput">
<dv-border-box8 :dur="5" class="topinputinfo"> <dv-border-box8 :dur="5" class="topinputinfo">
<div dv-bg> <div dv-bg>
<span>姓名：</span> <span style="color: #fff;">姓名：</span>
<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> </span>
</div> </div>
</dv-border-box8> </dv-border-box8>
<dv-border-box8 :reverse="true" class="topinputinfo"> <dv-border-box8 :reverse="true" class="topinputinfo">
<div dv-bg> <div dv-bg>
<span>年龄：</span> <span style="color: #fff;">年龄：</span>
<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> <template #decrease-icon>
<el-icon> <el-icon>
<ArrowDown /> <ArrowDown />
@ -30,9 +30,9 @@
</span> </span>
</div> </div>
</dv-border-box8> </dv-border-box8>
<el-button type="primary" @click="takePhotoUpload">打开视频</el-button> <el-button type="primary" @click="takePhotoUpload" :disabled="shexiangotuBtn">打开摄像头</el-button>
<el-button type="primary" @click="takePhoto">拍照</el-button> <el-button type="primary" @click="takePhoto" :disabled="paizhaoBtn">拍照</el-button>
<el-button type="success" @click="updateSeach">上传查看</el-button> <el-button type="success" @click="updateSeach" :disabled="uploadBtn">上传查看</el-button>
</div> </div>
<div class="botimg"> <div class="botimg">
<div id="camera"> <div id="camera">
@ -70,9 +70,12 @@ export default {
img: '' img: ''
}, },
videoEL: null, videoEL: null,
isVip: false, isVip: true,
pngObj: {}, pngObj: {},
qrString: "", qrString: "",
shexiangotuBtn: false,
paizhaoBtn: true,
uploadBtn: true,
} }
}, },
methods: { methods: {
@ -108,8 +111,11 @@ export default {
.then((success) => { .then((success) => {
// 摄像头开启成功 // 摄像头开启成功
this.$refs['videoEL'].srcObject = success this.$refs['videoEL'].srcObject = success
this.paizhaoBtn = false
this.uploadBtn = true
// 实时拍照效果 // 实时拍照效果
this.$refs['videoEL'].play() this.$refs['videoEL'].play()
}) })
.catch((error) => { .catch((error) => {
ElMessage.error('摄像头开启失败，请检查摄像头是否可用！') ElMessage.error('摄像头开启失败，请检查摄像头是否可用！')
@ -137,19 +143,25 @@ export default {
track.stop() track.stop()
}) })
this.$refs['videoEL'].srcObject = null this.$refs['videoEL'].srcObject = null
this.shexiangotuBtn = false
this.paizhaoBtn = true
this.uploadBtn = false
}, },
async updateSeach() { async updateSeach() {
this.pngObj = {} this.pngObj = {}
ElMessage({ ElMessage({
type: 'success', type: 'success',
duration: 5000, duration: 5000,
message: '图片转化成功请5秒后，扫描二维码获取', message: '图片转化成功请10秒后，扫描二维码获取',
}) })
window.electron.ipcRenderer.send('sendMessage', { window.electron.ipcRenderer.send('sendMessage', {
name: this.form.name, name: this.form.name,
age: this.form.age, age: this.form.age,
img: this.form.img img: this.form.img
}) })
this.shexiangotuBtn = false
this.paizhaoBtn = true
this.uploadBtn = true
}, },
watchPng() { watchPng() {
let that = this let that = this
@ -182,7 +194,7 @@ export default {
ElMessage({ ElMessage({
type: 'success', type: 'success',
duration: 15000, duration: 15000,
message: '15秒后二维码消失', message: '10分钟后二维码消失',
}) })
} }
}) })
@ -193,14 +205,46 @@ export default {
ctx.width = 500 ctx.width = 500
ctx.height = 500 ctx.height = 500
ctx.clearRect(0, 0, 500, 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() { async mounted() {
console.log(8877, QRCode) console.log(8877, QRCode)
this.watchPng() this.watchPng()
// this.testFun()
let fiveDay = dayjs('2024-05-21T00:00:00').valueOf() let fiveDay = dayjs('2024-05-21T00:00:00').valueOf()
if (!this.isVip) { if (!this.isVip) {
if (dayjs().valueOf() > fiveDay) { if (dayjs().valueOf() > fiveDay) {
@ -223,6 +267,11 @@ export default {
background-color: #00b8ca; background-color: #00b8ca;
} }
.maincss {
background: url("./assets/imgs/bg.jpg");
background-size: 100% 100%;
}
.topinput { .topinput {
height: calc(30vh - 62px); height: calc(30vh - 62px);
text-align: -webkit-center; text-align: -webkit-center;

BIN
front/src/renderer/src/assets/imgs/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

Write Preview
Loading…
Cancel
Save