feat: 工单图片上传与样式的调整

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"
+            class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center"
-            @click="handleChooseImage"
           >
-            <uni-icons fontFamily="znicons" size="24" color="#6A717F">
+            <view
-              {{ zniconsMap["zn-camera"] }}
+              v-if="contentImgUrl"
-            </uni-icons>
+              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;
   });
 };
 
@@ -220,4 +250,9 @@ onMounted(() => {
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
+
+.close-btn {
+  top: 0;
+  right: 0;
+}
 </style>

src/request/api/UpdateFile.js

@@ -2,7 +2,7 @@ import { BASE_URL } from "@/request/base/baseUrl";
 import { getCurrentConfig } from "@/constant/base";
 
 export const updateImageFile = (file) => {
-  const url = BASE_URL + "/common/upload";
+  const url = BASE_URL + "/hotelBiz/hotBizCommon/upload";
   const token = uni.getStorageSync("token");
   const clientId = getCurrentConfig().clientId;
 
@@ -20,8 +20,8 @@ export const updateImageFile = (file) => {
         file: "file",
       },
       success: (uploadFileRes) => {
-        console.log(uploadFileRes.data);
+        console.log("uploadFileRes: ", uploadFileRes);
-        resolve(uploadFileRes.data);
+        resolve(JSON.parse(uploadFileRes.data));
       },
       fail: (err) => {
         console.error("上传图片失败:", err);

src/static/scss/height.scss

@@ -2,6 +2,10 @@
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-80 {
   height: 80px;
 }

src/static/scss/width.scss

@@ -9,3 +9,6 @@
 .w-50 {
   width: 50%;
 }
+.w-80 {
+  width: 80px;
+}