oil-station/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetails.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>{{ handoverList.baseInfo.storeName }}</div>-->
        </div>
        <div class="input-box">
          <div>收银员:</div>
          <div>{{ handoverList.baseInfo.realName }}</div>
        </div>
        <div class="input-box">
          <div>交班方式:</div>
          <div>门店统一交班</div>
        </div>
        <div class="input-box">
          <div>开始时间:</div>
          <div>{{ handoverList.baseInfo.startTime }}</div>
        </div>
        <div class="input-box">
          <div>结束时间:</div>
          <div>{{ handoverList.baseInfo.endTime }}</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>￥{{ handoverList.orderSummary.oilOrder }}</div>
        </div>
        <div class="input-box">
          <div>油品订单(退款)</div>
          <div>￥-{{ handoverList.orderSummary.oilRefund }}</div>
        </div>
        <div class="input-box">
          <div>油品订单(实收)</div>
          <div>￥{{ handoverList.orderSummary.oilPaid }}</div>
        </div>
        <div class="input-box">
          <div>油品优惠(实收)</div>
          <div>￥{{ handoverList.orderSummary.oilDiacount }}</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>￥{{ handoverList.orderSummary.cardOrder }}</div>
        </div>
        <div class="input-box">
          <div>会员储值(退款)</div>
          <div>￥-{{ handoverList.orderSummary.cardRefund }}</div>
        </div>
        <div class="input-box">
          <div>会员储值(实收)</div>
          <div>￥{{ handoverList.orderSummary.cardPaid }}</div>
        </div>
        <div class="input-box">
          <div>储值赠送(订单)</div>
          <div>￥{{ handoverList.orderSummary.cardGiftOrder }}</div>
        </div>
        <div class="input-box">
          <div>储值赠送(退款)</div>
          <div>￥{{ handoverList.orderSummary.cardGiftRefund }}</div>
        </div>
        <div class="input-box">
          <div>储值赠送(实际)</div>
          <div>￥{{ handoverList.orderSummary.cardGiftPaid }}</div>
        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>存油储值(订单)</div>
          <div>￥{{ handoverList.orderSummary.fuelOrder }}</div>
        </div>
        <div class="input-box">
          <div>存油储值(退款)</div>
          <div>￥{{ handoverList.orderSummary.fuelRefund }}</div>
        </div>
        <div class="input-box">
          <div>存油储值(实收)</div>
          <div>￥{{ handoverList.orderSummary.fuelPaid }}</div>
        </div>

        <el-divider></el-divider>
        <div class="input-box">
          <div>普通收款(订单)</div>
          <div>￥{{ handoverList.orderSummary.goodsOrder }}</div>
        </div>
        <div class="input-box">
          <div>普通收款(退款)</div>
          <div>￥-{{ handoverList.orderSummary.goodsRefund }}</div>
        </div>
        <div class="input-box">
          <div>普通收款(实收)</div>
          <div>￥{{ handoverList.orderSummary.goodsPaid }}</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>
    import {getHandoverApi} from "@/api/cashier/handover";

    export default {
        name: "Handover",
        data() {
          return {
            handoverList : '',
          }
        },
      created() {
          this.getHandover();
      },
      methods: {
        getHandover() {
          getHandoverApi().then(res=>{
            this.handoverList = res.data;
            console.log("this.handoverList",this.handoverList)
          })
        }
      }

    }
</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>