delivery-depot-uniapp/pages/taskList-verification/taskListLayout.vue

<template>
  <view class="container">
    <task-list v-if="currentTab === 0"></task-list>
    <my-task-list ref="myTaskList" v-if="currentTab === 1"></my-task-list>
    <system-settings v-if="currentTab === 2"></system-settings>
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 0 }"
        @click="switchTab(0)"
      >
      <text class="iconfont icon-mrenwuliebiao" :style="{ color: currentTab === 0 ? '#1d5fdf' : '748498' }"></text>
        <text>任务列表</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 1 }"
        @click="switchTab(1)"
      >
      <text class="iconfont icon-woderenwu" :style="{ color: currentTab === 1 ? '#1d5fdf' : '748498' }"></text>
        <text>我的任务</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 2 }"
        @click="switchTab(2)"
      >
      <text class="iconfont icon-xitongshezhi" :style="{ color: currentTab === 2 ? '#1d5fdf' : '748498' }"></text>
        <text>系统设置</text>
      </view>
    </view>
  </view>
</template>

<script>
import TaskList from "./components/taskList.vue";
import MyTaskList from "./components/myTaskList.vue";
import SystemSettings from "../systemSet/systemSet.vue";
export default {
  components: {
    TaskList,
    MyTaskList,
    SystemSettings,
  },
  data() {
    return {
      currentTab: 0,
    };
  },
  onLoad(options) {
    // 如果有传入 tab 参数，则切换到对应标签
    if (options.tab) {
      this.currentTab = parseInt(options.tab);
    }
  },
  onShow() {
    if (this.currentTab === 1) {
      this.$nextTick(() => {
        this.$refs.myTaskList.initTaskList();
      });
      // this.$refs.myTaskList && this.$refs.myTaskList.onShow();
    }

    // && this.$refs.myTaskList.onShow();
  },

  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f6fa;
  position: relative;
  padding-bottom: 100rpx;
}

.tab-bar {
  height: 100rpx;
  display: flex;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #666;

    &.active {
      color: #1976d2;
    }

    text {
      margin-top: 4rpx;
    }
  }
}
</style>