Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b711e698 1 parent 400e554f

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

Inline Side-by-side
Showing 3 changed files with 84 additions and 52 deletions
1 +import axios from 'axios';
2 +import { Toast } from 'vant';
3 +
1 export default { 4 export default {
2 // 初始化设置 5 // 初始化设置
3 init: { 6 init: {
4 mounted () { 7 mounted () {
5 document.title = this.$route.meta.title; 8 document.title = this.$route.meta.title;
6 } 9 }
10 + },
11 + likeFn: {
12 + methods: {
13 + /**
14 + * 用户相关操作
15 + * @param {String} type 动作类型：like, favor, play
16 + * @param {String} id 作品 ID
17 + */
18 + handleAction (type, id) { // 用户操作
19 + axios.post('/srv/?a=prod_action', {
20 + action_type: type,
21 + prod_id: id
22 + })
23 + .then(res => {
24 + if (res.data.code === 1) {
25 + if (res.data.msg === `${type}-add-OK`) { // 动作操作成功
26 + this.getProductDetail(type, id);
27 + if (type === 'favor') {
28 + Toast('收藏成功');
29 + }
30 + if (type === 'like') {
31 + Toast('点赞成功');
32 + }
33 + } else { // 取消操作
34 + this.getProductDetail(type, id);
35 + if (type !== 'play') {
36 + Toast('取消成功');
37 + }
38 + }
39 + } else {
40 + console.warn(res);
41 + Toast({
42 + icon: 'close',
43 + message: res.data.msg
44 + });
45 + }
46 + })
47 + .catch(err => {
48 + console.error(err);
49 + });
50 + },
51 + getProductDetail (type, id) {
52 + axios.get('/srv/?a=prod_info', {
53 + params: {
54 + prod_id: id
55 + }
56 + })
57 + .then(res => {
58 + if (res.data.code === 1) {
59 + this.detail[`is_${type}`] = res.data.data[`is_${type}`];
60 + this.detail[`${type}_num`] = res.data.data[`${type}_num`];
61 + } else {
62 + console.warn(res);
63 + Toast({
64 + icon: 'close',
65 + message: res.data.msg
66 + });
67 + }
68 + })
69 + .catch(err => {
70 + console.error(err);
71 + });
72 + }
73 + }
7 } 74 }
8 }; 75 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -14,10 +14,10 @@ ...@@ -14,10 +14,10 @@
14 {{ item.comment_num }} 14 {{ item.comment_num }}
15 </span> 15 </span>
16 &nbsp;&nbsp;&nbsp; 16 &nbsp;&nbsp;&nbsp;
17 - <span @click="setLike()"> 17 + <span @click="handleAction('like', detail.id)">
18 <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" /> 18 <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
19 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" /> 19 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
20 - {{ item.favor_num }} 20 + {{ detail.like_num }}
21 </span> 21 </span>
22 </div> 22 </div>
23 </van-col> 23 </van-col>
...@@ -37,6 +37,8 @@ import { ref, reactive, onMounted } from 'vue' ...@@ -37,6 +37,8 @@ import { ref, reactive, onMounted } from 'vue'
37 import 'mui-player/dist/mui-player.min.css' 37 import 'mui-player/dist/mui-player.min.css'
38 import MuiPlayer from 'mui-player' 38 import MuiPlayer from 'mui-player'
39 import _ from 'lodash'; 39 import _ from 'lodash';
40 +import axios from 'axios';
41 +import { Toast } from 'vant';
40 42
41 import { useRoute, useRouter } from 'vue-router' 43 import { useRoute, useRouter } from 'vue-router'
42 const $route = useRoute(); 44 const $route = useRoute();
...@@ -48,7 +50,10 @@ onMounted(() => { ...@@ -48,7 +50,10 @@ onMounted(() => {
48 </script> 50 </script>
49 51
50 <script> 52 <script>
53 +import mixin from 'common/mixin';
54 +
51 export default { 55 export default {
56 + mixins: [mixin.likeFn],
52 props: ['item'], 57 props: ['item'],
53 data() { 58 data() {
54 return { 59 return {
...@@ -83,12 +88,13 @@ export default { ...@@ -83,12 +88,13 @@ export default {
83 } 88 }
84 }); 89 });
85 }, 90 },
86 - setLike() {
87 - this.detail.is_like = !this.detail.is_like
88 - },
89 setComment() { 91 setComment() {
90 - console.warn('跳转详情页，移动到留言页'); 92 + this.$router.push({
91 - console.warn(this.detail.id); 93 + path: '/client/videoDetail/comment',
94 + query: {
95 + prod_id: this.item.id
96 + }
97 + });
92 } 98 }
93 } 99 }
94 } 100 }
......
...@@ -62,7 +62,10 @@ onMounted(() => { ...@@ -62,7 +62,10 @@ onMounted(() => {
62 </script> 62 </script>
63 63
64 <script> 64 <script>
65 +import mixin from 'common/mixin';
66 +
65 export default { 67 export default {
68 + mixins: [mixin.likeFn],
66 props: ['item'], 69 props: ['item'],
67 data() { 70 data() {
68 return { 71 return {
...@@ -89,56 +92,12 @@ export default { ...@@ -89,56 +92,12 @@ export default {
89 var video = mp.video(); 92 var video = mp.video();
90 // 监听原生video事件 93 // 监听原生video事件
91 var _this = this; 94 var _this = this;
92 - video.addEventListener('play', function (event) { 95 + video && video.addEventListener('play', function (event) {
93 _this.handleAction('play', _this.item.id) 96 _this.handleAction('play', _this.item.id)
94 }); 97 });
95 }, 500) 98 }, 500)
96 }, 99 },
97 methods: { 100 methods: {
98 - /**
99 - * 用户相关操作
100 - * @param {String} type 动作类型：like, favor, play
101 - * @param {String} id 作品 ID
102 - */
103 - handleAction (type, id) { // 用户操作
104 - axios.post('/srv/?a=prod_action', {
105 - action_type: type,
106 - prod_id: id
107 - })
108 - .then(res => {
109 - if (res.data.code === 1) {
110 - if (res.data.msg === `${type}-add-OK`) { // 动作操作成功
111 - this.detail[`is_${type}`] = 1;
112 - this.detail[`${type}_num`] = this.detail[`${type}_num`] + 1;
113 - if (type === 'favor') {
114 - Toast('收藏成功');
115 - }
116 - if (type === 'like') {
117 - Toast('点赞成功');
118 - }
119 - } else { // 取消操作
120 - this.detail[`is_${type}`] = 0;
121 - this.detail[`${type}_num`] -= this.detail[`${type}_num`];
122 - if (type !== 'play') {
123 - Toast('取消成功');
124 - }
125 - }
126 - } else {
127 - console.warn(res);
128 - Toast({
129 - icon: 'close',
130 - message: res.data.msg
131 - });
132 - }
133 - })
134 - .catch(err => {
135 - console.error(err);
136 - });
137 - },
138 - setCommit() {
139 - console.warn('跳转详情页，移动到留言页');
140 - console.warn(this.detail.id);
141 - }
142 } 101 }
143 } 102 }
144 </script> 103 </script>
......