supplier-dispatch-h5/src/views/workOrder/settlementDetail.vue

<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="结算单详情"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goback"
    />
  </div>
  <div class="baseInfo common">
    <div class="title">结算单:</div>
    <div class="line"></div>
    <div class="item">
      <span class="titleLeft">起步价：&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="content">{{orderInfo.startPrice}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">包含公里数：</span>
      <span class="content" >{{ orderInfo.containMileage }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">每公里单价：</span>
      <span class="content" >{{ orderInfo.unitPrice }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">基本总费用：</span>
      <span class="content" >{{ orderInfo.supplierBasePrice }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">路桥费：</span>
      <span class="content">{{orderInfo.supplierBridgeAmountAb + '+' + orderInfo.supplierBridgeAmountBc + '+' + orderInfo.supplierBridgeAmountCa}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">等候费：</span>
      <span class="content">{{orderInfo.supplierWaitAmount}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">辅助轮费：</span>
      <span class="content">{{orderInfo.supplierTyreAmount}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">困境费：</span>
      <span class="content">{{orderInfo.supplierDilemmaAmount}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">其他费用：</span>
      <span class="content">{{orderInfo. supplierOtherAmount}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">额外费用总计：</span>
      <span class="content">{{orderInfo.supplierExtraPrice}} </span>
    </div>
    <div class="item">
      <span class="titleLeft">费用总计：</span>
      <span class="content">{{orderInfo.supplierSettleAmount}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">公里数：</span>
      <span class="content">{{orderInfo.supplierSettleMileageAb + '+' + orderInfo.supplierSettleMileageBc + '+' + orderInfo.supplierSettleMileageCa}} </span>
    </div>
  </div>

</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {getAccountRecordDetail} from "@/api/mine"
export default {
  name: "settlementDetail",
  mixins:[myMixins],
  data(){
    return{
      id:'',
      postfix:'',
      orderInfo:{},
      index:"",
      queryTime:'',//记录工单对账选择的时间
    }
  },
  async mounted() {
    this.id=this.$route.params?.id;
    this.postfix=this.$route.params?.postfix;
    this.index=this.$route.params?.index;
    this.queryTime = this.$route.params?.queryTime
    await this.getDetail()
  },
  methods: {
    goback(){
      this.$router.push({
        name:"accountingView",
        params:{
          id: this.id,                  // 参数对象的属性
          postfix:this.postfix,
          activeIndex:this.index,
          queryTime:this.queryTime
        }
      })
    },
    async getDetail(){
      let res= await getAccountRecordDetail({
        id:this.id,
        postfix:this.postfix
      })
      if(res.code === 200){
        this.orderInfo=res.data
        console.log(" this.orderInfo", this.orderInfo)
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: auto;
}
.navBar{
  margin-bottom: 46px;
}
.title{
  @include fontWeightSize(bold,14px);
  @include colorOpa(#323643,0.66);
}
.line{
  @include wh(100%,2px);
  opacity: 0.16;
  border-top: 1px solid;
  margin-top: 7px;
  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;
}
.item{
  @include flexCenter;
  font-size: 12px !important;
  font-weight: 400 !important;
  .titleLeft{
    opacity: .5;
    line-height: 27px;
  }
}
img{
  @include wh(35px,15px);
  margin-left: 21px;
}
.common{
  background-color: #FFFFFF;
  padding: 11px 24px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.baseInfo{
  @include wh(100%,100%);

}
</style>