diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index 57f55e6..ce74316 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -195,8 +195,8 @@ const sendCreateWorkOrder = async () => {
   try {
     const res = await createWorkOrder({
       workOrderTypeId: workOrderTypeId.value,
-      roomId: roomId.value,
-      contactPhone: contactPhone.value,
+      roomNo: roomId.value,
+      userPhone: contactPhone.value,
       content: contactText.value,
       contentImgUrl: contentImgUrl.value,
     });
@@ -235,7 +235,7 @@ const viewWorkOrder = () => {
   console.log("查看工单:", workOrderId.value);
   // 这里可以跳转到工单详情页面
   uni.navigateTo({
-    url: `/pages-order/order/list?id=${workOrderId.value}`,
+    url: `/pages-service/order/list`,
   });
 };
 
diff --git a/src/pages-service/order/components/OrderCard/index.vue b/src/pages-service/order/components/OrderCard/index.vue
index 7c780d9..4be621c 100644
--- a/src/pages-service/order/components/OrderCard/index.vue
+++ b/src/pages-service/order/components/OrderCard/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <view
-    class="order-card bg-white border-box p-12 rounded-12 m-12"
-    @click="handleCardClick"
-  >
+  <view class="order-card bg-white border-box p-12 rounded-12 m-12">
     <!-- 卡片头部 -->
     <view class="border-box flex flex-items-center pb-12">
       <image
@@ -10,50 +7,63 @@
         src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png"
       />
       <text class="font-size-14 color-525866 line-height-20">工单</text>
-      <text class="font-size-12 color-525866 line-height-20 ml-auto"
-        >已完成</text
-      >
+      <text class="font-size-12 color-525866 line-height-20 ml-auto">{{
+        isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
+      }}</text>
     </view>
     <!-- 卡片内容 -->
     <view class="border-box card-content flex flex-items-center pb-12">
       <view class="border-box left flex-full pr-20">
         <view class="font-size-12 color-525866 line-height-20 mb-4"
-          >房间号：A01</view
+          >房间号：{{ orderData.roomNo }}</view
         >
         <view class="font-size-12 color-525866 line-height-20 mb-4"
-          >联系方式:173822042402</view
+          >联系方式: {{ orderData.userPhone }}</view
         >
         <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
-          >需求描述:我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！我太渴了，立即立刻马上现在给我送两瓶水过来！</view
+          >需求描述: {{ orderData.content }}</view
         >
       </view>
 
       <image
+        v-if="orderData.contentImgUrl"
         class="right rounded-6"
-        src="https://picsum.photos/300/300"
+        :src="orderData.contentImgUrl"
         mode="aspectFill"
       />
     </view>
 
     <!-- 服务人员 -->
     <view
+      v-if="orderData.processMemberName && orderData.processMemberPhone"
       class="service-user border-box p-8 flex flex-items-center flex-justify-between mb-12"
     >
-      <view class="font-size-12 line-height-16">服务人员：张三</view>
-
+      <view class="font-size-12 line-height-16"
+        >服务人员：{{ orderData.processMemberName }}</view
+      >
       <uni-icons
         class="ml-auto mr-4"
         type="phone-filled"
         size="14"
         color="#436799"
       />
-      <text class="font-size-12 line-height-16">拨打电话</text>
+      <text class="font-size-12 line-height-16" @click="callService"
+        >拨打电话</text
+      >
     </view>
 
     <!-- 取消操作 -->
-    <view class="flex flex-items-center flex-justify-between">
+    <view
+      v-if="
+        !isCancelWork &&
+        orderData.workOrderStatus !== '2' &&
+        orderData.workOrderStatus !== '3'
+      "
+      class="flex flex-items-center flex-justify-between"
+    >
       <text
         class="cancel border-box border rounded-6 font-size-12 line-height-16 color-525866 ml-auto"
+        @click="cancelCall"
         >取消呼叫</text
       >
     </view>
@@ -62,18 +72,55 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { closeWorkOrder } from "@/request/api/OrderApi";
+import { ref } from "vue";
+const isCancelWork = ref(false);
 
 // Props
 const props = defineProps({
-  item: {
+  orderData: {
     type: Object,
     required: true,
     default: () => ({}),
   },
 });
 
-// 处理卡片点击
-const handleCardClick = () => {};
+/// 工单状态 0-待接单 1-处理中 2-已完成 3-已关闭
+const workOrderStatus = (status) => {
+  if (status === "0") {
+    return "待处理";
+  } else if (status === "1") {
+    return "处理中";
+  } else if (status === "2") {
+    return "已完成";
+  } else if (status === "3") {
+    return "已取消";
+  } else {
+    return "";
+  }
+};
+
+// 拨打电话
+const callService = () => {
+  uni.makePhoneCall({
+    phoneNumber: props.orderData.processMemberPhone,
+  });
+};
+
+// 取消呼叫
+const cancelCall = async () => {
+  const res = await closeWorkOrder({
+    workOrderId: props.orderData.id,
+  });
+  if (res.data) {
+    isCancelWork.value = true;
+  }
+  uni.showToast({
+    title: res.data ? "取消呼叫成功" : res.message || "取消呼叫失败",
+    icon: "success",
+    duration: 2000,
+  });
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/request/api/OrderApi.js b/src/request/api/OrderApi.js
index 69404e0..3bfbe74 100644
--- a/src/request/api/OrderApi.js
+++ b/src/request/api/OrderApi.js
@@ -19,6 +19,11 @@ const createWorkOrder = (args) => {
   return request.post("/hotelBiz/workOrder/createWorkOrder", args);
 };
 
+// 关闭工单
+const closeWorkOrder = (args) => {
+  return request.post("/hotelBiz/workOrder/closeWorkOrder", args);
+};
+
 // 获取订单详情
 const userOrderDetail = (args) => {
   return request.post("/hotelBiz/order/userOrderDetail", args);
@@ -49,6 +54,7 @@ export {
   userWorkOrderList,
   workOrderTypeListForBiz,
   createWorkOrder,
+  closeWorkOrder,
   userOrderDetail,
   preOrder,
   orderCancel,