我的申请记录静态

htmldev/loan/package-lock.json

@@ -1054,6 +1054,93 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@better-scroll/core": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/core/download/@better-scroll/core-2.0.4.tgz",
+      "integrity": "sha1-fTzNwbRDVTKX7zWW0m4NSeRlXZg=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/shared-utils": "^2.0.4"
+      }
+    },
+    "@better-scroll/mouse-wheel": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/mouse-wheel/download/@better-scroll/mouse-wheel-2.0.4.tgz",
+      "integrity": "sha1-VxPlGu6zYee4g4ASPGSi/cQuoKw=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/observe-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/observe-dom/download/@better-scroll/observe-dom-2.0.4.tgz",
+      "integrity": "sha1-oyt7x1NZzGdHTm8FNN/kOS7y7pE=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/pull-down": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/pull-down/download/@better-scroll/pull-down-2.0.4.tgz",
+      "integrity": "sha1-rH1pr2rv1KnnkiIYgvvF1rO1vxI=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/pull-up": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/pull-up/download/@better-scroll/pull-up-2.0.4.tgz",
+      "integrity": "sha1-n4ZeP4HWUjDZ3DJBvyrgmopjgNE=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/scroll-bar": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/scroll-bar/download/@better-scroll/scroll-bar-2.0.4.tgz",
+      "integrity": "sha1-OXmLRh1M/VyAlpM8iHQqghVmyok=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/shared-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/shared-utils/download/@better-scroll/shared-utils-2.0.4.tgz",
+      "integrity": "sha1-T8EOFv3kKr/IUBzhpSGwWoYrwuk=",
+      "dev": true
+    },
+    "@better-scroll/slide": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/slide/download/@better-scroll/slide-2.0.4.tgz",
+      "integrity": "sha1-oQ6ww6ZCX3eDNuGK+ln/e0ijn48=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/wheel": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/wheel/download/@better-scroll/wheel-2.0.4.tgz",
+      "integrity": "sha1-FxQ6gK5pgx1v0RK/hhr6O9By4ng=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
+    "@better-scroll/zoom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/@better-scroll/zoom/download/@better-scroll/zoom-2.0.4.tgz",
+      "integrity": "sha1-JA0bm+vGQhY9sMJ6Dm3NXlxgtqk=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz?cache=0&sync_timestamp=1593993805194&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-2.1.4.tgz",
@@ -2762,6 +2849,23 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-scroll": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npm.taobao.org/better-scroll/download/better-scroll-2.0.4.tgz",
+      "integrity": "sha1-/uVvYVgxkGUWH3lwgExkQ4iAF5w=",
+      "dev": true,
+      "requires": {
+        "@better-scroll/core": "^2.0.4",
+        "@better-scroll/mouse-wheel": "^2.0.4",
+        "@better-scroll/observe-dom": "^2.0.4",
+        "@better-scroll/pull-down": "^2.0.4",
+        "@better-scroll/pull-up": "^2.0.4",
+        "@better-scroll/scroll-bar": "^2.0.4",
+        "@better-scroll/slide": "^2.0.4",
+        "@better-scroll/wheel": "^2.0.4",
+        "@better-scroll/zoom": "^2.0.4"
+      }
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz",

htmldev/loan/package.json

@@ -20,6 +20,7 @@
     "axios": "^0.20.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
+    "better-scroll": "^2.0.4",
     "cross-env": "^7.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

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

@@ -1,13 +1,274 @@
 <template>
-  <div></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>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import axios from 'axios'
+
+  const PAGESIZE = 20
   export default {
-    name: 'record'
+    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 scoped>
+<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>