添加预报名页面UI

public/project/css/preRegister.css

@@ -9,7 +9,7 @@ span {
 }
 
 #app {
-  background: url('../images/initiation/banner1.png') no-repeat top center #EEE1FF;
+  background: url('../images/preRegister/banner.png') no-repeat top center #C7F4FF;
   background-size: contain;
   max-width: 750px;
   margin: 0 auto;
@@ -52,6 +52,10 @@ span {
 .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 {
@@ -73,33 +77,39 @@ span {
 
 .van-form {
   /* margin-top: 164px; */
-  background: linear-gradient(180deg, rgba(238, 225, 255, 0) 0%, #EEE1FF 100%);
+  /* background: linear-gradient(180deg, rgba(238, 225, 255, 0) 0%, #EEE1FF 100%); */
   overflow: hidden;
 }
 
 .top-tips {
-  margin: 30px 13px 20px;
-  padding: 9px 7px;
+  position: relative;
+  margin: 30px 12px 20px;
+  padding: 40px 18px 20px;
   background: #FFFFFF;
   border-radius: 10px;
-  border: 5px solid #BE93FF;
-  font-size: 14px;
-  font-weight: 500;
-  color: #724DA9;
+  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 {
-  text-shadow: 0px 2px 3px #704CA7;
-  /* position: absolute; */
   font-size: 26px;
   line-height: 37px;
   color: #ffffff;
-  /* top: 0; */
-  /* left: 24px; */
   width: 57%;
   padding-left: 24px;
-  height: 154px;
+  height: 128px;
   margin-bottom: 10px;
   display: flex;
   justify-content: center;
@@ -110,8 +120,9 @@ span {
 
 .radioSection {
   position: relative;
+  font-size: 14px;
   min-width: 32px;
-    justify-content: center;
+  justify-content: center;
 }
 
 .radioItem {
@@ -128,24 +139,29 @@ span {
 }
 
 .van-picker__confirm {
-  color: #9A64FF;
+  color: #57ABF8;
+}
+
+.otherSubject {
+  font-size: 12px;
+  font-weight: 500;
+  color: #AAAAAA;
+  line-height: 17px;
+  padding-bottom: 13px;
 }
 
 /* 弹窗 */
 .submit-container {
-  /* padding: 44px 26px 26px; */
   position: relative;
   text-align: center;
   margin: 0 auto;
-  background: url('../images/initiation/p-popup-banner.png') no-repeat top center;
-  background-size: cover;
-  /* width: 8rem;
-  height: 9.38rem; */
+  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: 5.2rem;
+  padding-top: 4.2rem;
   padding-bottom: 10px;
   font-size: 18px;
   font-weight: 500;
@@ -155,10 +171,10 @@ span {
   font-size: 15px;
   color: #777777;
   line-height: 20px;
-  padding-bottom: 20px;
+  padding-bottom: 12px;
 }
 .submit-btn {
-  background: url('../images/initiation/p-popup-btn.png') no-repeat center center;
+  background: url('../images/preRegister/p-popup-btn.png') no-repeat center center;
   background-size: contain;
   width: 3.547rem;
   height: 1rem;
@@ -192,7 +208,7 @@ span {
   background-size: cover;
   border-radius: 20px;
   overflow: hidden;
-  
+
 }
 .popupContainer .title1 {
   padding-top: 57px;

public/project/preRegister.html

@@ -179,50 +179,28 @@
     <div class="m-toast__text">加载中...</div>
   </div>
   <div id="app">
-    <!-- <div class="banner">
-      <img src="./images/initiation/banner.png" alt="">
-    </div> -->
-    <div class="title" v-clock v-html="(orchestraName || '') + '首轮报名'"></div>
+    <div class="title" v-clock v-html="(orchestraName || '') + '管乐团报名申请'"></div>
 
     <van-form validate-first scroll-to-error @submit="onSubmit" ref='form' class="form">
-      <div class="top-tips">科学的教育与关爱，足以改变世界。我们希望，学员的未来会因您和我们的共同努力而更加光辉灿烂！</div>
+      <div class="top-tips">
+        1、为了保障乐团顺利组建，避免名额浪费；请家长与孩子以自愿为原则，在确认意向后填写相关信息；专业老师将根据家长的相关填报，确认孩子是否能够加入乐团；<br />
+        2、自用乐器及课后练习，家长自愿选择准备方式。
+      </div>
       <van-cell-group inset class="cell-group">
-        <van-field type="tel" @blur='checkchangePhone' maxlength="11" minlength="11" label="联系电话(直接监护人)"
-          v-model="stu.phone" name="phone" :rules="[{ pattern, message: '输入监护人手机号码有误' }]" placeholder="请输入监护人手机号码">
-        </van-field>
-        <van-field label="学员姓名" :rules="[{ validator, message }]" name="username" v-model="stu.username"
-          placeholder="请填写学员真实姓名"></van-field>
         <van-field label="性别" name="sex" :rules="[{ required: true, message: '请选择性别' }]">
           <template #input>
-            <van-radio-group v-model="stu.sex" checked-color="#9A64FF" direction="horizontal">
-              <van-tag size="large" type="primary" :color="!(stu.sex === 1) ? '#EAEAEA' : '#9A64FF'"
-                :text-color="!(stu.sex === 1) ? '#AAA' : '#FFF'" class="radioSection" round>
+            <van-radio-group v-model="stu.sex" checked-color="#57ABF8" direction="horizontal">
+              <van-tag size="large" type="primary" :color="!(stu.sex === 1) ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.sex === 1) ? '#AAA' : '#FFF'" class="radioSection">
                 <van-radio class="radioItem" :name="1"></van-radio>男生
               </van-tag>
-              <van-tag size="large" type="primary" :color="!(stu.sex === 0) ? '#EAEAEA' : '#9A64FF'"
-                :text-color="!(stu.sex === 0) ? '#AAA' : '#FFF'" class="radioSection" round>
+              <van-tag size="large" type="primary" :color="!(stu.sex === 0) ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.sex === 0) ? '#AAA' : '#FFF'" class="radioSection">
                 <van-radio class="radioItem" :name="0"></van-radio>女生
               </van-tag>
             </van-radio-group>
           </template>
         </van-field>
-        <van-field label="在读年级" v-model="stu.currentGrade" readonly name="currentGrade"
-          :rules="[{ required: true, message: '请选择在读年级', trigger: 'onChange' }]" @click="pickerChange"
-          placeholder="请选择在读年级">
-          <template #right-icon>
-            <van-icon name="arrow" :color="'#323233'" size="16"></van-icon>
-          </template>
-        </van-field>
-        <van-field label="所在班级" v-model="stu.currentClass" readonly name="currentClass"
-          :rules="[{ required: true, message: '请选择所在班级', trigger: 'onChange' }]" @click="pickerChange1"
-          placeholder="请选择所在班级">
-          <template #right-icon>
-            <van-icon name="arrow" :color="'#323233'" size="16"></van-icon>
-          </template>
-        </van-field>
-      </van-cell-group>
-
-      <van-cell-group inset class="cell-group">
         <van-field label="首选声部" v-model="stu.registerSubjectId" readonly name="registerSubjectId"
           :rules="[{ required: true, message: '请选择首选声部', trigger: 'onChange' }]" @click="pickerChange2"
           placeholder="请选择首选声部">
@@ -238,18 +216,47 @@
           </template>
         </van-field>
 
+        <van-field label="是否服从调配" name="instrumentsPrepareMode" :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-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>
+              </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%" />
+          </template>
+        </van-field>
+
         <van-field label="乐器准备方式" name="instrumentsPrepareMode" :rules="[{ required: true, message: '请选择乐器准备方式' }]">
           <template #input>
-            <van-radio-group v-model="stu.instrumentsPrepareMode" checked-color="#9A64FF" direction="horizontal">
+            <van-radio-group v-model="stu.instrumentsPrepareMode" checked-color="#57ABF8" direction="horizontal">
               <van-tag size="large" type="primary"
-                :color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE')  ? '#EAEAEA' : '#9A64FF'"
-                :text-color="!(stu.instrumentsPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'" class="radioSection"
-                round>
+                :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-tag size="large" type="primary"
-                :color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#EAEAEA' : '#9A64FF'"
-                :text-color="!(stu.instrumentsPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" class="radioSection" round>
+                :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-radio-group>
@@ -259,26 +266,28 @@
         <van-field label="乐团学习系统准备方式" name="learningSystemPrepareMode"
           :rules="[{ required: true, message: '请选择乐团学习系统准备方式' }]">
           <template #input>
-            <van-radio-group v-model="stu.learningSystemPrepareMode" checked-color="#9A64FF" direction="horizontal">
+            <van-radio-group v-model="stu.learningSystemPrepareMode" checked-color="#57ABF8" direction="horizontal">
               <van-tag size="large" type="primary"
-                :color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#EAEAEA' : '#9A64FF'"
+                :color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#EAEAEA' : '#57ABF8'"
                 :text-color="!(stu.learningSystemPrepareMode === 'GROUP_PURCHASE') ? '#AAA' : '#FFF'"
-                class="radioSection" round>
+                class="radioSection">
                 <van-radio class="radioItem" name="GROUP_PURCHASE"></van-radio>团购
               </van-tag>
               <van-tag size="large" type="primary"
-                :color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#EAEAEA' : '#9A64FF'"
-                :text-color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" :color="'#9A64FF'"
-                class="radioSection" round>
+                :color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#EAEAEA' : '#57ABF8'"
+                :text-color="!(stu.learningSystemPrepareMode === 'ONESELF') ? '#AAA' : '#FFF'" :color="'#57ABF8'"
+                class="radioSection">
                 <van-radio class="radioItem" name="ONESELF"></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>
       </van-cell-group>
 
-      <van-button size="large" block round class="btn-submit" color="#9A64FF" :loading="btnLoading"
-        native-type="submit">提交</van-button>
+      <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>
@@ -301,7 +310,7 @@
       style="width: 100%;background-color: transparent;transform: translateY(-60%);" :close-on-click-overlay="false">
       <div class="submit-container">
         <p class="submit-title">提交成功</p>
-        <p class="submit-tips">您已完成乐团预报名</p>
+        <p class="submit-tips">谢谢您的参与，请留意乐团的<br />后续通知！</p>
         <div @click="onLinkUrl" class="submit-btn"></div>
       </div>
     </van-popup>
@@ -380,8 +389,8 @@
 
         // 判断是否是微信，只能微信中打开
         if (!browser().weixin) {
-          this.showPopup = true
-          return
+          // this.showPopup = true
+          // return
         } else {
           //授权
           const code = getUrlCode()
@@ -427,8 +436,10 @@
           }
 
           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.canSignUp = orchestraDetail.data.data.status
             if (orchestraDetail.data.data.status !== 'PRE_REGISTER') {
               vant.showToast('乐团预报名阶段已结束')
@@ -439,7 +450,7 @@
           vant.showDialog({
             message: '信息获取失败，请联系老师',
             theme: 'round-button',
-            confirmButtonColor: '#9A64FF'
+            confirmButtonColor: '#57ABF8'
           })
         }
         this.setLoading(false)

src/components/o-wx-tip/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'o-wx-tip',
+  setup() {
+    return () => <>微信弹窗</>
+  }
+})

src/router/routes-student.ts

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

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

@@ -1,53 +1,114 @@
-.video-container {
+.per-register-active {
+  min-height: calc(100vh - 176px);
+  background: url('./images/banner.png') no-repeat top center #C7F4FF;
+  background-size: contain;
+  padding-top: 176px;
+  overflow: hidden;
+}
+
+.flowPath {
   position: relative;
-  width: 100%;
-  --plyr-color-main: #FF8057;
+  margin: 0 10px 3px;
+  background: url('./images/flow-path-bg.png') no-repeat center;
+  background-size: contain;
 
-  video {
-    width: 100%;
-    // object-fit: cover;
+  .flowPathTitle {
+    display: block;
+    position: absolute;
+    top: -4px;
+    left: 50%;
+    margin-left: -72px;
+    width: 144px;
+    height: 42px;
+    background: url('./images/flow-path-title.png') no-repeat center;
+    background-size: contain;
   }
 
-  :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;
+  .flowPathContent {
+    padding: 41px 43px 43px;
+    font-size: 14px;
+    color: #2D1A18;
+    line-height: 26px;
+
+    span {
+      color: #E15339;
     }
+  }
+}
+
+.signin {
+  position: relative;
+  margin: 0 10px 20px;
+  background: url('./images/signin-bg.png') no-repeat center;
+  background-size: contain;
+  min-height: 336px;
+  overflow: hidden;
 
-    .plyr__poster {
-      background-size: cover;
+  .tips {
+    margin: 27px 35px 0;
+    display: flex;
+    align-items: center;
+    background: #F1F1F1;
+    border-radius: 6px;
+    font-size: 13px;
+    color: #DC2A00;
+    line-height: 18px;
+
+    p {
+      padding-top: 2px;
     }
 
-    .plyr__control--overlaid {
-      border: 1px solid #fff;
-      background-color: rgba(0, 0, 0, 0.2) !important;
+    span {
+      font-weight: bold;
     }
 
-    .plyr--video .plyr__control:hover {
-      background-color: transparent !important;
+    .signinTips {
+      margin: 0 2px 0 4px;
+      width: 34px;
+      height: 28px;
+      object-fit: contain;
     }
   }
+}
 
-  .video {
-    position: relative;
+.cellGroup {
+  margin: 0 40px;
+  background-color: transparent;
+
+  :global {
+    .van-cell {
+      padding-top: 18px;
+      padding-left: 0;
+      padding-right: 0;
+      background-color: transparent;
+    }
+
+    .van-field__label {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+      margin-bottom: 10px;
+    }
+
+    input {
+      color: #666;
+      font-size: 16px;
+
+      &::placeholder {
+        color: #dcdcdc;
+      }
+    }
   }
-}
 
-.loadingVideo {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.9);
-  z-index: 10;
+  .submitBtn {
+    width: 190px;
+    height: 53px;
+    background: url('./images/signin-btn.png') no-repeat center;
+    background-size: contain;
+    border: none;
+    display: block;
+    margin: 18px auto 0;
+    border-radius: 50px;
+  }
 }

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

@@ -1,114 +1,73 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onMounted, reactive } from 'vue'
 import styles from './index.module.less'
-import poster from './images/video_bg.png'
-import { Loading } from 'vant'
-import { browser } from '@/helpers/utils'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
-import { useInterval, useIntervalFn } from '@vueuse/core'
+import signinTips from './images/signin-tips.png'
+import { Button, CellGroup, Field } from 'vant'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'pre-register',
   setup() {
-    // 进入页面停留计时  { counter, resume, pause }
-    // const pageInterval = useInterval(1000, { controls: true })
-
-    // 间隔多少时间同步数据
-    // const { pause, resume, isActive } = useIntervalFn(() => {
-    // }, 10000)
+    const router = useRouter()
     const forms = reactive({
       loading: true,
       player: null as any
     })
 
-    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)
+    // onMounted(() => {})
 
-      forms.player.on('loadedmetadata', () => {
-        forms.loading = false
-      })
-
-      //
-      forms.player.on('seeking', (val: any) => {
-        console.log('seeking')
-      })
-
-      // 拖动结束时
-      forms.player.on('seeked', (val: any) => {
-        console.log('seeked')
-      })
+    const onSubmit = () => {
+      router.push('/pre-register-video')
+    }
+    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>
 
-      // 正在搜索中
-      forms.player.on('waiting', () => {
-        console.log('waiting')
-      })
+        <div class={styles.signin}>
+          <div class={styles.tips}>
+            <img src={signinTips} class={styles.signinTips} />
+            <p>
+              请先进行<span>签到</span>，再观看<span>管乐团家长会视频</span>
+            </p>
+          </div>
 
-      // 如何视频在缓存不会触发
-      forms.player.on('timeupdate', (val: any) => {
-        console.log('timeupdate', forms.player.currentTime)
-      })
-    }
+          <CellGroup class={styles.cellGroup} border={false}>
+            <Field
+              label="学生姓名"
+              labelAlign="top"
+              placeholder="请输入学生姓名"
+              autocomplete="off"
+            />
+            <Field
+              label="班级"
+              labelAlign="top"
+              placeholder="请选择班级"
+              isLink
+              readonly
+              clickable={false}
+            />
 
-    onMounted(() => {
-      _init()
-    })
-    return () => (
-      <div
-        style={{
-          paddingTop: '20vh'
-        }}
-      >
-        <div class={styles['video-container']}>
-          <video
-            id="register-video"
-            class={styles['video']}
-            src={'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'}
-            playsinline={true}
-            poster={poster}
-            preload="auto"
-          ></video>
-          {/* 加载视频使用 */}
-          {forms.loading && (
-            <div class={styles.loadingVideo}>
-              <Loading
-                size={36}
-                color="#FF8057"
-                vertical
-                style={{ height: '100%', justifyContent: 'center' }}
-              >
-                加载中...
-              </Loading>
-            </div>
-          )}
+            <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+          </CellGroup>
         </div>
       </div>
     )

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

@@ -0,0 +1,121 @@
+.pre-register-video {
+  min-height: calc(100vh - 176px);
+  background: url('./images/banner.png') no-repeat top center #C7F4FF;
+  background-size: contain;
+  padding-top: 160px;
+  overflow: hidden;
+}
+
+.videoContainer {
+  position: relative;
+  margin: 0 6px;
+  background: url('./images/video-bg.png') no-repeat center;
+  background-size: contain;
+  min-height: 265px;
+  overflow: hidden;
+}
+
+.video-content {
+  position: relative;
+  width: 100%;
+  --plyr-color-main: #FF8057;
+  width: 310px;
+  height: 182px;
+  border-radius: 30px;
+  overflow: hidden;
+  margin: 28px auto;
+
+
+  video {
+    width: 100%;
+    // object-fit: cover;
+  }
+
+  :global {
+    .plyr {
+      height: 100%;
+    }
+
+    .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;
+    }
+
+    .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 {
+    position: relative;
+  }
+}
+
+.loadingVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}
+
+.messageContainer {
+  margin: 0 10px 20px;
+  background: url('./images/message-bg.png') no-repeat center;
+  background-size: contain;
+  min-height: 440px;
+
+  .messageContent {
+    padding: 26px 32px;
+    font-size: 14px;
+    color: #2D1A18;
+    line-height: 26px;
+
+    p {
+      text-align: justify;
+    }
+
+    .c1 {
+      text-indent: 2em;
+    }
+  }
+
+  .bottom {
+    padding-top: 30px;
+
+    span {
+      color: #DD3210;
+    }
+  }
+}
+
+.submitBtn {
+  width: 190px;
+  height: 53px;
+  background: url('./images/pre-btn.png') no-repeat center;
+  background-size: contain;
+  border: none;
+  display: block;
+  margin: 0 auto;
+  border-radius: 50px;
+}

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

@@ -0,0 +1,153 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import styles from './video.module.less'
+import poster from './images/video_bg.png'
+import { Button, Loading } from 'vant'
+import { browser } from '@/helpers/utils'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import { useInterval, useIntervalFn } from '@vueuse/core'
+
+export default defineComponent({
+  name: 'pre-register',
+  setup() {
+    // 播放视频总时长
+    const videoInterval = useInterval(1000, { controls: true })
+    videoInterval.pause()
+
+    console.log(videoInterval)
+    // 间隔多少时间同步数据
+    // const { pause, resume, isActive } = useIntervalFn(() => {
+    // }, 10000)
+    const forms = reactive({
+      loading: true,
+      player: null as any
+    })
+
+    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('loadedmetadata', () => {
+        forms.loading = false
+      })
+
+      //
+      // forms.player.on('seeking', (val: any) => {
+      //   console.log('seeking')
+      // })
+
+      // // 拖动结束时
+      // forms.player.on('seeked', (val: any) => {
+      //   console.log('seeked')
+      // })
+
+      // 正在搜索中
+      forms.player.on('waiting', () => {
+        console.log('waiting')
+        videoInterval.pause()
+      })
+
+      // 如何视频在缓存不会触发
+      forms.player.on('timeupdate', () => {
+        console.log('timeupdate', forms.player.currentTime)
+
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        !videoInterval.isActive.value && videoInterval.resume()
+      })
+
+      // 开始播放
+      forms.player.on('play', () => {
+        console.log('play')
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        !videoInterval.isActive.value && videoInterval.resume()
+      })
+
+      // 暂停播放
+      forms.player.on('pause', () => {
+        console.log('pause')
+
+        videoInterval.pause()
+      })
+    }
+
+    onMounted(() => {
+      _init()
+    })
+    return () => (
+      <div class={styles['pre-register-video']}>
+        <div class={styles.videoContainer}>
+          <div class={styles['video-content']}>
+            <video
+              id="register-video"
+              class={styles['video']}
+              src={'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4?time' + Date.now()}
+              playsinline={true}
+              poster={poster}
+              preload="auto"
+            ></video>
+            {/* 加载视频使用 */}
+            {forms.loading && (
+              <div class={styles.loadingVideo}>
+                <Loading
+                  size={36}
+                  color="#FF8057"
+                  vertical
+                  style={{ height: '100%', justifyContent: 'center' }}
+                >
+                  加载中...
+                </Loading>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div class={styles.messageContainer}>
+          <div class={styles.messageContent}>
+            <p>家长您好！</p>
+            <p class={styles.c1}>
+              学校管乐团正式筹备组建。请家长们合理安排时间观看家长会视频。并在明晚20:00前，进行意向确认（不想参与的，勾选“无意向”即可）。
+            </p>
+            <p class={styles.c1}>
+              下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
+            </p>
+
+            <p class={styles.bottom}>
+              <span>注：</span>乐团于<span>下学期</span>正式开始训练，训练时间下学期开学前另行通知，
+              <span>训练时间会与学校相关社团时间错开</span>，家长无需担心时间冲突问题。
+            </p>
+          </div>
+
+          <Button class={styles.submitBtn}></Button>
+        </div>
+      </div>
+    )
+  }
+})