paper-shopkeeper-app/pages/trade/quotationList.vue

<template>
  <view class="quotation-list">
    <scroll-list ref="quotationRef" :option="option" @load="quotationUp" @refresh="quotationDown">
      <view v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx">
        <view class="list-border list-title-line">
          <text class="list-title">{{ item.belongEnterpriseName }}</text>
          <text class="list-title-Subtitle">{{ item.replyStatus | replyStatusName }}</text>
        </view>
        <view @click="offerClick(item)">
          <view class="list-border list-info-line">
            <view
              class="list-info"
              :class="subIndex + 1 === item.itemList.length ? '' : 'list-border'"
              v-for="(subItem, subIndex) in item.itemList"
              :key="subIndex"
            >
              <view>
                <image
                  class="list-image"
                  :src="subItem.productImg || 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/paper-default-small.png'"
                  mode=""
                ></image>
              </view>
              <view class="list-info-content">
                <view class="list-info-title">{{ subItem.paperName }}</view>
                <view class="list-info-text">
                  {{ subItem.brandName }}/{{ subItem.categoryName }}/{{ subItem.gramWeight }}g/{{ subItem.width }}*{{ subItem.length }}/{{ subItem.quantity }}张
                </view>
              </view>
            </view>
          </view>
          <view class="list-border list-bottom-content">
            <view>
              <text>交货时间：</text>
              <text>{{ item.deliveryDay }}</text>
            </view>
            <view>
              <text>交货区域：</text>
              <text>{{ item.deliveryArea }}</text>
            </view>
            <view class="offer-class">
              <view class="offer-width">
                <text>报价截止：</text>
                <text>{{ item.enquiryValidTime }}</text>
              </view>
              <view><button type="primary" class="offer-btn">报价</button></view>
            </view>
          </view>
        </view>
      </view>
    </scroll-list>
    <view>
      <view class="offer-prices" @click="nativeTo()">
        <image class="my-image" src="../../static/imgs/trade/myPrice.png" mode=""></image>
        <view class="my-price">我的报价</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getEnterpriseList } from '@/apis/trade'
import { go2 } from '@/utils/hook.js'
import uGap from '@/components/u-gap/u-gap.vue'
export default {
  props: {
    queryData: {
      type: Object,
      default: () => ({})
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  components: {
    uGap
  },
  data() {
    return {
      option: {
        size: 10,
        auto: true,
        emptyText: '暂无报价信息~',
        fontSize: '40rpx',
        emptyImage: '/static/imgs/client-detail/no-data-icon.png'
      },
      params: {
        asc: '',
        desc: '',
        mallSupplierIds: [this.$store.state.supplierInfo.supplierId] // 网关获取供应商ID集合
      },
      pagination: {
        pageNum: 0, // 初始会执行一次下拉加载
        pageSize: 20
      },
      list: []
    }
  },
  watch: {
    refresh() {
      this.quotationDown()
    }
  },
  filters: {
    replyStatusName(status) {
      let name = ''
      // 供应商端显示报价状态 30128 待报价 30130 已报价 30139 转化订单 30102 已失效
      switch (status) {
        case 30128:
          name = '待报价'
          break
        case 30130:
          name = '已报价'
          break
        case 30139:
          name = '转化订单'
          break
        case 30102:
          name = '已失效'
          break
        default:
          break
      }
      return name
    }
  },
  methods: {
    // 获取报价列表
    getQuotationQuery() {
      return new Promise((resolve, reject) => {
        getEnterpriseList({ ...this.params, ...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)
          })
      })
    },

    //报价分页
    quotationUp(page) {
      this.pagination.pageNum++
      this.getQuotationQuery()
        .then(({ list, total }) => {
          this.$refs.quotationRef.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.quotationRef.loadFail()
        })
    },
    //报价分页
    quotationDown() {
      this.pagination.pageNum = 1
      this.getQuotationQuery()
        .then(({ list, total }) => {
          this.$refs.quotationRef.refreshSuccess({ list, total })
        })
        .catch(() => {
          this.$refs.quotationRef.refreshFail()
        })
    },
    // 报价按钮事件
    offerClick(item) {
      let params = {
        ...item,
        title: '提交报价'
      }
      go2('submit-quotation', params)
    },
    // 我的报价页面跳转事件
    nativeTo() {
      go2('my-offer')
    }
  }
}
</script>

<style lang="scss">
.quotation-list {
  margin-bottom: 0rpx;
  .list-border {
    // border-top: 1px solid rgba(221,221,221,0.5);
    border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
  }
  .list-title-line {
    line-height: 88rpx;
    padding-left: 48rpx;
    background: #ffffff;
  }
  .list-title {
    font-family: PingFangSC-Semibold;
    font-size: 30rpx;
    color: #000000;
    letter-spacing: 0;
    font-weight: 600;
  }
  .list-title-Subtitle {
    font-family: PingFangSC-Medium;
    font-size: 30rpx;
    color: #ff5368;
    letter-spacing: 0;
    text-align: right;
    font-weight: 500;
    float: right;
    margin-right: 32rpx;
  }
  .list-info-line {
    padding-left: 48rpx;
    line-height: 70rpx;
    background: #ffffff;
  }
  .list-info-content {
    margin-left: 48rpx;
    background: #ffffff;
  }
  .list-info-title {
    font-family: PingFangSC-Medium;
    font-size: 30rpx;
    color: #333333;
    letter-spacing: 0;
    text-align: left;
    font-weight: 550;
  }
  .list-info-text {
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #888888;
    letter-spacing: 0;
    text-align: left;
    line-height: 64rpx;
    font-weight: 400;
  }
  .list-image {
    width: 100rpx;
    height: 100rpx;
    margin-top: 20rpx;
  }
  .list-info {
    display: flex;
  }
  .list-bottom-content {
    line-height: 70rpx;
    padding-left: 48rpx;
    padding-bottom: 48rpx;
    background: #ffffff;
  }
  .my-image {
    width: 32rpx;
    height: 32rpx;
  }
  .my-price {
    font-family: PingFangSC-Medium;
    font-size: 18rpx;
    color: #007aff;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
    padding: 6rpx;
  }
  .offer-class {
    display: flex;
    justify-content: space-between;
  }
  .offer-btn {
    width: 150rpx;
    height: 64rpx;
    background: #007aff;
    border: 2rpx solid #007aff;
    border-radius: 8rpx;
    line-height: 60rpx;
    margin-right: 32rpx;
  }
  .offer-width {
    width: 70%;
  }
  .offer-prices {
    position: absolute;
    z-index: 9999;
    right: 32rpx;
    bottom: 122rpx;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 10rpx;
    text-align: center;
    width: 110rpx;
    height: 110rpx;
    border: 2rpx solid #f9f9f9;
    box-shadow: 0rpx 4rpx 34rpx 0rpx rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>