705 lines
20 KiB
Vue
705 lines
20 KiB
Vue
|
<template>
|
||
|
|
<div class="">
|
||
|
|
|
||
|
|
<div style="margin-top: 0px; height: 70vh;overflow: auto" class="box-card">
|
||
|
|
<div class="title_">门店交接单</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>油站名称</div>
|
||
|
|
<div>{{baseInfo.storeName}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>油站站长</div>
|
||
|
|
<div>{{baseInfo.realName}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>交班方式</div>
|
||
|
|
<div>{{baseInfo.handoverType}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>开始时间</div>
|
||
|
|
<div>{{baseInfo.startTime}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>结束时间</div>
|
||
|
|
<div>{{baseInfo.endTime}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>订单金额</div>
|
||
|
|
<div>{{orderSummary.oilOrder}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>优惠金额</div>
|
||
|
|
<div>{{orderSummary.allDis}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>退款金额</div>
|
||
|
|
<div>{{orderSummary.oilRefund}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>挂账金额</div>
|
||
|
|
<div>--</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>会员消费</div>
|
||
|
|
<div>{{orderSummary.allBalanceP}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>实收金额</div>
|
||
|
|
<div>{{orderSummary.allMoney}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>充值金额</div>
|
||
|
|
<div>{{orderSummary.cardPaid}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>充值赠送</div>
|
||
|
|
<div>{{orderSummary.cardGiftPaid}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>会员总余额</div>
|
||
|
|
<div>{{orderSummary.points}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div>会员总积分</div>
|
||
|
|
<div>{{orderSummary.sumnum}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="xxing"></div>
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>营业收入统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">类型</div>
|
||
|
|
<div class="f-size">订单金额</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div class="l-size">营业总额</div>
|
||
|
|
<div class="s-size">{{orderSummary.allyingye1}}</div>
|
||
|
|
<div class="r-size">￥{{orderSummary.allyingye}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div class="l-size">充值总额</div>
|
||
|
|
<div class="s-size">{{orderSummary.allchuzhika1}}</div>
|
||
|
|
<div class="r-size">￥{{orderSummary.allchuzhika}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b">
|
||
|
|
<div class="l-size">合计</div>
|
||
|
|
<div class="s-size">{{orderSummary.allyingye1 + orderSummary.allchuzhika1}}</div>
|
||
|
|
<div class="r-size">￥{{orderSummary.allyingye + orderSummary.allchuzhika}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>支付方式统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all'">
|
||
|
|
<div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>油品实收统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">油号</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
||
|
|
<div class="l-size">{{item.oilName}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>优惠统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">油号</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
||
|
|
<div class="l-size">{{item.oilName}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>退款统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">类型</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
||
|
|
<div class="l-size">{{item.oilName}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>挂账统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">挂账单位</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
|
||
|
|
<div class="l-size">{{item.name}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>会员充值统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'allbalance'">
|
||
|
|
<div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>会员消费统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
|
||
|
|
<div class="l-size">合计</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>便利店统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'goods'">
|
||
|
|
<div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>积分商城统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'point'">
|
||
|
|
<div class="l-size">{{calculateThePaymentMethod(item.payType)}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>新增会员统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">新增会员数</div>
|
||
|
|
<!-- <div class="f-size">笔数</div>-->
|
||
|
|
<div class="r-size">{{orderSummary.sumnum}}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>挂账归还统计(再处理)</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">支付方式</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in returnedToTheAccount">
|
||
|
|
<div class="l-size">{{item.name?item.name:'--'}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="for-box">
|
||
|
|
<div class="for-title">
|
||
|
|
<div class="x-"></div>
|
||
|
|
<div>员工实收统计</div>
|
||
|
|
<div class="x-"></div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" style="font-weight: 600">
|
||
|
|
<div class="l-size">员工</div>
|
||
|
|
<div class="f-size">笔数</div>
|
||
|
|
<div class="r-size">实收金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="d-s-b" v-for="item in employeeStatistics">
|
||
|
|
<div class="l-size">{{item.name?item.name:'--'}}</div>
|
||
|
|
<div class="s-size">{{item.numberOfDeals?item.numberOfDeals:'--'}}</div>
|
||
|
|
<div class="r-size">￥{{item.paidAmount?item.paidAmount:'--'}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {getHandoverApi, getHandoverApi2, getHandoverListApi, printLocallyApi} from "@/api/handover/handover";
|
||
|
|
|
||
|
|
import {getStatisticsApi } from "@/api/order/order";
|
||
|
|
import {getDicts} from "@/api/order/data";
|
||
|
|
import HandoverOnly from "@/views/handover/HandoverOnly.vue";
|
||
|
|
import {listStaff} from "@/api/order/staff";
|
||
|
|
import HandoverRecord from "@/views/handover/HandoverRecord.vue";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "HandoverDetailsInfo",
|
||
|
|
components: {HandoverRecord, HandoverOnly},
|
||
|
|
|
||
|
|
// dicts: ['zhzt'],
|
||
|
|
props: {
|
||
|
|
recordData:''
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
tabs:[
|
||
|
|
"交接班",
|
||
|
|
"交班记录"
|
||
|
|
],
|
||
|
|
tabindex:'',
|
||
|
|
status:'',
|
||
|
|
openDetail:'',
|
||
|
|
queryParams:{},
|
||
|
|
|
||
|
|
handoverList : {},
|
||
|
|
handoverData:{},
|
||
|
|
baseInfo:{},
|
||
|
|
billingDetails:[],
|
||
|
|
employeeStatistics:[],
|
||
|
|
greaseGunStatistics:[],
|
||
|
|
oilNumberStatistics:[],
|
||
|
|
orderSummary:{},
|
||
|
|
paymentAggregation:[],
|
||
|
|
returnedToTheAccount:[],
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
console.log(11111111121212)
|
||
|
|
this.handoverList = JSON.parse(this.recordData)
|
||
|
|
this.handoverData = this.handoverList;
|
||
|
|
console.log(11111111121212,this.handoverData)
|
||
|
|
|
||
|
|
this.baseInfo = this.handoverData.baseInfo,
|
||
|
|
this.billingDetails = this.handoverData.billingDetails,
|
||
|
|
this.employeeStatistics = this.handoverData.employeeStatistics,
|
||
|
|
this.greaseGunStatistics = this.handoverData.greaseGunStatistics,
|
||
|
|
this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
|
||
|
|
this.orderSummary = this.handoverData.orderSummary,
|
||
|
|
this.paymentAggregation = this.handoverData.paymentAggregation,
|
||
|
|
this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
|
||
|
|
console.log("this.handoverList",this.handoverList)
|
||
|
|
// this.getHandover();
|
||
|
|
;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getHandover() {
|
||
|
|
// getHandoverApi2(this.queryParams).then(res=>{
|
||
|
|
// this.handoverList = res.data;
|
||
|
|
// this.handoverData = res.data;
|
||
|
|
// this.baseInfo = this.handoverData.baseInfo,
|
||
|
|
// this.billingDetails = this.handoverData.billingDetails,
|
||
|
|
// this.employeeStatistics = this.handoverData.employeeStatistics,
|
||
|
|
// this.greaseGunStatistics = this.handoverData.greaseGunStatistics,
|
||
|
|
// this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
|
||
|
|
// this.orderSummary = this.handoverData.orderSummary,
|
||
|
|
// this.paymentAggregation = this.handoverData.paymentAggregation,
|
||
|
|
// this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
|
||
|
|
// console.log("this.handoverList",this.handoverList)
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
|
||
|
|
getindex(index){
|
||
|
|
this.tabindex = index
|
||
|
|
},
|
||
|
|
getList(){
|
||
|
|
this.dateRange = []
|
||
|
|
if (this.beginTime && this.endTime) {
|
||
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
||
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
||
|
|
}
|
||
|
|
getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
|
||
|
|
this.dataList = res.data.records
|
||
|
|
this.total = res.data.total
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getStatistics() {
|
||
|
|
getStatisticsApi().then(res=>{
|
||
|
|
this.statisticsForm = res.data
|
||
|
|
})
|
||
|
|
console.log("123123123",this.statisticsForm)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取支付方式
|
||
|
|
getZhzt() {
|
||
|
|
getDicts("zhzt").then(response => {
|
||
|
|
this.zhztList = response.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getStatus() {
|
||
|
|
getDicts("handover").then(response => {
|
||
|
|
this.shiftHandoverList = response.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 交班
|
||
|
|
async shift() {
|
||
|
|
let msg = '交班并退出系统, 是否继续?'
|
||
|
|
let flag = false
|
||
|
|
if (this.handoverList && this.handoverList.baseInfo && this.handoverList.baseInfo.handoverOut == 'jbtc') {
|
||
|
|
flag = true
|
||
|
|
} else {
|
||
|
|
msg = '确定交班？'
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$confirm(msg, '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
let recordData = this.handoverList
|
||
|
|
let handoverRecord = {
|
||
|
|
startTime: this.handoverList.baseInfo.startTime,
|
||
|
|
recordData: JSON.stringify(recordData),
|
||
|
|
type: 0,
|
||
|
|
status: this.handoverList.baseInfo.handoverType,
|
||
|
|
staffId: this.staff.staffId
|
||
|
|
}
|
||
|
|
addHandoverApi(handoverRecord).then(res => {
|
||
|
|
if (flag) {
|
||
|
|
this.clean()
|
||
|
|
// removeUserId();
|
||
|
|
// this.$store.dispatch('LogOut').then(() => {
|
||
|
|
// location.href = '/';
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
this.getHandover();
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleUpdate(){},
|
||
|
|
handleQuery(){
|
||
|
|
this.getList();
|
||
|
|
this.getHandover();
|
||
|
|
},
|
||
|
|
getStaffList() {
|
||
|
|
listStaff(this.addDateRange({ page: 1,
|
||
|
|
pageSize: 10000})).then(response => {
|
||
|
|
this.staffList = response.data.records;
|
||
|
|
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
resetQuery(){
|
||
|
|
this.queryParams = {
|
||
|
|
giftName: '',
|
||
|
|
status: '',
|
||
|
|
mobile: '',
|
||
|
|
orderNumber: '',
|
||
|
|
page:1,
|
||
|
|
pageSize:10
|
||
|
|
},
|
||
|
|
this.dateRange = []
|
||
|
|
this.beginTime = "";
|
||
|
|
this.endTime = ""
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
printLocally(data) {
|
||
|
|
printLocallyApi(data).then(res=>{
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleDetail(data){
|
||
|
|
this.openDetail = true
|
||
|
|
this.recordData = data.recordData;
|
||
|
|
// JSON.parse(this.recordData )
|
||
|
|
console.log("data.recordData;",this.recordData)
|
||
|
|
|
||
|
|
},
|
||
|
|
goToAbout() {
|
||
|
|
this.$router.push({
|
||
|
|
path:'/Handover',
|
||
|
|
query:{
|
||
|
|
id:9
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
billingDetails() {
|
||
|
|
let count = [];
|
||
|
|
if (this.billingDetails) {
|
||
|
|
return this.billingDetails
|
||
|
|
}
|
||
|
|
return count;
|
||
|
|
},
|
||
|
|
calculateThePaymentMethod(payType) {
|
||
|
|
switch (payType) {
|
||
|
|
case 'ALIPAY':
|
||
|
|
return '支付宝'
|
||
|
|
break;
|
||
|
|
case 'WECHAT':
|
||
|
|
return '微信'
|
||
|
|
break;
|
||
|
|
case 'UNIONPAY':
|
||
|
|
return '银联二维码'
|
||
|
|
break;
|
||
|
|
case 'CASH':
|
||
|
|
return '现金'
|
||
|
|
break;
|
||
|
|
case 'balance':
|
||
|
|
return '余额'
|
||
|
|
break;
|
||
|
|
case 'oilCard':
|
||
|
|
return '油卡'
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return '未知'
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.app-containers {
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: #f6f8f9;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.tab-box{
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0px 25px;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.box_{
|
||
|
|
height: 100%;
|
||
|
|
border-bottom: 2px solid #fe9554;
|
||
|
|
}
|
||
|
|
.box {
|
||
|
|
padding: 10px;
|
||
|
|
height: 80px;
|
||
|
|
width: 150px;
|
||
|
|
margin-right: 0px;
|
||
|
|
background-color: rgba(204, 204, 204, 0.3);
|
||
|
|
border-radius: 8px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: left;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.box-card{
|
||
|
|
width: 98%;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.font-chinese {
|
||
|
|
font-size: 15px;
|
||
|
|
font-family:Microsoft YaHei;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height:1.5
|
||
|
|
}
|
||
|
|
.font-number {
|
||
|
|
font-size: 20px;
|
||
|
|
font-family: PingFang SC,sans-serif;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height:1.3
|
||
|
|
}
|
||
|
|
.table-box{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-container1 {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: nowrap; /* 确保不换行 */
|
||
|
|
width: 100%; /* 让父容器占满可用宽度 */
|
||
|
|
}
|
||
|
|
.el-form--inline .el-form-item {
|
||
|
|
margin-right: 44px;
|
||
|
|
}
|
||
|
|
.tab-box{
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.tab_{
|
||
|
|
width: 75px;
|
||
|
|
height: 100%;
|
||
|
|
//border-bottom: 2px solid #FF770F;
|
||
|
|
display: flex;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #999999;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 50px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
border-bottom: 2px solid #FF770F !important;
|
||
|
|
color: #FF770F !important;
|
||
|
|
}
|
||
|
|
.title_{
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.d-s-b{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333333;
|
||
|
|
margin: 20px auto;
|
||
|
|
}
|
||
|
|
.xxing{
|
||
|
|
width: 100%;
|
||
|
|
border-bottom: 1px solid #EEEEEE;
|
||
|
|
}
|
||
|
|
.for-box{
|
||
|
|
width: 100%;
|
||
|
|
margin: 20px auto;
|
||
|
|
}
|
||
|
|
.for-title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333333;
|
||
|
|
|
||
|
|
}
|
||
|
|
.x-{
|
||
|
|
width: 100px;
|
||
|
|
border-bottom: 1px solid #EEEEEE;
|
||
|
|
margin: 0 15px;
|
||
|
|
}
|
||
|
|
.f-size{
|
||
|
|
width: 33%;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.s-size{
|
||
|
|
width: 33%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.l-size{
|
||
|
|
width: 33%;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.r-size{
|
||
|
|
width: 33%;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.bottom-{
|
||
|
|
width: 98%;
|
||
|
|
}
|
||
|
|
.table-boxs{
|
||
|
|
border-radius: 8px;
|
||
|
|
width: 98%;
|
||
|
|
background: #fff;
|
||
|
|
margin: 25px auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
</style>
|