supplier-dispatch-h5/src/views/index/supplySettlement.vue

<template>
  <div class="wrap">
    <div class="kilometers  common" >
      <div class="title">公里数:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="item"  v-show="supplierSettlementType != 1">
          <div class="leftKiloMeters">AB段公里数</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.reportMileageAb"/>公里</div>
        </div>
        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
          <div class="leftKiloMeters">BC段公里数</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.reportMileageBc"/>公里</div>
        </div>
        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
          <div class="leftKiloMeters">CA段公里数</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.reportMileageCa"/>公里</div>
        </div>
      </div>
    </div>
    <div class="roadBridgeFee common" >
      <div class="title">路桥费:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="item"  v-show="supplierSettlementType != 1">
          <div class="leftKiloMeters">AB段路桥费</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.bridgeAmountAb"/>元</div>
        </div>
        <div class="item"  v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">
          <div class="leftKiloMeters">BC段路桥费</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.bridgeAmountBc"/>元</div>
        </div>
        <div class="item"  v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">
          <div class="leftKiloMeters">CA段路桥费</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.bridgeAmountCa"/>元</div>
        </div>
      </div>
    </div >
    <div class="otherFee common">
      <div class="title">其他费用:</div>
      <div class="line"></div>
      <div class="metersWrap">
        <div class="item"  >
          <div class="leftKiloMeters">小轮个数</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.tyreNumber" @input="handleInput"/>个</div>
        </div>
        <div class="item">
          <div class="leftKiloMeters">等候费</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.waitAmount"/>元</div>
        </div>
        <div class="item"  >
          <div class="leftKiloMeters">困境费</div>
          <div class="rightInput"><input type="number" :disabled="!taskCostShow" v-model="form.dilemmaFee"/>元</div>
        </div>
        <div class="item blueColor" >
          <div class="leftKiloMeters">收取客户金额</div>
          <div class="rightInput blueColor"><input class="blueColor" type="number" :disabled="!taskCostShow" v-model="form.customerAmount"/>元</div>
        </div>
      </div>
    </div>
    <div class="btn" v-if="taskCostShow || finishLt7">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import {leftCopy} from  "@/utils/common"
import {getOrderSettlement, updateOrderSettlement} from "@/api/order"
export default {
  name: "supplySettlement",
  data(){
    return{
      taskOrderId:'',
      userOrderId:'',
      orderCode:'',
      supplierSettlementType:'',
      form:{
        reportMileageAb:'',
        reportMileageBc:'',
        reportMileageCa:'',
        bridgeAmountAb:'',
        bridgeAmountBc:'',
        bridgeAmountCa:'',
        tyreNumber:0,
        waitAmount:'',
        dilemmaFee:'',
        customerAmount:'',
        taskFlowId:'',
        auditStatus:'',
        finishTime:'',
      }
    }
  },
    async mounted() {
      const urlParams = new URLSearchParams(window.location.search);
      this.taskOrderId = urlParams.get('taskOrderId');
      this.userOrderId = urlParams.get('userOrderId');
      this.orderCode = urlParams.get('orderCode')
      await this.getDetail()
  },
  computed:{
    taskCostShow() {
      return this.form.auditStatus?.code && !([3, 4, 6].includes(this.form.auditStatus.code))
    },
    finishLt7(){
      return  !this.form.finishTime || (this.form.finishTime && new Date().getTime() - new Date(this.form.finishTime).getTime() <= 7 * 24 * 60 * 60 * 1000)
    },
  },
  methods:{
    handleInput(event) {
      const newValue = parseInt(event.target.value, 10);
      if (!isNaN(newValue) && newValue >= 0 && newValue <= 4) {
        this.form.tyreNumber = newValue;
      } else {
        this.$toast('请输入0到4之间的数字')
        this.form.tyreNumber = null; // 或者上一个有效值
      }
    },
    submit() {
      this.updatSettlement()
    },
    async getDetail(){
      let res = await getOrderSettlement({
        userOrderId: this.userOrderId,
        orderCode:  this.orderCode,
        taskOrderId: this.taskOrderId
      })
      leftCopy(this.form,{...res.data});
      this.supplierSettlementType= res.data.supplierSettlementType?.code
    },
    async updatSettlement(){
      let result =await updateOrderSettlement({
        ...this.form,
        userOrderId: this.userOrderId,
        orderCode:  this.orderCode,
        taskOrderId: this.taskOrderId
      })
      if(result.code !== 200){
        this.$toast(result.msg)
      }else{
        this.$toast(result.msg)
        setTimeout(()=>{
          let data = {"action":"goBack","params":""}
          var u = navigator.userAgent;
          var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
          // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
          if(isiOS){
            window.webkit.messageHandlers.nativeObject.postMessage(data);
          }else {
            window.android.sendMessage("goBack");
          }
        },2000)
      }
    }
  },
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap {
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: scroll;
}
.common {
  width: 100%;
  background: #FFFFFF;
  backdrop-filter: blur(5.602678571428572px);
  box-sizing: border-box;
  padding: 10px 17px 10px 24px;
  margin-bottom: 10px;
}
.otherFee {
  @include wh(100%, 198px);
}
.title {
  @include fontWeightSize(bold, 14px);
  color: #323643;
  opacity: 0.66;
}
.line {
  @include wh(calc(100% - 10px), 2px);
  text-align: center;
  opacity: 0.16;
  border-top: 1px solid;
  margin-top: 8px;
  border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
}
.metersWrap {
  @include flexBetween;
  line-height: 37px;
  .blueColor{
    color: #4682FE;
  }
  .item{
    width: 100%;
    @include flexBetCen;
    .rightInput{
      @include fontWeightSize(bold, 13px);
      color: #323643;
      opacity: .5;
    }
    .blueColor{
      color: #4682FE;
      opacity:  1 !important;
    }
    input {
      height: 30px;
      border: none;
      text-align: right;
      color: #323643;
      opacity: .8;
    }
  }
  .leftTitle {
    @include fontWeightSize(400, 14px);
  }
}
.btn {
  //position:absolute;
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 20px;
  //bottom: 20px;
  button {
    border: none;
    border-radius: 5px;
    text-align: center;
    @include bgFontColor(#FFFFFF,#354D93);
    @include fontWeightSize(bold,15px);
    @include whLin(88%,48px);
  }
}
</style>