<template>
|
<div id="cryptos">
|
<div class="SharePoster">
|
<assets-head :title="$t('分享二维码')" />
|
<!-- <div id="example px-16" v-if="list.length" :style="{visibility: readyCount === 3 ? 'visiable' : 'hidden'}">
|
<carousel-3d :width="285" :height="505" :space="340" :onSlideChange="onSlideChange">
|
<slide v-for="(slide, index) in list" :index="index" :key="index">
|
<vue-canvas-poster :widthPixels="1000" :painting="slide.painting" @success="success(index, $event)"
|
@fail="fail"></vue-canvas-poster>
|
<img :src="slide.posterImg" style="width: auto; height: 507px;" v-if="slide.posterImg">
|
</slide>
|
</carousel-3d>
|
</div> -->
|
|
|
<!-- <div class="qr-img">
|
<canvas id="QRcodeCanvas" v-show="!imgshow" style="width: 100%;height: 100%;"></canvas>
|
<img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
|
</div> -->
|
<div id="example px-16 QRcodeCanvas" v-if="list.length"
|
:style="{ visibility: readyCount === 3 ? 'visiable' : 'hidden' }">
|
<carousel-3d ref="carousel" :onSlideChange="onSlideChange" :width="285" :height="505">
|
<slide v-for="(slide, index) in list" :index="index" :key="index">
|
<!-- <vue-canvas-poster :widthPixels="1000" :painting="slide.painting" @success="success(index, $event)"
|
@fail="fail"></vue-canvas-poster> -->
|
<div :id="`capture_${index}`">
|
<img :src="slide.posterImg" style="width: auto; height: 507px;" v-if="slide.posterImg">
|
<img :class="index == 2 ? 'bottom-90' : 'bottom-20'" :src="img" alt="" class="QRcodeImg" style="
|
width: 120px;height: 120px;
|
position:absolute;
|
right: 80px;
|
" />
|
</div>
|
|
</slide>
|
</carousel-3d>
|
</div>
|
|
|
|
<div class="button" @click="download" v-if="readyCount === 3" style="color:#273549">{{ $t('保存海报') }}</div>
|
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import assetsHead from "@/components/Transform/assets-head/index.vue";
|
// import { Carousel3d, Slide } from 'vue-carousel-3d';
|
// import { VueCanvasPoster } from 'vue-canvas-poster';
|
import { mapGetters } from "vuex";
|
import { Toast } from "vant";
|
|
// import Vue from 'vue';
|
import { Carousel3d, Slide } from 'vue3-carousel-3d';
|
import "vue3-carousel-3d/dist/index.css"
|
|
import QRCode from "qrcode";
|
import Axiospromote from "@/service/promote";
|
import html2canvas from "html2canvas";
|
|
|
export default {
|
data() {
|
return {
|
posterImg: '',//生成的海报
|
painting: {},
|
localuser: {},
|
background_url1: new URL('../../../assets/image/promote/sw_en_1.png', import.meta.url),
|
background_url2: new URL('../../../assets/image/promote/sw_en_2.png', import.meta.url),
|
background_url3: new URL('../../../assets/image/promote/sw_en_3.png', import.meta.url),
|
list: [],
|
active: 1,
|
readyCount: 0, // 是否已经加载完全
|
img: '',
|
imgshow: false,
|
}
|
},
|
components: {
|
assetsHead,
|
Carousel3d,
|
// Carousel3d,
|
Slide
|
// VueCanvasPoster
|
},
|
computed: {
|
...mapGetters('user', ['userInfo'])
|
},
|
async mounted() {
|
// console.log(this.$i18n.locale, this.userInfo)
|
if (this.$i18n.locale == 'CN') {
|
this.background_url1 = new URL('../../../assets/image/promote/sw_cn_1.png', import.meta.url)
|
this.background_url2 = new URL('../../../assets/image/promote/sw_cn_2.png', import.meta.url)
|
this.background_url3 = new URL('../../../assets/image/promote/sw_cn_3.png', import.meta.url)
|
}
|
setTimeout(() => {
|
this.localuser_get2()
|
}, 500)
|
|
},
|
methods: {
|
handImg(url) {
|
return new URL(url, import.meta.url).href
|
},
|
localuser_get2() {
|
const t = this
|
Axiospromote.localuser({}).then((res) => {
|
console.log(res)
|
t.localuser = res.data
|
t.getQRCode()
|
|
})
|
},
|
getQRCode() {
|
|
this.imgshow = true;
|
|
// 生成二维码
|
QRCode.toDataURL(this.localuser.url, (err, qrCodeData) => {
|
if (err) Toast.fail(err)
|
this.img = qrCodeData
|
this.readyCount = 3;
|
})
|
this.localuser_get();
|
},
|
localuser_get() {
|
// this.$toast.loading({ duration: 0})
|
const url = this.userInfo.url
|
console.log("this.userInfo.url = " + url)
|
for (let i = 0; i < 3; i++) {
|
const background = this['background_url' + (i + 1)]
|
var painting = {
|
width: '570px',
|
height: '1014px',
|
background,
|
views: [{
|
type: 'qrcode',
|
content: url,
|
css: {
|
bottom: i === 2 ? '380px' : '90px',
|
right: '215px',
|
color: '$black',
|
background: '#fff',
|
width: '150px',
|
height: '150px',
|
borderWidth: '10px',
|
borderColor: '#fff'
|
},
|
}],
|
}
|
this.list.push({
|
painting,
|
posterImg: background,
|
ready: false
|
})
|
}
|
// })
|
},
|
onClickLeft() {
|
this.$router.go(-1)
|
},
|
success(index, src) {
|
this.list[index].posterImg = src
|
this.readyCount++
|
if (this.readyCount === 3) {
|
this.$toast.clear()
|
// console.log('ready')
|
}
|
},
|
fail(err) {
|
// alert(err)
|
},
|
getUrlBase64(url) {
|
return new Promise(resolve => {
|
let canvas = document.createElement('canvas')
|
let ctx = canvas.getContext('2d')
|
let img = new Image()
|
img.crossOrigin = 'Anonymous' //允许跨域
|
img.src = url
|
img.onload = function () {
|
canvas.height = 420
|
canvas.width = 258
|
ctx.drawImage(img, 0, 0, 258, 420)
|
let dataURL = canvas.toDataURL('image/png')
|
canvas = null
|
resolve(dataURL)
|
}
|
})
|
},
|
onSlideChange(evt) {
|
this.active = evt
|
},
|
download() {
|
// this.getUrlBase64(this.list[this.active].posterImg).then(base64 => {
|
// let link = document.createElement('a')
|
// link.href = base64
|
// link.download = 'qrCode.png'
|
// link.click()
|
// // Toast.loading({
|
// // duration: 1000,
|
// // forbidClick: true
|
// // })
|
// })
|
this.screenshotHandler()
|
},
|
screenshotHandler() {
|
html2canvas(document.querySelector('.current')).then(function (canvas) {
|
let a = document.createElement("a");
|
// 将 canvas 方法返回一个包含图片展示的 data URI 。可以使用 type
|
// 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
|
a.href = canvas.toDataURL("image/png", 1.0);
|
//将 a 标签插入到页面中
|
document.body.appendChild(a);
|
//download 下载图片
|
//a.download = canvas.toDataURL("image/png", 1.0);
|
a.download = 'qrCode.png';
|
// 模拟a标签的点击事件
|
var e = document.createEvent("MouseEvents");
|
e.initEvent("click", true, true);
|
a.dispatchEvent(e);
|
// 这是向 body 追加自己截的图
|
// document.body.appendChild(canvas);
|
});
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import "./init.scss";
|
|
* {
|
touch-action: none;
|
}
|
|
#cryptos {
|
|
.SharePoster {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.carousel-3d-container {
|
.carousel-3d-slide {
|
// padding: 20px;
|
// background: #fff;
|
// border: 1px solid #fff;
|
|
.title {
|
font-size: 22px;
|
}
|
}
|
}
|
|
// .carousel-3d-width{
|
// margin-top: 75px;
|
// width: 100%;
|
// display: flex;
|
// }
|
// .carousel-3d-width-flex{
|
// flex: 1;
|
// }
|
// img {
|
// width: 600px;
|
// height: 100%;
|
// }
|
.button {
|
margin-top: 60px;
|
width: 300px;
|
height: 85px;
|
background: #FCD436;
|
border-radius: 4px;
|
line-height: 85px;
|
text-align: center;
|
margin-right: auto;
|
margin-left: auto;
|
font-size: 30px;
|
}
|
|
|
.bottom-20 {
|
bottom: 40px;
|
}
|
|
.bottom-90 {
|
bottom: 370px;
|
}
|
}
|
</style>
|
