From a8898a514075a68eb204c5e312cc7a7ab19eeb62 Mon Sep 17 00:00:00 2001
From: wangh <9483>
Date: Fri, 17 Nov 2023 16:37:33 +0800
Subject: [PATCH] 1

---
 fuintCashierWeb/package.json                  |   1 +
 .../cashier/NewComponents/HandoverDetails.vue | 485 ++++++++++++++++
 .../cashier/NewComponents/HandoverOnly.vue    | 524 ++++++++++++++++++
 3 files changed, 1010 insertions(+)
 create mode 100644 fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetails.vue
 create mode 100644 fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue

diff --git a/fuintCashierWeb/package.json b/fuintCashierWeb/package.json
index bafa4c837..96ab3ddc3 100644
--- a/fuintCashierWeb/package.json
+++ b/fuintCashierWeb/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
+    "bignumber.js": "^9.1.2",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "4.9.0",
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetails.vue b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetails.vue
new file mode 100644
index 000000000..62c282a2c
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetails.vue
@@ -0,0 +1,485 @@
+<!--发票-->
+<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>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue
new file mode 100644
index 000000000..8877cf01a
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue
@@ -0,0 +1,524 @@
+<!--发票-->
+<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" @click="shift">交班</div>
+          <div class="anniu-lv">云打印</div>
+          <div class="anniu-lv">本地打印</div>
+          <div ><el-link type="primary" @click="recording">交班记录</el-link></div>
+        </div>
+      </el-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {addHandoverApi, 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)
+          })
+        },
+
+        // 交班记录
+        recording() {
+          this.$router.push({
+            path:'/HandoverDetails',
+            query:{
+              id:9
+            }
+          });
+        },
+        shift() {
+          this.$confirm('交班并退出系统, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            let recordData = this.handoverList
+            let handoverRecord = {
+              startTime:this.handoverList.baseInfo.endTime,
+              recordData:JSON.stringify(recordData),
+              type:0,
+              status:0,
+            }
+            addHandoverApi(handoverRecord).then(res=>{
+
+              console.log("")
+            })
+            //
+            // this.$message({
+            //   type: 'success',
+            //   message: '删除成功!'
+            // });
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消交班'
+            });
+          });
+        }
+      }
+
+    }
+</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>