121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
||
<div class="list_box">
|
||
<div class="time_box">
|
||
<span>
|
||
<van-icon name="clock-o" />
|
||
 {{ item.xtCjsj }}
|
||
</span>
|
||
</div>
|
||
<div class="detail_box">
|
||
<van-image width="80px" :src="baseUrl" @click="onClickImg(baseUrl)" style="flex: 1" v-if="baseUrl">
|
||
<template v-slot:loading>
|
||
<van-loading type="spinner" size="20" />
|
||
</template>
|
||
</van-image>
|
||
<div class="detail_item">
|
||
<div class="item user_info">
|
||
<span>{{ item.dkrxm }}</span>
|
||
<!-- <span>{{ item.dkrsfzh }}</span> -->
|
||
</div>
|
||
<div class="item">管辖派出所：{{ item.ssbm }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import router from "../router/index.js";
|
||
import { getBase64 } from "../utils/tools.js";
|
||
import { defineProps, ref, watch } from "vue";
|
||
import { getDictList, setDict } from "../utils/dict";
|
||
import { ImagePreview } from "vant";
|
||
import { qcckGet } from "@/api/qcckApi.js";
|
||
const props = defineProps({
|
||
item: Object, //列表内容
|
||
path: String, //跳转详情的路由
|
||
});
|
||
const baseUrl = ref("");
|
||
const getImageUrl = (item) => {
|
||
qcckGet({}, `/mosty-base/minio/file/download/${item.tpid}`).then(res => {
|
||
_getBase64(res.url)
|
||
})
|
||
}
|
||
watch(
|
||
() => props.item,
|
||
(newValue) => {
|
||
if (Object.keys(newValue).length > 0) getImageUrl(newValue);
|
||
},
|
||
{ immediate: true, deep: true }
|
||
);
|
||
//预览图片
|
||
function onClickImg(url) {
|
||
ImagePreview([url]);
|
||
}
|
||
|
||
//获取base64地址
|
||
function _getBase64(item) {
|
||
getBase64((res) => {
|
||
baseUrl.value = res;
|
||
}, item);
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "../assets/styles/mixin.scss";
|
||
|
||
.list_box {
|
||
@include font_size($font_medium_s);
|
||
@include font_color($font-color-theme);
|
||
margin: 0vw 2vw 2vw 2vw;
|
||
padding: 2vw 1vw;
|
||
@include item_bottom_color($bottom-border-top-clore-theme);
|
||
|
||
.time_box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.count_size {
|
||
font-size: 5vw;
|
||
display: inline-block;
|
||
margin: 0 1vw;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list_box:nth-child(1) {
|
||
border-top: none !important;
|
||
}
|
||
|
||
.detail_box {
|
||
margin-top: 1vw;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.detail_item {
|
||
flex: 3.5;
|
||
margin-left: 2vw;
|
||
|
||
.user_info {
|
||
@include font_size($font_medium);
|
||
font-weight: 600;
|
||
color: #507ce9;
|
||
|
||
&>span {
|
||
display: inline-block;
|
||
margin-right: 2vw;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
line-height: 6vw;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .van-image__img {
|
||
height: auto;
|
||
max-height: 101px;
|
||
}
|
||
</style>
|