android-cloud-H5/pages/rtcEngine/components/LeftMenuPopup.vue

<template>
  <!-- 左侧弹窗 -->
  <div class="left-menu-popup">
    <van-popup :value="levitatedSphereVisible" class="levitated-sphere-drawer" :class="{'overflow-y-initial': popupMaskOverflowY}" @input="showChange" position="left"
     overlay-class="levitated-sphere-overlay" :overlay-style="{'background-color': 'transparent !important'}" :style="{ height: '100%', 'background-color': '#2C2C2D' }">
      <div class="menu-wrap">
        <!-- 头部云机id等信息 -->
        <CloudMainPanel id="pupop-header" />

        <!-- 功能区域 -->
        <FunctionMenu id="function-menu" @functionMenuVisible="scrollHeight" @funcHandle="funcHandle"/>

        <!-- 包一层是为了获取区域的height计算云机列表滚动高度 -->
        <div id="select-wrap">
          <!-- 下拉选项区 -->
          <CloudGroupDropdown v-bind="$attrs" v-on="$listeners" :engine="engine" @dropdownVisibleChange="(val)=>(popupMaskOverflowY = val)"/>
        </div>
        
        <!-- 云机列表 -->
        <CloudList id="cloud-list" :height="`${cloudListScrollHeight}px`"/>

        <!-- 退出 -->
        <div id="exit-wrap">
          <van-button class="exit-btn" type="primary" size="small" color="#3370FF">退出并下机</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as uni from '../../../static/static/js/uni.webview.1.5.2.js';

import CloudMainPanel from './CloudMainPanel.vue';
import FunctionMenu from './FunctionMenu.vue';
import CloudList from './CloudList.vue';
import CapsuleSelect from './CapsuleSelect.vue';
import CloudGroupDropdown from './CloudGroupDropdown.vue';

export default {
  name: 'LeftMenuPopup',
  props: {
    // 拉流渲染引擎实例
    engine: {
      type: Object,
      default: () => ({})
    },
    userCardId: {
      type: String,
      default: ''
    },
    // popup是否显示
    levitatedSphereVisible: {
      type: Boolean,
      default: false,
    },
    // 清晰度默认值
    definitionValue: {
      type: String,
      default: ()=> localStorage.getItem('definitionValue') ?? '自动',
    },
    // 清晰度列表
    definitionList: {
      type: Array,
      default: () => [{
            name: '自动',
            value: 2800
        }, {
            name: '高清',
            value: 2800
        }, {
            name: '标清',
            value: 1500,
        }, {
            name: '流畅',
            value: 1000,
        }]
    },
    // 清晰度对应分辨率和帧率列表
    resolutionRatioList: {
      type: Object,
      default: () => ({
          '自动': { width: 720, height: 1280, fps: 30 },
          '高清': { width: 720, height: 1280, fps: 30 },
          '标清': { width: 540, height: 960, fps: 25 },
          '流畅': { width: 360, height: 640, fps: 20 },
      })
    },
    // url中获取的参数, 父组件传递
    parametersData: {
      type: Object,
      default: () => ({})
    },
  },
  components: {
    CloudMainPanel,
    FunctionMenu,
    CloudList,
    CapsuleSelect,
    CloudGroupDropdown,
  },
  data() {
    return {
      // 当前清晰度
      actDefinition: this.definitionValue,
      // 云机列表高度
      cloudListScrollHeight: 0,

      /**
       * popup遮罩的overflow-y属性是否启用
       * @type {Boolean}
       * @description 解决下拉框的遮罩会裁剪的问题, 当下拉框弹出时,需设置此属性,否则下拉框的遮罩会裁剪
       * 下拉框弹出时,点击任意地方可以关闭下拉框, 但是遮罩的overflow-y属性会被设置为hidden, 导致下拉框的遮罩会裁剪
       * 解决方法: 在下拉框弹出时,设置popupMaskOverflowY为true, 关闭下拉框时,设置popupMaskOverflowY为false
       * */
      popupMaskOverflowY: true,
    }
  },
  computed: {
    
  },
  watch: {
    levitatedSphereVisible(val) {
      // 弹窗显示时，获取云机列表的高度
      if (val) {
        this.$nextTick(() => {
          this.scrollHeight();
        });
      }
    },
  },
  methods: {
    // 获取并设置云机列表的滚动高度
    // 1. 显示弹窗时，获取云机列表的高度
    // 2. 功能展开及收起时，获取云机列表的高度
    scrollHeight() {
      try {
        // 获取popup总高度
        let popupHheight = document.getElementsByClassName('levitated-sphere-drawer')[0]?.offsetHeight ?? 0;
        // 获取顶部云机id等信息高度
        let headerHeight = document.getElementById('pupop-header')?.offsetHeight ?? 0;
        // 获取功能区域高度
        let functionMenuHeight = document.getElementById('function-menu').offsetHeight ?? 0;
        // 获取下拉选项区高度
        let selectWrapHeight = document.getElementById('select-wrap').offsetHeight ?? 0;
        // 获取退出按钮高度
        let exitWrapHeight = document.getElementById('exit-wrap').offsetHeight ?? 0;

        // 计算出云机列表的高度
        let scrollHeight = popupHheight - headerHeight - functionMenuHeight - selectWrapHeight - exitWrapHeight;

        // 如果计算出的云机列表的高度小于100，那么就设置为100, 防止云机列表高度为0
        scrollHeight < 100 ? this.cloudListScrollHeight = 100 : this.cloudListScrollHeight = scrollHeight;
      } catch (error) {
        console.error('Error calculating scroll height:', error);
        // 如果计算失败，则设置为0
        this.cloudListScrollHeight = 100;
      }
    },
    // 处理功能菜单的事件
    funcHandle(val){
      // 关闭popup
      this.$emit('update:levitatedSphereVisible', false);
      // 触发父组件事件
      this.$emit('funcHandle', val);
    },
    /**
		 * 根据卡套餐获取对应图标
		 * @method imgFun 
		 * @param {String} type--1 套餐类型 VIP|SVIP|STARRYSKY
		 * @param {String} androidVersion--2 安卓系统版本
		 * @param {String} key='previewUrl'--3 ['previewUrl' | 'phonePreviewUrl'] 判断是预览图还是套餐图标用的
		 * @returns {String} 图片路径
		 * 
		*/
		imgFun(type, androidVersion = '', key = 'previewUrl') {
			let obj = this.mealTypeObj[type + androidVersion]
			// obj[key]的值是default或defaultPhonePreviewUrl时候,就是后端没有返回图标还有预览图过来，显示默认的
			return obj[key] === 'default' ? '/static/img/userMealUpgradeVO_icon.png' : (obj[key] === 'defaultPhonePreviewUrl' ?
				this.remoteImgUrl + 'defalut-preview.png' : obj[key])
		},
    showChange(val){
      this.$emit('update:levitatedSphereVisible', val);
    },
  }
}
</script>

<style lang="scss" scoped>
// 文字高亮颜色
$active-color: #FEAE4D;
.left-menu-popup {
  // 当胶囊下拉框(下拉选项区)弹出时,需设置此属性,否则下拉框的遮罩会裁剪
  .levitated-sphere-drawer.overflow-y-initial{
    overflow-y: initial !important;
  }

  .menu-wrap{
    width: 300px;
    display: flex;
    flex-direction: column;

    #exit-wrap{
      padding: 9px 0;
      background-color: #1F1F1F;
      .exit-btn{
        width: 200px;
      }
    }
  }
}
</style>