print-package-app/pages/apply-manage/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="验厂申请"></uni-nav-bar>
    <scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback">
      <view class="list-item flex-col" v-for="item in list" :key="item.id" @click="go2('apply-detail', { id: item.id })">
        <view class="top-group flex-col">
          <text class="text_8">{{ item.userName }} 申请远程验厂</text>
          <view class="center-text-wrapper flex-col items-center view_1" :class="bgMap[item.status].bg">
            <text>{{ bgMap[item.status].text }}</text>
          </view>
          <text class="text_11">{{ item.createTime }}</text>
        </view>
        <text class="text_13">{{ item.enterpriseName }}</text>
      </view>
    </scroll-list>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { applyingTypeEnum } from '@/enums/index'
import { getApplyingList } from '@/apis/applyApi'
const bgMap = {
  [applyingTypeEnum.WAITING]: {
    bg: 'waiting-bg',
    text: '待处理'
  },
  [applyingTypeEnum.AGREE]: {
    bg: 'agree-bg',
    text: '已同意'
  },
  [applyingTypeEnum.REJECT]: {
    bg: 'reject-bg',
    text: '已拒绝'
  },
  [applyingTypeEnum.EXPIRED]: {
    bg: 'expired-bg',
    text: '已过期'
  }
}
export default {
  data() {
    return {
      bgMap: Object.freeze(bgMap),
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无数据~',
        background: '#F7F8FA',
        disabled: false
      },
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 10
      },
      list: []
    }
  },
  methods: {
    go2,
    back,
    getList() {
      return new Promise((resolve, reject) => {
        getApplyingList({ ...this.pagination })
          .then((res) => {
            // console.log('询价列表', res.records)
            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() {
      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 {
  width: 750rpx;
}
.list-item {
  margin-bottom: 20rpx;
  padding-left: 32rpx;
  padding-bottom: 24rpx;
  background-color: rgb(255, 255, 255);
  .top-group {
    padding-top: 24rpx;
    position: relative;
    .text_8 {
      color: rgb(0, 58, 140);
      font-size: 32rpx;
      font-weight: 500;
      line-height: 45rpx;
      white-space: nowrap;
    }
    .center-text-wrapper {
      color: rgb(255, 255, 255);
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      white-space: nowrap;
    }
    .view_1 {
      padding: 5rpx 0;
      border-radius: 0px 0px 0px 20rpx;
      width: 120rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
    .agree-bg {
      background-color: rgba(19, 194, 194, 0.6);
    }
    .reject-bg {
      background-color: rgba(255, 122, 69, 0.6);
    }
    .expired-bg {
      background-color: rgb(217, 217, 217);
    }
    .waiting-bg {
      background-color: rgba(89, 126, 247, 0.6);
    }
    .text_11 {
      margin-top: 5rpx;
      color: rgb(136, 136, 136);
      font-size: 24rpx;
      line-height: 33rpx;
      white-space: nowrap;
      position: relative;
    }
  }
  .text_13 {
    margin-top: 15rpx;
    color: rgb(85, 85, 85);
    font-size: 28rpx;
    line-height: 40rpx;
    white-space: nowrap;
  }
}
</style>