feat: 意见反馈调整

src/components/CreateServiceOrder/index.vue

@@ -1,87 +1,73 @@
 <template>
   <view class="create-service-order">
-    <view class="create-service-wrapper">
+    <view
-      <view class="order-header">
+      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
-        <text>创建服务工单</text>
+    >
+      <view
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
+      >
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
+          {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
       </view>
-      <view class="order-content">
+
-        <view class="order-item">
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
-          <image src="./images/icon_service.png" class="order-icon"></image>
+        <view
-          <uni-data-select
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
-            v-if="!isCallSuccess && workOrderTypeList.length > 0"
+        >
-            class="order-select"
+          <text class="font-500 line-height-22 mr-20">房间号</text>
-            placeholder="请选择服务工单"
+          <input placeholder="请填写房间号" v-model="roomId" />
-            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>
 
-        <!-- 呼叫前显示立即呼叫按钮 -->
+        <view
-        <button v-if="!isCallSuccess" class="order-button" @click="handleCall">
+          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
-          立即呼叫
+        >
-        </button>
+          <text class="font-500 line-height-22 mr-20">联系电话</text>
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
+        </view>
 
-        <!-- 呼叫成功后显示两个按钮 -->
+        <view
-        <view v-else class="order-buttons">
+          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
-          <button class="order-button-secondary" @click="viewWorkOrder">
+        >
-            查看工单
+          <view class="font-500 line-height-22 mb-12">需求信息描述</view>
-          </button>
+          <textarea
-          <button
+            placeholder="请输入需求信息描述"
-            v-if="!isMarkCompleted"
+            maxlength="100"
-            class="order-button-primary"
+            v-model="contactText"
-            @click="markCompleted"
+          />
+        </view>
+      </view>
+
+      <view v-else class="border-box card-content flex flex-items-center p-12">
+        <view class="border-box left flex-full pr-20">
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >房间号：{{ roomId }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 mb-4"
+            >联系方式: {{ contactPhone }}</view
+          >
+          <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+            >需求描述: {{ contactText }}</view
           >
-            已完成
-          </button>
         </view>
-      </view>
-    </view>
 
-    <view class="footer-help">
+        <image
-      <image src="./images/icon_volume.png" class="help-icon"></image>
+          class="right rounded-6"
-      <text class="help-text">没解决问题？给我打电话吧！</text>
+          src="https://picsum.photos/300/300"
-      <text class="help-phone" @click="makePhoneCall">15185111210</text>
+          mode="aspectFill"
+        />
+      </view>
+
+      <view
+        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+        @click="handleCall"
+      >
+        {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
+      </view>
     </view>
   </view>
 </template>
@@ -89,49 +75,20 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
 import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { createWorkOrder } from "@/request/api/OrderApi";
 
-import {
-  createWorkOrder,
-  workOrderTypeListForBiz,
-} from "@/request/api/OrderApi";
 const workOrderTypeId = ref("");
-const workOrderTypeName = ref("");
 const roomId = ref("");
-const contactName = ref("");
 const contactPhone = ref("");
+const contactText = ref("");
+const contentImgUrl = 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 (isCallSuccess.value) {
-  if (!roomId.value.trim()) {
+    // 查看工单
-    uni.showToast({
+    viewWorkOrder();
-      title: "请填写房间号",
-      icon: "none",
-      duration: 2000,
-    });
-    return;
-  }
-
-  if (!contactName.value.trim()) {
-    uni.showToast({
-      title: "请填写联系人",
-      icon: "none",
-      duration: 2000,
-    });
     return;
   }
 
@@ -144,6 +101,15 @@ const handleCall = async () => {
     return;
   }
 
+  if (!contactText.value.trim()) {
+    uni.showToast({
+      title: "请填写需求信息描述内容",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
   sendCreateWorkOrder();
 };
 
@@ -151,33 +117,34 @@ const handleCall = async () => {
 const sendCreateWorkOrder = async () => {
   try {
     const res = await createWorkOrder({
-      contactName: contactName.value,
-      contactPhone: contactPhone.value,
       workOrderTypeId: workOrderTypeId.value,
       roomId: roomId.value,
+      contactPhone: contactPhone.value,
+      content: contactText.value,
+      contentImgUrl: contentImgUrl.value,
     });
 
     if (res.code === 0) {
       // 保存工单ID
       workOrderId.value = res.data?.id || "";
 
-      // 设置呼叫成功状态
+      // 设置成功状态
       isCallSuccess.value = true;
 
       uni.showToast({
-        title: "工单创建成功",
+        title: "呼叫成功",
         icon: "success",
         duration: 2000,
       });
     } else {
       uni.showToast({
-        title: res.message || "创建工单失败",
+        title: res.message || "呼叫失败",
         icon: "none",
         duration: 2000,
       });
     }
   } catch (error) {
-    console.error("创建工单失败:", error);
+    console.error("呼叫失败:", error);
     uni.showToast({
       title: "网络错误，请重试",
       icon: "none",
@@ -186,25 +153,6 @@ const sendCreateWorkOrder = async () => {
   }
 };
 
-/// 获取工单类型
-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);
@@ -214,35 +162,7 @@ const viewWorkOrder = () => {
   });
 };
 
-// 标记已完成
-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);

src/components/CreateServiceOrder/styles/index.scss

@@ -1,179 +1,25 @@
-.create-service-wrapper {
-  padding: 12px 0;
-}
-
 .order-header {
-  font-size: $uni-font-size-base;
+  height: 48px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: $uni-text-color;
 }
 
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
 .order-content {
-  width: 100%;
+  width: 335px;
-  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: $uni-border-radius-circle;
-  background-color: #ffa500;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.order-description {
-  font-size: $uni-font-size-base;
-  font-weight: 500;
-  color: $uni-text-color;
-}
-
-.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: $uni-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: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.detail-label {
-  width: 70px;
-  margin-right: 10px;
-}
-
-.detail-value {
-  color: $uni-text-color;
-}
-
-.detail-input {
-  border: none;
-  outline: none;
-  width: calc(100% - 80px);
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-  border-bottom: 1px solid #ddd;
-}
-
-.order-select {
-  border: none;
-  outline: none;
-  width: 100%;
-  font-size: $uni-font-size-base;
-  color: $uni-text-color;
-}
-
-.order-button {
-  width: 300px;
-  height: 42px;
-  background: linear-gradient(90deg, #ff7e00, #ffba00);
-  color: #fff;
-  font-size: $uni-font-size-base;
-  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: $uni-font-size-base;
-  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: $uni-font-size-base;
-  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: $uni-font-size-base;
-  color: #ed6a0c;
 }
 
 .help-icon {
   width: 16px;
-  height: 14px;
+  height: 16px;
-  margin-right: 5px;
 }
 
-.help-text {
+.btn {
-  margin-right: 5px;
+  height: 44px;
 }
 
-.help-phone {
+.right {
-  cursor: pointer;
+  height: 88px;
+  width: 88px;
 }

src/components/Feedback/index.vue

@@ -3,38 +3,37 @@
     <view
       class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
     >
-      <image
+      <view
-        class="order-header w-full"
+        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-EEF8FF"
-        src="https://oss.nianxx.cn/mp/static/version_101/home/feedback_1.png"
+      >
-        mode="aspectFill"
+        <text class="font-size-18 font-500 color-171717 text-left ml-12">
-      />
+          {{ isCallSuccess ? "反馈已创建" : "反馈意见" }}
-      <view class="order-content border-box p-12">
+        </text>
+        <image
+          class="header-icon"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
+        />
+      </view>
+
+      <view v-if="!isCallSuccess" class="order-content border-box p-12">
         <view
           class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
         >
           <text class="font-500 line-height-22 mr-20">联系电话</text>
-          <input
+          <input placeholder="请填写联系电话" v-model="contactPhone" />
-            v-if="!isCallSuccess"
-            placeholder="请填写联系电话"
-            v-model="contactPhone"
-          />
-          <text v-else class="detail-value">{{ contactPhone }}</text>
         </view>
         <view
           class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
         >
           <view class="font-500 line-height-22 mb-12">意见内容</view>
           <textarea
-            v-if="!isCallSuccess"
             placeholder="请输入反馈意见"
             maxlength="100"
             v-model="contactText"
           />
-          <text v-else class="detail-value">{{ contactText }}</text>
         </view>
 
         <view
-          v-if="!isCallSuccess"
           class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center"
           @click="handleCall"
         >
@@ -42,9 +41,16 @@
         </view>
       </view>
 
-      <view
+      <view v-else class="border-box left flex-full p-12">
-        class="footer-help flex flex-items-center flex-justify-center mb-12"
+        <view class="font-size-12 color-525866 line-height-20 mb-4"
-      >
+          >联系方式: {{ contactPhone }}</view
+        >
+        <view class="font-size-12 color-525866 line-height-20 ellipsis-2"
+          >意见内容: {{ contactText }}</view
+        >
+      </view>
+
+      <view class="footer-help flex flex-items-center pl-12 mb-12">
         <image class="help-icon mr-4" src="./images/icon_volume.png" />
         <text class="font-size-12 font-500 color-FA7319">
           {{ appName }}收到您的意见将第一时间为您处理!

src/components/Feedback/styles/index.scss

@@ -2,6 +2,11 @@
   height: 48px;
 }
 
+.header-icon {
+  width: 98px;
+  height: 48px;
+}
+
 .order-content {
   width: 335px;
 }

src/pages/index/components/module/MoreService/index.vue

@@ -13,7 +13,6 @@
           class="item border-box border-bottom pt-20 pb-20"
           v-for="(item, index) in list"
           :key="index"
-          @click="handleClick(item)"
         >
           <view class="flex flex-items-center flex-justify-center">
             <image v-if="item.icon" class="left" :src="item.icon" />

src/static/scss/background.scss

@@ -19,6 +19,10 @@
   background-color: #f5f7fa;
 }
 
+.bg-EEF8FF {
+  background-color: #eef8ff;
+}
+
 .bg-liner {
   background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
     linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),

src/static/scss/margin.scss

@@ -55,6 +55,10 @@
   margin: 12px;
 }
 
+.mt-12 {
+  margin-top: 12px;
+}
+
 .mb-12 {
   margin-bottom: 12px;
 }
@@ -63,6 +67,10 @@
   margin-left: 12px;
 }
 
+.mr-12 {
+  margin-right: 12px;
+}
+
 .ml-16 {
   margin-left: 16px;
 }

src/static/scss/width.scss

@@ -2,6 +2,10 @@
   width: 100%;
 }
 
+.w-vw {
+  width: 100vw;
+}
+
 .w-50 {
   width: 50%;
 }