App.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="home">
  3. <Header
  4. v-if="route.meta && !route.meta.hideHeader"
  5. :color="route.meta.color"
  6. :metaObj="route.meta"
  7. />
  8. <div
  9. :class="!route.meta.hideHeader ? 'ptheader' : ''"
  10. :style="{ background: route.meta.color }"
  11. />
  12. <router-view :key="route.fullPath" v-if="isRouterAlive" />
  13. </div>
  14. </template>
  15. <script lang="ts">
  16. import {
  17. defineComponent,
  18. nextTick,
  19. onMounted,
  20. reactive,
  21. toRefs,
  22. onBeforeUnmount,
  23. } from "vue";
  24. import Header from "@/components/header/Comheader.vue";
  25. import { useRoute, onBeforeRouteUpdate } from "vue-router";
  26. import axios from "axios";
  27. // import { formatDate } from "./utils";
  28. export default defineComponent({
  29. components: {
  30. Header,
  31. },
  32. setup() {
  33. const route: any = useRoute();
  34. let itervel: any = null;
  35. const proxyData = reactive({
  36. route: route,
  37. transitionName: "slide-right",
  38. showHeader: false,
  39. isRouterAlive: true,
  40. reload() {
  41. proxyData.isRouterAlive = false;
  42. nextTick(() => {
  43. proxyData.isRouterAlive = true;
  44. });
  45. },
  46. itervel: itervel,
  47. getPadVersion() {
  48. axios.get(`/sgipad/pad_mtime`).then((res: any) => {
  49. let data: any = res.data || {};
  50. let pad_mtime: any = data.pad_mtime;
  51. let oldTime: any = localStorage.getItem("pad_mtime");
  52. if (oldTime && oldTime !== pad_mtime) {
  53. localStorage.setItem("pad_mtime", pad_mtime);
  54. window.location.reload();
  55. // proxyData.reload();
  56. } else {
  57. localStorage.setItem("pad_mtime", pad_mtime);
  58. }
  59. });
  60. },
  61. timerPadVersion() {
  62. proxyData.itervel = setInterval(() => {
  63. proxyData.getPadVersion();
  64. }, 300000);
  65. },
  66. });
  67. nextTick(() => {
  68. const document: any = window.document;
  69. document.addEventListener("touchstart", function (event: any) {
  70. if (event.touches.length > 1) {
  71. event.preventDefault();
  72. }
  73. });
  74. document.addEventListener("gesturestart", function (event: any) {
  75. event.preventDefault();
  76. });
  77. });
  78. onBeforeUnmount(() => {
  79. clearInterval(proxyData.itervel);
  80. });
  81. onMounted(() => {
  82. proxyData.timerPadVersion();
  83. });
  84. return {
  85. ...toRefs(proxyData),
  86. };
  87. },
  88. });
  89. </script>
  90. <style lang="scss" scoped>
  91. .home {
  92. .child-view {
  93. position: absolute;
  94. width: 100%;
  95. transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
  96. }
  97. .slide-left-enter,
  98. .slide-right-leave-active {
  99. opacity: 0;
  100. -webkit-transform: translate(50px, 0);
  101. transform: translate(50px, 0);
  102. }
  103. .slide-left-leave-active,
  104. .slide-right-enter {
  105. opacity: 0;
  106. -webkit-transform: translate(-50px, 0);
  107. transform: translate(-50px, 0);
  108. }
  109. }
  110. </style>