122 lines
3.0 KiB
Vue
122 lines
3.0 KiB
Vue
<template>
|
|
<div class="main" >
|
|
<div style="display: flex;align-items: center;">
|
|
<el-image style="width: 30px" :src="searchResults.icon">
|
|
<div slot="error" class="image-slot">
|
|
<img style="width: 28px" :src="require('@/assets/img/null.png')" alt="图标">
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
<div style="display: flex;margin-left: 10px;flex-direction: row;align-items: center;width: 200px">
|
|
<el-tooltip v-if="searchResults.name" class="item" effect="dark" :content="searchResults.name" placement="top">
|
|
<span style="font-size: 18px;font-weight: bold;overflow-x: scroll;width: 200px;white-space: nowrap;">
|
|
{{ searchResults.name }}
|
|
</span>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip effect="dark" placement="bottom">
|
|
<div slot="content">
|
|
<span v-if="searchResults.name" style="font-size:12px !important;">【{{ searchResults.name }}】手机二维码</span><br/><br/>
|
|
<div style="width:100% ;text-align: center"><img v-if="searchResults.id" style="width:150px"
|
|
:src="getResultsQR(searchResults.id)"></div>
|
|
</div>
|
|
<i style="margin-left: 10px" class="qr el-icon-s-grid"></i>
|
|
</el-tooltip>
|
|
|
|
<el-tooltip effect="dark" content="详情" placement="right" >
|
|
<i style="margin-left: 10px" class="card-icon el-icon-d-arrow-right" @click="goToDetail(searchResults.id)"></i>
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
name: "SearchResults",
|
|
props: {
|
|
searchResults: Object,
|
|
},
|
|
data() {
|
|
return {
|
|
imageCode:'',
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
getResultsQR(url_id) {
|
|
let _this = this;
|
|
if(url_id!==''){
|
|
axios({
|
|
method: 'post',
|
|
url: '/api/qrcode/qrc_return',
|
|
params: {
|
|
url_id: url_id,
|
|
}
|
|
}).then(function (res) {
|
|
if (res.data!==''){
|
|
_this.imageCode = "data:image/jpg;base64," + res.data;
|
|
}
|
|
}).catch((error) => {
|
|
// Vue.prototype.$notify.error({
|
|
// title: '错误',
|
|
// message: error === null ? '' : error,
|
|
// offset: 0
|
|
// });
|
|
})
|
|
}else{
|
|
return false
|
|
}
|
|
return this.imageCode;
|
|
},
|
|
goToDetail(id){
|
|
if(id){
|
|
let pathInfo = this.$router.resolve({
|
|
path: '/nav',
|
|
query: {
|
|
uid: id,
|
|
}
|
|
})
|
|
window.open(pathInfo.href, '_self');
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 270px;
|
|
background-color: var(--content-bg);
|
|
border-radius: 14px;
|
|
border: 1px solid var(--theme-bg-color);
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
transition: 0.3s ease;
|
|
margin-top: 10px;
|
|
}
|
|
.card-icon {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card-icon:hover {
|
|
color: #5ddcff;
|
|
}
|
|
|
|
.qr:hover {
|
|
color: #5ddcff;
|
|
}
|
|
</style> |