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="leftKiloMeters">
          <div>AB段公里数</div>
          <div>BC段公里数</div>
          <div>CA段公里数</div>
        </div>
        <div class="rightInputMeters">
          <div><input type="number" v-model="form.reportMileageAb"/>公里</div>
          <div><input type="number" v-model="form.reportMileageBc"/>公里</div>
          <div><input type="number" 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="leftKiloMeters">
          <div>过路桥费ab</div>
          <div>过路桥费bc</div>
          <div>过路桥费ca</div>
        </div>
        <div class="rightInputMeters">
          <div><input type="number" v-model="form.bridgeAmountAb"/>元</div>
          <div><input type="number" v-model="form.bridgeAmountBc"/>元</div>
          <div><input type="number" 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="leftKiloMeters">
          <div>小轮个数</div>
          <div>等候费</div>
          <div>困境费</div>
          <div class="blueColor">已收取客户金额</div>
        </div>
        <div class="rightInputMeters" style="opacity: 1">
          <div class="alignRight"><input type="number" v-model="form.tyreNumber"/>个</div>
          <div  class="alignRight"><input type="number" v-model="form.waitAmount"/>元</div>
          <div class="alignRight"><input type="number" v-model="form.dilemmaFee"/>元</div>
          <div class="blueColor"><input type="number" v-model="form.customerAmount"/>元</div>
        </div>
      </div>
    </div>
    <div class="fixed-bottom">
      <common-btn class="btn" @submitClick="submit" />
    </div>
  </div>
</template>

<script>
import CommonBtn  from "@/components/commonBtn.vue"
import {leftCopy} from  "@/utils/common"
import {getOrderSettlement, updateOrderSettlement} from "@/api/order"
export default {
  name: "supplySettlement",
  data(){
    return{
      taskOrderId:'',
      userOrderId:'',
      orderCode:'',
      form:{
        reportMileageAb:'',
        reportMileageBc:'',
        reportMileageCa:'',
        bridgeAmountAb:'',
        bridgeAmountBc:'',
        bridgeAmountCa:'',
        tyreNumber:'',
        waitAmount:'',
        dilemmaFee:'',
        customerAmount:'',
      }
    }
  },
    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()

  },
  methods:{
    submit() {
      this.updatSettlement()
    },
    async getDetail(){
      let res = await getOrderSettlement({
        userOrderId: this.userOrderId,
        orderCode:  this.orderCode,
        taskOrderId: this.taskOrderId
      })
      leftCopy(this.form,{...res.data})
    },
    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(()=>{
          window.android.sendMessage("goBack");
        },2000)
      }
    }
  },
  components:{
    CommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap {
  @include wh(100%,100vh);
  background-color: #F4F5F7;
  overflow-y: auto;
  position: relative;
}
.common {
  @include wh(100%, 161px);
  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 {
  display: flex;
  justify-content: space-between;
  line-height: 37px;
  .blueColor{
    display: flex;
    flex-wrap: nowrap;
    @include fontWeightSize(bold,14px);
    color: #4682FE;
  }
  .alignRight{
    text-align: right;
    opacity: .5;
  }
  .leftTitle {
    @include fontWeightSize(400, 14px);
  }
  .rightInputMeters {
    margin-right: 13px;
    @include fontWeightSize(bold, 13px);
    color: #323643;
    opacity: .5;
    input {
      border: none;
      text-align: right;
      color: #323643;
      opacity: .8;
    }
  }
}
.fixed-bottom {

  position: fixed;   /* 设置按钮容器为固定定位 */
  left: 0;
  right: 0;
  bottom: 0;
  //padding: 10px;  /* 可根据需要调整按钮容器的内边距 */
  //background-color: #f0f0f0; /* 可根据需要设置按钮容器的背景颜色 */
  //box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); /* 可根据需要添加按钮容器的阴影效果 */
}
/* 如果需要调整按钮在底部容器内的位置，可以使用更具体的选择器进行样式调整 */
.fixed-bottom .btn {
  margin-top: 20px;
  position: absolute; /* 将按钮设置为绝对定位 */
  bottom: 30px; /* 可根据需要调整按钮距离底部的距离 */
  left: 50%; /* 可根据需要调整按钮在容器中的水平位置 */
  transform: translateX(-50%); /* 将按钮向左偏移自身宽度的一半，使其居中 */
}
</style>