<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";
|
|
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})
|
const url = this.userInfo.url;
|
// Axiospromote.localuser({}).then((res)=>{
|
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>
|
