Browse Source

feat: 优化播放选择分集滑动

xiansin 2 years ago
parent
commit
a11f1522fc

+ 29 - 14
mini/pages/episode/components/EpisodePart.vue

@@ -26,24 +26,34 @@
           >{{ item.title }}</view>
           >{{ item.title }}</view>
         </scroll-view>
         </scroll-view>
         <!--几集选择-->
         <!--几集选择-->
-        <view class="content dir-left-wrap main-left">
-          <view
-            v-for="(item, index) in episodeTabData[episodesTabIndex].lists"
+        <swiper
+          class="content"
+          :current="episodesTabIndex"
+          @change="handleSwiperChange"
+        >
+          <swiper-item
+            v-for="(row, index) in episodeTabData"
             :key="index"
             :key="index"
-            class="episode-item"
-            @click="handleSelectEpisode(item.index)"
+            class="dir-left-wrap main-left"
           >
           >
-            <image :src="episode.cover_img" />
-            <text>第{{ item.sort }}集</text>
-            <view v-if="currentEpisode.sort === item.sort && isPlaying" class="playing" />
             <view
             <view
-              v-if="!item.is_free && buyRecord.indexOf(item.id) === -1 && !(episode.is_vip_watch && userInfo.info.is_vip)"
-              class="lock main-center cross-center"
+              v-for="(item, rowIndex) in row.lists"
+              :key="rowIndex"
+              class="episode-item"
+              @click="handleSelectEpisode(item.index)"
             >
             >
-              <u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
+              <image :src="episode.cover_img" />
+              <text>第{{ item.sort }}集</text>
+              <view v-if="currentEpisode.sort === item.sort && isPlaying" class="playing" />
+              <view
+                v-if="!item.is_free && buyRecord.indexOf(item.id) === -1 && !(episode.is_vip_watch && userInfo.info.is_vip)"
+                class="lock main-center cross-center"
+              >
+                <u-icon name="lock-fill" :color="$colors.defaultColor" size="46rpx" />
+              </view>
             </view>
             </view>
-          </view>
-        </view>
+          </swiper-item>
+        </swiper>
       </view>
       </view>
     </view>
     </view>
   </view>
   </view>
@@ -113,6 +123,9 @@ export default {
     handleSelectEpisode(index) {
     handleSelectEpisode(index) {
       this.$emit('selectEpisode', index)
       this.$emit('selectEpisode', index)
       this.footerShow = false
       this.footerShow = false
+    },
+    handleSwiperChange(e) {
+      this.episodesTabIndex = e.detail.current
     }
     }
   }
   }
 }
 }
@@ -192,6 +205,7 @@ export default {
       }
       }
       .content{
       .content{
         margin-top: 20rpx;
         margin-top: 20rpx;
+        height: 580rpx;
         .episode-item{
         .episode-item{
           position: relative;
           position: relative;
           width: calc((100% - #{40rpx}) / 3);
           width: calc((100% - #{40rpx}) / 3);
@@ -199,6 +213,7 @@ export default {
           margin-bottom: 20rpx;
           margin-bottom: 20rpx;
           overflow: hidden;
           overflow: hidden;
           border-radius: 18rpx;
           border-radius: 18rpx;
+          height: 270rpx;
           &:nth-child(3n){
           &:nth-child(3n){
             margin-right: 0;
             margin-right: 0;
           }
           }
@@ -214,7 +229,7 @@ export default {
           }
           }
           image{
           image{
             width: 100%;
             width: 100%;
-            height: 260rpx;
+            height: 270rpx;
           }
           }
           text{
           text{
             position: absolute;
             position: absolute;

+ 1 - 1
server/app/Http/Controllers/V1/EpisodeController.php

@@ -144,7 +144,7 @@ class EpisodeController extends Controller
      */
      */
     public function rank()
     public function rank()
     {
     {
-        $limit = request()->input('limit',  $this->number);
+        $limit = request()->input('limit',  12);
         $page = request()->input('page',1);
         $page = request()->input('page',1);
         $offset = ($page - 1) * $limit;
         $offset = ($page - 1) * $limit;
         $episodes = Episode::filterPlatform()->withCount(['userEpisodesRecords','lists'])
         $episodes = Episode::filterPlatform()->withCount(['userEpisodesRecords','lists'])