增加转场动画

src/pages/main.vue

 <template>
-    <transition name = 'move_right_slow'>
-        <view v-show = 'loading' id = 'background'>
-            <view id = 'pic'></view>
+    <transition name = 'move_right'>
+        <view v-show = 'loading.end' class = 'background' :style = "{ '--index' : index.end }">
+            <view class = 'pic'></view>
+        </view>
+    </transition>
+    <transition name = 'move_left'>
+        <view v-show = 'loading.start' class = 'background' :style = "{ '--index' : index.start }">
+            <view class = 'pic'></view>
         </view>
     </transition>
     <Tabulator/>
@@ -9,21 +14,63 @@
 <script setup lang = 'ts'>
     import { ref, reactive, onMounted, onUnmounted, onBeforeMount, watch} from 'vue';
     import Tabulator from './tabulator.vue';
-    let loading = ref(true);
-    onMounted(async () => {
+    import emitter from '../script/emitter.ts';
+    import Const from '../script/const.ts';
+
+    let loading = reactive({
+        start : false,
+        end : true
+    });
+
+    let index = reactive({
+        start : 100,
+        end : 99
+    });
+
+    const changeUrl = async (url : string) : Promise<void> => {
+        loading.start = true;
         await (new Promise(resolve => setTimeout(resolve, 500)));
-        loading.value = false;
+        window.location.replace(url);
+    }
+
+    const show =  async () : Promise<void> => {
+        if (loading.start) {
+            loading.end = true;
+            await (new Promise(resolve => setTimeout(resolve, 500)));
+            index.end = 100;
+            index.start = 99;
+            loading.start = false;
+            await (new Promise(resolve => setTimeout(resolve, 500)));
+            loading.end = false;
+            index.end = 99;
+            index.start = 100;
+            return;
+        }
+        await (new Promise(resolve => setTimeout(resolve, 500)));
+        loading.end = false;
+    }
+
+    onBeforeMount(() : void => {
+        // @ts-ignore
+        emitter.on(Const.changeUrl, changeUrl);
+        emitter.on(Const.show, show);
+    })
+
+    onUnmounted(() : void => {
+        // @ts-ignore
+        emitter.off(Const.changeUrl, changeUrl);
+        emitter.off(Const.show, show);
     });
 </script>
 <style scoped lang = 'scss'>
     @import '../style/transition.scss';
-    #background {
+    .background {
         position: fixed;
         // background: linear-gradient(45deg, rgb(0, 162, 255), rgb(0, 72, 255));
         width: 100vw;
         height: 100vh;
-        z-index: 2;
-        #pic {
+        z-index: var(--index);
+        .pic {
             // background-image: url("./static/pic.png");
             width: 100%;
             height: 100%;

src/pages/tabulator.vue

@@ -179,12 +179,9 @@
                 if (!page.drawer && page.tournament)
                     tournament.init(tournament.this as Tournament);
             },
-            tournament : async(v : number = 0): Promise<void> => {
-                page.menu = false;
-                await (new Promise(resolve => setTimeout(resolve, 500)));
-                page.tournament = true;
+            tournament : (v : number = 0): void => {
                 const url = window.location.href.split('/?');
-                window.location.replace(`${url[0].replace(/\/?$/, '')}/tournament/${search.result.tournaments[v].id}${url[1] ? `/?${url[1]}` : ''}`);
+                emitter.emit(Const.changeUrl, `${url[0].replace(/\/?$/, '')}/${search.result.tournaments[v].id}${url[1] ? `/?${url[1]}` : ''}`);
             },
             menu : async(): Promise<void> => {
                 page.tournament = false;
@@ -411,6 +408,27 @@
         }
     });
 
+    const loading = async () : Promise<void> => {
+        const url = window.location.hash.match(/#\/(.*?)(?:\?|$)/);
+        if (url) {
+            if (!isNaN(parseInt(url[1]))) {
+                page.menu = false;
+                page.tournament = true;
+                emitter.emit(Const.showTournament);
+                return;
+            } else if (url[1].length == 0) {
+                page.tournament = false;
+                page.menu = true;
+                search.mine();
+                await search.on();
+                emitter.emit(Const.show);
+                return;
+            }
+        }
+        const i = window.location.href.split('/?');
+        emitter.emit(Const.changeUrl, `${window.location.origin}/#${i[1] ? `/?${i[1]}` : '/'}`);
+    };
+
     onBeforeMount(() : void => {
         Uniapp.chkScreen(size.get);
         document.addEventListener("click", page.show.clear);
@@ -418,19 +436,8 @@
         // @ts-ignore
         emitter.on(Const.tournamentReload, tournament.init);
         emitter.on(Const.createOff, creator.off);
-
-        const url = window.location.pathname.match(/\/tournament\/([^\/]+)(?=\/|$)/);
-        if (url && !isNaN(parseInt(url[1]))) {
-            page.menu = false;
-            page.tournament = true;
-        } else {
-            if (window.location.pathname.length > 1)
-                window.location.replace(window.location.href.replace(window.location.pathname, ''))
-            else {
-                search.mine();
-                search.on();
-            }
-        }
+        window.addEventListener('hashchange', loading);
+        loading();
     });
 
     onMounted(() => {
@@ -444,6 +451,7 @@
         // @ts-ignore
         emitter.off(Const.tournamentReload, tournament.init);
         emitter.off(Const.createOff, creator.off);
+        window.removeEventListener('hashchange', loading);
     });
 
     watch(() => { return search.date; }, () => {

src/pages/tournament.vue

@@ -395,7 +395,6 @@
                     for (const i of del_list)
                         await participant.del(i);
                     await participant.search();
-                    console.log(participant.array)
                 }
             };
             await UniApp.selectFile(['.ydk', '.txt'], f);
@@ -491,7 +490,7 @@
                 page.reload();
         },
         search : async () : Promise<boolean> => {
-            const url = window.location.pathname.match(/\/tournament\/([^\/]+)(?=\/|$)/);
+            const url = window.location.hash.match(/#\/(.*?)(?:\?|$)/);
             // @ts-ignore
             const id = url[1];
             // @ts-ignore
@@ -569,16 +568,23 @@
     let page = reactive({
         height : 0,
         loading : false,
-        clear : async () : Promise<void>=> {
-            tournament.this = undefined;
-            await (new Promise(resolve => setTimeout(resolve, 450)));
-            window.location.replace(window.location.href.replace(window.location.pathname, ''))
+        clear : (chk = false) : void => {
+            const i = window.location.href.split('/?');
+            if (chk)
+                window.location.replace(`${window.location.origin}/#${i[1] ? `/?${i[1]}` : '/'}`);
+            else
+                emitter.emit(Const.changeUrl, `${window.location.origin}/#${i[1] ? `/?${i[1]}` : '/'}`);
+        },
+        show : () : void => {
+            emitter.emit(Const.show);
         },
         get : async () : Promise<void> => {
-            if (await participant.search()) 
+            if (await participant.search()) {
                 await match.search();
-             else 
-                page.clear();
+                page.show();
+            }
+            else
+                page.clear(true);
         },
         reload : async () : Promise<void> => {
             const query = uni.createSelectorQuery().in(this);
@@ -616,18 +622,24 @@
         }
     });
 
-    onBeforeMount(() => {
-        const url = window.location.pathname.match(/\/tournament\/([^\/]+)(?=\/|$)/);
+    const loading = () : void => {
+        const url = window.location.hash.match(/#\/(.*?)(?:\?|$)/);
         url && !isNaN(parseInt(url[1])) ? page.get() : page.clear();
+    };
+
+    onBeforeMount(() => {
+        loading();
         document.addEventListener("click", page.clickClear);
         // @ts-ignore
         emitter.on(Const.updateTournament, participant.update);
+        emitter.on(Const.showTournament, loading);
     });
 
     onUnmounted(() => {
         document.removeEventListener("click", page.clickClear);
         // @ts-ignore
         emitter.off(Const.updateTournament, participant.update);
+        emitter.off(Const.showTournament, loading);
     });
 
     watch(() => { return match.round; }, async () : Promise<void> => {

src/script/const.ts

@@ -7,6 +7,9 @@ class ConstData {
     picsOpen = 'picsOpen';
     searcherInit = 'searcherInit';
     settingInit = 'settingInit';
+    changeUrl = 'changeUrl';
+    show = 'show';
+    showTournament = 'showTournament';
 }
 
 const Const = new ConstData();

src/script/mycard.ts

 import { Buffer } from 'buffer';
+import emitter from './emitter.ts'
+import Const from './const.ts'
 
 interface MyCardSSOUser {
     token : string;
@@ -49,7 +51,7 @@ class MyCard {
 
     logout() {
         window.localStorage.removeItem('mycardLogin');
-        window.location.replace(window.location.href.replace(/\/\?.*/, ''))
+        emitter.emit(Const.changeUrl, window.location.href.replace(/\/\?.*/, ''));
     }
 }
 

src/style/transition.scss

@@ -15,7 +15,7 @@
     }
 }
 
-.move_left {
+.move_left, .move_left_slow {
     &-enter-active,
     &-leave-active {
         transition: transform 0.5s ease;
@@ -49,9 +49,9 @@
     }
 }
 
-.move_right_slow {
+.move_right_slow, .move_left_slow {
     &-leave-active {
-        transition: transform 2s ease;
+        transition: transform 1s ease;
     }
 }