zfire-newmall-admin/src/views/valueAddedService/orderSettleManag/index.vue

<template>
  <zj-page-container>
    <div class="tab">
      <el-radio-group v-model="tabType" size="small" @change="tabTypeChange">
        <el-radio-button label="collect">线上订单</el-radio-button>
        <el-radio-button label="offline">线下订单</el-radio-button>
      </el-radio-group>
    </div>
    <zj-page-fill>
      <collect v-if="tabTypeCk == 'collect'" key="collect" />
      <offline v-if="tabTypeCk == 'offline'" key="offline" />
    </zj-page-fill>
  </zj-page-container>
</template>

<script>
import { EventBus } from '@/utils/eventBus'
import collect from './pages/collect.vue'
import offline from './pages/offline.vue'
export default {
  components: { collect, offline },
  data() {
    return {
      tabType: this?.$route?.params?.pageType ? ({ SELF: "offline", ONLINE: "collect" })[this?.$route?.params?.pageType] || 'collect' : 'collect',
      tabTypeCk: this?.$route?.params?.pageType ? ({ SELF: "offline", ONLINE: "collect" })[this?.$route?.params?.pageType] || 'collect' : 'collect',
    }
  },
  methods: {
    tabTypeChange() {
      this.$nextTick(() => {
        this.tabTypeCk = this.tabType
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 20px 20px 0 20px;
}
</style>