zy-pda/pages/orderList/orderList.vue

<template>
  <view class="orderList">
    <!-- 头部筛选 -->
    <view class="orderList_header">
      <view class="orderList_header_item">
        <text class="orderList_header_itemText">全部</text>
        <text class="pda pda-xiala"></text>
      </view>
      <view class="orderList_header_item">
        <text class="orderList_header_itemText">全部</text>
        <text class="pda pda-xiala"></text>
      </view>
    </view>
    <!-- 列表 -->
    <view class="orderList_list">
      <view class="orderList_listItem" v-for="newOrder in newOrderList" :key="newOrder.id">
        <view class="orderList_listItem_header">
          <view class="orderList_listItem_header_title">
            <view class="associationType_icon"> 标 </view>
            半程陪检-张三
          </view>
          <text class="orderList_listItem_header_more">待接单</text>
        </view>
        <view class="orderList_listItem_item">
          <view class="orderList_listItem_item_content">
            <text class="orderList_listItem_item_name">李四-6322285</text>
            <text class="orderList_listItem_item_time">10:20</text>
          </view>
          <view class="orderList_listItem_item_btns">
            <button type="primary" class="btn">撤销</button>
            <button type="primary" class="btn">加急</button>
          </view>
        </view>
      </view>
    </view>
    <seiminFooterNav></seiminFooterNav>
    <seiminModel ref="seiminModel"></seiminModel>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import {
    reqFetchDataList
  } from "../../request/api.js";
  import {
    GDSTATE
  } from "../../utils/enum.gdstate.js";
  export default {
    name: 'orderList',
    data() {
      return {
        newOrderList: [], //工单列表
        idx: 0, //页码
      };
    },
    computed: {
      ...mapState("user", ["loginInfo"]),
    },
    methods: {
      // 获取页面数据
      init() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        Promise.all([
          this.queryWorkOrdersRequest(), //查询最新工单列表
        ]).then((values) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.queryWorkOrdersResponse(values[0]);
        });
      },
      // 查询最新工单列表（上拉）
      reachBottom() {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        Promise.all([
          this.queryWorkOrdersRequest(true), //查询最新工单列表
        ]).then((values) => {
          uni.hideLoading();
          uni.stopPullDownRefresh();
          this.queryWorkOrdersResponse(values[0], true);
        });
      },
      // 查询最新工单列表
      queryWorkOrdersRequest(idxPlus = false) {
        if (idxPlus) {
          //累加
          ++this.idx;
        } else {
          this.idx = 0;
        }
        return reqFetchDataList("nurse", "workOrder", {
          workOrder: {
            createDept: this.loginInfo.user.dept.id,
            platform: 2,
            searchDays: 2,
          },
          idx: this.idx,
          sum: 10,
        });
      },
      // 查询最新工单列表
      queryWorkOrdersResponse(res, idxPlus = false) {
        if (res.status == 200) {
          res.list = res.list || [];
          let newOrderList = res.list.map((v) => {
            if (v.gdState) {
              if (
                v.gdState.value == GDSTATE["待接单"] ||
                v.gdState.value == GDSTATE["待抢单"]
              ) {
                v.stateTextClass = "red";
              } else if (
                v.gdState.value == GDSTATE["待评价"] ||
                v.gdState.value == GDSTATE["已完成"]
              ) {
                v.stateTextClass = "green";
              } else {
                v.stateTextClass = "yellow";
              }
            }
            return v;
          });
          if (idxPlus) {
            //累加
            this.newOrderList.push(newOrderList)
          } else {
            this.newOrderList = newOrderList;
          }
        } else {
          this.$refs.seiminModel.showChangeDept({
            skin: "toast",
            icon: "error",
            content: res.msg || "获取数据失败",
          });
          throw new Error(res.msg || '获取数据失败');
        }
      },
    },
    mounted() {
      this.init();
    },
    onPullDownRefresh() {
      this.init();
    },
    onReachBottom() {
      this.reachBottom();
    }
  }
</script>

<style lang="scss" scoped>
  .orderList {
    padding-top: 88rpx;
    padding-bottom: 108rpx;

    // 头部筛选
    .orderList_header {
      height: 88rpx;
      background-color: #fff;
      border-bottom: 1px solid #E5E9ED;
      position: fixed;
      top: 88rpx;
      left: 0;
      z-index: 99;
      width: 100%;
      @include flex(center, center);

      .orderList_header_item {
        flex: 1;
        height: 100%;
        padding: 0 50rpx;
        border-right: 1px solid #E5E9ED;
        @include flex(space-between, center);

        &:last-of-type {
          border-right: none;
        }

        .orderList_header_itemText {
          color: #333;
          font-size: 38rpx;
        }

        .pda-xiala {
          color: #DDE1E5;
        }
      }
    }

    // 列表
    .orderList_list {
      padding: 0 24rpx;

      .orderList_listItem {
        width: 702rpx;
        min-height: 320rpx;
        background-color: #fff;
        margin-top: 8rpx;
        border-radius: 8rpx;
        border: 2rpx solid #e5e9ed;
        position: relative;
        padding: 0 15rpx;
        font-size: 32rpx;
        @include semicircle(#f9fafb, 82rpx);
        @include flex(flex-start, stretch, column);

        .orderList_listItem_header {
          height: 86rpx;
          border-bottom: 1px dashed #e5e9ed;
          @include flex(space-between, center);

          .orderList_listItem_header_title {
            color: #333;
            @include flex(flex-start, center);

            .associationType_icon {
              width: 48rpx;
              height: 48rpx;
              border-radius: 50%;
              background-color: rgba(57, 177, 153, 0.3);
              border: 1px solid #39b199;
              font-size: 24rpx;
              color: #39b199;
              margin-right: 8rpx;
              @include flex(center, center);
            }
          }

          .orderList_listItem_header_more {
            color: #666;
          }
        }

        .orderList_listItem_item {
          height: 88rpx;
          border-bottom: 1px solid #e5e9ed;
          color: #333;
          font-size: 30rpx;
          flex: 1;
          @include flex(flex-start, stretch, column);

          &:last-of-type {
            border-bottom: none;
          }

          .orderList_listItem_item_content {
            min-height: 143rpx;
            flex: 1;
            @include flex(space-between, center);

            .orderList_listItem_item_name {
              font-size: 38rpx;
              font-weight: bold;
            }

            .orderList_listItem_item_time {
              color: #666;
              font-size: 28rpx;
            }
          }

          .orderList_listItem_item_btns {
            position: relative;
            left: -14rpx;
            width: 698rpx;
            height: 88rpx;
            @include btn_background;
            @include flex;

            .btn {
              flex: 1;
              background-color: transparent;
              border-right: 2rpx solid #fff;

              &:last-of-type {
                border-right: none;
              }

              &::after {
                border: none;
              }
            }
          }
        }
      }
    }
  }
</style>