h5-colexiu/src/components/col-share/share-item.tsx

import { Cell } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

// import QrCodeVue from 'qrcode.vue'
// import { toPng } from 'html-to-image'

import iconTeacher from '@/common/images/icon_teacher.png'
import { state } from '@/state'
import CodeDownload from './code-down-load'

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

export default defineComponent({
  name: 'share-item',
  props: {
    id: {
      type: String
    },
    teacherId: {
      type: Number
    },
    shareUrl: {
      type: String,
      default: ''
    },
    showType: {
      // 显示背景图
      type: String as PropType<'' | 'yellow' | 'pink' | 'defult'>,
      default: 'default'
    },
    shareType: {
      // 分享类型
      type: String as PropType<
        '' | 'video' | 'music' | 'live' | 'mall' | 'vip' | 'album'
      >,
      default: ''
    }
  },
  data() {
    return {
      heardUrl: null as any
    }
  },
  computed: {
    getString() {
      if (this.shareType === 'music') {
        return '这首曲目挺不错！推荐给你～'
      } else if (this.shareType === 'mall') {
        return '这件商品挺不错！推荐给你～'
      } else if (this.shareType === 'vip') {
        return '小酷Ai智能陪练！推荐给你~'
      } else if (this.shareType === 'album') {
        return '更多曲目扫码下载酷乐秀查看'
      } else {
        return '这个课程挺不错！推荐给你～'
      }
    }
  },
  mounted() {
    this.heardUrl = state.user.data.heardUrl + '?t=' + +new Date()
  },
  render() {
    return (
      <div
        id={this.id}
        class={[
          styles.shareSection,
          styles.shareContainer,
          styles[this.shareType],
          styles[this.showType]
        ]}
      >
        <div class={styles.shareContent}>
          {this.$slots.default && this.$slots.default()}
        </div>

        <Cell
          center
          border={false}
          class={[styles.shareTeacher, 'shareTeacherCustom']}
          v-slots={{
            icon: () => (
              <div class={styles.teacherImg}>
                <img
                  src={state.user.data.heardUrl ? this.heardUrl : iconTeacher}
                  class={styles.img}
                  style={{ objectFit: 'cover' }}
                  crossorigin="anonymous"
                />
                {state.platformType == 'TEACHER' && (
                  <img
                    class={styles.recommend}
                    src={getAssetsHomeFile('recommend.png')}
                  />
                )}
              </div>
            ),
            title: () => (
              <div>
                <p class={styles.name}>{this.getString}</p>
                <p class={styles.titleTips}>
                  <span>{state.user.data.username}</span>
                  {state.platformType == 'TEACHER'
                    ? ' 酷乐秀入驻老师'
                    : ' 为您推荐'}
                </p>
              </div>
            )
          }}
        />

        <CodeDownload shareUrl={this.shareUrl} />
      </div>
    )
  }
})