Dining_Hall/pages/sendACarSystem/details.vue

<template>
  <view>
    <Navbar :title="navbarTitle" />
    <div class="tabs" v-if="opt.isDetail">
      <div class="item" :class="{ active: active == 1 }" @click="handleTab(1)">计划详情</div>
      <div class="item" :class="{ active: active == 2 }" @click="handleTab(2)">派车详情</div>
      <div class="item" :class="{ active: active == 3 }" @click="handleTab(3)" v-if="!opt.isArrival">审核记录</div>
    </div>
    <!-- <div v-if="opt.isDetail" style="height: 45px"></div> -->

    <PlanDetails v-if="active == 1" :opt="opt" />
    <PlanAuditDetails v-if="active == 2" :opt="opt" />
    <AuditRecord v-if="active == 3" :opt="opt" />
  </view>
</template>

<script>
import AuditRecord from './components/AuditRecord'
import PlanDetails from './components/PlanDetails'
import PlanAuditDetails from './components/PlanAuditDetails'

export default {
  components: { AuditRecord, PlanDetails, PlanAuditDetails },
  data() {
    return {
      opt: {},
      navbarTitle: '详情',
      active: 1
    }
  },
  onLoad(opt) {
    this.opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ this.opt', this.opt)
    this.active = this.opt.active
    if (this.opt.isPlan) {
      this.navbarTitle = '计划详情'
    } else if (this.opt.isAudit) {
      this.navbarTitle = '派车详情'
    } else if (this.opt.isDetail && !this.opt.isArrival) {
      this.navbarTitle = '派车详情'
    } else {
      this.navbarTitle = '详情'
    }
  },
  methods: {
    handleTab(index) {
      this.active = index
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}
.tabs {
  width: 100%;
  /* position: fixed;
  top: 44px;
  left: 0; */
  background-color: #fff;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  .item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: #666;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 2px solid #dcdcdc; // 添加透明边框
    transition: color 0.3s ease, border-bottom 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

    // 激活状态
    &.active {
      color: $u-primary;
      border-bottom: 2px solid $u-primary;
      background-color: #f8f8f8;
    }
  }
}
</style>