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>
|