dnyAppTruck/pages/order/freightOrder.vue

<template>
  <view class="">

    <u-collapse  style="background: #fff">
        <u-collapse-item
            title="搜索"
        >
          <div style="padding: 5px 10px">
            <u--input
                placeholder="关键字(发货单号/专线名称)"
                border="surround"
                v-model="search.keyWord"
            ></u--input>
            <div style="height: 5px"></div>
            <div @click="dateClickStart" class="u-input u-border u-input--radius u-input--square" style="padding: 9px 9px;border-radius:4px">{{beginTimeTitle}}</div>
            <div style="height: 5px"></div>
            <div @click="dateClickEnd" class="u-input u-border u-input--radius u-input--square" style="padding: 9px 9px;border-radius:4px">{{endTimeTitle}}</div>
            <div style="height: 5px"></div>
            <u-checkbox-group
                v-model="checkboxValue6"
                @change="checkboxChange"
            >
              <u-checkbox
                  :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in checkboxList6"
                  :key="index"
                  :label="item.name"
                  :name="item.value"
              >
              </u-checkbox>
            </u-checkbox-group>
            <div style="height: 8px"></div>
            <u-button @click="searchBill" :plain="true" type="primary" text="搜  索"></u-button>
          </div>
        </u-collapse-item>
      </u-collapse>
    <div class="total-con">合计:{{collection.truckMoneySum}}元,订单{{collection.freightCountSum}}条</div>
    <uni-list>
      <uni-list-item style="margin-top: 0;padding-top: 0" v-for="(item,index) in billList" :key="item.id" :index="index" :threshold="0">
        <template slot="body">
          <uni-card>
            <view class="demo-layout">
              <div class="do-con">
                <div class="do-code">{{item.deliveryBillCode}}</div>
                <div class="do-status">
                  <u-tag v-if="item.voidFlag == 1" text="已作废" plain size="mini" type="error"></u-tag>
                  <u-tag v-else-if="item.billState == 0" text="待派车" plain size="mini" type="warning"></u-tag>
                  <u-tag v-else-if="item.billState == 1" text="待装车" plain size="mini"></u-tag>
                  <u-tag v-else-if="item.billState == 2" text="待发车" plain size="mini" type="warning"></u-tag>
                  <u-tag v-else-if="item.billState == 3" text="运输中" plain size="mini"></u-tag>
                  <u-tag v-else-if="item.billState == 4" text="待结算" plain size="mini" type="error"></u-tag>
                  <u-tag color="#333" v-else-if="item.billState == 10" text="已完成" plain size="mini"></u-tag>
                </div>
              </div>
              <view>
                <span v-if="item.idBranchLine == 0">{{ '干线：' + item.mainLineName }}</span>
                <span v-else>{{ '支线：' + item.branchLineName }}</span>
              </view>
              <view>
                <span v-if="item.departTime">发车时间:{{item.departTime.substring(0, 19)}}</span>
              </view>
              <view>
              运费金额:<span style="margin: 0 5px;font-weight: bold;color: #e4493c;font-size: 15px">{{ item.truckMoney }}</span>元
              </view>
              <view>{{ item.billMemo }}</view>
            </view>
          </uni-card>
        </template>
      </uni-list-item>
    </uni-list>
    <view v-show="isLoadMore && !signVisible">
      <uni-load-more :status="loadStatus" :content-text="contentText"  showIcon @clickLoadMore="loadMoreBill()"></uni-load-more>
    </view>
    <u-datetime-picker
        :show="show"
        @cancel="show=false"
        @confirm="selectDate"
        v-model="value1"
        mode="date"
    ></u-datetime-picker>
  </view>
</template>

<script>
import request from '@/common/libs/request.js';
import dayjs from '../../libs/util/dayjs.js';

export default {
  data() {
    return {
      dateType:0,
      collection:{},
      show: false,
      value1: Number(new Date()),
      checkboxValue6: [3, 10],
      checkboxList6: [{
        name: '运输中',
        value: 3,
        disabled: false
      },
        {
          name: '完成',
          value: 10,
          disabled: false
        }
      ],
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多数据了'
      },
      search: {
        keyWord: '',
        beginTime: '',
        endTime: '',
        billStates: '',
        voidFlag: 0
      },
      beginTimeTitle:"发车开始日期",
      endTimeTitle:"发车结束日期",
      signVisible:false,
      fabPattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF',
        iconColor: '#fff'
      },
      billList: [],
      page: {
        pageIndex: 1,
        pageSize: 20
      },
      isLoadMore: true,
      loadStatus: 'noMore',
    }
  },
  onLoad() {
    this.getSignBillList();
  },


  onPullDownRefresh() {
    this.billList = [];
    this.search = {
      keyWord: '',
      beginTime: '',
      endTime: '',
      billStates: '',
      voidFlag: 0
    }
    this.pageIndex = 1;
    this.getSignBillList();
  },
  methods: {
    selectDate(data) {
      let deliveryDate = dayjs(data.value).format("YYYY-MM-DD")
      if(this.dateType==1){
        this.search.beginTime = deliveryDate
        this.beginTimeTitle = deliveryDate
      }
      if(this.dateType==2){
        this.search.endTime = deliveryDate
        this.endTimeTitle = deliveryDate
      }
      this.show = false;

    },
    dateClickStart(){
      let _that = this;
      _that.dateType = 1
      _that.show = true;
      _that.value1 = Number(new Date());
    },
    dateClickEnd(){
      let _that = this;
      _that.show = true;
      _that.dateType = 2
      _that.value1 = Number(new Date());
    },
    checkboxChange(n) {
      // console.log('change', n);
      // console.log(this.checkboxValue6);
    },
    getSignBillList: function () {
      let _that = this;
      if(_that.beginTimeTitle=='发车开始日期' || _that.endTimeTitle=='发车结束日期'){
        _that.search.beginTime = "";
        _that.search.endTime = "";
      }
      if (_that.checkboxValue6.length > 0) {
        _that.search.billStates = _that.checkboxValue6.join(',')
      }else {
        _that.search.billStates = ""
      }
      const params = _that.search;
      // console.log(params);
      let listData = {
        params: JSON.stringify(params),
        page: JSON.stringify(_that.page)
      }
      request.httpPost("/dnyDriver/getDeliveryBillFreightList", listData, true).then(res => {
        // console.log("res1111", res);
        uni.stopPullDownRefresh();
        if (!res.data || res.data.length == 0) {
          this.loadStatus = "noMore";
          return;
        }
        this.collection = res.collection;
        this.billList = this.billList.concat(res.data);

        this.loadStatus = "more";
        // supplierIndex = 0;
      });
    },
    searchBill() {
      const _that = this;
      _that.billList = [];
      _that.pageIndex = 1;
      _that.getSignBillList();
    },
    loadMoreBill: function () {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.page.pageIndex += 1;
        this.getSignBillList();
      }, 100);
    }
  }
}
</script>

<style lang="scss" scoped>
.total-con{
  padding: 5px 10px;
}
.collapse-con{
  padding: 10px;
}
.do-con{
  display: flex;
  justify-content:space-between;
}
.tag-con {
  color: #e4493c;
  margin-right: 20rpx;
}
/deep/ .uni-list-item__container {
  padding: 0rpx;
}


/deep/ .uni-list-item__container {
  padding: 0 rpx;
}
/deep/ .uni-card uni-card--border{
  padding: 0 rpx;
}
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.textTitle {
  border-left: 0px solid #007AFF;
  display: inline-block;
  width: 180 rpx;
  text-align: left;
  margin-bottom: 5px;
  color: #8799a3;
}
</style>