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 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>
    );
  }
});