|
|
|
@ -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; |
|
|
|
|
