文件优化

htmldev/loan/src/router/index.js

@@ -5,19 +5,9 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/', // 贷款介绍
+    path: '/', // 我的申请记录
     name: 'Home',
-    component: () => import(/* webpackChunkName: "home" */ '../views/home/index.vue')
-  },
-  {
-    path: '/apply', // 基本信息填写
-    name: 'Apply',
-    component: () => import(/* webpackChunkName: "apply" */ '../views/apply/index.vue')
-  },
-  {
-    path: '/record', // 我的申请记录
-    name: 'Record',
-    component: () => import(/* webpackChunkName: "record" */ '../views/record/index.vue'),
+    component: () => import(/* webpackChunkName: "home" */ '../views/home/index.vue'),
     meta: {
       isUseCache: false,
       keepAlive: true
@@ -28,6 +18,16 @@ const routes = [
     name: 'Detail',
     component: () => import(/* webpackChunkName: "detail" */ '../views/detail/index.vue')
   },
+  {
+    path: '/goods', // 贷款介绍
+    name: 'Goods',
+    component: () => import(/* webpackChunkName: "goods" */ '../views/goods/index.vue')
+  },
+  {
+    path: '/apply', // 基本信息填写
+    name: 'Apply',
+    component: () => import(/* webpackChunkName: "apply" */ '../views/apply/index.vue')
+  },
   {
     path: '/attest', // 上传资料
     name: 'Attest',

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="wrapper">
+    <div class="footer">
+      <div class="invite-info">
+        <div class="avatar">
+          <img src="" alt="">
+        </div>
+        <p class="partner-name">蒋华华</p>
+        <p class="label">邀请您</p>
+      </div>
+      <router-link class="btn-apply" :to="{path: '/apply'}">免费在线申请</router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'goods'
+  }
+</script>
+
+<style lang="scss" scoped>
+  .wrapper {
+    width: 100%;
+    min-height: 100vh;
+    padding-bottom: 138px;
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 22px 0 24px;
+    background: #fff;
+  }
+
+  .invite-info {
+    display: flex;
+    align-items: center;
+    width: 327px;
+  }
+
+  .avatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: pink;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .partner-name,
+  .label {
+    margin-left: 12px;
+    line-height: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .btn-apply {
+    width: 327px;
+    height: 45px;
+    margin-top: 22px;
+    border-radius: 4px;
+    line-height: 45px;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    color: #fff;
+    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  }
+</style>

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

@@ -1,55 +1,200 @@
 <template>
-  <div class="wrapper">
-    <div class="footer">
-      <div class="invite-info">
-        <div class="avatar">
-          <img src="" alt="">
+  <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="partner-name">蒋华华</p>
-        <p class="label">邀请您</p>
-      </div>
-      <router-link class="btn-apply" :to="{path: '/apply'}">免费在线申请</router-link>
-    </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>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import axios from 'axios'
+
+  const PAGESIZE = 20
   export default {
-    name: 'home'
+    name: 'home',
+    props: {
+      tabindex: {
+        type: Number,
+        default: 1
+      }
+    },
+    data () {
+      return {
+        pager: {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        },
+        listData: [1, 2, 3, 4],
+        scroll: null,
+        numFetchStatus: 0,
+        arrFetchStatus: ['正在加载，请稍后～', '到底了'],
+        booFetchData: false,
+        numPositionY: 0
+      }
+    },
+    activated () {
+      if (!this.$route.meta.isUseCache) {
+        this.pager = {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        }
+        this.listData = []
+        this.scroll = null
+        this.numFetchStatus = 0
+        this.booFetchData = false
+        this.numPositionY = 0
+        this.funFetch()
+      } else {
+        this.$nextTick(() => {
+          if (this.scroll) {
+            this.scroll.refresh()
+            this.scroll.scrollTo(0, this.numPositionY)
+          }
+        })
+      }
+    },
+    methods: {
+      funFetch () {
+        const vm = this
+        axios.post('/', {
+          Page: vm.pager.pagenum,
+          PageSize: vm.pager.pagesize
+        }).then(response => {
+          if (response.Status === 1) {
+            const data = response.Data
+            vm.pager.pagecount = data.pageCount * 1
+            vm.pager.pagenum++
+            vm.booFetchData = true
+            const temp = data.List
+            if (temp.length) {
+              vm.listData = vm.listData.concat(temp)
+              vm.$nextTick(() => {
+                if (!vm.scroll) {
+                  vm.scroll = new BScroll(vm.$refs.wrapper, {
+                    click: true,
+                    pullUpLoad: {
+                      threshold: -20
+                    },
+                    scrollbar: true
+                  })
+                  vm.scroll.on('pullingUp', () => {
+                    if (vm.pager.pagenum > vm.pager.pagecount || vm.pager.pagecount === 0) {
+                      vm.numFetchStatus = 1
+                      return
+                    }
+                    vm.funFetch()
+                  })
+                } else {
+                  vm.scroll.refresh()
+                  vm.scroll.finishPullUp()
+                }
+              })
+            }
+          }
+        }).catch(() => {
+          Toast('失败了')
+        })
+      },
+      funJumpDetail (item) {}
+    }
   }
 </script>
 
 <style lang="scss" scoped>
   .wrapper {
+    position: relative;
     width: 100%;
-    min-height: 100vh;
-    padding-bottom: 138px;
+    height: 100vh;
+    overflow: hidden;
+    background: #fff;
+
+    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;
   }
 
-  .footer {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 99;
+  .list {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 100%;
-    padding: 22px 0 24px;
-    background: #fff;
+    width: 343px;
+    margin-top: 24px;
+    border-radius: 4px;
+
+    &:nth-of-type(1) {
+      margin-top: 26px;
+    }
+
+    &.success {
+      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
+    }
+
+    &.fail {
+      background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
+
+      .right-wrap {
+        p:nth-of-type(2) {
+
+          span:nth-of-type(2),
+          span:nth-of-type(3) {
+            color: #D6BDA1;
+          }
+        }
+      }
+    }
   }
 
-  .invite-info {
+  .top {
     display: flex;
     align-items: center;
-    width: 327px;
+    width: 297px;
+    padding: 18px 0 12px;
+    @include border-bottom-1px(#fff);
   }
 
-  .avatar {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
+  .left-wrap {
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
     overflow: hidden;
     background: pink;
 
@@ -59,26 +204,71 @@
     }
   }
 
-  .partner-name,
-  .label {
-    margin-left: 12px;
-    line-height: 20px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
+  .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(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(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;
+      }
+    }
   }
 
-  .btn-apply {
-    width: 327px;
-    height: 45px;
-    margin-top: 22px;
-    border-radius: 4px;
-    line-height: 45px;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    color: #fff;
-    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
-    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+  .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;
+    }
+  }
+
+  .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;
+    }
   }
 </style>

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

@@ -1,274 +0,0 @@
-<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>
-</template>
-
-<script>
-  import BScroll from 'better-scroll'
-  import { Toast } from 'vant'
-  import axios from 'axios'
-
-  const PAGESIZE = 20
-  export default {
-    name: 'record',
-    props: {
-      tabindex: {
-        type: Number,
-        default: 1
-      }
-    },
-    data () {
-      return {
-        pager: {
-          pagenum: 1,
-          pagesize: PAGESIZE,
-          pagecount: 1
-        },
-        listData: [1, 2, 3, 4],
-        scroll: null,
-        numFetchStatus: 0,
-        arrFetchStatus: ['正在加载，请稍后～', '到底了'],
-        booFetchData: false,
-        numPositionY: 0
-      }
-    },
-    activated () {
-      if (!this.$route.meta.isUseCache) {
-        this.pager = {
-          pagenum: 1,
-          pagesize: PAGESIZE,
-          pagecount: 1
-        }
-        this.listData = []
-        this.scroll = null
-        this.numFetchStatus = 0
-        this.booFetchData = false
-        this.numPositionY = 0
-        this.funFetch()
-      } else {
-        this.$nextTick(() => {
-          if (this.scroll) {
-            this.scroll.refresh()
-            this.scroll.scrollTo(0, this.numPositionY)
-          }
-        })
-      }
-    },
-    methods: {
-      funFetch () {
-        const vm = this
-        axios.post('/', {
-          Page: vm.pager.pagenum,
-          PageSize: vm.pager.pagesize
-        }).then(response => {
-          if (response.Status === 1) {
-            const data = response.Data
-            vm.pager.pagecount = data.pageCount * 1
-            vm.pager.pagenum++
-            vm.booFetchData = true
-            const temp = data.List
-            if (temp.length) {
-              vm.listData = vm.listData.concat(temp)
-              vm.$nextTick(() => {
-                if (!vm.scroll) {
-                  vm.scroll = new BScroll(vm.$refs.wrapper, {
-                    click: true,
-                    pullUpLoad: {
-                      threshold: -20
-                    },
-                    scrollbar: true
-                  })
-                  vm.scroll.on('pullingUp', () => {
-                    if (vm.pager.pagenum > vm.pager.pagecount || vm.pager.pagecount === 0) {
-                      vm.numFetchStatus = 1
-                      return
-                    }
-                    vm.funFetch()
-                  })
-                } else {
-                  vm.scroll.refresh()
-                  vm.scroll.finishPullUp()
-                }
-              })
-            }
-          }
-        }).catch(() => {
-          Toast('失败了')
-        })
-      },
-      funJumpDetail (item) {}
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .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;
-    }
-  }
-
-  .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;
-
-    &:nth-of-type(1) {
-      margin-top: 26px;
-    }
-
-    &.success {
-      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
-    }
-
-    &.fail {
-      background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
-
-      .right-wrap {
-        p:nth-of-type(2) {
-
-          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);
-  }
-
-  .left-wrap {
-    width: 60px;
-    height: 60px;
-    border-radius: 4px;
-    overflow: hidden;
-    background: pink;
-
-    img {
-      display: block;
-      width: 100%;
-    }
-  }
-
-  .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(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(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;
-      }
-    }
-  }
-
-  .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;
-    }
-  }
-
-  .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;
-    }
-  }
-</style>