详情页面

src/views/property-marketing/assignment-management/managementDetail.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col justify-start items-center"
+    style="height: 90%"
+  >
+    <!-- 使用 flex 布局实现整体居中 -->
+    <div class="flex justify-center" style="width: 100%">
+      <div class="flex flex-col items-start">
+        <div class="font-bold color-#211F24" style="font-size: 28px">{{ task.name }}</div>
+        <div class="color-#666666 mt-8px">{{ timestampToDayNumber(task.created_at) }}</div>
+        <div class="color-#666666 mt-8px">{{ task.content }}</div>
+      </div>
+    </div>
+  </div>
+  <div class="flex justify-end mt-24px">
+    <a-button type="outline" @click="handleBack">返回</a-button>
+    <a-button type="outline" class="ml-12px">编辑</a-button>
+    <a-button type="primary" class="ml-12px">去审核</a-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from '@/router';
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { getTaskSchedulesDetail } from '@/api/all/assignment-management';
+import DateUtils from '@/utils/DateUtils';
+const task = ref({});
+// 时间戳转日期格式，并提取日期数字
+const timestampToDayNumber = (timestamp: number) => {
+  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${month}月${day}日`;
+};
+const handleBack = () => {
+  router.go(-1);
+};
+
+onMounted(async () => {
+  const route = useRoute();
+  const noteId = route.params.id; // 从路由参数中获取笔记ID
+
+  if (noteId) {
+    getTaskSchedulesDetail(noteId)
+      .then((response) => {
+        if (response.data) {
+          // 根据API响应结构调整
+          const apiData = response.data.data || response.data;
+          console.log(apiData);
+          task.value = apiData;
+        }
+      })
+      .catch((error) => {});
+  }
+});
+</script>
+
+<style scoped>
+.management-detail {
+  padding: 10px;
+}
+
+.van-card__title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.van-card__desc {
+  margin-top: 8px;
+  color: #666;
+}
+
+.van-card__price {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 新增样式 */
+.text-center {
+  text-align: center;
+}
+
+/* 添加新的样式规则 */
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.mt-8px {
+  margin-top: 8px;
+}
+</style>