<template>
|
<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="carousel-3d-width" v-if="false">
|
<div class="carousel-3d-width-flex"></div>
|
<div class="content_container">
|
<vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
|
<img :src="posterImg">
|
</div>
|
<div class="carousel-3d-width-flex"></div>
|
</div> -->
|
<div class="button" @click="download" v-if="readyCount === 3">{{$t('保存海报')}}</div>
|
|
|
</div>
|
</template>
|
<script>
|
import assetsHead from "@/components/assets-head";
|
// import Axiospromote from "@/API/promote";
|
import { Carousel3d, Slide } from 'vue-carousel-3d';
|
import { VueCanvasPoster } from 'vue-canvas-poster';
|
import { mapGetters } from "vuex";
|
import {Toast} from "vant";
|
import Axiospromote from "@/API/promote";
|
|
export default {
|
data() {
|
return {
|
posterImg: '',//生成的海报
|
painting: {},
|
localuser:{},
|
background_url1:require('../../assets/image/promote/sw_en_1.png'),
|
background_url2:require('../../assets/image/promote/sw_en_2.png'),
|
background_url3:require('../../assets/image/promote/sw_en_3.png'),
|
list: [],
|
active: 1,
|
readyCount: 0 // 是否已经加载完全
|
}
|
},
|
components: {
|
assetsHead,
|
Carousel3d,
|
Slide,
|
VueCanvasPoster
|
},
|
computed: {
|
...mapGetters('user', ['userInfo'])
|
},
|
mounted() {
|
// console.log(this.$i18n.locale, this.userInfo)
|
if (this.$i18n.locale == 'CN'){
|
this.background_url1 = require('../../assets/image/promote/sw_cn_1.png')
|
this.background_url2 = require('../../assets/image/promote/sw_cn_2.png')
|
this.background_url3 = require('../../assets/image/promote/sw_cn_3.png')
|
}
|
setTimeout(() => {
|
this.localuser_get()
|
}, 500)
|
},
|
methods: {
|
localuser_get(){
|
// this.$toast.loading({ duration: 0})
|
|
console.log(this.userInfo)
|
Axiospromote.localuser({}).then((res)=>{
|
const url = res.data.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: '#000',
|
background: '#fff',
|
width: '150px',
|
height: '150px',
|
borderWidth: '10px',
|
borderColor: '#fff'
|
},
|
}],
|
}
|
this.list.push({
|
painting,
|
posterImg: '',
|
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
|
})
|
})
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
|
* { touch-action: none; }
|
.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;
|
}
|
</style>
|
