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

<template>
  <div class="container">
    <div class="header">
      <h2 class="title">贷款产品</h2>
    </div>
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <li class="list bg-1" v-for="(item, index) in listData" :key="index" @click="funJumpDetail(item)">
          <div class="top">
            <div class="left-wrap">
              <img :src="item.productLogUrl" alt="">
            </div>
            <div class="right-wrap">
              <p>{{ item.productName }}</p>
              <p>
                <span>最高：</span>
                <span class="col-1">{{ item.productPrice / 10000 }}</span>
                <span class="col-1">万元</span>
              </p>
            </div>
          </div>
        </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>
    <Poster :posterBg="posterBg"
            :codeParams="codeParams"
            ref="myPoster"/>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Toast } from 'vant'
import Poster from '../poster'
import { productList } from './api'

const PAGESIZE = 20
export default {
  name: 'goods',
  components: {
    Poster
  },
  props: {
    partnerId: {
      type: String,
      default: ''
    },
    partnerName: {
      type: String,
      default: ''
    },
    partnerImgUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      pager: {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      },
      listData: [],
      scroll: null,
      numFetchStatus: 0,
      arrFetchStatus: ['正在加载，请稍后～', '上拉加载更多', '没有更多了', '出错啦'],
      booFetchData: false,
      numPositionY: 0,
      posterBg: '',
      codeParams: {
        link: '',
        x: 124,
        y: 1174,
        width: 202,
        height: 202
      }
    }
  },
  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.$nextTick(() => {
      this.$refreshTitle('贷款产品')
    })
  },
  methods: {
    funFetch () {
      const vm = this
      vm.numFetchStatus = 0
      productList(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) {
      const { id, productShareUrl } = item
      this.posterBg = productShareUrl
      this.$set(this.codeParams, 'link', `${location.origin}/loan/explain/${id}?partnerId=${this.partnerId}`)
      this.$nextTick(() => {
        console.log(this.codeParams)
        this.$refs.myPoster.createQRCode()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #fff;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 25px 0 24px;
}

.title {
  width: 343px;
  padding-left: 8px;
  line-height: 33px;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 82px);
  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: 343px;
  margin-bottom: 26px;
  border-radius: 4px;

  &.bg-0 {
    background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
  }

  &.bg-1 {
    background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
  }
}

.top {
  display: flex;
  align-items: center;
  width: 297px;
  padding: 18px 0 12px;
}

.left-wrap {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;

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

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

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