feat: 计划列表接口对接

api/apiList.js

@@ -16,6 +16,10 @@ this.$api.getList(params).then(res => {
 export const GetPlanByDate = (data) =>
   request.get("/api/App/GetPlanByDate", data);
 
+// 根据日期获取计划
+export const GetTodayPlanList = (data) =>
+  request.get("/api/App/GetTodayPlanList", data);
+
 // 今日完成情况
 export const TodayCompletion = (data) =>
   request.post("/api/App/TodayCompletion", data);

pages/index/cleanPlan.vue

@@ -10,15 +10,24 @@
         <u-dropdown :title-size="42" active-color="#211D2F">
           <u-dropdown-item
             v-model="dropdownValue"
-            title="保洁计划"
+            :title="dataInfo.planName"
             :options="dropdownOptions"
+            @change="changeDropdown"
           ></u-dropdown-item>
         </u-dropdown>
       </view>
     </u-navbar>
     <view class="area-info">
-      <view class="name">2024年11月21号</view>
+      <view class="name">{{
-      <view class="position"> 08：30~11：30</view>
+        dataInfo.planDate ? dataInfo.planDate.split("T")[0] : ""
+      }}</view>
+      <view class="position">
+        <span v-if="dataInfo.beginTime && dataInfo.endTime">
+          {{ minutesToTime(dataInfo.beginTime) }}~{{
+            minutesToTime(dataInfo.endTime)
+          }}
+        </span>
+      </view>
       <view class="tabs">
         <view
           @click="changeTab(i)"
@@ -32,24 +41,29 @@
       </view>
     </view>
     <view class="arealist">
-      <view class="block-info">
+      <view class="block-info" v-for="item in dataInfo.areas" :key="item.id">
-        <view class="schedule">待保洁</view>
+        <view v-if="!item.isCompleted" class="schedule schedule-wait"
+          >待保洁</view
+        >
+        <view v-else class="schedule schedule-completed">已完成</view>
+
         <view class="name">
           <u-icon size="40" :name="posIcon"></u-icon>
-          <view class="text">东大门北侧_门2</view>
+          <view class="text">{{ item.aeraNmae }}</view>
         </view>
         <view class="type">
           <view class="value">区域类型</view>
           <u-tag
-            text="室外"
+            :text="item.areaType"
             class="tag"
             border-color="transparent"
-            type="success"
+            :type="item.areaType === '室外' ? 'success' : 'primary'"
           />
-          <u-tag text="特殊" border-color="transparent" type="warning" />
+          <!-- 特殊先隐藏，没有这个字段 -->
+          <!-- <u-tag text="特殊" border-color="transparent" type="warning" /> -->
         </view>
         <view class="illustrate">
-          {{ "需要清理整个户外通道/保持跑道整洁花坛边落叶清扫" }}
+          {{ item.note }}
         </view>
       </view>
     </view>
@@ -57,14 +71,16 @@
 </template>
 
 <script>
-import { GetPlanInfoAreaList } from "@/api/apiList";
+import { GetPlanInfoAreaList, GetTodayPlanList } from "@/api/apiList";
+
+import { minutesToTime } from "@/utils/utils";
 
 export default {
   data() {
     return {
       posIcon: require("@/static/images/pos-icon.png"),
       selectIdx: 0,
-      dropdownValue: 1,
+      dropdownValue: "",
       dropdownOptions: [
         {
           label: "保洁计划1",
@@ -94,32 +110,66 @@ export default {
         },
       ],
 
-      paramsId: "",
+      dataInfo: {
+        planName: "",
+      },
     };
   },
 
+  computed: {
+    // dropdownTitle() {
+    //   // 通过 dropdownValue 匹配 对应的项，展示 label
+    //   const item = this.dropdownOptions.find(
+    //     (item) => item.value === this.dropdownValue
+    //   );
+    //   return item ? item.label : "";
+    // },
+  },
+
   onLoad(options) {
-    this.paramsId = options.id;
+    // this.paramsId = options.id;
+    this.dropdownValue = options.id;
   },
 
   created() {
+    this.getTodayPlanList();
     this.getPlanInfoAreaList();
   },
 
   methods: {
+    minutesToTime,
+
     changeTab(i) {
-      console.log(i);
       this.selectIdx = i;
+
+      this.getPlanInfoAreaList();
+    },
+
+    changeDropdown(e) {
+      this.dropdownValue = e;
+
+      this.getPlanInfoAreaList();
+    },
+
+    // 获取今日计划
+    async getTodayPlanList() {
+      const res = await GetTodayPlanList();
+      if (res.succeed) {
+        this.dropdownOptions = res.data.map((item) => ({
+          label: item.name,
+          value: item.id,
+        }));
+      }
     },
 
     // 获取计划区域列表
     async getPlanInfoAreaList() {
       const res = await GetPlanInfoAreaList({
-        id: this.paramsId,
+        id: this.dropdownValue,
-        // isCompleted: false,
+        isCompleted: this.selectIdx === 0 ? true : false,
       });
       if (res.succeed) {
-        console.log("res...", res);
+        this.dataInfo = res.data;
       }
     },
   },
@@ -128,7 +178,7 @@ export default {
 
 <style lang="scss" scoped>
 .content {
-  height: 100vh;
+  // height: 100vh;
   background: #f7f8fc;
   .slot-wrap {
     display: flex;
@@ -197,6 +247,7 @@ export default {
       background: #ffffff;
       border-radius: 18rpx;
       padding: 65rpx 46rpx;
+      margin-bottom: 32rpx;
       .schedule {
         position: absolute;
         right: 0;
@@ -204,14 +255,25 @@ export default {
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: #feeded; /* 背景颜色 */
+        // background-color: #feeded; /* 背景颜色 */
         color: white;
         width: 160rpx;
         height: 45rpx;
         font-size: 30rpx;
-        color: #db3636;
+        // color: #db3636;
         border-bottom-left-radius: 500rpx; /* 切角 */
       }
+
+      .schedule-completed {
+        color: #4278f4;
+        background-color: #e5ebff;
+      }
+
+      .schedule-wait {
+        color: #db3636;
+        background-color: #feeded;
+      }
+
       .name {
         display: flex;
         align-items: center;

utils/request.js

@@ -8,7 +8,7 @@ const manager = new RequestManager()
 
 
 // 先写死调接口
-uni.setStorageSync('token', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MTgyMTM4LCJleHAiOjE3NDQxODU3MzgsImlhdCI6MTc0NDE4MjEzOH0.QQNQNiKe14L-anWPNAKcvLXtzy-eo1FL9hhTsbLKAxg')
+uni.setStorageSync('token', 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9zaWQiOiIwOGRkNzFiZC01N2MxLTQ1YmMtODBiYS0xMjkzYjU4MTViMmEiLCJ1bmlxdWVfbmFtZSI6IuS_nea0gSIsInJvbGUiOiJVc2VyIiwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbW9iaWxlcGhvbmUiOiIxODE3NDAxMDU2MiIsImdyb3Vwc2lkIjoiNGIyZDk2NjItYTc2OC0wOGYyLWEwYzgtNzYyYjhjNzZkYTJhIiwibmJmIjoxNzQ0MTg3MTE5LCJleHAiOjE3NDQxOTA3MTksImlhdCI6MTc0NDE4NzExOX0.n7mnghRVAvzNw81I7WmT6O0L73S97C2hxFNuYiExsaQ')
 
 
 const baseRequest = async (url, method, data = {}, loading = true) =>{

utils/utils.js

@@ -499,3 +499,18 @@ export function getDateDiff(date) {
     return `${Math.abs(daysDiff)}天前`;
   }
 }
+
+
+
+/**
+ * 将分钟转换为时间格式
+ * @param {number} minutes 分钟
+ * @returns {string} 时间格式
+ */
+export function minutesToTime(minutes) {
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  const formattedHours = String(hours).padStart(2, '0');
+  const formattedMins = String(mins).padStart(2, '0');
+  return `${formattedHours}:${formattedMins}`;
+}