开发v5.9.4.1需求:

1. 推拉流清晰度档位参数调整（涉及交互）
2. H5支持隐藏底部三大键 (已完成)

pages/rtcEngine/components/CloudGroupDropdown.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="group-dropdown pt-2 pb-2">
     <!-- 设备分组下拉 -->
-    <Dropdown key="deviceList" v-model="activeDevice" :isActvie="true" @change="deviceChange" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :list="deviceGroupList" :dropdownMenuStyle="{ left: '0', top: '30px' }" :activeStyle="activeStyle">
+    <Dropdown key="deviceList" v-model="activeGroup" :isActvie="true" @visible="(visible)=>($emit('dropdownVisibleChange', visible))" :list="groupList" :prop="{value: 'id'}" :dropdownMenuStyle="{ left: '0', top: '30px' }" :activeStyle="activeStyle">
       <!-- 触发下拉 -->
-      <div class="menu-trigger"><div class="device-trigger-ex">全部设备</div><van-icon class="icon-arrow rotate-down" name="play" color="#fff" size="10" /></div>
+      <div class="menu-trigger"><div class="device-trigger-ex">{{ groupList.find(g => g.id === activeGroup).label }}</div><van-icon class="icon-arrow rotate-down" name="play" color="#fff" size="10" /></div>
     </Dropdown>
 
     <!-- 清晰度下拉 -->
@@ -49,18 +49,15 @@ export default {
       type: Number,
       default: 0,
     },
+    // 选中的设备分组id 默认-1, 代表全部设备
+    activeGroupId: {
+      type: Number,
+      default: -1,
+    },
     // 设备分组下拉菜单数据
-    deviceGroupList: {
+    groupList: {
       type: Array,
-      default: () => ([{
-        label: "批量操作批量操作批量操作",
-        icon: 'batchOperation_icon',
-        value: 'batchOperation'
-      }, {
-        label: "显示模式",
-        icon: 'showMode_icon',
-        value: 'showMode'
-      }])
+      default: () => []
     },
     // 清晰度默认值
     definitionValue: {
@@ -107,16 +104,21 @@ export default {
       activeStyle: {
         color: '#FEAE4D',
       },
-      activeDevice: 'batchOperation', // 当前选中的设备分组
       activeDefinition: this.definitionValue, // 当前选中的清晰度
     }
   },
-  methods: {
-    // 设备分组下拉框变化回调
-    deviceChange(val) {
-      console.log('设备分组变化:', val);
-      this.activeDevice = val;
+  computed: {
+    // 选中的设备分组id
+    activeGroup: {
+      get() {
+        return this.activeGroupId;
+      },
+      set(val) {
+        this.$emit("update:activeGroupId", val);
+      }
     },
+  },
+  methods: {
     // 选择清晰度
     selectFeatures(item) {
       // 更新清晰度值

pages/rtcEngine/components/CloudList.vue

@@ -2,7 +2,7 @@
   <!-- 云机列表 -->
   <div class="cloud-list-wrap" >
     <van-list :style="listStyle" :finished="false">
-      <div v-for="item in list" :key="item" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': activeId === item}" @click="activeId = item">
+      <div v-for="item in list" :key="item.userCardId" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': activeId === item.userCardId}" @click="activeId = item.userCardId">
         <!-- 云机套餐头像 -->
         <div class="cloud-id-avatar-wrap items-center pr-2">
           <van-image
@@ -13,8 +13,8 @@
         </div>
         <!-- 云机名称和ID -->
         <div class="cloud-id-desc-wrap">
-          <div class="cloud-id-name mb-1">云手机名称最多显示12位</div>
-          <div class="cloud-id-detail-wrap">ID 333434343434</div>
+          <div class="cloud-id-name mb-1">{{ item.diskName }}</div>
+          <div class="cloud-id-detail-wrap">ID {{ item.userCardId }}</div>
         </div>
       </div>
     </van-list>
@@ -29,29 +29,40 @@ export default {
     height: {
       type: String,
       default: '50px'
+    },
+    // 云机列表的选中项
+    userCardId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 当前选择的云机分组id 默认-1, 代表全部设备
+    activeGroupId: {
+      type: Number,
+      default: -1,
+    },
+    // 所有云机列表
+    cloudList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      activeId: '云机1',
-      list: [
-        '云机1',
-        '云机2',
-        '云机3',
-        '云机4',
-        '云机5',
-        '云机6',
-        '云机7',
-        '云机8',
-        '云机9',
-        '云机10'
-      ]
+      activeId: +this.userCardId,
     }
   },
   computed: {
     // 云机列表高度
     listStyle() {
       return {height: this.height, overflowY: 'auto'}
+    },
+    list() {
+      // 如果当前分组id为-1, 则返回所有云机列表
+      if(this.activeGroupId === -1 ) {
+        return this.cloudList;
+      }
+      // 过滤出当前分组的云机列表
+      return this.cloudList.filter(item => item.groupId === this.activeGroupId);
     }
   },
 }

pages/rtcEngine/components/CloudMainPanel.vue

@@ -11,10 +11,10 @@
     </div>
     <!-- 云机名称和ID -->
     <div class="cloud-id-desc-wrap">
-      <div class="cloud-id-name mb-1">云手机名称最多显示12位</div>
+      <div class="cloud-id-name mb-1">{{ cloudInfo.diskName }}</div>
       <div class="cloud-id-detail-wrap">
-        <div class="cloud-id">ID 333434343434</div>
-        <div class="cloud-id-active-group">当前分组：最多显示6个字符</div>
+        <div class="cloud-id">ID {{ userCardId }}</div>
+        <div class="cloud-id-active-group">当前分组：{{ activeGroupName }}</div>
       </div>
     </div>
   </div>
@@ -26,6 +26,38 @@
 */
 export default {
   name: 'CloudMainPanel',
+  props: {
+    // 当前云机id
+    userCardId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 云机列表
+    cloudList: {
+      type: Array,
+      default: () => ([])
+    },
+    // 分组栏目列表
+    groupList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    // 当前选择的云机分组名称
+    activeGroupName() {
+      return this.cloudInfo?.groupName || '全部设备';
+    },
+    // 当前云机信息
+    cloudInfo() {
+      // 如果当前云机id为空, 那么就返回空对象
+      if (!this.userCardId) {
+        return {};
+      }
+      // 如果当前云机id不为空, 那么就返回当前云机的信息
+      return this.cloudList.find(item => item.userCardId === +this.userCardId);
+    }
+  }
 }
 </script>
 

pages/rtcEngine/components/CloudPhoneClipboard.vue

@@ -35,13 +35,6 @@
 import Qs from 'qs';
 
 export default {
-  props: {
-    // 指令ws通道
-    doConnectDirectivesWs: {
-      type: WebSocket,
-      default: () => {}
-    }
-  },
   name: 'CloudPhoneClipboard',
   data() {
     return {

pages/rtcEngine/components/FloatBtn.vue

@@ -19,7 +19,7 @@
             danger: latency > 200
           }"
         >
-          <!-- 信号 0-50ms绿色；51-200ms黄色；201-999ms红色；最多显示999ms；变色部分为延迟变色 -->
+          <!-- 信号阶梯图 0-50ms绿色；51-200ms黄色；201-999ms红色；最多显示999ms；变色部分为延迟变色 -->
           <span class="short" />
           <span class="middle" />
           <span class="high" />
@@ -123,7 +123,7 @@ export default {
   position: absolute;
   left: 15px;
   top: 15px;
-  z-index: 1;
+  z-index: 3000;
 
   .round-outside,
   .round-small{

pages/rtcEngine/components/FunctionMenu.vue

@@ -44,7 +44,7 @@
       </div>
     </van-row>
 
-    <div class="triger-menu-wrap">
+    <div class="triger-menu-wrap" v-if="funcList.length > 4">
       <!-- 展开/收起按钮 -->
       <div class="triger-btn" @click="hideOrShow">
         {{ functionMenuVisible ? '收起' : '展开' }}
@@ -76,7 +76,7 @@ export default {
         // {label: '音量 -', code: 'volumeDown', icon: 'icon-clipboard'},
         {label: '摇一摇', code: 'shake', icon: 'icon-shake'},
         {label: '吹一吹', code: 'blow', icon: 'icon-blow'},
-        {label: '截图', code: 'screenshot', icon: 'icon-screenshot'},
+        // {label: '截图', code: 'screenshot', icon: 'icon-screenshot'},
         // {label: '重启', code: 'estart', icon: 'icon-restart'},
       ]
     }

pages/rtcEngine/components/LeftMenuPopup.vue

@@ -5,7 +5,7 @@
      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" />
+        <CloudMainPanel id="pupop-header" v-bind="$attrs" v-on="$listeners" :userCardId="userCardId" :cloudList="cloudList" />
 
         <!-- 功能区域 -->
         <FunctionMenu id="function-menu" @functionMenuVisible="scrollHeight" @funcHandle="funcHandle"/>
@@ -13,15 +13,15 @@
         <!-- 包一层是为了获取区域的height计算云机列表滚动高度 -->
         <div id="select-wrap">
           <!-- 下拉选项区 -->
-          <CloudGroupDropdown v-bind="$attrs" v-on="$listeners" :engine="engine" @dropdownVisibleChange="(val)=>(popupMaskOverflowY = val)"/>
+          <CloudGroupDropdown v-bind="$attrs" v-on="$listeners" :engine="engine" :activeGroupId.sync="activeGroupId" @dropdownVisibleChange="(val)=>(popupMaskOverflowY = val)"/>
         </div>
-        
+
         <!-- 云机列表 -->
-        <CloudList id="cloud-list" :height="`${cloudListScrollHeight}px`"/>
+        <CloudList id="cloud-list" v-bind="$attrs" v-on="$listeners" :activeGroupId="activeGroupId" :userCardId="userCardId" :cloudList="cloudList" :height="`${cloudListScrollHeight}px`"/>
 
         <!-- 退出 -->
         <div id="exit-wrap">
-          <van-button class="exit-btn" type="primary" size="small" color="#3370FF">退出并下机</van-button>
+          <van-button class="exit-btn" type="primary" size="small" color="#3370FF" @click="exit">退出并下机</van-button>
         </div>
       </div>
     </van-popup>
@@ -46,9 +46,14 @@ export default {
       default: () => ({})
     },
     userCardId: {
-      type: String,
+      type: [String, Number],
       default: ''
     },
+    // 云机列表
+    cloudList: {
+      type: Array,
+      default: () => []
+    },
     // popup是否显示
     levitatedSphereVisible: {
       type: Boolean,
@@ -114,11 +119,11 @@ export default {
        * 解决方法: 在下拉框弹出时,设置popupMaskOverflowY为true, 关闭下拉框时,设置popupMaskOverflowY为false
        * */
       popupMaskOverflowY: true,
+
+      // 当前选择的云机分组id 默认-1, 代表全部设备
+      activeGroupId: -1,
     }
   },
-  computed: {
-    
-  },
   watch: {
     levitatedSphereVisible(val) {
       // 弹窗显示时，获取云机列表的高度
@@ -182,6 +187,56 @@ export default {
     showChange(val){
       this.$emit('update:levitatedSphereVisible', val);
     },
+    async exit(){
+      try {
+        const activeCloud = this.cloudList.find(item => item.userCardId === +this.userCardId);
+        // 判断当前云机
+        // 1、2、3：年卡、普通计时、自动续费普通计时卡
+        if ([1, 2, 3].includes(activeCloud.userCardType)) {
+          this.$dialog.alert({
+              title: '提示',
+              message: '确定退出云手机并下机',
+              confirmButtonText: '确定',
+              confirmButtonColor: '#3cc51f',
+              showCancelButton: true,
+              beforeClose: (action, done) => {
+                if (action === 'cancel') done()
+
+                if (action === 'confirm') {
+                  this.$axios.get('/resources/yearMember/downline?userCardId=${this.userCardId}`')
+                  .then((res) => {
+                    if(!res.status){
+                      done(true);
+                      // 判断是否是顶级窗口（不是嵌套在 iframe 中）目前只有ios的浏览器中才会是顶级窗口
+                      const isTopWindow = window.parent === window.self;
+                      if(isTopWindow){
+                        // 通信给h5项目告知是退出并下机
+                        parent.postMessage({ type: 'exit' }, '*');
+                        uni.postMessage({ data: { type: 'exit' }});
+                      }
+
+                      // 关闭popup
+                      this.$emit('update:levitatedSphereVisible', false);
+
+                      this.$emit('exit');
+                    } else {
+                      done(false);
+                      this.$toast(res.msg);
+                    }
+                  });
+                }
+              }
+          })
+        } else {
+          // 关闭popup
+          this.$emit('update:levitatedSphereVisible', false);
+
+          this.$emit('exit');
+        }
+      } catch (error) {
+        
+      }
+    }
   }
 }
 </script>

pages/rtcEngine/components/RightPopup.vue

@@ -48,7 +48,7 @@ export default {
       default: () => ({})
     },
     userCardId: {
-      type: String,
+      type: [String, Number],
       default: ''
     },
     // popup是否显示

pages/rtcEngine/mixins/public.js

@@ -9,6 +9,8 @@ data() {
       // 套餐类型
       mealTypeList: [],
       mealTypeObj: {},
+      // 分组栏
+      groupList: []
     }
   },
   methods: {
@@ -30,15 +32,10 @@ data() {
     async getCloudList() {
       try {
         const result = await this.$axios.get('/resources/v6/client/device/info/getDeviceList');
-        console.log('获取云手机列表', result)
-        console.log('获取云手机列表', result.status === 200, result.data.status === 0, result.data.success)
         if(result.status === 200 && result.data.status === 0 && result.data.success) {
-          console.log('获取云手机列表1')
           this.cloudList = result.data.data.diskInfo ?? [];
         }
-        console.log('获取云手机列表2')
       } catch (error) {
-        console.log('获取云手机列表3')
         console.error('获取云手机列表失败', error)
       }
     },
@@ -46,16 +43,14 @@ data() {
     async getMealIconInfo() {
       try {
         const result = await this.$axios.get('/pay/v2/meal/info/getMealIconInfo');
-        console.log('获取套餐图标数据', result)
+
         if(result.status === 200 && result.data.status === 0 && result.data.success) {
-          console.log('获取套餐图标数据1')
-          
           const res = result.data;
           let obj = {} // eg: {VIP7: xxx, VIP10: xxx, SVIP7: xxx,...}
             let casualObj = {} // eg: {VIP: xxx, SVIP: xxx}
             let mealTypeList = [] // eg: [{label:xxx, value: xxx, previewUrl: xxx, androidVersionList: [7,10]}, ...]
             let mealTypeObj = {} // 同obj对象
-            let index = 0
+            let index = 0; // 数据位置
             for (let i of res.data) {
               if (!casualObj[i.phoneType]) {
                 casualObj[i.phoneType] = {
@@ -91,12 +86,34 @@ data() {
   
             console.log('套餐图标数据', mealTypeList, mealTypeObj)
         }
-        console.log('获取套餐图标数据2')
       } catch (error) {
-        console.log('获取套餐图标数据3')
         console.error('获取套餐图标数据失败', error)
       }
-
     },
+    // 获取云机分组标识号
+    async getCloudGroupId() {
+      try {
+        const result = await this.$axios.get('/resources/v6/client/group/list');
+        if(result.status === 200 && result.data.status === 0 && result.data.success) {
+          // 统计所有分组的云机数量
+          let count = result.data.data.reduce((pre, g) => {
+            // 组合分组名称和数量
+            g.label = `${g.groupName}(${g.groupCount})`;
+            // 统计所有分组的云机数量
+            return pre + g.groupCount;
+          }, 0);
+
+          result.data.data.unshift({
+            id: -1, // -1 全部分组(前端自定义值) -10 被授权列表 0 未分组 
+            groupName: '全部分组',
+            groupCount: count,
+            label: `全部分组(${count})`,
+          })
+          this.groupList = result.data.data;
+        }
+      } catch (error) {
+        
+      }
+    }
   }
 }

pages/rtcEngine/rtc.vue

@@ -20,6 +20,9 @@
       :userCardId="this.parametersData.userCardId"
       :levitatedSphereVisible.sync="levitatedSphereVisible"
       :latency="rtcNetwork.currentRoundTripTime"
+      :groupList="groupList"
+      :cloudList="cloudList"
+      :mealTypeObj="mealTypeObj"
       @shearplate="shearplate"
       @funcHandle="funcHandle"
       @exit="exit"
@@ -32,7 +35,7 @@
     <InputCopy ref="inputCopyRef" @openPasteboard="openPasteboard"/>
 
     <!-- 云机内部的粘贴板内容 -->
-    <CloudPhoneClipboard ref="cloudPhoneClipboardRef" :doConnectDirectivesWs="doConnectDirectivesWs"/>
+    <CloudPhoneClipboard ref="cloudPhoneClipboardRef"/>
 
     <!-- 超时无操作 -->
     <TimeoutNoOps ref="timeoutNoOpsRef" />
@@ -189,8 +192,12 @@ export default {
     // 获取页面传递参数
     this.parametersData = this.$route.query;
 
+    // 获取用户所有云机列表
     this.getCloudList();
+    // 获取所有云机套餐信息
     this.getMealIconInfo();
+    // 获取云机分组
+    this.getCloudGroupId();
   },
   computed: {
     // 是否为微信浏览器环境
@@ -725,6 +732,14 @@ export default {
           // 粘贴板按钮
           this.shearplate();
           break;
+        case 'shake':
+          // 摇一摇
+
+          break;
+        case 'blow':
+          // 吹一吹
+
+          break;
       }
     },
     // 重新设置视频尺寸