|
|
@@ -1,13 +1,318 @@
|
|
|
<template>
|
|
|
- <div>marketing</div>
|
|
|
+ <div class="conatainer">
|
|
|
+ <div class="header">
|
|
|
+ <h2 class="title">您好，王名</h2>
|
|
|
+ <router-link :to="{path: '/partner/goods'}">
|
|
|
+ <img src="./image/xiaoshou_bg_tuiguang@2x.png" alt="">
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <p class="my-customer">我的客户</p>
|
|
|
+ <div class="better-scroll wrapper" ref="wrapper">
|
|
|
+ <ul>
|
|
|
+ <li class="list" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
|
|
|
+ <div class="name-wrap">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ <p class="name">蒋华华</p>
|
|
|
+ </div>
|
|
|
+ <p class="phone">手机号：182762663</p>
|
|
|
+ <div class="loan-info">
|
|
|
+ <p class="label">申请产品：信用贷</p>
|
|
|
+ <p>
|
|
|
+ <span class="label">需求金额：</span>
|
|
|
+ <span class="value">30万元</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <p class="create-time">申请时间：2020-09-23 9:23</p>
|
|
|
+ <p class="status bg-0" v-if="false">进度：提交资料</p>
|
|
|
+ <p class="status bg-1" v-if="false">成功放款8万</p>
|
|
|
+ <p class="status bg-2" v-if="true">已拒绝放款</p>
|
|
|
+ </li>
|
|
|
+ <li class="bitmap" v-if="!listData.length && booFetchData">
|
|
|
+ <p>暂无记录</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import BScroll from 'better-scroll'
|
|
|
+ import { Toast } from 'vant'
|
|
|
+ import axios from 'axios'
|
|
|
+
|
|
|
+ const PAGESIZE = 20
|
|
|
export default {
|
|
|
- name: 'marketing'
|
|
|
+ name: 'marketing',
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted () {
|
|
|
+ await this.$nextTick()
|
|
|
+ this.$refreshTitle('进度查询')
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ this.$router.push('/loan/detail')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .conatainer {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ padding: 24px 0 20px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 24px;
|
|
|
+ line-height: 33px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 343px;
|
|
|
+ height: 88px;
|
|
|
+ margin: 12px 0 0 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .my-customer {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 24px;
|
|
|
+ margin: 24px 0 16px;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 242px);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 19px 0 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #FFF;
|
|
|
+ box-shadow: 0 2px 0px -1px rgba(224, 224, 224, 0.5);
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 331px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-right: 13px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ background: pink;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ .name,
|
|
|
+ .phone {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone {
|
|
|
+ width: 331px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loan-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 331px;
|
|
|
+ margin-top: 7px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-left: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #EE0A23;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-time {
|
|
|
+ width: 331px;
|
|
|
+ margin-top: 7px;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ top: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 0 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &.bg-0 {
|
|
|
+ background: #F39D41;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bg-1 {
|
|
|
+ background: #53DA6A;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bg-2 {
|
|
|
+ background: #EE0A23;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bitmap {
|
|
|
+ p {
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
panyong