|
|
@@ -0,0 +1,201 @@
|
|
|
+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-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><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'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _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>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
