任务详情页面

components/ContentDashboard.vue

@@ -11,7 +11,7 @@
 
     <!-- 逾期任务详情 -->
     <view class="overdue-section" v-if="overdueTasks.length > 0">
-      <view class="overdue-card" v-for="task in overdueTasks" :key="task.id">
+      <view class="overdue-card" v-for="task in overdueTasks" :key="task.id" @click="goToTaskDetail(task)">
         <view class="overdue-badge">逾期</view>
         <view class="overdue-content">
           <text class="overdue-date">{{ task.date }}</text>
@@ -21,7 +21,7 @@
           <text class="overdue-time">发布时间: {{ task.releaseTime }}</text>
         </view>
         <view class="overdue-action">
-          <button class="handle-btn" @click="handleOverdueTask(task)">立即处理</button>
+          <button class="handle-btn" @click.stop="handleOverdueTask(task)">立即处理</button>
         </view>
       </view>
       <view class="carousel-dots">
@@ -127,13 +127,30 @@ const customerStatus = ref([
   { label: '即将跟进', count: 1 }
 ]);
 
+// 跳转到任务详情页
+const goToTaskDetail = (task) => {
+  // 将任务数据存储到本地，供详情页使用
+  uni.setStorageSync('taskDetailData', {
+    id: task.id,
+    name: task.description || '待办任务名称',
+    project: task.project || '所属项目',
+    statusTags: ['已逾期', '紧急'],
+    deadline: task.date || '2025-10-14 18:00',
+    creator: '张珊珊',
+    responsible: task.owner || '张珊珊、李志',
+    publishTime: task.releaseTime || '2025-10-17',
+    content: task.description || '任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。',
+    submitRecords: []
+  });
+  
+  uni.navigateTo({
+    url: `/pages/task-detail/index?id=${task.id}`
+  });
+};
+
 // 处理逾期任务
 const handleOverdueTask = (task) => {
-  console.log('处理逾期任务:', task);
+  goToTaskDetail(task);
-  uni.showToast({
-    title: '跳转到任务处理',
-    icon: 'none'
-  });
 };
 
 // 查看公告
@@ -199,6 +216,12 @@ const viewAnnouncement = (announcement) => {
   display: flex;
   align-items: flex-start;
   position: relative;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.overdue-card:active {
+  opacity: 0.8;
 }
 
 .overdue-badge {

components/TodoList.vue

@@ -59,10 +59,22 @@ const toggleTodo = (todo) => {
 };
 
 const handleTodoClick = (todo) => {
-  console.log('点击待办:', todo);
+  // 将待办数据存储到本地，供详情页使用
-  uni.showToast({
+  uni.setStorageSync('taskDetailData', {
-    title: '查看待办详情',
+    id: todo.id,
-    icon: 'none'
+    name: todo.title || '待办任务名称',
+    project: '待办事项',
+    statusTags: todo.priority === 'high' ? ['紧急'] : todo.priority === 'medium' ? ['重要'] : ['普通'],
+    deadline: todo.time || '2025-10-14 18:00',
+    creator: '系统',
+    responsible: '当前用户',
+    publishTime: todo.time || '2025-10-17',
+    content: todo.description || '任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。',
+    submitRecords: []
+  });
+  
+  uni.navigateTo({
+    url: `/pages/task-detail/index?id=${todo.id}`
   });
 };
 </script>
@@ -88,6 +100,12 @@ const handleTodoClick = (todo) => {
   align-items: flex-start;
   gap: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.todo-item:active {
+  opacity: 0.8;
+  transform: scale(0.98);
 }
 
 .todo-checkbox {

pages.json

@@ -41,6 +41,13 @@
 				"navigationBarTitleText": "日程详情",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/task-detail/index",
+			"style": {
+				"navigationBarTitleText": "任务详情"
+			
+			}
 		}
 	],
 

pages/task-detail/index.vue

@@ -0,0 +1,722 @@
+<template>
+  <view>
+
+  <scroll-view class="content-scroll" scroll-y>
+      <!-- 任务状态栏 -->
+      <view class="status-section">
+        <view class="task-info">
+          <text class="task-name">{{ task.name }}</text>
+          <text class="project-name">{{ task.project }}</text>
+        </view>
+        <view class="status-tags">
+          <text 
+            v-for="(status, index) in task.statusTags" 
+            :key="index"
+            class="tag" 
+            :class="getTagClass(status)"
+          >
+            {{ status }}
+          </text>
+        </view>
+      </view>
+
+      <!-- 基本信息区域 -->
+      <view class="basic-info">
+        <view class="info-item">
+          <text class="info-label">截止时间：</text>
+          <text class="info-value">{{ task.deadline }}</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">创建人：</text>
+          <text class="info-value">{{ task.creator }}</text>
+        </view>
+        <view class="info-item">
+          <text class="info-label">负责人：</text>
+          <text class="info-value">{{ task.responsible }}</text>
+        </view>
+      </view>
+
+      <!-- 标签切换 -->
+      <view class="tab-container">
+        <view 
+          class="tab-item" 
+          :class="{ active: activeTab === 'info' }"
+          @click="switchTab('info')"
+        >
+          <text>任务信息</text>
+        </view>
+        <view 
+          class="tab-item" 
+          :class="{ active: activeTab === 'records' }"
+          @click="switchTab('records')"
+        >
+          <text>提交记录</text>
+        </view>
+      </view>
+
+      <!-- 任务信息标签页 -->
+      <view class="tab-content" v-if="activeTab === 'info'">
+        <view class="task-info-card">
+          <view class="publish-time-row">
+            <text class="clock-icon">🕐</text>
+            <text class="publish-time-text">发布时间：{{ task.publishTime }}</text>
+          </view>
+          <view class="task-content-wrapper">
+            <text class="task-content-text">{{ task.content }}</text>
+            <text class="task-content-text">{{ task.content }}</text>
+            <text class="task-content-text">{{ task.content }}</text>
+          </view>
+          <view class="delay-btn-wrapper">
+            <uv-button type="error" size="small" @click="applyDelay">申请延期</uv-button>
+          </view>
+        </view>
+      </view>
+
+      <!-- 提交记录标签页 -->
+      <view class="tab-content" v-if="activeTab === 'records'" @click="closeMenu">
+        <view class="no-record" v-if="task.submitRecords.length === 0">
+          <text>暂无提交记录</text>
+        </view>
+        <view class="submit-record-card" v-for="(record, index) in task.submitRecords" :key="index">
+          <view class="record-header">
+            <view class="user-info">
+              <view class="avatar-placeholder"></view>
+              <text class="user-name">{{ record.userName }}</text>
+            </view>
+            <view class="record-header-right">
+              <text class="record-time">{{ record.time }}</text>
+              <view class="more-menu" v-if="record.canEdit" @click.stop="toggleMenu(index)">
+                <text class="more-icon">⋮</text>
+                <view class="menu-dropdown" v-if="showMenuIndex === index" @click.stop>
+                  <view class="menu-item" @click="editRecord(index)">
+                    <text>编辑</text>
+                  </view>
+                  <view class="menu-item" @click="deleteRecord(index)">
+                    <text>删除</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="record-content-wrapper">
+            <text class="record-content-text">{{ record.content }}</text>
+            <text class="record-content-text">{{ record.content }}</text>
+            <text class="record-content-text">{{ record.content }}</text>
+          </view>
+          <view class="record-attachments" v-if="record.attachments && record.attachments.length > 0">
+            <view 
+              class="attachment-item" 
+              v-for="(attachment, attIndex) in record.attachments" 
+              :key="attIndex"
+            >
+              <view v-if="attachment.type === 'image'" class="image-placeholder"></view>
+              <view v-else class="file-attachment">
+                <text class="file-icon">📄</text>
+                <text class="file-name">{{ attachment.name }}</text>
+              </view>
+            </view>
+          </view>
+          <view class="delay-btn-wrapper" v-if="record.showDelayBtn">
+            <uv-button type="error" size="small" @click="applyDelay">申请延期</uv-button>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部操作按钮 -->
+    <view class="action-buttons">
+      <view class="btn-wrapper">
+        <uv-button type="primary" size="normal" @click="completeTask">完成任务</uv-button>
+      </view>
+      <view class="btn-wrapper">
+        <uv-button type="primary" size="normal" @click="submitTask">提交任务</uv-button>
+      </view>
+      <view class="btn-wrapper">
+        <uv-button type="error" size="normal" @click="applyDelay">申请延期</uv-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+// 当前激活的标签
+const activeTab = ref('info');
+const showMenuIndex = ref(-1);
+
+// 任务数据
+const task = ref({
+  id: null,
+  name: "待办任务名称",
+  project: "所属项目",
+  statusTags: ["已逾期", "紧急"],
+  deadline: "2025-10-14 18:00",
+  creator: "张珊珊",
+  responsible: "张珊珊、李志",
+  publishTime: "2025-10-17",
+  content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
+  submitRecords: [
+    {
+      userName: "张珊珊",
+      time: "2025-10-20 15:20:56",
+      content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
+      attachments: [
+        { type: "image" },
+        { type: "image" },
+        { type: "image" }
+      ],
+      canEdit: true,
+      showDelayBtn: false
+    },
+    {
+      userName: "李志",
+      time: "2025-10-20 15:20:56",
+      content: "任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。",
+      attachments: [
+        { type: "file", name: "AA_573_1280.JPG" }
+      ],
+      canEdit: false,
+      showDelayBtn: true
+    }
+  ]
+});
+
+// 切换标签
+const switchTab = (tab) => {
+  activeTab.value = tab;
+  showMenuIndex.value = -1; // 关闭菜单
+};
+
+// 切换菜单显示
+const toggleMenu = (index) => {
+  showMenuIndex.value = showMenuIndex.value === index ? -1 : index;
+};
+
+// 关闭菜单
+const closeMenu = () => {
+  showMenuIndex.value = -1;
+};
+
+// 编辑记录
+const editRecord = (index) => {
+  uni.showToast({
+    title: '编辑记录',
+    icon: 'none'
+  });
+  showMenuIndex.value = -1;
+};
+
+// 删除记录
+const deleteRecord = (index) => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要删除这条记录吗？',
+    success: (res) => {
+      if (res.confirm) {
+        task.value.submitRecords.splice(index, 1);
+        uni.showToast({
+          title: '已删除',
+          icon: 'success'
+        });
+      }
+      showMenuIndex.value = -1;
+    }
+  });
+};
+
+// 获取标签样式类
+const getTagClass = (status) => {
+  const statusMap = {
+    '已逾期': 'overdue',
+    '紧急': 'urgent',
+    '重要': 'important',
+    '普通': 'normal'
+  };
+  return statusMap[status] || 'normal';
+};
+
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
+// 完成任务
+const completeTask = () => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要完成任务吗？',
+    success: (res) => {
+      if (res.confirm) {
+        console.log("完成任务", task.value.id);
+        uni.showToast({
+          title: '任务已完成',
+          icon: 'success'
+        });
+        // 可以在这里添加完成任务的API调用
+      }
+    }
+  });
+};
+
+// 提交任务
+const submitTask = () => {
+  uni.showModal({
+    title: '提交任务',
+    content: '确定要提交任务吗？',
+    success: (res) => {
+      if (res.confirm) {
+        console.log("提交任务", task.value.id);
+        uni.showToast({
+          title: '任务已提交',
+          icon: 'success'
+        });
+        // 可以在这里添加提交任务的API调用
+      }
+    }
+  });
+};
+
+// 申请延期
+const applyDelay = () => {
+  uni.showModal({
+    title: '申请延期',
+    content: '确定要申请延期吗？',
+    success: (res) => {
+      if (res.confirm) {
+        console.log("申请延期", task.value.id);
+        uni.showToast({
+          title: '延期申请已提交',
+          icon: 'success'
+        });
+        // 可以在这里添加申请延期的API调用
+      }
+    }
+  });
+};
+
+// 加载任务数据（模拟）
+const loadTaskData = (taskId) => {
+  // 这里可以根据 taskId 从 API 加载任务数据
+  // 暂时使用模拟数据
+  if (taskId) {
+    // 可以根据 taskId 加载不同的任务数据
+    console.log('加载任务数据:', taskId);
+  }
+};
+
+// 页面加载时接收参数
+onLoad((options) => {
+  const taskId = options.id || options.taskId;
+  if (taskId) {
+    task.value.id = taskId;
+    loadTaskData(taskId);
+  }
+  
+  // 如果通过存储传递数据（类似于 event-detail 的方式）
+  const storedTask = uni.getStorageSync('taskDetailData');
+  if (storedTask) {
+    task.value = {
+      ...task.value,
+      ...storedTask
+    };
+    uni.removeStorageSync('taskDetailData');
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.task-detail-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部导航栏 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.back-btn {
+  font-size: 20px;
+  color: #333;
+  padding: 4px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.placeholder {
+  width: 28px;
+}
+
+/* 内容滚动区域 */
+.content-scroll {
+  flex: 1;
+  height: calc(100vh - 120px);
+}
+
+/* 任务状态栏 */
+.status-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 15px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.task-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.task-name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.project-name {
+  color: #666;
+  font-size: 14px;
+}
+
+.status-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tag {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.overdue {
+  background-color: #ffebee;
+  color: #d32f2f;
+}
+
+.urgent {
+  background-color: #fff3e0;
+  color: #f57c00;
+}
+
+.important {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.normal {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+/* 基本信息区域 */
+.basic-info {
+  padding: 15px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 8px;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 12px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.info-label {
+  width: 80px;
+  color: #666;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.info-value {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+/* 标签切换 */
+.tab-container {
+  display: flex;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  padding: 0 16px;
+}
+
+.tab-item {
+  flex: 1;
+  padding: 16px 0;
+  text-align: center;
+  position: relative;
+  
+  text {
+    font-size: 16px;
+    color: #666;
+    font-weight: 500;
+  }
+  
+  &.active {
+    text {
+      color: #1976d2;
+      font-weight: 600;
+    }
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60px;
+      height: 3px;
+      background-color: #1976d2;
+      border-radius: 2px;
+    }
+  }
+}
+
+/* 标签页内容 */
+.tab-content {
+  flex: 1;
+  padding: 16px;
+  background-color: #f5f5f5;
+  min-height: calc(100vh - 400px);
+}
+
+/* 任务信息卡片 */
+.task-info-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  position: relative;
+}
+
+.publish-time-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.clock-icon {
+  font-size: 16px;
+}
+
+.publish-time-text {
+  font-size: 14px;
+  color: #666;
+}
+
+.task-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.task-content-text {
+  font-size: 15px;
+  line-height: 1.8;
+  color: #333;
+}
+
+.delay-btn-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+/* 提交记录卡片 */
+.submit-record-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  position: relative;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.avatar-placeholder {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  flex-shrink: 0;
+}
+
+.user-name {
+  font-size: 15px;
+  color: #333;
+  font-weight: 500;
+}
+
+.record-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
+
+.record-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.more-menu {
+  position: relative;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+
+.more-icon {
+  font-size: 20px;
+  color: #666;
+  font-weight: bold;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(90deg);
+}
+
+.menu-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  margin-top: 4px;
+  min-width: 80px;
+}
+
+.menu-item {
+  padding: 10px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  text {
+    font-size: 14px;
+    color: #333;
+  }
+  
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
+
+.record-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.record-content-text {
+  font-size: 14px;
+  line-height: 1.8;
+  color: #333;
+}
+
+.record-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.attachment-item {
+  .image-placeholder {
+    width: 80px;
+    height: 80px;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+  }
+  
+  .file-attachment {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+  }
+  
+  .file-icon {
+    font-size: 16px;
+  }
+  
+  .file-name {
+    font-size: 14px;
+    color: #333;
+  }
+}
+
+.no-record {
+  color: #999;
+  font-size: 14px;
+  padding: 40px 0;
+  text-align: center;
+}
+
+/* 底部操作按钮 */
+.action-buttons {
+  display: flex;
+  padding: 15px;
+  gap: 10px;
+  background-color: #fff;
+  border-top: 1px solid #eee;
+  position: sticky;
+  bottom: 0;
+}
+
+.btn-wrapper {
+  flex: 1;
+  
+  :deep(.uv-button) {
+    width: 100%;
+  }
+}
+</style>