Merge branch 'main' of https://git.nianxx.cn/zoujing/YGChatCS into fix-109

src/components/CreateServiceOrder/index.vue

@@ -47,13 +47,38 @@
           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>
+
           <view
-            class="bg-white p-24 rounded-5 inline-block"
-            @click="handleChooseImage"
+            class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center"
           >
-            <uni-icons fontFamily="znicons" size="24" color="#6A717F">
-              {{ zniconsMap["zn-camera"] }}
-            </uni-icons>
+            <view
+              v-if="contentImgUrl"
+              class="w-full h-full relative inline-block"
+            >
+              <image
+                class="w-full h-full block"
+                :src="contentImgUrl"
+                mode="aspectFill"
+              />
+              <uni-icons
+                class="close-btn absolute z-10"
+                type="close"
+                size="20"
+                color="#6A717F"
+                @click="handleDeleteImage"
+              >
+              </uni-icons>
+            </view>
+
+            <view
+              v-else
+              class="w-full h-full flex flex-items-center flex-justify-center"
+              @click="handleChooseImage"
+            >
+              <uni-icons fontFamily="znicons" size="24" color="#6A717F">
+                {{ zniconsMap["zn-camera"] }}
+              </uni-icons>
+            </view>
           </view>
         </view>
       </view>
@@ -72,8 +97,9 @@
         </view>
 
         <image
+          v-if="contentImgUrl"
           class="right rounded-6"
-          src="https://picsum.photos/300/300"
+          :src="contentImgUrl"
           mode="aspectFill"
         />
       </view>
@@ -123,12 +149,16 @@ const handleChooseImage = () => {
   });
 };
 
+const handleDeleteImage = () => {
+  contentImgUrl.value = "";
+};
+
 const updateImagehandle = (file) => {
   if (!file) {
     return;
   }
   updateImageFile(file).then((res) => {
-    contentImgUrl.value = res.data?.url || "";
+    contentImgUrl.value = res.data;
   });
 };
 
@@ -165,8 +195,8 @@ const sendCreateWorkOrder = async () => {
   try {
     const res = await createWorkOrder({
       workOrderTypeId: workOrderTypeId.value,
-      roomId: roomId.value,
-      contactPhone: contactPhone.value,
+      roomNo: roomId.value,
+      userPhone: contactPhone.value,
       content: contactText.value,
       contentImgUrl: contentImgUrl.value,
     });
@@ -205,7 +235,7 @@ const viewWorkOrder = () => {
   console.log("查看工单:", workOrderId.value);
   // 这里可以跳转到工单详情页面
   uni.navigateTo({
-    url: `/pages-order/order/list?id=${workOrderId.value}`,
+    url: `/pages-service/order/list`,
   });
 };
 
@@ -220,4 +250,9 @@ onMounted(() => {
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
+
+.close-btn {
+  top: 0;
+  right: 0;
+}
 </style>

src/components/ImageSwiper/index.vue

@@ -52,7 +52,7 @@
         </view>
       </scroll-view>
 
-      <view class="custom-indicator">
+      <view class="custom-indicator" @click="handlePreviewClick">
         <uni-icons fontFamily="znicons" size="10" color="#fff">{{
           zniconsMap["zn-camera"]
         }}</uni-icons>
@@ -68,6 +68,8 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
 import { zniconsMap } from "@/static/fonts/znicons.js";
+import { useAppStore } from "@/store";
+const appStore = useAppStore();
 
 // Props定义
 const props = defineProps({
@@ -166,6 +168,13 @@ const handleSwiperChange = (e) => {
   active.value = currentIndex;
   scrollToActiveItem(currentIndex);
 };
+
+const handlePreviewClick = () => {
+  appStore.setPreviewImageData(thumbnails.value);
+  uni.navigateTo({
+    url: `/pages/goods/album/index`,
+  });
+};
 </script>
 
 <style scoped lang="scss">

src/components/ImageSwiper/styles/index.scss

@@ -25,6 +25,9 @@
   display: flex;
   align-items: flex-end;
   flex-direction: row;
+  flex-wrap: nowrap;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .custom-indicator {
@@ -32,6 +35,9 @@
   background: rgba(0, 0, 0, 0.5);
   border-radius: $uni-border-radius-50px;
   padding: 0 6px 4px 8px;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .custom-indicator-text {
@@ -43,7 +49,9 @@
 }
 
 .thumbnail-scroll {
-  flex: 1;
+  flex: 1 1 auto;
+  min-width: 0; // 允许在flex容器中收缩以适配剩余空间
+  overflow: auto; // 防止超出thumbnail-box的宽度
   height: 100%;
   white-space: nowrap;
 }
@@ -71,7 +79,7 @@
   height: 36px;
   border-radius: 8px;
   box-sizing: border-box;
-  border: 2px solid transparent;
+  border: 1px solid #171717;
   transition: all 0.3s ease;
   display: block;
 }