first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 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;