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

import { defineComponent, onMounted, onUnmounted, reactive, ref, nextTick } from 'vue';
import styles from './index.module.less';
// import signinTips from './images/signin-tips.png';
import {
  Button,
  CellGroup,
  Field,
  Picker,
  Popup,
  closeToast,
  showToast,
  Loading
} from 'vant';
import { useRoute, useRouter } from 'vue-router';
import threeMan from './images/update/three-man.png'
import OWxTip from '@/components/m-wx-tip';
import { browser, getHttpOrigin, getUrlCode } from '@/helpers/utils';
import qs from 'query-string';
import request from '@/helpers/request';
import { goWechatAuth } from '@/state';
import { useInterval, useIntervalFn } from '@vueuse/core';
import MMessageTip from '@/components/m-message-tip';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.css';
import { _initVideo } from './initVideo'
import nextBtn from './images/next_btn.png'

export default defineComponent({
  name: 'intention-questionnaire',
  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><span style=\"color: rgb(0, 0, 0);\">一、请所有家长进行</span><span style=\"color: rgb(207, 19, 34);\">签到</span></p><p><span style=\"color: rgb(0, 0, 0);\">二、</span><span style=\"color: rgb(207, 19, 34);\">观看</span><span style=\"color: rgb(0, 0, 0);\">管乐团家长会议</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 1、学校领导讲话（5分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 2、基金会老师介绍乐团事项（20分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团组建背景及政策</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团发展规划与乐器知识讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *学校/基金会/家长各方职责与投入</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *入团流程讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\">三、请</span><span style=\"color: rgb(207, 19, 34);\">“有意向”</span><span style=\"color: rgb(0, 0, 0);\">让孩子加入乐团的家长点击</span><span style=\"color: rgb(207, 19, 34);\">“乐团报名”</span><span style=\"color: rgb(0, 0, 0);\">完成信息填报</span></p>", // 第一段
      contentB: "<p><span style=\"color: rgb(0, 0, 0);\">一、请所有家长进行</span><span style=\"color: rgb(207, 19, 34);\">签到</span></p><p><span style=\"color: rgb(0, 0, 0);\">二、</span><span style=\"color: rgb(207, 19, 34);\">观看</span><span style=\"color: rgb(0, 0, 0);\">管乐团家长会议</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 1、学校领导讲话（5分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 2、基金会老师介绍乐团事项（20分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团组建背景及政策</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团发展规划与乐器知识讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *学校/基金会/家长各方职责与投入</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *入团流程讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\">三、请</span><span style=\"color: rgb(207, 19, 34);\">“有意向”</span><span style=\"color: rgb(0, 0, 0);\">让孩子加入乐团的家长点击</span><span style=\"color: rgb(207, 19, 34);\">“乐团报名”</span><span style=\"color: rgb(0, 0, 0);\">完成信息填报</span></p>", // 第二段
      contentC: "<p><span style=\"color: rgb(0, 0, 0);\">一、请所有家长进行</span><span style=\"color: rgb(207, 19, 34);\">签到</span></p><p><span style=\"color: rgb(0, 0, 0);\">二、</span><span style=\"color: rgb(207, 19, 34);\">观看</span><span style=\"color: rgb(0, 0, 0);\">管乐团家长会议</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 1、学校领导讲话（5分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> 2、基金会老师介绍乐团事项（20分钟）</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团组建背景及政策</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *乐团发展规划与乐器知识讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *学校/基金会/家长各方职责与投入</span></p><p><span style=\"color: rgb(0, 0, 0);\"> *入团流程讲解</span></p><p><span style=\"color: rgb(0, 0, 0);\">三、请</span><span style=\"color: rgb(207, 19, 34);\">“有意向”</span><span style=\"color: rgb(0, 0, 0);\">让孩子加入乐团的家长点击</span><span style=\"color: rgb(207, 19, 34);\">“乐团报名”</span><span style=\"color: rgb(0, 0, 0);\">完成信息填报</span></p>", // 第三段
      contentD: "",
      introductionVideo: "https://oss.dayaedu.com/ktyq/02/1739324017357.mp4",
      introductionVideoTime: 117,
      coverImg: "https://oss.dayaedu.com/ktyq/02/1739324197269.png",
      introductionVideo2: "https://oss.dayaedu.com/ktyq/02/1739324017357.mp4",
      introductionVideoTime2: 117,
      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,
    });

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

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

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

    onMounted(async () => {
      forms.meetingType = route.query.type || forms.meetingType;
      nextTick(() => {
        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'
        }
      })
      try {
        // 判断是否获取微信code码
        // if (!forms.code) return;
        const { data } = await request.get(
          '/edu-app/open/meetingQuestionSetting/detail?type=' + forms.meetingType + '&weChatCode=' + forms.code
        );
        if (data) {
          forms.contentA = data.contentA || forms.contentA
          forms.contentB = data.contentB || forms.contentB
          forms.contentC = data.contentC || forms.contentC
          forms.contentD = data.contentD || forms.contentD
          forms.openId = data.openId
          sessionStorage.setItem('active-open-id', data.openId);
        }
        
      } catch {
        //
      }
      _initVideo('one', forms, videoIntervalRef)
      _initVideo('two', forms, videoIntervalRef2)
    });

    const getAppIdAndCode = async (url?: string) => {
      try {
        const { data } = await request.get(
          '/edu-app/open/paramConfig/wechatAppId'
        );
        // 判断是否有微信appId
        if (data) {
          closeToast();
          goWechatAuth(data, url);
        }
      } catch(e) {
        //
        console.log(e)
      }
    };

    if (browser().weixin) {
      //授权
      const openId = sessionStorage.getItem('active-open-id');
      forms.openId = openId;
      const code = getUrlCode();
      console.log(code, 'code')
      if (!code) {
        const newUrl =
          getHttpOrigin() +
          window.location.pathname +
          '#' +
          route.path +
          '?' +
          qs.stringify({
            ...route.query
          });
        getAppIdAndCode(newUrl);
        return '';
      } else {
        forms.code = code;
      }
    }
    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);
    });
    return () => (
      <div class={styles['intention-page']}>
        <div class={styles['content-box']}>
          <div class={styles.contentBody} v-html={forms.contentA}></div>
          <div class={styles.contentBody}>
            <div class={styles.cbTitle}>一、什么是音乐（器乐）课堂数字化转型<span>（详见视频介绍）</span></div>
            <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 class={styles.contentBody} v-html={forms.contentB}></div>
          <div class={styles.contentBody} v-html={forms.contentC}></div>
          <div class={styles.contentBody}>
            <div class={styles.cbTitle}>四、什么是器乐数字 Ai<span>（详见视频介绍）</span></div>          
            <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 class={styles.contentBody} v-html={forms.contentD}></div>
        </div>

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


        <div class={styles.bottomBtn}>
          <p>在您了解上述内容后，<i>请点击下一步进行意见</i></p>
          <img class={styles.nextBtn} src={nextBtn} onClick={nextSkip} />
        </div>
      </div>
    );
  }
});