supplier-dispatch-h5/src/views/workOrder/accounting.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="h5GoBack"
    />
  </div>
  <div class="baseInfo common">
    <div class="title">基本信息:</div>
    <div class="line"></div>
    <div class="item">
      <span class="titleLeft">工单编号：</span>
      <span class="content" id="copyText">{{ orderInfo.orderCode }}</span>
      <img @click="copyText" src="@/assets/copy.png" />
    </div>
    <div class="item">
      <span class="titleLeft">车牌号：&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="content">{{orderInfo.plateNumber}}</span>
    </div>
    <div class="item">
      <span class="titleLeft">服务类型：</span>
      <span class="content" >{{ orderInfo.serviceName }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">工单状态：</span>
      <span class="content" >{{ orderInfo.taskSuccessStatus?.label }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">结算比例：</span>
      <span class="content" >{{ orderInfo.supplierSettleRatio?.label }}</span>
    </div>
    <div class="item">
      <span class="titleLeft">结算类型：</span>
      <span class="content" >{{ orderInfo.settleType?.label }}</span>
    </div>
    <div class="item" >
      <span class="titleLeft">结算方式：</span>
      <div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
        <span>{{orderInfo.taskSettleType?.label}}</span>
<!--        <span>包含公里数:15</span>-->
<!--        <span>超出单价:6</span>-->
         </div>
    </div>
    <div class="item">
      <span class="titleLeft">扣除责任险费：</span>
      <span class="content">{{orderInfo.policyAmount}} {{orderInfo.cutInsuranceAmount}}</span>
    </div>

  </div>
  <div class="supplierData common">
    <div class="title">供应商数据:</div>
    <div class="line"></div>
    <div class="inpInfo">
      <div class="titleContent">
        <div>拖车里程:</div>
        <div>路桥费:</div>
        <div>小轮费:</div>
        <div>收取客户金额:</div>
        <div>费用总计:</div>
        <div>备注说明:</div>
      </div>
      <div class="inputContent">
        <div class="halfOpcity"><input type="number" />公里</div>
        <div class="halfOpcity"><input type="number"/>元</div>
        <div class="halfOpcity"><input type="number" v-model="form.supplierTyreAmount"/>元</div>
        <div class="halfOpcity"><input type="number" v-model="form.supplierCustomerAmount"/>元</div>
        <div class="btnComputed">计算</div>
      </div>
    </div>
    <textarea class="multipleTxt" placeholder="报备描述"></textarea>
    <two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
  </div>
</div>
</template>

<script>
import {myMixins} from '@/utils/myMixins'
import {getAccountRecordDetail} from "@/api/mine"
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
import order from "../../store/modules/order";
export default {
  name: "accountingView",
  computed: {
    order() {
      return order
    }
  },
  mixins:[myMixins],
  data(){
    return{
      id:'',
      postfix:'',
      orderInfo:{},
      form:{
        supplierCustomerAmount:'',
        supplierTyreAmount:'',
      }
    }
  },
  async mounted() {
    this.id=this.$route.params?.id;
    this.postfix=this.$route.params?.postfix;
    await this.getDetail()
  },
  methods:{
    async getDetail(){
      let res= await getAccountRecordDetail({
        id:this.id,
        postfix:this.postfix
      })
      if(res.code === 200){
        this.orderInfo=res.data
      }
      // console.log("res",res)
    },
    cancelBtn(){
      console.log("取消")
    },
    submitBtn(){
      console.log("提交")
    }
  },
  components:{
    TwoCommonBtn
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  width: 100%;
  height: 100%;
  background-color: #F4F5F7;
}
.navBar{
  margin-bottom: 46px;
}
.title{
  @include fontWeightSize(bold,14px);
  color: #323643;
  opacity: 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{
  display: flex;
  align-items: center;
  font-size: 12px !important;
  font-weight: 400 !important;
  //@include fontWeightSize(400,12px) !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%,276px);

}
.supplierData{
  @include wh(100%,438px);
  .inpInfo{
    display: flex;
    justify-content: space-between;
    margin: 0 5px;
    color: #323643;
    line-height: 32px;
    input{
      border: none;
      text-align: right;
    }
    .titleContent{
      width: 91px;
      @include fontWeightSize(bold,13px);

    }
    .halfOpcity{
      opacity: .5;
    }
    .inputContent{
      text-align: right;
      //opacity: .5;e
      .btnComputed{
        width: 48px;
        @include all-height(18px);
        text-align: center;
        color: #FFFFFF;
        background: #354D93;
        border-radius: 3px;
        position: absolute;
        right: 24px;
      }
    }
  }
  .multipleTxt{
    @include wh(100%,87px);
    background: #FAFAFA;
    border-radius: 3px;
    border: 1px solid #E6E6E6;
    backdrop-filter: blur(10px);
    padding: 8px;
    box-sizing: border-box;
  }
  .btn{
    margin-top: 8px;
  }
}
</style>