look.vue
3.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<el-dialog
class="manage-dialog dev-detail-dialog"
:visible.sync="detailVisible"
:close-on-click-modal="false"
@close="detailDialogClose">
<div slot="title" class="detail-title-wrapper">
<span>{{$t('button.look')}}</span>
</div>
<div class="img-content">
<img v-if="url" alt="" :src="url" class="code-img"/>
<a v-if="texturl" class="texturl" :href="hskMgrUrl" target="_blank">{{ texturl }}</a>
</div>
<div slot="footer" class="dialog-footer">
<el-button v-if="texturl" @click="unbindFn" class="dialog-btn">{{$t('button.ubind')}}</el-button>
<el-button @click="detailVisible = false" class="dialog-btn">{{$t('dialog.close')}}</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
detailVisible: false,
url: null,
texturl: null,
sn: null,
hskMgrUrl: null,
}
},
methods: {
dialogInit(sn) {
this.sn = sn.hskSn
if (sn.hskSn && (!sn.hskMgrUrl || sn.hskMgrUrl === '')) {
this.getImgUrl(sn.serialnum)
}
if (sn.hskMgrUrl) {
this.texturl = (sn.hskMgrUrl.split("?")[1].split("&")[0].substring(8, 20)) + '已登陆';
this.hskMgrUrl = sn.hskMgrUrl
}
this.detailVisible = true;
},
getImgUrl(sn) {
this.$api.base.getCode('qrcode', sn).then(res => {
if (res.status === 200) {
this.url = res.data.qrcodeimg || null
} else {
this.url = null
}
})
},
unbindFn() {
this.$api.base.getCode('unbinding', this.sn).then(res => {
if (res.status === 200) {
this.detailVisible = false;
this.$emit('getTableData')
}
})
},
detailDialogClose() {
this.url = null
this.texturl = null
this.sn = null
},
},
}
</script>
<style scoped>
.detail-title-wrapper {
color: #fff;
font-size: 18px;
}
.detail-title+.detail-title {
padding-left: 20px;
}
.child-order-column {
position: relative;
z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
font-size: 10px;
box-sizing: border-box;
background: #fff;
transition: .15s ease-out;
border-radius: 50%;
border: 1px solid;
border-color: inherit;
}
.child-order__icon-inner {
display: inline-block;
user-select: none;
text-align: center;
font-weight: normal;
line-height: 1;
color: #888;
}
.manage-input-box .el-input {
width: 150px;
}
.manage-input-box .el-select {
width: 110px;
}
.img-content {
display: flex;
justify-content: center;
}
.code-img {
width: 150px;
height: 150px;
}
.texturl {
padding: 20px 0;
}
</style>