默认提交
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> | ||
| 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 | }, | ... | ... |
-
Please register or sign in to post a comment