|
|
@@ -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>
|
panyong
