tuanfeng-pc-admin/src/views/business/alliance/components/DetailDialog.vue

<template>
  <el-dialog :close-on-click-modal="false" title="提示" :visible.sync="allianceVisible" width="890px">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="base">
        <BaseInfo :card="baseInfo"></BaseInfo>
      </el-tab-pane>
      <el-tab-pane label="参与商家" name="second">
        <JoinShop :card-id="baseInfo.id"></JoinShop>
      </el-tab-pane>
      <el-tab-pane label="购买用户" name="third">
        <Buyers :card-id="baseInfo.id"></Buyers>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import BaseInfo from './BaseInfo'
import JoinShop from './JoinShop'
import Buyers from './Buyers.vue'

export default {
  components: { BaseInfo, JoinShop, Buyers },
  data() {
    return {
      activeName: 'base',
      allianceVisible: false,
      baseInfo: {}
    }
  },

  watch: {
    allianceVisible(value) {
      if (!value) {
        this.baseInfo = {}
        this.activeName = 'base'
      }
    }
  },

  methods: {
    handleOpen(row) {
      this.allianceVisible = true
      this.baseInfo = row
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions__header {
  margin-bottom: 10px;
}
</style>