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智能陪练VIP！推荐给你~'
      } else if (this.shareType === 'album') {
        return '精选曲目专辑！推荐给你～'
      } else {
        return '这个课程挺不错！推荐给你～'
      }
    }
  },
  mounted() {
    // alert(state.user.data.headUrl)
    // this.heardUrl =
    //   state.user.data.headUrl +
    //   '@base@tag=imgscale&m=0&w=100&et=1&eth=100&etw=100&etc=ccc'
    // this.heardUrl = state.user.data.heardUrl + '@base@tag=imgScale&p=25'
    this.heardUrl =
      state.user.data.heardUrl + '@base@tag=imgScale&h=80&w=80&m=1'
    // '@base@tag=imgscale&m=0&w=80&et=1&eth=100&etw=100&etc=cccccc'
    // ?time= +
    // new Date().valueOf()
    // console.log(this.heardUrl, 'heardUrl')
  },
  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}
          v-slots={{
            icon: () => (
              <div class={styles.teacherImg}>
                <img
                  src={state.user.data.heardUrl ? this.heardUrl : iconTeacher}
                  class={styles.img}
                  style={{ objectFit: 'cover' }}
                  crossorigin="anonymous"
                />
                <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>
    )
  }
})