LiaoningYaopinIframe/src/views/firmContent/drugInfo/index.vue

<template>
  <div class="productinformation">
    <div class="drugInfo-top">
      <div class="top-left">
        <div class="drug-name">
          <span>{{ pruduct.key  }} ：</span>
          <!-- <span class="Name">{{ 暂无 }}</span> -->
          <span class="Name">{{ pruduct.value || '暂无' }}</span>
        </div>
        <div class="drug-tag">
          <span v-for="item in tags" :key="item.id">{{ item.name }}</span>
        </div>
      </div>
      <div>
        <el-button v-if="goback" type="primary" plain size="mini" @click="goBack">返回</el-button>
        <i v-else class="el-icon-close close" @click="goBack"></i>
      </div>
    </div>
    <div class="drugInfo-bottom">
      <div class="content-tabs">
        <div class="tabs">
          <div class="tab" @click="actionTab(1)" :class="action == 1 ? 'actionTab':''">
            <img :class="action !== 1 ? 'actionImage' : ''" :src="action == 1 ? `${require('@/assets/images/home/icon1-1@2x.png')}`:`${require('@/assets/images/home/icon1-2@2x.png')}`" alt="">
            <span>基本信息</span>
          </div>
          <div class="tab" @click="actionTab(2)" :class="action == 2 ? 'actionTab':''">
            <img  :src="action == 2 ? `${require('@/assets/images/home/icon2-1@2x.png')}`:`${require('@/assets/images/home/icon2-2@2x.png')}`" alt="">
            <span>品种抽样</span>
          </div>
          <div class="tab" @click="actionTab(3)" :class="action == 3 ? 'actionTab':''">
            <img  :src="action == 3 ? `${require('@/assets/images/home/icon5-1@2x.png')}`:`${require('@/assets/images/home/icon5-2@2x.png')}`" alt="">
            <span>不良反应</span>
          </div>
        </div>
      </div>
      <!-- <div class="drug-input" v-show="action == 2 || action == 3 ">
        <div class="inputs">
          <div class="rank" v-show="action == 2">
            <div class="input--label">抽样级别：</div>
            <el-select v-model="value" placeholder="请选择抽样级别">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="rank" v-show="action == 3">
            <div class="input--label">报告编号：</div>
            <div>
              <el-input v-model="number" placeholder="请输入报告编号"></el-input>
            </div>
          </div>
          <div class="number">
            <div class="input--label">{{ action == 3 ? '患者姓名：':'抽样编号：' }}</div>
            <div>
              <el-input v-model="name" :placeholder="action == 3 ? '请输入患者姓名':'请输入抽样编号'"></el-input>
            </div>
          </div>
        </div>
        <div class="search-btns">
          <button class="reset" @click="reset">重置</button>
          <button class="inquire" @click="inquire(1)">查询</button>
        </div>
      </div> -->
      <div class="drug-exit" :style="drugExitStyle">
        <!-- <router-view></router-view> -->
        <component :is="currentComponent" :transinformation="transinformation" @getCPName="getCPName"></component>
      </div>
    </div>
  </div>
</template>
<script>
import basicInfo from "./drugBasicInfo/drugBasicInfo"
import PZchouyang from "./PZchouyang/PZchouyang"
import adverseReaction from "./adverseReaction/adverseReaction"
export default {
  data() {
    return {
      row:{},
      tags:[
        {
          id:1,
          name:'百年产品'
        },{
          id:2,
          name:'疗效显著'
        },
      ],
      action:1,
      currentComponent:'basicInfo',
      drugExitStyle:{
        height:'',
      },
      // isOne:false,
      goback:true,
      id:null,
      token:null,
      //产品名称
      pruduct:{
        key:'某某产品',
        value:'-'
      }
    }
  },
  components:{
    basicInfo,
    PZchouyang,
    adverseReaction
  },
  methods:{
    //获取名称
    getCPName(e){
      this.pruduct.key = e.key
      this.pruduct.value = e.value
    },
    goBack(){
      this.$router.go(-1)
    },
    // tabs切换
    actionTab(id){
      this.action = id;
      if(id == 1) {
        this.currentComponent = 'basicInfo'
        // this.$router.push({ name:'drugBasicInfo' })
        this.$nextTick(()=>{
          this.getHeight();
        })
      } else if(id == 2) {
        this.currentComponent = 'PZchouyang'
        this.$nextTick(()=>{
          this.getHeight();
        })
        // this.$router.push({ name:'PZchouyang' })
      } else if(id == 3) {
        this.currentComponent = 'adverseReaction'
        this.$nextTick(()=>{
          this.getHeight();
        })
        // this.$router.push({ name:'adverseReaction' })
      } 
    },
    getHeight(){
      let dom = document.getElementsByClassName('drug-exit');
      let height = dom[0].getBoundingClientRect();
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      let relativeHeight = windowHeight - height.top - 10
      this.drugExitStyle.height = relativeHeight + 'px'
    },
    async getVRdgYpwhGxwz(res){
      let data = await this.$api.productDetails.vRdgYpwhGxwz(res);
      this.name = data.data.yptymc;
    },
    async ylqxJnyelcp(res){
      let data = await this.$api.productDetails.ylqxJnyelcp(res); 
      this.name = data.data.cpmc;
    }
  },
  // watch: {
  //   $route: {
  //     handler(to, from) {
  //       // 药品详情的三个标签页tab高亮切换
  //       this.action = to.meta.id;
  //     },
  //     immediate: true, //第一次就执行
  //   },
  // },
  computed:{
    transinformation(){
      switch(this.currentComponent) {
        case 'basicInfo':
          return {
            b:this.id,
            token:this.token,
          }
        case 'PZchouyang':
          return {
            b:this.id,
            token:this.token,
          }
        case 'adverseReaction':
          return {
            b:this.id,
            token:this.token,
          }
        default:
          return {
            b:4,
            token:'暂无'
          }
      }
    }
  },
  mounted(){
    // params刷新数据会丢失
    // console.log(this.$route.params)
    // this.row = JSON.parse(this.$route.params.row)
    // this.row = this.$route.params.row;
    let search = window.location.search.slice(1);
    let params = search.split('&');
    let paramsLabel = params[2].split('=')[0]
    this.id = params[0].split('=')[1];
    this.token = params[1].split('=')[1];
    if (paramsLabel == 'yppzwh') {
      this.isYppzwh = true;
      this.getVRdgYpwhGxwz(params[2].split('=')[1]);
    } else if(paramsLabel == 'qxzczh') {
      this.ylqxJnyelcp(params[2].split('=')[1]);
    }

    // 判断是用⌈ 返回 ⌋ 还是用⌈ X ⌋ 用来返回上一级
    if(this.id == '1') {
      this.goback = true;
    } else {
      this.goback = false;
    }
    this.$nextTick(()=>{
      this.getHeight();
    })
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
.productinformation {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0px 0px vw(12) 0px rgba(194,212,226,0.64);
  border-radius: vw(10) vw(10) 0 0;
  .drugInfo-top {
    display: flex;
    justify-content: space-between;
    padding: vh(15) vw(25);
    border-bottom: vw(1) solid #EDEEF0;
    .close {
      cursor: pointer;
    }
    .top-left {
      display: flex;
      align-items: center;

      .drug-name {
        display: flex;
        align-items: center;

        span {
          font-size: vw(18);
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #6A6C6F;
        }

        .Name {
          // margin-left: ;
          color: #292F38;
        }
      }
      .drug-tag {
        width: vw(200);
        display: flex;
        align-items: center;
        margin-left: vw(10);

        span {
          font-size: vw(14);
          margin-right: vw(10);
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
          padding: vh(4) vw(13);
          background-color: #66C691;
          border-radius: vw(2);

          &:nth-of-type(2) {
            background-color: #EABB48;
          }
          &:last-child {
            margin-right: 0;
          }
        }
        
      }
    }
  }
  .drugInfo-bottom {
    padding: 0 vw(25);
    .content-tabs {
      margin-top: vh(25);
      .tabs {
        width: 100%;
        display: flex;
        border-bottom: vw(1) solid #DBE0E8;
        .tab {
          border: vw(1) solid #DBE0E8;
          padding: vh(7) vw(22);
          display: flex;
          align-items: center;
          border-bottom: none;
          margin-right: vw(9);
          cursor: pointer;

          &:last-child{
            margin-right: 0;
          }

          img {
            width: vw(18);
            height: vw(18);
            margin-right: vw(3);
          }

          .actionImage {
            padding: vw(1.5);
            width: vw(18);
            height: vw(18);
            margin-right: vw(3);
          }

          span {
            font-size: vw(16);
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #2F3742;
          }
        }
        .actionTab {
          background-color: #1E80EB;
          
          span {
            color: #fff;
          }
        }
      }
    }

    .drug-exit {
      margin-top: vh(25);
      padding-bottom: vw(20);
      overflow-y: scroll;
    }
  }
}
</style>