进入激活

src/views/coursewarePlay/index.module.less

@@ -269,49 +269,10 @@
     opacity: 1;
   }
 }
-
-/* ----------------------------------------------
- * Generated by Animista on 2023-2-13 18:55:56
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info. 
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
-/**
- * ----------------------------------------
- * animation rotate-vert-right
- * ----------------------------------------
- */
-@-webkit-keyframes rotate-vert-right {
-  0% {
-    -webkit-transform: rotateY(0);
-    transform: rotateY(0);
-    -webkit-transform-origin: right;
-    transform-origin: right;
-  }
-  100% {
-    -webkit-transform: rotateY(-360deg);
-    transform: rotateY(-360deg);
-    -webkit-transform-origin: right;
-    transform-origin: right;
-  }
-}
-@keyframes rotate-vert-right {
-  0% {
-    -webkit-transform: rotateY(0);
-    transform: rotateY(0);
-    -webkit-transform-origin: right;
-    transform-origin: right;
-  }
-  100% {
-    -webkit-transform: rotateY(-360deg);
-    transform: rotateY(-360deg);
-    -webkit-transform-origin: right;
-    transform-origin: right;
+.swiperContainer{
+  :global{
+    .swiper-wrapper{
+      height: 100vh;
+    }
   }
 }
-
-.rotate-vert-right {
-  -webkit-animation: rotate-vert-right 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;
-  animation: rotate-vert-right 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) both;
-}

src/views/coursewarePlay/index.tsx

@@ -46,7 +46,15 @@ import { usePageVisibility, useRect } from '@vant/use'
 import PlayRecordTime from './playRecordTime'
 import dayjs from 'dayjs'
 
-import { Pagination, Navigation, EffectFade, EffectFlip, EffectCreative, Lazy } from 'swiper'
+import {
+  Pagination,
+  Navigation,
+  Virtual,
+  EffectFade,
+  EffectFlip,
+  EffectCreative,
+  Lazy
+} from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/less'
 import 'swiper/less/effect-fade'
@@ -236,6 +244,7 @@ export default defineComponent({
       if (route.query.kId) {
         item = list.find((n: any) => n.materialId == route.query.kId)
         const _firstIndex = list.findIndex((n: any) => n.materialId == route.query.kId)
+        console.log('🚀 ~ item:', _firstIndex, list)
         popupData.firstIndex = _firstIndex > -1 ? _firstIndex : 0
       }
       item = item ? item : list[0] || {}
@@ -245,13 +254,14 @@ export default defineComponent({
         popupData.itemActive = item.id
         popupData.itemName = item.name
         popupData.activeIndex = popupData.firstIndex
+        console.log("🚀 ~ popupData.activeIndex:", popupData.activeIndex)
         item.autoPlay = true
         item.muted = true
         item.display = true
       }
       // console.log('🚀 ~ list', list)
-      data.itemList = list
       nextTick(() => {
+        data.itemList = list
         postMessage({
           api: 'courseLoading',
           content: {
@@ -567,177 +577,185 @@ export default defineComponent({
     return () => (
       <div class={styles.playContent}>
         <div class={styles.coursewarePlay} style={{ width: parentContainer.width }}>
-          <Swiper
-            style={{ height: '100%' }}
-            effect="creative"
-            modules={[Pagination, Navigation, EffectFade, EffectFlip, EffectCreative]}
-            creativeEffect={swiperType.value}
-            direction="vertical"
-            navigation
-            allowTouchMove={false}
-            onSwiper={(swiper: any) => {
-              swiperDom.value = swiper
-            }}
-            onSlideChange={(swiper: any) => {
-              handleSwipeChange(swiper.activeIndex)
-            }}
-          >
-            {data.itemList.map((m: any, mIndex: number) => {
-              return (
-                <SwiperSlide class={styles.swipeItem}>
-                  <div
-                    class={[styles.itemDiv]}
-                    onClick={() => {
-                      clearTimeout(activeData.timer)
-                      if (Date.now() - activeData.nowTime < 300) {
-                        handleDbClick(m)
-                        return
-                      }
-                      activeData.nowTime = Date.now()
-                      activeData.timer = setTimeout(() => {
-                        activeData.model = !activeData.model
-                        setModelOpen()
-                      }, 300)
-                    }}
-                  >
-                    {m.type === 'VIDEO' ? (
-                      <>
-                        <video
-                          class={['player']}
-                          playsinline="false"
-                          muted={m.muted}
-                          preload="auto"
-                          data-vid={m.id}
-                          src={m.content}
-                          loop={m.loop}
-                          autoplay={m.autoPlay}
-                          onLoadedmetadata={(e: Event) => {
-                            const videoEle = e.target as unknown as HTMLVideoElement
-                            m.currentTime = videoEle.currentTime
-                            m.duration = videoEle.duration
-                            m.videoEle = videoEle
-                            m.isprepare = true
-                          }}
-                          onTimeupdate={(e: Event) => {
-                            if (!m.isprepare) return
-                            const videoEle = e.target as unknown as HTMLVideoElement
-                            m.currentTime = videoEle.currentTime
-                            m.progress = Number((videoEle.currentTime / m.duration) * 100)
-                          }}
-                          onPlay={() => {
-                            // 播放
-                            m.paused = false
-                            console.log('播放')
-                            setModelOpen()
-                            // 第一次播放
-                            if (m.muted) {
-                              m.muted = false
-                              m.autoPlay = false
-                            }
-                          }}
-                          onPause={() => {
-                            //暂停
-                            clearTimeout(activeData.timer)
-                            m.paused = true
-                          }}
-                          onEnded={() => handleEnded(m)}
-                        >
-                          <source src={m.content} type="video/mp4" />
-                        </video>
-                        {m.muted && (
-                          <div class={styles.loadWrap}>
-                            <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
-                          </div>
-                        )}
-                        <div
-                          style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
-                          class={styles.bottomFixedContainer}
-                          onClick={(e: Event) => {
-                            e.stopPropagation()
-                            setModelOpen()
-                          }}
-                        >
-                          <div style={{ opacity: m.isprepare ? '1' : '0' }}>
-                            <div class={styles.time}>
-                              <span>{getSecondRPM(m.currentTime)}</span>
-                              <span>{getSecondRPM(m.duration)}</span>
+          {data.itemList.length && (
+            <Swiper
+              style={{ height: '100%' }}
+              class={styles.swiperContainer}
+              effect="creative"
+              modules={[Pagination, Navigation, EffectCreative]}
+              creativeEffect={swiperType.value}
+              direction="vertical"
+              navigation
+              allowTouchMove={false}
+              onSwiper={(swiper: any) => {
+                swiperDom.value = swiper
+              }}
+              onSlideChange={(swiper: any) => {
+                handleSwipeChange(swiper.activeIndex)
+              }}
+              initialSlide={popupData.activeIndex}
+            >
+              {data.itemList.map((m: any, mIndex: number) => {
+                return (
+                  <SwiperSlide class={styles.swipeItem} key={'index' + mIndex}>
+                    <div
+                      class={[styles.itemDiv]}
+                      onClick={() => {
+                        clearTimeout(activeData.timer)
+                        if (Date.now() - activeData.nowTime < 300) {
+                          handleDbClick(m)
+                          return
+                        }
+                        activeData.nowTime = Date.now()
+                        activeData.timer = setTimeout(() => {
+                          activeData.model = !activeData.model
+                          setModelOpen()
+                        }, 300)
+                      }}
+                    >
+                      {m.type === 'VIDEO' ? (
+                        <>
+                          <video
+                            class={['player']}
+                            playsinline="false"
+                            muted={m.muted}
+                            preload="auto"
+                            data-vid={m.id}
+                            src={m.content}
+                            loop={m.loop}
+                            autoplay={m.autoPlay}
+                            onLoadedmetadata={(e: Event) => {
+                              const videoEle = e.target as unknown as HTMLVideoElement
+                              m.currentTime = videoEle.currentTime
+                              m.duration = videoEle.duration
+                              m.videoEle = videoEle
+                              m.isprepare = true
+                            }}
+                            onTimeupdate={(e: Event) => {
+                              if (!m.isprepare) return
+                              const videoEle = e.target as unknown as HTMLVideoElement
+                              m.currentTime = videoEle.currentTime
+                              m.progress = Number((videoEle.currentTime / m.duration) * 100)
+                            }}
+                            onPlay={() => {
+                              // 播放
+                              m.paused = false
+                              console.log('播放')
+                              setModelOpen()
+                              // 第一次播放
+                              if (m.muted) {
+                                m.muted = false
+                                m.autoPlay = false
+                              }
+                            }}
+                            onPause={() => {
+                              //暂停
+                              clearTimeout(activeData.timer)
+                              m.paused = true
+                            }}
+                            onEnded={() => handleEnded(m)}
+                          >
+                            <source src={m.content} type="video/mp4" />
+                          </video>
+                          {m.muted && (
+                            <div class={styles.loadWrap}>
+                              <Vue3Lottie animationData={playLoadData}></Vue3Lottie>
                             </div>
-                            <div class={styles.slider}>
-                              <Slider
-                                onClick={() => setModelOpen()}
-                                buttonSize={16}
-                                step={1}
-                                modelValue={m.progress}
-                                onUpdate:modelValue={(val: any) => {
-                                  console.log('val', val)
-                                  m.progress = val
-                                  handleChangeSlider(m)
-                                }}
-                                onDragStart={(e: Event) => {
-                                  // 开始拖动,暂停播放
-                                  console.log('开始拖动')
-                                  // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
-                                  if (!m.paused) {
-                                    m.isDrage = true
-                                  }
-                                  handlePaused(m)
-                                }}
-                                onDragEnd={(e: Event) => {
-                                  console.log('结束拖动')
-                                  if (m.isDrage) {
-                                    m.isDrage = false
-                                    handlePlay(m)
-                                  }
-                                }}
-                                min={0}
-                                max={100}
-                              />
+                          )}
+                          <div
+                            style={{ transform: activeData.model ? '' : 'translateY(100%)' }}
+                            class={styles.bottomFixedContainer}
+                            onClick={(e: Event) => {
+                              e.stopPropagation()
+                              setModelOpen()
+                            }}
+                          >
+                            <div style={{ opacity: m.isprepare ? '1' : '0' }}>
+                              <div class={styles.time}>
+                                <span>{getSecondRPM(m.currentTime)}</span>
+                                <span>{getSecondRPM(m.duration)}</span>
+                              </div>
+                              <div class={styles.slider}>
+                                <Slider
+                                  onClick={() => setModelOpen()}
+                                  buttonSize={16}
+                                  step={1}
+                                  modelValue={m.progress}
+                                  onUpdate:modelValue={(val: any) => {
+                                    console.log('val', val)
+                                    m.progress = val
+                                    handleChangeSlider(m)
+                                  }}
+                                  onDragStart={(e: Event) => {
+                                    // 开始拖动,暂停播放
+                                    console.log('开始拖动')
+                                    // 如果拖动之前,视频是播放状态,拖动完毕后继续播放
+                                    if (!m.paused) {
+                                      m.isDrage = true
+                                    }
+                                    handlePaused(m)
+                                  }}
+                                  onDragEnd={(e: Event) => {
+                                    console.log('结束拖动')
+                                    if (m.isDrage) {
+                                      m.isDrage = false
+                                      handlePlay(m)
+                                    }
+                                  }}
+                                  min={0}
+                                  max={100}
+                                />
+                              </div>
                             </div>
-                          </div>
 
-                          <div class={styles.actions}>
-                            <div class={styles.actionBtn}>
-                              {m.isprepare ? (
-                                <>
-                                  {m.paused ? (
-                                    <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
-                                  ) : (
-                                    <img src={iconpause} onClick={(e: Event) => handlePaused(m)} />
-                                  )}
-                                </>
-                              ) : (
-                                <Loading color="#fff" />
-                              )}
+                            <div class={styles.actions}>
+                              <div class={styles.actionBtn}>
+                                {m.isprepare ? (
+                                  <>
+                                    {m.paused ? (
+                                      <img src={iconplay} onClick={(e: Event) => handlePlay(m)} />
+                                    ) : (
+                                      <img
+                                        src={iconpause}
+                                        onClick={(e: Event) => handlePaused(m)}
+                                      />
+                                    )}
+                                  </>
+                                ) : (
+                                  <Loading color="#fff" />
+                                )}
 
-                              {m.loop ? (
-                                <img
-                                  src={iconLoopActive}
-                                  onClick={(e: Event) => (m.loop = false)}
-                                />
-                              ) : (
-                                <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
-                              )}
+                                {m.loop ? (
+                                  <img
+                                    src={iconLoopActive}
+                                    onClick={(e: Event) => (m.loop = false)}
+                                  />
+                                ) : (
+                                  <img src={iconLoop} onClick={(e: Event) => (m.loop = true)} />
+                                )}
+                              </div>
+                              <div>{m.name}</div>
                             </div>
-                            <div>{m.name}</div>
                           </div>
-                        </div>
-                      </>
-                    ) : m.type === 'IMG' ? (
-                      <img src={m.content} />
-                    ) : (
-                      <MusicScore
-                        data-vid={m.id}
-                        music={m}
-                        onSetIframe={(el: any) => {
-                          m.iframeRef = el
-                        }}
-                      />
-                    )}
-                  </div>
-                </SwiperSlide>
-              )
-            })}
-          </Swiper>
+                        </>
+                      ) : m.type === 'IMG' ? (
+                        <img src={m.content} />
+                      ) : (
+                        <MusicScore
+                          data-vid={m.id}
+                          music={m}
+                          onSetIframe={(el: any) => {
+                            m.iframeRef = el
+                          }}
+                        />
+                      )}
+                    </div>
+                  </SwiperSlide>
+                )
+              })}
+            </Swiper>
+          )}
+
           <div
             style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
             id="coursePlayHeader"