orchestra-app/src/components/o-empty/index.tsx

import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import empty from '@common/images/icon_nodata.png'
import { Button, Empty, Image } from 'vant'
import { postMessage } from '@/helpers/native-message'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'o-empty',
  props: {
    tips: {
      type: String
    },
    type: {
      // 空 | 达人认证 | 音乐人认证 | 直播认证
      type: String as PropType<
        'empty' | 'error' | 'network' | 'search' | 'emptyContent' | 'notFond'
      >,
      default: 'empty'
    },
    classImgSize: {
      type: String as PropType<'CERT' | 'SMALL'>,
      default: ''
    },
    imageSize: {
      type: Number,
      default: 0
    },
    plain: {
      type: Boolean,
      default: false
    },
    btnStatus: {
      type: Boolean,
      default: false
    },
    buttonText: {
      type: String,
      default: '我知道了'
    },
    onClick: Function
  },
  methods: {
    onResult() {
      if (this.onClick) {
        this.onClick()
      } else {
        postMessage({ api: 'back', content: {} })
      }
    }
  },
  computed: {
    image() {
      let image = null as any
      switch (this.type) {
        case 'emptyContent':
          image = getAssetsHomeFile('emptyContent.png')
          break
        case 'error':
          image = 'error'
          break
        case 'network':
          image = getAssetsHomeFile('network.png')
          break
        case 'search':
          image = 'search'
          break
        case 'notFond':
          image = getAssetsHomeFile('notFond.png')
          break
        default:
          image = getAssetsHomeFile('empty.png')
          break
      }
      return image
    }
  },
  render() {
    return (
      <div class={[styles['col-result'], 'col-result-container']}>
        <Empty
          image={this.image}
          imageSize={this.imageSize || ''}
          class={styles[this.classImgSize]}
          description={this.tips}
        />

        {this.btnStatus ? (
          <Button
            class={styles.btn}
            round
            block
            type="primary"
            plain={this.plain}
            onClick={this.onResult}
          >
            {this.buttonText}
          </Button>
        ) : null}
      </div>
    )
  }
})