Переглянути джерело

优化组件获取userCardId参数

t_finder 5 днів тому
батько
коміт
884429ab3b

+ 12 - 7
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.userCardId" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': activeId === item.userCardId}" @click="activeId = item.userCardId">
+      <div v-for="item in list" :key="item.userCardId" class="cloud-list-item-wrap flex" :class="{'cloud-list-item-active': userCardId === item.userCardId}" @click="changeCloud(item)">
         <!-- 云机套餐头像 -->
         <div class="cloud-id-avatar-wrap items-center pr-2">
           <van-image
@@ -30,7 +30,7 @@ export default {
       type: String,
       default: '50px'
     },
-    // 云机列表的选中项
+    // 当前云机id
     userCardId: {
       type: [String, Number],
       default: ''
@@ -51,11 +51,6 @@ export default {
       default: () => () => {}
     }
   },
-  data() {
-    return {
-      activeId: +this.userCardId,
-    }
-  },
   computed: {
     // 云机列表高度
     listStyle() {
@@ -70,6 +65,16 @@ export default {
       return this.cloudList.filter(item => item.groupId === this.activeGroupId);
     }
   },
+  methods: {
+    // 切换云机
+    changeCloud(item) {
+      // 如果当前云机id和选中的云机id相同, 则不做任何操作
+      if(+this.userCardId === item.userCardId) return;
+      this.$emit('changeCloud', item);
+      // 关闭popup
+      this.$emit('update:levitatedSphereVisible', false);
+    }
+  }
 }
 </script>
 

+ 0 - 1
pages/rtcEngine/components/CloudMainPanel.vue

@@ -65,7 +65,6 @@ export default {
     },
     // 当前云机套餐的图标
     iconUrl() {
-      console.log(this.cloudInfo);
       return this.imgFun(this.cloudInfo.buyVipType, this.cloudInfo.androidVersion);
       
     }

+ 5 - 0
pages/rtcEngine/components/FunctionMenu.vue

@@ -98,12 +98,17 @@ export default {
         this.$nextTick(() => {
           // 切换状态
           item.status = !item.status;
+
+          // 关闭popup
+          this.$emit('update:levitatedSphereVisible', false);
         });
         return;
       }
       
       // 触发父组件事件
       this.$emit('funcHandle', item);
+      // 关闭popup
+      this.$emit('update:levitatedSphereVisible', false);
     }
   }
 }

+ 1 - 13
pages/rtcEngine/components/LeftMenuPopup.vue

@@ -8,7 +8,7 @@
         <CloudMainPanel id="pupop-header" v-bind="$attrs" v-on="$listeners" :userCardId="userCardId" :cloudList="cloudList" />
 
         <!-- 功能区域 -->
-        <FunctionMenu id="function-menu" @functionMenuVisible="scrollHeight" @funcHandle="funcHandle"/>
+        <FunctionMenu id="function-menu" @functionMenuVisible="scrollHeight" v-bind="$attrs" v-on="$listeners" />
 
         <!-- 包一层是为了获取区域的height计算云机列表滚动高度 -->
         <div id="select-wrap">
@@ -91,11 +91,6 @@ export default {
           '流畅': { width: 360, height: 640, fps: 20 },
       })
     },
-    // url中获取的参数, 父组件传递
-    parametersData: {
-      type: Object,
-      default: () => ({})
-    },
   },
   components: {
     CloudMainPanel,
@@ -162,13 +157,6 @@ export default {
         this.cloudListScrollHeight = 100;
       }
     },
-    // 处理功能菜单的事件
-    funcHandle(val){
-      // 关闭popup
-      this.$emit('update:levitatedSphereVisible', false);
-      // 触发父组件事件
-      this.$emit('funcHandle', val);
-    },
     /**
 		 * 根据卡套餐获取对应图标
 		 * @method imgFun 

+ 16 - 8
pages/rtcEngine/components/TimeBalance.vue

@@ -52,6 +52,16 @@
 export default {
   name: 'TimeBalance',
   props: {
+    // 当前云机id
+    userCardId: {
+      type: [String, Number],
+      default: ''
+    },
+    // 云机的类型  0 普通套餐 1、2、3:年卡、普通计时、自动续费普通计时 
+    userCardType: {
+      type: [String, Number],
+      default: ''
+    },
     // url中获取的参数, 父组件传递
     parametersData: {
       type: Object,
@@ -83,13 +93,13 @@ export default {
     // 获取云机剩余时长
     async getResidueTime() {
         clearInterval(this.countdownTimeInterval)
-        const { userCardType, isShowCountdown, isShowRule, userCardId } = this.parametersData;
-        if (![1, 2, 3].includes(+userCardType)) return;
-        const res = await this.$axios.get(`/resources/yearMember/getResidueTime?userCardId=${userCardId}`);
+        const { isShowCountdown, isShowRule } = this.parametersData;
+        if (![1, 2, 3].includes(+this.userCardType)) return;
+        const res = await this.$axios.get(`/resources/yearMember/getResidueTime?userCardId=${this.userCardId}`);
         let time = res.data;
         if (!res.status) {
           this.countdownTime = this.residueTimeStamp(time);
-          await this.$axios.get(`/resources/yearMember/startTime?userCardId=${userCardId}`);
+          await this.$axios.get(`/resources/yearMember/startTime?userCardId=${this.userCardId}`);
           // 计时卡显示
           if (+isShowCountdown) this.timingVisible = true;
           // 计费规则显示
@@ -109,8 +119,7 @@ export default {
     },
     // 关闭倒计时弹窗
     handlecountdownTimeClose() {
-      const { userCardId } = this.parametersData;
-      this.$axios.get(`/resources/yearMember/closeRemind?userCardId=${userCardId}`).then(res => {
+      this.$axios.get(`/resources/yearMember/closeRemind?userCardId=${this.userCardId}`).then(res => {
         if (!res.status) {
           clearInterval(this.countdownTimeInterval);
           this.timingVisible = false;
@@ -121,8 +130,7 @@ export default {
     },
     // 获取推荐列表
     getRecommend() {
-      const { userCardId } = this.parametersData;
-      this.$axios.get(`/public/v1/market/get/recommend?userCardId=${userCardId}`).then(res => {
+      this.$axios.get(`/public/v1/market/get/recommend?userCardId=${this.userCardId}`).then(res => {
         if (!res.status) {
           this.billingRulesVisible = false;
           this.recommendList = res.data;

+ 34 - 16
pages/rtcEngine/rtc.vue

@@ -17,7 +17,7 @@
     <LeftMenuPopup
       ref="leftMenuPopupRef"
       :engine="engine"
-      :userCardId="this.parametersData.userCardId"
+      :userCardId="activeCloud.userCardId"
       :levitatedSphereVisible.sync="levitatedSphereVisible"
       :latency="rtcNetwork.currentRoundTripTime"
       :groupList="groupList"
@@ -25,11 +25,12 @@
       :mealTypeObj="mealTypeObj"
       :imgFun="imgFun"
       @funcHandle="funcHandle"
+      @changeCloud="changeCloudHandle"
       @exit="exit"
     />
     
     <!-- 右侧popup -->
-    <!-- <RightPopup ref="rightPopupRef" :engine="engine" :userCardId="this.parametersData.userCardId" :levitatedSphereVisible.sync="levitatedSphereVisible" @shearplate="shearplate" @exit="exit"/> -->
+    <!-- <RightPopup ref="rightPopupRef" :engine="engine" :userCardId="activeCloud.userCardId" :levitatedSphereVisible.sync="levitatedSphereVisible" @shearplate="shearplate" @exit="exit"/> -->
 
     <!-- 输入并复制到粘贴板 -->
     <InputCopy ref="inputCopyRef" @openPasteboard="openPasteboard"/>
@@ -41,7 +42,7 @@
     <TimeoutNoOps ref="timeoutNoOpsRef" />
 
     <!-- 计时卡计时 | 计费规则 | 应用推荐 -->
-    <TimeBalance ref="timeBalanceRef" :parametersData="parametersData" @downline="$refs.rightPopupRef.downline()"/>
+    <TimeBalance ref="timeBalanceRef" :parametersData="parametersData" :userCardId="activeCloud.userCardId" :userCardType="parametersData.userCardType" @downline="$refs.rightPopupRef.downline()"/>
   </div>
 </template>
 
@@ -153,10 +154,10 @@ export default {
         /**
          * @description: 传递的参数
          * @param {String} record 数据id
-         * @param {Number} userCardId 云机的id
+         * @param {Number} userCardId 必传 云机的id
          * @param {String} mealType 云机套餐类型 eg: VIP、STARBALL...
          * @param {Number} sourceType 云机来源: 0:购买  1试用 2:免费激活码 3:免费活动抽奖 4:ar app注册 5:9.9元套餐年卡 ',
-         * @param {Number} userCardType 云机的类型  0 普通套餐 1、2、3:年卡、普通计时、自动续费普通计时 
+         * @param {Number} userCardType 必传 云机的类型  0 普通套餐 1、2、3:年卡、普通计时、自动续费普通计时 
          * @param {Number} validTime 卡的有效期
          * @param {String} rm 卡所在的机房
          * @param {Number} isShowCountdown 是否显示倒计时 0:否 1:是
@@ -165,12 +166,16 @@ export default {
          * @param {String} isFirstConnect 是否是首次连接
          * @param {Number} authPhone  0自身购买的云手机 1获取得到的云手机
          * @param {String} username 用户名
-         * @param {String} token token
-         * @param {Number} isTips 是否显示提示 0:否 1:是
-         * @param {Number} isWeixin 是否是微信小程序环境 0:否 1:是
-         * @param {String} merchantSign 商户标识
+         * @param {String} token 必传 token
+         * @param {Number} isTips 必传 是否显示提示 0:否 1:是
+         * @param {Number} isWeixin 必传 是否是微信小程序环境 0:否 1:是
+         * @param {String} merchantSign 必传 商户标识
          */
       },
+
+      // 当前使用的云机数据
+      activeCloud: {},
+
       // 卡的连接信息
       connectData: {},
       // 云手机引擎 播放器实例
@@ -193,7 +198,11 @@ export default {
     this.parametersData = this.$route.query;
 
     // 获取用户所有云机列表
-    this.getCloudList();
+    await this.getCloudList();
+
+    // 获取当前云机信息
+    this.activeCloud = this.cloudList.find(item => item.userCardId === +this.parametersData.userCardId);
+
     // 获取所有云机套餐信息
     this.getMealIconInfo();
     // 获取云机分组
@@ -208,8 +217,9 @@ export default {
   created() {
     this.$toast.loading({
         duration: 0, // 持续展示 toast
-        message: '数据加载中...',
+        message: `设备(${this.activeCloud.userCardId})正在获取...`,
     });
+
     // 设置html标签的背景为黑色
     document.body.style.background = '#000';
 
@@ -329,14 +339,13 @@ export default {
       }
     },
     // 获取卡的信息
-    async getConnectData(params) {
-      let userCardId = params.userCardId;
+    async getConnectData({isWeixin, merchantSign}) {
+      let userCardId = this.activeCloud.userCardId;
       try {
         // 设置上报参数
         this.logReportObj.setParams({userCardId});
 
         let isWx = this.$userAgent.isWx;
-        let { isWeixin } = params;
         let clientType = (+isWeixin || isWx) ? 'wx' : undefined;
 
         // 设置上报参数
@@ -345,7 +354,7 @@ export default {
 
         const res = await this.$axios.$post('/resources/user/cloud/connect', { userCardId }, {
           headers: {
-            merchantSign: params.merchantSign,
+            merchantSign,
           },
         });
         if (!res.success) {
@@ -476,7 +485,7 @@ export default {
             `webRtc连接,获取请求中转地址为空:
             url: /api/resources/user/cloud/connect
             method: post
-            参数: ${JSON.stringify({ userCardId: this.parametersData.userCardId })}
+            参数: ${JSON.stringify({ userCardId: this.activeCloud.userCardId })}
             响应: ${JSON.stringify(res)}`
           );
           return Promise.reject(new Error('网络分析请求地址不存在'));
@@ -750,6 +759,15 @@ export default {
           break;
       }
     },
+    // 切换云机
+    async changeCloudHandle(cloudData) {
+      try {
+        // 保存当前云机数据
+        this.activeCloud = cloudData;
+      } catch (error) {
+        console.log('changeCloud error', error);
+      }
+    },
     // 重新设置视频尺寸
     changeVideoStyle() {
       this.$nextTick(() => {