From 932078c3dc5f2741fb5a8fe380b57edb7beccfaf Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 6 Aug 2025 21:58:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5=E4=BA=86=E5=91=BC?=
 =?UTF-8?q?=E5=8F=AB=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CreateServiceOrder/index.vue       | 124 +++++++++++++++++-
 components/CreateServiceOrder/prompt.md       |   4 +
 .../CreateServiceOrder/styles/index.scss      |  37 ++++++
 request/api/OrderApi.js                       |   6 +
 4 files changed, 166 insertions(+), 5 deletions(-)

diff --git a/components/CreateServiceOrder/index.vue b/components/CreateServiceOrder/index.vue
index 476967a..6c42208 100644
--- a/components/CreateServiceOrder/index.vue
+++ b/components/CreateServiceOrder/index.vue
@@ -21,22 +21,42 @@
           </view>
           <view class="detail-item">
             <text class="detail-label">联系房客：</text>
+            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
             <input
+              v-if="!isCallSuccess"
               class="detail-input"
               placeholder="请填写联系人"
               v-model="contactName"
             />
+            <text v-else class="detail-value">{{ contactName }}</text>
           </view>
           <view class="detail-item">
             <text class="detail-label">联系电话：</text>
+            <!-- 呼叫成功后显示为文本，否则显示输入框 -->
             <input
+              v-if="!isCallSuccess"
               class="detail-input"
               placeholder="请填写联系电话"
               v-model="contactPhone"
             />
+            <text v-else class="detail-value">{{ contactPhone }}</text>
           </view>
         </view>
-        <button class="order-button" @click="handleCall">立即呼叫</button>
+        
+        <!-- 呼叫前显示立即呼叫按钮 -->
+        <button v-if="!isCallSuccess" class="order-button" @click="handleCall">
+          立即呼叫
+        </button>
+        
+        <!-- 呼叫成功后显示两个按钮 -->
+        <view v-else class="order-buttons">
+          <button class="order-button-secondary" @click="viewWorkOrder">
+            查看工单
+          </button>
+          <button class="order-button-primary" @click="markCompleted">
+            已完成
+          </button>
+        </view>
       </view>
     </view>
 
@@ -49,14 +69,100 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, nextTick } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+
+
+import { createWorkOrder } from "@/request/api/OrderApi";
 
 const contactName = ref("");
 const contactPhone = ref("");
+const isCallSuccess = ref(false); // 呼叫成功状态
+const workOrderId = ref(""); // 工单ID
 
-const handleCall = () => {
-  // Logic to handle the call action
-  console.log("Calling with:", contactName.value, contactPhone.value);
+const handleCall = async () => {
+  // 验证输入
+  if (!contactName.value.trim()) {
+    uni.showToast({
+      title: '请填写联系人',
+      icon: 'none',
+      duration: 2000
+    });
+    return;
+  }
+  
+  if (!contactPhone.value.trim()) {
+    uni.showToast({
+      title: '请填写联系电话',
+      icon: 'none',
+      duration: 2000
+    });
+    return;
+  }
+
+  try {
+    const res = await createWorkOrder({
+      contactName: contactName.value,
+      contactPhone: contactPhone.value,
+      workOrderTypeId: '1942741501754765314',
+      roomId: '302',
+    });
+
+    if (res.code === 0) {
+      // 保存工单ID
+      workOrderId.value = res.data?.id || "";
+      
+      // 设置呼叫成功状态
+      isCallSuccess.value = true;
+      
+      uni.showToast({
+        title: '工单创建成功',
+        icon: 'success',
+        duration: 2000
+      });
+    } else {
+      uni.showToast({
+        title: res.message || '创建工单失败',
+        icon: 'none',
+        duration: 2000
+      });
+    }
+  } catch (error) {
+    console.error('创建工单失败:', error);
+    uni.showToast({
+      title: '网络错误，请重试',
+      icon: 'none',
+      duration: 2000
+    });
+  }
+};
+
+// 查看工单
+const viewWorkOrder = () => {
+  console.log("查看工单:", workOrderId.value);
+  // 这里可以跳转到工单详情页面
+  uni.navigateTo({
+    url: `/pages/order/list?id=${workOrderId.value}`
+  });
+};
+
+// 标记已完成
+const markCompleted = () => {
+  console.log("标记工单已完成:", workOrderId.value);
+  uni.showModal({
+    title: '确认完成',
+    content: '确认标记此工单为已完成吗？',
+    success: (res) => {
+      if (res.confirm) {
+        // 这里可以调用API标记工单完成
+        uni.showToast({
+          title: '工单已完成',
+          icon: 'success',
+          duration: 2000
+        });
+      }
+    }
+  });
 };
 
 const makePhoneCall = () => {
@@ -65,6 +171,14 @@ const makePhoneCall = () => {
     phoneNumber: "15185111210",
   });
 };
+
+onMounted(() => {
+		nextTick(() => {
+				setTimeout(() => {
+					uni.$emit(SCROLL_TO_BOTTOM, true)
+				}, 200)
+			});
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/CreateServiceOrder/prompt.md b/components/CreateServiceOrder/prompt.md
index 311ea38..3941ba3 100644
--- a/components/CreateServiceOrder/prompt.md
+++ b/components/CreateServiceOrder/prompt.md
@@ -8,6 +8,10 @@
 联系电话：
 立即呼叫按钮
 
+呼叫成功之后 
+1、呼叫按钮变为两个按钮 查看工单和已完成，见图中的布局
+2、联系人和联系电话，仅展示，不能编辑
+
 ## 提示词：
 
 使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
diff --git a/components/CreateServiceOrder/styles/index.scss b/components/CreateServiceOrder/styles/index.scss
index 55741f8..0027ca4 100644
--- a/components/CreateServiceOrder/styles/index.scss
+++ b/components/CreateServiceOrder/styles/index.scss
@@ -121,6 +121,43 @@
   justify-content: center;
 }
 
+// 呼叫成功后的按钮容器
+.order-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  gap: 12px;
+}
+
+// 查看工单按钮（次要按钮）
+.order-button-secondary {
+  flex: 1;
+  height: 42px;
+  background: linear-gradient(90deg, #0256FF, #00A6FF);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 已完成按钮（主要按钮）
+.order-button-primary {
+  flex: 1;
+  height: 42px;
+  background: linear-gradient(90deg, #ff7e00, #ffba00);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .footer-help {
   margin-bottom: 12px;
   display: flex;
diff --git a/request/api/OrderApi.js b/request/api/OrderApi.js
index ddeb103..566e72a 100644
--- a/request/api/OrderApi.js
+++ b/request/api/OrderApi.js
@@ -9,6 +9,11 @@ const userWorkOrderList = (args) => {
   return request.post("/hotelBiz/workOrder/userWorkOrderList", args);
 };
 
+/// 创建工单
+function createWorkOrder(args) {
+	return request.post('/hotelBiz/workOrder/createWorkOrder', args);
+}
+
 // 获取订单详情
 const userOrderDetail = (args) => {
   return request.post("/hotelBiz/order/userOrderDetail", args);
@@ -37,6 +42,7 @@ const orderPayNow = (args) => {
 export {
   userOrderList,
   userWorkOrderList,
+  createWorkOrder,
   userOrderDetail,
   preOrder,
   orderCancel,