设置页面标题

htmldev/loan/src/main.js

@@ -2,10 +2,12 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import { toThousands } from './filter/toThousands'
+import refreshTitle from './utils/refreshTitle'
 
 Vue.config.productionTip = false
 
 Vue.filter('toThousands', toThousands)
+Vue.prototype.$refreshTitle = refreshTitle
 
 new Vue({
   router,

htmldev/loan/src/page/404/index.vue

@@ -1,13 +1,25 @@
 <template>
-  <div>404</div>
+  <div class="wrapper">
+    <p>404</p>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'pageNotFound'
+    name: 'pageNotFound',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('Not found')
+    }
   }
 </script>
 
 <style lang="scss" scoped>
-
+  .wrapper {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    min-height: 100vh;
+    padding-top: 100px;
+  }
 </style>

htmldev/loan/src/utils/refreshTitle.js

@@ -0,0 +1,5 @@
+function refreshTitle (title) {
+  document.title = title
+}
+
+export default refreshTitle

htmldev/loan/src/views/about/index.vue

@@ -4,7 +4,11 @@
 
 <script>
   export default {
-    name: 'about'
+    name: 'about',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('了解我们')
+    }
   }
 </script>
 

htmldev/loan/src/views/agreement/index.vue

@@ -4,7 +4,11 @@
 
 <script>
   export default {
-    name: 'agreement'
+    name: 'agreement',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('协议')
+    }
   }
 </script>
 

htmldev/loan/src/views/apply/index.vue

@@ -160,6 +160,7 @@
           textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
         })
       }
+      this.$refreshTitle('中行贷')
     },
     methods: {
       handleTextarea (el, auto) {

htmldev/loan/src/views/attest/index.vue

@@ -45,6 +45,10 @@
         houseProperty: []
       }
     },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('进度查询')
+    },
     methods: {
       funSetUploadData (type, value) {
         if (type === this.uploadType0) {

htmldev/loan/src/views/bespeak/index.vue

@@ -45,6 +45,10 @@
         currentDate: new Date()
       }
     },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('进度查询')
+    },
     methods: {
       filter (type, options) {
         if (type === 'minute') {

htmldev/loan/src/views/detail/index.vue

@@ -126,7 +126,11 @@
 
 <script>
   export default {
-    name: 'detail'
+    name: 'detail',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('进度查询')
+    }
   }
 </script>
 

htmldev/loan/src/views/goods/index.vue

@@ -15,7 +15,11 @@
 
 <script>
   export default {
-    name: 'goods'
+    name: 'goods',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('中行贷')
+    }
   }
 </script>
 

htmldev/loan/src/views/help/index.vue

@@ -4,7 +4,11 @@
 
 <script>
   export default {
-    name: 'help'
+    name: 'help',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('还款助手')
+    }
   }
 </script>
 

htmldev/loan/src/views/home/index.vue

@@ -1,32 +1,32 @@
 <template>
-  <div class="better-scroll wrapper" ref="wrapper">
-    <ul>
-      <li class="title">我的申请记录</li>
-      <li class="list fail" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
-        <div class="top border-bottom-1px">
-          <div class="left-wrap">
-            <img src="" alt="">
-          </div>
-          <div class="right-wrap">
-            <p>中行贷申请</p>
-            <p>
-              <span>需求金额：</span>
-              <span>30</span>
-              <span>万元</span>
-            </p>
-          </div>
-        </div>
-        <p class="bottom">
-          <span>2020-12-23 19:23</span>
-          <span>></span>
-        </p>
-      </li>
-      <li class="bitmap" v-if="!listData.length && booFetchData">
-        <img src="./image/bitmap@2x.png" alt="">
-        <p>暂无申请记录</p>
-      </li>
-    </ul>
-  </div>
+    <div class="better-scroll wrapper" ref="wrapper">
+        <ul>
+            <li class="title">我的申请记录</li>
+            <li class="list fail" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
+                <div class="top border-bottom-1px">
+                    <div class="left-wrap">
+                        <img src="" alt="">
+                    </div>
+                    <div class="right-wrap">
+                        <p>中行贷申请</p>
+                        <p>
+                            <span>需求金额：</span>
+                            <span>30</span>
+                            <span>万元</span>
+                        </p>
+                    </div>
+                </div>
+                <p class="bottom">
+                    <span>2020-12-23 19:23</span>
+                    <span>></span>
+                </p>
+            </li>
+            <li class="bitmap" v-if="!listData.length && booFetchData">
+                <img src="./image/bitmap@2x.png" alt="">
+                <p>暂无申请记录</p>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
@@ -80,6 +80,10 @@
         })
       }
     },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('进度查询')
+    },
     methods: {
       funFetch () {
         const vm = this
@@ -128,147 +132,147 @@
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
-    position: relative;
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-    background: #fff;
+    .wrapper {
+        position: relative;
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        background: #fff;
 
-    ul {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: 100%;
-      padding: 24px 0 80px;
+        ul {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+            padding: 24px 0 80px;
+        }
     }
-  }
 
-  .title {
-    width: 343px;
-    line-height: 33px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #333;
-  }
+    .title {
+        width: 343px;
+        line-height: 33px;
+        font-size: 24px;
+        font-weight: 500;
+        color: #333;
+    }
 
-  .list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 343px;
-    margin-top: 24px;
-    border-radius: 4px;
+    .list {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 343px;
+        margin-top: 24px;
+        border-radius: 4px;
 
-    &:nth-of-type(1) {
-      margin-top: 26px;
-    }
+        &:nth-of-type(1) {
+            margin-top: 26px;
+        }
 
-    &.success {
-      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
-    }
+        &.success {
+            background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
+        }
 
-    &.fail {
-      background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
+        &.fail {
+            background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
 
-      .right-wrap {
-        p:nth-of-type(2) {
+            .right-wrap {
+                p:nth-of-type(2) {
 
-          span:nth-of-type(2),
-          span:nth-of-type(3) {
-            color: #D6BDA1;
-          }
+                    span:nth-of-type(2),
+                    span:nth-of-type(3) {
+                        color: #D6BDA1;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 
-  .top {
-    display: flex;
-    align-items: center;
-    width: 297px;
-    padding: 18px 0 12px;
-    @include border-bottom-1px(#fff);
-  }
+    .top {
+        display: flex;
+        align-items: center;
+        width: 297px;
+        padding: 18px 0 12px;
+        @include border-bottom-1px(#fff);
+    }
 
-  .left-wrap {
-    width: 60px;
-    height: 60px;
-    border-radius: 4px;
-    overflow: hidden;
-    background: pink;
+    .left-wrap {
+        width: 60px;
+        height: 60px;
+        border-radius: 4px;
+        overflow: hidden;
+        background: pink;
 
-    img {
-      display: block;
-      width: 100%;
+        img {
+            display: block;
+            width: 100%;
+        }
     }
-  }
 
-  .right-wrap {
-    margin-left: 18px;
+    .right-wrap {
+        margin-left: 18px;
 
-    p:nth-of-type(1) {
-      line-height: 25px;
-      font-size: 18px;
-      font-weight: 500;
-      color: #fff;
-    }
+        p:nth-of-type(1) {
+            line-height: 25px;
+            font-size: 18px;
+            font-weight: 500;
+            color: #fff;
+        }
 
-    p:nth-of-type(2) {
-      display: flex;
-      align-items: flex-end;
+        p:nth-of-type(2) {
+            display: flex;
+            align-items: flex-end;
 
-      span:nth-of-type(1) {
-        padding-bottom: 5px;
-        line-height: 20px;
-        font-size: 15px;
-        color: #fff;
-      }
+            span:nth-of-type(1) {
+                padding-bottom: 5px;
+                line-height: 20px;
+                font-size: 15px;
+                color: #fff;
+            }
 
-      span:nth-of-type(2) {
-        line-height: 33px;
-        font-size: 24px;
-        font-weight: bold;
-        color: #D6BDA1;
-      }
+            span:nth-of-type(2) {
+                line-height: 33px;
+                font-size: 24px;
+                font-weight: bold;
+                color: #D6BDA1;
+            }
 
-      span:nth-of-type(3) {
-        line-height: 33px;
-        font-size: 15px;
-        font-weight: bold;
-        color: #D6BDA1;
-      }
+            span:nth-of-type(3) {
+                line-height: 33px;
+                font-size: 15px;
+                font-weight: bold;
+                color: #D6BDA1;
+            }
+        }
     }
-  }
 
-  .bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 297px;
-    padding: 11px 0 12px;
+    .bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 297px;
+        padding: 11px 0 12px;
 
-    span {
-      line-height: 20px;
-      font-size: 15px;
-      color: #fff;
+        span {
+            line-height: 20px;
+            font-size: 15px;
+            color: #fff;
+        }
     }
-  }
 
-  .bitmap {
-    img {
-      display: block;
-      width: 168px;
-      height: 168px;
-      margin-top: 81px;
-    }
+    .bitmap {
+        img {
+            display: block;
+            width: 168px;
+            height: 168px;
+            margin-top: 81px;
+        }
 
-    p {
-      line-height: 22px;
-      font-size: 16px;
-      font-weight: 500;
-      text-align: center;
-      color: #333;
+        p {
+            line-height: 22px;
+            font-size: 16px;
+            font-weight: 500;
+            text-align: center;
+            color: #333;
+        }
     }
-  }
 </style>

htmldev/loan/src/views/privacy/index.vue

@@ -4,7 +4,11 @@
 
 <script>
   export default {
-    name: 'privacy'
+    name: 'privacy',
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('隐私协议')
+    }
   }
 </script>