diff --git a/api/task.js b/api/task.js
index 2ad4eb2..2460969 100644
--- a/api/task.js
+++ b/api/task.js
@@ -174,6 +174,25 @@ export const createTask = (payload) => {
   });
 };
 
+/**
+ * 取消任务
+ * @param {Object} params 请求参数
+ * @param {string} params.id 任务ID
+ * @param {string} params.cancelRemark 取消备注
+ * @returns {Promise} 返回取消结果
+ */
+export const cancelTask = ({ id, cancelRemark }) => {
+  return uni.$uv.http.put('/bst/task/cancel', {
+    id: id,
+    cancelRemark: cancelRemark || ''
+  }, {
+    custom: {
+      auth: true,  // 启用 token 认证
+      catch: true
+    }
+  });
+};
+
 /**
  * 获取全部项目列表
  * @returns {Promise<Array>} 项目列表
diff --git a/pages/task/detail/index.vue b/pages/task/detail/index.vue
index 67fd038..b06df1e 100644
--- a/pages/task/detail/index.vue
+++ b/pages/task/detail/index.vue
@@ -194,7 +194,46 @@
         <uv-button type="primary" size="normal" @click="submitTask">提交任务</uv-button>
       </view>
       <view class="btn-wrapper" v-if="showCancelBtn">
-        <uv-button type="error" size="normal" @click="cancelTask">取消任务</uv-button>
+        <uv-button type="error" size="normal" @click="openCancelModal">取消任务</uv-button>
+      </view>
+    </view>
+
+    <!-- 取消任务模态框 -->
+    <view v-if="showCancelModal" class="cancel-modal">
+      <view class="modal-mask" @click="closeCancelModal"></view>
+      <view class="modal-panel" @click.stop>
+        <view class="modal-header">
+          <text class="modal-title">取消任务</text>
+          <text class="modal-close" @click="closeCancelModal">✕</text>
+        </view>
+        <view class="modal-body">
+          <view class="form-item">
+            <text class="form-label">取消备注</text>
+            <view class="input-wrapper">
+              <textarea 
+                v-model="cancelRemark"
+                class="cancel-remark-input" 
+                placeholder="请输入取消备注" 
+                placeholder-style="color: #999;"
+                :maxlength="200"
+                auto-height
+              />
+              <view class="char-count">{{ cancelRemark.length }}/200</view>
+            </view>
+          </view>
+        </view>
+        <view class="modal-actions">
+          <uv-button size="small" @click="closeCancelModal" :disabled="cancelling">取消</uv-button>
+          <uv-button
+            type="primary"
+            size="small"
+            @click="confirmCancelTask"
+            :loading="cancelling"
+            :disabled="cancelling"
+          >
+            确定
+          </uv-button>
+        </view>
       </view>
     </view>
 
@@ -207,7 +246,7 @@ import { storeToRefs } from 'pinia';
 import { getStatusFromTagText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
 import { useTaskStore } from '@/store/task';
 import { useUserStore } from '@/store/user';
-import { getTaskDetail } from '@/api';
+import { getTaskDetail, cancelTask as cancelTaskApi } from '@/api';
 
 // 当前激活的标签
 const activeTab = ref('info');
@@ -847,22 +886,77 @@ const applyDelay = () => {
   });
 };
 
-// 取消任务
-const cancelTask = () => {
-  uni.showModal({
-    title: '提示',
-    content: '确定要取消任务吗？',
-    success: (res) => {
-      if (res.confirm) {
-        console.log("取消任务", task.value.id);
-        uni.showToast({
-          title: '任务已取消',
-          icon: 'success'
-        });
-        // 可以在这里添加取消任务的API调用
-      }
-    }
+// 取消任务相关状态
+const showCancelModal = ref(false);
+const cancelRemark = ref('');
+const cancelling = ref(false);
+
+// 打开取消任务模态框
+const openCancelModal = () => {
+  cancelRemark.value = '';
+  showCancelModal.value = true;
+};
+
+// 关闭取消任务模态框
+const closeCancelModal = () => {
+  if (cancelling.value) return; // 提交中不允许关闭
+  showCancelModal.value = false;
+  cancelRemark.value = '';
+};
+
+// 确认取消任务
+const confirmCancelTask = async () => {
+  if (!task.value.id) {
+    uni.showToast({
+      title: '任务ID不能为空',
+      icon: 'none'
+    });
+    return;
+  }
+
+  if (!cancelRemark.value.trim()) {
+    uni.showToast({
+      title: '请输入取消备注',
+      icon: 'none'
+    });
+    return;
+  }
+
+  cancelling.value = true;
+  uni.showLoading({
+    title: '取消中...'
   });
+
+  try {
+    await cancelTaskApi({
+      id: task.value.id,
+      cancelRemark: cancelRemark.value.trim()
+    });
+
+    uni.hideLoading();
+    uni.showToast({
+      title: '任务已取消',
+      icon: 'success'
+    });
+
+    // 关闭模态框
+    showCancelModal.value = false;
+    cancelRemark.value = '';
+
+    // 刷新任务列表
+    uni.$emit('taskListRefresh');
+
+    // 延迟返回上一页
+    setTimeout(() => {
+      uni.navigateBack();
+    }, 1500);
+  } catch (error) {
+    uni.hideLoading();
+    console.error('取消任务失败:', error);
+    // 错误提示已在响应拦截器中统一处理
+  } finally {
+    cancelling.value = false;
+  }
 };
 
 // 加载任务数据
@@ -1512,7 +1606,118 @@ onShow(() => {
 
 .btn-wrapper {
   flex: 1;
-  
+}
 
+/* 取消任务模态框 */
+.cancel-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+
+.cancel-modal .modal-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.cancel-modal .modal-panel {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 500px;
+  background: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+.cancel-modal .modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.cancel-modal .modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.cancel-modal .modal-close {
+  font-size: 24px;
+  color: #999;
+  cursor: pointer;
+  line-height: 1;
+  
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.cancel-modal .modal-body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.cancel-modal .form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cancel-modal .form-label {
+  font-size: 14px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.cancel-modal .input-wrapper {
+  position: relative;
+  border: 1px solid #2885ff;
+  border-radius: 8px;
+  background: #fff;
+  padding: 12px;
+  padding-bottom: 32px;
+}
+
+.cancel-modal .cancel-remark-input {
+  width: 100%;
+  min-height: 100px;
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  resize: none;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.cancel-modal .char-count {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  font-size: 12px;
+  color: #999;
+}
+
+.cancel-modal .modal-actions {
+  display: flex;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid #f2f2f2;
+  justify-content: flex-end;
 }
 </style>