dji-drone-h5/src/App.vue

<template>
  <div id="app" :style="style">
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  computed: {
    style() {
      return {
        width: this.width ? this.width + "px" : "100%",
        minHeight: this.height ? this.height + "px" : "auto",
      };
    },
  },
  created() {
    // const width = this.getQueryParam("width") || null;
    // const height = this.getQueryParam("height") || null;
    // const apiToken = this.getQueryParam("apiToken") || null;
    // const userId = this.getQueryParam("userId") || null;
    // console.log("query=>>", this.$route.query)
    const { width, height, apiToken, userId } = this.$route.query;
    // console.log("apiToken", apiToken);
    // console.log("userId=>>", userId)
    if (userId) {
      this.$store.commit("SET_APP_VERSION", {
        type: "userId",
        value: userId,
      });
      // localStorage.setItem("apiToken", apiToken);
    }
    if (apiToken) {
      this.$store.commit("SET_APP_VERSION", {
        type: "apiToken",
        value: apiToken,
      });
      localStorage.setItem("apiToken", apiToken);
    }
    if (height) {
      this.$store.commit("SET_APP_VERSION", {
        type: "height",
        value: height,
      });
      this.height = height;
    }
    if (width) {
      this.$store.commit("SET_APP_VERSION", {
        type: "width",
        value: width,
      });
      this.width = width;
    }
  },
  // watch: {
  //   $route(to, from) {
  //     // console.log("this.$route.query==>", this.$route.query);
  //     // this.width = this.$store.state.width;
  //     // this.height = this.$store.state.height;
  //     console.log("from==>", from);
  //     console.log("to==>", to);
  //     console.log("this.$route==>", this.$route);
  //     if (to) {
  //       this.$nextTick(() => {
  //         this.$router.removeRoute(from.name);
  //       });
  //     }
  //   },
  // },
  methods: {
    getQueryParam(paramName) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(paramName);
    },
  },
  beforeDestroy() {
    this.$store.dispatch("disconnect");
  },
};
</script>

<style>
body {
  display: block;
  margin: 0 !important;
}

#app {
  /* font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50; */
  /* background-color: red;
  box-sizing: border-box; */
}

.el-message {
  min-width: auto !important;
  background-color: rgba(88, 88, 88, 1) !important;
  color: #fff !important;
  border: none !important;
}
.el-message__content {
  color: #fff !important;
}
.el-message .el-message__icon {
  display: none !important;
}
</style>