feat: 意向调查h5页面

src/router/router-root.ts

@@ -319,6 +319,22 @@ export default [
     }
   },
   {
+    path: '/intention-questionnaire',
+    name: 'intention-questionnaire',
+    component: () => import('@/views/intention-questionnaire/index'),
+    meta: {
+      title: '音乐(器乐)课堂数字化转型调查问卷'
+    }
+  },
+  {
+    path: '/fill-questionnaire',
+    name: 'fill-questionnaire',
+    component: () => import('@/views/fill-questionnaire/index'),
+    meta: {
+      title: '问卷调查'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

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

@@ -0,0 +1,134 @@
+.intention-page {
+  min-height: 100vh;
+  background: url('./images/fill_bg_icon.png') no-repeat top center #85E2FF;
+  background-size: contain;
+  padding-top: 152px;
+  overflow: hidden;
+  position: relative;
+}
+
+.formBox {
+  background: #FFFFFF;
+  border-radius: 16px;
+  border: 4px solid rgba(79,194,230,0.22);
+  margin: 0 14px 20px;
+  padding: 15px 16px;
+  .formItem {
+    margin-bottom: 24px;
+    >p {
+      color: #333333;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 23px;
+      margin-bottom: 8px;
+      >span {
+        font-weight: normal;
+        color: #777777;
+      }
+    }
+    .valDot {
+      font-size: 15px;
+      background: #F4F4F4;
+      border-radius: 4px;
+      height: 37px;
+      line-height: 37px;
+      padding: 0 10px;
+    }
+    .valDone {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      background: #F4F4F4;
+      border-radius: 4px;
+      min-height: 37px;
+      padding: 0 10px;
+      .vdArea {
+        font-size: 13px;
+        color: #777777;
+      }
+      .vdSchool {
+        font-size: 15px;
+        color: #000000;
+        margin-bottom: 4px;
+      }
+    }
+    .valDone2 {
+      height: 58px;
+    }
+    .grayText {
+      color: #BBBBBB;
+    }
+    .codeItem {
+      margin-top: 12px;
+    }
+    .selectItem {
+      display: flex;
+      align-items: center;
+      >div {
+        display: flex;
+        align-items: center;
+        margin-right: 30px;
+        span {
+          color: #333333;
+          font-size: 15px;
+        }
+        i {
+          width: 16px;
+          height: 16px;
+          background: url('./images/no_select.png') no-repeat top center;
+          background-size: contain;
+          margin-right: 4px;
+        }
+        .selectedIcon {
+          background: url('./images/selected.png') no-repeat top center;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+.bottomBtn {
+  height: 68px;
+  width: auto;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 4px 0;
+}
+
+.successPop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 8;
+  background: rgba(0, 0, 0, 0.7);
+}
+.successBox {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 9;
+  width: 220px;
+  height: 251px;
+  background: url('./images/success_box_icon.png') no-repeat center;
+  background-size: contain;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .sTitle {
+    margin-top: 110px;
+    width: 74px;
+  }
+  .sDone {
+    width: 190px;
+    height: 62px;
+  }
+  p{
+    margin: 8px 0 14px;
+  }
+}

src/views/fill-questionnaire/index.tsx

@@ -0,0 +1,792 @@
+import { defineComponent, onMounted, onUnmounted, reactive, ref, nextTick, computed } from 'vue';
+import styles from './index.module.less';
+import {
+  Button,
+  CellGroup,
+  Field,
+  Picker,
+  Popup,
+  closeToast,
+  showToast,
+  Loading,
+  Form,
+  CountDown,
+  Cell,
+  Area,
+} 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, checkPhone } 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 MImgCode from '@/components/m-img-code';
+import MSearch from '@/components/m-search';
+import submitBtn from './images/submit_icon.png'
+import signupBtn from './images/signup_icon.png'
+import signSusIcon from './images/sign_icon.png'
+import subSusIcon from './images/subsus_icon.png'
+import doneIcon from './images/done_icon.png'
+import { subscribe } from 'diagnostics_channel';
+import { api_sysAreaQueryAllProvince } from '@/views/school-register/api';
+
+export default defineComponent({
+  name: 'fill-questionnaire',
+  setup() {
+    const router = useRouter();
+    const route = useRoute();  
+
+    const classList: any = [];
+    for (let i = 1; i <= 40; i++) {
+      classList.push({ text: i + '班', value: i });
+    }
+    const gradeList = route.query.meetingType === 'primarySchoolNo' || route.query.meetingType === 'primarySchoolYes' ? [
+      {
+        text: '一年级',
+        value: 1
+      },
+      {
+        text: '二年级',
+        value: 2
+      },
+      {
+        text: '三年级',
+        value: 3
+      },
+      {
+        text: '四年级',
+        value: 4
+      },
+      {
+        text: '五年级',
+        value: 5
+      },
+      {
+        text: '六年级',
+        value: 6
+      },
+    ] : [
+      {
+        text: '六年级',
+        value: 6
+      },
+      {
+        text: '七年级',
+        value: 7
+      },
+      {
+        text: '八年级',
+        value: 8
+      },
+      {
+        text: '九年级',
+        value: 9
+      },
+    ]
+
+    const GRADE_ENUM = {
+      '1': '一年级',
+      '2': '二年级',
+      '3': '三年级',
+      '4': '四年级',
+      '5': '五年级',
+      '6': '六年级',
+      '7': '七年级',
+      '8': '八年级',
+      '9': '九年级'
+    } as any;   
+    const getGradeList = (gradeYear?: string, instrumentCode?: string) => {
+      let tempList: any = [];
+      const five = [
+        { text: '一年级', value: 1, instrumentCode },
+        { text: '二年级', value: 2, instrumentCode },
+        { text: '三年级', value: 3, instrumentCode },
+        { text: '四年级', value: 4, instrumentCode },
+        { text: '五年级', value: 5, instrumentCode }
+      ];
+      const one = [{ text: '六年级', value: 6, instrumentCode }];
+      const three = [
+        { text: '七年级', value: 7, instrumentCode },
+        { text: '八年级', value: 8, instrumentCode },
+        { text: '九年级', value: 9, instrumentCode }
+      ];
+      if (gradeYear === 'FIVE_YEAR_SYSTEM') {
+        tempList.push(...[...five]);
+      } else if (gradeYear === 'SIX_YEAR_SYSTEM') {
+        tempList.push(...[...five, ...one]);
+      } else if (gradeYear === 'THREE_YEAR_SYSTEM') {
+        tempList.push(...[...three]);
+      } else if (gradeYear === 'FORE_YEAR_SYSTEM') {
+        tempList.push(...[...one, ...three]);
+      } else {
+        tempList.push(...[...five, ...one, ...three]);
+      }
+      return tempList;
+    };
+
+    const countDownRef = ref();
+    const forms = reactive({
+      isPageHide: false,
+      currentClassText: '',
+      supportList: [
+        {
+          title: '支持',
+          val: true
+        },
+        {
+          title: '不支持',
+          val: false
+        }
+      ],
+      willingList: [
+        {
+          title: '愿意',
+          val: true
+        },
+        {
+          title: '不愿意',
+          val: false
+        }
+      ],
+      username: '',
+      openId: null as any,
+      participationFlag: null as any, // 是否愿意参加
+      supportFlag: null as any, // 是否支持
+      currentGrade: null as any,
+      currentClass: null as any,
+      provinceCode: '',
+      cityCode: '',
+      districtCode: '',
+      phone: '',
+      smsCode: '',
+      selectArea: '', // 所选地区
+      selectSchool: '', // 所选学校
+      selectClass: '',
+      countDownStatus: true,
+      countDownTime: 1000 * 120, // 倒计时时间
+      imgCodeStatus: false,
+      successPopShow: false, // 提交结果弹窗
+      schoolStatus: false,
+      schoolPopupShow: false,
+      schoolLoading: false,
+      schoolPopupIndex: [] as any,
+      schoolAreaList: [] as any,
+      schoolAreaId: null, // 学校区域编号
+      schoolId: null as any,
+      schoolInstrumentSetType: null as any,
+      gradeList: [] as any,
+      classList: [] as any,
+      schoolName: '',
+      gradeNumText: '',
+      areaName: '',
+      gradeStatus: false,
+      gradePopupShow: false,
+      gradePopupIndex: [] as any, // 年级下拉索引
+      classPopupShow: false,
+      classPopupIndex: [] as any, // 班级下拉索引
+      areaList: [] as any,
+      showPicker: false,
+      gradeAndClass: [gradeList, classList], 
+      gradeAndClassIndex: [] as any,
+      submitLoading: false,
+      id: null as any,
+    })
+
+    onMounted(async () => {
+      queryDetail();
+      getAreaList();
+    });
+
+    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 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);
+
+    const queryDetail = async () => {
+      try {
+        // 判断是否获取微信code码
+        if (!forms.openId) return;
+        const { data } = await request.get(
+          '/edu-oauth/schoolMeetingQuestion/detail?openId=' + forms.openId
+        );
+        // console.log(12222,data)
+        forms.provinceCode = data.provinceCode
+        forms.cityCode = data.cityCode
+        forms.districtCode = data.districtCode
+        forms.currentClass = data.currentClass
+        forms.currentGrade = data.currentGrade
+        forms.phone = data.phone
+        forms.username = data.username
+        forms.schoolId = data.schoolId
+        forms.schoolName = data.schoolName
+        forms.supportFlag = data.supportFlag
+        forms.participationFlag = data.participationFlag
+        forms.areaName = data.provinceName + ' ' + data.cityName + ' ' + data.districtName
+        const gradeIdx = gradeList.find(item => item.text === data.currentGrade)?.value || 1
+        const classIdx = classList.find(item => item.text === data.currentClass)?.value || 1
+        forms.gradeAndClassIndex = [gradeIdx, classIdx]
+        getSchoolAreaList()
+      } catch {
+        //
+      }
+    }
+    
+    /** 手机号变更时清空验证码信息，用户信息 */
+    const phoneChangeEmptyInfo = () => {
+
+    };
+
+    const onCodeSend = () => {
+      forms.countDownStatus = false;
+      nextTick(() => {
+        countDownRef.value.start();
+      });
+    };
+
+    const onSendCode = () => {
+      // 发送验证码
+      if (!checkPhone(forms.phone)) {
+        return showToast('请输入正确的手机号码');
+      }
+      forms.imgCodeStatus = true;
+    };
+
+    const validatePhone = computed(() => {
+      return checkPhone(forms.phone) ? true : false;
+    });
+
+    const onFinished = () => {
+      forms.countDownStatus = true;
+      countDownRef.value.reset();
+    };
+
+    const checkForm = (status = true) => {
+      if (!forms.schoolId) {
+        showToast('请选择学校');
+        return false;
+      }
+      if (!forms.username) {
+        showToast('请输入姓名');
+        return false;
+      }
+      if (!forms.currentClass) {
+        showToast('请选择年级班级');
+        return false;
+      }
+      if (forms.supportFlag === null) {
+        showToast('请勾选是否支持学校数字化转型');
+        return false;
+      }
+      if (forms.participationFlag === null) {
+        showToast('请勾选是否愿意学生参加数字化转型');
+        return false;
+      }
+      if (forms.participationFlag) {
+        if (!checkPhone(forms.phone)) {
+          status && showToast('请输入正确的手机号码');
+          return false;
+        } else if (!forms.smsCode) {
+          status && showToast('请输入验证码');
+          return false;
+        }
+      }
+      return true;
+    };
+
+    const submitFill = async () => {
+      if (checkForm()) {
+        try {
+          forms.submitLoading = true;
+          const { currentClass, districtCode, currentGrade, participationFlag,cityCode, openId,provinceCode,smsCode,phone,schoolId,supportFlag,username,id} = forms
+          let params: any = {
+            currentClass, districtCode, currentGrade, participationFlag,cityCode, openId,provinceCode,schoolId,supportFlag,username
+          }
+          if (id) {
+            params.id = id
+          }
+          if (participationFlag) {
+            params.phone = phone
+            params.smsCode = smsCode
+          }
+          const res = await request.post('/edu-oauth/schoolMeetingQuestion/save', {
+            data: params
+          });
+          if (res.code === 200) {
+            forms.successPopShow = true;
+          }
+          forms.submitLoading = false;
+        } catch {
+          //
+          forms.submitLoading = false;
+        }
+      }
+    }
+    const formateArea = (area: any[]) => {
+      const province_list: { [_: string]: string } = {};
+      const city_list: { [_: string]: string } = {};
+      const county_list: { [_: string]: string } = {};
+      area.forEach((item: any) => {
+        province_list[item.code] = item.name;
+      });
+      area.forEach((item: any) => {
+        item.areas?.forEach((city: any) => {
+          city_list[city.code] = city.name;
+        });
+      });
+      area.forEach((item: any) => {
+        item.areas?.forEach((city: any) => {
+          city.areas?.forEach((county: any) => {
+            county_list[county.code] = county.name;
+          });
+        });
+      });
+      return {
+        province_list,
+        city_list,
+        county_list
+      };
+    };
+    const getAreaList = () => {
+      api_sysAreaQueryAllProvince().then(res => {
+        if (res?.code === 200) {
+          forms.areaList = formateArea(res.data);
+        }
+      });
+    };
+    const openAreaPop = () => {
+      console.log(11111)
+      forms.schoolStatus = true
+    }
+
+    const getSchoolAreaList = async (name?: string) => {
+      forms.schoolLoading = true;
+      try {
+        const { data } = await request.post('/edu-app/open/schoolArea/list', {
+          data: {
+            name,
+            testFlag: true,
+            provinceCode: forms.provinceCode,
+            cityCode: forms.cityCode,
+            districtCode: forms.districtCode
+          }
+        });
+        forms.schoolAreaList = data;
+      } catch {
+        //
+      }
+      forms.schoolLoading = false;
+    };
+
+    // 获取地区学校详情
+    const getSchoolAreaDetail = async () => {
+      try {
+        const { data } = await request.get(
+          '/edu-app/open/schoolArea/detail/' + forms.schoolAreaId
+        );
+        console.log(data, 'data');
+
+        if (data.school) {
+          const schoolInfo = data.school || {};
+          const schoolInstrumentList = schoolInfo.schoolInstrumentList || [];
+          forms.schoolInstrumentSetType = schoolInfo.instrumentSetType;
+          if (schoolInfo.instrumentSetType === 'SCHOOL') {
+            const instrumentCode = schoolInstrumentList[0]?.instrumentCode;
+            forms.gradeList = getGradeList(
+              schoolInfo.gradeYear,
+              instrumentCode
+            );
+            forms.classList = classList;
+          } else if (schoolInfo.instrumentSetType === 'GRADE') {
+            forms.gradeList = [];
+            schoolInstrumentList.forEach((item: any) => {
+              forms.gradeList.push({
+                text: GRADE_ENUM[item.gradeNum],
+                value: item.gradeNum,
+                instrumentId: item.instrumentId,
+                instrumentCode: item.instrumentCode
+              });
+            });
+            forms.gradeList.sort((a: any, b: any) => a.value - b.value);
+            forms.classList = classList;
+          } else if (schoolInfo.instrumentSetType === 'CLASS') {
+            // 班级
+            const tempGradeList: any[] = [];
+            schoolInstrumentList.forEach((item: any) => {
+              if (!tempGradeList.includes(item.gradeNum)) {
+                tempGradeList.push(item.gradeNum);
+              }
+            });
+
+            const lastGradeList: any[] = [];
+            tempGradeList.forEach((temp: any) => {
+              const list = {
+                text: GRADE_ENUM[temp],
+                value: temp,
+                instrumentId: '',
+                instrumentCode: '',
+                instrumentName: '',
+                classList: [] as any
+              };
+              schoolInstrumentList.forEach((item: any) => {
+                if (temp === item.gradeNum) {
+                  list.instrumentId = item.instrumentId;
+                  list.instrumentCode = item.instrumentCode;
+                  list.instrumentName = item.instrumentName;
+                  list.classList.push({
+                    text: item.classNum + '班',
+                    value: item.classNum,
+                    instrumentCode: item.instrumentCode
+                  });
+                }
+              });
+              // 排序班级
+              list.classList.sort((a: any, b: any) => a.value - b.value);
+              lastGradeList.push(list);
+            });
+            lastGradeList.sort((a: any, b: any) => a.value - b.value);
+            forms.gradeList = lastGradeList;
+            forms.classList = [];
+          } else {
+            forms.gradeList = getGradeList(schoolInfo.gradeYear);
+            forms.classList = classList;
+          }
+        } else {
+          forms.schoolInstrumentSetType = '';
+          forms.gradeList = getGradeList();
+          forms.classList = classList;
+        }
+      } catch {
+        //
+      }
+    };    
+
+    onUnmounted(() => {
+      window.removeEventListener('pageshow', onPageShow);
+      window.removeEventListener('pagehide', onPageHide);
+    });
+    return () => (
+      <div class={styles['intention-page']}>
+        <div class={styles.formBox}>
+          <div class={styles.formItem}>
+            <p>1. 学校</p>
+            {
+              forms.areaName || forms.schoolName ? 
+              <div class={[styles.valDone, forms.schoolName && styles.valDone2]} onClick={() => forms.schoolStatus = true}>
+                {forms.schoolName && <span class={styles.vdSchool}>{forms.schoolName}</span>}
+                <span class={styles.vdArea}>{forms.areaName}</span>
+              </div> :
+              <div class={[styles.valDot, styles.grayText]} onClick={openAreaPop}>请选择学校</div>
+            }
+            <div></div>
+          </div>
+          <div class={styles.formItem}>
+            <p>2. 学生姓名</p>
+            <Field
+              class={styles.valDot}
+              clearable={false}
+              inputAlign="left"
+              placeholder="请输入学生姓名"
+              autocomplete="off"
+              maxlength={14}
+              v-model={forms.username}>
+						</Field>
+          </div>
+          <div class={styles.formItem}>
+            <p>3. 年级班级</p>
+            <div class={[styles.valDot, !forms.currentClass && styles.grayText]}
+             onClick={()=> forms.gradeStatus = true}>{forms.currentClass ? forms.currentGrade+forms.currentClass : '请选择年级班级'}</div>
+          </div>     
+          <div class={styles.formItem}>
+            <p>4. 在您了解以上数字化转型事项后，您是</p>
+            <div class={styles.selectItem}>
+              {
+                forms.supportList.map(item => 
+                  <div onClick={() => (forms.supportFlag = item.val)}>
+                    <i class={forms.supportFlag === item.val && styles.selectedIcon}></i>
+                    <span>{item.title}</span>
+                  </div>
+                )
+              }
+            </div>
+          </div>    
+          <div class={styles.formItem}>
+            <p>5. 您是否愿意学生参加数字化转型<span>（注：以学生及家长自愿参加为原则。如愿意参加，家长需自行为学生准备好“器乐数字Ai”应用软件，市面上均有提供，大约300多元一年，学校不涉及任何收费行为。如不参加，学生按原有方式进行器乐课程学习）</span></p>
+            <div class={styles.selectItem}>
+              {
+                forms.willingList.map(item => 
+                  <div onClick={() => (forms.participationFlag = item.val)}>
+                    <i class={forms.participationFlag === item.val && styles.selectedIcon}></i>
+                    <span>{item.title}</span>
+                  </div>
+                )
+              }
+            </div>            
+          </div> 
+          {
+            forms.participationFlag && 
+            <div class={styles.formItem}>
+              <p>联系方式</p>
+              <Field
+                class={styles.valDot}
+                clearable={false}
+                placeholder="请输入手机号码"
+                type="digit"
+                autocomplete="off"
+                inputAlign="left"
+                v-model={forms.phone}
+                maxlength={11}
+                onUpdate:modelValue={(val: any) => {
+                  phoneChangeEmptyInfo();
+                }}>
+              </Field>
+              <Field
+                class={[styles.valDot, styles.codeItem]}
+                center
+                clearable={false}
+                inputAlign="left"
+                placeholder="请输入验证码"
+                autocomplete="off"
+                type="number"
+                v-model={forms.smsCode}
+                maxlength={6}>
+                {{
+                  button: () =>
+                    forms.countDownStatus ? (
+                      <span
+                        class={[
+                          styles.codeText,
+                          !validatePhone.value ? styles.codeTextDisabled : ''
+                        ]}
+                        onClick={onSendCode}>
+                        获取验证码
+                      </span>
+                    ) : (
+                      <CountDown
+                        ref={(el: any) => (countDownRef.value = el)}
+                        auto-start={false}
+                        class={styles.countDown}
+                        time={forms.countDownTime}
+                        onFinish={onFinished}
+                        format="ss秒后重试"
+                      />
+                    )
+                }}
+              </Field>                            
+          </div>            
+          }    
+   
+
+        </div>
+
+        {/* 是否在微信中打开 */}
+        {/* <OWxTip /> */}
+
+        {forms.imgCodeStatus ? (
+          <MImgCode
+            v-model:value={forms.imgCodeStatus}
+            phone={forms.phone}
+            type="MEETING_QUESTION"
+            onClose={() => {
+              forms.imgCodeStatus = false;
+            }}
+            onSendCode={onCodeSend}
+          />
+        ) : null}
+        {
+          forms.participationFlag !== null && 
+          <img class={styles.bottomBtn} src={forms.participationFlag ? signupBtn : submitBtn}
+            onClick={() => {
+              if (forms.submitLoading) return;
+              submitFill()
+            }}
+           />      
+        }
+        {
+          forms.successPopShow && 
+          <div class={styles.successPop}>
+            <div class={styles.successBox}>
+              <img class={styles.sTitle} src={forms.participationFlag ? signSusIcon : subSusIcon} />
+              <p>{forms.participationFlag ? '您已报名成功，感谢您的参与' : '感谢您的宝贵意见'}</p>
+              <img class={styles.sDone} src={doneIcon} onClick={() => {
+                forms.successPopShow = false
+              }} />
+            </div>
+          </div>
+        }
+
+        <Popup
+          v-model:show={forms.showPicker}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}>
+          <Area
+            visibleOptionNum={9}
+            optionHeight={46}
+            areaList={forms.areaList}
+            onCancel={() => (forms.showPicker = false)}
+            onConfirm={({ selectedOptions }) => {
+              forms.provinceCode = selectedOptions[0].value;
+              forms.cityCode = selectedOptions[1].value;
+              forms.districtCode = selectedOptions[2]?.value;
+
+              forms.areaName = selectedOptions
+                .map((item: any) => item?.text)
+                .join(' ');
+
+              forms.showPicker = false;
+              forms.schoolId = null;
+              forms.schoolAreaId = null;
+              forms.schoolName = '';
+              forms.gradeNumText = '';
+              forms.currentGrade = null;
+              forms.currentClass = null;
+              forms.currentClassText = '';
+              // console.log('地址1')
+              getSchoolAreaList();
+            }}
+          />
+        </Popup>
+
+        {/* 互通学校 */}
+        <Popup
+          v-model:show={forms.schoolStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          lazyRender={false}
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.schoolPopupShow = true;
+          }}
+          onClosed={() => {
+            forms.schoolPopupShow = false;
+          }}>
+          {forms.schoolPopupShow && (
+            <div>
+              <Picker
+              
+                showToolbar
+                v-model={forms.schoolPopupIndex}
+                columns={forms.schoolAreaList}
+                loading={forms.schoolLoading}
+                columnsFieldNames={{
+                  text: 'name',
+                  value: 'id'
+                }}
+                onCancel={() => (forms.schoolStatus = false)}
+                onConfirm={(val: any) => {
+                  const selectedOption = val.selectedOptions[0];
+                  forms.schoolId = selectedOption.schoolId || null;
+                  forms.schoolAreaId = selectedOption.id;
+                  forms.schoolName = selectedOption.name;
+                  forms.schoolStatus = false;
+                  forms.currentGrade = null;
+                  forms.currentClass = null;
+                  // getSchoolAreaDetail();
+                }}>
+                {{
+                  'columns-top': (
+                    <div class={styles.columnsTop}>
+                      <Cell border={false} clickable={false} title={forms.areaName || '请选择省市区'} isLink onClick={() => {
+                        forms.showPicker = true;
+                      }} />
+                      <MSearch
+                        placeholder="请输入学校名称"
+                        onSearch={(val: any) => {
+                          getSchoolAreaList(val);
+                        }}
+                      />
+                    </div>
+                  )
+                }}
+              </Picker>
+            </div>
+          )}
+        </Popup>
+        {/* 年级班级 */}
+        <Popup
+          v-model:show={forms.gradeStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          lazyRender={false}
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            forms.gradePopupShow = true;
+          }}
+          onClosed={() => {
+            forms.gradePopupShow = false;
+          }}>
+          {forms.gradePopupShow && (
+            <Picker
+              showToolbar
+              v-model={forms.gradeAndClassIndex}
+              columns={forms.gradeAndClass}
+              onCancel={() => (forms.gradeStatus = false)}
+              onConfirm={(val: any) => {
+                // console.log('选择1111',val)
+                forms.gradeAndClassIndex = [val.selectedOptions[0].value, val.selectedOptions[1].value]
+                forms.currentGrade = val.selectedOptions[0].text;
+                forms.currentClass = val.selectedOptions[1].text;
+                forms.gradeStatus = false;
+                
+              }}
+            />
+          )}
+        </Popup>
+      </div>
+    );
+  }
+});

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

@@ -0,0 +1,142 @@
+.intention-page {
+  min-height: 100vh;
+  background: url('./images/head_bg_icon.png') no-repeat top center #85E2FF;
+  background-size: contain;
+  padding-top: 152px;
+  overflow: hidden;
+  position: relative;
+}
+
+.content-box {
+  margin: 0 14px;
+  .contentBody {
+    background: linear-gradient( 180deg, #DEFCFF 0%, #FFFFFF 15%, #FFFFFF 100%), #FFFFFF;
+    border-radius: 16px;
+    border: 4px solid rgba(79,194,230,0.22);
+    padding: 12px 16px;
+    margin-bottom: 10px;
+    .cbTitle {
+      font-size: 15px;
+      font-weight: bold;
+      color: #0B8BFE;
+      line-height: 1.5;
+      span {
+        font-size: 13px;
+        font-weight: normal;
+        color: #777777;
+      }
+    }
+  }
+}
+
+.video-content {
+  margin-top: 10px;
+  min-height: 170px;
+  --plyr-color-main: #FF8057;
+  padding: 4px;
+  background: linear-gradient( 135deg, #53C4FF 0%, #429BFF 100%);
+  border-radius: 12px;
+  box-sizing: content-box;
+  .coverImg {
+    width: 100%;
+    height: 100%;
+    border-radius: 30px;
+  }
+
+  video {
+    width: 100%;
+  }
+
+  :global {
+    .video-back {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: #fff;
+      z-index: 99;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 4px 5px 4px 3px;
+    }
+
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+      overflow: hidden;
+    }
+
+
+    .plyr__poster {
+      background-size: cover;
+    }
+
+    .plyr__control--overlaid {
+      border: 1px solid #fff;
+      background-color: rgba(0, 0, 0, 0.2) !important;
+    }
+
+    .plyr--video .plyr__control:hover {
+      background-color: transparent !important;
+    }
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tcp-skin .vjs-play-progress {
+      background-color: var(--van-primary) !important;
+    }
+
+    .vjs-slider:focus {
+      box-shadow: none !important;
+    }
+
+    .video-js .vjs-progress-control:hover .vjs-progress-holder {
+      font-size: 1em !important;
+    }
+
+  }
+
+  .video {
+    position: relative;
+    border-radius: 10px;
+  }
+}
+
+.loadingVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}
+
+.bottomBtn {
+  background: #fff;
+  width: 100%;
+  padding: 12px 0;
+  p {
+    font-size: 13px;
+    color: #777777;
+    text-align: center;
+    i {
+      color: #FF5A56;
+      font-style: normal;
+    }
+  }
+  .nextBtn {
+    height: 66px;
+    width: auto;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

src/views/intention-questionnaire/index.tsx

@@ -0,0 +1,217 @@
+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/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",
+      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-oauth/meetingQuestionSetting/detail?type=' + forms.meetingType
+        );
+        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
+        }
+        
+      } 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>
+    );
+  }
+});

src/views/intention-questionnaire/initVideo.ts

@@ -0,0 +1,128 @@
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.css';
+
+export const _initVideo = (type: string, forms: any, videoRef: any) => {
+    let player = type === 'one' ? forms.player1 : forms.player2;
+    // _initVideo('one', forms, forms.player1, videoIntervalRef, forms.introductionVideo, forms.coverImg, forms.player1Speed, forms.videoLoading1)
+    const videoUrl = type === 'one' ? forms.introductionVideo : forms.introductionVideo2;
+    const coverImg = type === 'one' ? forms.coverImg : forms.coverImg2;
+    let playerSpeed = type === 'one' ? forms.playerSpeed1 : forms.playerSpeed2;
+    let videoLoading = type === 'one' ? forms.videoLoading1 : forms.videoLoading2;
+    const videoId = type === 'one' ? 'register-video' : 'register-video2'
+    const Button = TCPlayer.getComponent('Button');
+    const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
+    BigPlayButton.prototype.createEl = function () {
+      const el = Button.prototype.createEl.call(this);
+      const _html =
+        '<button><svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="播放/播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.20385619" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="25" cy="25" r="24.4114519"></circle><g id="视频/暂停" transform="translate(17.2619, 13.0952)" fill="#FFFFFF"><path d="M12.1943373,5.31370674 L19.8894148,18.3953385 C20.5636212,19.5414893 20.1810346,21.0171804 19.0348838,21.6913868 C18.6648746,21.9090393 18.2434029,22.0238095 17.8141251,22.0238095 L2.42397011,22.0238095 C1.09422728,22.0238095 0.0162577307,20.94584 0.0162577307,19.6160971 C0.0162577307,19.1868194 0.131027981,18.7653477 0.34868043,18.3953385 L8.04375794,5.31370674 C8.71796432,4.1675559 10.1936554,3.78496932 11.3398063,4.4591757 C11.6926653,4.66673986 11.9867731,4.96084767 12.1943373,5.31370674 Z" id="三角形" transform="translate(10.119, 11.9048) rotate(-270) translate(-10.119, -11.9048)"></path></g></g></svg></button>';
+
+      el.appendChild(
+        TCPlayer.dom.createEl('div', {
+          className: 'vjs-button-icon',
+          innerHTML: _html
+        })
+      );
+      return el;
+    };
+    player = TCPlayer(videoId, {
+      appID: '',
+      controls: true,
+      plugins: {}
+    }); // player-container-id 为播放器容器 ID，必须与 html 中一致
+    if (player) {
+      player.src(videoUrl); // url 播放地址
+      player.poster(coverImg || '');
+
+      // player.on('loadstart', () => {})
+      player.on('ready', (item: any) => {
+        console.log('ready', item);
+
+        // player.pause()
+      });
+      player.on('loadedmetadata', () => {
+        console.log('loadedmetadata');
+        videoLoading = false;
+        if (type === 'one') {
+            forms.videoLoading1 = false
+        } else {
+            forms.videoLoading2 = false
+        }
+      });
+
+      // 速度变化时
+      player.on('ratechange', () => {
+        playerSpeed =
+          playerSpeed < player.playbackRate()
+            ? player.playbackRate()
+            : playerSpeed;
+      });
+
+      player.on('seeking', () => {
+        console.log('seeking');
+        videoRef.isActive.value && videoRef.pause();
+      });
+
+      // // 拖动结束时
+      player.on('seeked', () => {
+        console.log('seeked');
+        videoRef.isActive.value && videoRef.pause();
+      });
+
+      // 正在搜索中
+      player.on('waiting', () => {
+        // console.log('waiting pause')
+        videoRef.isActive.value && videoRef.pause();
+      });
+
+      // 如何视频在缓存不会触发
+      player.on('timeupdate', () => {
+        // console.log('timeupdate', player.currentTime())
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+        if (
+          !videoRef.isActive.value &&
+          player.currentTime() > 0 &&
+          !player.paused()
+        ) {
+          // console.log('timeupdate play')
+          videoRef.resume();
+        }
+      });
+
+      // 视屏播放时暂停
+      player.on('ended', () => {
+        player.pause();
+      });
+
+      // 开始播放
+      player.on('play', () => {
+        // console.log('play');
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        videoRef.resume();
+      });
+
+      // 暂停播放
+      player.on('pause', () => {
+        // console.log('pause', videoRef.isActive.value);
+
+        videoRef.pause();
+      });
+
+      player.on('fullscreenchange', () => {
+        if (player.isFullscreen()) {
+          console.log('fullscreen');
+          const i = document.createElement('i');
+          i.id = 'fullscreen-back';
+          i.className = 'van-icon van-icon-arrow-left video-back';
+          i.addEventListener('click', () => {
+            player.exitFullscreen();
+          });
+          document.getElementsByClassName('video-js')[0].appendChild(i);
+        } else {
+          console.log('exitfullscreen');
+          const i = document.getElementById('fullscreen-back');
+          i && i.remove();
+        }
+      });
+    }
+}

src/views/pre-register-active/index.tsx

@@ -451,7 +451,7 @@ export default defineComponent({
         </div>
 
         {/* 是否在微信中打开 */}
-        <OWxTip />
+        {/* <OWxTip /> */}
 
         {/* 年级 */}
         <Popup