classroom-instruments/src/views/studentList/modals/addStudentModel.tsx

import {
  NButton,
  NSpace,
  useMessage,
  NForm,
  NFormItem,
  NSelect,
  NImage
} from 'naive-ui';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '../index.module.less';
import CSelect from '/src/components/CSelect';
import stunentStart from '../images/studentStart.png';
import studentCLose from '../images/studentClose.png';
import { useUserStore } from '@/store/modules/users';
import TheQrCode from '/src/components/TheQrCode';
import { vaildUrl } from '@/utils/urlUtils';
import logo from '@/common/images/logo.png';
import studentTitle from '../images/studentTitle.png';
import studentInfo from '../images/strudentCore.png';
import btnBg from '../images/btnBg.png';
import html2canvas from 'html2canvas';
import codewrap from '../images/cordWrap.png'
export default defineComponent({
  props: {
    activeRow: {
      type: Object,
      default: () => ({ id: '' })
    },
    gradeNumList: {
      type: Array,
      default: () => []
    },
    classArray: {
      type: Array,
      default: () => []
    }
  },
  name: 'resetStudent',
  emits: ['close', 'getList'],
  setup(props, { emit }) {
    const data = reactive({
      uploading: false
    });
    const message = useMessage();
    const userStore = useUserStore();
    const foemsRef = ref();
    const url = ref(
      vaildUrl() +
      `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
    );
    const imgs = reactive({
      saveLoading: false,
      image: null as any,
      shareLoading: false
    });
    const downImg = () => {
      if (imgs.saveLoading) {
        return;
      }
      imgs.saveLoading = true;
      // 判断是否已经生成图片
      if (imgs.image) {
        saveImg();
      } else {
        const container: any = document.getElementById(`preview-container`);
        html2canvas(container, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: null
        })
          .then(async canvas => {
            const url = canvas.toDataURL('image/png');
            imgs.image = url;
            saveImg();
          })
          .catch(() => {
            imgs.saveLoading = false;
          });
      }
    };

    const saveImg = async () => {
      // showLoadingToast({ message: '图片生成中...', forbidClick: true });
      setTimeout(() => {
        imgs.saveLoading = false;
      }, 100);
      const link = document.createElement('a');
      link.setAttribute('download', '报名图片' + '.png');
      // 添加时间戳，防止浏览器缓存图片
      // console.log(imgUrl,'imgUrl')

      link.href = imgs.image;
      link.click();
      // const res = await promisefiyPostMessage({
      //   api: 'savePicture',
      //   content: {
      //     base64: imgs.image
      //   }
      // });
      // if (res?.content?.status === 'success') {
      //   showSuccessToast('保存成功');
      // } else {
      //   showFailToast('保存失败');
      // }
    };
    return () => (
      <div class={[styles.addStudentWrap]}>
        <div
          onClick={() => {
            console.log('点击');
            emit('close');
          }}>
          <NImage
            src={studentCLose}
            previewDisabled
            class={styles.studentCLose}></NImage>
        </div>
        <NImage
          previewDisabled
          class={styles.stunentStart}
          src={stunentStart}></NImage>
        <NImage
          class={styles.addTitle}
          previewDisabled
          src={studentTitle}></NImage>
        <div class={styles.addStudentInfo} id="preview-container">

          <NImage
            class={styles.studentInfoBg}
            previewDisabled
            src={studentInfo}></NImage>

          <div class={styles.studentCore}>
            <img
              alt="img"
              crossorigin="anonymous"
              class={styles.schoolLogo}
              src={
                userStore.getUserInfo.schoolInfos[0].logo +
                `?some=${new Date().getTime()}`
              }></img>
            <div class={styles.studentCoreInfo}>
              <h2>{userStore.getUserInfo.schoolInfos[0].name}</h2>
              <p class={styles.studentCoreInfoSubtitle}>
                邀请您的孩子加入
                <span>数字化乐器课堂</span>
              </p>
              <div class={styles.codewrap}>
                <img src={codewrap} class={styles.codewrapBg} alt="" />
                <TheQrCode margin={0} class={styles.codewrapImg} text={url.value} size={119} />
              </div>
              <div class={styles.codewrapSubmit}>
                <NImage previewDisabled src={btnBg}></NImage>
                请使用微信扫码<span>完成报名</span>{' '}
              </div>
            </div>
          </div>
        </div>
        <div class={styles.studentBottom}>
          <p>请将二维码图片发送给学生家长，扫码完成报名</p>
          <div class={styles.downBtn} onClick={downImg}>
            下载图片
          </div>
        </div>
      </div>
    );
  }
});