328 lines
8.6 KiB
Plaintext
328 lines
8.6 KiB
Plaintext
<template>
|
||
<cl-page title="我的日报">
|
||
<!-- 筛选栏 -->
|
||
<view class="px-4 py-3 bg-white border-b">
|
||
<view class="flex gap-2">
|
||
<cl-button
|
||
:type="filterType === 'all' ? 'primary' : 'default'"
|
||
size="small"
|
||
@tap="changeFilter('all')"
|
||
>
|
||
全部
|
||
</cl-button>
|
||
<cl-button
|
||
:type="filterType === 'draft' ? 'primary' : 'default'"
|
||
size="small"
|
||
@tap="changeFilter('draft')"
|
||
>
|
||
草稿
|
||
</cl-button>
|
||
<cl-button
|
||
:type="filterType === 'submitted' ? 'primary' : 'default'"
|
||
size="small"
|
||
@tap="changeFilter('submitted')"
|
||
>
|
||
已提交
|
||
</cl-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日报列表 -->
|
||
<scroll-view scroll-y class="flex-1">
|
||
<!-- 加载中 -->
|
||
<view v-if="loading && list.length === 0" class="flex items-center justify-center py-20">
|
||
<text class="text-gray-400">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 列表内容 -->
|
||
<view v-else-if="list.length > 0">
|
||
<view
|
||
v-for="(item, index) in list"
|
||
:key="item.id || index"
|
||
class="mx-4 my-2 p-4 bg-white rounded-lg shadow-sm"
|
||
@tap="toDetail(item)"
|
||
>
|
||
<!-- 头部：日期和状态 -->
|
||
<view class="flex justify-between items-center mb-3">
|
||
<view class="flex items-center gap-2">
|
||
<text class="text-lg font-bold">{{ formatDate(item.reportDate) }}</text>
|
||
<text class="text-xs text-gray-500">
|
||
{{ formatWeekday(item.reportDate) }}
|
||
</text>
|
||
</view>
|
||
<view
|
||
:class="[
|
||
'px-2 py-1 rounded text-xs',
|
||
item.status === 1 ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
|
||
]"
|
||
>
|
||
{{ item.status === 1 ? "已提交" : "草稿" }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容摘要 -->
|
||
<view class="mb-3">
|
||
<text class="text-sm text-gray-700">
|
||
{{ getContentPreview(item.userEditedContent) }}
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 底部信息 -->
|
||
<view class="flex justify-between items-center text-xs text-gray-500">
|
||
<view class="flex items-center gap-2">
|
||
<text>{{ item.inputType === 1 ? "🎤 语音输入" : "⌨️ 文字输入" }}</text>
|
||
</view>
|
||
<text v-if="item.submitTime">
|
||
提交于 {{ formatTime(item.submitTime) }}
|
||
</text>
|
||
<text v-else-if="item.createTime">
|
||
创建于 {{ formatTime(item.createTime) }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多提示 -->
|
||
<view v-if="loading" class="flex items-center justify-center py-4">
|
||
<text class="text-gray-400 text-sm">加载中...</text>
|
||
</view>
|
||
<view v-else-if="finished" class="flex items-center justify-center py-4">
|
||
<text class="text-gray-400 text-sm">没有更多了</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view v-else class="flex flex-col items-center justify-center py-20">
|
||
<text class="text-6xl mb-4">📝</text>
|
||
<text class="text-gray-400 text-base">暂无日报</text>
|
||
<view
|
||
class="mt-4 px-4 py-2 bg-blue-500 text-white rounded"
|
||
@tap="toSubmit"
|
||
>
|
||
<text>去提交日报</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 悬浮提交按钮 -->
|
||
<view class="fixed bottom-20 right-4">
|
||
<cl-button
|
||
type="primary"
|
||
size="large"
|
||
round
|
||
@tap="toSubmit"
|
||
>
|
||
<text class="text-2xl">✏️</text>
|
||
</cl-button>
|
||
</view>
|
||
</cl-page>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from "vue";
|
||
import { request, router, useStore } from "@/cool";
|
||
import { useUi } from "@/uni_modules/cool-ui";
|
||
|
||
const ui = useUi();
|
||
const { user } = useStore();
|
||
|
||
// 列表相关
|
||
const list = ref<any[]>([]);
|
||
const loading = ref(false);
|
||
const finished = ref(false);
|
||
const page = ref(1);
|
||
const pageSize = ref(20);
|
||
|
||
// 筛选类型
|
||
const filterType = ref<"all" | "draft" | "submitted">("all");
|
||
|
||
// 用户ID（从登录状态获取）
|
||
const userId = ref(0);
|
||
|
||
// 初始化
|
||
onMounted(async () => {
|
||
console.log("【日报列表】页面加载, user.info:", user.info.value);
|
||
|
||
// 先尝试获取最新用户信息
|
||
if (user.token) {
|
||
try {
|
||
await user.get();
|
||
} catch (e) {
|
||
console.error("【日报列表】获取用户信息失败:", e);
|
||
}
|
||
}
|
||
|
||
console.log("【日报列表】获取用户信息后, user.info:", user.info.value);
|
||
|
||
if (user.info.value && user.info.value.id) {
|
||
userId.value = user.info.value.id;
|
||
console.log("【日报列表】设置userId:", userId.value);
|
||
loadReports();
|
||
} else {
|
||
console.error("【日报列表】用户未登录或用户信息为空");
|
||
ui.showToast({
|
||
message: "请先登录",
|
||
type: "error"
|
||
});
|
||
setTimeout(() => {
|
||
router.to("/pages/user/login");
|
||
}, 1000);
|
||
}
|
||
});
|
||
|
||
// 加载日报列表
|
||
async function loadReports() {
|
||
if (loading.value || finished.value) return;
|
||
|
||
loading.value = true;
|
||
|
||
try {
|
||
console.log("【日报列表】开始加载, userId:", userId.value);
|
||
|
||
if (!userId.value || userId.value === 0) {
|
||
console.error("【日报列表】userId无效:", userId.value);
|
||
throw new Error("用户ID无效，请重新登录");
|
||
}
|
||
|
||
const params: any = {
|
||
userId: userId.value,
|
||
page: page.value,
|
||
size: pageSize.value
|
||
};
|
||
|
||
// 添加状态筛选
|
||
if (filterType.value === "draft") {
|
||
params.status = 0;
|
||
} else if (filterType.value === "submitted") {
|
||
params.status = 1;
|
||
}
|
||
|
||
console.log("【日报列表】请求参数:", params);
|
||
|
||
const res = await request({
|
||
url: "/app/dailyreport/report/myReports",
|
||
method: "GET",
|
||
params
|
||
});
|
||
|
||
console.log("【日报列表】响应数据:", res);
|
||
console.log("【日报列表】响应类型:", typeof res);
|
||
console.log("【日报列表】是否为数组:", Array.isArray(res));
|
||
console.log("【日报列表】数据长度:", res ? res.length : 0);
|
||
|
||
if (res && res.length > 0) {
|
||
console.log("【日报列表】开始填充列表数据");
|
||
if (page.value === 1) {
|
||
list.value = res;
|
||
} else {
|
||
list.value.push(...res);
|
||
}
|
||
page.value++;
|
||
|
||
console.log("【日报列表】列表已更新, 当前list长度:", list.value.length);
|
||
console.log("【日报列表】列表第一项数据:", list.value[0]);
|
||
|
||
// 如果返回数据少于每页大小，说明已经到底了
|
||
if (res.length < pageSize.value) {
|
||
finished.value = true;
|
||
}
|
||
} else {
|
||
console.log("【日报列表】无数据或数据为空");
|
||
// 即使没有数据，也不应该标记为finished，可能只是筛选条件没有匹配的数据
|
||
if (page.value === 1) {
|
||
list.value = [];
|
||
}
|
||
finished.value = true;
|
||
}
|
||
} catch (error: any) {
|
||
console.error("加载日报列表失败:", error);
|
||
ui.showToast({
|
||
message: "加载失败: " + (error.message || "未知错误"),
|
||
type: "error"
|
||
});
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 下拉刷新
|
||
function onRefresh() {
|
||
console.log("【日报列表】下拉刷新");
|
||
page.value = 1;
|
||
finished.value = false;
|
||
list.value = [];
|
||
loadReports();
|
||
}
|
||
|
||
// 切换筛选条件
|
||
function changeFilter(type: "all" | "draft" | "submitted") {
|
||
console.log("【日报列表】切换筛选:", type);
|
||
filterType.value = type;
|
||
page.value = 1;
|
||
finished.value = false;
|
||
list.value = [];
|
||
loadReports();
|
||
}
|
||
|
||
// 跳转到详情
|
||
function toDetail(item: any) {
|
||
const date = item.reportDate ? encodeURIComponent(item.reportDate) : '';
|
||
router.to(`/pages/dailyreport/detail?id=${item.id}&date=${date}`);
|
||
}
|
||
|
||
// 跳转到提交页面
|
||
function toSubmit() {
|
||
router.to("/pages/dailyreport/submit");
|
||
}
|
||
|
||
// 格式化日期
|
||
function formatDate(dateStr: string) {
|
||
if (!dateStr) return "";
|
||
const date = new Date(dateStr);
|
||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||
const day = String(date.getDate()).padStart(2, "0");
|
||
return `${month}月${day}日`;
|
||
}
|
||
|
||
// 格式化星期
|
||
function formatWeekday(dateStr: string) {
|
||
if (!dateStr) return "";
|
||
const date = new Date(dateStr);
|
||
const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||
return weekdays[date.getDay()];
|
||
}
|
||
|
||
// 格式化时间
|
||
function formatTime(timeStr: string) {
|
||
if (!timeStr) return "";
|
||
const date = new Date(timeStr);
|
||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||
const day = String(date.getDate()).padStart(2, "0");
|
||
const hours = String(date.getHours()).padStart(2, "0");
|
||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||
return `${month}-${day} ${hours}:${minutes}`;
|
||
}
|
||
|
||
// 获取内容摘要
|
||
function getContentPreview(content: string) {
|
||
if (!content) return "（无内容）";
|
||
// 移除 Markdown 标记
|
||
const plain = content.replace(/[#*`\[\]()]/g, "").trim();
|
||
// 限制长度
|
||
return plain.length > 100 ? plain.substring(0, 100) + "..." : plain;
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.gap-2 {
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.line-clamp-3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|