h5-colexiu/src/views/creation/share-model/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './index.module.less'
import { Grid, GridItem, Icon, Toast } 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 '@common/images/logo.png'
import shareBg from './images/share-bg.png'
import audioPan from '../images/audio-pan.png'
import smallLogo from '@common/images/icon_logo.png'
import musicBg from './images/music-bg.png'
import QRCode from 'qrcode'
import { promisefiyPostMessage } 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,
      url: ''
    })
    const saveImg = async () => {
      Toast.loading({
        message: '图片生成中...',
        forbidClick: true
      })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: state.image
        }
      })
      if (res?.content?.status === 'success') {
        Toast.success('已保存到相册')
      } else {
        Toast.fail('保存失败')
      }
    }

    const onSaveWe = async (type: string) => {
      // Toast.loading({
      //   message: '图片生成中...',
      //   forbidClick: true
      // })
      setTimeout(() => {
        state.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'shareTripartite',
        content: {
          title: '我在酷乐秀发布了演奏作品',
          desc: props.musicDetail.desc,
          // image: state.image,
          video: '',
          type: 'link',
          url: state.url,
          thumb: encodeURI(props.musicDetail.img),
          shareType: type
        }
      })
      if (res?.content?.status) {
        Toast.success('分享成功')
      } else {
        Toast.fail('分享失败')
      }
    }

    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(() => {
            Toast.clear()
            state.saveLoading = false
          })
      }
    }

    const copyText = (text: string) => {
      // 数字没有 .length 不能执行selectText 需要转化成字符串
      const textString = text.toString()
      let input = document.querySelector('#copy-input') as HTMLInputElement
      if (!input) {
        input = document.createElement('input')
        input.id = 'copy-input'
        input.readOnly = true // 防止ios聚焦触发键盘事件
        input.style.position = 'fixed'
        input.style.left = '-1000px'
        input.style.zIndex = '-1000'
        // 为了处理，页面滑动到底部的问题
        document.body.appendChild(input)
        // document.querySelector('#input-copy-container')?.appendChild(input)
      }

      input.value = textString
      // ios必须先选中文字且不支持 input.select();
      selectText(input, 0, textString.length)
      console.log(document.execCommand('copy'), 'execCommand')
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        Toast('复制成功')
      }
      input.blur()

      // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
      // 选择文本。createTextRange(setSelectionRange)是input方法
      function selectText(textbox: any, startIndex: any, stopIndex: any) {
        if (textbox.createTextRange) {
          //ie
          const range = textbox.createTextRange()
          range.collapse(true)
          range.moveStart('character', startIndex) //起始光标
          range.moveEnd('character', stopIndex - startIndex) //结束光标
          range.select() //不兼容苹果
        } else {
          //firefox/chrome
          textbox.setSelectionRange(startIndex, stopIndex)
          textbox.focus()
        }
      }
    }

    onMounted(() => {
      const canvas = canvasRef.value
      state.url =
        location.origin +
        location.pathname +
        '#/shareCreation?id=' +
        props.musicDetail.id
      QRCode.toCanvas(
        canvas,
        state.url,
        {
          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="复制链接"
              onClick={() => copyText(state.url)}
            ></GridItem>
          </Grid>

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