<template>
|
<div>
|
<el-dialog
|
title="溯源码预览"
|
:modal-append-to-body="false"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
@close="close"
|
width="40%"
|
:visible.sync="visible"
|
center
|
>
|
<div class="dialog-code">
|
<div class="syms">
|
<div class="code">{{code}}</div>
|
<p class="detail">溯源信息：{{remark}}</p>
|
</div>
|
<div class="qrcode">
|
<img :src="qrcode" alt=""/>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { getSimpleInfo } from "@/api/traceability/traceability";
|
export default {
|
data() {
|
return {
|
code: null,
|
visible: false,
|
qrcode:'',
|
remark:''
|
};
|
},
|
computed: {
|
...mapGetters(["permission", "userInfo"]),
|
},
|
mounted() {},
|
methods: {
|
//初始化
|
init(row) {
|
this.code = row.code;
|
this.visible = true;
|
this.getTraceability(this.code);
|
},
|
//获取溯源信息
|
getTraceability(code){
|
getSimpleInfo(code).then((res)=>{
|
this.qrcode = res.data.data.qrcode;
|
this.remark = res.data.data.remark;
|
})
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.dialog-code{
|
width: 400px;
|
height: 100%;
|
border-radius: 20px;
|
border: 1px solid transparent;
|
box-shadow: 0 0 5px #ddd;
|
margin: 0 auto;
|
padding: 0 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.syms{
|
width: 200px;
|
display: flex;
|
flex-direction:column;
|
}
|
|
.syms .code{
|
font-size: 24px;
|
font-weight: 700;
|
height: 28px;
|
}
|
|
.syms .detail{
|
margin-top: 0px;
|
}
|
|
.qrcode{
|
width:100px;
|
}
|
|
.qrcode img{
|
width:100px;
|
image-rendering: -moz-crisp-edges; /* Firefox */
|
image-rendering: -o-crisp-edges; /* Opera */
|
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
|
image-rendering: crisp-edges;
|
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
}
|
</style>
|
