From de74c9d1d7ce2f798f122d195c90f2b77fb9e6bc Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 4 Aug 2019 01:57:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BD=AC=E5=8D=96=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |  5 +++
 package.json                  |  2 +-
 src/App.vue                   | 80 ++++++++++++++++++++++++-----------
 src/components/BaseHeader.vue |  9 +++-
 src/main.js                   | 17 +++++++-
 src/pages/home/Attention.vue  |  2 +-
 src/pages/home/Index.vue      |  1 +
 src/pages/home/Me.vue         |  1 +
 src/pages/home/Message.vue    |  4 +-
 src/pages/me/MyCard.vue       | 11 ++---
 10 files changed, 94 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a084e87..fe4ecfa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12965,6 +12965,11 @@
                 "animate.css": "^3.7.0"
             }
         },
+        "vuex": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
+            "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+        },
         "watchpack": {
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 2966a2d..b78a359 100755
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "pinyin": "^2.9.0",
         "vue": "^2.6.10",
         "vue-router": "^3.0.7",
-        "vueg": "^1.4.5"
+        "vuex": "^3.1.1"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^3.0.3",
diff --git a/src/App.vue b/src/App.vue
index d7f1f48..1809f29 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <transition   name="slide-fade">
+        <transition :name="$store.state.pageAnim">
             <router-view></router-view>
         </transition>
     </div>
@@ -10,22 +10,24 @@
     export default {
         name: 'app',
         data() {
-            return {
-                transitionName: 'fold-left'
-            }
+            return {}
         },
         watch: {
-            '$route'(to, from) {
-                //此时假设从index页面跳转到pointList页面
-                // console.log(to) // "/pointList"
-                // console.log(from) // “/index”
-                // if (to.path === '/me') {
-                //     this.transitionName = 'fold-right'
-                // } else {
-                //     this.transitionName = 'fold-left'
-                // }
+            $route(to, from) {
+                let rootRouters = ['/', '/home', '/attention', '/message', '/me']
+                if (rootRouters.indexOf(to.path) !== -1 && rootRouters.indexOf(from.path) !== -1) {
+                    this.$store.commit('setPageAnim', 'none')
+                    return
+                }
+                let routers = ['/', '/home', '/attention', '/message', '/me', '/myCard', '/chooseCountry']
+                //根据路由层次来决定转场效果
+                if (routers.indexOf(to.path) > routers.indexOf(from.path)) {
+                    this.$store.commit('setPageAnim', 'go')
+                } else {
+                    this.$store.commit('setPageAnim', 'back')
+                }
             }
-        },
+        }
     }
 </script>
 
@@ -35,17 +37,47 @@
         height: 100%;
     }
 
-    /* 可以设置不同的进入和离开动画 */
-    /* 设置持续时间和动画函数 */
-    .slide-fade-enter-active {
-        transition: all .3s ease;
+
+    .go-enter {
+        left: 100%;
     }
-    .slide-fade-leave-active {
-        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+
+    .go-enter-to {
+        left: 0;
     }
-    .slide-fade-enter, .slide-fade-leave-to
-        /* .slide-fade-leave-active for below version 2.1.8 */ {
-        transform: translateX(10px);
-        opacity: 0;
+
+    .go-leave {
+        left: 0;
     }
+
+    .go-leave-to {
+        left: -100%;
+    }
+
+    .go-enter-active, .go-leave-active {
+        transition: all .3s;
+    }
+
+
+    .back-enter {
+        left: -100%;
+    }
+
+    .back-enter-to {
+        left: 0;
+    }
+
+    .back-leave {
+        left: 0;
+    }
+
+    .back-leave-to {
+        left: 100%;
+    }
+
+    .back-enter-active, .back-leave-active {
+        transition: all .3s;
+    }
+
+
 </style>
diff --git a/src/components/BaseHeader.vue b/src/components/BaseHeader.vue
index 2ca7185..15efd05 100644
--- a/src/components/BaseHeader.vue
+++ b/src/components/BaseHeader.vue
@@ -1,6 +1,6 @@
 <template>
     <div id='BaseHeader'>
-        <svg v-if="isShowLeftBtn" @click="$emit('back')" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
+        <svg v-if="isShowLeftBtn" @click="back()" t="1564765917375" class="icon left" viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="16292" width="32" height="32">
@@ -36,7 +36,12 @@
             
         },
         computed: {},
-        methods: {}
+        methods: {
+            back(){
+                this.$store.commit('setPageAnim','back')
+                window.history.back()
+            }
+        }
     }
 </script>
 
diff --git a/src/main.js b/src/main.js
index c73815e..e66efa4 100755
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import Icon from 'vue-svg-icon/Icon.vue'
 import VueRouter from 'vue-router'
-import vueg from 'vueg'
+import Vuex from 'vuex'
 
 import './assets/scss/index.scss'
 import Index from './pages/home/Index'
@@ -21,6 +21,7 @@ Vue.config.productionTip = false
 Vue.component('icon', Icon)
 Vue.component('BaseHeader', BaseHeader)
 Vue.use(VueRouter)
+Vue.use(Vuex)
 
 const router = new VueRouter({
     mode: 'hash',
@@ -36,7 +37,17 @@ const router = new VueRouter({
         { path: '/myCard', component: MyCard },
     ]
 })
-Vue.use(vueg, router) // 传入实例化后的router, Options为可选的插件配置
+
+const store = new Vuex.Store({
+    state: {
+        pageAnim: 'none'
+    },
+    mutations: {
+        setPageAnim(state, states) {
+            state.pageAnim = states
+        }
+    }
+})
 
 Vue.mixin({
     methods: {
@@ -63,7 +74,9 @@ Vue.mixin({
     }
 })
 
+
 new Vue({
     render: h => h(App),
+    store,
     router
 }).$mount('#app')
diff --git a/src/pages/home/Attention.vue b/src/pages/home/Attention.vue
index ffb7111..25da966 100644
--- a/src/pages/home/Attention.vue
+++ b/src/pages/home/Attention.vue
@@ -97,12 +97,12 @@
 
 <style scoped lang="scss">
     #attention {
+        position: fixed;
         /*background: rgb(22，24，34);*/
         /*background: #161822;*/
         //抖音原色，感觉很暗
         background: #2e3244;
         color: #b8b9c1;
-        position: relative;
         .items {
             >.item {
                 border-bottom: 1px solid #494950;
diff --git a/src/pages/home/Index.vue b/src/pages/home/Index.vue
index 9c2eba9..139b882 100644
--- a/src/pages/home/Index.vue
+++ b/src/pages/home/Index.vue
@@ -397,6 +397,7 @@
 </script>
 <style scoped lang="scss">
     #home-index {
+        position: fixed;
         width: 100%;
         height: 100%;
         overflow: hidden;
diff --git a/src/pages/home/Me.vue b/src/pages/home/Me.vue
index f711cfd..62e77ee 100644
--- a/src/pages/home/Me.vue
+++ b/src/pages/home/Me.vue
@@ -677,6 +677,7 @@
     $left-bg-color: #333;
     $right-bg-color: #2e3244;
     .Me {
+        position: fixed;
         font-size: 1.6rem;
         width: 100%;
         height: 100%;
diff --git a/src/pages/home/Message.vue b/src/pages/home/Message.vue
index f8fbb75..d441d54 100644
--- a/src/pages/home/Message.vue
+++ b/src/pages/home/Message.vue
@@ -4,7 +4,7 @@
             <div class="header pt15p">
                 <div class="title">
                     <p class="tac fb c-white ">消息</p>
-                    <span>联系人</span>
+                    <span @click="nav('/myCard')">联系人</span>
                 </div>
             </div>
             <div class="line mt20p"></div>
@@ -82,10 +82,12 @@
 
 <style scoped lang="scss">
     #Message {
+        position: fixed;
         font-size: 1.6rem;
         background: #2e3244;
         color: #b8b9c1;
         height: 100%;
+        width: 100vw;
 
         .header {
             .title {
diff --git a/src/pages/me/MyCard.vue b/src/pages/me/MyCard.vue
index b9756a7..bc0a06c 100644
--- a/src/pages/me/MyCard.vue
+++ b/src/pages/me/MyCard.vue
@@ -1,6 +1,6 @@
 <template>
         <div id='MyCard'>
-            <BaseHeader @back="back">
+            <BaseHeader >
                 <svg t="1564765646732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="15320" width="32" height="32">
@@ -31,7 +31,6 @@
                 </div>
             </div>
         </div>
-    </transition>
 </template>
 <script>
     export default {
@@ -47,18 +46,16 @@
         },
         computed: {},
         methods: {
-            back() {
-                window.history.back()
-            }
+
         }
     }
 </script>
 
 <style scoped lang='scss'>
     #MyCard {
-        width: 100%;
+        width: 100vw;
         height: 100%;
-        position: relative;
+        position: fixed;
 
         .content {
             padding: 20px;