index.vue 1.21 KB
<template>
  <div class="clerk-wrapper">
    <el-tabs type="border-card" v-model="activeName" >
      <el-tab-pane :label="$t('navData.blocks')" name="first">
        <group v-if='activeName == "first"' @getStore='getStore'></group>
      </el-tab-pane>
      <el-tab-pane :label="$t('navData.malls')" name="second">
        <store v-if='activeName == "second"' :groupMallId='mallId'></store>
      </el-tab-pane>
      <el-tab-pane :label="$t('VideoShopTour.checkItems')" name="third">
        <checkItem v-if='activeName == "third"'></checkItem>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import group from './group.vue'
  import store from './store.vue'
  import checkItem from './checkItem.vue'
  export default{
    components:{
      group,
      store,
      checkItem
    },
    data() {
      return {
        activeName: 'first',
        mallId:''
      };
    },
    methods: {
      getStore(data){
        this.mallId = data.mallId
        this.activeName = 'second'
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .clerk-wrapper{
    padding: 8px 15px;
  }
  /deep/.el-tabs{
    box-shadow:none;
    border-width: 0;
    .el-tabs__content{
      padding: 15px 0;
    }
  }
</style>