erp-el-element/Dialog/xyqualitydialog.vue

149 lines
3.6 KiB
Vue
Raw Normal View History

2024-05-07 11:30:13 +08:00
<template>
<div class="xylog">
<el-dialog
:title="
xylogtype == '0'
? '闲鱼质检报告'
: xylogtype == '2'
? '质检报告'
: '商品详情'
"
:visible.sync="xylogdialogVisible"
width="30%"
:before-close="handleClose"
>
<i
class="el-icon-document-copy"
style="cursor: pointer; color: #409eff; margin-right: 5px"
title="点击复制"
@click="copyLink($event, '0')"
>复制链接</i
>
<el-button type="text" @click="qrcode">查看二维码</el-button>
<iframe
style="width: 100%; "
:height="height"
:src="src"
allowfullscreen="allowfullscreen"
frameborder="0"
data-id="1"
></iframe>
<!-- <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="close"> </el-button>
</span> -->
<el-dialog
width="30%"
title="查看二维码"
:visible.sync="innerVisible"
append-to-body
:before-close="qrclose"
>
<div class="box">
<div ref="qrCodeUrl" class="qrcode" />
</div>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
2024-05-07 11:51:58 +08:00
name: "erpXylog",
2024-05-07 11:30:13 +08:00
data() {
return {
src: ``,
innerVisible: false,
};
},
props: {
xylogdialogVisible: {
type: Boolean,
default: () => {
return false;
},
},
xylogid: {
default: () => {
return "";
},
},
xylogtype: {
default: () => {
return "";
},
},
},
computed: {
height() {
return document.documentElement.clientHeight - 400;
},
},
watch: {
xylogid(newval) {
if (this.xylogtype == "0") {
this.src = `https://www.aiguoerp.com/qc.html?id=${newval}`;
} else if (this.xylogtype == "1") {
this.src = `https://h5.m.goofish.com/item?id=${newval}`;
} else if (this.xylogtype == "2") {
this.src = `https://www.aiguoerp.com/qc1.html?business_id=${newval}`;
}
// this.src = `https://vant-contrib.gitee.io/vant/v2/mobile.html#/zh-CN/`
},
},
methods: {
handleClose() {
this.close();
},
close() {
this.$emit("xylogdialog", false);
},
// 点击复制功能
copyLink(e) {
let text = this.src;
const clipboard = new this.clipboard(e.target, { text: () => text });
clipboard.on("success", (e) => {
this.$message({ type: "success", message: "复制成功" });
// 释放内存
clipboard.off("error");
clipboard.off("success");
clipboard.destroy();
});
clipboard.on("error", (e) => {
// 不支持复制
this.$message({ type: "waning", message: "该浏览器不支持自动复制" });
// 释放内存
clipboard.off("error");
clipboard.off("success");
clipboard.destroy();
});
clipboard.onClick(e);
},
qrcode() {
this.innerVisible = true;
console.log(this.src, "srcsrcsrcsrcsrc");
this.$nextTick(() => {
new QRCode(this.$refs.qrCodeUrl, {
text: this.src,
width: 120,
height: 110,
colorDark: "#333333", // 二维码颜色
colorLight: "#ffffff", // 二维码背景色
correctLevel: QRCode.CorrectLevel.L, // 容错率L/M/H
});
});
},
qrclose() {
this.innerVisible = false;
this.$refs.qrCodeUrl.innerHTML = "";
},
},
};
</script>
<style lang="scss" scoped>
.box {
display: flex;
justify-content: center;
}
</style>