feat: 意见反馈的实现

components/CreateServiceOrder/styles/index.scss

@@ -1,15 +1,5 @@
-.create-service-order {
-  // margin-left: 12px;
-  // margin-right: 12px;
-}
-
 .create-service-wrapper {
-  // box-sizing: border-box;
   padding: 12px 0;
-  // 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 {
@@ -116,7 +106,7 @@
 }
 
 .order-button {
-  width: 280px;
+  width: 300px;
   height: 42px;
   background: linear-gradient(90deg, #ff7e00, #ffba00);
   color: #fff;

components/Feedback/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="create-service-order">
+    <view class="create-service-wrapper">
+      <view class="order-header">
+        <text>反馈意见</text>
+      </view>
+      <view class="order-content">
+        <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 class="detail-item">
+          <text class="detail-label">意见内容：</text>
+          <textarea
+            v-if="!isCallSuccess"
+            class="detail-textarea"
+            placeholder="请输入反馈意见"
+            v-model="contactText"
+          />
+          <text v-else class="detail-value">{{ contactText }}</text>
+        </view>
+
+        <button
+          v-if="!isCallSuccess"
+          class="order-button submit-button"
+          @click="handleCall"
+        >
+          立即提交
+        </button>
+
+        <button v-else class="order-button look-button" @click="viewWorkOrder">
+          查看意见
+        </button>
+      </view>
+    </view>
+
+    <view class="footer-help">
+      <image src="./images/icon_volume.png" class="help-icon"></image>
+      <text class="help-text">朵朵收到您的意见将第一时间为您处理!</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { createWorkOrder } from "@/request/api/OrderApi";
+const workOrderTypeId = ref("");
+const contactPhone = ref("");
+const contactText = ref("");
+const isCallSuccess = ref(false); // 呼叫成功状态
+const workOrderId = ref(0); // 工单ID
+
+const handleCall = async () => {
+  if (!contactPhone.value.trim()) {
+    uni.showToast({
+      title: "请填写联系电话",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
+  if (!contactText.value.trim()) {
+    uni.showToast({
+      title: "请填写意见内容",
+      icon: "none",
+      duration: 2000,
+    });
+    return;
+  }
+
+  sendCreateWorkOrder();
+};
+
+/// 创建工单
+const sendCreateWorkOrder = async () => {
+  try {
+    const res = await createWorkOrder({
+      contactName: contactText.value,
+      contactPhone: contactPhone.value,
+      workOrderTypeId: workOrderTypeId.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 viewWorkOrder = () => {
+  console.log("查看工单:", workOrderId.value);
+  // 这里可以跳转到工单详情页面
+  uni.navigateTo({
+    url: `/pages/order/list?id=${workOrderId.value}`,
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 200);
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/Feedback/styles/index.scss

@@ -0,0 +1,95 @@
+.create-service-wrapper {
+  padding: 6px 0 12px;
+}
+
+.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);
+}
+
+.detail-item {
+  display: flex;
+  align-items: start;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #333;
+}
+
+.detail-label {
+  width: 70px;
+  white-space: nowrap;
+}
+
+.detail-value {
+  font-size: 14px;
+  color: #333;
+}
+
+.detail-textarea {
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+.detail-input {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 14px;
+  color: #333;
+  border-bottom: 1px solid #ddd;
+  padding-left: 8px;
+}
+
+.order-button {
+  width: 300px;
+  height: 42px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 21px;
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.submit-button {
+  background: linear-gradient(90deg, #ff7e00, #ffba00);
+}
+
+.look-button {
+  background: linear-gradient(90deg, #0256ff, #00a6ff);
+}
+
+.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;
+}