✨ feat(功能): 封装视频组件点赞功能

+import axios from 'axios';
+import { Toast } from 'vant';
+
 export default {
   // 初始化设置
   init: {
     mounted () {
       document.title = this.$route.meta.title;
     }
+  },
+  likeFn: {
+    methods: {
+      /**
+       * 用户相关操作
+       * @param {String} type 动作类型：like, favor, play
+       * @param {String} id 作品 ID
+       */
+      handleAction (type, id) { // 用户操作
+        axios.post('/srv/?a=prod_action', {
+          action_type: type,
+          prod_id: id
+        })
+        .then(res => {
+          if (res.data.code === 1) {
+            if (res.data.msg === `${type}-add-OK`) { // 动作操作成功
+              this.getProductDetail(type, id);
+              if (type === 'favor') {
+                Toast('收藏成功');
+              }
+              if (type === 'like') {
+                Toast('点赞成功');
+              }
+            } else { // 取消操作
+              this.getProductDetail(type, id);
+              if (type !== 'play') {
+                Toast('取消成功');
+              }
+            }
+          } else {
+            console.warn(res);
+            Toast({
+              icon: 'close',
+              message: res.data.msg
+            });
+          }
+        })
+        .catch(err => {
+          console.error(err); 
+        });
+      },
+      getProductDetail (type, id) {
+        axios.get('/srv/?a=prod_info', {
+          params: {
+            prod_id: id
+          }
+        })
+        .then(res => {
+          if (res.data.code === 1) {
+            this.detail[`is_${type}`] = res.data.data[`is_${type}`];
+            this.detail[`${type}_num`] = res.data.data[`${type}_num`];
+          } else {
+            console.warn(res);
+            Toast({
+              icon: 'close',
+              message: res.data.msg
+            });
+          }
+        })
+        .catch(err => {
+          console.error(err); 
+        });
+      }
+    }
   }
 };
\ No newline at end of file

@@ -14,10 +14,10 @@
               {{ item.comment_num }}
             </span>
             &nbsp;&nbsp;&nbsp;
-            <span @click="setLike()">
+            <span @click="handleAction('like', detail.id)">
               <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
               <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
-              {{ item.favor_num }}
+              {{ detail.like_num }}
             </span>
           </div>
         </van-col>
@@ -37,6 +37,8 @@ import { ref, reactive, onMounted } from 'vue'
 import 'mui-player/dist/mui-player.min.css'
 import MuiPlayer from 'mui-player'
 import _ from 'lodash';
+import axios from 'axios';
+import { Toast } from 'vant';
 
 import { useRoute, useRouter } from 'vue-router'
 const $route = useRoute();
@@ -48,7 +50,10 @@ onMounted(() => {
 </script>
 
 <script>
+import mixin from 'common/mixin';
+
 export default {
+  mixins: [mixin.likeFn],
   props: ['item'],
   data() {
     return {
@@ -83,12 +88,13 @@ export default {
         }
       });
     },
-    setLike() {
-      this.detail.is_like = !this.detail.is_like
-    },
     setComment() {
-      console.warn('跳转详情页，移动到留言页');
-      console.warn(this.detail.id);
+      this.$router.push({
+        path: '/client/videoDetail/comment',
+        query: {
+          prod_id: this.item.id
+        }
+      });
     }
   }
 }

@@ -62,7 +62,10 @@ onMounted(() => {
 </script>
 
 <script>
+import mixin from 'common/mixin';
+
 export default {
+  mixins: [mixin.likeFn],
   props: ['item'],
   data() {
     return {
@@ -89,56 +92,12 @@ export default {
       var video = mp.video();
       // 监听原生video事件
       var _this = this;
-      video.addEventListener('play', function (event) {
+      video && video.addEventListener('play', function (event) {
         _this.handleAction('play', _this.item.id)
       });
     }, 500)
   },
   methods: {
-    /**
-     * 用户相关操作
-     * @param {String} type 动作类型：like, favor, play
-     * @param {String} id 作品 ID
-     */
-    handleAction (type, id) { // 用户操作
-      axios.post('/srv/?a=prod_action', {
-        action_type: type,
-        prod_id: id
-      })
-      .then(res => {
-        if (res.data.code === 1) {
-          if (res.data.msg === `${type}-add-OK`) { // 动作操作成功
-            this.detail[`is_${type}`] = 1;
-            this.detail[`${type}_num`] = this.detail[`${type}_num`] + 1;
-            if (type === 'favor') {
-              Toast('收藏成功');
-            }
-            if (type === 'like') {
-              Toast('点赞成功');
-            }
-          } else { // 取消操作
-            this.detail[`is_${type}`] = 0;
-            this.detail[`${type}_num`] -= this.detail[`${type}_num`];
-            if (type !== 'play') {
-              Toast('取消成功');
-            }
-          }
-        } else {
-          console.warn(res);
-          Toast({
-            icon: 'close',
-            message: res.data.msg
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err); 
-      });
-    },
-    setCommit() {
-      console.warn('跳转详情页，移动到留言页');
-      console.warn(this.detail.id);
-    }
   }
 }
 </script>