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

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="账期订单融资"></uni-nav-bar>
    <view class="condition-area flex-row-center-start">
      <qn-data-picker
        v-model="condition.enterpriseId"
        text="right"
        :border="false"
        placeholder="请选择客户"
        popup-title="请选择客户"
        :map="{ text: 'name', value: 'id' }"
        :clear-icon="false"
        :localdata="customerList"
      ></qn-data-picker>
      <qn-data-picker
        v-model="condition.status"
        text="right"
        :border="false"
        placeholder="请选择"
        popup-title="请选择融资状态"
        :map="{ text: 'name', value: 'id' }"
        :clear-icon="false"
        :localdata="statusList"
      ></qn-data-picker>
    </view>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view v-for="item in list" :key="item.id" class="order-area">
        <view class="header flex-row-center-space">
          <text style="font-size: 30rpx; font-weight: 600; word-break: break-all">{{ item.customerEnterpriseName }}</text>
          <text style="font-size: 30rpx; font-weight: 500; color: #ff5368">{{ financeStatusMap[item.status] }}</text>
        </view>
        <view class="content">
          <view
            class="order-item flex-row-center-start"
            v-for="(order, index) in item.orderItmes"
            :key="order.productId"
            :style="{ borderTop: index == 0 ? '' : '1px solid #dddddd' }"
          >
            <image class="img" :src="order.productImg"></image>
            <view class="flex-col-start-start">
              <text style="font-size: 30rpx; color: #333333; font-weight: 600; margin-bottom: 26rpx">{{ order.productName }}</text>
              <text style="font-size: 26rpx; color: #888888; font-weight: 400; word-break: break-all">
                {{ order.categoryName }}/{{ order.brandName }}/{{ order.gramWeight }}g/{{ order.width }}*{{ order.length }}/{{ order.pieceQuantity }}张
              </text>
            </view>
          </view>
        </view>
        <view class="footer flex-row-center-space">
          <text style="font-size: 26rpx; color: #888888">{{ dateTimeFormat(item.createTime, 'yyyy/mm/dd') }}</text>
          <text style="font-size: 30rpx; color: #ff5368">￥ {{ item.totalOfferPrice }}</text>
        </view>
      </view>
      <!-- <packingStationItem style="margin-bottom: 20rpx" v-for="item in list" :key="item.enterpriseId" :info="item"></packingStationItem> -->
      <!-- <packingStationItem></packingStationItem> -->
    </scroll-list>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { dateTimeFormat } from '@/utils/index.js'
import { getFinanceList, getCooperationList } from '@/apis/orderApi.js'
import { financeStatusMap } from '@/enums/index.js'
const statusList = [
  {
    id: 0,
    name: '全部'
  },
  {
    id: 1,
    name: '未融资'
  },
  {
    id: 2,
    name: '已融资'
  }
]
export default {
  data() {
    return {
      customerList: [
        {
          id: '',
          name: '全部客户'
        },
        {
          id: '807704',
          name: '揭阳市广工印刷有限公司'
        }
      ],
      statusList: Object.freeze(statusList),
      financeStatusMap: Object.freeze(financeStatusMap),
      condition: {
        enterpriseId: '',
        status: 0
      },
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      list: [],
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA'
      }
    }
  },
  methods: {
    go2,
    back,
    dateTimeFormat,
    getList() {
      return new Promise((resolve, reject) => {
        getFinanceList({ ...this.condition, ...this.pagination })
          .then((res) => {
            if (res) {
              if (this.pagination.pageNum == 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()
        })
    }
  },
  watch: {
    condition: {
      handler(val) {
        this.downCallback()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .condition-area {
    width: 750rpx;
    height: 80rpx;
    padding: 0 32rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
  }
}
.order-area {
  width: 750rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .header {
    padding: 24rpx 32rpx;
    border-bottom: 1px solid #dddddd;
  }
  .content {
    padding: 0 32rpx;
    width: 750rpx;
    border-bottom: 1px solid #dddddd;
    .order-item {
      width: 686rpx;
      padding: 24rpx 0;
      .img {
        width: 100rpx;
        height: 100rpx;
        margin-right: 20rpx;
      }
    }
  }
  .footer {
    width: 750rpx;
    padding: 24rpx 32rpx;
  }
}
</style>