149 lines
3.6 KiB
Vue
149 lines
3.6 KiB
Vue
<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 {
|
||
name: "erpXylog",
|
||
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> |