Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ac658bf6 1 parent a99dfd57

✨ feat(视频播放组件): 初始化视频时机调整

Inline Side-by-side
Showing 4 changed files with 30 additions and 20 deletions
...@@ -82,6 +82,7 @@ export default { ...@@ -82,6 +82,7 @@ export default {
82 created() { 82 created() {
83 }, 83 },
84 mounted() { 84 mounted() {
85 + setTimeout(() => {
85 var mp = new MuiPlayer({ 86 var mp = new MuiPlayer({
86 container: '#mui-player-' + this.item.case_id, 87 container: '#mui-player-' + this.item.case_id,
87 title: this.item.title, 88 title: this.item.title,
...@@ -95,6 +96,7 @@ export default { ...@@ -95,6 +96,7 @@ export default {
95 ] 96 ]
96 }) 97 })
97 this.detail = _.cloneDeep(this.item) 98 this.detail = _.cloneDeep(this.item)
99 + }, 500);
98 }, 100 },
99 methods: { 101 methods: {
100 setLike() { 102 setLike() {
......
...@@ -153,6 +153,7 @@ export default { ...@@ -153,6 +153,7 @@ export default {
153 created() { 153 created() {
154 }, 154 },
155 mounted() { 155 mounted() {
156 + setTimeout(() => {
156 var mp = new MuiPlayer({ 157 var mp = new MuiPlayer({
157 container: '#mui-player-' + this.item.case_id, 158 container: '#mui-player-' + this.item.case_id,
158 title: this.item.title, 159 title: this.item.title,
...@@ -166,6 +167,7 @@ export default { ...@@ -166,6 +167,7 @@ export default {
166 ] 167 ]
167 }) 168 })
168 this.detail = _.cloneDeep(this.item) 169 this.detail = _.cloneDeep(this.item)
170 + }, 500);
169 }, 171 },
170 methods: { 172 methods: {
171 setLike() { 173 setLike() {
......
...@@ -42,12 +42,6 @@ import { useRoute, useRouter } from 'vue-router' ...@@ -42,12 +42,6 @@ import { useRoute, useRouter } from 'vue-router'
42 const $route = useRoute(); 42 const $route = useRoute();
43 const $router = useRouter(); 43 const $router = useRouter();
44 44
45 -const goTo = () => { // 跳转作品详情页
46 - $router.push({
47 - path: '/client/videoDetail'
48 - });
49 -}
50 -
51 onMounted(() => { 45 onMounted(() => {
52 }) 46 })
53 47
...@@ -64,6 +58,7 @@ export default { ...@@ -64,6 +58,7 @@ export default {
64 created() { 58 created() {
65 }, 59 },
66 mounted() { 60 mounted() {
61 + setTimeout(() => {
67 var mp = new MuiPlayer({ 62 var mp = new MuiPlayer({
68 container: '#mui-player-' + this.item.id, 63 container: '#mui-player-' + this.item.id,
69 title: this.item.title, 64 title: this.item.title,
...@@ -77,8 +72,17 @@ export default { ...@@ -77,8 +72,17 @@ export default {
77 ] 72 ]
78 }) 73 })
79 this.detail = _.cloneDeep(this.item) 74 this.detail = _.cloneDeep(this.item)
75 + }, 500);
80 }, 76 },
81 methods: { 77 methods: {
78 + goTo () { // 跳转作品详情页
79 + this.$router.push({
80 + path: '/client/videoDetail',
81 + query: {
82 + prod_id: this.item.id
83 + }
84 + });
85 + },
82 setLike() { 86 setLike() {
83 this.detail.is_like = !this.detail.is_like 87 this.detail.is_like = !this.detail.is_like
84 }, 88 },
...@@ -106,9 +110,7 @@ export default { ...@@ -106,9 +110,7 @@ export default {
106 color: #713610; 110 color: #713610;
107 padding: 1rem; 111 padding: 1rem;
108 padding-bottom: 0.5rem; 112 padding-bottom: 0.5rem;
109 - .avatar {
110 113
111 } 114 }
112 - }
113 } 115 }
114 </style> 116 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="video-wrapper"> 2 <div class="video-wrapper">
3 - <div class="video-div" :id="'mui-player-' + item.case_id"></div> 3 + <div class="video-div" :id="'mui-player-' + item.id"></div>
4 <div class="video-bar"> 4 <div class="video-bar">
5 <van-row style="text-align: center;"> 5 <van-row style="text-align: center;">
6 <van-col span="7"> 6 <van-col span="7">
7 <span style="color: #777777;"> 7 <span style="color: #777777;">
8 - 3068次播放 8 + {{ item.play_num }}次播放
9 </span> 9 </span>
10 </van-col> 10 </van-col>
11 <van-col span="1" style="color: #EEEDED;"> 11 <van-col span="1" style="color: #EEEDED;">
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
13 </van-col> 13 </van-col>
14 <van-col span="8"> 14 <van-col span="8">
15 <span @click="setCollect"> 15 <span @click="setCollect">
16 - <van-icon v-if="!detail.collected" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" /> 16 + <van-icon v-if="!detail.is_favor" :name="icon_shoucang1" size="1.2rem" style="vertical-align: bottom;" />
17 <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" /> 17 <van-icon v-else :name="icon_shoucang2" size="1.2rem" style="vertical-align: bottom;" />
18 - 10086 18 + {{ item.favor_num }}
19 </span> 19 </span>
20 </van-col> 20 </van-col>
21 <van-col span="1" style="color: #EEEDED;"> 21 <van-col span="1" style="color: #EEEDED;">
...@@ -23,9 +23,9 @@ ...@@ -23,9 +23,9 @@
23 </van-col> 23 </van-col>
24 <van-col span="7"> 24 <van-col span="7">
25 <span @click="setLike()"> 25 <span @click="setLike()">
26 - <van-icon v-if="!detail.liked" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" /> 26 + <van-icon v-if="!detail.is_like" :name="icon_dianzan1" size="1.2rem" style="vertical-align: bottom;" />
27 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" /> 27 <van-icon v-else :name="icon_dianzan2" size="1.2rem" style="vertical-align: bottom;" />
28 - 10086 28 + {{ item.like_num }}
29 </span> 29 </span>
30 </van-col> 30 </van-col>
31 </van-row> 31 </van-row>
...@@ -70,11 +70,12 @@ export default { ...@@ -70,11 +70,12 @@ export default {
70 created() { 70 created() {
71 }, 71 },
72 mounted() { 72 mounted() {
73 + setTimeout(() => {
73 var mp = new MuiPlayer({ 74 var mp = new MuiPlayer({
74 - container: '#mui-player-' + this.item.case_id, 75 + container: '#mui-player-' + this.item.id,
75 title: this.item.title, 76 title: this.item.title,
76 - src: this.item.video.url, 77 + src: this.item.video,
77 - poster: this.item.cover.url, 78 + poster: this.item.cover,
78 autoFit: false, 79 autoFit: false,
79 videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 80 videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
80 {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'}, 81 {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
...@@ -83,17 +84,20 @@ export default { ...@@ -83,17 +84,20 @@ export default {
83 ] 84 ]
84 }) 85 })
85 this.detail = _.cloneDeep(this.item) 86 this.detail = _.cloneDeep(this.item)
87 + }, 500)
86 }, 88 },
87 methods: { 89 methods: {
88 setCollect() { 90 setCollect() {
89 - this.detail.collected = !this.detail.collected 91 + console.warn(this.detail.is_favor);
92 + // this.detail.is_favor = this.detail.is_favor ? 1 : 0
90 }, 93 },
91 setLike() { 94 setLike() {
92 - this.detail.liked = !this.detail.liked 95 + console.warn(this.detail.is_like);
96 + // this.detail.is_like = this.detail.is_like ? 1 : 0
93 }, 97 },
94 setCommit() { 98 setCommit() {
95 console.warn('跳转详情页，移动到留言页'); 99 console.warn('跳转详情页，移动到留言页');
96 - console.warn(this.detail.case_id); 100 + console.warn(this.detail.id);
97 } 101 }
98 } 102 }
99 } 103 }
......