dnyAppTruck/pages/feedback/signOrderCode.vue

<template>
  <view class="">
    <u-sticky v-if="!signVisible"  style="background-color: white;padding: 0;">
      <uni-search-bar @confirm="searchBill" placeholder="请输入搜索内容"></uni-search-bar>
    </u-sticky>
    <uni-list style="margin-top: -20rpx">
      <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">
              <view>
                <text v-if="item.itemOrderChargeState==0" class="tag-con">未收</text>
                <text v-else style="color: #5ac725 !important;" class="tag-con">已收</text>
                <span>{{ item.shipmentPackageCount }}</span>{{ item.shipmentUnit }}&nbsp;&nbsp;&nbsp;&nbsp;代收金额:<span>{{ item.shipmentMoney }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              </view>
              <view>{{ item.erpOrderCode }}</view>
              <view>{{ item.shipmentName }}&{{item.productName}}</view>
              <view style="font-size: 28rpx">{{ item.receiveAddress }}</view>
            </view>
            <view slot="actions" class="card-actions">
              <view  class="card-actions-item" @click="updateBillBtn(item)">
                <uni-icons type="info-filled" size="18" color="#999"></uni-icons>
                <text class="card-actions-item-text">货款代收</text>
              </view>
              <view class="card-actions-item" @click="viewOrderTrace(item,index)">
                <uni-icons type="camera-filled" size="18" color="#999"></uni-icons>
                <text class="card-actions-item-text">拍照签收</text>
              </view>
            </view>
          </uni-card>
        </template>
      </uni-list-item>
    </uni-list>
    <view v-show="isLoadMore && !signVisible">
      <uni-load-more :status="loadStatus" showIcon @clickLoadMore="loadMoreBill()"></uni-load-more>
    </view>
    <uni-fab style="bottom: 100rpx;" ref="fab" :pattern="fabPattern" icon="color" :popMenu="false" horizontal="right"
             vertical="bottom"
             @fabClick="scanFabClick"/>
    <u-loading-page :loading="loading"></u-loading-page>
    <view>
      <u-popup :show="show" @close="close" :closeable="true" mode="center"  @open="open">
        <view class="popup-con">
          <div v-if="qrCodeInfo" class="qrCodeInfo">
            {{erpOrderCode}} &nbsp;&nbsp;代收金额:<span>{{qrCodeInfo}}</span>
          </div>
          <div style="margin: auto;width: 600rpx">
            <u--image :showLoading="true" :src="src" width="600rpx" height="600rpx"></u--image>
          </div>
          <div style="text-align: center;line-height: 60rpx;margin-left: 180rpx;padding-top: 10px">
            <span style="float: left">请使用</span>
            <u-icon style="float: left" name="zhifubao-circle-fill" color="#2979ff" size="28"></u-icon>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <u-icon style="float: left" name="weixin-circle-fill" color="#53c21d" size="28"></u-icon>
            <span style="float: left">支付</span>
          </div>

        </view>
      </u-popup>
      <u-button @click="show = true">打开</u-button>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      src:"",
      qrCodeInfo:"",
      erpOrderCode:"",
      show:false,
      loading:false,
      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();
  },
  created(){
    uni.$on('eventName',this.handelEvent)
  },
  onPullDownRefresh() {
    this.billList = [];
    this.getSignBillList();
  },
  methods: {
    close(){
      this.show=false;
    },
    open(){},
    handelEvent(data){
      this.billList.splice(data, 1)
    },
    scanFabClick() {
      //扫码
      let _that = this;
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ['barCode', 'qrCode'],
        success: function (res) {
          // console.log("res1212",res);
          if (res.result.indexOf('sendOrder') != -1) {
            let idOrder = res.result.split("-")[2];
            _that.truckUpOrder(idOrder)
          }else if(res.result.indexOf('orderLabel') != -1){
            let orderCode = res.result.split("-")[1];
            _that.getShipDetails(orderCode)
          }else {
            uni.showToast({
              title: "请扫正确的二维码",
              icon: 'none'
            })
          }

        }
      })
    },
    truckUpOrder(idOrder){
      let _that = this;
      _that.billList = [];
      let parms = {
        idOrder: idOrder
      }
      request.httpPost("/dnyDriver/signInScanSendOrder", parms, true).then(res => {
        _that.signVisible = true;
        _that.billList = res.data
      })
    },
    getShipDetails(orderCode){
      let _that = this;
      _that.billList = [];
      let parms = {
        orderCode: orderCode
      }
      request.httpPost("/dnyDriver/signInScanERPOrder", parms, true).then(res => {
        _that.signVisible = true;
        _that.billList = res.data

      })
    },
    getSignBillList: function () {
      let _that = this;
      _that.loading = true;
      _that.signVisible = false;
      var info = {
        ltItemState: 5
      }
      let listData = {
        params: JSON.stringify(info),
        page: JSON.stringify(_that.page)
      }
      request.httpPost("/dnyDriver/driverQuerySignInItem", listData, true).then(res => {
        _that.loading = false;
        // console.log("res1111", res);
        uni.stopPullDownRefresh();
        if (!res.data || res.data.length == 0) {
          this.loadStatus = "noMore";
          return;
        }
        this.billList = this.billList.concat(res.data);
        this.loadStatus = "more";
        // supplierIndex = 0;
      });
    },
    searchBill(res) {
    },
    loadMoreBill: function () {
      this.loadStatus = "loading";
      setTimeout(() => {
        this.page.pageIndex += 1;
        this.getSignBillList();
      }, 100);
    },
    updateBillBtn: function (item) {
      let _that = this;
      _that.loading = true;
      let parms = {
        idOrder: item.idOrder
      }
      request.httpPost("/dnyDriver/orderPayRequest3", parms, true).then(res => {
        // console.log("res333",res);
        _that.loading = false;
            if (res.httpCode == 200) {
              _that.show = true;
              _that.erpOrderCode = item.erpOrderCode
              _that.qrCodeInfo = res.data.qrCodeInfo
              _that.src = res.data.qrCodeImageUrl.substring(1).replace('apis', 'http://192.168.1.24:51106');
              console.log(_that.src);
              // _that.src = res.data.qrCodeImageUrl
            }else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
                duration: 1000,
              })
            }
      })
    },
    parseBillState: function (item) {
      if (item.voidFlag == 1) {
        return "已作废";
      } else if (item.billState == 1) {
        return "已下达";
      } else {
        return "";
      }
    },
    viewOrderTrace: function (item,index) {
      // console.log(item.id);
      uni.navigateTo({
        url: "../feedback/traceCamera?idOrder=" + item.id + "&orderCode=" + item.erpOrderCode + "&shipmentName=" + item.shipmentName+ "&index=" + index
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.qrCodeInfo{
  font-size: 30rpx;

}
.qrCodeInfo span{
  color: #e4493c !important;
  font-size: 30rpx;
  font-weight: bold;
}
.popup-con{
  min-height: 800rpx;
  padding: 40rpx;
  width: 700rpx;
  margin: auto;
  box-sizing: border-box;
}
.tag-con {
  color: #e4493c;
  margin-right: 20rpx;
}
/deep/ .uni-list-item__container {
  padding: 0rpx;
}
.demo-layout span {
  font-weight: bold;
  color: #e4493c;
  padding: 0 5rpx;
}

/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>