preliminary/src/components/TabPage.vue

<template>
  <div class="tab-wrap">
    <div class="tab"
      v-if="allMoudles.data&&allMoudles.data.length>0 && moduleShow">
      <p v-for="(it,index) in allMoudles.data"
        :style="{'width':1/allMoudles.data.length*100+'%'}"
        :key="it.id"
        @click="clickTab(it,index)">
        <span :class="{current:finish[it.type]}" v-if="type[it.type]==1">
          <i class="order">{{index+1}}</i>
          {{it.name}}
          <i class="line" v-if="currentTab[it.type]"></i>
        </span>
      </p>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <!-- 详情页 -->
    <div class="detail" v-if="detailShow">
      <DetailBox :flags="allMoudles.order"/>
    </div>
  </div>
</template>
<script type="text/javascript">
import Symptom from './Symptom.vue';
import AddContent from './AddContent.vue';
import DiagTreat from './DiagTreat.vue';
import Others from './Others.vue';
import Preview from './Preview.vue';
import {moduleConfig,moduleCP,getRouteName} from '../utils/tools.js';
import DetailBox from './DetailBox.vue';
import {mapState} from 'vuex';
export default {
  name: 'TabPage',
  data() {
    return {
      moduleShow:true,
      number:0,
      moduleCP:moduleCP,
      routerName:'',
      allMoudles:{}
    }
  },
  computed:{
    ...mapState({
      finish: state => state.finish,
      currentTab: state => state.currentTab,
      detailShow: state => state.detailShow,
      symChoose: state => state.symptom.choose,
      type: state => state.tabType,
      config: state => state.sysConfig,
      tmpAllMoudles: state => state.allMoudles,
    }),
  },
  created() {
    this.routerName = this.$route.name
    if (this.config.length == 0) {//登录进去返回到列表页，扫码返回到开始页
      let scan = localStorage.getItem('scan');
      let params = JSON.parse(localStorage.getItem('infoParam'));
      let param = JSON.parse(localStorage.getItem('loginParam'));
      let data = JSON.parse(localStorage.getItem('loginData'));
      if(!scan){
        if(data.length>1){
          this.$router.replace({path:'/department'});
        }else{
          this.$router.replace({path:'/home',query:param});
        }
      }else{
        this.$router.replace({path:'/home',query:Object.assign({}, params,{scan:true})});
      }
    }
  },
  mounted(){
    let tmpModule = moduleConfig(this.config,this.tmpAllMoudles);
    this.allMoudles = tmpModule;
    this.$store.commit('setActiveModule', tmpModule);
  },
  methods: {
    // 症状情况有内容后才可以点击tab栏
    clickTab(item,index){
      if(this.symChoose.length>0){
        this.number = index;
        this.flag = item.type;
        // this.finish[parseInt(item.type)] = true;
        this.$store.commit('setFinish',item.type)
        let routeName = getRouteName(item.type)
        this.$router.push({
          path:routeName
        })
      }
    },
  },
  components: {
    Symptom,
    DiagTreat,
    Others,
    AddContent,
    Preview,
    DetailBox
  }
}
</script>
<style lang="less" scoped>
@import '../less/base.less';
.tab-wrap {
  width: 100%;
  height: 100%;
  padding-bottom: 0.88rem;
  padding-top: 0.82rem;
  background-color: #fff;
  .tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 101;
    height: 0.82rem;
    line-height: 0.82rem;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    padding-top: 0.16rem;
    p {
      display: inline-block;
      padding: 0 0.2rem;
      box-sizing: border-box;
    }
    span {
      font-size: 0.28rem;
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      color: #colors[text];
      text-align: center;
      position: relative;
    }
    .line {
      width: .6rem;
      height: .04rem;
      background-color: #colors[btn];
      display: inline-block;
      position: relative;
      bottom: .2rem;
    }
    .current {
      color: #colors[btn];
    }
}
  .content {
    font-size: 0.3rem;
  }
}
</style>