更新工作人员端信息发布

src/api/InformationReception/InformationReception.ts

@@ -1,10 +1,37 @@
 import request from "@/utils/request";
 
 // 信息列表
-export function InformationList(data) {
+export function InformationList(params) {
   return request({
-    url: "/api/info_publish/back/list",
+    url: "/api/info_publish/me/list",
     method: "get",
+    params: params
+  });
+}
+
+// 信息详情
+export function InformationDetail(params) {
+  return request({
+    url: "/api/info_publish/me/detail",
+    method: "get",
+    params: params
+  });
+}
+
+// 确认收到
+export function confirmReceived(data) {
+  return request({
+    url: "/api/info_publish/me/confirmReceived",
+    method: "post",
+    data: data
+  });
+}
+
+// 确认签名
+export function confirmSignature(data) {
+  return request({
+    url: "/api/info_publish/me/confirmSignature",
+    method: "post",
     data: data
   });
 }

src/router/routes.ts

@@ -130,20 +130,13 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     }
   },
   {
-    path: "/infoReception",
-    name: "InfoReception",
-    component: Layout,
-    children: [
-      {
-        path: "infoDetails",
-        name: "InfoDetails",
-        component: () => import("@/views/InformationReception/infoDetails.vue"),
-        meta: {
-          title: "智慧应急消息通知详情",
-          noCache: true
-        }
-      }
-    ]
+    path: "/infoDetails",
+    name: "InfoDetails",
+    component: () => import("@/views/InformationReception/infoDetails.vue"),
+    meta: {
+      title: "智慧应急消息通知详情",
+      noCache: true
+    }
   },
   {
     path: "/onlineRollCall",

src/views/InformationReception/index copy.bak

@@ -0,0 +1,298 @@
+<template>
+  <div class="table-content">
+    <!-- 搜索框 -->
+    <div class="search-box">
+      <el-input
+        v-model="searchQuery"
+        class="search-input"
+        placeholder="请输入内容"
+        prefix-icon="el-icon-search"
+        clearable
+        @keyup.enter="onSearch"
+      />
+    </div>
+    <!-- 筛选和排序区域 -->
+    <div class="filter-sort-area">
+      <div class="filter-item">
+        <span>类型：</span>
+        <span class="type-trigger" @click="showTypePicker">
+          {{ selectedType || "请选择类型" }}
+          <i class="el-icon-arrow-down" />
+        </span>
+      </div>
+      <!-- 类型选择抽屉 -->
+      <el-drawer
+        v-model="typeDrawerVisible"
+        title="选择类型"
+        direction="btt"
+        size="30%"
+      >
+        <ul>
+          <li v-for="type in types" :key="type" @click="selectType(type)">
+            {{ type }}
+          </li>
+        </ul>
+      </el-drawer>
+      <div class="filter-item">
+        <span>时间：</span>
+        <span class="time-label" @click="showTimePicker">
+          {{ selectedTimeLabel || "请选择时间" }}
+        </span>
+        <i class="el-icon-arrow-down" />
+      </div>
+      <div class="filter-item">
+        <span>排序：</span>
+        <span class="sort-order" @click="toggleSortOrder">
+          {{ sortOrder === "asc" ? "↑" : "↓" }}
+          <i
+            :class="['el-icon-arrow-up', sortOrder === 'asc' ? 'active' : '']"
+          />
+          <i
+            :class="[
+              'el-icon-arrow-down',
+              sortOrder === 'desc' ? 'active' : ''
+            ]"
+          />
+        </span>
+      </div>
+    </div>
+
+    <!-- 信息列表 -->
+    <div v-for="(item, index) in sortedDataList" :key="index" class="info-box">
+      <div class="status-icon" :class="getStatusClass(item.examine_status)" />
+      <div class="info-content">
+        <div class="info-header">
+          <div class="info-title">{{ item.title }}</div>
+          <div class="info-time">{{ item.publish_time }}</div>
+        </div>
+        <div class="info-description">
+          <div>发布人：{{ item.nick_name }}</div>
+          <div>部门：{{ item.dept_name }}</div>
+          <div>发布渠道：{{ item.publish_channel }}</div>
+          <div>阅读次数：{{ item.user_count }}</div>
+          <div>审核状态：{{ item.examine_status }}</div>
+          <div>发布状态：{{ item.publish_status }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 时间选择抽屉 -->
+    <el-drawer
+      v-model="drawerVisible"
+      title="选择时间"
+      direction="btt"
+      size="30%"
+    >
+      <el-date-picker
+        v-model="selectedTime"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        @change="handleTimeChange"
+      />
+      <span class="drawer-footer">
+        <el-button @click="drawerVisible = false">取消</el-button>
+        <el-button type="primary" @click="confirmTime">确定</el-button>
+      </span>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch, computed } from "vue";
+import { InformationList } from "@/api/InformationReception/InformationReception";
+import { parseTime } from "@/utils/ruoyi";
+import {
+  ElInput,
+  ElDrawer,
+  ElDatePicker,
+  ElButton,
+  ElIconArrowDown
+} from "element-plus";
+
+const dataList = ref([]);
+const selectedType = ref("↓");
+const types = ref(["预警", "灾情", "处置", "指挥救援", "公众防范"]);
+const selectedTime = ref([null, null]);
+const sortOrder = ref("desc");
+const drawerVisible = ref(false); // 确保使用 ref 定义
+const selectedTimeLabel = ref("↓");
+const typeDrawerVisible = ref(false);
+const searchQuery = ref("");
+
+const sortedDataList = computed(() => {
+  return dataList.value.slice().sort((a, b) => {
+    if (sortOrder.value === "asc") {
+      return new Date(a.publish_time) - new Date(b.publish_time);
+    } else {
+      return new Date(b.publish_time) - new Date(a.publish_time);
+    }
+  });
+});
+
+const showTypePicker = () => {
+  typeDrawerVisible.value = true;
+};
+
+const selectType = type => {
+  selectedType.value = type;
+  typeDrawerVisible.value = false;
+  fetchData(); // 重新获取数据
+};
+
+const fetchData = async () => {
+  try {
+    const params = {
+      publish_group: "",
+      publish_status: "0",
+      examine_status: "0",
+      page: "1",
+      page_size: "20"
+    };
+    const res = await InformationList(params);
+    dataList.value = res.data.map(item => {
+      item.publish_time = parseTime(item.publish_time);
+      return item;
+    });
+    sortedDataList.value = dataList.value;
+  } catch (error) {
+    console.error("请求任务数据失败:", error);
+  }
+};
+
+onMounted(() => {
+  fetchData();
+});
+
+onUnmounted(() => {
+  // 清除定时器等资源
+});
+
+const toggleSortOrder = () => {
+  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+};
+
+watch(
+  () => [selectedType.value, selectedTime.value, sortOrder.value],
+  () => {
+    fetchData();
+  }
+);
+
+const showTimePicker = () => {
+  drawerVisible.value = true;
+};
+
+const handleTimeChange = value => {
+  selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : "请选择时间";
+};
+
+const confirmTime = () => {
+  drawerVisible.value = false;
+  fetchData(); // 重新获取数据
+};
+
+const getStatusClass = (status: string): string => {
+  switch (status) {
+    case "审核中":
+      return "warning-icon";
+    case "待审批":
+      return "pending-icon";
+    case "已通过":
+      return "success-icon";
+    case "已拒绝":
+      return "error-icon";
+    default:
+      return "";
+  }
+};
+
+//搜索
+const onSearch = () => {
+  // 执行搜索操作
+  console.log("搜索内容:", searchQuery.value);
+  // 这里可以添加搜索的逻辑，比如调用 API 或更新数据列表
+};
+</script>
+
+<style scoped>
+.table-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-sort-area {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.info-box {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.status-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-title {
+  font-weight: bold;
+}
+
+.info-time {
+  font-size: 0.8em;
+  color: #888;
+}
+
+.info-description {
+  color: #333;
+}
+
+.el-icon-arrow-down {
+  margin-left: 8px;
+}
+
+.sort-order {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.el-icon-arrow-up,
+.el-icon-arrow-down {
+  margin-left: 5px;
+}
+
+.search-box {
+  padding: 10px;
+  background-color: #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.search-input {
+  width: 300px;
+}
+</style>

src/views/InformationReception/index.vue

@@ -1,298 +1,318 @@
 <template>
-  <div class="table-content">
-    <!-- 搜索框 -->
-    <div class="search-box">
-      <el-input
-        v-model="searchQuery"
-        class="search-input"
-        placeholder="请输入内容"
-        prefix-icon="el-icon-search"
-        clearable
-        @keyup.enter="onSearch"
+  <div class="container">
+    <!--搜索框-->
+    <van-search
+      v-model="queryParams.search_keyword"
+      class="common-search"
+      placeholder="请输入信息"
+      :left-icon="searchImg"
+      :right-icon="closeImg"
+      :clearable="false"
+      @search="on_search_keyword"
+      @click-right-icon.stop="on_search_cancel"
+    />
+    <!--三个类型选择-->
+    <van-dropdown-menu>
+      <van-dropdown-item
+        v-model="queryParams.info_type"
+        :title="!!queryParams.info_type ? '' : '类型'"
+        :options="opt_info_type"
+        @change="change_info_type"
       />
-    </div>
-    <!-- 筛选和排序区域 -->
-    <div class="filter-sort-area">
-      <div class="filter-item">
-        <span>类型：</span>
-        <span class="type-trigger" @click="showTypePicker">
-          {{ selectedType || "请选择类型" }}
-          <i class="el-icon-arrow-down" />
-        </span>
-      </div>
-      <!-- 类型选择抽屉 -->
-      <el-drawer
-        v-model="typeDrawerVisible"
-        title="选择类型"
-        direction="btt"
-        size="30%"
-      >
-        <ul>
-          <li v-for="type in types" :key="type" @click="selectType(type)">
-            {{ type }}
-          </li>
-        </ul>
-      </el-drawer>
-      <div class="filter-item">
-        <span>时间：</span>
-        <span class="time-label" @click="showTimePicker">
-          {{ selectedTimeLabel || "请选择时间" }}
-        </span>
-        <i class="el-icon-arrow-down" />
-      </div>
-      <div class="filter-item">
-        <span>排序：</span>
-        <span class="sort-order" @click="toggleSortOrder">
-          {{ sortOrder === "asc" ? "↑" : "↓" }}
-          <i
-            :class="['el-icon-arrow-up', sortOrder === 'asc' ? 'active' : '']"
-          />
-          <i
-            :class="[
-              'el-icon-arrow-down',
-              sortOrder === 'desc' ? 'active' : ''
-            ]"
-          />
-        </span>
-      </div>
-    </div>
+      <van-dropdown-item title="时间" ref="timeRef">
+        <van-picker-group title='发布时间' :tabs="['开始日期', '结束日期']" @confirm="onConfirmTime" @cancel="onCancelTime">
+          <van-date-picker v-model="queryParams.begin_time"/>
+          <van-date-picker v-model="queryParams.end_time"/>
+        </van-picker-group>
+      </van-dropdown-item>
+      <van-dropdown-item
+        v-model="queryParams.info_order"
+        :title="!!queryParams.info_order ? '' : '时间顺序'"
+        :options="opt_info_order"
+        @change="change_info_order"
+      />
+    </van-dropdown-menu>
 
-    <!-- 信息列表 -->
-    <div v-for="(item, index) in sortedDataList" :key="index" class="info-box">
-      <div class="status-icon" :class="getStatusClass(item.examine_status)" />
-      <div class="info-content">
-        <div class="info-header">
-          <div class="info-title">{{ item.title }}</div>
-          <div class="info-time">{{ item.publish_time }}</div>
-        </div>
-        <div class="info-description">
-          <div>发布人：{{ item.nick_name }}</div>
-          <div>部门：{{ item.dept_name }}</div>
-          <div>发布渠道：{{ item.publish_channel }}</div>
-          <div>阅读次数：{{ item.user_count }}</div>
-          <div>审核状态：{{ item.examine_status }}</div>
-          <div>发布状态：{{ item.publish_status }}</div>
-        </div>
-      </div>
-    </div>
-    <!-- 时间选择抽屉 -->
-    <el-drawer
-      v-model="drawerVisible"
-      title="选择时间"
-      direction="btt"
-      size="30%"
+    <van-list
+      v-model:loading="loading"
+      v-model:error="error"
+      error-text="请求失败，点击重新加载"
+      :finished="finished"
+      finished-text="没有更多信息了"
+      class="list"
+      @load="getList"
     >
-      <el-date-picker
-        v-model="selectedTime"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        @change="handleTimeChange"
-      />
-      <span class="drawer-footer">
-        <el-button @click="drawerVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmTime">确定</el-button>
-      </span>
-    </el-drawer>
+      <div
+        v-for="(item, index) in info_list"
+        :key="item.id"
+        class="event-list-item"
+        @click="handleInfo(item)"
+      >
+          <div class="item-title">
+            <div :class="['info_type', get_info_type_color(item.info_type)]">
+              {{ get_info_type_text(item.info_type) }}
+            </div>
+            <div class="item-title-text">
+              {{ item.publish_time }}
+            </div>
+          </div>
+          <div class="item-content">
+            {{ item.content || "暂无内容"}}
+          </div>
+      </div>
+    </van-list>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch, computed } from "vue";
+import { getCurrentInstance, ref, toRefs } from "vue";
+import { useRouter } from "vue-router";
 import { InformationList } from "@/api/InformationReception/InformationReception";
-import { parseTime } from "@/utils/ruoyi";
-import {
-  ElInput,
-  ElDrawer,
-  ElDatePicker,
-  ElButton,
-  ElIconArrowDown
-} from "element-plus";
+import searchImg from "@/assets/images/search.png";
+import closeImg from "@/assets/images/close.png";
+import {parseTime} from "@/utils/ruoyi";
+import dayjs, { Dayjs } from "dayjs";
 
-const dataList = ref([]);
-const selectedType = ref("↓");
-const types = ref(["预警", "灾情", "处置", "指挥救援", "公众防范"]);
-const selectedTime = ref([null, null]);
-const sortOrder = ref("desc");
-const drawerVisible = ref(false); // 确保使用 ref 定义
-const selectedTimeLabel = ref("↓");
-const typeDrawerVisible = ref(false);
-const searchQuery = ref("");
+const proxy = getCurrentInstance()?.proxy;
+//const { mm_info_type, mm_event_level, mm_event_state } = toRefs<any>(
+//  proxy?.useDict("mm_info_type", "mm_event_level", "mm_event_state")
+//);
 
-const sortedDataList = computed(() => {
-  return dataList.value.slice().sort((a, b) => {
-    if (sortOrder.value === "asc") {
-      return new Date(a.publish_time) - new Date(b.publish_time);
-    } else {
-      return new Date(b.publish_time) - new Date(a.publish_time);
-    }
-  });
-});
+const router = useRouter();
 
-const showTypePicker = () => {
-  typeDrawerVisible.value = true;
-};
+const opt_info_type = [
+  { text: "全部", value: "" },
+  { text: "预警信息", value: "0" },
+  { text: "灾情信息", value: "1" },
+  { text: "处置信息", value: "2" },
+  { text: "指挥救援", value: "3" },
+  { text: "公众防范", value: "4" }
+];
 
-const selectType = type => {
-  selectedType.value = type;
-  typeDrawerVisible.value = false;
-  fetchData(); // 重新获取数据
-};
+const opt_info_order = [
+  { text: "升序", value: "asc" },
+  { text: "降序", value: "desc" }
+];
 
-const fetchData = async () => {
-  try {
-    const params = {
-      publish_group: "",
-      publish_status: "0",
-      examine_status: "0",
-      page: "1",
-      page_size: "20"
-    };
-    const res = await InformationList(params);
-    dataList.value = res.data.map(item => {
-      item.publish_time = parseTime(item.publish_time);
-      return item;
-    });
-    sortedDataList.value = dataList.value;
-  } catch (error) {
-    console.error("请求任务数据失败:", error);
-  }
-};
+const get_info_type_text = (val) => {
+    return opt_info_type.find(item => item.value == val).text
+}
 
-onMounted(() => {
-  fetchData();
-});
+const get_info_type_color = (val) => {
+  return "info_type_" + val
+}
 
-onUnmounted(() => {
-  // 清除定时器等资源
-});
+const onConfirmTime = () => {
+  timeRef.value.toggle();
+  queryParams.value.page = 0;
+  getList();
+}
 
-const toggleSortOrder = () => {
-  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
-};
+const onCancelTime = () => {
+  timeRef.value.toggle();
+}
 
-watch(
-  () => [selectedType.value, selectedTime.value, sortOrder.value],
-  () => {
-    fetchData();
-  }
-);
+const timeRef = ref(null);
+const info_list = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const error = ref(false);
+const finished = ref(false);
+
+const queryParams = ref({
+  page: 0,
+  page_size: 5,
+  info_type: "",
+  begin_time: dayjs().add(-1, 'month').format('YYYY-MM-DD').split("-"),
+  end_time: dayjs().format('YYYY-MM-DD').split("-"),
+  event_level: "",
+  info_order: "desc",
+  search_keyword: ""
+});
 
-const showTimePicker = () => {
-  drawerVisible.value = true;
+const on_search_keyword = val => {
+  queryParams.value.search_keyword = val;
+  queryParams.value.page = 0;
+  getList();
 };
 
-const handleTimeChange = value => {
-  selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : "请选择时间";
+const on_search_cancel = () => {
+  queryParams.value.search_keyword = "";
+  queryParams.value.page = 0;
+  getList();
 };
 
-const confirmTime = () => {
-  drawerVisible.value = false;
-  fetchData(); // 重新获取数据
+const change_info_type = () => {
+  queryParams.value.page = 0;
+  getList();
 };
 
-const getStatusClass = (status: string): string => {
-  switch (status) {
-    case "审核中":
-      return "warning-icon";
-    case "待审批":
-      return "pending-icon";
-    case "已通过":
-      return "success-icon";
-    case "已拒绝":
-      return "error-icon";
-    default:
-      return "";
-  }
+const change_info_order = () => {
+  queryParams.value.page = 0;
+  getList();
 };
 
-//搜索
-const onSearch = () => {
-  // 执行搜索操作
-  console.log("搜索内容:", searchQuery.value);
-  // 这里可以添加搜索的逻辑，比如调用 API 或更新数据列表
+const handleInfo = (item) => {
+  router.push("/infoDetails?id=" + item.id);
+}
+
+const getList = () => {
+  queryParams.value.page++;
+  let params = queryParams.value;
+  params['begin_time_s'] = params.begin_time.join("-");
+  params['end_time_s'] = params.end_time.join("-");
+  // console.log('params:', queryParams.value, params);
+  InformationList(params)
+    .then(res => {
+      var items = res.data || [];
+      total.value = res.total;
+      if (queryParams.value.page == 1) {
+        info_list.value = [];
+      }
+      items.forEach(val => {
+        info_list.value.push(val);
+      });
+      if (queryParams.value.page_size * queryParams.value.page >= total.value) {
+        finished.value = true;
+      } else {
+        finished.value = false;
+      }
+    })
+    .catch(() => {
+      error.value = true;
+      finished.value = false;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 </script>
 
-<style scoped>
-.table-content {
-  display: flex;
-  flex-direction: column;
+<style lang="scss" scoped>
+.list {
+  height: calc(100vh - 102px);
+  overflow-y: auto;
 }
-
-.filter-sort-area {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
+.van-doc-block__title {
+  color: var(--van-doc-text-color-4);
+  margin: 0;
+  padding: 32px 16px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
 }
 
-.filter-item {
-  display: flex;
-  align-items: center;
-  margin-right: 16px;
-}
+.event-list-item {
+  position: relative;
+  margin: 16px 16px 0;
+  background: #ffffff;
+  border-radius: 4px;
+  border: 0.5px solid #eaedf7;
+  box-shadow: 0 0 4px 0 #4554661a;
+  &:first-child {
+    margin-top: 0;
+  }
+  .item-title {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 46px;
+    background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
+    padding: 0 12px;
+    .item-title-text {
+      font-size: 14px;
+      color: #414f64;
+    }
 
-.info-box {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid #eee;
-}
+    .info_type {
+        font-size: 14px;
+        padding: 3px 10px;
+        color:#fff;
+        margin-right: 10px;
+    }
 
-.status-icon {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-}
+    .info_type_0 {
+      background: #FF9518;
+    }
 
-.info-content {
-  flex: 1;
-}
+    .info_type_1 {
+      background: #FF1818;
+    }
 
-.info-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+    .info_type_2 {
+      background: #2c81ff;
+    }
 
-.info-title {
-  font-weight: bold;
-}
+    .info_type_3 {
+      background: #FF9F9F;
+    }
 
-.info-time {
-  font-size: 0.8em;
-  color: #888;
+    .info_type_4 {
+      background: #A4D3FF;
+    }
+  }
+  .item-content {
+      padding: 0 12px 12px;
+      font-size: 14px;
+      color: #414f64;
+  }
 }
-
-.info-description {
-  color: #333;
+.van-dropdown-menu {
+  :deep(.van-dropdown-menu__bar) {
+    background: transparent;
+    box-shadow: none;
+  }
 }
-
-.el-icon-arrow-down {
-  margin-left: 8px;
+.common-search {
+  :deep(.van-field__left-icon) {
+    .van-icon__image {
+      width: 12px;
+      height: 12px;
+    }
+  }
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
 }
-
-.sort-order {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+.icon1 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon1.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
 }
-
-.el-icon-arrow-up,
-.el-icon-arrow-down {
-  margin-left: 5px;
+.icon2 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon2.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
 }
-
-.search-box {
-  padding: 10px;
-  background-color: #f5f5f5;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.icon3 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon3.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
 }
-
-.search-input {
-  width: 300px;
+.icon4 {
+  width: 17px;
+  height: 16px;
+  background: url("@/assets/images/event/icon4.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
+}
+.icon5 {
+  width: 16px;
+  height: 16px;
+  background: url("@/assets/images/event/icon5.png") no-repeat;
+  background-size: 100% 100%;
+  margin-right: 7px;
 }
 </style>

src/views/InformationReception/infoDetails.vue

@@ -2,8 +2,8 @@
   <div class="container">
     <div class="info-title">{{ infoDetail.title }}</div>
     <div class="info-box">
-      <div>来源：<span class="text1">{{ infoDetail.source }}</span></div>
-      <div>{{ infoDetail.publicTime }}</div>
+      <div>来源：<span class="text1">{{ infoDetail.publish_group }}</span></div>
+      <div>{{ infoDetail.publish_time }}</div>
     </div>
     <div class="info-content">
       {{ infoDetail.content }}
@@ -21,16 +21,16 @@
         </div>
       </div>
     </div>
-    <div v-if="infoDetail.status1 === '1'" class="box1">
-      <div v-show="infoDetail.status2 === '0'" class="confirm-btn" @click="handleReceive">确认收到</div>
-      <div v-show="infoDetail.status2 === '1'" class="tip">
+    <div v-if="infoDetail.response_type === 1" class="box1">
+      <div v-show="infoDetail.response_status === 0" class="confirm-btn" @click="handleReceive">确认收到</div>
+      <div v-show="infoDetail.response_status === 1" class="tip">
         <van-icon name="success" />
         已确认收到此通知
       </div>
     </div>
-    <div v-if="infoDetail.status1 === '2'" class="box1">
-      <div v-show="infoDetail.status2 === '0'" class="confirm-btn" @click="handleShowSignature">签名确认</div>
-      <van-image v-show="infoDetail.status2 === '1' && infoDetail.signature" :src="infoDetail.signature" height="60" />
+    <div v-if="infoDetail.response_type === 2" class="box1">
+      <div v-show="infoDetail.response_status === 0" class="confirm-btn" @click="handleShowSignature">签名确认</div>
+      <van-image v-show="infoDetail.response_status === 2 && infoDetail.signature" :src="infoDetail.signature" height="100" />
     </div>
     <van-dialog v-model:show="showSignature" :show-confirm-button="false">
       <van-signature @submit="onSubmit" />
@@ -43,16 +43,18 @@
 import {onMounted, ref} from "vue";
 import {useRoute} from "vue-router";
 import {download2} from "@/utils/request";
+import { InformationDetail, confirmReceived, confirmSignature } from "@/api/InformationReception/InformationReception";
+import { showFailToast } from "vant";
 
 const route = useRoute();
 const infoDetail = ref({
   // 0阅读 1点击确认 2签字确认
-  status1: '',
+  response_type: 0,
   // 签收状态 0 未确认 1已确认
-  status2: '',
+  response_status: 0,
   title: '',
-  source: '',
-  publicTime: '',
+  publish_group: '',
+  publish_time: '',
   content: '',
   signature: '',
   files: []
@@ -62,7 +64,9 @@ let showSignature = ref(false);
 const baseUrl = import.meta.env.VITE_BASE_API;
 
 const handleReceive = () => {
-  infoDetail.value.status2 = '1'
+  confirmReceived({id: infoId.value}).then((res)=>{
+    infoDetail.value.response_status = res.data.response_status;
+  })
 }
 
 const handleShowSignature = () => {
@@ -70,9 +74,15 @@ const handleShowSignature = () => {
 }
 // 确定签名
 const onSubmit = (data) => {
-  infoDetail.value.status2 = '1'
-  showSignature.value = false;
-  infoDetail.value.signature = data.image;
+  if (data.image == "") {
+    showFailToast("请签名");
+    return false;
+  }
+  confirmSignature({id: infoId.value, image: data.image}).then((res)=>{
+    showSignature.value = false;
+    infoDetail.value.signature = data.image;
+    infoDetail.value.response_status = res.data.response_status;
+  })
 };
 // 下载方法
 const handleDownload = (file: any) => {
@@ -80,22 +90,28 @@ const handleDownload = (file: any) => {
 };
 onMounted(() => {
   infoId.value = route.query.id;
+  InformationDetail({id: infoId.value}).then((res)=>{
+    infoDetail.value = res.data;
+  })
+  /*
   infoDetail.value = {
     status1: '2',
     status2: '0',
     title: 'xxxxxxxxxx',
-    source: '茂名市应急管理局、市气象局',
-    publicTime: '2023-04-29 12:11:00',
+    publish_group: '茂名市应急管理局、市气象局',
+    publish_time: '2023-04-29 12:11:00',
     content: '了多少会计分录可是大家流口水监考老师就考虑解放立刻时间的法律就是的空间是多了艰苦拉萨大家看来是积分考虑时间断开连接速度看来是就断开连接算了九分零四就看了金克拉就',
     signature: '',
     files: [{name: '测试.pdf', url: '2d3eebfe-9131-11ef-ae0f-fa163e4bf12e.pdf'}]
   }
+  */
 })
 </script>
 
 <style lang="scss" scoped>
 .container {
   background-color: #fafafa;
+  padding: 16px;
 
   .info-title {
     width: 100%;
@@ -125,6 +141,10 @@ onMounted(() => {
     display: flex;
     font-size: 14px;
 
+    .text2 {
+      width: 70px;
+    }
+
     .file-item {
       color: #2C81FF;
     }
@@ -134,7 +154,7 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 10px;
+  margin-top: 20px;
   .tip {
     color: #40C75F;
   }
@@ -145,7 +165,7 @@ onMounted(() => {
   font-size: 16px;
   font-weight: bold;
   border-radius: 2px;
-  width: 140px;
+  width: 280px;
   height: 35px;
   line-height: 35px;
   text-align: center;