贷款-新增注册、我的、优惠券静态页面

htmldev/loan/src/router/index.js

@@ -27,9 +27,23 @@ const routes = [
     }
   },
   {
-    path: '/loan/login', // 登录
-    name: 'loanLogin',
-    component: () => import(/* webpackChunkName: "loan_login" */ '../views/loan/login')
+    path: '/loan/register', // 注册
+    name: 'loanRegister',
+    component: () => import(/* webpackChunkName: "loan_register" */ '../views/loan/register')
+  },
+  {
+    path: '/loan/mine', // 我的
+    name: 'loanMine',
+    component: () => import(/* webpackChunkName: "loan_mine" */ '../views/loan/mine')
+  },
+  {
+    path: '/loan/coupon', // 优惠券
+    name: 'loanCoupon',
+    component: () => import(/* webpackChunkName: "loan_coupon" */ '../views/loan/coupon'),
+    meta: {
+      isUseCache: false,
+      keepAlive: true
+    }
   },
   {
     path: '/loan/explain/:orderProductId', // 贷款介绍

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

@@ -0,0 +1,309 @@
+<template>
+  <div class="container">
+    <div class="better-scroll wrapper" ref="wrapper">
+      <ul>
+        <li class="list" v-for="(item, index) in listData" :key="index">
+          <img class="icon" src="./image/able@2x.png" alt="" v-if="false">
+          <img class="icon" src="./image/disable@2x.png" alt="" v-else>
+          <p class="coupon-id">
+            <span>ID:</span>
+            <span>2319283927421</span>
+          </p>
+        </li>
+        <li class="load-status" v-if="listData.length && booFetchData">
+          <p>{{ arrFetchStatus[numFetchStatus] }}</p>
+        </li>
+        <li class="bitmap" v-if="!listData.length && booFetchData">
+          <img src="" alt="">
+          <p>暂无记录</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BScroll from 'better-scroll'
+  import { Toast } from 'vant'
+  import { getOrderList } from '../home/api'
+
+  const PAGESIZE = 20
+  export default {
+    name: 'home',
+    props: {
+      tabindex: {
+        type: Number,
+        default: 1
+      }
+    },
+    data () {
+      return {
+        pager: {
+          pagenum: 1,
+          pagesize: PAGESIZE,
+          pagecount: 1
+        },
+        listData: [],
+        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.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)
+          }
+        })
+      }
+      this.$route.meta.isUseCache = false
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('优惠券')
+    },
+    methods: {
+      funFetch () {
+        const vm = this
+        getOrderList(vm.pager.pagenum, vm.pager.pagesize).then(response => {
+          if (response.status) {
+            const data = response.data
+            const temp = data.data
+            vm.pager.pagecount = Math.ceil(data.count / PAGESIZE)
+            vm.pager.pagenum++
+            vm.booFetchData = true
+            if (vm.pager.pagecount <= 1) {
+              vm.numFetchStatus = 2
+            } else {
+              vm.numFetchStatus = 1
+            }
+            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.numFetchStatus = 2
+                      return
+                    }
+                    vm.funFetch()
+                  })
+                } else {
+                  vm.scroll.refresh()
+                  vm.scroll.finishPullUp()
+                }
+              })
+            }
+          } else {
+            Toast(response.msg)
+            vm.numFetchStatus = 3
+          }
+        }).catch(() => {
+          Toast('出错啦')
+          vm.numFetchStatus = 3
+        })
+      },
+      funJumpDetail (item) {
+        this.$router.push({ path: '/loan/detail/' + item.id })
+      }
+    },
+    beforeDestroy () {
+      if (this.scroll) {
+        this.scroll.destroy()
+      }
+    },
+    beforeRouteLeave (to, from, next) {
+      if (['loanDetail'].includes(to.name)) {
+        from.meta.isUseCache = true
+      }
+      this.numPositionY = this.scroll ? this.scroll.y : 0
+      next()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+  }
+
+  .wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 80px;
+    }
+  }
+
+  .list {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 329px;
+    height: 114px;
+    margin-top: 26px;
+    overflow: hidden;
+
+    &.bg-0 {
+      background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
+    }
+
+    &.bg-1 {
+      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
+    }
+  }
+
+  .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    display: block;
+    width: 67px;
+    height: 73px;
+  }
+
+  .coupon-id {
+    position: absolute;
+    left: 27px;
+    bottom: 11px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    span {
+      line-height: 20px;
+      font-size: 14px;
+      color: #999;
+
+      &:nth-of-type(2) {
+        margin-left: 13px;
+      }
+    }
+  }
+
+  .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;
+      }
+
+      span:nth-of-type(3) {
+        padding-bottom: 4px;
+        line-height: 20px;
+        font-size: 15px;
+        font-weight: bolder;
+      }
+
+      .col-0 {
+        color: #A7A7A7;
+      }
+
+      .col-1 {
+        color: #D6BDA1;
+      }
+    }
+  }
+
+  .fail {
+    position: absolute;
+    right: 14px;
+    top: 21px;
+    z-index: 1;
+    display: block;
+    width: 77px;
+    height: 49px;
+  }
+
+  .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;
+    }
+  }
+
+  .load-status {
+    p {
+      line-height: 20px;
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  .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/loan/mine/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="conatainer">
+    <div class="header">
+      <div class="avatar">
+        <img src="" alt="">
+      </div>
+      <p class="name">王叁叁</p>
+      <p class="logo">
+        <img src="./image/VIP@2x.png" alt="">
+        <span>驼驼会员VIP1</span>
+      </p>
+      <p class="expire">2020-4-29到期</p>
+    </div>
+    <div class="menu-wrap">
+      <router-link :to="{path: '/loan/coupon'}">
+        <span class="label-wrap">
+          <img class="icon-left" src="./image/icon_wd_quan@2x.png" alt="">
+          <i class="label">我的券</i>
+        </span>
+        <span class="value-wrap">
+          <span class="box">
+            <i class="text">有</i>
+            <i class="value">2</i>
+            <i class="text">张</i>
+          </span>
+          <img class="icon-right" src="./image/btn_next@2x.png" alt="">
+        </span>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'mine',
+    data () {
+      return {}
+    },
+    async mounted () {
+      await this.$nextTick()
+      this.$refreshTitle('我的')
+    },
+    methods: {}
+  }
+</script>
+
+<style lang="scss" scoped>
+  .conatainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    background: #fff;
+  }
+
+  .header {
+    position: relative;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 25px 0 44px;
+    background: url("./image/header_bg@2x.png") center top/100% 100% no-repeat;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: pink;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .name {
+    margin-top: 5px;
+    line-height: 25px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+
+    span {
+      line-height: 20px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #FFFFFF;
+      background: linear-gradient(209deg, #C9AD8D 0%, #EDE1D2 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .expire {
+    margin-top: 5px;
+    line-height: 17px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .menu-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: 11px;
+
+    a {
+      display: flex;
+      justify-content: space-between;
+      width: 355px;
+      padding: 23px 18px 23px 16px;
+      border-radius: 4px;
+      box-shadow: 0 2px 0px -1px rgba(224, 224, 224, 0.5);
+    }
+
+    .label-wrap,
+    .value-wrap,
+    .box {
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      margin-left: 12px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .value {
+      margin: 0 2px;
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .text {
+      padding-top: 2px;
+      line-height: 20px;
+      font-size: 14px;
+      color: #999;
+    }
+
+    .icon-left {
+      width: 20px;
+      height: 20px;
+    }
+
+    .icon-right {
+      width: 22px;
+      height: 22px;
+      margin-left: 24px;
+    }
+  }
+</style>

htmldev/loan/src/views/loan/login/index.vue → htmldev/loan/src/views/loan/register/index.vue

@@ -105,7 +105,7 @@
   import { createOrder } from '../apply/api'
 
   export default {
-    name: 'login',
+    name: 'register',
     components: {
       'van-popup': Popup,
       'van-picker': Picker