提交

src/components/clockList.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="list_box">
+    <div class="time_box">
+      <span>
+        <van-icon name="clock-o" />
+        &ensp;{{ 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>