feat: 优化小程序

mini/pages/episode/components/EpisodeButtons.vue

@@ -13,7 +13,8 @@
         :class="{active: isFav}"
         @click="handleFavorite"
       >
-        <u-icon name="heart-fill" size="58rpx" :color="isFav?$colors.primaryColor:$colors.defaultColor" />
+        <u-loading-icon v-if="favLoading" size="58rpx" :color="$colors.primaryColor" />
+        <u-icon v-else name="heart-fill" size="58rpx" :color="isFav?$colors.primaryColor:$colors.defaultColor" />
         <text>{{ $util.tranNumber(favNumber) }}</text>
       </view>
       <!--收藏-->
@@ -22,7 +23,8 @@
         :class="{active: isCollect}"
         @click="handleCollect"
       >
-        <u-icon name="star-fill" size="58rpx" :color="isCollect?$colors.primaryColor:$colors.defaultColor" />
+        <u-loading-icon v-if="collectLoading" size="58rpx" :color="$colors.primaryColor" />
+        <u-icon v-else name="star-fill" size="58rpx" :color="isCollect?$colors.primaryColor:$colors.defaultColor" />
         <text>{{ $util.tranNumber(episode.user_collect_count) }}</text>
       </view>
       <!--分享-->
@@ -68,6 +70,8 @@ export default {
     return {
       isCollect: false,
       isFav: false,
+      favLoading: false,
+      collectLoading: false,
       toast: { // 收藏/喜欢 toast
         status: 'success',
         text: '收藏成功',
@@ -112,10 +116,12 @@ export default {
     handleCollect() {
       if (this.btnLock) return
       this.btnLock = true
+      this.collectLoading = true
       const method = this.isCollect ? 'destroy' : 'add'
       const num = this.isCollect ? -1 : 1
-      this.$api.user.collect[method](this.currentEpisode.id).then(res => {
+      this.$api.user.collect[method](this.episode.id).then(res => {
         this.btnLock = false
+        this.collectLoading = false
         if (res.data) {
           this.toast.show = true
           this.toast.status = this.isCollect ? 'cancel' : 'success'
@@ -123,6 +129,9 @@ export default {
           this.isCollect = !this.isCollect
           this.$emit('change', { type: 'collect', num: num })
         }
+      }).catch(() => {
+        this.collectLoading = false
+        this.btnLock = false
       })
     },
     // 检查是否喜欢当前短剧
@@ -135,12 +144,16 @@ export default {
     },
     // 处理 喜欢剧集
     handleFavorite() {
+      console.log('-->handleFavorite', this.btnLock)
       if (this.btnLock) return
+      console.log('-->handleFavorite', this.btnLock)
       this.btnLock = true
+      this.favLoading = true
       const method = this.isFav ? 'destroy' : 'add'
       const num = this.isFav ? -1 : 1
       this.$api.user.favorite[method](this.currentEpisode.id).then(res => {
         this.btnLock = false
+        this.favLoading = false
         if (res.data) {
           this.toast.show = true
           this.toast.status = this.isFav ? 'cancel' : 'success'
@@ -149,6 +162,9 @@ export default {
           this.isFav = !this.isFav
           this.favNumber += num
         }
+      }).catch(() => {
+        this.favLoading = false
+        this.btnLock = false
       })
     }
   }

mini/pages/episode/play.vue

@@ -21,12 +21,13 @@
           circular
           :vertical="true"
           :current="swiperCurrent"
-          :duration="video.duration"
           @change="handleSwiperChancge"
+          @animationfinish="handleSwiperAnimationFinish"
         >
           <swiper-item
             v-for="(item, index) in swiperEpisode"
             :key="index"
+            class="swiper-item"
           >
             <!-- #ifdef  MP-TOUTIAO | MP-WEIXIN-->
             <!-- 控制按钮 - 播放 -->
@@ -102,7 +103,7 @@ export default {
         fullscreenBtn: false,
         playBtn: false,
         // #ifdef  MP-KUAISHOU | MP-TOUTIAO
-        duration: 200,
+        duration: 450,
         // #endif
         // #ifdef  MP-WEIXIN
         duration: 500
@@ -116,6 +117,11 @@ export default {
         prev: {},
         current: {},
         next: {}
+      },
+      indexArr: {
+        'prev': 0,
+        'current': 1,
+        'next': 2
       }
     }
   },
@@ -300,6 +306,9 @@ export default {
     },
     // 滚动 Swiper
     handleSwiperChancge({ detail }) {
+      // this.swiperCurrent = detail.current
+    },
+    handleSwiperAnimationFinish({ detail }) {
       this.swiperCurrent = detail.current
     },
     // 播放前检查剧集是否购买/免费
@@ -476,7 +485,7 @@ export default {
           z-index: 99;
           .swiper-item {
             width: 100%;
-            height: calc(100vh - #{150rpx});
+            height: 100vh !important;
           }
         }
         .progress-container{

server/app/Http/Controllers/V1/User/FavoriteController.php

@@ -42,9 +42,7 @@ class FavoriteController extends Controller
         $collect->user_id = \user()->id;
         $collect->episode_id = $episode->episodes_id;
         $collect->list_id = $id;
-        $collect->save();
-
-        return $this->success();
+        return $this->success($collect->save());
     }
 
     // 删除喜欢