detection-user/pages/detection/ordermanage.vue

<!-- 订单管理 -->
<template>
  <view class="content">
    <!-- 	<view style="width: 100%; height: 55px;"></view> -->
    <view class="top-heder">
      <!-- 	<view class="t-left" @click="getfan()">
        <uni-icons type="left" size="18"></uni-icons>
      </view> -->
      <view class="t-input">
        <uni-icons type="search" color="#BCBCBC" size="22"></uni-icons>
        <input type="text" v-model="carNum" placeholder="输入车牌号">
      </view>
      <view class="sou" @click="search()">搜索</view>
    </view>
    <view class="tap">
      <view class="tap-box" v-for="(item,index) in tapList" :key="index" @click="tapqh(index)">
        <view class="xhuihui" :class="{'xzhei':tapindex == index}">{{ item.text }}</view>
        <view class="gang" v-if="tapindex == index"></view>
      </view>
    </view>

    <view class="mub">
      <view class="top-ail">
        <scroll-view class="scroll-view" scroll-y :style="{ height: scrollHeight + 'px' }"
                     @scrolltolower="onReachBottomCus" refresher-enabled @refresherrefresh="onRefresherrefresh"
                     :refresher-triggered="isTriggered">
          <view class="bjimg" v-if="infoDatas.length == 0">
            <image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
          </view>

          <view class="m-box" v-for="(item,index) in infoDatas" :key="index">
            <view class="m-top">
              <view class="top-left">
                <view class="dhei">{{ item.goodsName }}</view>
                <text class="xhui">检查站：{{ item.partnerName }}</text>
              </view>
              <view @click="callUser(item.workerPhone)" class="top-right">
                <image src="http://www.nuoyunr.com/lananRsc/detection/teel.png" mode=""></image>
                <!-- 	<image  :src="baseUrl + item.workerAvatar" ></image> -->
              </view>
            </view>
            <view style="display: flex; align-items: center;">
              <view style="width: 60%;" @click="godetails(item.id)">
                <view class="on-input">
                  <uni-icons type="phone" color="#999999" size="16"></uni-icons>
                  <text>电话：</text>
                  <text>{{ item.workerPhone ? item.workerPhone : "" }}</text>
                </view>
                <view class="on-input">
                  <u-icon name="reload" color="#999999" size="16"></u-icon>
                  <text>时间：{{ item.startTime }}</text>
                </view>
                <view class="on-input">
                  <uni-icons type="more" color="#999999" size="16"></uni-icons>
                  <text>车牌号：</text>
                  <text>{{ item.carNum }}</text>
                </view>
              </view>
              <view class="sshi" v-if="item.isPass == '0'">
                <image :src="imgurl + '/noPass.png'" mode=""></image>
              </view>
              <view class="sshi" v-if="item.isPass == '1'">
                <image :src="imgurl + '/pass.png'" mode=""></image>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- <tabBar :msg="msg"></tabBar> -->
  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';
import tabBar from '../../components/detection/tabBar.vue'
import {
  getToken
} from '@/utils/auth'
import newRequest from "@/utils/newRequest";

export default {
  data() {
    return {
      baseUrl: this.$baseUrl,
      imgurl: this.$imgeUrl,
      infoDatas: [],
      partnerId: uni.getStorageSync("partnerId"),
      goodsTitle: '',
      gfFlag: false,
      tapindex: 0,
      msg: "2",
      scrollHeight: 0,
      //下来刷新状态
      isTriggered: false,
      carNum: '',
      pageNum: 1, //第几页
      pageSize: 20, //一页多少张
      totalPages: 0, //总数
      tapList: [{
        text: "进行中",
        value: "0"
      },
        {
          text: "已完成",
          value: "1",
        }
      ]
    }
  },
  onShow() {
    this.getList()
  },
  onReady() {
    // 动态计算滚动区域高度
    this.calculateScrollHeight();
  },
  onReachBottom() {
    console.log("分页")
    if (this.pageNum >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    } else {
      this.pageNum++
      console.log(222)
      this.getList()
    }
  },
  components: {
    tabBar,
  },
  methods: {
    /**
     * 上滑加载数据
     */ async onReachBottomCus() {
      this.isTriggered = true
      if (this.pageNum >= this.totalPages) {
        uni.showToast({
          title: '没有下一页数据',
          icon: 'none'
        })
      } else {
        this.pageNum++
        console.log(222)
        await this.getList()
        this.isTriggered = false
      }
    },
    /**
     * 下拉刷新数据
     */ async onRefresherrefresh() {
      this.isTriggered = true
      this.pageNum = 1
      this.infoDatas = []
      await this.getList()
      this.isTriggered = false
    },
    search() {
      this.infoDatas = []
      this.getList()
    },
    calculateScrollHeight() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().windowHeight;
      // 获取顶部区域高度
      const topHeight = 220;
      // 计算滚动区域高度
      this.scrollHeight = screenHeight - topHeight;
    },
    callUser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    getfan() {
      uni.navigateBack()
    },
    godetails(inspectionInfoId) {
      console.log("111");
      uni.navigateTo({
        // url:"/pages/detecyion/orderdetails?inspectionInfoId="+inspectionInfoId
        url: "/pages/detection/orderdetais?inspectionInfoId=" + inspectionInfoId
      })
    },
    tapqh(index) {
      this.tapindex = index
      this.infoDatas = []
      this.pageNum = 1
      this.getList()
    },
    async getList() {
      if (!getToken()) {
        return
      }
      let roles = uni.getStorageSync('role')
      this.gfFlag = false
      if (roles) {
        roles.forEach(item => {
          if (item == 'jcgf') {
            this.gfFlag = true
          }
        })
      }
      if (!this.gfFlag) {
        this.none()
      } else {
        this.ntwo()
      }
    },
    async none() {
      let res = await newRequest({
        url: '/app-api/order/inspectionList',
        method: 'get',
        params: {
          // partnerId:this.partnerId,
          status: this.tapindex,
          carNum: this.carNum,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      })

      if (this.pageNum != 1) {
        this.infoDatas = this.infoDatas.concat(res.data.records)
      } else {
        this.infoDatas = res.data.records
      }
      let total = res.total
      this.totalPages = Math.ceil(total / this.pageSize);
    },
    async ntwo() {
      let res = await request({
        url: '/app-api/order/governmentInspectionList',
        method: 'get',
        params: {
          status: this.tapindex,
          carNum: this.carNum,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },
      })


      if (this.pageNum != 1) {
        this.infoDatas = this.infoDatas.concat(res.rows)
      } else {
        this.infoDatas = res.rows
      }
      let total = res.total
      this.totalPages = Math.ceil(total / this.pageSize);

    }


  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  width: 100%;
  //height: calc(100vh);
  background: white;
  margin-top: 7%;
}

.top-heder {
  width: 100%;
  height: 46px;
  margin-top: 170rpx;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 15px;

}

.t-left {
  width: 10%;
}

.t-input {
  width: 90%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;

  input {
    width: 60%;
  }

}

.top-ail {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background-color: #F4F4F4;

}

.mub {
  background-color: #F4F4F4;
  //height: calc(100vh);
}

.tap {
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bjimg {
  width: 255px;
  height: 236px;
  margin: 0px auto;
  //margin-top: 100px;

  image {
    width: 100%;
    height: 100%;
  }
}

.tap-box {
  width: 50%;

}

.xhuihui {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.gang {
  width: 24px;
  height: 4px;
  background: #0D2E8D;
  border-radius: 4px;
  margin: 2px auto;
}

.xzhei {

  font-weight: bold !important;
  color: #333333 !important;
}

.m-box {

  background: #FFFFFF;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 15px 10px;
  margin: 10px auto;

}

.m-top {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 15px;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-left {
}

.top-right {
  z-index: 9999;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }

}

.sshi {
  width: 40%;
  height: 115px;
  box-sizing: border-box;
  padding: 10px;

  image {
    width: 100%;
    height: 100%;
  }
}

.dhei {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 5px;
}

.xhui {
  font-size: 15px;
  font-weight: 400;
  color: #999999;
}

.on-input {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  margin-bottom: 10px;
  margin-top: 10px;
  // justify-content: space-between;
}

.bottom-di {
  padding-top: 10px;
  box-sizing: border-box;
  border-top: 1px solid #EEEEEE;
}

.ju {
  font-size: 24px;

  font-weight: 600;
  color: #FF571A;
}
</style>