用户问题调整

lichao
1 parent 8e19ef49
Showing 7 changed files with 219 additions and 61 deletions
garbage-removal/.env.local
garbage-removal/src/pages/login/code.vue
garbage-removal/src/pages/order-info/order-driver/detail/index.vue
garbage-removal/src/pages/order-info/order-driver/upload/index.vue
garbage-removal/src/pages/order-info/order-other/detail/index.vue
garbage-removal/src/stores/main.js
garbage-removal/vite.config.js
-VITE_BASE_URL=http://192.169.1.97:8080/workflow
+VITE_BASE_URL=http://192.169.1.90:8080/workflow
 VITE_BASE_FILE_UPLOAD_PREFIX=/order/upload
-VITE_STOMP_URL=http://192.169.1.97:8080/ws
+VITE_STOMP_URL=http://192.169.1.90:8080/ws
@@ -71,7 +71,7 @@ const noCaptcha = () =&gt; {
 // 校验验证码
 const checkVerifyNum = (code) => {
 	userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => {	
-		// console.log(res);
+		console.log(res);
 		// 登录成功
 		if (res.data.code===200) {
 			verifyFlag.value = false;
@@ -79,7 +79,8 @@ const checkVerifyNum = (code) =&gt; {
 			if (res.data.data.token) {
 			  setRequestToken(res.data.data.token)
 			}
-			store.userName = res.data.data.name;
+			store.userInfo = {};
+			store.userName = res.data.data.name !=null ? res.data.data.name : "";
 			store.userInfo.userName = res.data.data.name;
 			store.userPhone = res.data.data.loginPhone;
 			if(res.data.data.testUser){
@@ -142,9 +142,13 @@
           </view>
           <view class="order-detail-container-header-item">
             <text class=" order-detail-container-header-title">装车照片：</text>
-            <view class="order-detail-container-header-content">
-              <u-upload width="180" height="130" :fileList="putOnImages" name="3" multiple :maxCount="20"
-                :previewFullImage="true" :isReadOnly="true"></u-upload>
+            
+            <view class="order-detail-container-header-content" style="flex-direction: column;">
+              <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
+                <view class="image-group-title">第 {{ group.index }} 次上传</view>
+                <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
+                  :previewFullImage="true" :isReadOnly="true"></u-upload>
+              </view>
             </view>
           </view>
 <!--          <view class="order-detail-container-header-item">
@@ -179,9 +183,13 @@
           <u-button @click="handleOrder(orderId)"
             v-if="dataGram.garOrderHandlerStatus === 0 && dataGram.handleFlag && dataGram.garCancelFlag === 0 && userType === '运输企业负责人'"
             shape="square" color="#a9e08f" text="处理订单"></u-button>
+
+
           <u-button @click="handleUploadImage(orderId, 'putOnImages')"
             v-if="dataGram.garOrderHandlerStatus === 1 && dataGram.garCancelFlag === 0 && userType === '清运车辆驾驶员'"
             shape="square" color="#a9e08f" text="上传图片"></u-button>
+
+
           <u-button @click="handleEvaluate(orderId, userType)"
             v-if="dataGram.garEvaluateFlag === 0 && userType === '用户'" shape="square" color="#a9e08f"
             text="去评价"></u-button>
@@ -220,6 +228,7 @@ const dataGram = ref();
 const orderId = ref(null)
 const currentImages = ref([])
 const putOnImages = ref([])
+const putOnImagesGrouped = ref([])  // 新增这个变量
 const putDownImages = ref([])
 const emptyBase64Image = ref(zStatic.base64Empty)
 const showUQRcode = ref(false)
@@ -282,13 +291,44 @@ const selectClick = (index) =&gt; {
 const handleOrderDetail = (orderId) => {
   queryOrderDetail(orderId).then(res => {
     dataGram.value = res.data.data;
-    console.log(res.data.data);	
     currentImages.value = res.data.data.currentImages.map(item => {
-      return { url: import.meta.env.VITE_BASE_URL + item };
+      return { url: import.meta.env.VITE_BASE_URL + item};
     });
+    
     putOnImages.value = res.data.data.putOnImages.map(item => {
-      return { url: import.meta.env.VITE_BASE_URL + item };
+      const newItem = item.substring(0, item.length - 6);
+      const newIndex = item.substring(item.length - 6);
+      return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
+    });
+
+    
+    // 按照newIndex升序排序
+    putOnImages.value.sort((a, b) => {
+      return parseInt(a.newIndex) - parseInt(b.newIndex);
+    });
+
+    // 重新组织数据，将相同newIndex的图片放在一起
+    const groupedImages = {};
+    putOnImages.value.forEach(item => {
+      if (!groupedImages[item.newIndex]) {
+        groupedImages[item.newIndex] = [];
+      }
+      groupedImages[item.newIndex].push(item);
+    });
+
+    // 转换newIndex为1,2,3的连续数字
+    const sortedKeys = Object.keys(groupedImages).sort((a, b) => parseInt(a) - parseInt(b));
+    const newGroupedImages = {};
+    sortedKeys.forEach((key, index) => {
+      newGroupedImages[index + 1] = groupedImages[key];
     });
+
+    // 转换为数组形式，方便在模板中遍历
+    putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
+      index: key,
+      images: newGroupedImages[key]
+    }));
+    console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
     putDownImages.value = res.data.data.putDownImages.map(item => {
       return { url: import.meta.env.VITE_BASE_URL + item };
     });
@@ -373,7 +413,13 @@ const cleanStatus = (status) =&gt; {
 const createQrCodeValid = (val) => {
   createHandlerQrCode(val).then(res => {
     // 获取本地地址拼接订单id
-    showUQRcode.value = true;
+    //修改点
+    if(putOnImages.value.length == 0){
+      uni.$u.toast('请先上传装车图片');
+    }else{
+      console.log('putOnImages:', putOnImages.value);
+      showUQRcode.value = true;
+    }
     // const localAddress = `http://localhost:5173`;
     qrCodeText.value = res.data.data;
   })
@@ -383,6 +429,7 @@ const createQrCodeValid = (val) =&gt; {
  * @param {string} orderId
  * @param {string} putType
  */
+
 const handleUploadImage = (orderId, putType) => {
 	const data = dataGram.value;
   uni.showActionSheet({
@@ -578,4 +625,22 @@ $custom-bottom-height: 200rpx;
   align-items: center;
   justify-content: center;
 }
+.image-group {
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+}
+
+.image-group-title {
+  margin-bottom: 10px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* 确保u-upload组件内的图片水平排列 */
+.image-group .u-upload {
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>
@@ -89,51 +89,90 @@
 	}
 	// 新增图片
 	const afterRead = async (event) => {
-		// 获取定位信息
-		takeLocation();
-		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
-		let lists = [].concat(event.file);
-		let fileListLen = fileList.value.length;
-		lists.map((item) => {
-			fileList.value.push({
-				...item,
-				status: 'uploading',
-				message: '上传中',
-			});
+	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+	let lists = [].concat(event.file);
+	let fileListLen = fileList.value.length;
+	lists.map((item) => {
+		fileList.value.push({
+		...item,
+		status: 'uploading',
+		message: '上传中',
 		});
-		// 将blob转为file对象的方法
-		function blobToFile(blob, fileName) {
-			return new File([blob], fileName, {
-				type: 'image/png'
-			})
-		}
-		for (let i = 0; i < lists.length; i++) {
-			// 获取blob对象
-			fetch(lists[i].url)
-				.then(response => response.blob())
-				.then(blob => {
-					// 将blob转换为file
-					let fileN = blobToFile(blob, lists[i].name)
-					// 上传file对象
-					let requestPath = import.meta.env.VITE_BASE_URL + import.meta.env
-						.VITE_BASE_FILE_UPLOAD_PREFIX;
-					uploadFilePromise(requestPath, fileN).then(result => {
-						let item = fileList.value[fileListLen];
-						fileList.value.splice(fileListLen, 1, {
-							...item,
-							status: 'success',
-							message: '',
-							url: result.data.fileName,
-						});
-						fileListLen++;
-					});
+	});
-				})
-		}
+	for (let i = 0; i < lists.length; i++) {
+		// 图片压缩逻辑
+		const compressImage = async (file) => {
+		return new Promise((resolve) => {
+			// 创建图片对象
+			const img = new Image();
+			img.onload = () => {
+			// 创建canvas
+			const canvas = document.createElement('canvas');
+			const ctx = canvas.getContext('2d');
+
+			// 设置压缩后的宽度和高度
+			const maxWidth = 800;
+			const maxHeight = 600;
+			let width = img.width;
+			let height = img.height;
+
+			// 计算压缩后的尺寸
+			if (width > maxWidth) {
+				height = Math.round((height * maxWidth) / width);
+				width = maxWidth;
+			}
+			if (height > maxHeight) {
+				width = Math.round((width * maxHeight) / height);
+				height = maxHeight;
+			}
+
+			// 设置canvas尺寸
+			canvas.width = width;
+			canvas.height = height;
+
+			// 绘制图片
+			ctx.drawImage(img, 0, 0, width, height);
+
+			// 转换为blob
+			canvas.toBlob(
+				(blob) => {
+				// 转换为file
+				const compressedFile = new File([blob], file.name, {
+					type: 'image/jpeg',
+				});
+				resolve(compressedFile);
+				},
+				'image/jpeg',
+				0.6 // 压缩质量 0-1
+			);
+			};
+			img.src = file.url;
+		});
+		};
+
+		// 压缩图片
+		const compressedFile = await compressImage(lists[i]);
+
+		// 上传压缩后的文件
+		let requestPath = import.meta.env.VITE_BASE_URL + import.meta.env
+		.VITE_BASE_FILE_UPLOAD_PREFIX;
+		uploadFilePromise(requestPath, compressedFile).then(result => {
+		let item = fileList.value[fileListLen];
+		fileList.value.splice(fileListLen, 1, {
+			...item,
+			status: 'success',
+			message: '',
+			url: result.data.fileName,
+		});
+		fileListLen++;
+		});
+	}
 	};
 	// 提交图片
 	const handleSubmit = async (id, type, driver, carPlate) => {
+
 			if (!validateImage()) {
 				uni.$u.toast("请等待图片上传~")
 				return
@@ -225,6 +264,8 @@
 		driver.value = options.driver;
 		console.log(options.putType);
 		putType.value = options.putType === "putOnImages" ? "装车图片" : "卸车图片";
+		// 获取定位信息
+		takeLocation();
 	})
 </script>
@@ -182,9 +182,12 @@
 				<view v-if="putDownImages.length || putOnImages.length" style="width: 100%;">
 					<view class="order-detail-container-header-item">
 						<text class=" order-detail-container-header-title">装车照片：</text>
-						<view class="order-detail-container-header-content">
-							<u-upload width="180" height="130" :fileList="putOnImages" name="3" multiple :maxCount="20"
+						<view class="order-detail-container-header-content" style="flex-direction: column">
+							<view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
+								<view class="image-group-title">第 {{ group.index }} 次上传</view>
+								<u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
 								:previewFullImage="true" :isReadOnly="true"></u-upload>
+							</view>
 						</view>
 					</view>
 					<!-- <view class="order-detail-container-header-item">
@@ -299,6 +302,7 @@
 	const orderId = ref(null)
 	const currentImages = ref([])
 	const putOnImages = ref([])
+	const putOnImagesGrouped = ref([])  // 新增这个变量
 	const putDownImages = ref([])
 	const emptyBase64Image = ref(zStatic.base64Empty)
 	const showUQRcode = ref(false)
@@ -419,17 +423,44 @@
 	const handleOrderDetail = (orderId) => {
 		queryOrderDetail(orderId).then(res => {
 			dataGram.value = res.data.data;
-			console.log(res.data.data);
 			currentImages.value = res.data.data.currentImages.map(item => {
 				return {
 					url: import.meta.env.VITE_BASE_URL + item
 				};
 			});
 			putOnImages.value = res.data.data.putOnImages.map(item => {
-				return {
-					url: import.meta.env.VITE_BASE_URL + item
-				};
+				const newItem = item.substring(0, item.length - 6);
+				const newIndex = item.substring(item.length - 6);
+				return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex };
+			});
+
+			// 按照newIndex升序排序
+			putOnImages.value.sort((a, b) => {
+			return parseInt(a.newIndex) - parseInt(b.newIndex);
+			});
+
+			// 重新组织数据，将相同newIndex的图片放在一起
+			const groupedImages = {};
+			putOnImages.value.forEach(item => {
+			if (!groupedImages[item.newIndex]) {
+				groupedImages[item.newIndex] = [];
+			}
+			groupedImages[item.newIndex].push(item);
 			});
+
+			// 转换newIndex为1,2,3的连续数字
+			const sortedKeys = Object.keys(groupedImages).sort((a, b) => parseInt(a) - parseInt(b));
+				const newGroupedImages = {};
+				sortedKeys.forEach((key, index) => {
+				newGroupedImages[index + 1] = groupedImages[key];
+			});
+
+			// 转换为数组形式，方便在模板中遍历
+			putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
+				index: key,
+				images: newGroupedImages[key]
+			}));
+   			console.log('putOnImagesGrouped.value:', putOnImagesGrouped.value);
 			putDownImages.value = res.data.data.putDownImages.map(item => {
 				return {
 					url: import.meta.env.VITE_BASE_URL + item
@@ -953,4 +984,22 @@
 			}
 		}
 	}
+	.image-group {
+		margin-bottom: 20px;
+		padding: 10px;
+		background-color: #f5f5f5;
+		border-radius: 5px;
+	}
+
+	.image-group-title {
+		margin-bottom: 10px;
+		font-weight: bold;
+		color: #333;
+	}
+
+/* 确保u-upload组件内的图片水平排列 */
+	.image-group .u-upload {
+		display: flex;
+		flex-wrap: wrap;
+	}
 </style>
 \ No newline at end of file
@@ -6,10 +6,12 @@ export const useMainStore = defineStore(
     const token = ref(null);
     const tempToken = ref(null);
     const userType = ref("")
-    const userInfo = ref("")
-	const userPhone = ref("");
+    const userInfo = ref({})
+    // 或者保留初始对象定义，添加数据验证
+    const userPhone = ref("");
+    const userName = ref("");
-    return { token,tempToken,userType,userInfo,userPhone };
+    return { token,tempToken,userType,userInfo,userPhone,userName };
   },
   {
     persist: {
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [
     uni(),
 	//本地环境开启https
-	basicSsl()
+	// basicSsl()
   ],
    resolve: {
     alias: {
@@ -19,6 +19,6 @@ export default defineConfig({
    server: {
      port: 9000,
 	 //本地环境开启https
-	 https: true
+	//  https: true
    }
 })