orchestra-app/src/views/creation/share-model/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import {
  Button,
  Grid,
  GridItem,
  Icon,
  Image,
  closeToast,
  showFailToast,
  showLoadingToast,
  showSuccessToast,
  showToast
} from 'vant'
import iconDownload from './images/icon-download.png'
import iconFirend from './images/icon-friend.png'
import iconWeChat from './images/icon-wechat.png'
import iconFriendRing from './images/icon-friend-ring.png'
// import iconLink from './images/icon-link.png';
import iconLogo from './images/icon-logo.png'
import shareBg from './images/share-bg.png'
import audioPan from '../images/audio-pan.png'
import smallLogo from '@common/images/logo.png'
import musicBg from './images/music-bg.png'
import QRCode from 'qrcode'
import { promisefiyPostMessage, postMessage } from '@/helpers/native-message'
import html2canvas from 'html2canvas'

export default defineComponent({
  name: 'sahre-model',
  props: {
    musicDetail: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const canvasRef = ref()
    const state = reactive({
      saveLoading: false,
      image: null as any
    })
    const saveImg = async () => {
      showLoadingToast({
        message: '图片生成中...',
        forbidClick: true
      })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: state.image
        }
      })
      if (res?.content?.status === 'success') {
        showSuccessToast('已保存到相册')
      } else {
        showFailToast('保存失败')
      }
    }

    const onSaveWe = async (type: string) => {
      showLoadingToast({
        message: '图片生成中...',
        forbidClick: true
      })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'shareTripartite',
        content: {
          title: '',
          desc: '',
          image: state.image,
          video: '',
          type: 'image',
          shareType: type
        }
      })
      if (res?.content?.status) {
        showSuccessToast('分享成功')
      } else {
        showFailToast('分享失败')
      }
    }

    const onSavePath = (type: string) => {
      // 判断是否在保存中...
      if (state.saveLoading) {
        return
      }
      state.saveLoading = true
      // 判断是否已经生成图片
      if (state.image) {
        if (type) {
          onSaveWe(type)
        } else {
          saveImg()
        }
      } else {
        const container: any = document.getElementById('shareContent')
        html2canvas(container, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: null
        })
          .then(async (canvas) => {
            const url = canvas.toDataURL('image/png')
            state.image = url
            if (type) {
              onSaveWe(type)
            } else {
              saveImg()
            }
          })
          .catch(() => {
            closeToast()
            state.saveLoading = false
          })
      }
    }

    onMounted(() => {
      const canvas = canvasRef.value
      QRCode.toCanvas(
        canvas,
        location.origin + location.pathname + '#/shareCreation?id=' + props.musicDetail.id,
        {
          margin: 1
        },
        (error: any) => {
          if (error) console.log(error)
          console.log('success')
        }
      )
    })

    return () => (
      <div class={styles.shareModel}>
        <div class={styles.shareContent} id="shareContent">
          <img src={shareBg} class={styles.shareBg} />
          <div class={styles.share_content__title}>
            <p class={styles.large}>我在管乐团发布了演奏作品</p>
            <p class={styles.small}>赶快扫码看看吧！</p>
          </div>

          <div class={[styles.share_music__container, styles.sectionFile]}>
            <div class={styles.uploadImg}>
              <img src={audioPan} class={styles.audioPan} crossorigin="anonymous" />
              <img
                src={
                  props.musicDetail.img
                    ? props.musicDetail.img + '?t' + new Date().getTime()
                    : musicBg
                }
                class={styles.muploader}
                crossorigin="anonymous"
              />
            </div>
            <div class={styles.musicDetail}>
              <p class={[styles.musicName, 'van-ellipsis']}>{props.musicDetail.musicSheetName}</p>
              <p class={styles.username}>演奏者：{props.musicDetail.username}</p>
            </div>
          </div>

          <div class={styles.downloadSection}>
            <div class={styles.qrcode}>
              <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
              <img src={smallLogo} class={styles.qrcodeLogo} />
            </div>
            <div class={styles.qrtips}>
              <p class={styles.tip}>温馨提示：保存图片到相册或长按识别二维码进入查看喔～</p>
              <img src={iconLogo} class={styles.iconLogo} />
              {/* <p class={styles.downTip}>扫码下载音乐数字课堂App</p> */}
            </div>
          </div>
        </div>

        <div class={styles.shareBottom}>
          <Icon name="cross" class={styles.iconClose} onClick={() => emit('close')} />
          <div class={styles.share__header}>海报已生成！快来分享吧！</div>
          <Grid columnNum={5} border={false} class={styles.gridSection}>
            <GridItem icon={iconDownload} text="保存本地" onClick={() => onSavePath('')}></GridItem>
            {/* <GridItem icon={iconFirend} text="群聊"></GridItem> */}
            <GridItem
              icon={iconWeChat}
              text="微信好友"
              onClick={() => onSavePath('wechat')}
            ></GridItem>
            <GridItem
              icon={iconFriendRing}
              text="朋友圈"
              onClick={() => onSavePath('wechat_circle')}
            ></GridItem>
            {/* <GridItem icon={iconLink} text="复制链接"></GridItem> */}
          </Grid>

          <div class={[styles.btn, 'van-hairline--top']} onClick={() => emit('close')}>
            取消
          </div>
        </div>
      </div>
    )
  }
})