| | |
| | | <template> |
| | | <view class="video-container"> |
| | | <view class="choosePlatType" :style="{top: menueButton + 'px'}"> |
| | | <view class="platTypeItem" v-for="item in choosePlat" :key="item.type" @click="chooseType=item.type"> |
| | | <view class="platTypeItenName"> |
| | | {{item.name}} |
| | | </view> |
| | | <view class="platTypeItemChoose" v-if="chooseType===item.type" > |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | <!-- 视频加载 --> |
| | | <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading> |
| | | <view class="showLeft" @click="showDrawer('showLeft')" v-if="!showLeft" :style="{top: buttonHeight+'px'}"> |
| | |
| | | </view> |
| | | </view> |
| | | </uni-popup> |
| | | <uni-drawer ref="showLeft" mode="left" width="120" :cus-style="true" height="80vh" |
| | | <uni-drawer v-if="leftHeight" ref="showLeft" mode="left" width="120" :cus-style="true" :height="`${leftHeight}px`" |
| | | @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}" |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | choosePlat:[ |
| | | {type:'platForm',name:'平台'}, |
| | | {type:'custom',name:'用户'} |
| | | ], |
| | | chooseType:'platForm', |
| | | leftHeight:null, |
| | | menueButton:0, |
| | | buttonHeight:0, |
| | | showLeft:false, |
| | | currentCategort: '', |
| | |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.showDrawer('showLeft') |
| | | // this.showDrawer('showLeft') |
| | | this.loadVideos() |
| | | // 如果视频按下暂停后切换页面再回到页面时,只算暂停时间(因为暂停时间和离开页面时间是重复的,只算一个) |
| | | if (this.startHidenTime !== 0 && this.currentVideoIsPlaying) { |
| | |
| | | this.startHidenTime = Date.now() |
| | | }, |
| | | onLoad() { |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | // 获取状态栏高度 |
| | | const systemInfo = uni.getSystemInfoSync(); |
| | | this.buttonHeight = systemInfo.statusBarHeight; |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | // 获取状态栏高度 |
| | | const systemInfo = uni.getSystemInfoSync(); |
| | | console.log('systemInfo------------------------>',systemInfo.windowHeight) |
| | | const menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
| | | console.log('menuButtonInfo--------------------------->',menuButtonInfo) |
| | | const {top,height} = menuButtonInfo |
| | | this.buttonHeight = systemInfo.statusBarHeight+height; |
| | | this.menueButton = top; |
| | | console.log('systemInfo.safeAreaInsets.bottom>',systemInfo.safeAreaInsets.bottom) |
| | | this.leftHeight = systemInfo.windowHeight - top -50 - systemInfo.safeAreaInsets.bottom -22; |
| | | console.log('-------------leftHeight------------------------>',this.leftHeight) |
| | | this.getKitchenTypeList(); |
| | | this.loadVideos(); |
| | | }, |
| | |
| | | ::v-deep .custom-tabbar { |
| | | border-top: none !important; |
| | | } |
| | | |
| | | .choosePlatType{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | position: fixed; |
| | | z-index: 9999; |
| | | left: 0; |
| | | right: 0; |
| | | |
| | | } |
| | | .platTypeItem{ |
| | | width: 80rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | height: 60rpx; |
| | | |
| | | } |
| | | .platTypeItem:nth-child(n+1){ |
| | | margin-left: 32rpx; |
| | | } |
| | | .platTypeItemChoose{ |
| | | margin-top: 15rpx; |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background-color: #fff; |
| | | height: 4rpx; |
| | | border-radius: 5rpx; |
| | | } |
| | | .platTypeItenName{ |
| | | color: #fff; |
| | | font-weight: bold; |
| | | font-size: 32rpx; |
| | | } |
| | | .video-container { |
| | | position: relative; |
| | | width: 100%; |
| | |
| | | background-color: #b6b6b6; |
| | | opacity: 0.8; |
| | | position: fixed; |
| | | z-index: 999; |
| | | z-index: 99999; |
| | | height: 70rpx; |
| | | width: 50rpx; |
| | | border-radius: 0 50% 50% 0; |