detection-business/pages/index/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="getList()">搜索</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">
        <view class="jsy" 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="sshi" v-if="item.isPass == '0'">
            <image v-if="item.status == 1" :src="imgurl + '/noPass.png'" mode=""></image>
            <view v-else class="csz">
              <text>重审中</text>
            </view>
          </view>
          <view class="sshi" v-if="item.isPass == '1'">
            <image :src="imgurl + '/pass.png'" mode=""></image>
          </view>

          <view class="m-top">
            <view class="top-left">
              <view class="dhei">{{ item.goodsName }}</view>
              <text class="xhui">施工人员：{{ item.workerName }}</text>
            </view>
            <view @click="callUser(item.buyPhone)" class="top-right">
              <image src="../../static/detection/teel.png" mode=""></image>
            </view>
          </view>
          <view class="" @click="godetails(item.id)">
            <view class="on-input">
              <uni-icons type="person" color="#999999" size="16"></uni-icons>
              <text>客户：</text>
              <text>{{ item.buyName ? item.buyName : "" }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="phone" color="#999999" size="16"></uni-icons>
              <text>电话：</text>
              <text>{{ item.buyPhone }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="map" color="#999999" size="16"></uni-icons>
              <text>订单号：</text>
              <text>{{ item.orderNo }}</text>
            </view>
            <view class="on-input">
              <uni-icons type="more" color="#999999" size="16"></uni-icons>
              <text>车牌号：</text>
              <text>{{ item.carNum }}</text>
            </view>
            <view class="bottom-di">

              <text>实付金额：</text>
              <text class="ju">{{ item.realPayMoney / 100 }}元</text>
            </view>
          </view>

        </view>
      </view>
    </view>

    <view class="lanniu" @click="gogogo">
      <text>+ 添加线下订单</text>
    </view>

  </view>
</template>

<script>
import config from '@/config'
import request from '../../utils/request';

export default {
  data() {
    return {
      imgurl: this.$imgeUrl,
      baseUrl: this.$baseUrl,
      infoDatas: [],
      partnerId: uni.getStorageSync("partnerId"),
      goodsTitle: '',
      tapindex: 0,
      msg: 2,
      carNum: '',
      pageNum: 1,//第几页
      pageSize: 20,//一页多少张
      totalPages: 0,//总数
      tapList: [
        {
          text: "进行中",
          value: "0"
        },

        {
          text: "已完成",
          value: "1",
        }
      ]
    }
  },
  onLoad() {
    this.getList()
  },
  onShow() {
    console.log("11");
    this.getList()
  },
  onReachBottom() {
    console.log(111)
    if (this.pageNum >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })

    } else {
      this.pageNum++
      console.log(222)
      this.getList()
    }
  },
  methods: {
    searchList() {
      this.infoDatas = []
      this.getList()
    },
    callUser(phone) {
      console.log(phone)
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    async getList() {

      let res = await request({
        url: '/partnerOwn/partner/inspectionList',
        method: 'get',
        params: {
          partnerId: this.partnerId,
          status: this.tapindex,
          carNum: this.carNum,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        }
      })
      console.log(res, 161);
      if (res.code == 200) {

        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);
      }
    },
    getfan() {
      uni.navigateBack()
    },
    godetails(inspectionInfoId) {
      console.log("111");
      uni.navigateTo({
        url: "/pages/index/orderdetails?inspectionInfoId=" + inspectionInfoId
      })
    },
    gogogo() {
      uni.navigateTo({
        url: '/pages/index/Neworder'
      })
    },
    tapqh(index) {
      this.pageNum = 1
      this.tapindex = index
      this.infoDatas = []
      this.getList()
    }
  }
}
</script>

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

.sshi {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 115px;
  height: 115px;
  box-sizing: border-box;
  padding: 10px;

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

.top-heder {
  width: 100%;
  height: 46px;
  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: 75%;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50px;
  box-sizing: border-box;
  padding: 0 15px;
  display: flex;
  align-items: center;

}

.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;
}

.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 {
  position: relative;
  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%;
  }

}

.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;
}

.lanniu {
  width: 90%;
  position: fixed;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D2E8D;
  color: white;
  height: 44px;
  border-radius: 8px;
  font-weight: bold;
  transform: translate(-50%);
  left: 50%;
  z-index: 9999999999999999999999999999999999999999999999999999999;
}

.csz {
  font-size: 20px;
  font-weight: bold;
  color: #FF571A;
}
</style>