item-management-vant/src/views/major/myOrder.vue

<template>
  <div>
    <BackBar title="我的订单-大中型" lefttext="返回" />
    <van-search v-model="listQuery.keyword" placeholder="请输入搜索关键词" @search="onSearch()" />
    <van-pull-refresh v-model="loading" @refresh="onRefresh()">
      <van-list v-model:loading="loading" :finished="finished" finished-text="还没有订单" @load="getMyOrder()">
        <div class="card" v-for="item in listData" :key="item.id" @click="toDetail(item)">
          <h3>
            <van-icon name="link-o" />
            &nbsp;{{ item.orderId }}
          </h3>
          <p class="productionNo" v-if="item.productionNo">
            <van-icon name="coupon-o" />
            &nbsp;
            {{ item.productionNo }}
          </p>
          <p class="projectName">
            <van-icon name="location-o" />
            &nbsp;{{ item.orderName }}
          </p>
          <p>
            <van-tag type="primary" size="medium" class="van-tag">
              {{ item.production ? (item.production === 'REPORT' ? '报告' : (item.production === 'STATEMENT' ? '意见书' :
              '复评函'
              )) : '订单' }}
            </van-tag>
            <van-tag type="primary" size="medium" class="van-tag" v-if="item.currentNodeName">{{ item.currentNodeName }}</van-tag>
            <van-tag type="success" size="medium" class="van-tag">{{ item.clienteleName }}</van-tag>
            <van-tag type="success" :color="item.repertoryState === '未入库' ? '#969799' : ''" size="medium" class="van-tag">{{ item.repertoryState }}</van-tag>
            <van-tag type="success" :color="!item.delivery ? '#969799' : ''" size="medium" class="van-tag">{{ item.delivery ? '已送达' : '未送达' }}</van-tag>
            <van-tag type="success" :color="item.edeclareResult === null ? '#969799' : ''" size="medium" class="van-tag">{{ item.edeclareResult==null ? '未申报' : item.edeclareResult }}</van-tag>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>
    <van-back-top right="10vw" bottom="10vh" />
  </div>
</template>

<script>
import { myOrder } from '@/api/major';

export default {
  data() {
    return {
      loading: false,
      listData: [],
      finished: false,
      listQuery: {
        // 当前页数
        current: 1,
        // 查询关键字
        keyword: null,
      },
    };
  },
  created() {
    this.getMyOrder();
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    // 大中型待办列表刷新
    onRefresh() {
      this.listQuery.current = 1;
      this.finished = false;
      this.listData = [];
      this.getMyOrder();
    },
    // 大中型待办列表关键字搜索
    onSearch() {
      this.listQuery.current = 1;
      this.finished = false;
      this.listData = [];
      this.getMyOrder();
    },
    // 获取我的大中型订单
    getMyOrder() {
      this.loading = true;
      myOrder(this.listQuery).then((res) => {
        if (res.code == 200) {
          if (res.data.records) {
            this.listData = this.listData.concat(res.data.records);
          }
          // 判断是否还有下一页
          if (res.data.pages > this.listQuery.current) {
            // 服务端返回的总页数大于当前页数, 将当前页数+1
            this.listQuery.current++;
          } else {
            // 反之停止加载
            this.finished = true;
          }
        }
        this.loading = false;
      });
    },
    toDetail(item) {
      const detailInfo = {
        orderId: item.orderId,
        name: item.orderName,
        productionType: item.production ? (item.production === 'REPORT' ? '报告' : (item.production === 'STATEMENT' ? '意见书' : '复评函' )) : '订单',
        productionNo: item.productionNo,
        nodeName: item.currentNodeName,
        clientManager: item.clientManager,
        principal: item.principal,
        realAmount: item.realAmount,
        invoiceAmount: item.invoiceAmount,
        clienteleName: item.clienteleName,
        clienteleSubName: item.clienteleSubName,
        clienteleContactName: item.clienteleContactName,
        bailor: item.bailor,
        owner: item.owner,
        repertoryState: item.repertoryState,
        delivery: item.delivery ? '已送达' : '未送达',
        deliveryDate: item.deliveryDate,
        mdeclareResult: item.mdeclareResult==null ? '未申报' : item.mdeclareResult,
        edeclareResult: item.edeclareResult==null ? '未申报' : item.edeclareResult,
      }
      this.$router.push({
        path: `/index/major/detail`,
        query: {
          item: JSON.stringify(detailInfo),
        },
      });
    },
  },
};
</script>

<style scoped>
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin: 10px;
}

.productionNo {
  width: 100%;
  font-size: 14px;
}

.projectName {
  width: 100%;
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; */
}

.van-tag {
  margin: 2px;
}
</style>