修改样式与提示

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

@@ -1,5 +1,5 @@
 import { Popup } from 'vant';
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import styles from './index.module.less';
 import { browser } from '@/helpers/utils';
 
@@ -23,11 +23,20 @@ export default defineComponent({
   setup(props) {
     const showPopup = ref(false);
     onMounted(() => {
-      if (!browser().weixin && props.show) {
+      if (!browser().weixin || props.show) {
         showPopup.value = true;
         return;
       }
     });
+
+    watch(
+      () => [props.show, props.message],
+      () => {
+        if (props.show) {
+          showPopup.value = true;
+        }
+      }
+    );
     return () => (
       <>
         <Popup

src/views/courseware-play/component/audio-item/index.module.less

@@ -10,12 +10,21 @@
 }
 
 .contentWrap {
+  position: relative;
   height: 100%;
 
   canvas {
     width: 100%;
     height: 100%;
   }
+
+  .tempVudio {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .controls {
@@ -60,6 +69,10 @@
         width: 100%;
         height: 100%;
       }
+
+      .van-slider__button-wrapper--right {
+        transform: translate3d(100%, -50%, 0);
+      }
     }
   }
 
@@ -68,7 +81,7 @@
     width: 100%;
     color: #fff;
     font-size: 12px;
-    padding: 0 20px;
+    padding: 0 20px 0 12px;
     align-items: center;
 
     .actionWrap {
@@ -141,4 +154,4 @@
     }
 
   }
-}
+}

src/views/courseware-play/component/audio-item/index.tsx

@@ -1,15 +1,16 @@
-import { defineComponent, reactive, toRefs, watch } from 'vue';
+import { defineComponent, nextTick, reactive, toRefs, watch } from 'vue';
 import { ref } from 'vue';
 import styles from './index.module.less';
 
-import iconLoop from '../../image/icon-loop.png';
-import iconLoopActive from '../../image/icon-loop-active.png';
+import iconLoop from '../../image/icon-loop.svg';
+import iconLoopActive from '../../image/icon-loop-active.svg';
 import iconplay from '../../image/icon-play.png';
 import iconpause from '../../image/icon-pause.png';
 import { NSlider } from 'naive-ui';
 import Vudio from 'vudio.js';
 import { getSecondRPM } from '@/helpers/utils';
 import { Slider } from 'vant';
+import tickMp3 from '../../image/tick.mp3';
 
 export default defineComponent({
   name: 'video-play',
@@ -45,8 +46,10 @@ export default defineComponent({
       currentTime: 0,
       duration: 0.1,
       loop: false,
+      dragStatus: false, // 是否开始拖动
       playState: 'pause' as 'play' | 'pause',
-      vudio: null as any
+      vudio: null as any,
+      afterMa3: true
     });
     const canvasRef: any = ref();
     const audioRef: any = ref();
@@ -130,6 +133,33 @@ export default defineComponent({
       data.playState = 'pause';
       // emit('ended');
     };
+
+    let vudio1 = null;
+    const canvas1: any = ref();
+    const audio1: any = ref();
+    nextTick(() => {
+      const rect = contetRef.value.getBoundingClientRect() || {
+        width: 200,
+        height: 200
+      };
+      vudio1 = new Vudio(audio1.value, canvas1.value, {
+        effect: 'waveform',
+        accuracy: 128,
+        width: rect.width,
+        height: rect.height,
+        waveform: {
+          maxHeight: 160,
+          color: [
+            [0, '#44D1FF'],
+            [0.5, '#44D1FF'],
+            [0.5, '#198CFE'],
+            [1, '#198CFE']
+          ],
+          prettify: false
+        }
+      });
+      vudio1.dance();
+    });
     return () => (
       <div class={styles.videoWrap}>
         <div class={styles.content}>
@@ -142,6 +172,9 @@ export default defineComponent({
               onLoadedmetadata={onLoadedmetadata}
               onTimeupdate={() => {
                 if (data.timer && data.playState === 'pause') return;
+
+                // 开始拖动时也不能更新
+                if (data.dragStatus) return;
                 data.currentTime = audioRef.value.currentTime;
               }}
               onError={() => {
@@ -156,6 +189,13 @@ export default defineComponent({
               onEnded={onEnded}
               crossorigin="anonymous"
               playsinline="false"></audio>
+
+            {data.afterMa3 && (
+              <div class={styles.tempVudio}>
+                <audio ref={audio1} src={tickMp3} />
+                <canvas ref={canvas1}></canvas>
+              </div>
+            )}
           </div>
         </div>
 
@@ -171,7 +211,7 @@ export default defineComponent({
             <div>{getSecondRPM(data.currentTime)}</div>
             <div>{getSecondRPM(data.duration)}</div>
           </div>
-          <div class={styles.slider}>
+          <div class={[styles.slider]}>
             {/* <NSlider
               tooltip={false}
               step={0.01}
@@ -188,6 +228,14 @@ export default defineComponent({
               onUpdate:modelValue={val => {
                 handleChangeTime(val);
               }}
+              onDragStart={() => {
+                data.dragStatus = true;
+                console.log('onDragStart');
+              }}
+              onDragEnd={() => {
+                data.dragStatus = false;
+                console.log('onDragEnd');
+              }}
             />
           </div>
           <div class={styles.actions} onClick={() => emit('close')}>

src/views/courseware-play/component/video-item/index.module.less

@@ -74,7 +74,7 @@
     width: 100%;
     color: #fff;
     font-size: 12px;
-    padding: 0 20px;
+    padding: 0 20px 0 14px;
     align-items: center;
 
     .actionWrap {
@@ -147,4 +147,4 @@
     }
 
   }
-}
+}

src/views/courseware-play/index.tsx

@@ -366,7 +366,7 @@ export default defineComponent({
         activeData.model = true;
       } else if (item.type == 'VIDEO') {
         if (item.error) {
-          data.videoRefs[index].onPlay();
+          data.videoRefs[index]?.onPlay();
         }
       }
     };

src/views/student-register/index.tsx

@@ -21,7 +21,7 @@ import { useRoute, useRouter } from 'vue-router';
 import RegisterModal from './register-modal';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import request from '@/helpers/request';
-import { moneyFormat } from '@/helpers/utils';
+import { browser, moneyFormat } from '@/helpers/utils';
 import deepClone from '@/helpers/deep-clone';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
@@ -51,7 +51,9 @@ export default defineComponent({
       dialogMessage: '',
       countDownTime: 60 * 1000,
       dialogConfig: {} as any,
-      showMore: true
+      showMore: true,
+      showTips: false,
+      showMessage: '请使用微信打开'
     });
 
     const countDown = useCountDown({
@@ -114,6 +116,12 @@ export default defineComponent({
         forms.bugGoods = data.bugGoods;
         forms.schoolType = data.schoolType;
         forms.gradeYear = data.gradeYear;
+        if (browser().weixin) {
+          if (data.registerType !== 'BUG_GOODS') {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询乐团老师';
+          }
+        }
       } catch {}
     };
 
@@ -561,7 +569,7 @@ export default defineComponent({
         />
 
         {/* 是否在微信中打开 */}
-        <OWxTip />
+        <OWxTip show={forms.showTips} message={forms.showMessage} />
       </div>
     );
   }

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

@@ -23,7 +23,7 @@ import {
 import OWxTip from '@/components/m-wx-tip';
 import MProtocol from '@/components/m-protocol';
 import MImgCode from '@/components/m-img-code';
-import { checkPhone } from '@/helpers/utils';
+import { browser, checkPhone } from '@/helpers/utils';
 import request from '@/helpers/request';
 import { useStudentRegisterStore } from '@/store/modules/student-register-store';
 import { setLoginInit, state } from '@/state';
@@ -86,7 +86,9 @@ export default defineComponent({
       schoolId: route.query.sId as any,
       gradeYear: null,
       schoolType: null,
-      giftVipDay: null
+      giftVipDay: null,
+      showTips: false,
+      showMessage: '请使用微信打开'
     });
     const studentInfo = reactive({
       autoRegister: true,
@@ -193,6 +195,12 @@ export default defineComponent({
         forms.giftVipDay = data.giftVipDay;
         forms.schoolType = data.schoolType;
         forms.gradeYear = data.gradeYear;
+        if (browser().weixin) {
+          if (data.registerType !== 'GIFT_VIP_DAY') {
+            forms.showTips = true;
+            forms.showMessage = '二维码已经失效，详情请咨询乐团老师';
+          }
+        }
       } catch {}
     };
 
@@ -405,7 +413,7 @@ export default defineComponent({
           />
         </Popup>
         {/* 是否在微信中打开 */}
-        <OWxTip />
+        <OWxTip show={forms.showTips} message={forms.showMessage} />
       </div>
     );
   }