feat: 创建服务工单的

components/CreateServiceOrder/index.vue

@@ -6,19 +6,27 @@
       </view>
       <view class="order-content">
         <view class="order-item">
-          <image src="./images/icon_service.png" class="order-icon"></image>
-          <text class="order-description">{{ workOrderTypeName }}</text>
+            <image src="./images/icon_service.png" class="order-icon"></image>
+            <uni-data-select
+                v-if="!isCallSuccess && workOrderTypeList.length > 0"
+                class="order-select"
+                placeholder="请选择服务工单"
+                v-model="workOrderTypeName"
+                :localdata="workOrderTypeList"
+                @change="changeWorkOrderType"
+              ></uni-data-select>
+            <text v-else class="order-description">{{ workOrderTypeName }}</text>
         </view>
         <view class="order-line"></view>
         <view class="order-details">
           <view class="detail-item">
-            <text class="detail-label">房间号：</text>
-            <input
-              v-if="!isCallSuccess"
-              class="detail-input"
-              placeholder="请填写房间号"
-              v-model="roomId"
-            />
+            <text class="detail-label">房间号：</text>
+            <input
+              v-if="!isCallSuccess"
+              class="detail-input"
+              placeholder="请填写房间号"
+              v-model="roomId"
+            />
             <text v-else class="detail-value">{{ roomId }}</text>
           </view>
           <view class="detail-item">
@@ -80,25 +88,31 @@ import { SCROLL_TO_BOTTOM } from "@/constant/constant";
 
 
 import { createWorkOrder, workOrderTypeListForBiz } from "@/request/api/OrderApi";
-const workOrderTypeId = ref('')
-const workOrderTypeName = ref('')
+const workOrderTypeId = ref('')
+const workOrderTypeName = ref('')
 const roomId = ref('')
 const contactName = ref("");
 const contactPhone = ref("");
 const isCallSuccess = ref(false); // 呼叫成功状态
-const workOrderId = ref(""); // 工单ID
+const workOrderId = ref(0); // 工单ID
+const workOrderTypeList = ref([])
 
+const changeWorkOrderType = (item) => {
+  console.log(item)
+  workOrderTypeId.value = item.value
+  workOrderTypeName.value = item.text
+}
 
 const handleCall = async () => {
-    // 验证输入
-    if (!roomId.value.trim()) {
-        uni.showToast({
-          title: '请填写房间号',
-          icon: 'none',
-          duration: 2000
-        });
-        return;
-    }
+    // 验证输入
+    if (!roomId.value.trim()) {
+        uni.showToast({
+          title: '请填写房间号',
+          icon: 'none',
+          duration: 2000
+        });
+        return;
+    }
 
     if (!contactName.value.trim()) {
         uni.showToast({
@@ -119,54 +133,63 @@ const handleCall = async () => {
     }
 
     sendCreateWorkOrder()
-};
-
-/// 创建工单
-const sendCreateWorkOrder = async () => {
-    try {
-      const res = await createWorkOrder({
-        contactName: contactName.value,
-        contactPhone: contactPhone.value,
-        workOrderTypeId: workOrderTypeId.value,
-        roomId: roomId.value,
-      });
-
-      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 getWorkOrderType = async () => {
-	const res = await workOrderTypeListForBiz()
-    if(res.code === 0) {
-        workOrderTypeId.value = res.data.id
-        workOrderTypeName.value = res.data.workOrderTypeName
-    }
+};
+
+/// 创建工单
+const sendCreateWorkOrder = async () => {
+    try {
+      const res = await createWorkOrder({
+        contactName: contactName.value,
+        contactPhone: contactPhone.value,
+        workOrderTypeId: workOrderTypeId.value,
+        roomId: roomId.value,
+      });
+
+      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 getWorkOrderType = async () => {
+	const res = await workOrderTypeListForBiz()
+    if(res.code === 0) {
+        res.data.forEach((item, index) => {
+            workOrderTypeList.value.push({
+                value: item.id,
+                text: item.workOrderTypeName,
+            })
+        })
+
+        if (workOrderTypeList.value.length > 0) {
+            workOrderTypeId.value = workOrderTypeList.value[0].value
+            workOrderTypeName.value = workOrderTypeList.value[0].text
+        }
+    }
 }
 
 // 查看工单
@@ -204,7 +227,7 @@ const makePhoneCall = () => {
   });
 };
 
-onMounted(() => {
+onMounted(() => {
     getWorkOrderType()
     nextTick(() => {
         setTimeout(() => {

components/CreateServiceOrder/styles/index.scss

@@ -107,6 +107,15 @@
   border-bottom: 1px solid #ddd;
 }
 
+.order-select {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 14px;
+  color: #999;
+  border-bottom: 1px solid #ddd;
+}
+
 .order-button {
   width: 280px;
   height: 42px;