hzd/visitor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
hezhidong
2024-11-05 17:43:01 +08:00
parent 2a10e37c10
commit 4e1140419a
97 changed files with 8700 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Invitation copy.vue
+310
View File
@@ -0,0 +1,310 @@
<template>
<div class='invitation-model-fixed' id="canvas">
<div class="invitation-model">
<img class="english-title" src="../assets/yinwen.png" alt="">
<div class="ewm-box">
<!-- <img :src=" 'data:image/png;base64,'+imgEncode" alt=""> -->
<img src="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" alt="">
<b class="ewm-box-one"></b>
<b class="ewm-box-two"></b>
<b class="ewm-box-three"></b>
<b class="ewm-box-four"></b>
</div>
<div class="tips">快来保存您的专属邀约二维码吧</div>
<button @click="onClickDown" class="save-button">保存图片</button>
<span @click="onClickA" :href="canvasUrl" download="下载">下载</span>
</div>
<!-- {{ raw }} -->
</div>
<Savesuccessmodel v-if="false" />
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { rulesForm, resetForm, rulesPhone } from '@/com/index'
import dd from 'dingtalk-jsapi'
import html2canvas from 'html2canvas'
import Savesuccessmodel from '@/components/save-success.vue'
import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
/* @data */
const router = useRouter()
const store = useStore()
const imgEncode = ref('')
const raw = ref('')
const canvasUrl = ref('')
/* @setup */
getWhiteCode().then(res =>{
console.log(res)
imgEncode.value = res.imgEncode
// raw.value = window.atob(res.imgEncode);
})
/* @method */
const onClickDown1 = () =>{
// const byteCharacters = atob(imgEncode.value);
// const byteNumbers = new Array(byteCharacters.length);
// for (let i = 0; i < byteCharacters.length; i++) {
// byteNumbers[i] = byteCharacters.charCodeAt(i);
// }
// const byteArray = new Uint8Array(byteNumbers);
// const blob = new Blob([byteArray], { type: 'image/jpeg' });
// raw.value = byteArray
// // 创建可下载链接
// const url = URL.createObjectURL(blob);
// // 创建隐藏的<a>标签
// const link = document.createElement('a');
// link.href = url;
// link.download = 'fileName';
// // 模拟点击隐藏的<a>标签来触发下载
// link.click();
// // 清理URL对象
// URL.revokeObjectURL(url);
}
const onClickA =() =>{
const canvas = document.getElementById('canvas')
console.log(canvas.offsetHeight)
console.log(canvas.scrollHeight)
// alert('asjfjafj1')
// // window.location.href = canvasUrl.value
// dd.previewImage({
// urls: [
// canvasUrl.value,
// ],
// current: 1,
// success: () => {},
// fail: () => {},
// complete: () => {},
// });
// dd.openLink({
// url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
// success: () => {},
// fail: () => {},
// complete: () => {},
// });
// dd.saveImage({
// url: 'https://img.alicdn.com/tps/TB1sXGYIFXXXXc5XpXXXXXXXXXX.jpg',
// success: () => {},
// fail: () => {},
// complete: () => {},
// });
}
const onClickDown = () =>{
let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
autoPicture('canvas')
}
const autoPicture = async (el, options) => {
// let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
const id = document.getElementById(el)
const canvas = await html2canvas(id, {
scale: 1, //缩放比例,默认为1
allowTaint: false, //是否允许跨域图像污染画布
useCORS: true, //是否尝试使用CORS从服务器加载图像
width: id.offsetWidth, //画布的宽度
height: id.offsetHeight, //画布的高度
backgroundColor: null //画布的背景色，默认为透明
})
// canvas.toDataURL('image/png')
console.log(canvas.toDataURL('image/png'))
canvasUrl.value = canvas.toDataURL('image/png')
}
</script>
<style lang='scss' scoped>
.invitation-model-fixed{
position: fixed;
width: 100%;
height: 100%;
background: rgba(60,60,67,0.6);
.invitation-model{
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 7.2267rem /* 542/75 */;
height: 9.3067rem /* 698/75 */;
background: #FFFFFF;
border-radius: .5333rem /* 40/75 */.5333rem /* 40/75 */ .5333rem /* 40/75 */ .5333rem /* 40/75 */;
// overflow: hidden;
opacity: 1;
background: url('../assets/yaoqingbeijing.png') left top/100% 100% no-repeat;
.english-title{
margin: 1.1733rem /* 88/75 */ auto 0;
width: 4.9867rem /* 374/75 */;
height: .6133rem /* 46/75 */;
}
.ewm-box{
position: relative;
border-radius: .1333rem /* 10/75 */;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: 4.64rem /* 348/75 */;
height: 4.64rem /* 348/75 */;
margin: .5067rem /* 38/75 */ auto 0;
display: flex;
justify-content: center;
align-items: center;
img{
width: 4rem /* 300/75 */;
height: 4rem;
}
}
@mixin border-basics {
position: absolute;
width: 1.1733rem /* 88/75 */;
height: 1.1733rem /* 88/75 */;
// border-radius: .1333rem /* 10/75 */;
opacity: 1;
border: .1333rem /* 10/75 */ solid #30BF78;
}
.ewm-box-one::after{
content: '';
position: absolute;
left: 0;
top: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: .1333rem /* 10/75 */;
height: 1.3067rem /* 98/75 */;
background-color: #30BF78;
border-radius: .2667rem /* 20/75 */ 0 .1333rem /* 10/75 */ .1333rem /* 10/75 */;
}
.ewm-box-one::before{
content: '';
position: absolute;
left: 0;
top: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: 1.3067rem /* 98/75 */;
height: .1333rem /* 10/75 */;
background-color: #30BF78;
border-radius: .2667rem /* 20/75 */ .1333rem /* 10/75 */ .1333rem /* 10/75 */ 0 ;
}
.ewm-box-two::after{
content: '';
position: absolute;
right: 0;
top: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: .1333rem /* 10/75 */;
height: 1.3067rem /* 98/75 */;
background-color: #30BF78;
border-radius: 0 .2667rem /* 20/75 */ .1333rem /* 10/75 */ .1333rem /* 10/75 */;
}
.ewm-box-two::before{
content: '';
position: absolute;
right: 0;
top: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: 1.3067rem /* 98/75 */;
height: .1333rem /* 10/75 */;
background-color: #30BF78;
border-radius: .1333rem /* 10/75 */ .2667rem /* 20/75 */ 0 .1333rem /* 10/75 */ ;
}
// .ewm-box-three{
// @include border-basics;
// left: 0;
// bottom: 0;
// border-top: none;
// border-right: none;
// border-radius: 0 0 0 .1333rem /* 10/75 */ ;
// }
.ewm-box-three::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: .1333rem /* 10/75 */;
height: 1.3067rem /* 98/75 */;
background-color: #30BF78;
border-radius: .1333rem /* 10/75 */ .1333rem /* 10/75 */ 0 .2667rem /* 20/75 */ ;
}
.ewm-box-three::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: 1.3067rem /* 98/75 */;
height: .1333rem /* 10/75 */;
background-color: #30BF78;
border-radius: 0 .1333rem /* 10/75 */ .1333rem /* 10/75 */ .2667rem /* 20/75 */ ;
}
// .ewm-box-four{
// @include border-basics;
// bottom: 0;
// right: 0;
// border-top: none;
// border-left: none;
// border-radius: 0 0 .1333rem /* 10/75 */ 0;
// }
.ewm-box-four::after{
content: '';
position: absolute;
right: 0;
bottom: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: .1333rem /* 10/75 */;
height: 1.3067rem /* 98/75 */;
background-color: #30BF78;
border-radius: .1333rem /* 10/75 */ .1333rem /* 10/75 */ .2667rem /* 20/75 */ 0 ;
}
.ewm-box-four::before{
content: '';
position: absolute;
right: 0;
bottom: 0;
// border: .1333rem /* 10/75 */ solid #30BF78;
width: 1.3067rem /* 98/75 */;
height: .1333rem /* 10/75 */;
background-color: #30BF78;
border-radius: .1333rem /* 10/75 */ 0 .2667rem /* 20/75 */ .1333rem /* 10/75 */ ;
}
.tips{
font-size: $size30;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
color: #999999;
margin-top: .72rem /* 54/75 */;
text-align: center;
line-height: .6133rem /* 46/75 */;
}
.save-button{
position: absolute;
bottom: 0;
left: 50%;
z-index: 10;
transform: translateY(50% ) translateX(-50% );
width: 3.76rem /* 282/75 */;
height: 1.1467rem /* 86/75 */;
line-height: 1.1467rem /* 86/75 */;
background: #30BF78;
border-radius: 1.3333rem /* 100/75 */;
opacity: 1;
font-size: $lg-size;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
text-align: center;
border: none;
outline: none;
}
}
}
</style>