h5-colexiu/src/components/col-result/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: 'col-result',
  props: {
    tips: {
      type: String
    },
    type: {
      // 空 | 老师认证 | 音乐人认证 | 直播认证
      type: String as PropType<
        | 'empty'
        | 'teacherCert'
        | 'musicCert'
        | 'liveCert'
        | 'error'
        | 'network'
        | 'search'
        | 'emptyContent'
      >,
      default: 'empty'
    },
    classImgSize: {
      type: String as PropType<'CERT' | 'SMALL'>,
      default: ''
    },
    btnStatus: {
      type: Boolean,
      default: true
    },
    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 'teacherCert':
          image = getAssetsHomeFile('teacherCert.png')
          break
        case 'musicCert':
          image = getAssetsHomeFile('musicCert.png')
          break
        case 'liveCert':
          image = getAssetsHomeFile('liveCert.png')
          break
        case 'emptyContent':
          image = getAssetsHomeFile('emptyContent.png')
          break
        case 'error':
          image = 'error'
          break
        case 'network':
          image = getAssetsHomeFile('network.png')
          break
        case 'search':
          image = 'search'
          break
        default:
          image = getAssetsHomeFile('empty.png')
          break
      }
      return image
    }
  },
  render() {
    return (
      <div class={styles['col-result']}>
        <Empty
          image={this.image}
          class={styles[this.classImgSize]}
          description={this.tips}
        />

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