
<ul style="position: relative">
<li
class="refresh_code d-flex align-center justify-center"
:style="{ width: `${svgWidth}px`, height: `${svgHeight}px` }"
v-if="needRefresh"
>
<div class="text-center">
<v-icon size="60" color="#F5A623">mdi-alert-circle</v-icon>
<p class="text-center text-button mt-2">
二维码已过期
<span
@click="toRefresh"
class="blue--text"
style="cursor: pointer"
>刷新</span
>
</p>
</div>
</li>
<li id="wechat_qrcode" ref="wechat_qrcode"></li>
</ul>
data() {
return {
validTime: 45,
refreshTimer: null,
needRefresh: false,
svgWidth: "",
svgHeight: "",
};
},
mounted() {
this.fetchclientqrcode();
this.isVaild();
},
methods: {
fetchclientqrcode() {
return this.$http
.get(`/api/qrcode`)
.delegateTo(api_request)
.then((res) => {
this.$nextTick(() => {
this.$refs.wechat_qrcode.innerHTML = res.qrcode;
const svg = document.getElementsByClassName("pyqrcode")[0];
const svgWidth = svg.getAttribute("width");
const svgHeight = svg.getAttribute("height");
this.svgWidth = svgWidth;
this.svgHeight = svgHeight;
});
})
.catch(({ code, message }) => {
throw `获取数据失败:${this.$t("api." + code)}, 额外信息: ${this.$t(
"api." + typeof message === "string"
? message
: JSON.stringify(message)
)}`;
})
.delegateTo(this.$snackbar.delegateError);
},
toRefresh() {
this.needRefresh = false;
this.fetchclientqrcode();
this.isVaild();
},
isVaild() {
this.refreshTimer = setInterval(() => {
if (this.validTime > 0) {
this.validTime = this.validTime - 1;
} else {
clearInterval(this.refreshTimer);
this.needRefresh = true;
this.validTime = 45;
}
}, 1000);
},
}