默认提交
Showing
6 changed files
with
91 additions
and
11 deletions
src/image/detail/decoration_c1-bk.png
0 → 100644
6.62 KB
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> | ||
11 | </view> | 20 | </view> |
12 | </view> | 21 | </view> |
13 | <div class="share"> | 22 | </view> |
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 | }, | ... | ... |
-
Please register or sign in to post a comment