feat: 调整项目结构

src/components/CreateServiceOrder/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <view class="create-service-order">
+    <view class="create-service-wrapper">
+      <view class="order-header">
+        <text>创建服务工单</text>
+      </view>
+      <view class="order-content">
+        <view class="order-item">
+          <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="workOrderTypeListSelectData"
+            @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 v-else class="detail-value">{{ roomId }}</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">服务时间：</text>
+            <text class="detail-value">2025-08-11 14:00</text>
+          </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 v-if="!isCallSuccess" class="order-button" @click="handleCall">
+          立即呼叫
+        </button>
+
+        <!-- 呼叫成功后显示两个按钮 -->
+        <view v-else class="order-buttons">
+          <button class="order-button-secondary" @click="viewWorkOrder">
+            查看工单
+          </button>
+          <button
+            v-if="!isMarkCompleted"
+            class="order-button-primary"
+            @click="markCompleted"
+          >
+            已完成
+          </button>
+        </view>
+      </view>
+    </view>
+
+    <view class="footer-help">
+      <image src="./images/icon_volume.png" class="help-icon"></image>
+      <text class="help-text">没解决问题？给我打电话吧！</text>
+      <text class="help-phone" @click="makePhoneCall">15185111210</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+
+import {
+  createWorkOrder,
+  workOrderTypeListForBiz,
+} from "@/request/api/OrderApi";
+const workOrderTypeId = ref("");
+const workOrderTypeName = ref("");
+const roomId = ref("");
+const contactName = ref("");
+const contactPhone = ref("");
+const isCallSuccess = ref(false); // 呼叫成功状态
+const workOrderId = ref(0); // 工单ID
+const workOrderTypeList = ref([]);
+const workOrderTypeListSelectData = ref([]);
+const isMarkCompleted = ref(false);
+
+const changeWorkOrderType = (index) => {
+  if (index < 0 || index >= workOrderTypeListSelectData.value.length) {
+    return;
+  }
+  const item = workOrderTypeList.value[index];
+  console.log("item:", item);
+  workOrderTypeId.value = item.id;
+  workOrderTypeName.value = item.workOrderTypeName;
+};
+
+const handleCall = async () => {
+  // 验证输入
+  if (!roomId.value.trim()) {
+    uni.showToast({
+      title: "请填写房间号",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
+  if (!contactName.value.trim()) {
+    uni.showToast({
+      title: "请填写联系人",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
+  if (!contactPhone.value.trim()) {
+    uni.showToast({
+      title: "请填写联系电话",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
+  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) {
+    workOrderTypeList.value = res.data;
+    workOrderTypeList.value.forEach((item, index) => {
+      workOrderTypeListSelectData.value.push({
+        value: index,
+        text: item.workOrderTypeName,
+      });
+    });
+
+    if (workOrderTypeList.value.length > 0) {
+      workOrderTypeId.value = workOrderTypeList.value[0].id;
+      workOrderTypeName.value = workOrderTypeList.value[0].workOrderTypeName;
+    }
+  }
+};
+
+// 查看工单
+const viewWorkOrder = () => {
+  console.log("查看工单:", workOrderId.value);
+  // 这里可以跳转到工单详情页面
+  uni.navigateTo({
+    url: `/pages-order/order/list?id=${workOrderId.value}`,
+  });
+};
+
+// 标记已完成
+const markCompleted = () => {
+  console.log("标记工单已完成:", workOrderId.value);
+  uni.showModal({
+    title: "确认完成",
+    content: "确认标记此工单为已完成吗？",
+    success: (res) => {
+      if (res.confirm) {
+        isMarkCompleted.value = true;
+        // 这里可以调用API标记工单完成
+        uni.showToast({
+          title: "工单已完成",
+          icon: "success",
+          duration: 2000,
+        });
+      }
+    },
+  });
+};
+
+const makePhoneCall = () => {
+  // 使用 uniapp 的 API 拨打电话
+  uni.makePhoneCall({
+    phoneNumber: "15185111210",
+  });
+};
+
+onMounted(() => {
+  getWorkOrderType();
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 200);
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@use "./styles/index.scss";
+</style>

src/components/CreateServiceOrder/prompt.md

@@ -0,0 +1,25 @@
+## 消息体组件信息
+
+组件名称：消息体创建服务工单
+服务名称：加一台麻将机
+房间号：302
+服务时间：2025-09-12 12:00
+联系房客：
+联系电话：
+立即呼叫按钮
+
+呼叫成功之后 
+1、呼叫按钮变为两个按钮 查看工单和已完成，见图中的布局
+2、联系人和联系电话，仅展示，不能编辑
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.create-service-order
+3、可以使用 uniapp 内置的组件
+4、联系房客/联系电话，需要用户自己填写
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

src/components/CreateServiceOrder/styles/index.scss

@@ -0,0 +1,179 @@
+.create-service-wrapper {
+  padding: 12px 0;
+}
+
+.order-header {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.order-content {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.order-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.order-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background-color: #ffa500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.order-description {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.order-line {
+  position: relative;
+  border: 1px dashed #eeeeee;
+  margin-left: -12px;
+  margin-right: -12px;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: -8px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50px;
+    background-color: #eff6fa;
+  }
+
+  &::before {
+    left: -8px;
+  }
+
+  &::after {
+    right: -8px;
+  }
+}
+
+.order-details {
+  margin-top: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #333;
+}
+
+.detail-label {
+  width: 70px;
+  margin-right: 10px;
+}
+
+.detail-value {
+  color: #333;
+}
+
+.detail-input {
+  border: none;
+  outline: none;
+  width: calc(100% - 80px);
+  font-size: 14px;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+}
+
+.order-select {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+}
+
+.order-button {
+  width: 300px;
+  height: 42px;
+  background: linear-gradient(90deg, #ff7e00, #ffba00);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 20px;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  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;
+  align-items: center;
+  font-size: 14px;
+  color: #ed6a0c;
+}
+
+.help-icon {
+  width: 16px;
+  height: 14px;
+  margin-right: 5px;
+}
+
+.help-text {
+  margin-right: 5px;
+}
+
+.help-phone {
+  cursor: pointer;
+}