feat: 填写问卷修改

src/router/router-root.ts

@@ -327,6 +327,14 @@ export default [
     }
   },
   {
+    path: '/intention-questionnaire-show',
+    name: 'intention-questionnaire-show',
+    component: () => import('@/views/intention-questionnaire/show'),
+    meta: {
+      title: '音乐数字化转型家长说明会'
+    }
+  },
+  {
     path: '/fill-questionnaire',
     name: 'fill-questionnaire',
     component: () => import('@/views/fill-questionnaire/index'),

src/views/fill-questionnaire/index.module.less

@@ -107,7 +107,7 @@
   background: rgba(0, 0, 0, 0.7);
 }
 .successBox {
-  position: absolute;
+  position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);

src/views/fill-questionnaire/index.tsx

@@ -161,6 +161,7 @@ export default defineComponent({
       cityCode: '',
       districtCode: '',
       phone: '',
+      prePhone: '',
       smsCode: '',
       selectArea: '', // 所选地区
       selectSchool: '', // 所选学校
@@ -259,7 +260,7 @@ export default defineComponent({
         // 判断是否获取微信code码
         if (!forms.openId) return;
         const { data } = await request.get(
-          '/edu-oauth/schoolMeetingQuestion/detail?openId=' + forms.openId
+          '/edu-oauth/open/schoolMeetingQuestion/detail?openId=' + forms.openId
         );
         // console.log(12222,data)
         forms.provinceCode = data.provinceCode
@@ -268,6 +269,7 @@ export default defineComponent({
         forms.currentClass = data.currentClass
         forms.currentGrade = data.currentGrade
         forms.phone = data.phone
+        forms.prePhone = data.phone
         forms.username = data.username
         forms.schoolId = data.schoolId
         forms.schoolName = data.schoolName
@@ -360,16 +362,19 @@ export default defineComponent({
             params.phone = phone
             params.smsCode = smsCode
           }
-          const res = await request.post('/edu-oauth/schoolMeetingQuestion/save', {
+          const res = await request.post('/edu-oauth/open/schoolMeetingQuestion/save', {
             data: params
           });
           if (res.code === 200) {
             forms.successPopShow = true;
+            forms.prePhone = forms.phone
           }
           forms.submitLoading = false;
+          forms.countDownStatus = true;
         } catch {
           //
           forms.submitLoading = false;
+          forms.countDownStatus = true;
         }
       }
     }
@@ -429,6 +434,17 @@ export default defineComponent({
       forms.schoolLoading = false;
     };
 
+    const switchParticipationFlag = (val: boolean) => {
+      forms.participationFlag = val
+      if (!forms.participationFlag) {
+        forms.phone = ''
+        forms.smsCode = ''
+      }
+      if (forms.participationFlag) {
+        forms.phone = forms.prePhone
+      }
+    }
+
     // 获取地区学校详情
     const getSchoolAreaDetail = async () => {
       try {
@@ -566,7 +582,7 @@ export default defineComponent({
             <div class={styles.selectItem}>
               {
                 forms.willingList.map(item => 
-                  <div onClick={() => (forms.participationFlag = item.val)}>
+                  <div onClick={() => switchParticipationFlag(item.val)}>
                     <i class={forms.participationFlag === item.val && styles.selectedIcon}></i>
                     <span>{item.title}</span>
                   </div>

src/views/intention-questionnaire/index.tsx

@@ -42,12 +42,12 @@ export default defineComponent({
       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/1739174971663.mp4",
-      introductionVideoTime: 190,
-      coverImg: "https://oss.dayaedu.com/ktyq/1739174954677.png",
-      introductionVideo2: "https://oss.dayaedu.com/ktyq/1739174971663.mp4",
-      introductionVideoTime2: 190,
-      coverImg2: "https://oss.dayaedu.com/ktyq/1739174954677.png",
+      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,
@@ -88,13 +88,15 @@ export default defineComponent({
         // 判断是否获取微信code码
         // if (!forms.code) return;
         const { data } = await request.get(
-          '/edu-oauth/meetingQuestionSetting/detail?type=' + forms.meetingType
+          '/edu-oauth/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 {

src/views/intention-questionnaire/show.tsx

@@ -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>
+    );
+  }
+});