paper-shopkeeper-app/pages/client-credit-list/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="授信记录"></uni-nav-bar>
    <view class="list-area">
      <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
        <view v-for="item in list" :key="item.id" class="container">
          <view class="list-item">
            <image class="item_image" src="/static/imgs/client-credit-list/client-default.png"></image>
            <view class="item">
              <view class="name">{{ item.name }}</view>
              <text class="business">{{ transformBusiness(item.mainProducts) }}</text>
            </view>
            <image class="icon" style="width: 160rpx" :src="showIcon(item.status)"></image>
          </view>
          <view class="item-footer">
            <text class="time">{{ formatTime(item.createTime) }}</text>
            <text class="button" @click="go2('client-credit-detail', { id: item.id })">查看授信</text>
          </view>
        </view>
      </scroll-list>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { dateTimeFormat } from '@/utils/index.js'
import { getFsCreditList } from '@/apis/clientCreditApi'
import { fsAuditStatus } from '@/enums/index.js'
export default {
  data() {
    return {
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无授信~',
        background: '#F7F8FA'
      },
      list: [],
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      }
    }
  },
  methods: {
    go2,
    back,
    transformBusiness(business) {
      let text = business?.trim() || ''
      if (text.length > 17) {
        text = text.substr(0, 17) + '...'
      }
      return '主营：' + (text || '-')
    },
    formatTime(time) {
      return dateTimeFormat(new Date(time), 'yyyy/mm/dd')
    },
    showIcon(status) {
      let src = ''
      switch (status) {
        case fsAuditStatus.AUDITING:
          src = '/static/imgs/client-credit-list/auditing.png'
          break
        case fsAuditStatus.PASS:
          src = '/static/imgs/client-credit-list/pass.png'
          break
        case fsAuditStatus.REJECT:
          src = '/static/imgs/client-credit-list/reject.png'
          break
        default:
          src = '/static/imgs/client-credit-list/waiting-audit.png'
          break
      }
      return src
    },
    getList() {
      return new Promise((resolve, reject) => {
        getFsCreditList({ mallSupplierId: this.$store.state.supplierInfo.supplierId, ...this.pagination })
          .then((res) => {
            if (res) {
              if (res.current == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              // this.list = []
              // this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
              resolve({ list: this.list, total: res.total })
            } else {
              reject()
            }
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    downCallback() {
      this.pagination.pageNum = 1
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.refreshFail()
        })
    },
    upCallback(page) {
      this.pagination.pageNum++
      this.getList()
        .then(({ list, total }) => {
          this.$refs.list.loadSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.list.loadFail()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  .list-area {
    flex-grow: 1;
    overflow: hidden;
  }
}
.container {
  background-color: #fff;
  margin-bottom: 20rpx;
  .list-item {
    width: 750rpx;
    height: 148rpx;
    padding: 24rpx 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-bottom: 2rpx solid #eee;
    position: relative;
    .item_image {
      flex-grow: 0;
      flex-basis: auto;
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
    }
    .item {
      .name {
        font-size: 30rpx;
        margin-bottom: 26rpx;
        color: #333333;
        max-width: 400rpx;
      }
      .business {
        font-size: 26rpx;
        color: #888888;
      }
    }
    .icon {
      position: absolute;
      right: 0;
      top: 0;
      height: 50rpx;
    }
  }
  .item-footer {
    width: 750rpx;
    height: 80rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .time {
      font-size: 28rpx;
      color: #888888;
    }
    .button {
      font-size: 28rpx;
      color: #007aff;
    }
  }
}
</style>