From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/promote/SharePoster.vue | 202 ++++++++++++++++++++++++++++----------------------
1 files changed, 112 insertions(+), 90 deletions(-)
diff --git a/src/page/promote/SharePoster.vue b/src/page/promote/SharePoster.vue
index 53dbc7a..a6b1f37 100644
--- a/src/page/promote/SharePoster.vue
+++ b/src/page/promote/SharePoster.vue
@@ -1,12 +1,29 @@
<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">
+ <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">
+ <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>
@@ -18,95 +35,97 @@
</div>
<div class="carousel-3d-width-flex"></div>
</div> -->
- <div class="button" @click="download" v-if="readyCount === 3">{{$t('保存海报')}}</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 { Carousel3d, Slide } from "vue-carousel-3d";
+import { VueCanvasPoster } from "vue-canvas-poster";
import { mapGetters } from "vuex";
-import {Toast} from "vant";
+import { Toast } from "vant";
export default {
data() {
return {
- posterImg: '',//生成的海报
+ 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'),
+ 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 // 是否已经加载完全
- }
+ readyCount: 0, // 是否已经加载完全
+ };
},
components: {
assetsHead,
Carousel3d,
Slide,
- VueCanvasPoster
+ VueCanvasPoster,
},
computed: {
- ...mapGetters('user', ['userInfo'])
+ ...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')
+ 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)
+ this.localuser_get();
+ }, 500);
},
methods: {
- localuser_get(){
- // this.$toast.loading({ duration: 0})
- const url = this.userInfo.url
+ 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',
+ 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'
+ 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
- })
- }
+ },
+ ],
+ };
+ this.list.push({
+ painting,
+ posterImg: "",
+ ready: false,
+ });
+ }
// })
},
onClickLeft() {
- this.$router.go(-1)
+ this.$router.go(-1);
},
success(index, src) {
- this.list[index].posterImg = src
- this.readyCount++
+ this.list[index].posterImg = src;
+ this.readyCount++;
if (this.readyCount === 3) {
- this.$toast.clear()
+ this.$toast.clear();
// console.log('ready')
}
},
@@ -114,44 +133,45 @@
// 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)
- }
- })
+ 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
+ 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()
+ 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
- })
- })
+ forbidClick: true,
+ });
+ });
},
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
-
-* { touch-action: none; }
-.SharePoster{
+* {
+ touch-action: none;
+}
+.SharePoster {
width: 100%;
box-sizing: border-box;
}
@@ -161,7 +181,9 @@
background: #fff;
border: 1px solid #fff;
- .title { font-size: 22px; }
+ .title {
+ font-size: 22px;
+ }
}
}
@@ -177,13 +199,13 @@
// width: 600px;
// height: 100%;
// }
-.button{
+.button {
margin-top: 60px;
width: 300px;
height: 85px;
- background: #FCD436;
+ background: #fcd436;
border-radius: 4px;
- line-height: 85px ;
+ line-height: 85px;
text-align: center;
margin-right: auto;
margin-left: auto;
--
Gitblit v1.9.3