xt_pad/src/pages/main/dialysis/CheckTab.vue

<template>
  <div class="fixedTop">
    <div class="nav">
      <!-- <ul style="width: 90%">
        <li
          v-for="(item,i) in inspectionDate"
          :key="i"
          :class="index == i? 'active':'' "
          @click="ClickTab(i,item)"
        >{{item.project_name}}</li>
      </ul>-->
      <van-tabs v-model="active" @change="onClick">
        <van-tab v-for="(item, i) in inspectionDate" :key="i" :title="item.project_name"></van-tab>
      </van-tabs>
      <!-- <van-tabs v-model="active" ref="one">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
      </van-tabs>-->
    </div>

    <div class="tab-content">
      <inspection-item-table ref="item"></inspection-item-table>
    </div>
  </div>
</template>

<script>
import { GetInspection } from "@/api/check";
import InspectionItemTable from "./InspectionItemTable";
import $ from "jquery";

export default {
  name: "CheckTab",
  created() {
    this.patient = this.$route.query.patient_id;
    this.GetList();

    this.$nextTick(() => {
      if (this.active === 0) {
        console.log();
        $(".van-tabs__line").addClass("intro");
      }
    });
  },
  data() {
    return {
      index: 0,
      inspectionDate: [],
      patient: 0,
      active: 0
    };
  },

  components: {
    InspectionItemTable
  },
  methods: {
    ClickTab: function(tabIndex, row) {
      this.index = tabIndex;
      this.$refs.item.GetList(row.project_id, row);
    },
    GetList: function() {
      let params = {
        patient: this.patient
      };
      GetInspection(params).then(response => {
        this.inspectionDate = [];
        if (response.data.state == 1) {
          // console.log(this.$refs.item);
          this.inspectionDate = response.data.data.reference;
          this.$refs.item.GetList(1, this.inspectionDate[0]);
        }
      });
    },
    onClick(num, title) {
      // console.log(this.inspectionDate);
      // console.log(num);
      // console.log(this.$refs.item);
      if ($(".van-tabs__line").is(".intro")) {
        $(".van-tabs__line").removeClass("intro");
      }

      this.inspectionDate.map((items, i) => {
        if (num == i) {
          this.index = i;
          this.$refs.item.GetList(items.project_id, items);
        }
      });
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.nav {
  border-bottom: 1px #e5e5e5 solid;
  background: #fff;
  position: fixed;
  top: 76px;
  // @media only screen and (min-width: 376px) and (max-width: 668px) {
  //   top: 84px !important;
  // }
  // @media only screen and (min-width: 415px) and (max-width: 736px) {
  //   top: 88px !important;
  // }
  // @media only screen and (max-width: 767px) {
  //   top: 76px !important;
  // }
  @media only screen and (min-width: 768px) {
    top: 116px !important;
  }
  // @media only screen and (min-width: 813px) and (max-width: 1024px) {
  //   top: 117px !important;
  // }
  // @media only screen and (min-width: 1024px) {
  //   top: 117px !important;
  // }
  right: 0;
  z-index: 55;
  left: 0;
  background: #fff;
  ul {
    width: 60%;
    margin: 0 auto;
    @include box-sizing;
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    li {
      font-size: 0.32rem;
      float: left;
      color: $pgh-color;
      padding: 0.3rem 0;
      cursor: pointer;
    }
    .active {
      position: relative;
      &::before {
        width: 100%;
        height: 2px;
        color: $main-color;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        background: $main-color;
      }
    }
  }
}
</style>
<style lang="scss">
.intro {
  width: 41px !important;
  transform: translateX(20.5px) !important;
  @media only screen and (min-width: 415px) and (max-width: 668px) {
    width: 73px !important;
    transform: translateX(36.5px) !important;
  }
  @media only screen and (min-width: 376px) and (max-width: 415px) {
    width: 45.5px !important;
    transform: translateX(22.75px) !important;
  }
  @media only screen and (min-width: 668px) and (max-width: 735px) {
    width: 45.5px !important;
    transform: translateX(22.75px) !important;
  }
  @media only screen and (min-width: 668px) and (max-width: 736px) {
    width: 81px !important;
    transform: translateX(40.5px) !important;
  }
  @media only screen and (min-width: 737px) and (max-width: 812px) {
    width: 89px !important;
    transform: translateX(44.5px) !important;
  }
  @media only screen and (min-width: 813px) and (max-width: 1024px) {
    width: 113px !important;
    transform: translateX(56.5px) !important;
  }
  @media only screen and (min-width: 1025px) {
    width: 150.5px !important;
    transform: translateX(75.25px) !important;
  }
}
.van-tabs {
  height: 1rem;
}
.van-tabs--line .van-tabs__wrap {
  height: 1rem;
}
.van-tabs--line {
  padding-top: 1rem;
}
.van-tab {
  line-height: 1rem;
}
</style>