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

@ -38,4 +38,8 @@
@mixin flexCenter(){ @mixin flexCenter(){
display: flex; display: flex;
align-items: center; align-items: center;
}
@mixin flexBetCen{
@include flexColBet;
align-items: center;
} }

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

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