paper-shopkeeper-app/pages/credit-management/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" statusBar @clickLeft="back" fixed title="征信管理"></uni-nav-bar>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view class="list-item flex-col" :key="i" v-for="(item, i) in list">
        <view class="top-group flex-row">
          <image class="image_4" src="/static/imgs/client/client-default.png" />
          <view class="right-group flex-col">
            <view class="top-group_1 flex-row">
              <text>{{ item.enterpriseName }}</text>
              <image :src="item.isOverdue ? '/static/imgs/general/overdue-icon.png' : '/static/imgs/general/not-overdue-icon.png'" class="image_6" />
            </view>
            <view class="center-group flex-row-center-space">
              <view class="flex-row">
                <text>授信日期：</text>
                <text>{{ item.createTime | dateFormat }}</text>
              </view>
              <view class="right-group_1 flex-row">
                <text>授信额度：</text>
                <text>{{ item.creditLine | transformAmount }}</text>
              </view>
            </view>
            <view class="bottom-group flex-row-center-space">
              <view class="left-group flex-row">
                <text>交易额度：</text>
                <text>{{ item.usedCreditLine | transformAmount }}</text>
              </view>
              <view class="right-group_2 flex-row">
                <text>剩余额度：</text>
                <text>{{ item.availableCreditLine | transformAmount }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="bottom-text-wrapper flex-row-center-space">
          <text class="text_15" @click="go2('credit-company-order', { info: JSON.stringify(item) })">查看订单</text>
          <view class="flex-col items-center text-wrapper" v-show="item.isOverdue && item.uploadStatus == 0" @click="uploadCredit(item)">
            <text>上传银行征信</text>
          </view>
          <text class="text_15" v-show="item.uploadStatus == 1">已上传</text>
          <text class="text_15" v-show="item.uploadStatus == 2">已审核通过</text>
        </view>
      </view>
    </scroll-list>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getCreditCompanyList, uploadCompanyCredit } from '@/apis/creditManagementApi.js'
export default {
  data() {
    return {
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      condition: {
        supplierId: this.$store.state.supplierInfo.supplierId
      },
      list: [],
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      }
    }
  },
  methods: {
    go2,
    back,
    getList() {
      return new Promise((resolve, reject) => {
        getCreditCompanyList({ ...this.condition, ...this.pagination })
          .then((res) => {
            if (res) {
              if (res.current == 1) {
                this.list = res.records
              } else {
                this.list = this.list.concat(res.records)
              }
              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()
        })
    },
    uploadCredit(item) {
      uni.showModal({
        title: '提示',
        content: '确定上传银行征信吗？',
        success: (res) => {
          if (res.confirm) {
            uploadCompanyCredit({ customerEnterpriseId: item.enterpriseId, supplierId: this.condition.supplierId }).then((result) => {
              if (result) {
                this.$refs.list.refresh()
                uni.showToast({
                  title: '申请已提交，请耐心等待',
                  icon: 'none'
                })
              }
            })
          }
        }
      })
    }
  },
  filters: {
    transformAmount(value) {
      if (value == null) {
        return '0'
      }
      let cnt = value / 10000
      cnt = Math.round(cnt * 100) / 100
      cnt = cnt + ''
      let arr = cnt.split('.')
      arr[1] ? (arr[1] = arr[1] + '00'.substr(0, 2 - arr[1].length)) : (arr[1] = '00')
      return arr.join('.') + '万'
    },
    dateFormat(value) {
      if (!value) {
        return ''
      }
      return value.split(' ')[0]
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .list-item {
    background-color: rgb(255, 255, 255);
    &:last-of-type {
      margin-top: 20rpx;
    }
    .top-group {
      padding: 20rpx 32rpx 28rpx 32rpx;
      border-bottom: solid 2rpx rgb(221, 221, 221);
      .image_4 {
        width: 100rpx;
        height: 100rpx;
      }
      .right-group {
        margin-left: 20rpx;
        padding-bottom: 10rpx;
        flex: 1 1 auto;
        .top-group_1 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          text {
            word-break: break-all;
            max-width: 440rpx;
          }
          .image_6 {
            margin-left: 20rpx;
            margin-top: 6rpx;
            width: 100rpx;
            height: 32rpx;
          }
        }
        .center-group {
          margin-top: 24rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
          .right-group_1 {
            margin-left: 39rpx;
          }
        }
        .bottom-group {
          margin-top: 12rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          white-space: nowrap;
          .right-group_2 {
            margin-left: 39rpx;
          }
        }
      }
    }
    .bottom-text-wrapper {
      padding: 18rpx 32rpx 20rpx;
      .text_15 {
        color: rgb(0, 122, 255);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
      .text-wrapper {
        padding: 7rpx 0;
        color: rgb(255, 255, 255);
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        white-space: nowrap;
        background-color: rgb(0, 122, 255);
        border-radius: 27rpx;
        width: 216rpx;
      }
    }
  }
}
</style>