310 lines
9.4 KiB
Vue
310 lines
9.4 KiB
Vue
<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> |