micro_vue/src/kpa_pages/allCheck/index.vue

<template>
  <div class="page_allCheck">
    <div class="searchList">
      <van-tabs
        v-model="active"
        title-active-color="#000000"
        title-inactive-color="#3C3C3C"
        v-for="item in checkdata"
        :key="item.id"
      >
        <van-tab :title="item.id">
          <div class="all">
            <ul class="headline">
              <li>检查项目</li>
              <li>结果</li>
              <li>参考值</li>
            </ul>

            <ul class="itemList">
              <li v-for="(item, index) in 8" :key="index">
                <span>白细胞(WBS)</span>
                <span>
                  30
                  <i class="el-icon-top"></i>
                  <i class="el-icon-bottom"></i>
                </span>
                <span>4.00~10.00</span>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { checkAll } from "@/api/patient/patient";
export default {
  data() {
    return {
      searchVal: "",
      active: 0,
      checkdata: []
    };
  },
  methods: {
    checkAll(inspectdate, patientid, orgid) {
      // eslint-disable-next-line no-undef
      checkAll(inspectdate, patientid, orgid).then(response => {
        if (response.data.state === 1) {
          var checkdata = response.data.data.checkdata;
          this.checkdata = checkdata;
          console.log("checkdata", checkdata);
        }
      });
    }
  },
  created() {
    var inspect_date = this.$route.query.inspect_date;
    var patientid = this.$route.query.patientid;
    var orgid = this.$route.query.orgid;
    this.checkAll(inspect_date, patientid, orgid);
  }
};
</script>

<style lang="scss">
.page_allCheck {
  overflow: hidden;
  height: 100%;

  .searchList {
    height: 100%;
    .van-tabs {
      display: flex;
      flex-direction: column;
      height: 100%;
      > div:last-child {
        flex: 1;
        overflow: auto;
        background: #f4f4f4;
      }
    }
    .van-tab {
      font-weight: 600;
    }
    .van-tab--active {
      font-size: 1.25rem;
      font-weight: 600;
    }
    .van-tabs__line {
      height: 0.25rem;
      background: linear-gradient(
        -90deg,
        rgba(129, 159, 246, 1),
        rgba(81, 119, 238, 1),
        rgba(75, 102, 234, 1)
      );
    }
    .van-tabs__content {
      background: #f8f8f8;
    }
    .all {
      background: #fff;
      margin-top: 1.25rem;
      padding-top: 0.625rem;
    }
    .headline {
      display: flex;
      height: 2.5rem;
      align-items: center;
      background: #f7f7fa;

      li {
        width: 33.3%;
        text-align: center;
        font-size: 0.75rem;
      }
    }
    .itemList {
      li {
        display: flex;
        align-items: center;
        height: 2.5rem;
        span {
          width: 33.3%;
          text-align: center;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>