h5-colexiu/src/teacher/piano-room/model/share/index.tsx

import { Cell, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { postMessage } from '@/helpers/native-message'
import QrCodeVue from 'qrcode.vue'
import { toPng } from 'html-to-image'

import iconTeacher from '@/common/images/icon_teacher.png'
import logo from '../../images/logo.png'
import { state } from '@/state'

export default defineComponent({
  name: 'share',
  props: {
    teacherId: {
      type: Number
    }
  },
  data() {
    return {
      qrCode: '',
      image: null as any
    }
  },
  mounted() {
    this.qrCode =
      location.origin + '/student/#/inviteTeacher?id=' + this.teacherId

    this.$nextTick(async () => {
      const container: any = document.getElementById('share-preview-container')
      let image = await toPng(container)
      image = await toPng(container)
      this.image = image
    })
  },
  methods: {
    async shareShow() {
      let image = this.image
      if (image) {
        postMessage(
          {
            api: 'shareAchievements',
            content: {
              title: '我在管乐迷使用AI智能云教练练习乐器',
              desc: '管乐迷AI智能云教练帮助我自主练习乐器，真的太好用啦！每天都要坚持练习哦~',
              image,
              video: '',
              type: 'image'
            }
          },
          (res: any) => {
            if (res && res.content) {
              Toast(
                res.content.message ||
                  (res.content.status ? '分享成功' : '分享失败')
              )
            }
          }
        )
      }
    }
  },
  render() {
    return (
      <>
        <div
          class={styles.continue}
          onClick={() => {
            this.shareShow()
          }}
        >
          分享
        </div>
        <div class={styles.shareSection} id="share-preview-container">
          <div class={styles.section}>
            <Cell
              center
              border={false}
              style={{ padding: 0 }}
              v-slots={{
                icon: () => (
                  <img
                    src={state.user.data.heardUrl || iconTeacher}
                    class={styles.img}
                    crossorigin="anonymous"
                  />
                ),
                title: () => (
                  <div>
                    <p class={styles.name}>{state.user.data.username}</p>
                    <p class={styles.titleTips}>酷乐秀入驻老师</p>
                  </div>
                )
              }}
            />
            <p class={[styles.txt, styles.teacherName]}>
              <span>{state.user.data.username}</span>邀请您加入酷乐秀
            </p>
            <p class={styles.txt}>来与我一起踏入音乐殿堂吧！</p>
          </div>

          <div class={[styles.section, styles.download]}>
            <div class={styles.logo}>
              <img src={logo} />
              <p>扫码下载酷乐秀开启教学之旅</p>
            </div>
            <div class={styles.qrcode}>
              <QrCodeVue
                value={this.qrCode}
                style={{ width: '100%', height: '100%' }}
              />
            </div>
          </div>
        </div>
      </>
    )
  }
})