diff --git a/src/pagesOrder/detail/detail.vue b/src/pagesOrder/detail/detail.vue
index d3101c7..1d9f1d7 100644
--- a/src/pagesOrder/detail/detail.vue
+++ b/src/pagesOrder/detail/detail.vue
@@ -217,6 +217,7 @@ import { OrderState, orderStateList } from '@/services/constants'
 import {
   deleteMemberOrderAPI,
   getMemberOrderByIdAPI,
+  getMemberOrderCancelByIdAPI,
   getMemberOrderConsignmentByIdAPI,
   getMemberOrderLogisticsByIdAPI,
   putMemberOrderReceiptByIdAPI,
@@ -373,6 +374,18 @@ const onOrderDelete = () => {
     },
   })
 }
+
+// 取消订单
+const onOrderCancel = async () => {
+  // 发送请求
+  const res = await getMemberOrderCancelByIdAPI(query.id, { cancelReason: reason.value })
+  // 更新订单信息
+  order.value = res.result
+  // 关闭弹窗
+  popup.value?.close!()
+  // 轻提示
+  uni.showToast({ icon: 'none', title: '订单取消成功' })
+}
 </script>
 
 <style lang="scss">
diff --git a/src/services/order.ts b/src/services/order.ts
index cb1b3f5..f70fb44 100644
--- a/src/services/order.ts
+++ b/src/services/order.ts
@@ -113,3 +113,17 @@ export const deleteMemberOrderAPI = (data: { ids: string[] }) => {
     data,
   })
 }
+
+/**
+ * 取消订单
+ * @description 仅在订单状态为待付款时，可取消订单。
+ * @param id 订单id
+ * @param data cancelReason 取消理由
+ */
+export const getMemberOrderCancelByIdAPI = (id: string, data: { cancelReason: string }) => {
+  return http<OrderResult>({
+    method: 'PUT',
+    url: `/member/order/${id}/cancel`,
+    data,
+  })
+}