android-cloud-H5/components/disk.vue

<template>
  <div
    :data-id="diskInfo && diskInfo.id"
    class="disk reverse flex flex-col h-full"
  >
    <header class="disk-header"></header>
    <main class="disk-main flex-auto"></main>
    <footer class="disk-footer h-50rpx"></footer>
    <v-overlay absolute :value="loading">
      <div class="flex flex-col justify-center items-center">
        <v-progress-circular indeterminate class="w-32rpx h-32rpx"></v-progress-circular>
        <div v-if="loadingLabel" class="label mt-2">{{ loadingLabel }}</div>
      </div>
    </v-overlay>
  </div>
</template>

<script>
export default {
  name: 'Disk',
  props: {
    userCardId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      diskInfo: null,
      connectInfo: null,
      loading: false,
      loadingLabel: null,
    };
  },
  async fetch() {
    // await this.getDiskInfo();
  },
  watch: {
    userCardId: {
      async handler(userCardId) {
        if (userCardId) {
          try {
            this.loading = true;
            await this.getDiskInfo(userCardId);
            await this.connect(userCardId);
          } finally {
            this.loading = false;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 查询云机
    async getDiskInfo(userCardId) {
      const res = await this.$axios.$get(
        '/resources/v5/client/disk/info/userCard/single',
        {
          params: {
            userCardId,
          },
        },
      );
      this.diskInfo = res.data;
    },

    /**
     * 轮询连接云机，因为超分需要挂载
     * @param {number} userCardId
     * @param {number} 超时
     */
    async connect(userCardId) {
      const getConnectData = () =>
        this.$axios.$post('/resources/user/cloud/connect', {
          userCardId,
        });
      const res = await getConnectData().catch((error) => {
        if (error.response.data.status === 5200) {
          // 云手机挂载中, 开启轮询
          return new Promise((resolve, reject) => {
            this.loadingLabel = '云手机挂载中...';
            const startTime = Date.now();
            const maxTime = 1000 * 20;
            this._watchConnectInterval = setInterval(async () => {
              try {
                if (Date.now() - startTime >= maxTime) {
                  throw new Error('云手机挂载超时');
                }
                const res = await getConnectData().catch((error) => {
                  if (error.response.data.status === 5200) {
                    return false;
                  }
                  throw error;
                });

                if (res) {
                  clearInterval(this._watchConnectInterval);
                  resolve(res);
                }
              } catch (error) {
                clearInterval(this._watchConnectInterval);
                reject(error);
              }
            }, 1000);
          });
        }
        throw error;
      });

      this.connectInfo = res.data;
      return res;

      // const src = await new Promise((resolve, reject) => {
      //   const startTime = Date.now();
      //   this._watchConnectInterval = setInterval(async () => {
      //     if (Date.now() - startTime >= time) {
      //       clearInterval(this._watchConnectInterval);
      //       reject(new Error('挂载超时'));
      //       return;
      //     }
      //     await this.$axios
      //       .$post('/resources/user/cloud/connect', {
      //         userCardId,
      //       })
      //       .then();
      //   }, interval);
      // });
      // return src;
    },
  },
};
</script>

<style lang="scss" scoped>
// .disk {
//   position: relative;
//   display: flex;
//   flex-direction: column;
//   height: 100%;
// }
// .disk-header {
//   position: relative;
//   height: 0;
//   flex: none;
// }
// .disk-main {
//   position: relative;
//   flex: 1;
// }
// .disk-footer {
//   height: 50px;
// flex: none;
// }
</style>