修改逻辑

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

@@ -103,8 +103,8 @@
   }
 
   .giftTip {
-    width: 52px;
-    height: 18px;
+    width: 94px;
+    height: 19px;
   }
 
   .needPrice {
@@ -558,7 +558,16 @@
 .goodsCell {
   position: relative;
   border-radius: 16px;
-  padding: 16px 14px 0;
+  padding: 14px 16px !important;
+
+  &.goodsBuyGoods {
+    padding: 10px 14px !important;
+
+    .goodsName {
+      width: 192px;
+      height: 68px;
+    }
+  }
 
   .iconChecked {
     width: 18px;
@@ -615,8 +624,9 @@
   }
 
   .goodsName {
-    width: 188px;
-    height: 81px;
+
+    width: 207px;
+    height: 71px;
     line-height: 0;
   }
 

src/views/student-register/index-apply.tsx

@@ -49,8 +49,9 @@ import MDialog from '@/components/m-dialog';
 import tuangou from './images/new/tuangou.png';
 import icon3 from './images/new/icon-3.png';
 import icon5 from './images/new/icon-5.png';
+import icon10 from './images/new/icon-10.png';
 import icon6 from './images/new/icon-6.png';
-import giftTip from './images/new/icon-4.png';
+import giftTip from './images/new/icon-9.png';
 import iconGift from './images/new/icon-gift.png';
 import dayjs from 'dayjs';
 // import MMessageTip from '@/components/m-message-tip';
@@ -1630,7 +1631,11 @@ export default defineComponent({
             {/* <i class={styles.iconArrow}></i> */}
             <Cell
               border={false}
-              class={styles.goodsCell}
+              class={[
+                styles.goodsCell,
+                forms.registerType === 'SELECT_BUY_GOODS' &&
+                  styles.goodsBuyGoods
+              ]}
               center
               onClick={() => {
                 // console.log(forms.joinType, 'joinType');
@@ -1674,22 +1679,14 @@ export default defineComponent({
                       src={forms.detailVip.goodsUrl || tuangou}
                     />
                     <div class={styles.sectionContent}>
-                      <img src={icon5} class={styles.goodsName} />
-                      {/* <h2>
-
-                        <img src={icon5} class={styles.goodsName} />
-                      </h2>
-                      <p class={[styles.model]}>
-
-                        <p>
-                          <i></i>解决学生不会练、不知练的对错
-                        </p>
-                        <p>
-                          <i></i>家长无法辅导、无需再额外请老师
-                        </p>
-                      </p>
-
-                      <img src={icon6} class={styles.sendInstrument} /> */}
+                      <img
+                        src={
+                          forms.registerType === 'SELECT_BUY_GOODS'
+                            ? icon5
+                            : icon10
+                        }
+                        class={styles.goodsName}
+                      />
                     </div>
                   </div>
                 )
@@ -1758,7 +1755,7 @@ export default defineComponent({
             <MSticky position="bottom" ref={mstickyRef}>
               <div class={styles.paymentContainer}>
                 <div class={styles.payemntPrice}>
-                  {/* <img src={giftTip} class={styles.giftTip} /> */}
+                  <img src={giftTip} class={styles.giftTip} />
                   <div>
                     <span class={styles.needPrice}>
                       <i style="font-style: normal">¥ </i>

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

@@ -95,7 +95,8 @@
 
     .video {
       position: relative;
-      border-radius: 18px;
+      border-radius: 12px;
+      background-color: transparent !important;
     }
   }
 }
@@ -171,7 +172,7 @@
 .paymentContainer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   font-size: 14px;
   padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) 12px;
   background: #FFFFFF;
@@ -181,11 +182,13 @@
 
   .payemntPrice {
     // line-height: 0;
+    position: absolute;
+    left: 14px;
   }
 
   .giftTip {
-    width: 52px;
-    height: 18px;
+    width: 94px;
+    height: 19px;
   }
 
   .needPrice {
@@ -368,6 +371,7 @@
 
   .goodsTypeGroup {
     padding-top: 14px;
+    padding-bottom: 2px;
 
     .showImg {
       height: 100px;

src/views/student-register/index.tsx

@@ -52,7 +52,7 @@ import MDialog from '@/components/m-dialog';
 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 giftTip from './images/new/icon-4.png';
+import giftTip from './images/new/icon-9.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';
@@ -68,6 +68,7 @@ import MPopup from '@/components/m-popup';
 import UserAuth from './component/user-auth';
 import MMessageTip from '@/components/m-message-tip';
 import SelectStudent from './modal/select-student';
+import { Timer } from './timer';
 
 const classList: any = [];
 for (let i = 1; i <= 40; i++) {
@@ -250,8 +251,11 @@ export default defineComponent({
     });
 
     // 播放视频总时长
-    const videoIntervalRef = useInterval(1000, { controls: true });
+    const videoIntervalRef = useInterval(1000, {
+      controls: true
+    });
     videoIntervalRef.pause();
+    const timer = new Timer();
 
     // 页面定时
     const pageTimer = useInterval(1000, { controls: true });
@@ -596,6 +600,7 @@ export default defineComponent({
      */
     const onSubmit = async () => {
       forms.submitLoading = true;
+      forms.intervalFnRef.pause();
       try {
         if (checkForm() || checkSubmit()) {
           forms.submitLoading = false;
@@ -692,6 +697,7 @@ export default defineComponent({
         changeTipStatus(forms.isRegister === 'create' ? false : true, false);
       } finally {
         forms.submitLoading = false;
+        forms.intervalFnRef.resume();
       }
     };
 
@@ -1197,6 +1203,12 @@ export default defineComponent({
           (time / Math.floor(videoForms.player.duration())) * 100
         );
 
+        console.log(
+          videoIntervalRef.counter.value,
+          timer.getTime(),
+          videoForms.player.currentTime(),
+          'timer count'
+        );
         const params = {
           id: forms.saveId,
           useTime: pageBrowseTime, // 固定5秒
@@ -1210,8 +1222,8 @@ export default defineComponent({
             videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
             videoBrowseDataTime: time || 0, // 有效的视频观看时长
             videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
-            videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
-            videoBrowsePoint: Math.floor(videoForms.player.currentTime() || 0) // 视频最后观看点 - 向下取整
+            videoBrowseTime: timer.getTime(), // 视频观看时长
+            videoBrowsePoint: videoForms.player.currentTime() // 视频最后观看点 - 向下取整
           };
         }
 
@@ -1335,18 +1347,21 @@ export default defineComponent({
         videoForms.player.on('seeking', () => {
           console.log('seeking');
           videoIntervalRef.isActive.value && videoIntervalRef.pause();
+          timer.pause();
         });
 
         // // 拖动结束时
         videoForms.player.on('seeked', () => {
           console.log('seeked');
           videoIntervalRef.isActive.value && videoIntervalRef.pause();
+          timer.pause();
         });
 
         // 正在搜索中
         videoForms.player.on('waiting', () => {
           // console.log('waiting pause')
           videoIntervalRef.isActive.value && videoIntervalRef.pause();
+          timer.pause();
         });
 
         // 如何视频在缓存不会触发
@@ -1361,6 +1376,7 @@ export default defineComponent({
           ) {
             // console.log('timeupdate play')
             videoIntervalRef.resume();
+            timer.resume();
           }
         });
 
@@ -1374,6 +1390,7 @@ export default defineComponent({
           console.log('play');
           // 判断视频计时器是否暂停，如果暂停则恢复
           videoIntervalRef.resume();
+          timer.resume();
         });
 
         // 暂停播放
@@ -1381,6 +1398,7 @@ export default defineComponent({
           console.log('pause', videoIntervalRef.isActive.value);
 
           videoIntervalRef.pause();
+          timer.pause();
         });
 
         videoForms.player.on('fullscreenchange', () => {
@@ -1427,28 +1445,34 @@ export default defineComponent({
       if (repeat) {
         if (tempTime.length > 0) {
           // console.log('join video', tempTime, 'initTime', initTime)
-          tempTime[1] = Math.floor(videoForms.player.currentTime());
+          tempTime[1] =
+            Math.floor(videoForms.player.currentTime() * 1000) / 1000;
+          // tempTime[1] = videoForms.player.currentTime();
         }
       } else {
         if (newVal) {
-          console.log(
-            videoForms.player.currentTime(),
-            'videoForms.player.currentTime()'
-          );
-          tempTime[0] = Math.floor(videoForms.player.currentTime());
+          // console.log(
+          //   videoForms.player.currentTime(),
+          //   'videoForms.player.currentTime()'
+          // );
+          tempTime[0] =
+            Math.floor(videoForms.player.currentTime() * 1000) / 1000;
+          // tempTime[0] = videoForms.player.currentTime();
         } else {
-          tempTime[1] = Math.floor(videoForms.player.currentTime());
+          tempTime[1] =
+            Math.floor(videoForms.player.currentTime() * 1000) / 1000;
+          // tempTime[1] = videoForms.player.currentTime();
         }
       }
 
-      console.log(
-        newVal,
-        repeat,
-        tempTime,
-        tempTime.length,
-        'videoIntervalRef.isActive.value in'
-      );
-      console.log(videoForms.player.playbackRate(), 'speed');
+      // console.log(
+      //   newVal,
+      //   repeat,
+      //   tempTime,
+      //   tempTime.length,
+      //   'videoIntervalRef.isActive.value in'
+      // );
+      // console.log(videoForms.player.playbackRate(), 'speed');
 
       if (tempTime.length >= 2) {
         // console.log(tempTime, 'tempTime', moreTime.value)
@@ -1507,14 +1531,17 @@ export default defineComponent({
         // 间隔多少时间同步数据
         forms.intervalFnRef = useIntervalFn(async () => {
           // 页面时间恢复
+          forms.intervalFnRef.pause();
           pageTimer.counter.value = 0;
           pageTimer.resume();
           // 同步数据时先进行有效时间进行保存
           initVideoCount(false, true);
           await updateStat();
 
+          timer.resetTime();
           videoIntervalRef.counter.value = 0;
-        }, 5000);
+          forms.intervalFnRef.resume();
+        }, 5020);
       } catch {}
     };
 

src/views/student-register/timer.ts

@@ -0,0 +1,71 @@
+export class Timer {
+  private startTime: number;
+  private elapsedTime: number;
+  private timerId: number | null;
+  private isRunning: boolean;
+
+  constructor() {
+    this.startTime = 0;
+    this.elapsedTime = 0;
+    this.timerId = null;
+    this.isRunning = false;
+  }
+
+  start(): void {
+    if (!this.isRunning) {
+      this.isRunning = true;
+      this.startTime = Date.now() - this.elapsedTime;
+      this.timerId = window.setInterval(() => {
+        this.elapsedTime = Date.now() - this.startTime;
+      }, 10); // Update every 10 milliseconds
+    }
+  }
+
+  pause(): void {
+    if (this.isRunning) {
+      this.isRunning = false;
+      if (this.timerId !== null) {
+        clearInterval(this.timerId);
+      }
+    }
+  }
+
+  resume(): void {
+    if (!this.isRunning) {
+      this.start();
+    }
+  }
+
+  resetTime(): void {
+    this.elapsedTime = 0;
+    this.startTime = Date.now() - this.elapsedTime
+  }
+
+  reset(): void {
+    this.isRunning = false;
+    if (this.timerId !== null) {
+      clearInterval(this.timerId);
+    }
+    this.elapsedTime = 0;
+  }
+
+  getTime(): Number {
+    return this.elapsedTime / 1000
+  }
+
+
+
+  private formatTime(ms: number): Object {
+    const milliseconds = ms % 1000;
+    const seconds = Math.floor(ms / 1000) % 60;
+    const minutes = Math.floor(ms / 1000 / 60) % 60;
+    const hours = Math.floor(ms / 1000 / 60 / 60);
+
+    // console.log(`${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}.${this.pad(milliseconds, 3)}`)
+    return ms / 1000
+  }
+
+  private pad(number: number, digits: number = 2): string {
+    return number.toString().padStart(digits, '0');
+  }
+}