uniapp-ZHSQ/packages/community/repairList/index.vue

<template>
  <view class="box">
    <view class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
      <view class="searchBox_add">
        <view class="searchBox_left">
          <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
        </view>
        <view class="searchBox_mid">我的报修</view>
        <view class="searchBox_right"></view>
      </view>
    </view>

    <view class="tabList">
      <view :class="active == 1 ? 'tab active' : 'tab'" @click="headerTabsClick(1)">
        待指派 <span>({{ awaitingNumb }})</span>
      </view>
      <view :class="active == 2 ? 'tab active' : 'tab'" @click="headerTabsClick(2)">
        进行中 <span>({{ underwayNum }})</span>
      </view>
      <view :class="active == 4 ? 'tab active' : 'tab'" @click="headerTabsClick(4)">
        已作废 <span>({{ discardNum }})</span>
      </view>
      <view :class="active == 3 ? 'tab active' : 'tab'" @click="headerTabsClick(3)">
        已完成 <span>({{ doneNum }})</span>
      </view>
    </view>

    <view v-if="list.length !== 0" class="orderListBox">
      <view class="orderList" v-for="(item, index) in list" :key="index">
        <view class="orderItem" @click="handlerDetailClick(item.id)">
          <view :class="['orderItemTit', statusType[item.status].style]">
            <view class="orderItemTit_left">工单编号：{{ item.order_code }}</view>
            <view class="orderItemTit_right">{{ item.create_time }}</view>
          </view>
          <view class="orderItem_row">
            <view class="df">
              <view class="orderItem_row_label">小区房源名称</view>
              <view class="orderItem_row_con">{{ item.room.name }}</view>
              <view :class="['orderItem_row_state', statusType[item.status].color]">
                {{ statusType[item.status].desc }}
              </view>
            </view>
          </view>

          <view class="orderItem_row">
            <view class="orderItem_row_label">报修类型</view>
            <view class="orderItem_row_con">{{ item.ac.category_name }}</view>
          </view>

          <view class="orderItem_row">
            <view class="orderItem_row_label">问题描述</view>
            <view class="orderItem_row_con">{{ item.problem_description }}</view>
          </view>

          <view class="orderItem_row">
            <view class="orderItem_row_label">上门时间</view>
            <view class="orderItem_row_con">{{ item.service_time }}</view>
          </view>

          <view class="orderItem_row">
            <view class="orderItem_row_label">联系人</view>
            <view class="orderItem_row_con">{{ item.contact_name }}</view>
          </view>

          <view class="orderItem_row">
            <view class="orderItem_row_label">联系人手机号</view>
            <view class="orderItem_row_con">{{ item.contact_phone }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <view v-if="list.length == 0" class="empty">
      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
        mode="aspectFill"></image>
      暂无数据
    </view>

    <view class="addBtn" @click="oneRepair">在线报修</view>
  </view>
</template>

<script>
import { request, NavgateTo, menuButtonInfo } from "../../../utils";
import { apiArr } from "../../../api/v2Community";
export default {
  data() {
    return {
      top: "",
      localHeight: "",
      active: 1,
      page_num: 1,
      page_size: 10,
      flag: false, // 是否下拉请求接口
      list: [], // 列表数组
      awaitingNumb: "", // 待维修工单数量
      underwayNum: "", // 进行中工单数量
      doneNum: "", // 已完成工单数量
      discardNum: "", // 已废弃工单数量
      // 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
          color: "orderItem_row_state1",
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
          color: "orderItem_row_state2",
        },
        3: {
          desc: "已完成",
          style: "orderItemTit_state3",
          color: "orderItem_row_state3",
        },
        4: {
          desc: "已作废",
          style: "orderItemTit_state4",
          color: "orderItem_row_state4",
        },
      },
    };
  },
  methods: {
    oneRepair() {
      NavgateTo("../oneRepair/index");
    },

    handlerDetailClick(id) {
      NavgateTo(`../repairDetail/index?id=${id}`);
    },
    headerTabsClick(e) {
      this.active = e;
      this.list = [];
      this.flag = false;
      this.page_num = 1;
      this.getTabsList();
    },
    async init() {
      const [awaitingNumb, underwayNum, doneNum, discardNum] =
        await Promise.all([
          this.awaitingRes(),
          this.underwayRes(),
          this.doneRes(),
          this.discardRes(),
        ]);
      this.awaitingNumb = awaitingNumb;
      this.underwayNum = underwayNum;
      this.discardNum = discardNum;
      this.doneNum = doneNum;
    },
    async getTabsList() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: this.active,
        page_num: this.page_num,
        page_size: this.page_size,
      });

      if (res.rows) {
        let flag = false;
        if (res.rows.length == this.page_size) {
          flag = true;
        } else {
          flag = false;
        }
        this.list = this.list.concat(res.rows || []);
        this.flag = flag;
        this.page_num = this.page_num + 1;
      }
    },
    // 待维修工单数量
    async awaitingRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 1,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 进行中工单数量
    async underwayRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 2,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 已废弃工单数量
    async discardRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 4,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 已完成工单数量
    async doneRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 3,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },

    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.init();
    this.getTabsList();
  },
  onReachBottom() {
    if (this.flag) {
      this.init();
    }
  },

  onPullDownRefresh() {
    this.list = [];
    this.flag = false;
    this.page_num = 1;
    this.getTabsList();
    uni.stopPullDownRefresh();
  },
};
</script>

<style>
@import url("./index.css");
</style>