绿满眶商城微信小程序-uniapp
peng
2025-07-03 7e6ac79baa48aa30a98e5343e013a9120f3dabae
pages/kitchen/KitchenVideo.vue
@@ -1,5 +1,15 @@
<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'}">
@@ -242,7 +252,7 @@
        </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}"
@@ -280,6 +290,13 @@
  },
  data() {
    return {
      choosePlat:[
         {type:'platForm',name:'平台'},
         {type:'custom',name:'用户'}
      ],
      chooseType:'platForm',
     leftHeight:null,
     menueButton:0,
     buttonHeight:0,
      showLeft:false,
      currentCategort: '',
@@ -358,7 +375,7 @@
    }
  },
  onShow() {
    this.showDrawer('showLeft')
    // this.showDrawer('showLeft')
    this.loadVideos()
    // 如果视频按下暂停后切换页面再回到页面时,只算暂停时间(因为暂停时间和离开页面时间是重复的,只算一个)
    if (this.startHidenTime !== 0 && this.currentVideoIsPlaying) {
@@ -373,7 +390,15 @@
   this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
   // 获取状态栏高度
   const systemInfo = uni.getSystemInfoSync();
   this.buttonHeight = systemInfo.statusBarHeight;
     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();
  },
@@ -954,7 +979,42 @@
::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%;
@@ -970,7 +1030,7 @@
  background-color: #b6b6b6;
  opacity: 0.8;
  position: fixed;
  z-index: 999;
  z-index: 99999;
  height: 70rpx;
  width: 50rpx;
  border-radius: 0 50% 50% 0;