classroom-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 audioLabel from './images/audioLabel.png';
import videoLabel from './images/videoLabel.png';
import videoShareBg from './images/video-share-bg.png';
import audioShareBg from './images/audio-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: () => {}
    },
    playType:{
      type: String,
      default: ''
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const canvasRef = ref();
    const state = reactive({
      saveLoading: false,
      image: null as any,
      url: ''
    });
    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) => {
      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(decodeURI(props.musicDetail.img)),
          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;
          });
      }
    };

    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');
        showToast('复制成功');
      }
      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={props.playType === "Audio" ? audioShareBg : videoShareBg} 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"
              />
              <img class={styles.imgLabel} src={props.playType === "Audio" ? audioLabel : videoLabel} />
            </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}>
              <div>温馨提示：</div>
              <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={4} 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>
    );
  }
});