修改播放逻辑

src/views/student-register/index.module.less

@@ -15,8 +15,13 @@
 
 
   .video-content {
-    width: 100%;
-    height: 300px;
+    margin: 16px 14px 2px;
+    padding: 6px;
+    background: linear-gradient(270deg, #5BBEFC 0%, #5CC9FF 100%), #5BBEFC;
+    border-radius: 16px;
+    height: 171.125px;
+    // 154.125
+    box-sizing: content-box;
 
     .coverImg {
       width: 100%;
@@ -51,6 +56,10 @@
         overflow: hidden;
       }
 
+      .vjs-poster {
+        background-size: cover;
+      }
+
 
       .plyr__poster {
         background-size: cover;
@@ -71,7 +80,7 @@
       }
 
       .tcp-skin .vjs-play-progress {
-        background-color: var(--van-primary) !important;
+        background-color: #fff !important;
       }
 
       .vjs-slider:focus {
@@ -257,7 +266,8 @@
   }
 
   .title1,
-  .title3 {
+  .title3,
+  .title4 {
     width: 212px;
     height: 22px;
     background: url('./images/new/title-7.png') no-repeat center;
@@ -278,6 +288,11 @@
     background-size: contain;
   }
 
+  .title4 {
+    background: url('./images/new/title-8.png') no-repeat center;
+    background-size: contain;
+  }
+
   .goodsGroup {
     display: flex;
     align-items: center;
@@ -350,6 +365,41 @@
       // }
     }
   }
+
+  .goodsTypeGroup {
+    padding-top: 14px;
+
+    .showImg {
+      height: 100px;
+      // width: 100%
+    }
+
+    .memberNumer {
+      margin: 14px 0 0;
+      background: #E8F8FF;
+      border-radius: 8px;
+      padding: 8px 0 8px 10px;
+      display: flex;
+      align-items: center;
+      // font-weight: 600;
+      font-size: 13px;
+      color: #131415;
+      line-height: 18px;
+
+      .iconGift {
+        width: 18px;
+        height: 18px;
+        margin-right: 6px;
+      }
+
+      span {
+        font-size: 15px;
+        color: #F62C2C;
+        padding: 0 5px;
+        font-weight: 600;
+      }
+    }
+  }
 }
 
 .registerForm {
@@ -360,38 +410,20 @@
   overflow: hidden;
 
   .selectStudentGroup {
-    background: #EDF6FD;
-    border-radius: 8px;
-    margin: 20px 14px 0;
-    padding: 8px 0;
-    font-weight: 600;
-    font-size: 16px;
+    margin-left: 10px;
+    font-size: 14px;
     color: #1189FF;
-    // line-height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    .studentIcon {
-      display: inline-block;
-      margin-right: 6px;
-      width: 20px;
-      height: 20px;
-      background: url('./images/new/icon-n-5.png') no-repeat center;
-      background-size: contain;
-
-      &.selectStudentGroupChecked {
-        span::after {
-          transform: rotate(180deg);
-        }
-      }
-
-      &.studentIconAdd {
-        background: url('./images/new/icon-n-4.png') no-repeat center;
-        background-size: contain;
+    &.selectStudentGroupChecked {
+      span::after {
+        transform: rotate(180deg);
       }
     }
 
+
     span {
       display: flex;
       align-items: center;
@@ -402,7 +434,7 @@
         content: '';
         width: 9px;
         height: 5px;
-        margin-left: 5px;
+        margin-left: 4px;
         background: url('./images/new/icon-n-6.png') no-repeat center;
         background-size: contain;
       }

src/views/student-register/index.tsx

@@ -48,12 +48,14 @@ import MDialog from '@/components/m-dialog';
 // import f3 from './images/new/f-3.png';
 // import iconTip2 from './images/new/icon-tip2.png';
 // import functionBg from './images/new/function-bg.png';
-import tuangou from './images/new/tuangou.png';
+// import tuangou from './images/new/tuangou.png';
 import icon3 from './images/new/icon-3.png';
-import icon5 from './images/new/icon-7.png';
-import icon6 from './images/new/icon-6.png';
+// import icon5 from './images/new/icon-7.png';
+// import icon6 from './images/new/icon-6.png';
 import giftTip from './images/new/icon-4.png';
 import iconGift from './images/new/icon-gift.png';
+import icon10 from './images/new/icon-n-10.png';
+import icon11 from './images/new/icon-n-11.png';
 import dayjs from 'dayjs';
 // import MMessageTip from '@/components/m-message-tip';
 import { CurrentTime, useCountDown, usePageVisibility } from '@vant/use';
@@ -1186,20 +1188,12 @@ export default defineComponent({
           moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : [];
         const time =
           videoBrowseData.length > 0 ? formatTimer(videoBrowseData) : 0;
-        console.log(moreTime.value, videoBrowseData, 'video', time);
+        // console.log(moreTime.value, videoBrowseData, 'video', time);
         // const videoCountTime = videoIntervalRef?.counter.value
         // 判断 视屏播放时间大于视屏播放有效时间则说明数据有问题，进行重置数据
         const rate = Math.floor(
           (time / Math.floor(videoForms.player.duration())) * 100
         );
-        console.log({
-          useTime: pageBrowseTime, // 固定5秒
-          videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
-          videoBrowseDataTime: time || 0, // 有效的视频观看时长
-          videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
-          videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
-          videoBrowsePoint: Math.floor(videoForms.player.currentTime() || 0) // 视频最后观看点 - 向下取整
-        });
         const { data } = await requestStudent.post(
           '/edu-app/open/studentRegisterPointRecord/update',
           {
@@ -1209,7 +1203,6 @@ export default defineComponent({
               joinType,
               userId,
               schoolId,
-              // pageBrowseTime, // 固定10秒
               videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
               videoBrowseDataTime: time || 0, // 有效的视频观看时长
               videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
@@ -1284,7 +1277,7 @@ export default defineComponent({
       BigPlayButton.prototype.createEl = function () {
         const el = Button.prototype.createEl.call(this);
         const _html =
-          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>';
+          '<button><svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle stroke="#FFFFFF" stroke-width="1.0112392" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="21" cy="21" r="20.5056196"></circle><g  transform="translate(13.000000, 12.000000)" fill="#FFFFFF"><path d="M11.7432433,3.46351367 L18.2071084,14.4520843 C18.7734418,15.4148511 18.4520691,16.6544316 17.4893024,17.2207649 C17.1784947,17.403593 16.8244584,17.5 16.4638651,17.5 L3.53613489,17.5 C2.41915092,17.5 1.51365649,16.5945056 1.51365649,15.4775216 C1.51365649,15.1169283 1.6100635,14.762892 1.79289156,14.4520843 L8.25675667,3.46351367 C8.82309003,2.50074696 10.0626705,2.17937423 11.0254373,2.74570759 C11.3218389,2.92006148 11.5688894,3.16711204 11.7432433,3.46351367 Z" id="三角形" transform="translate(10.000000, 9.000000) rotate(-270.000000) translate(-10.000000, -9.000000) "></path></g></g></svg></button>';
 
         el.appendChild(
           TCPlayer.dom.createEl('div', {
@@ -1304,7 +1297,9 @@ export default defineComponent({
           videoForms.introductionVideo ||
             'https://oss.dayaedu.com/ktqy/1712800085691.mp4'
         ); // url 播放地址
-        // videoForms.player.poster(videoForms.coverImg || '');
+        videoForms.player.poster(
+          'https://oss.dayaedu.com/ktqy/171576482871330140d66.png'
+        );
 
         videoForms.player.on('ready', (item: any) => {
           // console.log('ready', item);
@@ -1343,15 +1338,9 @@ export default defineComponent({
 
         // 如何视频在缓存不会触发
         videoForms.player.on('timeupdate', () => {
-          console.log('timeupdate', videoForms.player.currentTime());
+          // console.log('timeupdate', videoForms.player.currentTime());
           // 判断视频计时器是否暂停，如果暂停则恢复
           // 添加 「videoForms.player.playing」 是由会跳转到上次播放时间，会触发些方法
-          console.log(
-            videoIntervalRef.isActive.value,
-            videoForms.player.currentTime(),
-            videoForms.player.paused(),
-            'timeupdate'
-          );
           if (
             !videoIntervalRef.isActive.value &&
             videoForms.player.currentTime() > 0 &&
@@ -1614,25 +1603,30 @@ export default defineComponent({
             </div>
           )}
 
-          <div class={styles['video-content']}>
-            <video
-              id="register-video"
-              class={styles['video']}
-              src={'https://oss.dayaedu.com/ktqy/1712800085691.mp4'}
-              playsinline={true}
-              // poster={forms.coverImg}
-              preload="auto"></video>
+          <div class={[styles.studentSection, styles.studentSectionForm]}>
+            <div class={styles.title4}></div>
+            <div class={styles['video-content']}>
+              <video
+                id="register-video"
+                class={styles['video']}
+                src={'https://oss.dayaedu.com/ktqy/1712800085691.mp4'}
+                playsinline={true}
+                poster={
+                  'https://oss.dayaedu.com/ktqy/171576482871330140d66.png'
+                }
+                preload="auto"></video>
+            </div>
           </div>
 
           <div
             class={[
               styles.studentSection,
               styles.studentSectionForm,
-              styles.noSendDay
+              forms.giftVipDay <= 0 && styles.noSendDay
             ]}
             // style={{ display: 'none' }}
           >
-            <div class={styles.title3}></div>
+            <div class={styles.title1}></div>
 
             <Form labelAlign="left" class={styles.registerForm}>
               <Field
@@ -1703,22 +1697,8 @@ export default defineComponent({
                     )
                 }}
               </Field>
-            </Form>
-          </div>
-
-          <div
-            class={[
-              styles.studentSection,
-              styles.studentSectionForm,
-              forms.giftVipDay <= 0 && styles.noSendDay
-            ]}
-            // style={{ display: 'none' }}
-          >
-            <div class={styles.title1}></div>
-
-            <Form labelAlign="left" class={styles.registerForm}>
               {/* 大于等于2，则可以切换学生 */}
-              {forms.studentList.length > 1 && (
+              {/* {forms.studentList.length > 1 && (
                 <div
                   class={[
                     styles.selectStudentGroup,
@@ -1736,7 +1716,7 @@ export default defineComponent({
                       : '新增学生'}
                   </span>
                 </div>
-              )}
+              )} */}
 
               <Field
                 clearable={false}
@@ -1746,8 +1726,24 @@ export default defineComponent({
                 placeholder="请输入学生姓名"
                 autocomplete="off"
                 maxlength={14}
-                v-model={studentInfo.extra.nickname}
-              />
+                v-model={studentInfo.extra.nickname}>
+                {{
+                  extra: () =>
+                    forms.studentList.length > 1 && (
+                      <div
+                        class={[
+                          styles.selectStudentGroup,
+                          forms.showSelectStudent &&
+                            styles.selectStudentGroupChecked
+                        ]}
+                        onClick={() => (forms.showSelectStudent = true)}>
+                        <span>
+                          {forms.studentItem.userId ? '切换' : '新增'}
+                        </span>
+                      </div>
+                    )
+                }}
+              </Field>
               <Field
                 clearable={false}
                 required
@@ -1897,9 +1893,35 @@ export default defineComponent({
                 <div class={styles.goodsInner}>传统方式</div>
               </div>
             </div>
+
+            {forms.joinType && (
+              <div class={styles.goodsTypeGroup}>
+                {forms.joinType === 'digitalize' && (
+                  <>
+                    <img src={icon10} class={styles.showImg} />
+
+                    {forms.detailVip.membershipDays ? (
+                      <div class={styles.memberNumer}>
+                        <img src={iconGift} class={styles.iconGift} />
+                        <p>
+                          首次购买赠送乐器AI学练工具
+                          <span>{forms.detailVip.membershipDays || 0}</span>
+                          天有效期
+                        </p>
+                      </div>
+                    ) : (
+                      ''
+                    )}
+                  </>
+                )}
+                {forms.joinType === 'tradition' && (
+                  <img src={icon11} class={styles.showImg} />
+                )}
+              </div>
+            )}
           </div>
 
-          {forms.joinType === 'digitalize' && (
+          {/* {forms.joinType === 'digitalize' && (
             <div class={[styles.goodsExtra]}>
               <i class={styles.iconArrow}></i>
               <Cell border={false} class={styles.goodsCell}>
@@ -1914,16 +1936,13 @@ export default defineComponent({
                     <div class={styles.section}>
                       <div class={styles.sectionContent}>
                         <h2>
-                          {/* {forms.detailVip.goodsName} */}
                           <img src={icon5} class={styles.goodsName} />
                           <Tag class={styles.brandName}>
-                            {/* {forms.detailVip.brandName} */}
+
                             12个月
                           </Tag>
                         </h2>
                         <p class={[styles.model]}>
-                          {/* 解决学生不会练、不知练的对错、家长无法辅导、无需再额外请老师 */}
-                          {/* {forms.detailVip.description} */}
                           <p>
                             <i></i>解决学生不会练、不知练的对错
                           </p>
@@ -1931,7 +1950,6 @@ export default defineComponent({
                             <i></i>家长无法辅导、无需再额外请老师
                           </p>
                         </p>
-                        {/* <span class={styles.sendInstrument}>赠送课堂乐器</span> */}
                         <img src={icon6} class={styles.sendInstrument} />
                       </div>
                     </div>
@@ -1991,13 +2009,12 @@ export default defineComponent({
                         'C调、木质、高音德式八孔；'}
                       {forms.instrumentCode === 'Woodwind' &&
                         'C调、红木色、树脂或木质；'}
-                      {/* 管数不限，建议20管以上C调加嘴排箫（音域宽，能演奏更多复杂乐曲，不需要重复更换），黑色，要选择单一原调（调性多学生很难掌握），价格由学生根据自身情况确定。 */}
                     </div>
                   </div>
                 )}
               </div>
             </div>
-          )}
+          )} */}
 
           {forms.joinType && (
             <MSticky position="bottom" ref={mstickyRef}>