添加活动

public/project/preRegister.html

@@ -201,48 +201,50 @@
             </van-radio-group>
           </template>
         </van-field>
-        <van-field label="首选声部" v-model="stu.registerSubjectId" readonly name="registerSubjectId"
-          :rules="[{ required: true, message: '请选择首选声部', trigger: 'onChange' }]" @click="pickerChange2"
-          placeholder="请选择首选声部">
+        <van-field label="孩子是否有学习过的乐器(有请备注)" v-model="stu.learningSubjectName" name="learningSubjectName"
+          placeholder="请输入学习过的乐器">
+        </van-field>
+
+        <van-field label="选报声部1" v-model="stu.registerSubjectId" readonly name="registerSubjectId"
+          :rules="[{ required: true, message: '请选择选报声部1', trigger: 'onChange' }]" @click="pickerChange2"
+          placeholder="请选择选报声部1">
           <template #right-icon>
             <van-icon name="arrow" :color="'#323233'" size="16"></van-icon>
           </template>
         </van-field>
-        <van-field label="次选声部" v-model="stu.standbyRegisterSubjectId" readonly name="standbyRegisterSubjectId"
-          :rules="[{ required: true, message: '请选择次选声部', trigger: 'onChange' }]" @click="pickerChange3"
-          placeholder="请选择次选声部">
+        <van-field label="选报声部2" v-model="stu.standbyRegisterSubjectId" readonly name="standbyRegisterSubjectId"
+          :rules="[{ required: true, message: '请选择选报声部2', trigger: 'onChange' }]" @click="pickerChange3"
+          placeholder="请选择选报声部2">
           <template #right-icon>
             <van-icon name="arrow" :color="'#323233'" size="16"></van-icon>
           </template>
         </van-field>
 
-        <van-field label="是否服从调配" name="instrumentsPrepareMode" :rules="[{ required: true, message: '请选择是否服从调配' }]">
+        <van-field label="是否服从调配" name="adjust" :rules="[{ required: true, message: '请选择是否服从调配' }]">
           <template #input>
             <div>
               <p class="otherSubject">(如果自选声部名额已满，是否愿意接受安排其他声部?)</p>
 
-              <van-radio-group v-model="stu.instrumentsPrepareMode" checked-color="#57ABF8" direction="horizontal">
-                <van-tag size="large" type="primary"
-                  :color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE')  ? '#EAEAEA' : '#57ABF8'"
-                  :text-color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'"
-                  class="radioSection">
-                  <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>愿意
+              <van-radio-group v-model="stu.adjust" checked-color="#57ABF8" direction="horizontal">
+                <van-tag size="large" type="primary" :color="!(stu.adjust === 1)  ? '#EAEAEA' : '#57ABF8'"
+                  :text-color="!(stu.adjust === 1) ? '#AAA' : '#FFF'" class="radioSection">
+                  <van-radio class="radioItem" :name='1'></van-radio>愿意
                 </van-tag>
-                <van-tag size="large" type="primary"
-                  :color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#EAEAEA' : '#57ABF8'"
-                  :text-color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" class="radioSection">
-                  <van-radio class="radioItem" name="ONESELF"></van-radio>不愿意
+                <van-tag size="large" type="primary" :color="!(stu.adjust === 0) ? '#EAEAEA' : '#57ABF8'"
+                  :text-color="!(stu.adjust === 0) ? '#AAA' : '#FFF'" class="radioSection">
+                  <van-radio class="radioItem" :name='0'></van-radio>不愿意
                 </van-tag>
               </van-radio-group>
             </div>
           </template>
         </van-field>
+
       </van-cell-group>
 
       <van-cell-group inset class="cell-group">
         <van-field label="乐器参考表&Ai练习参考表" :border="false" style="padding-bottom: 0;">
           <template #input>
-            <img src="./images/preRegister/banner.png" style="width: 100%" />
+            <img :src="instrumentPriceImg" style="width: 100%" @click="showImg = true" />
           </template>
         </van-field>
 
@@ -250,14 +252,14 @@
           <template #input>
             <van-radio-group v-model="stu.instrumentsPrepareMode" checked-color="#57ABF8" direction="horizontal">
               <van-tag size="large" type="primary"
-                :color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE')  ? '#EAEAEA' : '#57ABF8'"
-                :text-color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'" class="radioSection">
-                <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>团购
+                :color="!(stu.instrumentsPrepareMode === 'ONESELF')  ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" class="radioSection">
+                <van-radio class="radioItem" name="ONESELF"></van-radio>自行购置
               </van-tag>
               <van-tag size="large" type="primary"
-                :color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#EAEAEA' : '#57ABF8'"
-                :text-color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" class="radioSection">
-                <van-radio class="radioItem" name="ONESELF"></van-radio>自备
+                :color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE') ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'" class="radioSection">
+                <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>希望基金会提供渠道购置
               </van-tag>
             </van-radio-group>
           </template>
@@ -268,36 +270,28 @@
           <template #input>
             <van-radio-group v-model="stu.learningSystemPrepareMode" checked-color="#57ABF8" direction="horizontal">
               <van-tag size="large" type="primary"
-                :color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#EAEAEA' : '#57ABF8'"
-                :text-color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'"
-                class="radioSection">
-                <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>团购
+                :color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" class="radioSection">
+                <van-radio class="radioItem" name="ONESELF"></van-radio>自行购置
               </van-tag>
               <van-tag size="large" type="primary"
-                :color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#EAEAEA' : '#57ABF8'"
-                :text-color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" :color="'#57ABF8'"
+                :color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'" :color="'#57ABF8'"
                 class="radioSection">
-                <van-radio class="radioItem" name="ONESELF"></van-radio>自备
+                <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>希望基金会提供渠道购置
               </van-tag>
             </van-radio-group>
           </template>
         </van-field>
-        <van-field type="tel" @blur='checkchangePhone' maxlength="11" minlength="11" label="联系电话(直接监护人)"
-          v-model="stu.phone" name="phone" :rules="[{ pattern, message: '输入监护人手机号码有误' }]" placeholder="请输入监护人手机号码">
+
+        <van-field type="tel" maxlength="11" minlength="11" label="联系电话(直接监护人)" v-model="stu.phone" name="phone"
+          :rules="[{ pattern, message: '输入监护人手机号码有误' }]" placeholder="请输入监护人手机号码">
         </van-field>
       </van-cell-group>
 
       <van-button size="large" block round class="btn-submit" :loading="btnLoading" native-type="submit"></van-button>
     </van-form>
 
-    <van-popup v-model:show="showPicker" position="bottom" round>
-      <van-picker show-toolbar :columns="currentGrade" @cancel="showPicker = false" @confirm="onConfirm" />
-    </van-popup>
-
-    <van-popup v-model:show="classPicker" position="bottom" round>
-      <van-picker show-toolbar :columns="classList" @cancel="classPicker = false" @confirm="onConfirmClass" />
-    </van-popup>
-
     <van-popup v-model:show="subjectPicker" position="bottom" round>
       <van-picker show-toolbar :columns="subjectList" @cancel="subjectPicker = false" @confirm="onConfirmSubject" />
     </van-popup>
@@ -306,6 +300,9 @@
       <van-picker show-toolbar :columns="subjectList" @cancel="subjectPicker2 = false" @confirm="onConfirmSubject2" />
     </van-popup>
 
+    <van-image-preview v-model:show="showImg" :images="[instrumentPriceImg]">
+    </van-image-preview>
+
     <van-popup v-model:show="submitStatus" round
       style="width: 100%;background-color: transparent;transform: translateY(-60%);" :close-on-click-overlay="false">
       <div class="submit-container">
@@ -326,55 +323,42 @@
   <!-- 引入 Vue 和 Vant 的 JS 文件 -->
   <script src="./js/vue.global.min.js"></script>
   <script src="./js/vant.min.js"></script>
+  <!-- <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
   <!-- <script src="https://cdn.jsdelivr.net/npm/umi-request@1.4.0/dist/index.min.js"></script> -->
   <script src="./js/axios.js"></script>
   <script type="text/javascript" src="./js/utils.js"></script>
   <script>
     // 乐团交付，乐团停止或关闭，有新的交付团；则不允许报名
-    var classList = []
-    for (var i = 1; i <= 40; i++) {
-      classList.push({ text: i + '班', value: i })
-    }
     var app = Vue.createApp({
       data() {
         return {
           orchestraId: getQueryVariable('orchestraId'),
+          openId: getQueryVariable('openId'),
           orchestraName: null,
           schoolId: null,
-          showPicker: false,
-          classPicker: false,
           subjectPickerType: 'first',
           subjectPicker: false,
           subjectPicker2: false,
           submitStatus: false,
           pattern: /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/,
           nameReg: /^[\u4E00-\u9FA5]+$/,
-          currentGrade: [
-            { text: '一年级', value: 1 },
-            { text: '二年级', value: 2 },
-            { text: '三年级', value: 3 },
-            { text: '四年级', value: 4 },
-            { text: '五年级', value: 5 },
-          ], // 年级数组列表
-          classList: classList,
-          subjectList: [],
+          subjectList: [{ text: '听从老师安排', value: 999 }],
           columns: [],
           pickerType: null, // 下拉类型
           stu: {
-            username: null, // 姓名
             sex: 1, // 性别
             phone: null, // 电话
-            currentGrade: '', // 年级
-            currentGradeNum: null, // 年级编号
-            currentClass: '', // 班级
-            currentClassNum: null, // 年级编号
+            learningSubjectName: null,
             registerSubjectId: '', // 首选声部
             registerSubjectNum: null, // 所在声部
             standbyRegisterSubjectId: '', // 次选声部
+            adjust: 1,
             standbyRegisterSubjectNum: '', // 次选声部
-            instrumentsPrepareMode: 'GROUP_PURCHASE',
-            learningSystemPrepareMode: 'GROUP_PURCHASE',
+            instrumentsPrepareMode: 'ONESELF',
+            learningSystemPrepareMode: 'ONESELF',
           },
+          showImg: false,
+          instrumentPriceImg: '',
           btnLoading: false,
           checkPhone: true,
           showPopup: false,
@@ -388,10 +372,12 @@
         }
 
         // 判断是否是微信，只能微信中打开
-        if (!browser().weixin) {
-          // this.showPopup = true
-          // return
-        } else {
+        // if (!browser().weixin) {
+        //   this.showPopup = true
+        //   return
+        // }
+        // 判断是在微信中，并且没有openId
+        if (browser().weixin && !this.openId) {
           //授权
           const code = getUrlCode()
           console.log(code)
@@ -411,13 +397,10 @@
           var schoolDetail = await axios.post('/api-student/open/school/detail', {
             orchestraId: this.orchestraId
           })
-          console.log(schoolDetail)
+          // console.log(schoolDetail)
           if (schoolDetail.data.code === 200) {
             var schoolSystem = schoolDetail.data.data.schoolSystem || 'sixYearSystem'
             this.schoolId = schoolDetail.data.data.id
-            if (schoolSystem === 'sixYearSystem') {
-              this.currentGrade.push({ text: '六年级', value: 6 })
-            }
           }
 
           var subjects = await axios.post('/api-student/open/orchestraSubjectConfig/pageByOrchestraId', {
@@ -436,10 +419,9 @@
           }
 
           var orchestraDetail = await axios.get('/api-student/open/orchestra/detail/' + this.orchestraId)
-          // console.log(orchestraDetail.data.code, 'orchestraDetail')
           if (orchestraDetail.data.code === 200) {
             this.orchestraName = orchestraDetail.data.data.name || ''
-            // console.log(this.orchestraName, 'orchestraName')
+            this.instrumentPriceImg = orchestraDetail.data.data.instrumentPriceImg || ''
             this.canSignUp = orchestraDetail.data.data.status
             if (orchestraDetail.data.data.status !== 'PRE_REGISTER') {
               vant.showToast('乐团预报名阶段已结束')
@@ -492,69 +474,6 @@
           this.submitStatus = false
           window.location.href = window.location.origin + '/orchestra-student/#/download'
         },
-        async checkchangePhone(val) {
-          try {
-            await this.$refs.form.validate('phone')
-            this.checkPhone = false
-            //  查询老数据
-            let tempValues = {}
-            this.setLoading(true)
-            tempValues.orchestraId = this.orchestraId
-            tempValues.phone = this.stu.phone
-
-            // 先从预报名中取数据
-            var preRegister = await axios.get('/api-student/open/orchestraPreRegister/detailByPhone', {
-              params: {
-                ...tempValues
-              }
-            })
-            if (preRegister.data.code === 200 && preRegister.data.data) {
-              var detail = preRegister.data.data
-              var grade = this.currentGrade.find(item => item.value == detail.currentGrade)
-              var cls = this.classList.find(item => item.value == detail.currentClass)
-              var subjects = this.subjectList.find(item => item.value == detail.registerSubjectId)
-              var subjects2 = this.subjectList.find(item => item.value == detail.standbyRegisterSubjectId)
-              this.stu = {
-                username: detail.username, // 姓名
-                sex: detail.sex ? 1 : 0, // 性别
-                phone: detail.phone, // 电话
-                currentGrade: grade.text, // 年级
-                currentGradeNum: detail.currentGrade, // 年级编号
-                currentClass: cls.text, // 班级
-                currentClassNum: detail.currentClass, // 年级编号
-                registerSubjectId: subjects.text, //
-                registerSubjectNum: detail.registerSubjectId, //
-                standbyRegisterSubjectId: subjects2.text,
-                standbyRegisterSubjectNum: detail.standbyRegisterSubjectId,
-                instrumentsPrepareMode: detail.instrumentsPrepareMode,
-                learningSystemPrepareMode: detail.learningSystemPrepareMode,
-              }
-              this.setLoading(false)
-              return
-            }
-
-            // 如果预报名中没有数据，则从启蒙报名中取数据
-            var userDetail = await axios.get('/api-student/open/orchestraInitiationSurvey/detailByPhone', {
-              params: {
-                ...tempValues
-              }
-            })
-
-            if (userDetail.data.code === 200 && userDetail.data.data) {
-              var detail = userDetail.data.data
-              var grade = this.currentGrade.find(item => item.value == detail.currentGrade)
-              var cls = this.classList.find(item => item.value == detail.currentClass)
-              this.stu.username = detail.username // 姓名
-              this.stu.sex = detail.sex ? 1 : 0 // 性别
-              this.stu.phone = detail.phone // 电话
-              this.stu.currentGrade = grade.text // 年级
-              this.stu.currentGradeNum = detail.currentGrade // 年级编号
-              this.stu.currentClass = cls.text // 班级
-              this.stu.currentClassNum = detail.currentClass // 年级编号
-            }
-          } catch { }
-          this.setLoading(false)
-        },
         validator(val) {
           // 校验函数返回 true 表示校验通过，false 表示不通过
           return this.nameReg.test(val) && (val.length >= 2 && val.length <= 15);
@@ -579,9 +498,8 @@
             var res = await axios.post('/api-student/open/orchestraPreRegister/save', {
               orchestraId: this.orchestraId,
               schoolId: this.schoolId,
+              openId: this.openId,
               ...stu,
-              currentClass: stu.currentClassNum,
-              currentGrade: stu.currentGradeNum,
               registerSubjectId: stu.registerSubjectNum,
               standbyRegisterSubjectId: stu.standbyRegisterSubjectNum,
               code: this.code
@@ -610,49 +528,28 @@
             vant.closeToast()
           }
         },
-        pickerChange(type) {
-          this.showPicker = true
-        },
-        pickerChange1(type) {
-          this.classPicker = true
-        },
         pickerChange2(type) {
           let tempId = this.stu.standbyRegisterSubjectNum
           this.subjectList.forEach((item) => {
-            if (item.value == tempId) {
+            if (item.value == tempId && tempId != 999) {
               item.disabled = true
             } else {
               item.disabled = false
             }
           })
-
           this.subjectPicker = true
-
         },
         pickerChange3() {
           let tempId = this.stu.registerSubjectNum
           this.subjectList.forEach((item) => {
-            if (item.value == tempId) {
+            if (item.value == tempId && tempId != 999) {
               item.disabled = true
             } else {
               item.disabled = false
             }
           })
-
           this.subjectPicker2 = true
         },
-        onConfirm(options) {
-          var stu = this.stu
-          stu.currentGrade = options.selectedOptions[0].text
-          stu.currentGradeNum = options.selectedOptions[0].value
-          this.showPicker = false
-        },
-        onConfirmClass(options) {
-          var stu = this.stu
-          stu.currentClass = options.selectedOptions[0].text
-          stu.currentClassNum = options.selectedOptions[0].value
-          this.classPicker = false
-        },
         onConfirmSubject(options) {
           var stu = this.stu
           stu.registerSubjectId = options.selectedOptions[0].text

src/router/routes-student.ts

@@ -38,6 +38,14 @@ const noLoginRouter = [
     meta: {
       title: '乐团组建家长会'
     }
+  },
+  {
+    path: '/pre-register-show',
+    name: 'pre-register-show',
+    component: () => import('@/student/pre-register-active/show'),
+    meta: {
+      title: '乐团组建家长会'
+    }
   }
 ]
 

src/student/pre-register-active/compontent-show/active-show.tsx

@@ -0,0 +1,75 @@
+import { defineComponent } from 'vue'
+import styles from '../index.module.less'
+import signinTips from '../images/signin-tips.png'
+import { Button, CellGroup, Field } from 'vant'
+
+export default defineComponent({
+  name: 'pre-register',
+  emits: ['tabChange'],
+  setup(props, { emit }) {
+    const onSubmit = () => {
+      emit('tabChange', 2)
+    }
+    return () => (
+      <div class={styles['per-register-active']}>
+        <div class={styles.flowPath}>
+          <i class={styles.flowPathTitle}></i>
+          <div class={styles.flowPathContent}>
+            一、所有家长<span>进行签到</span>
+            <br />
+            二、观看<span>管乐团家长会议</span>
+            <br />
+            1.学校领导讲话（5分钟）；基金会老师介绍乐团事项（20分钟）
+            <br />
+            2.乐团组建背景及政策
+            <br />
+            3.乐团发展规划与乐器知识讲解
+            <br />
+            4.学校/基金会/家长各方职责与投入
+            <br />
+            5.入团流程讲解 <br />
+            三、请
+            <span>“有意向”</span>让孩子加入乐团的家长
+            <span>点击“乐团报名”</span>进行报名信息填写；
+          </div>
+        </div>
+
+        <div class={styles.signin}>
+          <div class={styles.tips}>
+            <img src={signinTips} class={styles.signinTips} />
+            <p>
+              请先进行<span>签到</span>，再观看<span>管乐团家长会视频</span>
+            </p>
+          </div>
+
+          <CellGroup class={styles.cellGroup} border={false}>
+            <Field
+              label="学生姓名"
+              labelAlign="top"
+              placeholder="请输入学生姓名"
+              autocomplete="off"
+            />
+            <Field
+              label="年级"
+              labelAlign="top"
+              placeholder="请选择年级"
+              isLink
+              readonly
+              clickable={false}
+            />
+            <Field
+              label="班级"
+              labelAlign="top"
+              placeholder="请选择班级"
+              isLink
+              readonly
+              clickable={false}
+            />
+
+            <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+          </CellGroup>
+        </div>
+      </div>
+    )
+  }
+})

src/student/pre-register-active/compontent-show/register-show.module.less

@@ -0,0 +1,227 @@
+.registerShow {
+  background: url('../images/preRegister/banner.png') no-repeat top center #C7F4FF;
+  background-size: contain;
+  max-width: 750px;
+  margin: 0 auto;
+  min-height: 100vh;
+  overflow: hidden;
+  position: relative;
+
+
+  :global {
+    .van-cell {
+      flex-direction: column;
+      font-size: 16px;
+      padding: 14px 13px;
+    }
+
+    .van-field__label {
+      width: 100%;
+      margin-right: 0;
+      color: #333;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .van-field--disabled .van-field__label {
+      color: #333;
+    }
+
+    .van-cell--required::before {
+      left: 15px;
+    }
+
+    .van-field__body {
+      margin-top: 10px;
+    }
+
+    .cell-group {
+      margin: 0 13px 12px;
+      border-radius: 10px;
+      padding-bottom: 20px;
+    }
+
+    .van-form {
+      overflow: hidden;
+    }
+  }
+}
+
+.banner,
+.banner img {
+  width: 100%;
+  font-size: 0;
+}
+
+
+.btn-submit {
+  width: 90%;
+  margin: 20px auto;
+  background: url('../images/preRegister/btn.png') no-repeat center;
+  background-size: contain;
+  height: 52px;
+  border: none;
+}
+
+.system h2 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 10px 24px;
+  color: #444444;
+}
+
+.system .van-cell--required::before {
+  left: 25px;
+}
+
+.top-tips {
+  position: relative;
+  margin: 20px 12px 20px;
+  padding: 40px 18px 20px;
+  background: #FFFFFF;
+  border-radius: 10px;
+  font-size: 12px;
+  color: #777777;
+  line-height: 20px;
+}
+
+.top-tips::before {
+  position: absolute;
+  top: -6px;
+  left: 50%;
+  content: ' ';
+  margin-left: -62.5px;
+  width: 125px;
+  height: 32px;
+  background: url('../images/preRegister/tips.png') no-repeat center;
+  background-size: contain;
+}
+
+.title {
+  font-size: 22px;
+  line-height: 32px;
+  color: #ffffff;
+  width: 57%;
+  padding-left: 24px;
+  height: 148px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+
+.radioSection {
+  position: relative;
+  font-size: 14px;
+  min-width: 32px;
+  justify-content: center;
+}
+
+.radioItem {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+}
+
+.radioSection+.radioSection {
+  margin-left: 12px;
+}
+
+.van-picker__confirm {
+  color: #57ABF8;
+}
+
+.otherSubject {
+  font-size: 12px;
+  font-weight: 500;
+  color: #AAAAAA;
+  line-height: 17px;
+  padding-bottom: 13px;
+}
+
+/* 弹窗 */
+.submit-container {
+  position: relative;
+  text-align: center;
+  margin: 0 auto;
+  background: url('../images/preRegister/p-popup-banner.png') no-repeat top center;
+  background-size: contain;
+  width: 7.5rem;
+  height: 8.87rem;
+}
+
+.submit-title {
+  padding-top: 4.2rem;
+  padding-bottom: 10px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #000000;
+}
+
+.submit-tips {
+  font-size: 15px;
+  color: #777777;
+  line-height: 20px;
+  padding-bottom: 12px;
+}
+
+.submit-btn {
+  background: url('../images/preRegister/p-popup-btn.png') no-repeat center center;
+  background-size: contain;
+  width: 3.547rem;
+  height: 1rem;
+  margin: 0 auto;
+}
+
+.submit-container .van-button {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+
+
+.wxPopupDialog {
+  overflow: initial;
+}
+
+.wxPopupDialog::before {
+  position: absolute;
+  content: ' ';
+  top: -73px;
+  left: 50%;
+  margin-left: -86px;
+  display: inline-block;
+  background: url('../images/initiation/wx-no-top.png') no-repeat top center;
+  background-size: contain;
+  width: 172px;
+  height: 154px;
+}
+
+.popupContainer {
+  background: url('../images/initiation/wx-no-bg.png') no-repeat top center;
+  background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
+
+}
+
+.popupContainer .title1 {
+  padding-top: 57px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #3b2300;
+}
+
+.popupContainer .popupTips {
+  padding-top: 12px;
+  padding-bottom: 47px;
+  text-align: center;
+  font-size: 15px;
+  color: #777777;
+  line-height: 21px;
+}

src/student/pre-register-active/compontent-show/register-show.tsx

@@ -0,0 +1,211 @@
+import { defineComponent, reactive } from 'vue'
+import styles from './register-show.module.less'
+import { Button, CellGroup, Field, Form, Icon, Radio, RadioGroup, Tag } from 'vant'
+import { forms } from '@/school/train-planning/create'
+import { useRoute } from 'vue-router'
+
+export default defineComponent({
+  name: 'register-show',
+  setup() {
+    const route = useRoute()
+    const forms = reactive({
+      instrumentPriceImg: route.query.instrumentPriceImg,
+      name: route.query.name
+    })
+    return () => (
+      <div class={styles.registerShow}>
+        <div class={styles.title}>{forms.name}管乐团报名申请</div>
+
+        <Form validateFirst scrollToError ref="form" class={styles.form}>
+          <div class={styles['top-tips']}>
+            1、为了保障乐团顺利组建，避免名额浪费；请家长与孩子以自愿为原则，在确认意向后填写相关信息；专业老师将根据家长的相关填报，确认孩子是否能够加入乐团；
+            <br />
+            2、自用乐器及课后练习，家长自愿选择准备方式。
+          </div>
+          <CellGroup inset class={styles['cell-group']}>
+            <Field labelAlign="top" label="性别" name="sex">
+              {{
+                input: () => (
+                  <RadioGroup checkedColor="#57ABF8" direction="horizontal">
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#57ABF8'}
+                      textColor="#FFF"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={1} />
+                      男生
+                    </Tag>
+
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#EAEAEA'}
+                      textColor="#AAA"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={0} />
+                      女生
+                    </Tag>
+                  </RadioGroup>
+                )
+              }}
+            </Field>
+            <Field
+              labelAlign="top"
+              label="孩子是否有学习过的乐器(有请备注)"
+              name="learningSubjectName"
+              placeholder="请输入学习过的乐器"
+            ></Field>
+
+            <Field
+              labelAlign="top"
+              label="选报声部1"
+              readonly
+              name="registerSubjectId"
+              placeholder="请选择选报声部1"
+            >
+              {{
+                'right-icon': () => <Icon name="arrow" color="#323233" size="16"></Icon>
+              }}
+            </Field>
+            <Field
+              labelAlign="top"
+              label="选报声部2"
+              readonly
+              name="standbyRegisterSubjectId"
+              placeholder="请选择选报声部2"
+            >
+              {{
+                'right-icon': () => <Icon name="arrow" color="#323233" size="16"></Icon>
+              }}
+            </Field>
+
+            <Field labelAlign="top" label="是否服从调配" name="adjust">
+              {{
+                input: () => (
+                  <div>
+                    <p class={styles.otherSubject}>
+                      (如果自选声部名额已满，是否愿意接受安排其他声部?)
+                    </p>
+
+                    <RadioGroup checked-color="#57ABF8" direction="horizontal">
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={'#57ABF8'}
+                        textColor="#FFF"
+                        class={styles['radioSection']}
+                      >
+                        <Radio class={styles['radioItem']} name={1} />
+                        愿意
+                      </Tag>
+                      <Tag
+                        size="large"
+                        type="primary"
+                        color={'#EAEAEA'}
+                        textColor="#AAA"
+                        class={styles['radioSection']}
+                      >
+                        <Radio class={styles['radioItem']} name={0} />
+                        不愿意
+                      </Tag>
+                    </RadioGroup>
+                  </div>
+                )
+              }}
+            </Field>
+          </CellGroup>
+
+          <CellGroup inset class={styles['cell-group']}>
+            <Field
+              labelAlign="top"
+              label="乐器参考表&Ai练习参考表"
+              border={false}
+              style="padding-bottom: 0;"
+            >
+              {{
+                input: () => <img src={forms.instrumentPriceImg} style="width: 100%" />
+              }}
+            </Field>
+
+            <Field labelAlign="top" label="乐器准备方式" name="instrumentsPrepareMode">
+              {{
+                input: () => (
+                  <RadioGroup checked-color="#57ABF8" direction="horizontal">
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#57ABF8'}
+                      textColor="#FFF"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={1} />
+                      自行购置
+                    </Tag>
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#EAEAEA'}
+                      textColor="#AAA"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={0} />
+                      希望基金会提供渠道购置
+                    </Tag>
+                  </RadioGroup>
+                )
+              }}
+            </Field>
+
+            <Field labelAlign="top" label="乐团学习系统准备方式" name="learningSystemPrepareMode">
+              {{
+                input: () => (
+                  <RadioGroup checked-color="#57ABF8" direction="horizontal">
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#57ABF8'}
+                      textColor="#FFF"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={1} />
+                      自行购置
+                    </Tag>
+                    <Tag
+                      size="large"
+                      type="primary"
+                      color={'#EAEAEA'}
+                      textColor="#AAA"
+                      class={styles['radioSection']}
+                    >
+                      <Radio class={styles['radioItem']} name={0} />
+                      希望基金会提供渠道购置
+                    </Tag>
+                  </RadioGroup>
+                )
+              }}
+            </Field>
+
+            <Field
+              labelAlign="top"
+              type="tel"
+              label="联系电话(直接监护人)"
+              name="phone"
+              placeholder="请输入监护人手机号码"
+            ></Field>
+          </CellGroup>
+
+          <Button
+            size="large"
+            block
+            round
+            class={styles['btn-submit']}
+            native-type="submit"
+          ></Button>
+        </Form>
+      </div>
+    )
+  }
+})

src/student/pre-register-active/compontent-show/video-show.tsx

@@ -0,0 +1,123 @@
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from '../video.module.less'
+import { Button } from 'vant'
+import { browser } from '@/helpers/utils'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import { useRoute } from 'vue-router'
+
+export default defineComponent({
+  name: 'pre-register',
+  emits: ['tabChange'],
+  setup(props, { emit }) {
+    const route = useRoute()
+    const forms = reactive({
+      coverImg: route.query.coverImg,
+      introductionVideo: route.query.introductionVideo,
+      player: null as any
+    })
+
+    /**
+     * 视屏累计时长
+     * 1、视屏开始播放时-开始计时
+     * 2、视频暂停时暂停-停止计时
+     * 3、视频加载时-停止计时
+     * 4、视频倍数播放时，时间正常计时
+     * 5、点击视频进度或拖动进度时，时间暂停
+     */
+    const _init = () => {
+      const controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'current-time',
+        'duration',
+        'settings',
+        'fullscreen'
+      ]
+      const params: any = {
+        controls: controls,
+        settings: ['speed'],
+        speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+        i18n: {
+          speed: '速度',
+          normal: '默认'
+        },
+        invertTime: false
+      }
+
+      if (browser().iPhone) {
+        params.fullscreen = {
+          enabled: true,
+          fallback: 'force',
+          iosNative: true
+        }
+      }
+
+      forms.player = new Plyr('#register-video', params)
+
+      forms.player.on('enterfullscreen', () => {
+        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', () => {
+          forms.player.fullscreen.exit()
+        })
+        console.log(document.getElementsByClassName('plyr'))
+        document.getElementsByClassName('plyr')[0].appendChild(i)
+      })
+
+      forms.player.on('exitfullscreen', () => {
+        console.log('exitfullscreen')
+        const i = document.getElementById('fullscreen-back')
+        i && i.remove()
+      })
+    }
+
+    onMounted(() => {
+      _init()
+    })
+
+    const onSubmit = () => {
+      emit('tabChange', 3)
+    }
+
+    return () => (
+      <div class={styles['pre-register-video']}>
+        <div class={styles.videoContainer}>
+          <div class={styles['video-content']}>
+            <video
+              id="register-video"
+              class={styles['video']}
+              src={forms.introductionVideo + '?time' + Date.now()}
+              playsinline={true}
+              poster={forms.coverImg}
+              preload="auto"
+            ></video>
+          </div>
+        </div>
+        <div class={styles.messageContainer}>
+          <div class={styles.messageContent}>
+            <p>家长您好！</p>
+            <p class={styles.c1}>
+              请家长们合理安排时间，<span>认真观看</span>家长会内容。在<span>详细了解</span>
+              所有要求后，有意向让孩子加入乐团的家长，请在<span>明晚20:00前</span>，为孩子完成
+              <span>乐团报名</span>
+            </p>
+            <p class={styles.c1}>
+              下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
+            </p>
+            <p class={styles.bottom}>
+              注：乐团于下学期正式开始训练，训练时间下 学期开学前另行通知，训练时间会与学校其他
+              社团错开，家长无需担心时间冲突问题。
+            </p>
+          </div>
+
+          <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+        </div>
+      </div>
+    )
+  }
+})

src/student/pre-register-active/index.module.less

@@ -41,7 +41,7 @@
   margin: 0 10px 20px;
   background: url('./images/signin-bg.png') no-repeat center;
   background-size: contain;
-  min-height: 336px;
+  min-height: 419px;
   overflow: hidden;
 
   .tips {

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

@@ -1,29 +1,178 @@
 import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
 import signinTips from './images/signin-tips.png'
-import { Button, CellGroup, Field, closeToast } from 'vant'
+import { Button, CellGroup, Field, Picker, Popup, closeToast, showToast } from 'vant'
 import { useRoute, useRouter } from 'vue-router'
 import OWxTip from '@/components/o-wx-tip'
 import { browser, getUrlCode } from '@/helpers/utils'
 import qs from 'query-string'
 import request from '@/helpers/request'
 import { goWechatAuth } from '@/state'
-
+import { useInterval, useIntervalFn } from '@vueuse/core'
+const classList: any[] = []
+for (let i = 1; i <= 40; i++) {
+  classList.push({ text: i + '班', value: i })
+}
 export default defineComponent({
   name: 'pre-register',
   setup() {
+    // 页面定时
+    const pageTimer = useInterval(1000, { controls: true })
+    pageTimer.pause()
     const router = useRouter()
     const route = useRoute()
     const forms = reactive({
       loading: true,
+      orchestraId: route.query.id,
       code: null,
-      player: null as any
+      currentGradeList: [
+        { text: '一年级', value: 1 },
+        { text: '二年级', value: 2 },
+        { text: '三年级', value: 3 },
+        { text: '四年级', value: 4 },
+        { text: '五年级', value: 5 }
+      ], // 年级数组列表
+      showPicker: false,
+      classPicker: false,
+      nameReg: /^[\u4E00-\u9FA5]+$/,
+      openId: '' as any,
+      id: null,
+      videoBrowseData: null,
+      videoBrowsePoint: null,
+      username: '',
+      currentGrade: '', // 年级
+      currentClass: '', // 班级
+      intervalFnRef: null as any
     })
 
-    const onSubmit = () => {
-      router.push('/pre-register-video')
+    const message = (value: string) => {
+      if (!value) {
+        return '请填写学生真实姓名'
+      } else if (!forms.nameReg.test(value)) {
+        return '学员姓名必须为中文'
+      } else if (value.length < 2 || value.length > 15) {
+        return '学员姓名必须为2~15个字'
+      }
     }
 
+    const onSubmit = async () => {
+      try {
+        if (message(forms.username)) {
+          showToast(message(forms.username))
+          return
+        }
+
+        if (!forms.currentGrade) {
+          showToast('请选择年级')
+          return
+        }
+
+        if (!forms.currentClass) {
+          showToast('请选择班级')
+          return
+        }
+        // 暂停回调
+        forms.intervalFnRef?.pause()
+        // 页面计时暂停
+        pageTimer.pause()
+        await request.post('/api-student/open/studentBrowseRecord/updateStat', {
+          data: {
+            id: forms.id,
+            pageBrowseTime: pageTimer.counter.value,
+            username: forms.username,
+            currentGrade: forms.currentGrade,
+            currentClass: forms.currentClass ? Number(forms.currentClass) : null
+          }
+        })
+
+        router.push({
+          path: '/pre-register-video',
+          query: {
+            saveId: forms.id,
+            id: forms.orchestraId, // 乐团编号
+            openId: forms.openId //
+          }
+        })
+      } catch {
+        // 还原
+        forms.intervalFnRef?.resume()
+        pageTimer.resume()
+      }
+      // router.push('/pre-register-video')
+    }
+
+    const formatterClass = (value: any, list: any[]) => {
+      let txt = ''
+      list.forEach((listItem: any) => {
+        if (listItem.value == value) {
+          txt = listItem.text
+        }
+      })
+      return txt
+    }
+
+    // 更新时间
+    const updateStat = async (pageBrowseTime = 10) => {
+      try {
+        await request.post('/api-student/open/studentBrowseRecord/updateStat', {
+          data: {
+            id: forms.id,
+            pageBrowseTime // 固定10秒
+          }
+        })
+      } catch {
+        //
+      }
+    }
+
+    onMounted(async () => {
+      try {
+        if (!forms.orchestraId) {
+          showToast('信息获取失败，请联系老师')
+        }
+        const { data } = await request.post('/api-student/open/school/detail', {
+          data: {
+            orchestraId: forms.orchestraId
+          }
+        })
+        const schoolSystem = data.schoolSystem || 'sixYearSystem'
+        if (schoolSystem === 'sixYearSystem') {
+          forms.currentGradeList.push({ text: '六年级', value: 6 })
+        }
+
+        // 判断是否获取微信code码
+        if (!forms.code) return
+        const recordAdd = await request.post('/api-student/open/studentBrowseRecord/add', {
+          data: {
+            orchestraId: forms.orchestraId,
+            code: forms.code,
+            openId: forms.openId
+          }
+        })
+        const recordObj = recordAdd.data
+        forms.currentClass = recordObj.currentClass
+        forms.currentGrade = recordObj.currentGrade
+        forms.openId = recordObj.openId
+        forms.username = recordObj.username
+        forms.videoBrowseData = recordObj.videoBrowseData
+        forms.videoBrowsePoint = recordObj.videoBrowsePoint
+        forms.id = recordObj.id
+
+        sessionStorage.setItem('active-open-id', recordObj.openId)
+
+        pageTimer.resume()
+        // 间隔10秒更新停留时间
+        forms.intervalFnRef = useIntervalFn(() => {
+          // 页面时间恢复
+          pageTimer.counter.value = 0
+          pageTimer.resume()
+          updateStat()
+        }, 10000)
+      } catch {
+        //
+      }
+    })
+
     const getAppIdAndCode = async (url?: string) => {
       try {
         const { data } = await request.get('/api-school/open/paramConfig/wechatAppId')
@@ -36,10 +185,11 @@ export default defineComponent({
         //
       }
     }
-    console.log(route.fullPath)
 
     if (browser().weixin) {
       //授权
+      const openId = sessionStorage.getItem('active-open-id')
+      forms.openId = openId
       const code = getUrlCode()
       if (!code) {
         const newUrl =
@@ -95,6 +245,17 @@ export default defineComponent({
               labelAlign="top"
               placeholder="请输入学生姓名"
               autocomplete="off"
+              v-model={forms.username}
+            />
+            <Field
+              label="年级"
+              labelAlign="top"
+              placeholder="请选择年级"
+              isLink
+              readonly
+              modelValue={formatterClass(forms.currentGrade, forms.currentGradeList)}
+              clickable={false}
+              onClick={() => (forms.showPicker = true)}
             />
             <Field
               label="班级"
@@ -102,7 +263,9 @@ export default defineComponent({
               placeholder="请选择班级"
               isLink
               readonly
+              modelValue={formatterClass(forms.currentClass, classList)}
               clickable={false}
+              onClick={() => (forms.classPicker = true)}
             />
 
             <Button class={styles.submitBtn} onClick={onSubmit}></Button>
@@ -111,6 +274,30 @@ export default defineComponent({
 
         {/* 是否在微信中打开 */}
         <OWxTip />
+
+        {/* 年级 */}
+        <Popup v-model:show={forms.showPicker} position="bottom" round>
+          <Picker
+            columns={forms.currentGradeList}
+            onCancel={() => (forms.showPicker = false)}
+            onConfirm={({ selectedValues }) => {
+              forms.currentGrade = selectedValues[0]
+              forms.showPicker = false
+            }}
+          />
+        </Popup>
+
+        {/* 班级 */}
+        <Popup v-model:show={forms.classPicker} position="bottom" round>
+          <Picker
+            columns={classList}
+            onCancel={() => (forms.classPicker = false)}
+            onConfirm={({ selectedValues }) => {
+              forms.currentClass = selectedValues[0]
+              forms.classPicker = false
+            }}
+          />
+        </Popup>
       </div>
     )
   }

src/student/pre-register-active/show.tsx

@@ -0,0 +1,32 @@
+import { defineComponent, reactive } from 'vue'
+import ActiveShow from './compontent-show/active-show'
+import VideoShow from './compontent-show/video-show'
+import RegisterShow from './compontent-show/register-show'
+
+export default defineComponent({
+  name: 'show-page',
+  setup() {
+    const forms = reactive({
+      tabIndex: 1
+    })
+    return () => (
+      <>
+        {forms.tabIndex === 1 && (
+          <ActiveShow
+            onTabChange={(index: number) => {
+              forms.tabIndex = index
+            }}
+          />
+        )}
+        {forms.tabIndex === 2 && (
+          <VideoShow
+            onTabChange={(index: number) => {
+              forms.tabIndex = index
+            }}
+          />
+        )}
+        {forms.tabIndex === 3 && <RegisterShow />}
+      </>
+    )
+  }
+})

src/student/pre-register-active/video.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
 import styles from './video.module.less'
 import poster from './images/video_bg.png'
 import { Button, Loading } from 'vant'
@@ -6,23 +6,83 @@ import { browser } from '@/helpers/utils'
 import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
 import { useInterval, useIntervalFn } from '@vueuse/core'
+import { useRoute, useRouter } from 'vue-router'
+import request from '@/helpers/request'
+import qs from 'query-string'
 
 export default defineComponent({
   name: 'pre-register',
   setup() {
-    // 播放视频总时长
-    const videoInterval = useInterval(1000, { controls: true })
-    videoInterval.pause()
+    const route = useRoute()
+    const router = useRouter()
+    const openId = sessionStorage.getItem('active-open-id')
+    // 页面定时
+    const pageTimer = useInterval(1000, { controls: true })
+    pageTimer.pause()
 
-    console.log(videoInterval)
-    // 间隔多少时间同步数据
-    // const { pause, resume, isActive } = useIntervalFn(() => {
-    // }, 10000)
     const forms = reactive({
-      loading: true,
-      player: null as any
+      coverImg: '',
+      introductionVideo: '',
+      videoBrowsePoint: 0,
+      saveId: route.query.saveId,
+      orchestraId: route.query.id,
+      openId: route.query.openId || openId,
+      loading: false,
+      player: null as any,
+      intervalFnRef: null as any
     })
 
+    // 播放视频总时长
+    const videoIntervalRef = useInterval(1000, { controls: true })
+    videoIntervalRef.pause()
+
+    /**
+     * 格式化视屏播放有效时间 - 合并区间
+     * @param intervals [[], []]
+     * @example [[4, 8],[0, 4],[10, 30]]
+     * @returns [[0, 8], [10, 30]]
+     */
+    const formatEffectiveTime = (intervals: any[]) => {
+      const res: any = []
+      intervals.sort((a, b) => a[0] - b[0])
+      let prev = intervals[0]
+      for (let i = 1; i < intervals.length; i++) {
+        const cur = intervals[i]
+        if (prev[1] >= cur[0]) {
+          // 有重合
+          prev[1] = Math.max(cur[1], prev[1])
+        } else {
+          // 不重合，prev推入res数组
+          res.push(prev)
+          prev = cur // 更新 prev
+        }
+      }
+      res.push(prev)
+      return res
+    }
+
+    /**
+     * 获取数据有效期
+     * @param intervals [[], []]
+     * @returns 0s
+     */
+    const formatTimer = (intervals: any[]) => {
+      const afterIntervals = formatEffectiveTime(intervals)
+      let time = 0
+      afterIntervals.forEach((t: any) => {
+        time += t[1] - t[0]
+      })
+      return time
+    }
+
+    /**
+     * 视屏累计时长
+     * 1、视屏开始播放时-开始计时
+     * 2、视频暂停时暂停-停止计时
+     * 3、视频加载时-停止计时
+     * 4、视频倍数播放时，时间正常计时
+     * 5、点击视频进度或拖动进度时，时间暂停
+     */
     const _init = () => {
       const controls = [
         'play-large',
@@ -56,23 +116,25 @@ export default defineComponent({
       forms.player = new Plyr('#register-video', params)
 
       forms.player.on('loadedmetadata', () => {
+        console.log('loadedmetadata')
         forms.loading = false
+
+        forms.player.currentTime = forms.videoBrowsePoint
       })
 
-      //
-      // forms.player.on('seeking', (val: any) => {
-      //   console.log('seeking')
-      // })
+      forms.player.on('seeking', (val: any) => {
+        console.log('seeking')
+      })
 
       // // 拖动结束时
-      // forms.player.on('seeked', (val: any) => {
-      //   console.log('seeked')
-      // })
+      forms.player.on('seeked', (val: any) => {
+        console.log('seeked')
+      })
 
       // 正在搜索中
       forms.player.on('waiting', () => {
         console.log('waiting')
-        videoInterval.pause()
+        videoIntervalRef.pause()
       })
 
       // 如何视频在缓存不会触发
@@ -80,27 +142,173 @@ export default defineComponent({
         console.log('timeupdate', forms.player.currentTime)
 
         // 判断视频计时器是否暂停，如果暂停则恢复
-        !videoInterval.isActive.value && videoInterval.resume()
+        // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+        if (
+          !videoIntervalRef.isActive.value &&
+          forms.player.currentTime > 0 &&
+          forms.player.playing
+        ) {
+          videoIntervalRef.resume()
+        }
       })
 
       // 开始播放
       forms.player.on('play', () => {
-        console.log('play')
         // 判断视频计时器是否暂停，如果暂停则恢复
-        !videoInterval.isActive.value && videoInterval.resume()
+        if (!videoIntervalRef.isActive.value) {
+          videoIntervalRef.resume()
+        }
       })
 
       // 暂停播放
       forms.player.on('pause', () => {
         console.log('pause')
 
-        videoInterval.pause()
+        videoIntervalRef.pause()
+      })
+
+      forms.player.on('enterfullscreen', () => {
+        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', () => {
+          forms.player.fullscreen.exit()
+        })
+        console.log(document.getElementsByClassName('plyr'))
+        document.getElementsByClassName('plyr')[0].appendChild(i)
+      })
+
+      forms.player.on('exitfullscreen', () => {
+        console.log('exitfullscreen')
+        const i = document.getElementById('fullscreen-back')
+        i && i.remove()
       })
     }
 
-    onMounted(() => {
-      _init()
+    // 保存零时时间
+    const moreTime: any = ref([]) // 多个观看时间段
+    let tempTime: any = [] // 临时存储时间
+    // 监听播放状态，
+    watch(
+      () => videoIntervalRef.isActive.value,
+      (newVal: boolean) => {
+        // console.log(newVal, 'videoIntervalRef.isActive.value in')
+        // console.log('watch', forms.player.currentTime)
+        // console.log('保留两个小数：', forms.player.currentTime.toFixed(2))
+        // console.log('向下取整：', Math.floor(forms.player.currentTime))
+        // console.log('向上取整：', Math.ceil(forms.player.currentTime))
+        // console.log('四舍五入：', Math.round(forms.player.currentTime))
+        if (newVal) {
+          tempTime[0] = Math.round(forms.player.currentTime)
+        } else {
+          tempTime[1] = Math.round(forms.player.currentTime)
+        }
+        console.log(tempTime.length, 'tempTime.length')
+        if (tempTime.length >= 2) {
+          moreTime.value.push(tempTime)
+          tempTime = []
+        }
+
+        // console.log('观看的时间', moreTime)
+      }
+    )
+
+    // 更新时间
+    const updateStat = async (pageBrowseTime = 10) => {
+      try {
+        const videoBrowseData = moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : []
+        const time = moreTime.value.length > 0 ? formatTimer(moreTime.value) : 0
+        const rate = Math.floor((time / forms.player.duration) * 100)
+        await request.post('/api-student/open/studentBrowseRecord/updateStat', {
+          data: {
+            id: forms.saveId,
+            pageBrowseTime, // 固定10秒
+            videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
+            videoBrowseDataTime: time || 0, // 视屏观看百分比时长
+            videoBrowsePercentage: rate || 0, // 视频观看百分比
+            videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
+            videoBrowsePoint: Math.floor(forms.player.currentTime || 0) // 视频最后观看点 - 向下取整
+          }
+        })
+      } catch {
+        //
+      }
+    }
+
+    // 提交
+    const onSubmit = async () => {
+      try {
+        // 暂停回调
+        forms.intervalFnRef?.pause()
+        // 页面计时暂停
+        pageTimer.pause()
+        // await updateStat()
+
+        // window.location.href =
+        //   window.location.origin +
+        //   window.location.pathname +
+        //   'preRegister.html?' +
+        //   qs.stringify({
+        //     orchestraId: forms.orchestraId,
+        //     openId: forms.openId
+        //   })
+
+        window.location.href =
+          window.location.origin +
+          '/project/preRegister.html?' +
+          qs.stringify({
+            orchestraId: forms.orchestraId,
+            openId: forms.openId
+          })
+      } catch (e) {
+        console.log(e, 'e')
+        // 还原
+        forms.intervalFnRef?.resume()
+        pageTimer.resume()
+      }
+    }
+
+    onMounted(async () => {
+      try {
+        const { data } = await request.get('/api-student//open/studentBrowseRecord/query', {
+          params: {
+            openId: forms.openId,
+            orchestraId: forms.orchestraId
+          }
+        })
+        forms.videoBrowsePoint = data.videoBrowsePoint || 0
+        if (forms.player) {
+          forms.player.currentTime = data.videoBrowsePoint || 0
+        }
+        forms.introductionVideo = data.introductionVideo
+        forms.coverImg = data.coverImg
+        console.log(data)
+        moreTime.value = data.videoBrowseData ? JSON.parse(data.videoBrowseData) : []
+
+        _init()
+        // 间隔多少时间同步数据
+        forms.intervalFnRef = useIntervalFn(async () => {
+          // 页面时间恢复
+          pageTimer.counter.value = 0
+          pageTimer.resume()
+          await updateStat()
+          videoIntervalRef.counter.value = 0
+        }, 10000)
+      } catch {
+        //
+      }
     })
+
+    // 判断是否有openId
+    if (!forms.openId) {
+      router.replace({
+        path: '/pre-register-video',
+        query: {
+          id: forms.orchestraId
+        }
+      })
+    }
     return () => (
       <div class={styles['pre-register-video']}>
         <div class={styles.videoContainer}>
@@ -108,9 +316,9 @@ export default defineComponent({
             <video
               id="register-video"
               class={styles['video']}
-              src={'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4?time' + Date.now()}
+              src={forms.introductionVideo + '?time' + Date.now()}
               playsinline={true}
-              poster={poster}
+              poster={forms.coverImg}
               preload="auto"
             ></video>
             {/* 加载视频使用 */}
@@ -128,7 +336,6 @@ export default defineComponent({
             )}
           </div>
         </div>
-
         <div class={styles.messageContainer}>
           <div class={styles.messageContent}>
             <p>家长您好！</p>
@@ -140,14 +347,13 @@ export default defineComponent({
             <p class={styles.c1}>
               下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
             </p>
-
             <p class={styles.bottom}>
               注：乐团于下学期正式开始训练，训练时间下 学期开学前另行通知，训练时间会与学校其他
               社团错开，家长无需担心时间冲突问题。
             </p>
           </div>
 
-          <Button class={styles.submitBtn}></Button>
+          <Button class={styles.submitBtn} onClick={onSubmit}></Button>
         </div>
       </div>
     )