详情页面

This commit is contained in:
lq
2025-09-04 15:48:34 +08:00
parent e235d36ee7
commit 70cb9f86f9

View File

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