From fcd8459c2f2ac9e1cbd941511801bf57e5301acc Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Mon, 14 Apr 2025 15:10:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/cleanDetails.vue |  50 +++++++++++++++---
 pages/index/cleanPlan.vue    |  37 ++++++++++---
 pages/index/index.vue        |   4 +-
 pages/index/list.vue         | 100 +++++++++++++++++++++++------------
 pages/index/uploadPhoto.vue  |  23 ++++----
 5 files changed, 157 insertions(+), 57 deletions(-)

diff --git a/pages/index/cleanDetails.vue b/pages/index/cleanDetails.vue
index 5b5c714..d72aa98 100644
--- a/pages/index/cleanDetails.vue
+++ b/pages/index/cleanDetails.vue
@@ -17,7 +17,7 @@
           <view class="label">保洁人员</view>
         </view>
         <view class="block">
-          <view class="value">{{ dataInfo.cleanTime }}</view>
+          <view class="value">{{ dataInfo.completedTime }}</view>
           <view class="label">清扫时间</view>
         </view>
         <view class="block">
@@ -31,9 +31,9 @@
           class="image"
           v-for="(v, i) in dataInfo.pictures"
           :key="i"
-          mode="scaleToFill"
-          style="width: 180rpx; height: 180rpx; border-radius: 18rpx"
+          mode="aspectFill"
           :src="BASE_URL + '/uploads/' + v.path"
+          @click="previewImage(i)"
         ></image>
       </view>
     </view>
@@ -43,6 +43,7 @@
 <script>
 import BASE_URL from "@/api/env.js"; //引入接口共用地址
 import { GetPlanInfoAre } from "@/api/apiList";
+import { dateFormat } from "@/utils/utils.js";
 export default {
   data() {
     return {
@@ -66,6 +67,16 @@ export default {
   },
 
   methods: {
+    dateFormat,
+
+    // 预览图片
+    previewImage(index) {
+      uni.previewImage({
+        urls: this.dataInfo.pictures.map((v) => BASE_URL + "/uploads/" + v.path),
+        current: index,
+      });
+    },
+
     async getAreaInfo() {
       const res = await GetPlanInfoAre({
         id: this.params.id,
@@ -73,6 +84,10 @@ export default {
 
       if (res.succeed) {
         this.dataInfo = res.data;
+        this.dataInfo.completedTime = dateFormat(
+          new Date(this.dataInfo.completedTime),
+          "YYYY/MM/DD HH:mm:ss"
+        );
       }
     },
   },
@@ -127,6 +142,7 @@ export default {
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        gap: 10rpx;
         width: 48.5%;
         height: 160rpx;
         background: #f1f7fe;
@@ -135,12 +151,32 @@ export default {
       .block:nth-child(n + 3) {
         margin-top: 14rpx;
       }
+
+      .label {
+        color: #5a6c88;
+      }
     }
     .images {
-      margin-top: 46rpx;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, 212rpx);
-      gap: 20rpx; // 图片间距
+      display: flex;
+      flex-wrap: wrap; /* 允许换行 */
+      justify-content: flex-start; /* 从左开始排列 */
+      margin-top: 32rpx;
+    }
+
+    .image {
+      /* 设置宽度，留出间隙 */
+      width: calc((100% - 40rpx) / 3); /* 假设间隙为 20rpx */
+      height: 210rpx; /* 或根据需要调整高度 */
+      border-radius: 18rpx;
+      background-color: #eee;
+      overflow: hidden;
+      margin-right: 20rpx; /* 右边间隙 */
+      margin-bottom: 20rpx; /* 下边间隙 */
+    }
+
+    /* 清除每行最后一个元素的右边距 */
+    .image:nth-child(3n) {
+      margin-right: 0;
     }
   }
 }
diff --git a/pages/index/cleanPlan.vue b/pages/index/cleanPlan.vue
index 036aa6e..87515d0 100644
--- a/pages/index/cleanPlan.vue
+++ b/pages/index/cleanPlan.vue
@@ -41,7 +41,12 @@
       </view>
     </view>
     <view class="arealist" v-if="dataInfo.areas.length > 0">
-      <view class="block-info" v-for="item in dataInfo.areas" :key="item.id" @click="toItemPage(item)">
+      <view
+        class="block-info"
+        v-for="item in dataInfo.areas"
+        :key="item.id"
+        @click="toItemPage(item)"
+      >
         <view v-if="!item.isCompleted" class="schedule schedule-wait"
           >待保洁</view
         >
@@ -210,7 +215,7 @@ export default {
 
       const params = {
         planName: this.dataInfo.planName,
-        areaId: this.dataInfo.areas[this.dataInfo.areas.length - 1].id,
+        id: this.dataInfo.areas[this.dataInfo.areas.length - 1].id,
         aeraNmae: this.dataInfo.areas[this.dataInfo.areas.length - 1].aeraNmae,
       };
       console.log(params);
@@ -235,10 +240,27 @@ export default {
     },
 
     toItemPage(item) {
-      console.log("%c%s", "color:red", "跳转至详情页");
-      uni.navigateTo({
-        url: "/pages/index/cleanDetails?params=" + encodeURIComponent(JSON.stringify(item)),
-      });
+      console.log("%c%s", "color:red", "跳转至详情页", item);
+
+      const combinedData = {
+        ...item, // 展开 item 的所有属性
+        planName: this.dataInfo.planName, // 添加 planName 属性
+      };
+
+      const params = encodeURIComponent(JSON.stringify(combinedData));
+
+      if (item.isCompleted) {
+        // 已保洁
+        uni.navigateTo({
+          url: "/pages/index/cleanDetails?params=" + params,
+        });
+        return;
+      } else {
+        // 未保洁
+        uni.navigateTo({
+          url: "/pages/index/list?params=" + params,
+        });
+      }
     },
 
     openFn() {},
@@ -281,6 +303,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+  background-color: #f3f5fa !important;
+}
 .content {
   // height: 100vh;
   background: #f7f8fc;
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 83a5309..613b2d5 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -128,7 +128,7 @@ export default {
   },
 
   mounted() {
-      console.log('%c%s', 'color:red', 'mounted--')
+    console.log("%c%s", "color:red", "mounted--");
     this.getPlanByDate();
   },
 
@@ -146,7 +146,7 @@ export default {
     },
     handleTaskClick(item) {
       console.log(item);
-      
+
       uni.navigateTo({
         url: `/pages/index/cleanPlan?id=${item.id}`,
       });
diff --git a/pages/index/list.vue b/pages/index/list.vue
index 38a1e80..0c7e2fe 100644
--- a/pages/index/list.vue
+++ b/pages/index/list.vue
@@ -5,7 +5,7 @@
         <u-cell-item
           :arrow="false"
           title="保洁人员"
-          :value="baseInfo.cleaner"
+          :value="dataInfo.userName"
           :title-style="{
             color: '#303133',
             fontSize: '32rpx',
@@ -18,7 +18,7 @@
         <u-cell-item
           :arrow="false"
           title="上报时间"
-          :value="baseInfo.reportTime"
+          :value="reportingTime"
           :title-style="{
             color: '#303133',
             fontSize: '32rpx',
@@ -38,11 +38,11 @@
         :model="form"
         :rules="rules"
         ref="uForm"
-        label-width="200"
+        label-width="400rpx"
         :label-style="{ fontSize: '32rpx' }"
       >
         <!-- 区域选择（多选） -->
-        <u-form-item :label="baseInfo.area" prop="areas">
+        <u-form-item :label="dataInfo.name" prop="areas">
           <!-- <u-input v-model="form.cleaner" placeholder="请输入故障" /> -->
           <view style="width: 100%; font-size: 32rpx; text-align: right"
             >NFC卡损坏</view
@@ -50,9 +50,9 @@
         </u-form-item>
 
         <!-- 备注（文本域） -->
-        <u-form-item label="备注" prop="notes" label-position="top">
+        <u-form-item label="备注" prop="note" label-position="top">
           <u-input
-            v-model="form.notes"
+            v-model="form.note"
             placeholder="请对故障进行描述"
             autoHeight
             maxlength="200"
@@ -103,18 +103,16 @@
 </template>
 
 <script>
-import { ReportingNFCDanger } from "@/api/apiList";
+import { ReportingNFCDanger, GetPlanInfoAre, UploadFiles } from "@/api/apiList";
+
+import { dateFormat } from "@/utils/utils";
 
 export default {
   data() {
     return {
-      baseInfo: {
-        cleaner: "小饼", // 保洁人员
-        reportTime: "2025.4.1", // 上报时间
-        area: "东大门操场", // 清洁区域
-      },
+      reportingTime: "", // 当时时间 2025-4-14 10:00
       form: {
-        notes: "", // 备注
+        note: "", // 备注
         url: "", // 图片
       },
       areaOptions: [
@@ -130,7 +128,7 @@ export default {
             trigger: ["blur", "change"],
           },
         ],
-        reportTime: [
+        reportingTime: [
           {
             required: true,
             message: "请选择上报时间",
@@ -155,17 +153,32 @@ export default {
           },
         ],
       },
+
+      params: {},
+
+      dataInfo: {},
     };
   },
+
+  onLoad(options) {
+    console.log("options", JSON.parse(decodeURIComponent(options.params)));
+    this.params = JSON.parse(decodeURIComponent(options.params));
+  },
+
+  created() {
+    this.reportingTime = dateFormat(new Date(), "YYYY-MM-DD HH:mm");
+    this.getAreaInfo();
+  },
+
   methods: {
-    // 图片上传处理
+    // 图片上传处理  废弃
     handleImageUpload(event) {
       const files = event.file;
       // 这里添加实际的上传逻辑
       this.form.images.push(...files.map((file) => ({ url: file.url })));
     },
 
-    // 图片删除处理
+    // 图片删除处理  废弃
     handleImageDelete(index) {
       this.form.images.splice(index, 1);
     },
@@ -193,6 +206,17 @@ export default {
       this.form.url = "";
     },
 
+    // 获取区域信息
+    async getAreaInfo() {
+      const res = await GetPlanInfoAre({
+        id: this.params.id,
+      });
+
+      if (res.succeed) {
+        this.dataInfo = res.data;
+      }
+    },
+
     // 表单提交
     async submitForm() {
       if (!this.form.url) {
@@ -200,25 +224,35 @@ export default {
         return;
       }
 
-      console.log(this.form);
+      const res = await UploadFiles([this.form.url]);
+      if (!res.succeed) return;
 
-      return;
+      const params = {
+        note: this.form.note,
+        planInfoId: this.dataInfo.planInfoId,
+        reportingTime: this.reportingTime.replace(" ", "T"),
+        userId: this.dataInfo.userId,
+        id: this.dataInfo.id,
+        url: res.data[0].path,
+      };
 
-      const res = await ReportingNFCDanger({
-        ...this.form,
+      const res1 = await ReportingNFCDanger(params);
 
-        // 以下数据待获取
-        id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-        userId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-        reportingTime: "2025-04-10T08:02:40.917Z",
-        note: "string",
-        url: "string",
-        planInfoId: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-      });
-
-      if (res.succeed) {
-        console.log(res);
-        uni.showToast({ title: "上报成功", icon: "success" });
+      if (res1.succeed) {
+        const queryParams = encodeURIComponent(JSON.stringify(this.params));
+        uni.showModal({
+          title: "提示",
+          content: "任务已完成，快去上传图片吧",
+          confirmText: "去上传图片",
+          showCancel: false,
+          success: function (res) {
+            if (res.confirm) {
+              uni.navigateTo({
+                url: "/pages/index/uploadPhoto?params=" + queryParams,
+              });
+            }
+          },
+        });
       }
     },
   },
@@ -227,7 +261,7 @@ export default {
 
 <style lang="scss" scoped>
 page {
-  background-color: #f3f5fa;
+  background-color: #f3f5fa !important;
 }
 .content {
   height: auto;
diff --git a/pages/index/uploadPhoto.vue b/pages/index/uploadPhoto.vue
index 5887d82..ed3aa0e 100644
--- a/pages/index/uploadPhoto.vue
+++ b/pages/index/uploadPhoto.vue
@@ -22,7 +22,7 @@
       :background="{ backgroundColor: '#F7F8FC' }"
       :border-bottom="false"
     >
-      <view slot="right">
+      <!-- <view slot="right">
         <view class="menu-wrapper">
           <image
             src="/static/iconfont/more.svg"
@@ -31,7 +31,7 @@
             @click="toggleMenu"
           />
         </view>
-      </view>
+      </view> -->
     </u-navbar>
 
     <view class="content-header">
@@ -181,23 +181,28 @@ export default {
       }
 
       const params = {
-        id: this.params.areaId,
+        id: this.params.id,
         note: this.remark,
         picturesDto: [],
       };
 
       const res = await UploadFiles(this.imageList);
-      if (res.succeed) {
-        params.picturesDto = res.data;
-      }
+      if (!res.succeed) return;
+      params.picturesDto = res.data;
 
       const res2 = await UploadArea(params);
       if (res2.succeed) {
         // 成功的处理
-        uni.showToast({ title: "上传成功", icon: "success" });
-      } else {
-        uni.showToast({ title: res2.error || "上传失败", icon: "none" });
+        uni.showToast({ title: "上传成功", icon: "success", duration: 1500 });
+        setTimeout(() => {
+          uni.switchTab({
+            url: "/pages/index/index",
+          });
+        }, 1500);
       }
+      // else {
+      //   uni.showToast({ title: res2.error || "上传失败", icon: "none" });
+      // }
     },
   },
 };