InspectionCleaning/pages/index/cleanPlan.vue

<template>
  <view class="content">
    <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>
        <view class="back-icon" @click="backFn">
          <!-- <u-icon name="arrow-left" size="50rpx" color="#606266"></u-icon> -->
          <uni-icons type="left" size="50rpx" color="#606266"></uni-icons>
        </view>
      </view>
    </u-navbar>
    <view class="area-info">
      <view class="name">{{
        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)"
          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 v-else class="schedule schedule-completed">已完成</view>

        <view class="name">
          <u-icon size="40" :name="posIcon"></u-icon>
          <view class="text">{{ item.aeraNmae }}</view>
        </view>
        <view class="type">
          <view class="value">区域类型</view>
          <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>
        <view class="illustrate">
          {{ item.note }}
        </view>
      </view>
    </view>
    <!-- <button @click="successShow = true">刷卡成功</button> -->
    <!-- <button @click="nfcResFn(false)">刷卡失败</button> -->
    <!-- nfc刷卡成功弹窗 -->
    <u-popup v-model="successShow" mode="center" :round="30">
      <view class="success-box">
        <view class="box-content">
          <view class="logo">
            <image
              style="width: 100%; height: 100%"
              src="/static/images/msg-success.png"
              alt=""
            />
          </view>
          <view class="content-title">刷卡成功</view>
          <view class="btn-box">
            <view class="btn-cancel" @click="successShow = false">暂不</view>
            <view class="btn-success" @click="toUploadPage">上传图片</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- nfc刷卡失败弹窗 -->
    <u-popup v-model="errorShow" mode="center" :round="30">
      <view class="error-box">
        <view class="box-content">
          <view class="logo">
            <image
              style="width: 100%; height: 100%"
              src="/static/images/msg-error.png"
              alt=""
            />
          </view>
          <view class="content-title">
            {{ errorMsg }}
          </view>
          <view class="btn-box">
            <view class="btn-cancel" @click="errorShow = false">暂不</view>
            <view class="btn-success" @click="errorShow = false">异常上报</view>
            <!-- <view class="btn-success" @click="exceptionReportFn">异常上报</view> -->
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  GetPlanInfoAreaList,
  GetTodayPlanList,
  GetAwaitUploadAreaApi,
} from "@/api/apiList";

import { minutesToTime } from "@/utils/utils";

export default {
  data() {
    return {
      posIcon: require("@/static/images/pos-icon.png"),
      selectIdx: 0,
      dropdownValue: "",
      dropdownOptions: [
        {
          label: "保洁计划1",
          value: 1,
        },
        {
          label: "保洁计划2",
          value: 2,
        },
        {
          label: "保洁计划3",
          value: 3,
        },
        {
          label: "保洁计划4",
          value: 4,
        },
      ],
      selectTabs: [
        {
          name: "全部",
          value: 0,
        },
        {
          name: "待保洁",
          value: 1,
        },
      ],

      paramsId: "",
      // 刷卡成功弹窗
      successShow: false,
      // 刷卡失败弹窗
      errorShow: false,
      errorMsg: "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息",
      dataInfo: {
        planName: "",
        areas: [],
      },
    };
  },

  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.dropdownValue = options.id;
    window.nfcFn = this.nfcResFn;
    // this.nfcResFn();
  },

  created() {
    this.getTodayPlanList();
    this.getPlanInfoAreaList();
  },

  methods: {
    minutesToTime,

    backFn() {
      // console.log("%c%s", "color:red", "返回");

      uni.navigateBack();
    },

    async nfcResFn(data) {
      if (!data) {
        return uni.showToast({ title: "未传入参数 initFn", icon: "none" });
      }
      // uni.showModal({
      //   title: "查看initFn",
      //   content: JSON.stringify(data) || "未传入参数 initFn",
      //   showCancel: true,
      //   success: function (res) {},
      // });
      let cardID = data.cardID;
      let nimei = data.nimei;
      const req = {
        Nimei: nimei,
        // Nimei:'"78F04BC3E9A6DE4782C11A2346F39C68'
      };
      const res = await GetAwaitUploadAreaApi(req);
      console.log(res, "res---");
      // 刷卡失败
      if (!res.succeed) {
        console.log("%c%s", "color:red", "刷卡失败");
        // 提示信息
        this.errorMsg =
          res.error || "NFC卡异常或丢失，可尝试重新刷卡或提交卡片异常信息";
        this.errorShow = true;
        // 同时关闭成功弹窗
        this.successShow = false;
        return;
      }
      // 刷卡成功
      this.successShow = true;
      // 同时关闭失败弹窗
      this.errorShow = false;
      return;
      if (data) {
        console.log("%c%s", "color:red", "nfc刷卡成功");
        this.successShow = true;
        // 同时关闭失败弹窗
        this.errorShow = false;
      } else {
        console.log("%c%s", "color:red", "刷卡失败");
        this.errorShow = true;
        // 同时关闭成功弹窗
        this.successShow = false;
      }
    },
    // 上传图片
    toUploadPage() {
      console.log("%c%s", "color:red", "上传图片");

      const params = {
        planName: this.dataInfo.planName,
        id: this.dataInfo.areas[this.dataInfo.areas.length - 1].id,
        aeraNmae: this.dataInfo.areas[this.dataInfo.areas.length - 1].aeraNmae,
      };
      console.log(params);

      // 先关闭弹窗再跳转
      this.successShow = false;
      uni.navigateTo({
        url:
          "/pages/index/uploadPhoto?params=" +
          encodeURIComponent(JSON.stringify(params)),
      });
    },
    // 异常上报
    exceptionReportFn() {
      console.log("%c%s", "color:red", "异常上报");

      // 先关闭弹窗再跳转
      this.errorShow = false;
      uni.navigateTo({
        url: "/pages/index/list",
      });
    },

    toItemPage(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() {},
    closeFn() {},
    changeTab(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.dropdownValue,
        isCompleted: this.selectIdx === 0 ? true : false,
      });
      if (res.succeed) {
        this.dataInfo = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f3f5fa !important;
}
.content {
  // height: 100vh;
  background: #f7f8fc;
  .slot-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    /deep/ .u-dropdown-item__options {
      width: 100%;
    }

    .back-icon {
      position: absolute;
      left: 12rpx;
      top: 12rpx;
      z-index: 20;
    }
  }
  .title {
    line-height: 1;
    border-left: 10rpx solid #5a7ee9;
    padding-left: 16rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .area-info {
    padding: 24rpx 32rpx;
    padding-top: 72rpx;
    display: flex;
    flex-direction: column;
    background: url("@/static/images/plan-icon-bg2.png") no-repeat 95% 40%;
    background-size: 40%;
    background-color: #dfeefd;
    .name {
      font-weight: 800;
      font-size: 48rpx;
      color: #1d1d1d;
    }
    .position {
      margin-top: 40rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: #465161;
    }
    .tabs {
      margin-top: 38rpx;
      display: flex;
      justify-content: space-between;
      .tab-item {
        z-index: 99;
        pointer-events: auto; /* 确保可点击 */
        background: #ffffff;
        border-radius: 30rpx;
        padding: 12rpx 0;
        width: 48%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #383535;
      }
      .select {
        color: #ffffff;
        background: #4278f4;
      }
    }
  }
  .arealist {
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    .block-info {
      position: relative;
      background: #ffffff;
      border-radius: 18rpx;
      padding: 65rpx 46rpx;
      margin-bottom: 32rpx;
      .schedule {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: #feeded; /* 背景颜色 */
        color: white;
        width: 160rpx;
        height: 45rpx;
        font-size: 30rpx;
        // 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;
        .text {
          margin-left: 20rpx;
          font-size: 38rpx;
          color: #32353b;
        }
      }
      .type {
        display: flex;
        margin: 38rpx 0;
        .value {
          margin-right: 10rpx;
          font-size: 32rpx;
          color: #8896b4;
        }
        .tag {
          margin: 0 16rpx;
        }
      }
      .illustrate {
        padding: 46rpx;
        background: #f3f6f7;
        border-radius: 21rpx;
        font-size: 32rpx;
        color: #353535;
        line-height: 57rpx;
      }
    }
  }
}
.success-box {
  // overflow:hidden;
  width: 650rpx;
  padding-top: 50rpx;
  background-color: transparent;
  .box-content {
    height: 450rpx;
    background-color: #ffffff;
    background: linear-gradient(to bottom, #a7dafc, white 60%, white);
    border-radius: 30rpx;
    // border:1px solid red;
    position: relative;
    .logo {
      position: absolute;
      top: -50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 200rpx;
      height: 200rpx;
    }
    .content-title {
      position: absolute;
      top: 40%;
      width: 100%;
      color: black;
      font-size: 40rpx;
      text-align: center;
    }
    .btn-box {
      position: absolute;
      bottom: 10%;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .btn-cancel {
        width: 200rpx;
        height: 70rpx;
        background-color: #f3f6f7;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #32353b;
      }
      .btn-success {
        width: 200rpx;
        height: 70rpx;
        background-color: #4278f4;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: white;
      }
    }
  }
}
.error-box {
  // overflow:hidden;
  width: 650rpx;
  padding-top: 50rpx;
  background-color: transparent;
  .box-content {
    height: 450rpx;
    background-color: #ffffff;
    background: linear-gradient(to bottom, #ffeddf, white 60%, white);
    border-radius: 30rpx;
    // border:1px solid red;
    position: relative;
    .logo {
      position: absolute;
      top: -50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 200rpx;
      height: 200rpx;
      // background-color:red;
    }
    .content-title {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      color: black;
      font-size: 32rpx;
      text-align: center;
    }
    .btn-box {
      position: absolute;
      bottom: 10%;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .btn-cancel {
        width: 200rpx;
        height: 70rpx;
        background-color: #f3f6f7;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #32353b;
      }
      .btn-success {
        width: 200rpx;
        height: 70rpx;
        background-color: #f76590;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: white;
      }
    }
  }
}
::v-deep .u-mode-center-box {
  margin-top: -500rpx !important;
  background-color: transparent !important;
}
</style>