| | |
| | | <view class="video-container"> |
| | | <!-- 视频加载 --> |
| | | <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading> |
| | | <view class="showLeft" @click="showDrawer('showLeft')" v-if="!showLeft"> |
| | | <view class="showLeft" @click="showDrawer('showLeft')" v-if="!showLeft" :style="{top: buttonHeight+'px'}"> |
| | | <uni-icons type="right" size="30"></uni-icons> |
| | | </view> |
| | | <!-- 视频列表 --> |
| | |
| | | :autoplay="index === currentIndex" |
| | | :controls="false" |
| | | :loop="true" |
| | | :object-fit="item.objectFit" |
| | | :object-fit="item.videoFit" |
| | | :enable-progress-gesture="false" |
| | | :show-center-play-btn="false" |
| | | class="video-item" |
| | |
| | | @touchstart.stop="handleTouchStart" |
| | | @touchmove.stop="handleTouchMove" |
| | | @touchend.stop="handleTouchEnd" |
| | | :style="{bottom: marginBottom + 'px'}" |
| | | class="container"> |
| | | <!-- 进度条 - 整个区域可拖动 --> |
| | | <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }"> |
| | |
| | | |
| | | |
| | | <!-- 视频信息层 --> |
| | | <view class="video-info"> |
| | | <view class="video-info" :style="{bottom: marginBottom + 20 + 'px'}"> |
| | | <view> |
| | | <text class="video-author">@{{item.authorName}}</text> |
| | | </view> |
| | |
| | | </view> |
| | | </view> |
| | | </uni-popup> |
| | | <uni-drawer ref="showLeft" mode="left" width="120" :cus-style="true" height="93vh" |
| | | @change="change($event,'showLeft')" class="navigationLeft"> |
| | | <uni-drawer ref="showLeft" mode="left" width="120" :cus-style="true" height="80vh" |
| | | @change="change($event,'showLeft')" class="navigationLeft" :drawerTop="buttonHeight"> |
| | | <scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false"> |
| | | <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}" |
| | | @click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id"> |
| | |
| | | </scroll-view> |
| | | </uni-drawer> |
| | | <view v-if="videoList.length===0" style="display: flex;align-items: center;justify-content: center;background-color: #fff;height: 100%">当前没有可以查看的视频</view> |
| | | |
| | | <custom-tabbar bgColor="#ffffff" selected="kitchen"></custom-tabbar> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | buttonHeight:0, |
| | | showLeft:false, |
| | | currentCategort: '', |
| | | categoryList: [], |
| | |
| | | pageSize: 6, |
| | | videoFrom: 'recommend', |
| | | videoType: 'cook' |
| | | } |
| | | }, |
| | | marginBottom: 0 // 底部安全区域 |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | this.startHidenTime = Date.now() |
| | | }, |
| | | onLoad() { |
| | | this.getKitchenTypeList(); |
| | | this.loadVideos(); |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | // 获取状态栏高度 |
| | | const systemInfo = uni.getSystemInfoSync(); |
| | | this.buttonHeight = systemInfo.statusBarHeight; |
| | | this.getKitchenTypeList(); |
| | | this.loadVideos(); |
| | | }, |
| | | onReady() { |
| | | // 初始化视频上下文 |
| | |
| | | |
| | | .showLeft { |
| | | display: flex; |
| | | top: 50rpx; |
| | | left: 0; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | |
| | | .video-item { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | } |
| | | |
| | | .play-icon { |
| | |
| | | } |
| | | |
| | | .typeNavigationItem { |
| | | padding: 24rpx; |
| | | font-size: 28rpx; |
| | | color: black; |
| | | margin-top: 10rpx; |
| | | border-radius: 12rpx; |
| | | border: 1rpx solid gray; |
| | | padding: 24rpx; |
| | | font-size: 28rpx; |
| | | color: black; |
| | | margin-top: 10rpx; |
| | | } |
| | | |
| | | |
| | | .typeNavigationItemCheck { |
| | | background-color: #42b993; |
| | | color: #fff; |
| | | border: 0; |
| | | color: #ef321e; |
| | | font-size: 32rpx; |
| | | font-weight: bold; |
| | | border: 0; |
| | | } |
| | | |
| | | .container ::v-deep .navigationLeft .uni-drawer__content { |