fix(setting): 修复 about 页面根据不同的信息响应不同的行为

slimkit · Sep 28, 2018 · f7363aa · f7363aa
1 parent 2db3cb1
commit f7363aa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 43 deletions.
diff --git a/src/page/AboutUs.vue b/src/page/AboutUs.vue
@@ -1,47 +1,34 @@
 <template>
   <div class="about-us">
-    <header class="m-box m-aln-center m-head-top m-pos-f m-main m-bb1">
-      <div class="m-box m-aln-center m-flex-grow1 m-flex-base0">
-        <svg
-          class="m-style-svg m-svg-def"
-          @click="goBack">
-          <use
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            xlink:href="#base-back"/>
-        </svg>
-      </div>
-      <div class="m-box m-aln-center m-justify-center m-flex-grow1 m-flex-base0 m-head-top-title">
-        <span>关于我们</span>
-      </div>
-      <div class="m-box m-aln-center m-justify-end m-flex-grow1 m-flex-base0"/>
-    </header>
-    <main style="padding-top: 0.9rem; margin-top: -20px">
-      <div
-        class="about-us--content"
-        v-html="body"/>
+
+    <common-header>关于我们</common-header>
+
+    <main>
+      <div class="content" v-html="body"/>
     </main>
   </div>
 </template>
 
 <script>
 export default {
   name: "AboutUs",
-  data() {
-    return {
-      body: ""
-    };
-  },
-  mounted() {
-    this.$http.get("/aboutus").then(({ data }) => {
-      this.body = data;
-    });
+  computed: {
+    aboutUs() {
+      const { aboutUs = {} } = this.$store.state.CONFIG.site;
+      return aboutUs;
+    },
+    body() {
+      return this.aboutUs.content || "";
+    }
   }
 };
 </script>
 
-<style lang='less'>
-.about-us--content {
-  min-height: 100vh;
-  background: #fff;
+<style lang='less' scoped>
+.about-us {
+  .content {
+    min-height: 100vh;
+    background: #fff;
+  }
 }
 </style>
diff --git a/src/page/Settings.vue b/src/page/Settings.vue
@@ -16,21 +16,16 @@
               xlink:href="#base-arrow-r"/>
           </svg>
         </router-link>
-        <router-link
-          to="/about"
-          tag="li"
-          class="m-entry">
+        <li class="m-entry" @click="aboutUs">
           <span class="m-box m-text-box m-flex-grow1">关于我们</span>
           <span class="m-box m-text-box m-flex-grow1 m-justify-end m-entry-extra">{{ version }}</span>
           <svg class="m-style-svg m-svg-def m-entry-append">
             <use
               xmlns:xlink="http://www.w3.org/1999/xlink"
               xlink:href="#base-arrow-r"/>
           </svg>
-        </router-link>
-        <li
-          class="m-entry"
-          @click="signOut">
+        </li>
+        <li class="m-entry" @click="signOut">
           <a>退出登录</a>
           <svg class="m-style-svg m-svg-def m-entry-append">
             <use
@@ -59,9 +54,7 @@ export default {
       const actions = [
         {
           text: "退出",
-          style: {
-            color: "#f4504d"
-          },
+          style: { color: "#f4504d" },
           method: () => {
             this.$store.dispatch("SIGN_OUT");
             this.$nextTick(() => {
@@ -71,6 +64,11 @@ export default {
         }
       ];
       bus.$emit("actionSheet", actions, "取消", "确认退出?");
+    },
+    aboutUs() {
+      const { aboutUs = {} } = this.$store.state.CONFIG.site;
+      if (aboutUs.url) return (location.href = aboutUs.url);
+      this.$router.push("/about");
     }
   }
 };