<template xmlns="http://www.w3.org/1999/html">
|
<div class="ShareQRCode">
|
<assets-head :title="$t('分享二维码')" />
|
<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>
|
<img :src="img" alt="" v-show="imgshow" 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-bottom-flex"></div>
|
</div>
|
<div class="share-href-title textColor">
|
{{ $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>
|
<div class="share-href-title textColor">
|
{{ $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>
|
<div class="qr-title"></div>
|
</div>
|
</template>
|
<script>
|
import QRCode from "qrcode";
|
import Axiospromote from "@/API/promote";
|
import assetsHead from "@/components/assets-head";
|
export default {
|
data() {
|
return {
|
img: "",
|
imgshow: false,
|
localuser: {},
|
};
|
},
|
components: {
|
assetsHead,
|
},
|
mounted() {
|
this.init();
|
},
|
activated() {
|
this.init();
|
},
|
methods: {
|
// download(imgSrc, fileName) {
|
// let alink = document.createElement("a");
|
// alink.style.display = "none";
|
// alink.href = imgSrc;
|
// alink.setAttribute("download", fileName);
|
// document.body.appendChild(alink);
|
// alink.click();
|
// document.body.removeChild(alink);
|
// window.URL.revokeObjectURL(alink.href);
|
// },
|
init() {
|
this.localuser_get();
|
},
|
|
//数据处理
|
handleData(val) {
|
this.message = this.message + " " + val;
|
},
|
// 点击事件
|
share(val) {
|
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();
|
});
|
},
|
onClickLeft() {
|
this.$router.push("/promote");
|
},
|
download(selector) {
|
// 通过 API 获取目标 canvas 元素
|
const canvas = document.querySelector(selector);
|
|
// 创建一个 a 标签，并设置 href 和 download 属性
|
const el = document.createElement("a");
|
// 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
|
el.href = canvas.toDataURL();
|
el.download = "qrcode";
|
|
// 创建一个点击事件并对 a 标签进行触发
|
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, //二维码内容
|
color: {
|
dark: "#333333", //前景色
|
light: "#fff", //背景色
|
},
|
};
|
this.QRCodeMsg = "qr"; //生成的二维码为URL地址js
|
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");
|
this.imgshow = true;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.ShareQRCode {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
.qr-padding {
|
margin-top: 66px;
|
display: flex;
|
|
.qr-flex {
|
flex: 1;
|
}
|
|
.qr-img {
|
/* width: 320px;
|
height: 320px;*/
|
//background: #1D91FF;
|
}
|
}
|
|
.qr-bottom {
|
margin-top: 67px;
|
display: flex;
|
|
.qr-bottom-flex {
|
flex: 1;
|
}
|
|
.qr-bottom1 {
|
width: 288px;
|
height: 88px;
|
background: #eaecef;
|
line-height: 88px;
|
border-radius: 8px;
|
margin-right: 17px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 31px;
|
text-align: center;
|
color: #333333;
|
}
|
|
.qr-bottom2 {
|
width: 288px;
|
height: 88px;
|
line-height: 88px;
|
background: #1d91ff;
|
border-radius: 4px;
|
margin-left: 17px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 30px;
|
text-align: center;
|
color: #fff;
|
}
|
}
|
|
.share-href-title {
|
margin: 85px 35px 40px;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 28px;
|
}
|
|
.share-href {
|
display: flex;
|
margin-left: 35px;
|
margin-right: 35px;
|
background: #f5f5f5;
|
height: 96px;
|
border-radius: 8px;
|
}
|
|
.share-href-text {
|
flex: 1;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 32px;
|
line-height: 90px;
|
margin-left: 20px;
|
color: #333333;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.share-href-text2 {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 26px;
|
line-height: 90px;
|
color: #1d91ff;
|
margin-right: 20px;
|
}
|
|
.qr-title {
|
font-style: normal;
|
font-weight: 400;
|
font-size: 14px;
|
line-height: 16px;
|
|
/* 灰 */
|
|
color: #868d9a;
|
text-align: center;
|
margin-top: 44px;
|
}
|
</style>
|
