classroom-app/src/views/intention-questionnaire/show.tsx

import { defineComponent, onMounted, onUnmounted, reactive, ref, nextTick } from 'vue';
import styles from './index.module.less';
import { useRoute, useRouter } from 'vue-router';
import { useInterval, useIntervalFn } from '@vueuse/core';
import 'tcplayer.js/dist/tcplayer.css';
import { _initVideo } from './initVideo'

export default defineComponent({
  name: 'intention-questionnaire-show',
  setup() {
    // 页面定时
    const pageTimer = useInterval(1000, { controls: true });
    pageTimer.pause();
    const router = useRouter();
    const route = useRoute();
    const forms = reactive({
      loading: true,
      code: null,
      openId: '' as any,
      isPageHide: false,
      contentA: '<p style="text-align: left; font-size:13px;"><strong style="font-size:15px;">尊敬的家长： 您好！</strong></p><p style="text-align: left;">为贯彻落实教育部《关于全面实施学校美育浸润行动的通知》《教育部等九部门关于加快推进教育数字化的意见》的文件精神。顺应艺术素质测评结果纳入中考的教育改革趋势，我校计划在音乐课上开展“课堂乐器Ai教学”，请您仔细阅读以下内容，有意向加入的学生，点击下一步进行意向报名，以便安排后续事宜。</p>', // 第一段
      contentB: '<p style="text-align: left;"><strong style="font-size:15px; color: #0B8BFE;">二、开展形式</strong></p><p style="text-align: left;">以学生自愿参加为原则。如参加，学习需要的乐器由基金会免费捐赠；练习需要的学生端Ai软件，由学生自行准备。</p>', // 第二段
      contentC: '<p style="text-align: left;"><strong style="font-size:15px; color: #0B8BFE;">三、如何使用学生端练习</strong></p><p style="text-align: left;">学生端可用于联通音乐课堂，实现师生双向数据传输，学生根据Ai指引进行乐器练习和测评。市场上均有提供，由个人自行准备，无品牌要求，一次性的投入预算为300多元，以供参考。</p>',
      contentD: '<p style="text-align: left;"><strong style="font-size:15px; color: #0B8BFE;">五、事项说明</strong></p><p style="text-align: left;">1.学校不涉及任何费用收取。学生所需的自用工具在市面上均可购买到，家长可自行根据实际情况为学生准备。</p><p style="text-align: left;">2.如学生有参加数字化转型的意愿，但存在特殊或特困情况，可先向学校进行登记，学校将尽力寻求资源协助家长解决。</p><p style="text-align: left;">如有意参加，请点击下一步进行互通互联登记：</p>',
      introductionVideo: "https://oss.dayaedu.com/ktyq/03/1742283035204.mp4",
      introductionVideoTime: 117,
      coverImg: "https://oss.dayaedu.com/ktyq/02/1739362815061.png",
      introductionVideo2: "https://oss.dayaedu.com/ktyq/02/1739345326291.mp4",
      introductionVideoTime2: 111,
      coverImg2: "https://oss.dayaedu.com/ktyq/02/1739324215341.png",
      player1: null as any,
      player2: null as any,
      player1Speed: 1,
      player2Speed: 1,
      videoLoading1: true,
      videoLoading2: true,
      meetingType: 'primarySchoolNo' as 'primarySchoolNo' | 'primarySchoolYes' | 'juniorSchoolNo' | 'juniorSchool' | any,
      intentionInfo: null as any,
      contentShow: false,
    });

    const showPopup = ref(false);
    const showPopupMessage = ref('');

    // 播放视频总时长
    const videoIntervalRef = useInterval(1000, { controls: true });
    videoIntervalRef.pause();

    const videoIntervalRef2 = useInterval(1000, { controls: true });
    videoIntervalRef2.pause();

    const getMessage = (ev: any) => {
      if (ev.data.api === 'parent-agenda') {
        forms.contentShow = true
        // console.log('消息',ev.data)
        forms.contentA = ev.data.message.contentA || forms.contentA
        forms.contentB = ev.data.message.contentB || forms.contentB
        forms.contentC = ev.data.message.contentC || forms.contentC
        forms.contentD = ev.data.message.contentD || forms.contentD
        console.log('消息',forms.contentD)
      }
    }

    onMounted(async () => {
      forms.meetingType = route.query.type || forms.meetingType;
      nextTick(() => {
        // 是否加载完成
        window.parent &&
        window.parent.postMessage(
          {
            api: 'onLoad',
            status: true
          },
          '*'
        )
        // const videoRef: any = document.querySelector('#register-video')
        // const videoRef2: any = document.querySelector('#register-video2')
        // if(videoRef) {
        //   const rect = videoRef?.getBoundingClientRect()
        //   console.log(rect)
        //   videoRef.style.height = rect.width / 16 * 9 + 'px'
        // }
        // if(videoRef2) {
        //   const rect = videoRef2?.getBoundingClientRect()
        //   console.log(rect)
        //   videoRef2.style.height = rect.width / 16 * 9 + 'px'
        // }
      })
      _initVideo('one', forms, videoIntervalRef)
      _initVideo('two', forms, videoIntervalRef2)
      window.addEventListener('message', getMessage)
    });

    // const nextSkip = () => {
    //   router.push({
    //     path: '/fill-questionnaire',
    //     query: {
    //       openId: forms.openId, //
    //       meetingType: forms.meetingType
    //     }
    //   });
    // };
    const onPageShow = () => {
      console.log(forms.isPageHide, 'showInfo');
      if (forms.isPageHide) {
        window.location.reload();
      }
    };
    // 处理监听页面返回不刷新的问题
    window.addEventListener('pageshow', onPageShow);

    const onPageHide = () => {
      console.log(forms.isPageHide, 'showInfo');
      forms.isPageHide = true;
    };
    window.addEventListener('pagehide', onPageHide);

    onUnmounted(() => {
      window.removeEventListener('pageshow', onPageShow);
      window.removeEventListener('pagehide', onPageHide);
      window.removeEventListener('message', getMessage)
    });
    return () => (
      <div class={styles['intention-page']}>
        <div class={[styles['content-box'], !forms.contentShow && styles.hideContent]}>
          <div class={styles.contentBody} v-html={forms.contentA}></div>
          <div class={styles.contentBody}>
            <div class={styles.cbTitle}>一、数字化音乐课堂介绍</div>
            <div class={styles.videoBoxCon}>
              <div class={styles.videoBox}>
                <div class={[styles['video-content']]}>
                  <video
                    id="register-video"
                    class={styles['video']}
                    src={forms.introductionVideo}
                    playsinline={true}
                    poster={forms.coverImg}
                    preload="auto"></video>
                </div>
              </div>
            </div>
          </div>
          <div class={styles.contentBody} v-html={forms.contentB}></div>
          <div class={styles.contentBody}>
            <div v-html={forms.contentC}></div>
            <div class={styles.videoBoxCon}>
              <div class={styles.videoBox}>
                <div class={[styles['video-content']]}>
                  <video
                    id="register-video2"
                    class={styles['video']}
                    src={forms.introductionVideo2}
                    playsinline={true}
                    poster={forms.coverImg2}
                    preload="auto"></video>
                </div>
              </div>
            </div>            
          </div>
          {/* <div class={styles.contentBody} v-html={forms.contentD}></div>
          <div class={styles.contentBody}>
            <div class={styles.cbTitle}>五、什么是器乐数字 Ai<span>（详见视频介绍）</span></div>
            <div class={styles.videoBoxCon}>
              <div class={styles.videoBox}>
                <div class={[styles['video-content']]}>
                  <video
                    id="register-video2"
                    class={styles['video']}
                    src={forms.introductionVideo2}
                    playsinline={true}
                    poster={forms.coverImg2}
                    preload="auto"></video>
                </div>
              </div>
            </div>
          </div>           */}
        </div>

        {/* 是否在微信中打开 */}
        {/* <OWxTip /> */}


        {/* <div class={styles.bottomBtn}>
          <p><i>如有意参加，请点击下一步进行意见</i></p>
          <img class={styles.nextBtn} src={nextBtn} onClick={nextSkip} />
        </div> */}
      </div>
    );
  }
});