delivery-depot-uniapp/pages/myTask-verification/myTaskLayout.vue

<template>
  <view class="layout">
    <!-- 自定义导航栏 -->
    <!-- <view class="custom-nav" :style="{ height: navBarHeight + 'px' }">
      <view class="nav-content" :style="{ marginTop: statusBarHeight + 'px' }">
        <view class="back" @click="handleBack">
          <view class="box-img">
            <image src="/static/icons/icon-fh.png" mode="widthFix"></image>
          </view>
        </view>
        <view class="nav-title"> {{ title }} </view>
        <view class="nav-right">
          <button class="register-btn" @click="handleRegister">账号注册</button>
        </view>
      </view>
    </view> -->

    <!-- 添加上边距以避免被导航栏遮挡 -->
    <!-- :style="{ paddingTop: navBarHeight + 'px' }" -->
    <view class="main-content">
      <!-- 顶部导航栏 -->
      <view class="tabs">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          :class="['tab-item', currentTab === index ? 'active' : '']"
          @click="switchTab(index)"
        >
          {{ item.name }}
        </view>
      </view>

      <!-- 内容区域 -->
      <swiper
        :current="currentTab"
        @change="handleSwiperChange"
        :style="{ height: `calc(100vh - 88rpx)` }"
      >
        <!-- :style="{ height: `calc(100vh - ${navBarHeight}px - 88rpx - 140rpx)` }" -->
        <swiper-item v-for="(item, index) in tabList" :key="index">
          <CheckInfo
            v-if="item.component === 'CheckInfo'"
            :task-info="taskInfo"
            @update-clock-info="handleClockInfoUpdate"
          ></CheckInfo>
          <WarehouseInfo
            v-if="item.component === 'WarehouseInfo'"
            :task-info="taskInfo"
            ref="warehouseInfoRef"
          ></WarehouseInfo>
          <StorageInfo
            v-if="item.component === 'StorageInfo'"
            :task-info="taskInfo"
          ></StorageInfo>
          <FinanceInfo
            v-if="item.component === 'FinanceInfo'"
            :task-info="taskInfo"
          ></FinanceInfo>
        </swiper-item>
      </swiper>

      <!-- 验证按钮 -->
      <view class="verify-buttons" v-if="currentTab === 1 && !taskInfo.isAllOk">
        <button class="btn pass" @click="handleVerify(true)">核验通过</button>
        <button class="btn reject" @click="handleVerify(false)">
          核验不通过
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import CheckInfo from "./components/CheckInfo.vue";
import WarehouseInfo from "./components/WarehouseInfo.vue";
import StorageInfo from "./components/StorageInfo.vue";
import FinanceInfo from "./components/FinanceInfo.vue";
import { getTasks } from "@/api/task";

export default {
  components: {
    CheckInfo,
    WarehouseInfo,
    StorageInfo,
    FinanceInfo,
  },
  data() {
    return {
      currentTab: 0,
      tabList: [
        { name: "打卡信息", component: "CheckInfo" },
        { name: "仓房信息", component: "WarehouseInfo" },
        { name: "库区信息", component: "StorageInfo" },
        { name: "财务信息", component: "FinanceInfo" },
      ],
      statusBarHeight: 0,
      navBarHeight: 0,
      taskInfo: null,
      noHy: false, //是否核验过
      clockInInfo: null, // 添加这个数据属性来存储打卡信息
    };
  },
  computed: {
    title() {
      if (this.tabList[this.currentTab].name === "打卡信息") {
        return "我的任务";
      } else {
        return this.tabList[this.currentTab].name;
      }
    },
  },
  created() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    // 状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 导航栏高度（默认44px）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // 计算导航栏高度 = 状态栏高度 + (胶囊底部 - 状态栏底部) * 2
    this.navBarHeight =
      this.statusBarHeight +
      (menuButtonInfo.bottom - systemInfo.statusBarHeight) * 1;
    this.isMiniProgram();
  },
  onLoad(options) {
    if (options.taskInfo) {
      try {
        this.taskInfo = JSON.parse(decodeURIComponent(options.taskInfo));

        uni.setNavigationBarTitle({
          title: this.taskInfo.kqmc || "我的任务",
        });
        // console.log("接收到的任务信息：", this.taskInfo);
      } catch (error) {
        console.error("解析任务信息失败：", error);
      }
    }
  },
  mounted() {
    if (this.taskInfo.hyState !== 3) {
      // 禁止核验
      this.noHy = true;
    } else {
      this.noHy = false;
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
    },
    handleSwiperChange(e) {
      this.currentTab = e.detail.current;
    },
    async handleVerify(isPassed) {
      if (!this.clockInInfo.dkdd) {
        // 重定向到打卡页面
        this.currentTab = 0;
        uni.showToast({
          title: "请先打卡",
          icon: "none",
        });
        return;
      }

      let data;
      if (isPassed) {
        data = {
          kqIds: [this.taskInfo.kqId],
          hyState: 1,
          listType: 2,
        };
      } else {
        data = {
          kqIds: [this.taskInfo.kqId],
          hyState: 2,
          listType: 2,
        };
      }

      this.$refs.warehouseInfoRef[0].confirmSelection(data);

      // const res = await getTasks(data);
      // if (res.code === 0) {
      //   uni.showToast({
      //     title: res.msg,
      //     icon: "success",
      //   });

      //   // 跳转到任务列表页面
      //   uni.reLaunch({
      //     url: "/pages/taskList-verification/taskListLayout?tab=1",
      //   });
      // } else {
      //   uni.showToast({
      //     title: "核验失败",
      //     icon: "none",
      //   });
      // }
    },
    handleRegister() {
      // 处理注册按钮点击事件
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },
    // 判断是否为小程序
    isMiniProgram() {
      // console.log(uni.getSystemInfoSync().platform);

      return uni.getLaunchOptionsSync().query.miniProgram;
    },
    // 添加处理打卡信息更新的方法
    handleClockInfoUpdate(info) {
      this.clockInInfo = info;
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  height: 100vh;
  background: linear-gradient(to bottom, #cfddfc 10%, #ffffff);
  position: relative;
}

.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #cfddfc;
  z-index: 999;

  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 16px;

    .back {
      width: 180rpx;
      display: flex;
      align-items: center;

      .box-img {
        width: 30rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }
    .nav-title {
      width: 180rpx;
      font-size: 40rpx;
      // font-weight: bold;
      color: #333;
    }

    .nav-right {
      margin-right: 150rpx;
      width: 180rpx;
      .register-btn {
        margin: 0;
        padding: 0;
        height: 32px;
        line-height: 32px;
        font-size: 35rpx;
        color: #333;
        background: rgba(0, 0, 0, 0);
        // border-radius: 16px;
        // border: 1px solid #2979ff;

        &::after {
          border: none;
        }
      }
    }
  }
}

.main-content {
  box-sizing: border-box;
  min-height: 100vh;
}

.tabs {
  display: flex;
  height: 88rpx;
  background-color: #cfddfc;

  // border-bottom: 1rpx solid #eee;
  background-color: #cfddfc;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  font-size: 35rpx;
  color: #333;
  position: relative;
  font-weight: 400;

  &.active {
    color: #000;
    position: relative;
    font-weight: 500;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150rpx;
      height: 10rpx;
      background-color: #4185fa;
    }
  }
}

.verify-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 0 40rpx 0;
  display: flex;
  justify-content: space-between;
  // background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;

  .btn {
    width: 48%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 10rpx;
    font-size: 28rpx;

    &.pass {
      background-color: #2979ff;
      color: #fff;
    }

    &.reject {
      background-color: #fff;
      color: #2979ff;
      border: 2rpx solid #2979ff;
    }
  }
}
</style>