✨ feat(作品详情页): 视频操作功能API联调

hookehuyr
Commit a8c91a9f0e0c160dd6e0658dce18a3565541ebfe a8c91a9f 1 parent 71156e70
Showing 1 changed file with 36 additions and 16 deletions
src/components/VideoDetail/index.vue
--- a/src/components/VideoDetail/index.vue
View file @a8c91a9
+++ b/src/components/VideoDetail/index.vue
View file @a8c91a9
@@ -12,20 +12,20 @@
           |
         </van-col>
         <van-col span="8">
-          <span @click="setCollect">
+          <span @click="handleAction('favor', detail.id)">
             <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
             <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
-            {{ item.favor_num }}
+            {{ detail.favor_num }}
           </span>
         </van-col>
         <van-col span="1" style="color: #EEEDED;">
           |
         </van-col>
         <van-col span="7">
-          <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.like_num }}
+            {{ detail.like_num }}
           </span>
         </van-col>
       </van-row>
@@ -85,20 +85,44 @@ export default {
           {attrKey:'x5-video-player-type',attrValue:'h5-page'},
         ]
       })
-      this.detail = _.cloneDeep(this.item)
+      this.detail = _.cloneDeep(this.item);
+      var video = mp.video();
+      // 监听原生video事件
+      var _this = this;
+      video.addEventListener('play', function (event) {
+        _this.handleAction('play', _this.item.id)
+      });
     }, 500)
   },
   methods: {
-    setCollect() {
+    /**
-      console.warn(this.detail.is_favor);
+     * 用户相关操作
-      // this.detail.is_favor = this.detail.is_favor ? 1 : 0
+     * @param {String} type 动作类型：like, favor, play
+     * @param {String} id 作品 ID
+     */
+    handleAction (type, id) { // 用户操作
       axios.post('/srv/?a=prod_action', {
-        action_type: 'favo',
+        action_type: type,
-        prod_id: this.detail.id
+        prod_id: id
       })
       .then(res => {
         if (res.data.code === 1) {
-          console.warn(res.data.data);
+          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({
@@ -109,11 +133,7 @@ export default {
       })
       .catch(err => {
         console.error(err); 
-      })
+      });
-    },
-    setLike() {
-      console.warn(this.detail.is_like);
-      // this.detail.is_like = this.detail.is_like ? 1 : 0
     },
     setCommit() {
       console.warn('跳转详情页，移动到留言页');