From a0f7ce20678138669de563e752bf14c6756042bc Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Tue, 6 May 2025 11:40:42 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BB=8A=E6=97=A5=E8=AE=A1=E5=88=92?=
 =?UTF-8?q?=E3=80=81=E5=BC=82=E5=B8=B8=E4=B8=8A=E6=8A=A5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/cleanPlan.vue | 227 +++++++++++++++++++++++---------------
 pages/index/list.vue      |   7 +-
 2 files changed, 144 insertions(+), 90 deletions(-)

diff --git a/pages/index/cleanPlan.vue b/pages/index/cleanPlan.vue
index 737888b..46ebbb0 100644
--- a/pages/index/cleanPlan.vue
+++ b/pages/index/cleanPlan.vue
@@ -1,9 +1,19 @@
 <template>
   <view class="content">
-    <u-navbar :is-back="false" title="" :background="{ backgroundColor: '#DFEEFD' }" :border-bottom="false">
+    <u-navbar
+      :is-back="false"
+      title=""
+      :background="{ backgroundColor: '#DFEEFD' }"
+      :border-bottom="false"
+    >
       <view class="slot-wrap">
         <u-dropdown :title-size="42" active-color="#211D2F">
-          <u-dropdown-item v-model="dropdownValue" :title="dataInfo.planName" :options="dropdownOptions" @change="changeDropdown"></u-dropdown-item>
+          <u-dropdown-item
+            v-model="dropdownValue"
+            :title="dataInfo.planName"
+            :options="dropdownOptions"
+            @change="changeDropdown"
+          ></u-dropdown-item>
         </u-dropdown>
         <view class="back-icon" @click="backFn">
           <!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> -->
@@ -23,14 +33,27 @@
         </span>
       </view>
       <view class="tabs">
-        <view @click="changeTab(i)" class="tab-item" v-for="(v, i) in selectTabs" :key="i" :class="{ select: selectIdx === i }">
+        <view
+          @click="changeTab(i)"
+          class="tab-item"
+          v-for="(v, i) in selectTabs"
+          :key="i"
+          :class="{ select: selectIdx === i }"
+        >
           {{ v.name }}
         </view>
       </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 v-if="!item.isCompleted" class="schedule schedule-wait">待保洁</view>
+      <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
+        >
         <view v-else class="schedule schedule-completed">已完成</view>
 
         <view class="name">
@@ -39,13 +62,18 @@
         </view>
         <view class="type">
           <view class="value">区域类型</view>
-          <u-tag :text="item.areaType" class="tag" border-color="transparent" :type="
+          <u-tag
+            :text="item.areaType"
+            class="tag"
+            border-color="transparent"
+            :type="
               item.areaType === '室外'
                 ? 'success'
                 : item.areaType === '特殊'
                 ? 'warning'
                 : 'primary'
-            " />
+            "
+          />
           <!-- 特殊先隐藏，没有这个字段 -->
           <!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
         </view>
@@ -66,7 +94,11 @@
       <view class="success-box">
         <view class="box-content">
           <view class="logo">
-            <image style="width: 100%; height: 100%" src="/static/images/msg-success.png" alt="" />
+            <image
+              style="width: 100%; height: 100%"
+              src="/static/images/msg-success.png"
+              alt=""
+            />
           </view>
           <view class="content-title">刷卡成功</view>
           <view class="btn-box">
@@ -81,7 +113,11 @@
       <view class="error-box">
         <view class="box-content">
           <view class="logo">
-            <image style="width: 100%; height: 100%" src="/static/images/msg-error.png" alt="" />
+            <image
+              style="width: 100%; height: 100%"
+              src="/static/images/msg-error.png"
+              alt=""
+            />
           </view>
           <view class="content-title">
             {{ errorMsg }}
@@ -98,57 +134,61 @@
 </template>
 
 <script>
-import { GetPlanInfoAreaList, GetTodayPlanList, GetAwaitUploadAreaApi } from '@/api/apiList'
+import {
+  GetPlanInfoAreaList,
+  GetTodayPlanList,
+  GetAwaitUploadAreaApi,
+} from "@/api/apiList";
 
-import { minutesToTime } from '@/utils/utils'
+import { minutesToTime } from "@/utils/utils";
 
 export default {
   data() {
     return {
-      posIcon: require('@/static/images/pos-icon.png'),
+      posIcon: require("@/static/images/pos-icon.png"),
       selectIdx: 0,
-      dropdownValue: '',
+      dropdownValue: "",
       dropdownOptions: [
         {
-          label: '保洁计划1',
-          value: 1
+          label: "保洁计划1",
+          value: 1,
         },
         {
-          label: '保洁计划2',
-          value: 2
+          label: "保洁计划2",
+          value: 2,
         },
         {
-          label: '保洁计划3',
-          value: 3
+          label: "保洁计划3",
+          value: 3,
         },
         {
-          label: '保洁计划4',
-          value: 4
-        }
+          label: "保洁计划4",
+          value: 4,
+        },
       ],
       selectTabs: [
         {
-          name: '全部',
-          value: 0
+          name: "全部",
+          value: 0,
         },
         {
-          name: '待保洁',
-          value: 1
-        }
+          name: "待保洁",
+          value: 1,
+        },
       ],
 
-      paramsId: '',
+      paramsId: "",
       // 刷卡成功弹窗
       successShow: false,
       // 刷卡失败弹窗
       errorShow: false,
-      errorMsg: 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息',
+      errorMsg: "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息",
       dataInfo: {
-        planName: '',
-        areas: []
+        planName: "",
+        areas: [],
       },
-      areaRes:{}
-    }
+      areaRes: {},
+    };
   },
 
   computed: {
@@ -163,14 +203,14 @@ export default {
 
   onLoad(options) {
     // this.paramsId = options.id;
-    this.dropdownValue = options.id
-    window.nfcFn = this.nfcResFn
+    this.dropdownValue = options.id;
+    window.nfcFn = this.nfcResFn;
     // this.nfcResFn();
   },
 
   created() {
-    this.getTodayPlanList()
-    this.getPlanInfoAreaList()
+    this.getTodayPlanList();
+    this.getPlanInfoAreaList();
   },
 
   methods: {
@@ -179,12 +219,12 @@ export default {
     backFn() {
       // console.log("%c%s", "color:red", "返回");
 
-      uni.navigateBack()
+      uni.navigateBack();
     },
 
     async nfcResFn(data) {
       if (!data) {
-        return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
+        return uni.showToast({ title: "未传入参数 initFn", icon: "none" });
       }
       // uni.showModal({
       //   title: "开发调试查看nimei",
@@ -192,16 +232,16 @@ export default {
       //   showCancel: true,
       //   success: function (res) {},
       // });
-      let cardID = data.cardID
+      let cardID = data.cardID;
       // let nimei = data.nimei;
-      let nimei = data.uuid
+      let nimei = data.uuid;
       const req = {
-        Nimei: nimei
+        Nimei: nimei,
         // Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
-      }
-      const res = await GetAwaitUploadAreaApi(req)
-      console.log(res, 'res---')
-      this.areaRes = res.data
+      };
+      const res = await GetAwaitUploadAreaApi(req);
+      console.log(res, "res---");
+      this.areaRes = res.data;
       // uni.showModal({
       //   title: "开发调试查看",
       //   content: JSON.stringify(res) || "未传入参数 initFn",
@@ -210,94 +250,97 @@ export default {
       // });
       // 刷卡失败
       if (!res.succeed) {
-        console.log('%c%s', 'color:red', '刷卡失败')
+        console.log("%c%s", "color:red", "刷卡失败");
         // 提示信息
-        this.errorMsg = res.error || 'NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息'
-        this.errorShow = true
+        this.errorMsg =
+          res.error || "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息";
+        this.errorShow = true;
         // 同时关闭成功弹窗
-        this.successShow = false
-        return
+        this.successShow = false;
+        return;
       }
 
       // 刷卡成功
-      this.successShow = true
+      this.successShow = true;
       // 同时关闭失败弹窗
-      this.errorShow = false
+      this.errorShow = false;
     },
     // 上传图片
     toUploadPage() {
-      console.log('%c%s', 'color:red', '上传图片')
+      console.log("%c%s", "color:red", "上传图片");
 
       const params = {
         planName: this.areaRes.planName,
         id: this.areaRes.id,
-        aeraNmae: this.areaRes.name
-      }
-      console.log(params)
+        aeraNmae: this.areaRes.name,
+      };
+      console.log(params);
 
       // 先关闭弹窗再跳转
-      this.successShow = false
+      this.successShow = false;
       uni.navigateTo({
-        url: '/pages/index/uploadPhoto?params=' + encodeURIComponent(JSON.stringify(params))
-      })
+        url:
+          "/pages/index/uploadPhoto?params=" +
+          encodeURIComponent(JSON.stringify(params)),
+      });
     },
     // 异常上报
     exceptionReportFn() {
-      console.log('%c%s', 'color:red', '异常上报')
+      console.log("%c%s", "color:red", "异常上报");
 
       // 先关闭弹窗再跳转
-      this.errorShow = false
+      this.errorShow = false;
       uni.navigateTo({
-        url: '/pages/index/list'
-      })
+        url: "/pages/index/list",
+      });
     },
 
     toItemPage(item) {
-      console.log('%c%s', 'color:red', '跳转至详情页', item)
+      console.log("%c%s", "color:red", "跳转至详情页", item);
 
       const combinedData = {
         ...item, // 展开 item 的所有属性
-        planName: this.dataInfo.planName // 添加 planName 属性
-      }
+        planName: this.dataInfo.planName, // 添加 planName 属性
+      };
 
-      const params = encodeURIComponent(JSON.stringify(combinedData))
+      const params = encodeURIComponent(JSON.stringify(combinedData));
 
       if (item.isCompleted) {
         // 已保洁
         uni.navigateTo({
-          url: '/pages/index/cleanDetails?params=' + params
-        })
-        return
+          url: "/pages/index/cleanDetails?params=" + params,
+        });
+        return;
       } else {
         // 未保洁
         uni.navigateTo({
-          url: '/pages/index/list?params=' + params
-        })
+          url: "/pages/index/list?params=" + params,
+        });
       }
     },
 
     openFn() {},
     closeFn() {},
     changeTab(i) {
-      this.selectIdx = i
+      this.selectIdx = i;
 
-      this.getPlanInfoAreaList()
+      this.getPlanInfoAreaList();
     },
 
     changeDropdown(e) {
-      this.dropdownValue = e
+      this.dropdownValue = e;
 
-      this.getPlanInfoAreaList()
+      this.getPlanInfoAreaList();
     },
 
     // 获取今日计划
     async getTodayPlanList() {
-      const res = await GetTodayPlanList()
+      const res = await GetTodayPlanList();
       if (res.succeed) {
-        this.dropdownOptions = res.data.map(item => ({
+        this.dropdownOptions = res.data.map((item) => ({
           label: item.name,
-          value: item.id
-        }))
+          value: item.id,
+        }));
       }
     },
 
@@ -305,14 +348,20 @@ export default {
     async getPlanInfoAreaList() {
       const res = await GetPlanInfoAreaList({
         id: this.dropdownValue,
-        isCompleted: this.selectIdx === 0 ? true : false
-      })
+        isCompleted: this.selectIdx === 0 ? true : false,
+      });
       if (res.succeed) {
-        this.dataInfo = res.data
+        this.dataInfo = res.data;
+        if (this.dataInfo.areas?.length > 0) {
+          // 将 areas 中的 isCompleted 字段为 false 的 展示在前面
+          this.dataInfo.areas = this.dataInfo.areas.sort(
+            (a, b) => a.isCompleted - b.isCompleted
+          );
+        }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -354,7 +403,7 @@ page {
     padding-top: 72rpx;
     display: flex;
     flex-direction: column;
-    background: url('@/static/images/plan-icon-bg2.png') no-repeat 95% 40%;
+    background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
     background-size: 40%;
     background-color: #dfeefd;
     .name {
@@ -390,7 +439,7 @@ page {
       }
     }
   }
-  .empty-box{
+  .empty-box {
     margin-top: 100rpx;
   }
   .arealist {
diff --git a/pages/index/list.vue b/pages/index/list.vue
index fab1485..bb61939 100644
--- a/pages/index/list.vue
+++ b/pages/index/list.vue
@@ -62,7 +62,12 @@
         </u-form-item>
 
         <!-- 图片上传 -->
-        <u-form-item label="图片" prop="images" label-position="top">
+        <u-form-item
+          label="图片"
+          prop="images"
+          label-position="top"
+          :border-bottom="false"
+        >
           <!-- <u-upload
             v-model="form.images"
             :max-count="3"