Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62ed4df6 1 parent c7910a78

综合视频组件测试

Inline Side-by-side
Showing 7 changed files with 411 additions and 41 deletions
1 +<template>
2 + <div
3 + @click="goToDetail(item, $router)"
4 + class="banner">
5 + {{ item.kg_name }} ｜ {{ item.localism_type }}
6 + </div>
7 +</template>
8 +
9 +<script setup>
10 +import { goToDetail } from './methods'
11 +const props = defineProps({
12 + item: Object,
13 +});
14 +</script>
15 +
16 +<style lang="less" scoped>
17 + .banner {
18 + color: #999999;
19 + padding: 0.5rem 1rem
20 + }
21 +</style>
1 <template> 1 <template>
2 <div class="video-wrapper"> 2 <div class="video-wrapper">
3 - <div 3 + <status :item="item"></status>
4 - class="video-div" 4 + <div class="video-div" :id="'mui-player-' + item.id"></div>
5 - :id="'mui-player-' + item.id" 5 + <video-bar :item="item" :barType="1"></video-bar>
6 - ></div> 6 + <banner v-if="type === 'bookDetail'" :item="item"></banner>
7 </div> 7 </div>
8 </template> 8 </template>
9 9
10 <script setup> 10 <script setup>
11 - /** 11 +/**
12 * 视频组件通用模块 12 * 视频组件通用模块
13 */ 13 */
14 - import 'mui-player/dist/mui-player.min.css'; 14 +import 'mui-player/dist/mui-player.min.css';
15 - import MuiPlayer from 'mui-player'; 15 +import MuiPlayer from 'mui-player';
16 - import { onMounted } from 'vue'; 16 +import { onMounted } from 'vue';
17 - // 视频基础属性 17 +import banner from './banner';
18 - const props = defineProps({ 18 +import videoBar from './videoBar';
19 +import status from './status';
20 +// 视频基础属性
21 +const props = defineProps({
19 item: Object, 22 item: Object,
20 - }); 23 + type: String,
21 - // 视频播放事件回调 24 +});
22 - const emit = defineEmits(['on-play']); 25 +// 视频播放事件回调
26 +const emit = defineEmits(['on-play']);
23 27
24 - onMounted(() => { 28 +onMounted(() => {
25 const mp = new MuiPlayer({ 29 const mp = new MuiPlayer({
26 container: '#mui-player-' + props.item.id, 30 container: '#mui-player-' + props.item.id,
27 title: props.item.title, 31 title: props.item.title,
...@@ -44,11 +48,12 @@ ...@@ -44,11 +48,12 @@
44 props: props.item, 48 props: props.item,
45 }); 49 });
46 }); 50 });
47 - }); 51 +});
48 </script> 52 </script>
49 53
50 -<style lang="less" scoped> 54 +<style lang="less" scoped >
51 - .video-wrapper { 55 +.video-wrapper {
56 + position: relative;
52 margin: 1rem; 57 margin: 1rem;
53 border-bottom-left-radius: 5px; 58 border-bottom-left-radius: 5px;
54 border-bottom-right-radius: 5px; 59 border-bottom-right-radius: 5px;
...@@ -58,5 +63,12 @@ ...@@ -58,5 +63,12 @@
58 border-top-left-radius: 5px; 63 border-top-left-radius: 5px;
59 border-top-right-radius: 5px; 64 border-top-right-radius: 5px;
60 } 65 }
66 +
67 + .video-bar {
68 + color: #713610;
69 + padding: 1rem;
70 + padding-bottom: 0.5rem;
71 +
61 } 72 }
73 +}
62 </style> 74 </style>
......
1 +import { prodActionAPI } from '@/api/C/prod.js'
2 +import { Toast } from 'vant';
3 +
4 +export const goToDetail = ({ id, book_id, type }, $router) => {
5 + $router.push({
6 + path: '/client/videoDetail',
7 + query: {
8 + prod_id: id,
9 + book_id,
10 + type // 特殊标识，判断入口 为keepAlive使用
11 + }
12 + });
13 +}
14 +
15 +export const setComment = ({ id, book_id }, $router) => {
16 + $router.push({
17 + path: '/client/videoDetail/comment',
18 + query: {
19 + prod_id: id,
20 + book_id
21 + }
22 + });
23 +}
24 +
25 +export const prodAction = async (action_type, prod_id) => {
26 + const { msg } = await prodActionAPI({ action_type, prod_id });
27 + if (msg === `${action_type}-add-OK`) { // 动作操作成功
28 + if (action_type === 'favor') {
29 + Toast('收藏成功');
30 + }
31 + if (action_type === 'like') {
32 + Toast('点赞成功');
33 + }
34 + } else { // 取消操作
35 + if (action_type !== 'play') {
36 + Toast('取消成功');
37 + }
38 + }
39 + return true;
40 +}
1 export default [ 1 export default [
2 { 2 {
3 - "id": 314952, 3 + "id": 315040,
4 "localism_type": "普通话", 4 "localism_type": "普通话",
5 - "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1652859614.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:A3XNpa2-O4eaFjPK5R0pM-wMS2Q=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTI4NTk2MTQucG5nKiIsIkUiOjE5Njg0MjkxNDZ9", 5 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095780.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:3kZFL-LK1CP0k8Iiewr6d4_kCas=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU3ODAucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
6 - "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1652859612.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:YLs7BNF-chzhTsnoFqje-x4RIao=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTI4NTk2MTIubXA0KiIsIkUiOjE5Njg0MjkxNDZ9", 6 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095775.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2gmHTr1opoFCeuYjRPvxabflLZM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU3NzUubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
7 - "note": "z", 7 + "note": "Z",
8 - "kg_id": 314481, 8 + "status": "apply",
9 - "kg_name": "云南省普洱市镇沅彝族哈尼族拉祜族自治县者东镇幼儿园", 9 + "check_note": null,
10 - "perf_id": 314950, 10 + "kg_id": 314048,
11 - "name": "胡二", 11 + "kg_name": "上海市杨浦区科技幼儿园",
12 - "avatar": "https://cdn.ipadbiz.cn/ipadbiz/MjEwMzViY2QzM2RlZDJhZTEyNjM1Y2UxOGZiZDcyYjg0NmYxNDljNg.jpeg", 12 + "perf_id": 314880,
13 + "name": "王申羽",
14 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
15 + "book_id": 314483,
16 + "book_name": "《它们从哪里来》",
17 + "comment_num": 0,
18 + "like_num": 0,
19 + "favor_num": 0,
20 + "play_num": 0,
21 + "is_like": 0
22 + },
23 + {
24 + "id": 315041,
25 + "localism_type": "沪语",
26 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095788.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:km1-cl6r3X9BwYekqZHyo4kzbWo=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU3ODgucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
27 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095786.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9kK2Nf96oLV0_t5dKXLnEC0QBLM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU3ODYubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
28 + "note": "Z",
29 + "status": "apply",
30 + "check_note": null,
31 + "kg_id": 314048,
32 + "kg_name": "上海市杨浦区科技幼儿园",
33 + "perf_id": 314880,
34 + "name": "王申羽",
35 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
13 "book_id": 314483, 36 "book_id": 314483,
14 "book_name": "《它们从哪里来》", 37 "book_name": "《它们从哪里来》",
15 "comment_num": 0, 38 "comment_num": 0,
16 - "like_num": 1, 39 + "like_num": 0,
17 "favor_num": 0, 40 "favor_num": 0,
18 - "play_num": 1, 41 + "play_num": 0,
19 - "is_like": 1 42 + "is_like": 0
20 }, 43 },
21 { 44 {
22 - "id": 314946, 45 + "id": 315036,
23 "localism_type": "普通话", 46 "localism_type": "普通话",
24 - "cover": "https://gd-pri.jinshujufiles.com/en/g7D0MT/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1652857953.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:CYT2_4fEbC6BoYDc8rXUJxXiZx4=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTI4NTc5NTMucG5nKiIsIkUiOjE5Njg0Mjc0ODV9", 47 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095579.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:TbYtglmAQrmsCpKulfIkdjrYsjc=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU1NzkucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
25 - "video": "https://gd-pri.jinshujufiles.com/en/g7D0MT/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1652857950.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1i5wziqwGbCx41ZKzO-qWwYZyeQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL2c3RDBNVC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTI4NTc5NTAubXA0KiIsIkUiOjE5Njg0Mjc0ODV9", 48 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095576.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:CIcNhT-g-lmC1mv253Nnoz7EVKQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU1NzYubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
49 + "note": "Z",
50 + "status": "apply",
51 + "check_note": null,
52 + "kg_id": 314048,
53 + "kg_name": "上海市杨浦区科技幼儿园",
54 + "perf_id": 314880,
55 + "name": "王申羽",
56 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
57 + "book_id": 314483,
58 + "book_name": "《它们从哪里来》",
59 + "comment_num": 0,
60 + "like_num": 0,
61 + "favor_num": 0,
62 + "play_num": 0,
63 + "is_like": 0
64 + },
65 + {
66 + "id": 315037,
67 + "localism_type": "沪语",
68 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095586.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:MaeVQ6AUQNzcWKDaMExdr7pFpZU=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU1ODYucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
69 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095584.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:Ox6WCAeG4ImThDZaoEc2v3mrcb8=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU1ODQubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
26 "note": "Z", 70 "note": "Z",
27 - "kg_id": 314481, 71 + "status": "apply",
28 - "kg_name": "云南省普洱市镇沅彝族哈尼族拉祜族自治县者东镇幼儿园", 72 + "check_note": null,
29 - "perf_id": 314945, 73 + "kg_id": 314048,
30 - "name": "胡大", 74 + "kg_name": "上海市杨浦区科技幼儿园",
31 - "avatar": null, 75 + "perf_id": 314880,
76 + "name": "王申羽",
77 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
32 "book_id": 314483, 78 "book_id": 314483,
33 "book_name": "《它们从哪里来》", 79 "book_name": "《它们从哪里来》",
34 - "comment_num": 1, 80 + "comment_num": 0,
35 - "like_num": 1, 81 + "like_num": 0,
82 + "favor_num": 0,
83 + "play_num": 0,
84 + "is_like": 0
85 + },
86 + {
87 + "id": 315033,
88 + "localism_type": "沪语",
89 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095145.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:dzCQntH7aBmPGYyxvmiOTwgr8WY=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTUxNDUucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
90 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095142.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:IygI0aLGuFR_DEgRtmsbNjAhVS0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTUxNDIubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
91 + "note": "2",
92 + "status": "apply",
93 + "check_note": null,
94 + "kg_id": 314048,
95 + "kg_name": "上海市杨浦区科技幼儿园",
96 + "perf_id": 314880,
97 + "name": "王申羽",
98 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
99 + "book_id": 314483,
100 + "book_name": "《它们从哪里来》",
101 + "comment_num": 0,
102 + "like_num": 0,
103 + "favor_num": 0,
104 + "play_num": 0,
105 + "is_like": 0
106 + },
107 + {
108 + "id": 315032,
109 + "localism_type": "普通话",
110 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
111 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
112 + "note": "1",
113 + "status": "apply",
114 + "check_note": null,
115 + "kg_id": 314048,
116 + "kg_name": "上海市杨浦区科技幼儿园",
117 + "perf_id": 314880,
118 + "name": "王申羽",
119 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
120 + "book_id": 314483,
121 + "book_name": "《它们从哪里来》",
122 + "comment_num": 0,
123 + "like_num": 0,
124 + "favor_num": 0,
125 + "play_num": 0,
126 + "is_like": 0
127 + },
128 + {
129 + "id": 315024,
130 + "localism_type": "普通话",
131 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094501.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:0fDZL_C8youKy-IftSFwyr3c36g=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ1MDEucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
132 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094499.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:BHD2B4D_CDzu9Tw48SvPAgfuJ90=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0OTkubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
133 + "note": "1",
134 + "status": "apply",
135 + "check_note": null,
136 + "kg_id": 314048,
137 + "kg_name": "上海市杨浦区科技幼儿园",
138 + "perf_id": 314880,
139 + "name": "王申羽",
140 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
141 + "book_id": 314483,
142 + "book_name": "《它们从哪里来》",
143 + "comment_num": 0,
144 + "like_num": 0,
145 + "favor_num": 0,
146 + "play_num": 0,
147 + "is_like": 0
148 + },
149 + {
150 + "id": 315025,
151 + "localism_type": "沪语",
152 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094509.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:qSjAFNlU3o6SduJzStxg49A8SK0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ1MDkucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
153 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094506.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2Khn4cIo2mJo6Ty6qRvLB0Uus48=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ1MDYubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
154 + "note": "2",
155 + "status": "apply",
156 + "check_note": null,
157 + "kg_id": 314048,
158 + "kg_name": "上海市杨浦区科技幼儿园",
159 + "perf_id": 314880,
160 + "name": "王申羽",
161 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
162 + "book_id": 314483,
163 + "book_name": "《它们从哪里来》",
164 + "comment_num": 0,
165 + "like_num": 0,
166 + "favor_num": 0,
167 + "play_num": 0,
168 + "is_like": 0
169 + },
170 + {
171 + "id": 315021,
172 + "localism_type": "沪语",
173 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094433.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:AfRlQR8HGWV0y9kAeEAKd7jhj6I=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ0MzMucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
174 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094431.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PjpJx-lC2kILJPBlpPJuJMqslrE=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ0MzEubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
175 + "note": "Z",
176 + "status": "apply",
177 + "check_note": null,
178 + "kg_id": 314048,
179 + "kg_name": "上海市杨浦区科技幼儿园",
180 + "perf_id": 314880,
181 + "name": "王申羽",
182 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
183 + "book_id": 314483,
184 + "book_name": "《它们从哪里来》",
185 + "comment_num": 0,
186 + "like_num": 0,
187 + "favor_num": 0,
188 + "play_num": 0,
189 + "is_like": 0
190 + },
191 + {
192 + "id": 315020,
193 + "localism_type": "普通话",
194 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094425.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9BOVLskMMLE-pbqmb5rK_5qncNQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ0MjUucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
195 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094423.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:uEz_Ke-BuliSvPQkvdwOAe42Hyk=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0MjMubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
196 + "note": "Z",
197 + "status": "apply",
198 + "check_note": null,
199 + "kg_id": 314048,
200 + "kg_name": "上海市杨浦区科技幼儿园",
201 + "perf_id": 314880,
202 + "name": "王申羽",
203 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
204 + "book_id": 314483,
205 + "book_name": "《它们从哪里来》",
206 + "comment_num": 0,
207 + "like_num": 0,
36 "favor_num": 0, 208 "favor_num": 0,
37 - "play_num": 1, 209 + "play_num": 0,
38 - "is_like": 1 210 + "is_like": 0
39 } 211 }
40 ] 212 ]
......
1 +<template>
2 + <div class="status">
3 + <van-image v-if="item.status === 'enable'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_enable" />
4 + <van-image v-if="item.status === 'disable'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_refuse" />
5 + <van-image v-if="item.status === 'apply'" round width="6rem" height="6rem" style="vertical-align: bottom;" :src="icon_apply" />
6 + </div>
7 +</template>
8 +
9 +<script setup>
10 +import icon_refuse from '@images/icon-jujue@2x.png'
11 +import icon_apply from '@images/icon-shenhe@2x.png'
12 +import icon_enable from '@images/icon-tongguo@2x.png'
13 +
14 +const props = defineProps({
15 + item: Object,
16 +});
17 +</script>
18 +
19 +<style lang="less" scoped>
20 +.status {
21 + position: absolute;
22 + top: 0;
23 + right: 0;
24 + z-index: 999;
25 +}
26 +</style>
1 +<template>
2 + <div v-if="barType === 1" class="video-bar">
3 + <van-row>
4 + <van-col span="12" @click="goToDetail(item, $router)">
5 + <van-image v-if="item.avatar" round width="2rem" height="2rem" style="vertical-align: middle;"
6 + :src="item.avatar" />&nbsp;
7 + <van-image v-else round width="2rem" height="2rem" style="vertical-align: middle;" :src="icon_avatar" />&nbsp;
8 + <span style="font-size: 1.05rem;vertical-align: middle;">{{ item.name }}</span>
9 + </van-col>
10 + <van-col span="12">
11 + <div style="padding: 0.25rem; padding-top: 0.75rem; text-align: right;">
12 + <span @click="setComment(item, $router)">
13 + <van-icon :name="icon_liuyan" size="1.2rem" style="vertical-align: bottom;" />
14 + {{ item.comment_num }}
15 + </span>
16 + &nbsp;&nbsp;&nbsp;
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;" />
19 + <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
20 + {{ detail.like_num }}
21 + </span>
22 + </div>
23 + </van-col>
24 + </van-row>
25 + </div>
26 + <div v-if="barType === 2" class="video-bar">
27 + <van-row style="text-align: center;">
28 + <van-col span="7">
29 + <span style="color: #777777;">
30 + {{ item.play_num }}次播放
31 + </span>
32 + </van-col>
33 + <van-col span="1" style="color: #EEEDED;">
34 + |
35 + </van-col>
36 + <van-col span="8">
37 + <span @click="handleAction('favor', detail.id)">
38 + <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
39 + <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
40 + {{ detail.favor_num }}
41 + </span>
42 + </van-col>
43 + <van-col span="1" style="color: #EEEDED;">
44 + |
45 + </van-col>
46 + <van-col span="7">
47 + <span @click="handleAction('like', detail.id)">
48 + <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
49 + <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
50 + {{ detail.like_num }}
51 + </span>
52 + </van-col>
53 + </van-row>
54 + </div>
55 +</template>
56 +
57 +<script setup>
58 +import { icon_shoucang1, icon_shoucang2, icon_dianzan1, icon_dianzan2, icon_liuyan, icon_avatar } from '@/utils/generateIcons.js'
59 +
60 +import { ref } from 'vue';
61 +import { goToDetail, setComment, prodAction } from './methods';
62 +import _ from 'lodash';
63 +import { prodInfoAPI } from '@/api/C/prod.js'
64 +
65 +const props = defineProps({
66 + item: Object,
67 + barType: Number
68 +});
69 +
70 +const detail = ref({});
71 +detail.value = _.cloneDeep(props.item);
72 +
73 +const handleAction = async (type, id) => {
74 + if (await prodAction(type, id)) {
75 + getProductDetail(type, id)
76 + }
77 +}
78 +
79 +// 查询作品详情
80 +async function getProductDetail(action_type, prod_id) {
81 + const { data } = await prodInfoAPI({ prod_id });
82 + // 更新详情显示
83 + detail.value[`is_${action_type}`] = data[`is_${action_type}`];
84 + detail.value[`${action_type}_num`] = data[`${action_type}_num`];
85 +}
86 +
87 +</script>
88 +
89 +<style lang="less" scoped>
90 +.video-bar {
91 + color: #713610;
92 + padding: 1rem;
93 + padding-bottom: 0.5rem;
94 +}
95 +</style>
...@@ -7,6 +7,8 @@ import no_image from '@images/que-shuju@2x.png' ...@@ -7,6 +7,8 @@ import no_image from '@images/que-shuju@2x.png'
7 import icon_avatar from '@images/que-logo@2x.png' 7 import icon_avatar from '@images/que-logo@2x.png'
8 import icon_dianzan1 from '@images/icon-dianzan01@2x.png' 8 import icon_dianzan1 from '@images/icon-dianzan01@2x.png'
9 import icon_dianzan2 from '@images/icon-dianzan02@2x.png' 9 import icon_dianzan2 from '@images/icon-dianzan02@2x.png'
10 +import icon_shoucang1 from '@images/icon-shoucang01@2x.png'
11 +import icon_shoucang2 from '@images/icon-shoucang02@2x.png'
10 import icon_liuyan from '@images/icon-liuyan@2x.png' 12 import icon_liuyan from '@images/icon-liuyan@2x.png'
11 13
12 export { 14 export {
...@@ -20,4 +22,6 @@ export { ...@@ -20,4 +22,6 @@ export {
20 icon_dianzan1, 22 icon_dianzan1,
21 icon_dianzan2, 23 icon_dianzan2,
22 icon_liuyan, 24 icon_liuyan,
25 + icon_shoucang1,
26 + icon_shoucang2,
23 } 27 }
......