orchestra-app/src/school/train-report/week-report.tsx

import OHeader from '@/components/o-header'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './report.module.less'
import iconOrchestra from '@/views/mine-orchestra/images/icon-or.png'
import {
  closeToast,
  Grid,
  GridItem,
  Icon,
  Image,
  Popup,
  showFailToast,
  showLoadingToast,
  showSuccessToast,
  showToast
} from 'vant'
import trainWeek from './images/week/icon-train-week.png'
import OrchestraNum from './modal/orchestra-num'
import TrainClass from './modal/train-class'
import StudentAttendance from './modal/student-attendance'
import TeacherAttendance from './modal/teacher-attendance'
import TrainProgress from './modal/train-progress'
import iconPhoto from './images/icon-photo.png'
import iconClass from './images/icon-class.png'
import iconSaveImage from '@/school/orchestra/images/icon-save-image.png'
import iconWechat from '@/school/orchestra/images/icon-wechat.png'
import iconWeekPoint from './images/week/icon-point.png'
import popupWeekBanner from './images/week/popup-week-banner.png'
import popupQrcodeBg from './images/popup-qrcode-bg.png'
import OQrcode from '@/components/o-qrcode'
import { useRoute, useRouter } from 'vue-router'
import request from '@/helpers/request'
import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
import html2canvas from 'html2canvas'
import dayjs from 'dayjs'
import iconArrow from './images/icon-arrow.png'

export const reportCourseType = {
  PERCUSSION: '打击乐',
  FLUTE: '长笛',
  SAX: '萨克斯',
  CLARINET: '单簧管',
  TRUMPET: '小号',
  TROMBONE: '长号',
  HORN: '圆号',
  BARITONE_TUBA: '上低音号-大号',
  EUPHONIUM: '上低音号',
  TUBA: '大号',
  MUSIC_THEORY: '乐理',
  INSTRUMENTAL_ENSEMBLE: '合奏'
}

export default defineComponent({
  name: 'train-report',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const forms = reactive({
      id: route.query.id,
      showQrcode: false,
      share: route.query.share as any,
      url: window.location.href + '&share=1'
    })
    const reportData = reactive({
      orchestraName: null,
      startTime: null,
      endTime: null,
      COURSEWARE: {},
      coursewareList: [] as any,
      COURSE_SCHEDULE: {},
      KNOWLEDGE: {},
      ORCHESTRA: {},
      PHOTO: {} as any,
      STUDENT_ATTENDANCE: {},
      TEACHER_ATTENDANCE: {}
    })

    const getDetail = async () => {
      try {
        const { data } = await request.get('/api-school/open/orchestraReport/detail/' + forms.id)
        reportData.COURSEWARE = data.reportItem.COURSEWARE || {}
        reportData.COURSE_SCHEDULE = data.reportItem.COURSE_SCHEDULE || {}
        reportData.KNOWLEDGE = data.reportItem.KNOWLEDGE || {}
        reportData.ORCHESTRA = data.reportItem.ORCHESTRA || {}
        reportData.PHOTO = data.reportItem.PHOTO || {}
        reportData.STUDENT_ATTENDANCE = data.reportItem.STUDENT_ATTENDANCE || {}
        reportData.TEACHER_ATTENDANCE = data.reportItem.TEACHER_ATTENDANCE || {}
        reportData.orchestraName = data.orchestraName || ''
        reportData.startTime = data.startTime || ''
        reportData.endTime = data.endTime || ''

        const courseware = reportData.COURSEWARE
        for (const i in courseware) {
          i != 'TOTAL' && reportData.coursewareList.push(reportCourseType[i])
        }
      } catch {
        //
      }
    }

    const imgs = reactive({
      saveLoading: false,
      image: null as any,
      shareLoading: false
    })
    const onSaveImg = async () => {
      // 判断是否在保存中...
      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(() => {
            closeToast()
            imgs.saveLoading = false
          })
      }
    }
    const onShare = () => {
      if (imgs.shareLoading) {
        return
      }
      imgs.shareLoading = true
      if (imgs.image) {
        openShare()
      } 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
            openShare()
          })
          .catch(() => {
            closeToast()
            imgs.shareLoading = false
          })
      }
    }
    const openShare = () => {
      const image = imgs.image
      setTimeout(() => {
        imgs.shareLoading = false
      }, 100)
      if (image) {
        postMessage(
          {
            api: 'shareTripartite',
            content: {
              title: '',
              desc: '',
              image,
              video: '',
              type: 'image',
              // button: ['copy']
              shareType: 'wechat'
            }
          },
          (res: any) => {
            if (res && res.content) {
              showToast(res.content.message || (res.content.status ? '分享成功' : '分享失败'))
            }
          }
        )
      }
    }
    const saveImg = async () => {
      showLoadingToast({ message: '图片生成中...', forbidClick: true })
      setTimeout(() => {
        imgs.saveLoading = false
      }, 100)
      const res = await promisefiyPostMessage({
        api: 'savePicture',
        content: {
          base64: imgs.image
        }
      })
      if (res?.content?.status === 'success') {
        showSuccessToast('保存成功')
      } else {
        showFailToast('保存失败')
      }
    }

    onMounted(() => {
      getDetail()
    })

    return () => (
      <div class={[styles.trainWeek, forms.share == 1 ? styles.trasinWeekShare : '']}>
        <div class={styles.trainContainer}></div>
        <OHeader
          background="transparent"
          border={false}
          title=" "
          color="white"
          isBack={forms.share != 1 ? true : false}
        >
          {{
            right: () =>
              forms.share != 1 && (
                <i class={styles.iconShare} onClick={() => (forms.showQrcode = true)}></i>
              )
          }}
        </OHeader>
        <div class={styles.headerContant}>
          <div class={styles.orchestra}>
            <Image src={iconOrchestra} class={styles.iconOrchestra} />
            <span>{reportData.orchestraName}</span>
          </div>
          <div>
            <Image src={trainWeek} class={styles.iconTrainWeek} />
          </div>
          <div class={styles.trainTimer}>
            {dayjs(reportData.startTime).format('YYYY/MM/DD')}-
            {dayjs(reportData.endTime).format('YYYY/MM/DD')}
          </div>
        </div>

        <OrchestraNum reportData={reportData.ORCHESTRA} />
        <TrainClass reportData={reportData.COURSE_SCHEDULE} />

        <div class={styles.trainPhoto}>
          <Image src={iconPhoto} class={styles.iconPhoto} />
          <p
            onClick={() => {
              if (forms.share == 1) return
              router.push({
                path: '/school-photo'
              })
            }}
            style={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            本周上传<span>{reportData.PHOTO.TOTAL || 0}</span>张训练照片
            {forms.share != 1 && <Icon name={iconArrow} size="10" style={{ marginLeft: '10px' }} />}
          </p>
        </div>

        <StudentAttendance reportData={reportData.STUDENT_ATTENDANCE} />
        <TeacherAttendance reportData={reportData.TEACHER_ATTENDANCE} />

        <div class={[styles.trainClass]}>
          <Image src={iconClass} class={styles.iconPhoto} />
          <div>
            <p class={styles.subjectTips}>课件使用未达标班级</p>
            <p class={styles.subjectNames}>
              {reportData.coursewareList.map((item: string) => item + ' ')}
            </p>
          </div>
        </div>
        <TrainProgress reportData={reportData.KNOWLEDGE} />

        <Popup
          v-model:show={forms.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}
        >
          <div class={styles.codeContainer}>
            <div class={styles.codeImg} id="preview-container">
              <Image src={popupWeekBanner} class={styles.popupWeekBanner} />
              <div class={styles.codeContent}>
                <div class={[styles.headerContant, styles.headerContantPopup]}>
                  <div class={styles.orchestra}>
                    <Image src={iconOrchestra} class={styles.iconOrchestra} />
                    <span>{reportData.orchestraName}</span>
                  </div>
                  <div>
                    <Image src={trainWeek} class={styles.iconTrainWeek} />
                  </div>
                  <div class={styles.trainTimer}>
                    <Image class={styles.point} src={iconWeekPoint} />
                    {reportData.startTime}-{reportData.endTime}
                    <Image class={styles.point} src={iconWeekPoint} />
                    {/* {reportData.startTime}-{reportData.endTime} */}
                  </div>
                </div>

                <div class={styles.codeQr}>
                  <Image src={popupQrcodeBg} class={styles.popupQrcodeBg} />
                  <OQrcode text={forms.url} size={'100%'} logoSize="small" />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <span class={styles.codeBtnText}>
                    扫描上方二维码<span>查看训练周报</span>
                  </span>
                </div>
              </div>
            </div>
            <div class={styles.codeBottom}>
              <Icon
                name="cross"
                size={22}
                class={styles.close}
                color="#666"
                onClick={() => (forms.showQrcode = false)}
              />

              <h3 class={styles.title}>
                <i></i>分享方式
              </h3>
              <Grid columnNum={2} border={false}>
                <GridItem onClick={onSaveImg}>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconSaveImage} />,
                    text: () => <div class={styles.shareText}>保存图片</div>
                  }}
                </GridItem>
                <GridItem onClick={onShare}>
                  {{
                    icon: () => <Image class={styles.shareImg} src={iconWechat} />,
                    text: () => <div class={styles.shareText}>微信</div>
                  }}
                </GridItem>
              </Grid>
            </div>
          </div>
        </Popup>
      </div>
    )
  }
})