smsb-web-develop/src/views/device/detail/components/external/ContentProtection.vue

<script>
import { getContentProtection } from '@/api/external'

export default {
  name: 'ContentProtection',
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      loading: true,
      error: false,
      open: false
    }
  },
  created () {
    this.getContentProtection()
  },
  methods: {
    getContentProtection () {
      this.loading = true
      this.error = false
      getContentProtection(this.device.id, { custom: true }).then(
        ({ data }) => {
          this.open = data ? data.protect : false
        },
        () => {
          this.error = true
        }
      ).finally(() => {
        this.loading = false
      })
    }
  },
  render (h) {
    if (this.loading) {
      return h('i', {
        class: 'el-icon-loading u-font-size'
      })
    }
    if (this.error) {
      return h('el-link', {
        props: {
          type: 'warning'
        },
        on: {
          click: this.getContentProtection
        }
      }, ['获取失败，点击重试'])
    }
    return h('div', null, this.open ? '已启用' : '未启用')
  }
}
</script>