工单对账模块

src/views/workOrder/aduitCompleteDetail.vue

@@ -0,0 +1,219 @@
+<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="baseInfo common">
+    <div class="title">审核数据:</div>
+    <div class="line"></div>
+    <div class="item">
+      <span class="titleLeft">拖车里程：</span>
+      <span class="content">{{ orderInfo.bridgeAmountBc + ' km' }}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">路桥费：</span>
+      <span class="content">{{orderInfo.bridgeAmount + ' 元' }}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">小轮费：</span>
+      <span class="content" >{{ orderInfo.tyreAmount  + ' 元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">困境费：</span>
+      <span class="content" >{{ orderInfo.dilemmaAmount  + ' 元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">等候费：</span>
+      <span class="content" >{{ orderInfo.waitAmount  + ' 元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">地库费：</span>
+      <span class="content" >{{ orderInfo.basementFee  + ' 元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">收取客户金额：</span>
+      <span class="content" >{{ orderInfo.customerAmount   + '元'}}</span>
+    </div>
+    <div class="item">
+      <span class="titleLeft">费用总计：</span>
+      <span class="content" >{{ orderInfo.settleAmount  + ' 元' }}</span>
+    </div>
+  </div>
+
+</div>
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins"
+import {getAccountRecordDetail} from "@/api/mine"
+export default {
+  name: "aduitCompleteDetail",
+  mixins:[myMixins],
+  data(){
+    return{
+      id:'',
+      postfix:'',
+      orderInfo:{},
+    }
+  },
+  async mounted() {
+    this.id=this.$route.query?.id;
+    this.postfix=this.$route.query?.postfix;
+    console.log(this.id,this.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
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  width: 100%;
+  height: 100%;
+  background-color: #F4F5F7;
+  overflow-y: auto;
+}
+.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;
+      }
+    }
+  }
+}
+</style>