oil-station/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
2023-10-27 16:31:27 +08:00

454 lines
11 KiB
Vue

<!--发票-->
<template>
<div class="app-center">
<div class="box-center">
<div class="box-title">交班统计</div>
<div class="box-ge">
<div class="input-box">
<div>油站名称:</div>
<div>蓝鲸加油站</div>
</div>
<div class="input-box">
<div>收银员:</div>
<div>陈某人</div>
</div>
<div class="input-box">
<div>交班方式:</div>
<div>门店统一交班</div>
</div>
<div class="input-box">
<div>开始时间:</div>
<div>2023-10-24 15:41:47</div>
</div>
<div class="input-box">
<div>结束时间:</div>
<div>2023-10-24 15:41:47</div>
</div>
</div>
<div class="box-ge">
<div class="input-box">
<div>当前版本:</div>
<div>V1.0.1</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">订单汇总</div>
<div class="input-hui">
<div>类型</div>
<div>金额</div>
</div>
<div class="input-box">
<div>油品订单(订单)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>油品订单(退款)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>油品订单(实收)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>油品优惠(实收)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>抹零总额(实收)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>油品交易(实收)</div>
<div>2164.55</div>
</div>
<el-divider></el-divider>
<!-- 六个一条线 -->
<div class="input-box">
<div>会员储值(订单)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>会员储值(退款)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>会员储值(实收)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>储值赠送(订单)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>储值赠送(退款)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>储值赠送(实际)</div>
<div>2164.55</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>普通收款(订单)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>普通收款(退款)</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>普通收款(实收)</div>
<div>2164.55</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">退款汇总</div>
<div class="input-hui">
<div>支付方式</div>
<div>退款金额</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>2164.55</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">实收汇总</div>
<div class="input-hui">
<div>支付方式</div>
<div>金额</div>
</div>
<div class="input-box">
<div>现金</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>储值卡</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>加油金</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>银行转1</div>
<div>2164.55</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>2164.55</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">油品订单</div>
<div class="input-hui">
<div>支付方式</div>
<div>金额</div>
</div>
<div class="input-box">
<div>现金</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>储值卡</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>加油金</div>
<div>2164.55</div>
</div>
<div class="input-box">
<div>银行转1</div>
<div>2164.55</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>2164.55</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">商品订单</div>
<div class="input-hui">
<div>支付方式</div>
<div>金额</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>0.00</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">普通订单</div>
<div class="input-hui">
<div>支付方式</div>
<div>金额</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>0.00</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">会员储值</div>
<div class="input-hui">
<div>支付方式</div>
<div>金额</div>
</div>
<div class="input-box">
<div>现金</div>
<div>888.88</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>888.88</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">油号统计</div>
<div class="input-hui-frou">
<div>油号</div>
<div>笔数</div>
<div>升数</div>
<div style="text-align: right">金额</div>
</div>
<div class="input-box-frou">
<div>92#</div>
<div>9</div>
<div>1447.03</div>
<div style="text-align: right">888.88</div>
</div>
<div class="input-box-frou">
<div>92#</div>
<div>9</div>
<div>1447.03</div>
<div style="text-align: right">888.88</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>888.88</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">优惠统计</div>
<div class="input-hui">
<div>油品</div>
<div>金额</div>
</div>
<div class="input-box">
<div>92#</div>
<div>888.88</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>888.88</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">油枪统计</div>
<div class="input-hui-frou">
<div>油号</div>
<div>笔数</div>
<div>升数</div>
<div style="text-align: right">金额</div>
</div>
<div class="input-box-frou">
<div>一号枪</div>
<div>9</div>
<div>1447.03</div>
<div style="text-align: right">888.88</div>
</div>
<div class="input-box-frou">
<div>二号枪</div>
<div>9</div>
<div>1447.03</div>
<div style="text-align: right">888.88</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>888.88</div>
</div>
</div>
<div class="box-ge">
<div class="boloicon">员工统计</div>
<div class="input-hui-frou">
<div>员工姓名</div>
<div>笔数</div>
<div style="text-align: right">金额</div>
</div>
<div class="input-box-frou">
<div>一号员工</div>
<div>9</div>
<div style="text-align: right">888.88</div>
</div>
<div class="input-box-frou">
<div>二号员工</div>
<div>9</div>
<div style="text-align: right">888.88</div>
</div>
<el-divider></el-divider>
<div class="input-box">
<div>合计</div>
<div>888.88</div>
</div>
</div>
</div>
<div style="width: 100%; height: 100px"></div>
<div class="app-bottom">
<el-card >
<div class="bottom-xz">
<div class="anniu">交班</div>
<div class="anniu-lv">云打印</div>
<div class="anniu-lv">本地打印</div>
<div ><el-link type="primary">交班记录</el-link></div>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "Handover",
}
</script>
<style scoped lang="scss">
.app-center{
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.box-center{
width: 508px;
height: 85vh;
background-color: white;
margin: 10px auto;
box-sizing: border-box;
overflow: auto;
}
.box-ge{
border-bottom: 1px solid #ececec ;
box-sizing: border-box;
padding: 10px;
}
.box-title{
font-size: 18px;
text-align: center;
align-items: center;
margin-top: 15px;
}
.input-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
}
.input-box-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.input-hui{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #f7f7f7;
box-sizing: border-box;
padding: 5px 0px;
}
.input-hui-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #f7f7f7;
box-sizing: border-box;
padding: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.boloicon{
font-weight: bold;
margin: 10px 0px;
}
.app-bottom{
position: fixed;
bottom: 0px;
height: 100px;
width: 90%;
}
.bottom-xz{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.anniu{
width: 100px;
height: 40px;
background: #00afff;
color: white;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50px;
margin: 0px 15px;
cursor: pointer;
}
.anniu-lv{
background: #1ab394;
width: 100px;
height: 40px;
color: white;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50px;
margin: 0px 15px;
cursor: pointer;
}
</style>