front-end/ghsApp/src/admin/order/customOrder.vue

<template>
  <div class="app-main app-content">
    <!-- 时间筛选：默认近30天，与订单列表 order.vue 同一 DateSelect 组件 -->
    <view class="input-wrap_box">
      <view class="select-dn_bx">
        <DateSelect ref="dateSelectRef" class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName="近30天" />
      </view>
    </view>

    <div class="list-wrap">
      <block v-if="!$util.isEmpty(list.data)">
        <div class="list" v-for="(item, index) in list.data" :key="index">
          <div v-if="!$util.isEmpty(item.orderInfo)">
            <OrderItem :item="item.orderInfo" @listendUpdateFiled="onUpdateItemField"></OrderItem>
          </div>
          <div v-else>
            <OrderItem :ref="`orderRef${item.id}`" :item="item" @listendUpdateFiled="onUpdateItemField" @directFh="directFh" @fillNoFh="fillNoFh" :moreOrderRemind="false"></OrderItem>
          </div>
        </div>
      </block>
      <block v-else>
        <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
      </block>
    </div>

    <view class="bottom-bar-view" v-if="!$util.isEmpty(ids)">
      <view class="bar-content">
        <button class="admin-button-com big blue" @click="batchFh()">全部发货</button>
        <button class="admin-button-com big blue" style="margin-left: 50upx;" @click="batchPrint()">合并打印</button>
      </view>
    </view>

		<modal-module :show="fhLabelShow" @click="fhConfirm" :maskClosable="true" title="物流信息" padding="30rpx 30rpx" >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-label">物流名称</div>
            <div class="line-input">
            <input type="text" v-model="fhWl" @focus="fhWl=''" class="inp-input" />
            </div>
          </div>
          <div class="inp-list-line">
            <div class="line-label">物流单号</div>
            <div class="line-input">
            <input type="text" v-model="fhWlNo" :focus="fhWlFocus" @focus="fhWlNo=''" class="inp-input" />
            </div>
          </div>
        </div>
      </template>
		</modal-module>

  </div>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
import DateSelect from "@/components/module/dateSelect";
import { list } from "@/mixins";
import { mapGetters } from "vuex";
import orderMixin from "@/mixins/order";
import OrderItem from "../home/components/OrderItem"
import { getListB,mergePrintFn,allFhAction,orderFh} from "@/api/order";
export default {
  name: "customOrder",
  components: {
    AppWrapperEmpty,
    ModalModule,
    DateSelect,
    OrderItem,
  },
  mixins: [list,orderMixin],
  computed: { ...mapGetters(["getLoginInfo", "getDictionariesInfo"]) },
  data() {
    return {
      ids:'',
      fhWlInfo:[],
      fhWlNo:'',
      fhWl:'顺丰',
      fhWlFocus:false,
      fhLabelShow:false,
      // 默认近30天，与订单列表一致，避免一次加载客户全量历史订单
      searchTime: 'last30Days',
      startTime: '',
      endTime: '',
    }
  },
  onPullDownRefresh() {
    this.resetList();
    this.getOrderList().then((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this.getOrderList().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  onLoad() {
    this.getOrderList()

		//返回上一页时不需要刷新
		let pages = getCurrentPages();
		let prevPage = pages[ pages.length - 2 ];
		prevPage.$vm.fromDetail = {status:1}

    this.ids = this.option.ids?this.option.ids:''

  },
  methods: {
    //这个有多处要同步修改，关键词：fh_express_pop
    fillNoFh(info){
      let that = this
      this.fhLabelShow = true
      this.fhWlInfo = info
			setTimeout(x => {
				this.$nextTick(() => {
          that.fhWlFocus = true
        })
			}, 200)
    },
    fhConfirm(val){
      let that = this
			if (val.index == 0) {
				that.fhLabelShow = false
				that.fhWlFocus = false
        that.fhWlNo = ''
				return
			}
      if (this.$util.isEmpty(this.fhWl)){
        that.$msg('请填写物流名称')
        return false
      }
      if (this.$util.isEmpty(this.fhWlNo)){
        that.$msg('请填写物流单号')
        return false
      }
      let id = that.fhWlInfo.id ? that.fhWlInfo.id : 0
      that.$util.confirmModal({content:'确认发货？'},() => {
          orderFh({id:id,fhType:1,fhWl:that.fhWl,fhWlNo:that.fhWlNo}).then(res=>{
            if(res.code == 1){
              that.$refs[`orderRef${id}`][0].currentStatus = 3
              that.fhLabelShow = false
              that.fhWlFocus = false
              that.fhWlNo = ''
              that.$msg('发货成功')
            }
          })
      })
    },
    init(){

    },
    directFh(info){
      let that = this
      that.$util.confirmModal({content:'确认发货？'},() => {
          orderFh({id:info.id,fhType:0}).then(res=>{
            if(res.code == 1){
              that.$refs[`orderRef${info.id}`][0].currentStatus = 3
              that.$msg('发货成功')
            }
          })
      })
    },
    batchFh(){
      let that = this
      if(this.$util.isEmpty(this.option.ids)){
        this.$msg('没有订单')
      }
      let mergeId = this.option.mergeId?this.option.mergeId:0
      that.$util.confirmModal({content:'确认全部发货？'},() => {
        allFhAction({mergeId:mergeId}).then(res=>{
          if(res.code == 1){
            that.$msg('操作成功')
            that.resetList()
            that.getOrderList()
          }
        })
      })
    },
    batchPrint(){
      let that = this
      if(this.$util.isEmpty(this.option.ids)){
        this.$msg('没有订单')
      }
      let mergeId = this.option.mergeId?this.option.mergeId:0
      that.$util.confirmModal({content:'确认合并打印？'},() => {
        mergePrintFn({mergeId:mergeId}).then(res=>{
          if(res.code == 1){
            that.$msg('打印成功')
          }
        })
      })
    },
    /**
     * DateSelect 选中日期后刷新列表
     * @param {Object} val - { searchTime, startTime, endTime }
     */
    selectDateFn(val) {
      this.searchTime = val.searchTime || ''
      this.startTime = val.startTime || ''
      this.endTime = val.endTime || ''
      this.resetList()
      this.getOrderList()
    },
    /** 按客户 + 时间范围拉取订单列表 */
    getOrderList() {
        return getListB({
          page: this.list.page,
          customId: this.option.customId,
          searchTime: this.searchTime,
          startTime: this.startTime,
          endTime: this.endTime,
        }).then((res) => {
          this.completes(res)
        })
    }
  },
};
</script>
<style lang="scss" scoped>
page{
	width: 750upx;
	overflow: hidden;
}
.app-content {
	width: 100%;
  padding-bottom: 160upx;
	overflow: hidden;
  .select-dn_bx {
    padding-left: 18upx;
  }
  .app-tabs {
    position: fixed;
    width: 100%;
    z-index: 9;
  }
  .input-wrap_box {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100upx;
    display: flex;
    align-items: center;
    padding: 0 30upx;
    & > view:nth-child(2) {
      flex: 1;
    }
  }
  .list-wrap {
    // 为顶部固定时间筛选栏留出空间
    padding-top: 100upx;
    .list {
      background-color: #fff;
      margin-bottom: 20upx;
    }
  }
}
.upload-confirm-wrap {
  max-height: 600upx;
  overflow-y: auto;
  .modal-tit {
    @include disFlex(center, center);
    font-size: 40upx;
    margin-top: 30upx;
    margin-bottom: 50upx;
    .iconfont {
      color: #09bb07;
      margin-right: 20upx;
      font-size: 50upx;
    }
  }
  .sel-wrap {
    color: $fontColor2;
    font-size: 32upx;
    .sel-tit {
      text-align: left;
    }
    .sel-btn {
      @include disFlex(center, flex-start);
      flex-wrap: wrap;
      padding: 10upx 0 40upx;
    }
  }
}

// 按钮
.bottom-bar-view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  background-color: #FFFFFF;
  border-top: 1upx solid #eee;
  box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);

  /* #ifdef MP-WEIXIN */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.2- */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
  /* #endif */

  /* #ifdef APP-PLUS */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.2- */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
  /* #endif */

  .bar-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10upx 40upx;
  }
}
</style>