c300a523 by simon

默认提交

1 parent 4fe4fc23

6.62 KB | W: | H:

10.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 import { 1 import {
2 getBindtapData 2 getBindtapData,
3 pxToRpx
3 } from '../../utils/util'; 4 } from '../../utils/util';
4 5
5 let app = getApp(); 6 let app = getApp();
...@@ -15,7 +16,9 @@ Page({ ...@@ -15,7 +16,9 @@ Page({
15 indexInfo: {}, 16 indexInfo: {},
16 userInfo: {}, 17 userInfo: {},
17 options: {}, 18 options: {},
18 detailData: {} 19 detailData: {},
20 vidHeight: 0, // 视频高度
21 isVideoEnded: false,
19 }, 22 },
20 onShareAppMessage() { 23 onShareAppMessage() {
21 let detailData = this.data.detailData; 24 let detailData = this.data.detailData;
...@@ -27,6 +30,7 @@ Page({ ...@@ -27,6 +30,7 @@ Page({
27 path, 30 path,
28 imageUrl 31 imageUrl
29 } 32 }
33
30 }, 34 },
31 showAuth() { 35 showAuth() {
32 this.setData({ 36 this.setData({
...@@ -98,6 +102,28 @@ Page({ ...@@ -98,6 +102,28 @@ Page({
98 }, 102 },
99 103
100 /** 104 /**
105 * 播放完毕
106 */
107 onVideoEndedHandler(evt) {
108 this.setData({
109 isVideoEnded: true
110 })
111 },
112
113 /**
114 * 重播
115 */
116 onReplayHandler() {
117 let video = wx.createVideoContext("vid", this);
118 console.log("video:", video);
119 video.seek(0);
120 video.play();
121 this.setData({
122 isVideoEnded: false
123 })
124 },
125
126 /**
101 * 返回首页 127 * 返回首页
102 */ 128 */
103 toIndex() { 129 toIndex() {
...@@ -146,6 +172,19 @@ Page({ ...@@ -146,6 +172,19 @@ Page({
146 this.setData({ 172 this.setData({
147 detailData: result 173 detailData: result
148 }) 174 })
175 let {
176 width,
177 height
178 } = result;
179 let vidHeight = (height / width) * 750;
180 if (vidHeight < 320) {
181 vidHeight = 320;
182 }
183 vidHeight = pxToRpx(vidHeight);
184 this.setData({
185 vidHeight: vidHeight,
186 });
187
149 resolve(result); 188 resolve(result);
150 }).catch((err) => { 189 }).catch((err) => {
151 reject(err); 190 reject(err);
......
...@@ -29,15 +29,49 @@ ...@@ -29,15 +29,49 @@
29 .vid-wrap { 29 .vid-wrap {
30 @extend .fcc; 30 @extend .fcc;
31 @extend .bb; 31 @extend .bb;
32 // padding-top: 20px;
33 width: 100%; 32 width: 100%;
34 height: 720px; 33 margin: 0 auto;
34 // padding: 10px;
35 35
36 .vid { 36 .vid {
37 text-align: center; 37 text-align: center;
38 width: 100%; 38 width: 100%;
39 height: 100%; 39 height: 100%;
40 } 40 }
41
42 .btn-wrap {
43 display: flex;
44 justify-content: center;
45
46 .btn {
47 background-color: transparent;
48 @extend .fcc;
49 margin: 0 24px;
50 border: solid 4px #ffffff;
51 width: 300px;
52 height: 84px;
53 border-radius: 84px;
54
55 color: #ffffff;
56
57 .iconfont {
58 font-size: 48px;
59 }
60
61 .tt {
62 font-weight: bold;
63 font-size: 36px;
64 padding: 0 8px;
65 }
66
67 .t2 {}
68 }
69
70 .btn2{
71 background-color: #f67b37;
72 border: none;
73 }
74 }
41 } 75 }
42 } 76 }
43 77
...@@ -162,8 +196,6 @@ ...@@ -162,8 +196,6 @@
162 color: #7f776e; 196 color: #7f776e;
163 } 197 }
164 198
165
166
167 } 199 }
168 200
169 } 201 }
......
...@@ -6,11 +6,21 @@ ...@@ -6,11 +6,21 @@
6 <view class="content"> 6 <view class="content">
7 <!-- 视频详情 --> 7 <!-- 视频详情 -->
8 <view class="detail"> 8 <view class="detail">
9 <view class="vid-wrap"> 9 <view class="vid-wrap" style='height: {{vidHeight}}px;'>
10 <video objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" /> 10 <video wx:if="{{!isVideoEnded}}" id="vid" bindended="onVideoEndedHandler" objectFit="contain" class="vid" poster="{{detailData.thumbnail}}" src="{{detailData.videoUrl}}" />
11 <view wx:else class="btn-wrap">
12 <button bindtap="onReplayHandler" class="btn">
13 <span class="t1 iconfont iconrefresh"></span>
14 <span class="tt">重播</span>
15 </button>
16 <button open-type="share" class="btn btn2 ani-scl">
17 <span class="t1 iconfont iconplane"></span>
18 <span class="tt">分享</span>
19 </button>
20 </view>
11 </view> 21 </view>
12 </view> 22 </view>
13 <div class="share"> 23 <view class="share">
14 <view class="btn-wrap"> 24 <view class="btn-wrap">
15 <button open-type="share" class=" btn btn2"> 25 <button open-type="share" class=" btn btn2">
16 <span class="t1 iconfont iconplane"></span> 26 <span class="t1 iconfont iconplane"></span>
...@@ -21,7 +31,7 @@ ...@@ -21,7 +31,7 @@
21 <span class="t1">分享到群</span> 31 <span class="t1">分享到群</span>
22 </button> 32 </button>
23 </view> 33 </view>
24 </div> 34 </view>
25 <!-- 功能区小标题 --> 35 <!-- 功能区小标题 -->
26 <view class="fc-tit">超有创意的全家福,看了你也想拍!</view> 36 <view class="fc-tit">超有创意的全家福,看了你也想拍!</view>
27 <!-- 功能区 --> 37 <!-- 功能区 -->
......
...@@ -78,7 +78,6 @@ Page({ ...@@ -78,7 +78,6 @@ Page({
78 * banner切换 78 * banner切换
79 */ 79 */
80 onBannerChangeHandler(e) { 80 onBannerChangeHandler(e) {
81 console.log("e:", e);
82 let index = e.detail.current; 81 let index = e.detail.current;
83 this.setBannerIndex(index); 82 this.setBannerIndex(index);
84 }, 83 },
......