123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/promote/ShareQRCode.vue

@@ -4,36 +4,46 @@
    <div class="qr-padding">
      <div class="qr-flex"></div>
      <div class="qr-img">
        <canvas id="QRcodeCanvas" v-show="!imgshow" style="width: 100%;height: 100%;"></canvas>
        <canvas
          id="QRcodeCanvas"
          v-show="!imgshow"
          style="width: 100%; height: 100%"
        ></canvas>
        <img :src="img" alt="" v-show="imgshow" class="QRcodeImg" />
<!--        <img :src="localuser.usercode_qr" alt="" class="QRcodeImg"/>-->
<!--       -->

        <!--        <img :src="localuser.usercode_qr" alt="" class="QRcodeImg"/>-->
        <!--       -->
      </div>
      <div class="qr-flex"></div>
    </div>
    <div class="qr-bottom">
      <div class="qr-bottom-flex"></div>
      <router-link to="/SharePoster">
      <div class="qr-bottom1">{{ $t('查看海报') }}</div></router-link>
       <div class="qr-bottom2" @click="download('#QRcodeCanvas')">{{ $t('保存二维码') }}</div>
<!--      <span class="qr-bottom2" @click="download('#QRcodeCanvas">{{$t('保存二维码')}}</span>-->
        <div class="qr-bottom1">{{ $t("查看海报") }}</div></router-link
      >
      <div class="qr-bottom2" @click="download('#QRcodeCanvas')">
        {{ $t("保存二维码") }}
      </div>
      <!--      <span class="qr-bottom2" @click="download('#QRcodeCanvas">{{$t('保存二维码')}}</span>-->

      <div class="qr-bottom-flex"></div>
    </div>
    <div class="share-href-title textColor">
      {{ $t('链接分享') }}
      {{ $t("链接分享") }}
    </div>
    <div class="share-href">
      <div class="share-href-text">{{ localuser.url }}</div>
      <div class="share-href-text2" @click="share(localuser.url);">{{ $t('复制') }}</div>
      <div class="share-href-text2" @click="share(localuser.url)">
        {{ $t("复制") }}
      </div>
    </div>
    <div class="share-href-title textColor">
      {{ $t('您的邀请码') }}
      {{ $t("您的邀请码") }}
    </div>
    <div class="share-href">
      <div class="share-href-text">{{ localuser.usercode }}</div>
      <div class="share-href-text2" @click="share(localuser.usercode);">{{ $t('复制') }}</div>
      <div class="share-href-text2" @click="share(localuser.usercode)">
        {{ $t("复制") }}
      </div>
    </div>
    <div class="qr-title"></div>
  </div>
@@ -45,20 +55,19 @@
export default {
  data() {
    return {
      img: '',
      img: "",
      imgshow: false,
      localuser: {}
    }
      localuser: {},
    };
  },
  components: {
    assetsHead
    assetsHead,
  },
  mounted() {
    this.init()

    this.init();
  },
  activated(){
    this.init()
  activated() {
    this.init();
  },
  methods: {
    // download(imgSrc, fileName) {
@@ -71,80 +80,78 @@
    //   document.body.removeChild(alink);
    //   window.URL.revokeObjectURL(alink.href);
    // },
    init(){
      this.localuser_get()
    init() {
      this.localuser_get();
    },

//数据处理
    handleData(val){
      this.message = this.message + ' ' + val
    //数据处理
    handleData(val) {
      this.message = this.message + " " + val;
    },
    // 点击事件
    share(val) {
      this.$copyText(val).then(message => {
        this.$toast(this.$t('复制成功'));
      }).catch(err => {

      })
      this.$copyText(val)
        .then((message) => {
          this.$toast(this.$t("复制成功"));
        })
        .catch((err) => {});
      // navigator.clipboard.writeText(val)
      //     .then(() => {
      //       alert(this.$t('已复制'))
      //     })
    },
    localuser_get(){
      const t = this
      Axiospromote.localuser({}).then((res)=>{
        console.log(res)
        t.localuser = res.data
        t.getQRCode()

      })
    localuser_get() {
      const t = this;
      Axiospromote.localuser({}).then((res) => {
        console.log(res);
        t.localuser = res.data;
        t.getQRCode();
      });
    },
    onClickLeft() {
      this.$router.push('/promote')
      this.$router.push("/promote");
    },
    download(selector) {
      // 通过 API 获取目标 canvas 元素
      const canvas = document.querySelector(selector);

      // 创建一个 a 标签，并设置 href 和 download 属性
      const el = document.createElement('a');
      const el = document.createElement("a");
      // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
      el.href = canvas.toDataURL();
      el.download = 'qrcode';
      el.download = "qrcode";

      // 创建一个点击事件并对 a 标签进行触发
      const event = new MouseEvent('click');
      const event = new MouseEvent("click");
      el.dispatchEvent(event);
    },
    getQRCode() {
      let opts = {
        errorCorrectionLevel: "H",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 4,//二维码留白边距
        width: 200,//宽
        height: 200,//高
        text: this.localuser.url,//二维码内容
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 4, //二维码留白边距
        width: 200, //宽
        height: 200, //高
        text: this.localuser.url, //二维码内容
        color: {
          dark: "#333333",//前景色
          light: "#fff"//背景色
        }
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      this.QRCodeMsg = "qr"; //生成的二维码为URL地址js
      let msg = document.getElementById("QRcodeCanvas");    // 将获取到的数据（val）画到msg（canvas）上
      let msg = document.getElementById("QRcodeCanvas"); // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.QRCodeMsg, opts, function (error) {
        console.log(error)
      });    // 将canvas转成图片格式，可以长按保存
      this.img = msg.toDataURL('image/png');
        console.log(error);
      }); // 将canvas转成图片格式，可以长按保存
      this.img = msg.toDataURL("image/png");
      this.imgshow = true;
    },
  }
}
  },
};
</script>
<style lang="scss" scoped>

.ShareQRCode{
.ShareQRCode {
  width: 100%;
  box-sizing: border-box;
}
@@ -157,7 +164,7 @@
  }

  .qr-img {
 /*   width: 320px;
    /*   width: 320px;
    height: 320px;*/
    //background: #1D91FF;
  }
@@ -174,7 +181,7 @@
  .qr-bottom1 {
    width: 288px;
    height: 88px;
    background: #EAECEF;
    background: #eaecef;
    line-height: 88px;
    border-radius: 8px;
    margin-right: 17px;
@@ -189,7 +196,7 @@
    width: 288px;
    height: 88px;
    line-height: 88px;
    background: #1D91FF;
    background: #1d91ff;
    border-radius: 4px;
    margin-left: 17px;
    font-style: normal;
@@ -211,7 +218,7 @@
  display: flex;
  margin-left: 35px;
  margin-right: 35px;
  background: #F5F5F5;
  background: #f5f5f5;
  height: 96px;
  border-radius: 8px;
}
@@ -234,7 +241,7 @@
  font-weight: 400;
  font-size: 26px;
  line-height: 90px;
  color: #1D91FF;
  color: #1d91ff;
  margin-right: 20px;
}

@@ -246,7 +253,7 @@

  /* 灰 */

  color: #868D9A;
  color: #868d9a;
  text-align: center;
  margin-top: 44px;
}