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/ShareQRCode.vue | 137 ++++++++++++++++++++++++---------------------
1 files changed, 72 insertions(+), 65 deletions(-)
diff --git a/src/page/promote/ShareQRCode.vue b/src/page/promote/ShareQRCode.vue
index b531249..b44b46f 100644
--- a/src/page/promote/ShareQRCode.vue
+++ b/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;
}
--
Gitblit v1.9.3