apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

结算单页面布局更改

Browse Source
This commit is contained in:
zhouxueli
2023-08-28 17:50:18 +08:00
parent 22c7081635
commit b435b26c72
2 changed files with 54 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles/mixin.scss
View File

@ -39,3 +39,7 @@
display: flex;
align-items: center;
}
@mixin flexBetCen{
@include flexColBet;
align-items: center;
}

93
src/views/index/supplySettlement.vue
View File

@ -4,15 +4,17 @@
<div class="title">公里数:</div>
<div class="line"></div>
<div class="metersWrap">
<div class="leftKiloMeters">
<div v-show="supplierSettlementType != 1">AB段公里数</div>
<div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">BC段公里数</div>
<div v-show="supplierSettlementType == 3 || supplierSettlementType == 4">CA段公里数</div>
<div class="item" v-show="supplierSettlementType != 1">
<div class="leftKiloMeters">AB段公里数</div>
<div class="rightInput"><input type="number" v-model="form.reportMileageAb"/>公里</div>
</div>
<div class="rightInputMeters">
<div v-show="supplierSettlementType != 1"><input type="number" v-model="form.reportMileageAb"/>公里</div>
<div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.reportMileageBc"/>公里</div>
<div v-show="supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.reportMileageCa"/>公里</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" 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" v-model="form.reportMileageCa"/>公里</div>
</div>
</div>
</div>
@ -20,15 +22,17 @@
<div class="title">路桥费:</div>
<div class="line"></div>
<div class="metersWrap">
<div class="leftKiloMeters">
<div v-show="supplierSettlementType != 1">AB段路桥费</div>
<div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4">BC段路桥费</div>
<div v-show=" supplierSettlementType == 3 || supplierSettlementType == 4">CA段路桥费</div>
<div class="item" v-show="supplierSettlementType != 1">
<div class="leftKiloMeters">AB段路桥费</div>
<div class="rightInput"><input type="number" v-model="form.bridgeAmountAb"/>元</div>
</div>
<div class="rightInputMeters">
<div v-show="supplierSettlementType != 1"><input type="number" v-model="form.bridgeAmountAb"/>元</div>
<div v-show="supplierSettlementType == 1 || supplierSettlementType == 2 || supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.bridgeAmountBc"/>元</div>
<div v-show="supplierSettlementType == 3 || supplierSettlementType == 4"><input type="number" v-model="form.bridgeAmountCa"/>元</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" 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" v-model="form.bridgeAmountCa"/>元</div>
</div>
</div>
</div >
@ -36,31 +40,31 @@
<div class="title">其他费用:</div>
<div class="line"></div>
<div class="metersWrap">
<div class="leftKiloMeters">
<div>小轮个数</div>
<div>等候费</div>
<div>困境费</div>
<div class="blueColor" style="font-weight: 500;font-size: 14px">已收取客户金额</div>
<div class="item" >
<div class="leftKiloMeters">小轮个数</div>
<div class="rightInput"><input type="number" v-model="form.tyreNumber"/>个</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" style="font-weight: 500;font-size: 14px ;"><input class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
<div class="item">
<div class="leftKiloMeters">等候费</div>
<div class="rightInput"><input type="number" v-model="form.waitAmount"/>元</div>
</div>
<div class="item" >
<div class="leftKiloMeters">困境费</div>
<div class="rightInput"><input type="number" v-model="form.dilemmaFee"/>元</div>
</div>
<div class="item blueColor" >
<div class="leftKiloMeters">收取客户金额</div>
<div class="rightInput blueColor"><input class="blueColor" type="number" v-model="form.customerAmount"/>元</div>
</div>
</div>
</div>
<div class="btn">
<button @click="submit">提交</button>
</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 {
@ -132,9 +136,6 @@ export default {
}
}
},
components:{
// CommonBtn
}
}
</script>
@ -146,7 +147,6 @@ export default {
overflow-y: scroll;
}
.common {
//@include wh(100%, 161px);
width: 100%;
background: #FFFFFF;
backdrop-filter: blur(5.602678571428572px);
@ -156,7 +156,6 @@ export default {
}
.otherFee {
@include wh(100%, 198px);
//margin-bottom: 20px;
}
.title {
@include fontWeightSize(bold, 14px);
@ -172,24 +171,23 @@ export default {
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;
@include flexBetween;
line-height: 37px;
.blueColor{
color: #4682FE;
}
.alignRight{
text-align: right;
opacity: .5;
}
.leftTitle {
@include fontWeightSize(400, 14px);
}
.rightInputMeters {
margin-right: 13px;
.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;
@ -198,6 +196,9 @@ export default {
opacity: .8;
}
}
.leftTitle {
@include fontWeightSize(400, 14px);
}
}
.btn {
//position:absolute;