feat: 提交创建服务工单组件封装

components/create-service-order/index.vue

@@ -0,0 +1,72 @@
+<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>
+          <text class="order-description">加一台麻将机</text>
+        </view>
+        <view class="order-line"></view>
+        <view class="order-details">
+          <view class="detail-item">
+            <text class="detail-label">房间号：</text>
+            <text class="detail-value">302</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">服务时间：</text>
+            <text class="detail-value">2025-09-12 12:00</text>
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">联系房客：</text>
+            <input
+              class="detail-input"
+              placeholder="请填写联系人"
+              v-model="contactName"
+            />
+          </view>
+          <view class="detail-item">
+            <text class="detail-label">联系电话：</text>
+            <input
+              class="detail-input"
+              placeholder="请填写联系电话"
+              v-model="contactPhone"
+            />
+          </view>
+        </view>
+        <button class="order-button" @click="handleCall">立即呼叫</button>
+      </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 } from "vue";
+
+const contactName = ref("");
+const contactPhone = ref("");
+
+const handleCall = () => {
+  // Logic to handle the call action
+  console.log("Calling with:", contactName.value, contactPhone.value);
+};
+
+const makePhoneCall = () => {
+  // 使用 uniapp 的 API 拨打电话
+  uni.makePhoneCall({
+    phoneNumber: "15185111210",
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/create-service-order/prompt.md

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

components/create-service-order/styles/index.scss

@@ -0,0 +1,144 @@
+.create-service-order {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.create-service-wrapper {
+  box-sizing: border-box;
+  padding: 12px 12px 16px;
+  background-color: #eff6fa;
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px 20px 20px 20px;
+  border: 1px solid #fff;
+}
+
+.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: #666;
+}
+
+.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: #999;
+  border-bottom: 1px solid #ddd;
+}
+
+.order-button {
+  width: 280px;
+  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;
+}
+
+.footer-help {
+  margin-top: 8px;
+  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;
+}