| | |
| | | mode="aspectFit"></image> |
| | | </view> |
| | | <video v-if="index >= currentIndex - videoLiveOffset && index <= currentIndex + videoLiveOffset" |
| | | :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" |
| | | :autoplay="index === currentIndex" :controls="isControls" :loop="true" |
| | | :object-fit="item.videoFit" :enable-progress-gesture="false" :show-center-play-btn="false" |
| | | :show-progress="false" :show-fullscreen-btn="isControls" :show-play-btn="isControls" |
| | | :show-mute-btn="false" class="video-item" @fullscreenchange="onFullscreenChange" |
| | | @play="onPlay(item.id, index)" @pause="onPause(index)" @ended="onEnded(index)" |
| | | @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)" |
| | | :id="'video' + index" :ref="'video' + index" :src="item.videoUrl" :autoplay="index === currentIndex" |
| | | :controls="isControls" :loop="true" :object-fit="item.videoFit" :enable-progress-gesture="false" |
| | | :show-center-play-btn="false" :show-progress="false" :show-fullscreen-btn="isControls" |
| | | :show-play-btn="isControls" :show-mute-btn="false" class="video-item" |
| | | @fullscreenchange="onFullscreenChange" @play="onPlay(item.id, index)" @pause="onPause(index)" |
| | | @ended="onEnded(index)" @click="togglePlay(index)" @timeupdate="onTimeUpdate($event)" |
| | | @loadedmetadata="onLoadedMetadata($event)" @waiting="videoWaiting(index)"></video> |
| | | <view class="fullscreen-btn"> |
| | | <image class="fullscreen-icon" :src="isFullScreen ? off_screen : on_screen" mode="aspectFit" |
| | |
| | | |
| | | |
| | | <!-- 悬挂商品链接层 --> |
| | | <view class="goods-link-warp" v-if="item.goodsList.length > 0"> |
| | | <view class="goods-link-warp" :style="{ bottom: marginBottom + 55 + 'px' }" v-if="item.goodsList.length > 0"> |
| | | <view class="goods-link"> |
| | | <swiper @change="goodsChange" :autoplay="true" :interval="4000" style="height: 120rpx;"> |
| | | <swiper-item v-for="goods in item.goodsList" :key="goods.goodsId"> |
| | |
| | | <text class="goods-name">{{ goods.goodsName }}</text> |
| | | <view class="price-section"> |
| | | <text class="current-price">¥{{ goods.price }}</text> |
| | | <text class="original-price" v-if="goods.originalPrice">¥{{ |
| | | goods.originalPrice }}</text> |
| | | <text class="original-price" |
| | | v-if="goods.originalPrice">¥{{ goods.originalPrice }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | |
| | | <!-- 视频信息层 --> |
| | | <view class="video-info" :style="{ bottom: marginBottom + 20 + 'px' }"> |
| | | <view style="width: 100%; position: relative;" @click="jumpToSearch"> |
| | | <view style="width: 100%; position: relative;"> |
| | | <text class="video-author">@{{ item.authorName }}</text> |
| | | <text class="iconfont" style="position: absolute;right: 42px;bottom: 50rpx;"></text> |
| | | <text class="iconfont" @click="jumpToSearch" |
| | | style="position: absolute;right: 42px;bottom: 50rpx;"></text> |
| | | </view> |
| | | <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;"> |
| | | <text class="video-title">{{ item.title }}</text> |
| | | <text class="video-tag" v-for="(tag, index) in item.tagList" :key="tag.id">#{{ tag.tagName |
| | | }}</text> |
| | | <text class="video-tag" v-for="(tag, index) in item.tagList" |
| | | :key="tag.id">#{{ tag.tagName }}</text> |
| | | </view> |
| | | |
| | | </view> |
| | |
| | | <text @click="openReply(comment)" class="reply-btu time">回复</text> |
| | | <text v-if="!comment.hasThumbsUp" class="thumbs-up time iconfont" |
| | | @click="thubmsUp(comment.id, index, null)"><text |
| | | v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="comment.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ comment.thumbsUpNum }}</text></text> |
| | | <text v-else class="thumbs-up time iconfont" |
| | | @click="cancelThumbsUp(comment.id, index, null)"><text |
| | | v-show="comment.thumbsUpNum > 0" class="thumbs-num">{{ comment.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="comment.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ comment.thumbsUpNum }}</text></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <text @click="openReply(comment, reply)" class="reply-btu time">回复</text> |
| | | <text v-if="!reply.hasThumbsUp" class="thumbs-up time iconfont" |
| | | @click="thubmsUp(reply.id, index, replyIndex)"><text |
| | | v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="reply.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ reply.thumbsUpNum }}</text></text> |
| | | <text v-else class="thumbs-up time iconfont" |
| | | @click="cancelThumbsUp(reply.id, index, replyIndex)"><text |
| | | v-show="reply.thumbsUpNum > 0" class="thumbs-num">{{ reply.thumbsUpNum |
| | | }}</text></text> |
| | | v-show="reply.thumbsUpNum > 0" |
| | | class="thumbs-num">{{ reply.thumbsUpNum }}</text></text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | this.videoNoMore = true; |
| | | return; |
| | | } |
| | | this.videoQuery.pageNumber++; |
| | | if (res.data.code === 200) { |
| | | this.videoQuery.pageNumber++; |
| | | } |
| | | |
| | | }) |
| | | } else { |
| | |
| | | this.videoNoMore = true; |
| | | return; |
| | | } |
| | | this.videoQuery.pageNumber++; |
| | | if (res.data.code === 200) { |
| | | this.videoQuery.pageNumber++; |
| | | } |
| | | |
| | | }) |
| | | } |
| | |
| | | /* 商品链接悬挂层样式 */ |
| | | .goods-link-warp { |
| | | position: absolute; |
| | | bottom: 160px; |
| | | bottom: 100px; |
| | | left: 20px; |
| | | color: #f8f8f8; |
| | | z-index: 10; |