my_loan/htmldev/loan/src/views/partner/customer/index.vue

<template>
  <div class="better-scroll wrapper" ref="wrapper">
    <ul>
      <li class="list" v-for="(item, index) in listData" :key="index">
        <div class="name-wrap">
          <div class="avatar">
            <img :src="item.userHeadImgUrl" alt="">
          </div>
          <p class="name">{{ item.orderUserName }}</p>
        </div>
        <p class="phone">手机号：{{ item.orderUserPhone }}</p>
        <div class="loan-info">
          <p class="label">申请产品：{{ item.orderProduceName }}</p>
          <p>
            <span class="label">需求金额：</span>
            <span class="value">{{ item.orderPrice / 10000 }}万元</span>
          </p>
        </div>
        <p class="create-time">申请时间：{{ item.createdAt }}</p>
        <!--orderFinalStatus：0-进行中 1-成功 2-失败-->
        <p class="status bg-0" v-if="item.orderFinalStatus === 0">进度：{{ item.orderStatus }}</p>
        <p class="status bg-1" v-if="item.orderFinalStatus === 1">{{ item.orderStatus }}</p>
        <p class="status bg-2" v-if="item.orderFinalStatus === 2">{{ item.orderStatus }}</p>
      </li>
      <li class="load-status" v-if="listData.length && booFetchData">
        <p>{{ arrFetchStatus[numFetchStatus] }}</p>
      </li>
      <li class="bitmap" v-if="!listData.length && booFetchData">
        <p>暂无记录</p>
      </li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import { saleList } from './api'

const PAGESIZE = 20
export default {
  name: 'marketing',
  data () {
    return {
      pager: {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      },
      listData: [],
      scroll: null,
      numFetchStatus: 0,
      arrFetchStatus: ['正在加载，请稍后～', '上拉加载更多', '没有更多了', '出错啦'],
      booFetchData: false
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.pager = {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      }
      this.listData = []
      this.numFetchStatus = 0
      this.booFetchData = false
      this.funFetch()
    } else {
      this.$nextTick(() => {
        if (this.scroll) {
          this.scroll.refresh()
        }
      })
    }
    this.$nextTick(() => {
      this.$refreshTitle('妥妥推手')
    })
  },
  computed: {
    ...mapGetters({
      search: 'business/searchValueOfMyCustomer',
      isSearchOfMyCustomer: 'business/isSearchOfMyCustomer'
    })
  },
  watch: {
    isSearchOfMyCustomer: {
      handler: function (newVal) {
        if (!newVal) {
          return
        }
        this.pager = {
          pagenum: 1,
          pagesize: PAGESIZE,
          pagecount: 1
        }
        this.listData = []
        this.numFetchStatus = 0
        this.booFetchData = false
        this.funFetch()
      }
    }
  },
  methods: {
    funFetch () {
      const vm = this
      vm.numFetchStatus = 0
      // 搜索按钮置为默认状态
      if (this.isSearchOfMyCustomer) {
        vm.$store.dispatch('business/setIsSearchOfMyCustomer', 0)
      }
      saleList(vm.pager.pagenum, vm.pager.pagesize, this.search).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
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['partnerAll', 'partnerGoods', 'partnerMine'].includes(to.name)) {
      from.meta.isUseCache = true
    }
    this.$store.dispatch('business/setDefaultNav', from.path)
    next()
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 242px);
  overflow: hidden;

  ul {
    width: 100%;
    padding-bottom: 200px;
  }
}

.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;

  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;
  }
}

.load-status {
  margin-top: 12px;

  p {
    line-height: 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }
}

.bitmap {
  p {
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #333;
  }
}
</style>