diff --git a/fuintAdmin/src/views/member/index.vue b/fuintAdmin/src/views/member/index.vue
index 1dd450188..568f16429 100644
--- a/fuintAdmin/src/views/member/index.vue
+++ b/fuintAdmin/src/views/member/index.vue
@@ -12,7 +12,7 @@
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
           <el-form-item label="" prop="userNo">
             <el-input
-              v-model="queryParams.userNo"
+              v-model="queryParams.name"
               placeholder="请输入会员昵称"
               clearable
               style="width: 180px;"
@@ -37,33 +37,6 @@
               <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id+''"/>
             </el-select>
           </el-form-item>
-          <el-form-item label="" prop="gradeId">
-            <el-select
-              v-model="queryParams.gradeId"
-              clearable
-              placeholder="请选择会员标签"
-            >
-              <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id+''"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="" prop="mobile">
-            <el-input
-              v-model="queryParams.mobile"
-              placeholder="请输入车牌号"
-              clearable
-              style="width: 180px;"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="" prop="gradeId">
-            <el-select
-              v-model="queryParams.gradeId"
-              clearable
-              placeholder="请选择性别"
-            >
-              <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id+''"/>
-            </el-select>
-          </el-form-item>
           <el-form-item label="" prop="mobile">
             <el-input
               v-model="queryParams.mobile"
@@ -73,33 +46,19 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="" prop="name">
-            <el-input
-              v-model="queryParams.name"
-              placeholder="请输入年龄"
-              clearable
-              style="width: 180px;"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
           <el-form-item label="" prop="gradeId">
             <el-select
-              v-model="queryParams.gradeId"
+              v-model="queryParams.userStatus"
               clearable
               placeholder="请选择状态"
             >
-              <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id+''"/>
+              <el-option v-for="grade in userStatusList"
+                         :key="grade.value"
+                         :label="grade.label"
+                         :value="grade.value"/>
             </el-select>
           </el-form-item>
-          <el-form-item label="" prop="name">
-            <el-input
-              v-model="queryParams.name"
-              placeholder="请输入余额"
-              clearable
-              style="width: 180px;"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
+
           <el-form-item label="">
             <el-date-picker
               v-model="beginTime"
@@ -115,15 +74,7 @@
               placeholder="结束日期">
             </el-date-picker>
           </el-form-item>
-          <el-form-item label="" prop="name">
-            <el-input
-              v-model="queryParams.name"
-              placeholder="请输入剩余积分"
-              clearable
-              style="width: 180px;"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
+
           <div style="float: right">
             <el-button style="background: linear-gradient( 180deg, #FF8646 0%, #FFA360 100%); border: transparent "
                        type="primary" @click="handleQuery">搜索
@@ -152,39 +103,39 @@
       </div>
       <!--    </el-card>-->
 
-      <!--    <el-card style="margin-top: 20px">-->
-      <!--      <template>-->
-      <!--        <div class="ds-dbox">-->
-      <!--          <div class="k-one">-->
-      <!--            <div class="title_">激活会员总数</div>-->
-      <!--            <div class="num-size">{{total}}</div>-->
-      <!--              <img class="r-bot-img" src="./imgs/hy-1.png" alt="">-->
-      <!--            </div>-->
+          <el-card style="margin-top: 20px">
+            <template>
+              <div class="ds-dbox">
+                <div class="k-one">
+                  <div class="title_">激活会员总数</div>
+                  <div class="num-size">{{total}}</div>
+                    <img class="r-bot-img" src="./imgs/hy-1.png" alt="">
+                  </div>
 
-      <!--          <div class="k-two">-->
-      <!--            <div class="title_">今日新增/昨日新增</div>-->
-      <!--            <div class="num-size"> {{ addNum }}/{{ yesterdayAddNum }}</div>-->
-      <!--            <img class="r-bot-img" src="./imgs/hy-2.png" alt="">-->
-      <!--          </div>-->
-      <!--          <div class="k-three">-->
-      <!--            <div class="title_">充值总人数</div>-->
-      <!--            <div class="num-size">{{rechargeTotal || 0}}</div>-->
-      <!--            <img class="r-bot-img" src="./imgs/hy-3.png" alt="">-->
-      <!--          </div>-->
-      <!--          <div class="k-four">-->
-      <!--            <div class="title_">储值总余额</div>-->
-      <!--            <div class="num-size">{{balance}}</div>-->
-      <!--            <img class="r-bot-img" src="./imgs/hy-4.png" alt="">-->
-      <!--          </div>-->
-      <!--          <div class="k-five">-->
-      <!--            <div class="title_">积分总余额</div>-->
-      <!--            <div class="num-size">{{point}}</div>-->
-      <!--            <img class="r-bot-img" src="./imgs/hy-5.png" alt="">-->
-      <!--          </div>-->
-      <!--        </div>-->
+                <div class="k-two">
+                  <div class="title_">今日新增/昨日新增</div>
+                  <div class="num-size"> {{ addNum }}/{{ yesterdayAddNum }}</div>
+                  <img class="r-bot-img" src="./imgs/hy-2.png" alt="">
+                </div>
+                <div class="k-three">
+                  <div class="title_">充值总人数</div>
+                  <div class="num-size">{{rechargeTotal || 0}}</div>
+                  <img class="r-bot-img" src="./imgs/hy-3.png" alt="">
+                </div>
+                <div class="k-four">
+                  <div class="title_">储值总余额</div>
+                  <div class="num-size">{{balance}}</div>
+                  <img class="r-bot-img" src="./imgs/hy-4.png" alt="">
+                </div>
+                <div class="k-five">
+                  <div class="title_">积分总余额</div>
+                  <div class="num-size">{{point}}</div>
+                  <img class="r-bot-img" src="./imgs/hy-5.png" alt="">
+                </div>
+              </div>
 
-      <!--      </template>-->
-      <!--    </el-card>-->
+            </template>
+          </el-card>
 
       <!--    <el-card style="margin-top: 20px">-->
 
@@ -753,6 +704,16 @@ export default {
       },
       // 文件上传信息
       fileList: [],
+      userStatusList:[
+        {
+          label: "使用中",
+          value: 0
+        },
+        {
+          label: "已注销",
+          value: 1
+        }
+      ],
 
       addMember: [],
       // 余额
@@ -789,7 +750,7 @@ export default {
         page: 1,
         pageSize: 10
       },
-      beginTime2: "",
+      beginTime2: '',
       endTime2: "",
       massSendRecordList: [],
 
@@ -819,8 +780,8 @@ export default {
       openPoint: false,
       // 日期范围
       dateRange: [],
-      beginTime: "",
-      endTime: "",
+      beginTime: new Date(),
+      endTime: new Date(),
       // 默认排序
       defaultSort: {prop: 'updateTime', order: 'descending'},
       // 表单参数
@@ -919,6 +880,7 @@ export default {
     },
     // 查询列表
     getList() {
+
       this.loading = true;
 
       let dateRange = []
diff --git a/fuintCashierWeb/src/api/handover/handover.js b/fuintCashierWeb/src/api/handover/handover.js
new file mode 100644
index 000000000..e616cee37
--- /dev/null
+++ b/fuintCashierWeb/src/api/handover/handover.js
@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+export function getHandoverApi() {
+  return request({
+    url: '/business/handoverRecord/handover',
+    method: 'get',
+    // params: query
+  })
+}
+
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
+
+
+export function getStatisticsApi(data) {
+  return request({
+    url: 'business/integral/integralOrders/statistics',
+    method: 'get',
+    params: data
+  })
+}
+
+
+
+export function getHandoverApi2() {
+  return request({
+    url: '/business/handoverRecord/handover2',
+    method: 'get',
+    // params: query
+  })
+}
+
+
+
+export function getHandoverListApi(query) {
+  return request({
+    url: '/business/handoverRecord/queryByPage',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询员工列表
+export function listStaff(query) {
+  return request({
+    url: '/business/member/staff/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addHandoverApi(data) {
+  return request({
+    url: '/business/handoverRecord',
+    method: 'post',
+    data: data
+  })
+}
+export function printGetHandoverReport(data) {
+  return request({
+    url: 'business/printer/getHandover',
+    method: 'post',
+    data: data
+  })
+}
+export function printLocallyApi(data) {
+  return request({
+    url: '/business/handoverRecord/printLocally',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/fuintCashierWeb/src/api/staff/store.js b/fuintCashierWeb/src/api/staff/store.js
index fa2bb506b..62c089df5 100644
--- a/fuintCashierWeb/src/api/staff/store.js
+++ b/fuintCashierWeb/src/api/staff/store.js
@@ -16,6 +16,14 @@ export function ljStoreList() {
   })
 }
 
+// 根据连锁店id查询店铺信息
+export function storesList() {
+  return request({
+    url: '/business/storeInformation/store/stores',
+    method: 'get'
+  })
+}
+
 // 修改店铺信息
 export function updateStore(data) {
   return request({
diff --git a/fuintCashierWeb/src/api/staff/user/user.js b/fuintCashierWeb/src/api/staff/user/user.js
index 9a4171acb..8e2f4af4c 100644
--- a/fuintCashierWeb/src/api/staff/user/user.js
+++ b/fuintCashierWeb/src/api/staff/user/user.js
@@ -1,5 +1,22 @@
 import request from '@/utils/request'
 
+// 根据手机号查询会员详细
+export function getUserPhone(data) {
+  return request({
+    url: '/business/userManager/user/phone' ,
+    method: 'post',
+    data: data
+  })
+}
+
+//注销用户
+export function logOffUsers(id) {
+  return request({
+    url: '/business/userManager/userbalance/'+id,
+    method: 'get'
+  })
+}
+
 // 查询会员列表
 export function listUser(query) {
   return request({
diff --git a/fuintCashierWeb/src/api/staff/user/usergrade.js b/fuintCashierWeb/src/api/staff/user/usergrade.js
index 7eeae693a..535981f78 100644
--- a/fuintCashierWeb/src/api/staff/user/usergrade.js
+++ b/fuintCashierWeb/src/api/staff/user/usergrade.js
@@ -9,6 +9,15 @@ export function listUserGrade(query) {
   })
 }
 
+// 查询所有会员等级列表
+export function allUserGrade() {
+  return request({
+    url: '/business/userManager/userGrade/allUserGrade',
+    method: 'get',
+  })
+}
+
+
 // 查询会员等级详细
 export function getUserGrade(id) {
   return request({
diff --git a/fuintCashierWeb/src/api/vip/vip.js b/fuintCashierWeb/src/api/vip/vip.js
new file mode 100644
index 000000000..5cf5c7219
--- /dev/null
+++ b/fuintCashierWeb/src/api/vip/vip.js
@@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+
+// 分页查询所有的订单信息
+export function getListApi(query) {
+  return request({
+    url: '/messageTemplate',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询会员标签列表
+export function listUserMassSendRecord(query) {
+  return request({
+    url: '/userMassSendRecord',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 添加会员标签
+export function addUserMassSend(data) {
+  return request({
+    url: '/userMassSend',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 删除会员标签
+export function deleteUserMassSendRecord(id) {
+  return request({
+    url: '/userMassSendRecord/'+id,
+    method: 'delete',
+  })
+}
+
+// 查询会员标签列表
+export function listUserLabel(query) {
+  return request({
+    url: '/userLabel',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/fuintCashierWeb/src/assets/images/wenhao.png b/fuintCashierWeb/src/assets/images/wenhao.png
new file mode 100644
index 000000000..f17b032f4
Binary files /dev/null and b/fuintCashierWeb/src/assets/images/wenhao.png differ
diff --git a/fuintCashierWeb/src/assets/images/wx.png b/fuintCashierWeb/src/assets/images/wx.png
new file mode 100644
index 000000000..9fdc6e915
Binary files /dev/null and b/fuintCashierWeb/src/assets/images/wx.png differ
diff --git a/fuintCashierWeb/src/assets/images/xz.png b/fuintCashierWeb/src/assets/images/xz.png
new file mode 100644
index 000000000..8b2ae966a
Binary files /dev/null and b/fuintCashierWeb/src/assets/images/xz.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
index 322634bad..326e12486 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
@@ -1,994 +1,768 @@
-<!--发票-->
+<!-- 交接班 在用的 -->
 <template>
-  <div class="app-center">
-    <div style="float: right;">
-<!--      <span style="font-size: 5px">点击下载打印服务</span>-->
-<!--      <el-button @click="downloadFile()" type="primary" icon="el-icon-download" circle></el-button>-->
+  <div class="app-containers">
 
+    <div class="tab-box">
+      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"  :key="index">
+        {{item}}
+      </div>
     </div>
-    <div id="report" ref="report" class="box-center">
-      <div class="box-title">交班统计</div>
-      <div class="box-ge" >
-        <div class="input-box">
-          <div>油站名称:</div>
-          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.storeName : '未知油站' }}</div>
-        </div>
-        <div class="input-box">
-          <div>收银员:</div>
-<!--          <div>{{ handoverList.baseInfo.realName }}</div>-->
-          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.realName : '未知姓名' }}</div>
-        </div>
-        <div class="input-box">
-          <div>交班方式:</div>
-          <el-tag size="small" >{{handoverList && handoverList.baseInfo ? handoverList.baseInfo.handoverType : '未知'}}</el-tag>
-        </div>
-        <div class="input-box">
-          <div>开始时间:</div>
-<!--          <div>{{ handoverList.baseInfo.startTime }}</div>-->
-          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.startTime : '-' }}</div>
+    <div v-if="tabindex == 0">
+      <div class="card-box" style="width: 98%;margin: 10px auto;background: #fff;box-sizing: border-box;padding-top: 15px" >
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+          <el-form-item label="" prop="status">
+            <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable>
+              <el-option  label="统一交班" value="统一交班">统一交班</el-option>
+              <el-option  label="个人交班" value="个人交班">个人交班</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="staffId">
+            <el-select v-model="queryParams.staffId" style="width: 150px" placeholder="交班员工" clearable>
+              <el-option
+                v-for="option in staffList"
+                :key="option.id"
+                :label="option.realName"
+                :value="option.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
 
-        </div>
-        <div class="input-box">
-          <div>结束时间:</div>
-<!--          <div>{{ handoverList.baseInfo.endTime }}</div>-->
-          <div>{{ handoverList && handoverList.baseInfo ? handoverList.baseInfo.endTime : '-' }}</div>
 
-        </div>
+
+          <el-form-item class="flex-container" style="float: right">
+            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-      <div class="box-ge">
-        <div class="input-box">
-          <div>当前版本:</div>
-          <div>V1.0.1</div>
+
+      <el-card style="margin-top: 20px;  height: 70vh;overflow: auto"   class="box-card">
+        <div class="title_">门店交接单</div>
+        <div class="d-s-b">
+          <div>油站名称</div>
+          <div>{{baseInfo.storeName}}</div>
         </div>
-      </div>
-      <div class="box-ge">
-        <div class="boloicon">订单汇总</div>
-        <div class="input-hui">
-          <div>类型</div>
-          <div>金额</div>
+        <div class="d-s-b">
+          <div>油站站长</div>
+          <div>{{baseInfo.realName}}</div>
         </div>
-        <div class="input-box">
-          <div>油品订单(订单)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilOrder : '0' }}</div>
-
+        <div class="d-s-b">
+          <div>交班方式</div>
+          <div>{{baseInfo.handoverType}}</div>
         </div>
-        <div class="input-box">
-          <div>油品订单(退款)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilRefund : '0' }}</div>
-
+        <div class="d-s-b">
+          <div>开始时间</div>
+          <div>{{baseInfo.startTime}}</div>
         </div>
-        <div class="input-box">
-          <div>油品订单(实收)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilPaid : '0' }}</div>
-
+        <div class="d-s-b">
+          <div>结束时间</div>
+          <div>{{baseInfo.endTime}}</div>
         </div>
-<!--        <div class="input-box">-->
-<!--          <div>油品优惠(实收)</div>-->
-<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.oilDiacount : '0' }}</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 && handoverList.orderSummary ? handoverList.orderSummary.cardOrder : '0' }}</div>
-
+        <div class="d-s-b">
+          <div>订单金额</div>
+          <div>{{orderSummary.oilOrder}}</div>
         </div>
-<!--        <div class="input-box">-->
-<!--          <div>会员储值(退款)</div>-->
-<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardRefund : '0' }}</div>-->
-
-<!--        </div>-->
-        <div class="input-box">
-          <div>会员储值(实收)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardPaid : '0' }}</div>
-
+        <div class="d-s-b">
+          <div>优惠金额</div>
+          <div>{{orderSummary.allDis}}</div>
         </div>
-        <div class="input-box">
-          <div>储值赠送(订单)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftOrder : '0' }}</div>
-
-        </div>
-<!--        <div class="input-box">-->
-<!--          <div>储值赠送(退款)</div>-->
-<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftRefund : '0' }}</div>-->
-
-<!--        </div>-->
-        <div class="input-box">
-          <div>储值赠送(实际)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.cardGiftPaid : '0' }}</div>
-
-        </div>
-
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>存油储值(订单)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelOrder : '0' }}</div>
-
-        </div>
-<!--        <div class="input-box">-->
-<!--          <div>存油储值(退款)</div>-->
-<!--          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelRefund : '0' }}</div>-->
-
-<!--        </div>-->
-        <div class="input-box">
-          <div>存油储值(实收)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.fuelPaid : '0' }}</div>
-
-        </div>
-
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>普通收款(订单)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsOrder : '0' }}</div>
-
-        </div>
-        <div class="input-box">
-          <div>普通收款(退款)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsRefund : '0' }}</div>
-
-        </div>
-        <div class="input-box">
-          <div>普通收款(实收)</div>
-          <div>￥{{ handoverList && handoverList.orderSummary ? handoverList.orderSummary.goodsPaid : '0' }}</div>
-        </div>
-      </div>
-      <div class="box-ge">
-        <div class="boloicon">退款汇总</div>
-        <div class="input-hui">
-          <div>支付方式</div>
+        <div class="d-s-b">
           <div>退款金额</div>
+          <div>{{orderSummary.oilRefund}}</div>
         </div>
-        <div class="input-box" v-for="item in paymentAggregation('all')" v-if="item.refundAmount > 0">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.refundAmount}}</div>
+        <div class="d-s-b">
+          <div>挂账金额</div>
+          <div>--</div>
         </div>
-        <el-divider></el-divider>
-        <div class="input-box" >
-          <div>合计</div>
-          <div>￥{{refundAggregateTotal}}</div>
+        <div class="d-s-b">
+          <div>会员消费</div>
+          <div>{{orderSummary.allBalanceP}}</div>
         </div>
-      </div>
-
-      <div class="box-ge">
-        <div class="boloicon">实收汇总</div>
-        <div class="input-hui">
-          <div>支付方式</div>
-          <div>金额</div>
+        <div class="d-s-b">
+          <div>实收金额</div>
+          <div>{{orderSummary.allMoney}}</div>
         </div>
-        <div class="input-box" v-for="item in paymentAggregation('all')" v-if="item.paidAmount > 0">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.paidAmount}}</div>
+        <div class="d-s-b">
+          <div>充值金额</div>
+          <div>{{orderSummary.cardPaid}}</div>
         </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalTotalOfActualReceipts}}</div>
+        <div class="d-s-b">
+          <div>充值赠送</div>
+          <div>{{orderSummary.cardGiftPaid}}</div>
         </div>
-      </div>
-
-      <div class="box-ge">
-        <div class="boloicon">油品订单</div>
-        <div class="input-hui">
-          <div>支付方式</div>
-          <div>金额</div>
+        <div class="d-s-b">
+          <div>会员总余额</div>
+          <div>{{orderSummary.points}}</div>
         </div>
-        <div class="input-box" v-for="item in paymentAggregation('oil')">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.paidAmount}}</div>
+        <div class="d-s-b">
+          <div>会员总积分</div>
+          <div>{{orderSummary.sumnum}}</div>
         </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalOilOrders}}</div>
-        </div>
-      </div>
-      <div class="box-ge">
-        <div class="boloicon">商品订单</div>
-        <div class="input-hui">
-          <div>支付方式</div>
-          <div>金额</div>
-        </div>
-        <div class="input-box" v-for="item in paymentAggregation('goods')">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalOfProductOrders}}</div>
-        </div>
-      </div>
-<!--      <div class="box-ge">-->
-<!--        <div class="boloicon">普通订单</div>-->
-<!--        <div class="input-hui">-->
-<!--          <div>支付方式</div>-->
-<!--          <div>金额</div>-->
-<!--        </div>-->
-<!--        <div class="input-box" v-for="item in paymentAggregation('goods')">-->
-<!--          <div>{{calculateThePaymentMethod(item.payType)}}</div>-->
-<!--          <div>￥{{item.paidAmount}}</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" v-for="item in paymentAggregation('fg')">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalMemberStoredValue}}</div>
-        </div>
-      </div>
-
-      <div class="box-ge">
-        <div class="boloicon">积分商城</div>
-        <div class="input-hui">
-          <div>支付方式</div>
-          <div>金额</div>
-        </div>
-        <div class="input-box" v-for="item in paymentAggregation('point')" v-if="item.paidAmount>0">
-          <div>{{calculateThePaymentMethod(item.payType)}}</div>
-          <div>￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{pointsMallStatistics}}</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" v-for="item in oilNumberStatistics()">
-          <div>{{item.oilName}}</div>
-          <div>{{item.numberOfDeals}}</div>
-          <div>{{item.oilNum}}</div>
-          <div style="text-align: right">￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalOilNumberStatistics}}</div>
-        </div>
-      </div>
-      <div class="box-ge">
-        <div class="boloicon">优惠统计</div>
-        <div class="input-hui">
-          <div>油品</div>
-          <div>金额</div>
-        </div>
-        <div class="input-box" v-for="item in oilNumberStatistics()">
-          <div>{{item.oilName}}</div>
-          <div>{{item.paidDiscount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{discountStatisticsTotal}}</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" v-for="item in greaseGunStatistics()">
-          <div>{{item.gunName}}</div>
-          <div>{{item.numberOfDeals}}</div>
-          <div>{{item.oilNum}}</div>
-          <div style="text-align: right">￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalOfOilGunStatistics}}</div>
-        </div>
-      </div>
-
-      <div class="box-ge">
-        <div class="boloicon">员工统计</div>
-        <div class="input-hui-frou">
-          <div>员工姓名</div>
-<!--          <div>笔数</div>-->
-          <div>充值(笔数/金额)</div>
-          <div>加油(笔数/金额)</div>
-          <div>商品(笔数/金额)</div>
-          <div style="text-align: right">总笔数/总金额</div>
-        </div>
-        <div class="input-box-frou" v-for="item in employeeStatistics()">
-          <div>{{item.name}}</div>
-          <div>{{item.cardN+item.fuelN}}/￥{{item.cardP+item.fuelP}}</div>
-          <div>{{item.oilN}}/￥{{item.oilP}}</div>
-          <div>{{item.goodsN}}/￥{{item.goodsP}}</div>
-          <div style="text-align: right">{{item.numberOfDeals}}/￥{{item.paidAmount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{totalOfEmployeeStatistics}}</div>
-        </div>
-      </div>
-
-
-      <div class="box-ge">
-        <div class="boloicon">挂账统计</div>
-        <el-divider>挂账详情</el-divider>
-        <div class="input-hui-frou">
-          <div>挂账单位</div>
-          <div>笔数</div>
-          <div style="text-align: right">金额</div>
-        </div>
-        <div class="input-box-frou" v-for="item in billingDetails()">
-          <div>{{item.name}}</div>
-          <div>{{item.numberOfDeals}}</div>
-          <div style="text-align: right">￥{{item.amount}}</div>
-        </div>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{statisticsOfAccountDetails}}</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>
 
 
-        <el-divider>归还详情</el-divider>
-        <div class="input-hui-frou">
-          <div>挂账单位</div>
-          <div>笔数</div>
-          <div style="text-align: right">金额</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="input-box-frou" v-for="item in returnedToTheAccount()">
-          <div>{{item.name}}</div>
-          <div>{{item.numberOfDeals}}</div>
-          <div style="text-align: right">￥{{item.amount}}</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>
-        <el-divider></el-divider>
-        <div class="input-box">
-          <div>合计</div>
-          <div>￥{{postedAccountReturnStatistics}}</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>
 
 
-    </div>
-    <div style="width: 100%; height: 100px"></div>
-    <div class="app-bottom">
-      <el-card >
-        <div class="bottom-xz">
-<!--          <div class="anniu" v-if="handoverList && handoverList.baseInfo && handoverList.baseInfo.handoverPrem == 'yqx'" @click="shift">交班</div>-->
-          <div class="anniu" @click="shift">交班</div>
-          <div class="anniu">
-            <span @click="chooseStaff()">
-              {{staff.staffName?staff.staffName:"选择员工交班"}}
-            </span>
-            <i v-if="staff.staffName" class="el-icon-close"  @click="clean()"></i>
-            </div>
-          <!-- <div class="anniu-lv">云打印</div> -->
-          <div class="anniu-lv" @click="oilOrderReport()">云打印</div>
-          <div ><el-link type="primary" @click="recording">交班记录</el-link></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>
+
       </el-card>
+      <div style="width: 98%; margin: 20px auto;display: flex;align-items: center;justify-content: center; background: #fff;box-sizing: border-box;padding: 15px " >
+        <el-button type="primary" @click="shift()">交班</el-button>
+      </div>
     </div>
-    <el-dialog :close-on-click-modal="false" width="50%" height="50%" title="选择员工" :visible.sync="openStaff"
-               append-to-body>
-      <select-staff @send-data="handleDataFromChild">
-
-      </select-staff>
+    <div v-if="tabindex == 1">
+      <HandoverRecord></HandoverRecord>
+    </div>
+    <el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
+      <!--      <detail :dataForm = "recordData"></detail>-->
+      <HandoverOnly :recordData = "recordData"></HandoverOnly>
     </el-dialog>
   </div>
 </template>
-
 <script>
-import {addHandoverApi, getHandoverApi, printLocallyApi} from "@/api/cashier/handover";
-import BigNumber from "bignumber.js";
-import {removeUserId} from "@/utils/auth";
-import { getLodop } from "@/api/LodopFuncs";
-import Vue from 'vue';
-import SelectStaff from "@/components/local/selectStaff.vue";
-import {printGetHandoverReport, rePrintOilOrderReport} from "@/api/print";
+import {
+  addHandoverApi,
+  getHandoverApi2,
+  getHandoverListApi,
+  printLocallyApi,
+  getStatisticsApi,
+  getDicts,
+  listStaff
+} from "@/api/handover/handover";
 
-    export default {
-      name: "Handover",
-      components: {SelectStaff},
-      data() {
-          return {
-            handoverList : {},
-            openStaff: false,
-            staff:{
-              staffId:'',
-              staffName:null
-            }
-          }
-        },
-      created() {
-          this.getHandover();
+import HandoverOnly from "@/views/cashier/NewComponents/HandoverOnly.vue";
+import HandoverRecord from "@/views/cashier/NewComponents/HandoverRecord.vue";
+
+export default {
+  name: "pointsCashier",
+  components: {HandoverRecord, HandoverOnly},
+
+  // dicts: ['zhzt'],
+
+  data() {
+    return {
+
+      tabs:[
+        "交接班",
+        "交班记录"
+      ],
+      value:'',
+      tabindex:0,
+      openDetail:false,
+      dataForm:{},
+      dataList:[],
+      recordData:'',
+      zhztList:'',
+      shiftHandoverList:'',
+      handoverList : {},
+      handoverData:{},
+      baseInfo:{},
+      billingDetails:[],
+      employeeStatistics:[],
+      greaseGunStatistics:[],
+      oilNumberStatistics:[],
+      orderSummary:{},
+      paymentAggregation:[],
+      returnedToTheAccount:[],
+      // base
+      queryParams: {
+
+        staffId: '',
+        status: '',
+        type: '',
+
+        page:null,
+        pageSize:null
       },
-      methods: {
-        clean() {
-          this.staff={
-            staffId:'',
-            staffName:null
-          }
-          this.getHandover()
-        },
-        // 选择员工
-        chooseStaff() {
-          this.openStaff = true
-        },
-        handleDataFromChild(data) {
-          this.openStaff = false
+      loading: false,
+      dateRange: [new Date(),new Date()],
+      beginTime:new Date(),
+      endTime:new Date(),
+      defaultSort: {prop: 'createTime', order: 'descending'},
 
-          this.staff.staffId = data.mtStaffId,
-          this.staff.staffName = data.realName
-          console.log("realName",this.staff.staffName)
-          this.getHandover();
-        },
-        getHandover() {
+      total: 0,
+      staffList:[],
+      statisticsForm: {
+        num:0,
+        exchangeQuantity:0,
+        integral:0,
+        amount:0
+      }
+    }
+  },
+  created() {
+    this.getList();
+    this.getHandover();
+    this.getStatistics();
+    this.getStatus();
+    this.getStaffList();
+  },
+  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)
+      })
+    },
 
-          getHandoverApi({staffId: this.staff.staffId}).then(res=>{
-            this.handoverList = res.data;
-            console.log("this.handoverList",this.handoverList)
-            // this.staff={
-            //   staffId:'',
-            //   staffName:null
-            // }
-          })
-        },
-        orderSummary() {
-          // 汇总
-        },
-        paymentAggregation(flag) {
-          let count = [];
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            this.handoverList.paymentAggregation.forEach(res=> {
-              if (flag == 'fg') {
-                if (res.flag == "card" || res.flag == "fuel") {
-                  let flag2 = false;
-                  count.forEach(coun => {
-                    if (res.payType === coun.payType) {
-                      coun.paidAmount += res.paidAmount;
-                      flag2 = true;
-                    }
-                  });
-                  if (!flag2) {
-                    // 创建新的对象，以防修改原始数据
-                    let newRes = { ...res };
-                    count.push(newRes);
-                  }
-                }
-              }else if (res.flag == flag) {
-                count.push(res)
-              }
-            })
-          }
-          return count;
-        },
+    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
 
-        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 'APPLET_CODE':
-              return '会员码'
-              break;
-            case 'oilCard':
-              return '油卡'
-              break;
-          }
-          return '未知'
-        },
-        oilNumberStatistics() {
-          let count = [];
-          if (this.handoverList && this.handoverList.oilNumberStatistics) {
-            return this.handoverList.oilNumberStatistics
-          }
-          return count;
-        },
-        greaseGunStatistics() {
-          let count = [];
-          if (this.handoverList && this.handoverList.greaseGunStatistics) {
-            return this.handoverList.greaseGunStatistics
-          }
-          return count;
-        },
-        employeeStatistics() {
-          let count = [];
-          if (this.handoverList && this.handoverList.employeeStatistics) {
-            return this.handoverList.employeeStatistics
-          }
-          return count;
-        },
-        billingDetails() {
-          let count = [];
-          if (this.handoverList && this.handoverList.billingDetails) {
-            return this.handoverList.billingDetails
-          }
-          return count;
-        },
-        returnedToTheAccount() {
-          let count = [];
-          if (this.handoverList && this.handoverList.returnedToTheAccount) {
-            return this.handoverList.returnedToTheAccount
-          }
-          return count;
-        },
-        // 交班记录
-        recording() {
-          this.$router.push({
-            path:'/HandoverDetails',
-            query:{
-              id:9
-            }
-          });
-        },
-        oilOrderReport () {
-          printGetHandoverReport(this.handoverList).then(res=>{
+      })
+    },
+    getStatistics() {
+      getStatisticsApi().then(res=>{
+        this.statisticsForm = res.data
+      })
+      console.log("123123123",this.statisticsForm)
+    },
 
-          })
-        },
-
-          async printLocally() {
-          //初始化打印函数
-          let LODOP = getLodop(); // 初始化打印
-          LODOP.PRINT_INIT();
-          var bodyStyle = `<style>
-            .input-box{
-                width: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                font-size: 14px;
-                margin: 5px 0px;
-              }
-             .box-ge{
-                border-bottom: 1px solid #000000 ;
-                box-sizing: border-box;
-                padding: 10px;
-              }
-              .box-title{
-                font-size: 18px;
-                text-align: center;
-                align-items: center;
-                margin-top: 15px;
-              }
-              .input-hui{
-                width: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                font-size: 14px;
-                margin: 15px 0px;
-                background: #b2b2b2;
-                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: #b2b2b2;
-                box-sizing: border-box;
-                padding: 5px 0px;
-                div{
-                  width: 25%;
-                  text-align: left;
-                }
-              }
-              .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;
-                }
-              }
-            </style>
-            `
-          var fromHtml = bodyStyle+this.$refs.report.innerHTML
-
-
-          LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);
-
-          LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW",true);
-
-          // LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
-          // let preview = LODOP.PREVIEW();
-          // console.log("preview",preview);
-          LODOP.PRINT();
-
-
-        },
-
-        downloadFile() {
-          window.location.href = process.env.VUE_APP_SERVER_URL+"business/handoverRecord/downloadFile";
-
-        },
-
-
-        // 交班
-        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();
-            })
-            this.getHandover();
-            //
-            // this.$message({
-            //   type: 'success',
-            //   message: '删除成功!'
-            // });
-          }).catch(() => {
-            this.$message({
-              type: 'info',
-              message: '已取消交班'
-            });
-          });
-        }
-      },
-      computed:{
-        //退款汇总合计
-        refundAggregateTotal() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "all"){
-                num = num.plus(new BigNumber(res.refundAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        //实收汇总合计
-        totalTotalOfActualReceipts() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "all") {
-                num = num.plus(new BigNumber(res.paidAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        //油品订单合计
-        totalOilOrders() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "oil") {
-                num = num.plus(new BigNumber(res.paidAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        //商品订单合计
-        totalOfProductOrders() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "goods") {
-                num = num.plus(new BigNumber(res.paidAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        //会员储值合计
-        totalMemberStoredValue() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "card" || res.flag == "fuel") {
-                // console.log("222",res)
-
-                num = num.plus(new BigNumber(res.paidAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        // 积分商城统计
-        pointsMallStatistics() {
-          if (this.handoverList && this.handoverList.paymentAggregation) {
-            let num = new BigNumber(0);
-            this.handoverList.paymentAggregation.forEach(res => {
-              if (res.flag == "point") {
-                num = num.plus(new BigNumber(res.paidAmount));
-              }
-            });
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0.00;
-        },
-        //油号统计合计
-        totalOilNumberStatistics() {
-          if (this.handoverList && this.handoverList.oilNumberStatistics) {
-            let num = new BigNumber(0);
-            this.handoverList.oilNumberStatistics.forEach(res=>{
-              num = num.plus(new BigNumber(res.paidAmount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        },
-        //优惠统计合计
-        discountStatisticsTotal() {
-          if (this.handoverList && this.handoverList.oilNumberStatistics) {
-            let num = new BigNumber(0);
-            this.handoverList.oilNumberStatistics.forEach(res=>{
-              num = num.plus(new BigNumber(res.paidDiscount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        },
-        //油枪统计合计
-        totalOfOilGunStatistics() {
-          if (this.handoverList && this.handoverList.greaseGunStatistics) {
-            let num = new BigNumber(0);
-            this.handoverList.greaseGunStatistics.forEach(res=>{
-              num = num.plus(new BigNumber(res.paidAmount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        },
-        //员工统计合计
-        totalOfEmployeeStatistics() {
-          if (this.handoverList && this.handoverList.employeeStatistics) {
-            let num = new BigNumber(0);
-            this.handoverList.employeeStatistics.forEach(res=>{
-              num = num.plus(new BigNumber(res.paidAmount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        },
-        // 挂账详情统计
-        statisticsOfAccountDetails(){
-          if (this.handoverList && this.handoverList.billingDetails) {
-            let num = new BigNumber(0);
-            this.handoverList.billingDetails.forEach(res=>{
-              num = num.plus(new BigNumber(res.amount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        },
-        // 挂账归还统计
-        postedAccountReturnStatistics(){
-          if (this.handoverList && this.handoverList.returnedToTheAccount) {
-            let num = new BigNumber(0);
-            this.handoverList.returnedToTheAccount.forEach(res=>{
-              num = num.plus(new BigNumber(res.amount));
-            })
-            return Number(num.toString()); // 转换为数字
-          }
-          return 0;
-        }
+    // 获取支付方式
+    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.baseInfo && this.baseInfo.handoverOut == 'jbtc') {
+        flag = true
+      } else {
+        msg = '确定交班？'
       }
 
-    }
+      this.$confirm(msg, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let recordData = this.handoverData
+        let handoverRecord = {
+          startTime: this.baseInfo.startTime,
+          recordData: JSON.stringify(recordData),
+          type: 0,
+          status: this.baseInfo.handoverType,
+          staffId: this.queryParams.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
+        }
+      });
+    },
+    billingDetails1() {
+      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">
-#report {
-
-  /* 打印时缩放，防止页面溢出 */
-  //zoom: 0.6;
+.app-containers {
+  width: 100%;
+  height: 100vh;
+  background: #f6f8f9;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.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: 640px;
+  margin: 0 auto;
+  margin-bottom: 15px;
 
-  @media print {
-    @page {
-      //landscape横向,portrait;纵向，如果不设置，则页面有横向和纵向的选择框
-      // size: A4 portrait;
-      //国家标准公文页边距 GB/T 9704-2012
-      // margin: 3.7cm 2.6cm 3.5cm;
-      //margin: 0;
-      //margin: -1mm;
-      //zoom: 0.1;
-
-      /* size: A4 landscape; size: landscape横向，size: portrait;纵向，如果不设置，则页面有横向和纵向的选择框 */
-    }
-    //.cover{
-    //  display: block;
-    //}
-    //
+}
+.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;
 
-  .app-center{
-    width: 100%;
+}
+.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;
 
-    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;
-  }
+}
+.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>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetailsInfo.vue b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetailsInfo.vue
new file mode 100644
index 000000000..6af263555
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverDetailsInfo.vue
@@ -0,0 +1,701 @@
+<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 {getHandoverListApi, printLocallyApi,getStatisticsApi,getDicts,listStaff} from "@/api/handover/handover";
+import HandoverOnly from "@/views/cashier/NewComponents/HandoverOnly.vue";
+import HandoverRecord from "@/views/cashier/NewComponents/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>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue
index 19939cd48..494d36c27 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverOnly.vue
@@ -1,7 +1,7 @@
 <!--发票-->
 <template>
   <div class="app-center">
-    <el-button style="float: left ;margin-left: 5px"  size="mini"  type="primary" @click="oilOrderReport()"  plain>打印交班单</el-button>
+    <el-button style="float: left ;margin-left: 5px"  size="mini"  type="primary" @click="printLocally()"  plain>打印交班单</el-button>
 
     <div  id="report" ref="report"  class="box-center">
       <div class="box-title">
@@ -174,7 +174,6 @@
           <div>支付方式</div>
           <div>金额</div>
         </div>
-<!--        {{paymentAggregation('oil')   }}-->
         <div class="input-box" v-for="item in paymentAggregation('oil')">
           <div>{{calculateThePaymentMethod(item.payType)}}</div>
           <div>￥{{item.paidAmount}}</div>
@@ -372,10 +371,9 @@
 </template>
 
 <script>
-import {printLocallyApi,addHandoverApis} from "@/api/cashier/handover";
+import { printGetHandoverReport} from "@/api/handover/handover";
 import BigNumber from "bignumber.js";
 import {getLodop} from "@/api/LodopFuncs";
-import {printGetHandoverReport} from "@/api/print";
 
     export default {
       name: "HandoverOnly",
@@ -390,16 +388,23 @@ import {printGetHandoverReport} from "@/api/print";
       created() {
         console.log("12312231",this.recordData)
 
-        this.handoverList = JSON.parse(this.recordData)
-        // this.getHandover();
+        // this.handoverList = JSON.parse(this.recordData)
+        this.getHandover();
       },
       methods: {
-        oilOrderReport () {
+        printLocally() {
           printGetHandoverReport(this.handoverList).then(res=>{
 
           })
         },
-        printLocally() {
+        getHandover() {
+          getHandoverApi().then(res=>{
+            this.handoverList = res.data;
+            console.log("this.handoverList",this.handoverList)
+          })
+        },
+
+        printLocally1() {
           // const printHTML = document.querySelector('#report').innerHTML
           // // 将打印的区域赋值，进行打印
           // window.document.body.innerHTML = printHTML
@@ -480,12 +485,6 @@ import {printGetHandoverReport} from "@/api/print";
           // console.log("preview",preview);
           LODOP.PRINT();
         },
-        // getHandover() {
-        //   getHandoverApi().then(res=>{
-        //     this.handoverList = res.data;
-        //     console.log("this.handoverList",this.handoverList)
-        //   })
-        // },
 
         getList(){
         getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/HandoverRecord.vue b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverRecord.vue
new file mode 100644
index 000000000..b191cb976
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/HandoverRecord.vue
@@ -0,0 +1,282 @@
+<script>
+import {listStaff,getHandoverListApi} from "@/api/handover/handover";
+import HandoverDetailsInfo from "@/views/cashier/NewComponents/HandoverDetailsInfo.vue";
+
+export default {
+  name: "HandoverRecord",
+  components: {HandoverDetailsInfo},
+  data() {
+    return {
+      // 查看详情
+      openSeeDetails:false,
+      // 交易明细
+      openTransactionDetail:false,
+      // 商品汇总
+      openGoodsSum:false,
+      tabs:[
+        "交接班",
+        "交班记录"
+      ],
+      value:'',
+      tabindex:0,
+      openDetail:false,
+      dataForm:{},
+      dataList:[],
+      recordData:'',
+      zhztList:'',
+      shiftHandoverList:'',
+      tableData: [{
+        date: '--',
+      }],
+      queryParams: {
+
+        status: '',
+        type: '',
+
+        page:null,
+        pageSize:null
+      },
+      loading: false,
+      dateRange: [new Date(),new Date()],
+      beginTime:new Date(),
+      endTime:new Date(),
+      defaultSort: {prop: 'createTime', order: 'descending'},
+
+      total: 0,
+      staffList:[],
+      oilNumberStatistics:[],
+      goodsNumberStatistics:[],
+      IntegerNumberStatistics:[],
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    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
+        this.dataList.forEach(res=>{
+          let data = JSON.parse(res.recordData)
+          let orderSummary = data.orderSummary
+          res.oilOrder = orderSummary.oilOrder?orderSummary.oilOrder:'0' // 订单金额
+          res.allDis = orderSummary.allDis?orderSummary.allDis :'0'    // 优惠金额
+          res.allMoney = orderSummary.allMoney?orderSummary.allMoney :'0'        // 实收金额
+          res.oilRefund = orderSummary.oilRefund?orderSummary.oilRefund :'0'       // 退款金额
+        })
+      })
+    },
+    getHandoverData(data) {
+      JSON.parse(this.data)
+    },
+    handleQuery(){
+      this.getList();
+
+    },
+    resetQuery(){
+      this.queryParams = {
+        giftName: '',
+        status: '',
+        mobile: '',
+        orderNumber: '',
+        page:1,
+        pageSize:10
+      },
+        this.dateRange = []
+      this.beginTime = "";
+      this.endTime = ""
+      this.getList();
+    },
+    getStaffList() {
+      listStaff(this.addDateRange({  page: 1,
+        pageSize: 10000})).then(response => {
+          this.staffList = response.data.records;
+
+        }
+      );
+    },
+    transactionDetailMethod2(data) {
+      console.log("transactionDetailMethod2",data)
+      this.openGoodsSum = true
+      let info = JSON.parse(data.recordData);
+      this.oilNumberStatistics = info.oilNumberStatistics;
+      this.goodsNumberStatistics = info.goodsNumberStatistics;
+      this.IntegerNumberStatistics = info.IntegerNumberStatistics;
+      console.in
+      console.log("data",data)
+    },
+    openSeeDetailsMethods(data) {
+      this.openSeeDetails = true;
+      console.log("data")
+      this.recordData = data.recordData
+    },
+    transactionDetailMethod(data) {
+      console.log("transactionDetailMethod",data)
+      this.$router.push({
+        name: 'handover-info',
+        params: {
+          staffId : data.staffId,
+          btime : data.startTime,
+          etime : data.endTime,
+        }
+
+        //   PinventoryId: data.id,
+        //   PorderNumber: data.orderNumber,
+        //   PorderDate: data.orderDate,
+        //   PapprovalStatus: data.approvalStatus,
+        //   PcreataByName: data.createByName
+        // },
+
+      });
+    }
+  }
+}
+</script>
+
+<template>
+<div class="">
+  <div class="table-boxs">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
+      <el-form-item label="" prop="status">
+        <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable>
+          <el-option  label="统一交班" value="统一交班">统一交班</el-option>
+          <el-option  label="个人交班" value="个人交班">个人交班</el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="" prop="staffId">
+        <el-select v-model="queryParams.staffId" style="width: 150px" placeholder="交班员工" clearable>
+          <el-option
+            v-for="option in staffList"
+            :key="option.id"
+            :label="option.realName"
+            :value="option.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="">
+        <el-date-picker
+          v-model="beginTime"
+          style="width: 140px"
+          type="date"
+          placeholder="交易开始日期">
+        </el-date-picker>
+        至
+        <el-date-picker
+          v-model="endTime"
+          style="width: 140px"
+          type="date"
+          placeholder="交易结束日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item class="flex-container" style="float: right">
+        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="dataList" border style="width: 100%">
+      <el-table-column type="index" width="50" align="center" label="序号"/>
+      <el-table-column width="100" align="center" prop="staffName" label="交班人员"></el-table-column>
+      <el-table-column width="120" align="center" prop="status" label="交班方式"></el-table-column>
+      <el-table-column align="center" prop="startTime" label="开始时间"></el-table-column>
+      <el-table-column align="center" prop="endTime" label="结束时间"></el-table-column>
+      <el-table-column align="center" prop="oilOrder" label="订单金额" width="80"></el-table-column>
+      <el-table-column align="center" prop="allDis" label="优惠金额" width="80"></el-table-column>
+      <el-table-column align="center" prop="allMoney" label="实收金额" width="80"></el-table-column>
+      <el-table-column align="center" prop="oilRefund" label="退款金额" width="80"></el-table-column>
+      <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
+      <el-table-column label="操作" align="center"  fixed='right'>
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="openSeeDetailsMethods(scope.row)">查看详情</el-button>
+          <el-button size="mini" type="text" @click="transactionDetailMethod(scope.row)">交易明细</el-button>
+          <el-button size="mini" type="text" @click="transactionDetailMethod2(scope.row)">商品汇总</el-button>
+          <el-button size="mini" type="text">打印</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+  <el-dialog title="查看详情" :visible.sync="openSeeDetails" width="600px" append-to-body :close-on-click-modal="false">
+    <HandoverDetailsInfo :recordData="recordData"></HandoverDetailsInfo>
+  </el-dialog>
+
+<!--  <el-dialog title="交易明细" :visible.sync="openTransactionDetail" width="600px" append-to-body :close-on-click-modal="false">-->
+
+<!--  </el-dialog>-->
+  <el-dialog title="商品汇总" :visible.sync="openGoodsSum" width="600px" append-to-body :close-on-click-modal="false">
+      <div>
+        <div>油品交易信息</div>
+        <div>
+          <el-table :data="oilNumberStatistics" style="width: 100%" border>
+            <el-table-column align="center" prop="oilName" label="油品油号" ></el-table-column>
+            <el-table-column align="center" prop="oilNum" label="销售数量" ></el-table-column>
+            <el-table-column align="center" prop="orderAmount" label="订单金额" ></el-table-column>
+            <el-table-column align="center" prop="paidAmount" label="实收金额" ></el-table-column>
+          </el-table>
+        </div>
+      </div>
+    <div>
+      <div>便利店交易信息</div>
+      <div>
+        <el-table :data="goodsNumberStatistics" style="width: 100%" border>
+          <el-table-column align="center" prop="goodsName" label="商品名称" ></el-table-column>
+          <el-table-column align="center" prop="goodsNumber" label="销售数量" ></el-table-column>
+          <el-table-column align="center" prop="goodsAmount" label="订单金额" ></el-table-column>
+          <el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div>
+      <div >积分商城兑换信息</div>
+      <div>
+        <el-table :data="IntegerNumberStatistics" style="width: 100%" border>
+          <el-table-column align="center" prop="giftName" label="商品名称" ></el-table-column>
+          <el-table-column align="center" prop="exchangeQuantity" label="兑换数量" ></el-table-column>
+          <el-table-column align="center" prop="integrals" label="消耗积分" ></el-table-column>
+          <el-table-column align="center" prop="amount" label="实收金额" ></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </el-dialog>
+</div>
+</template>
+
+<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;
+
+}
+.table-boxs{
+  border-radius: 8px;
+  width: 98%;
+  background: #fff;
+  margin: 25px auto;
+  box-sizing: border-box;
+
+  padding: 15px;
+}
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
index 450fca281..f469496b0 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
@@ -1,108 +1,1387 @@
- <!--会员-->
 <template>
-  <div class="app-center">
-    <el-card class="box-card">
-        <el-radio-group v-model="radio1">
-          <el-radio-button label="会员列表"></el-radio-button>
-          <el-radio-button label="余额变动记录"></el-radio-button>
-        </el-radio-group>
-    </el-card>
+  <div class="app-container">
+    <div class="tab-box">
+      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
+           :key="index">
+        {{ item.name }}
+      </div>
+    </div>
 
-      <vipList v-if="radio1 == '会员列表' "></vipList>
-      <balanceList v-if="radio1 == '余额变动记录' "></balanceList>
+    <div class="cot-box" v-if="tabindex==0">
+      <div style="display: flex;align-items: center;justify-content: space-between">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+          <el-form-item label="" prop="userNo">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入会员昵称"
+              clearable
+              style="width: 180px;"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="userNo">
+            <el-input
+              v-model="queryParams.userNo"
+              placeholder="请输入会员号"
+              clearable
+              style="width: 180px;"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="gradeId">
+            <el-select
+              v-model="queryParams.gradeId"
+              clearable
+              placeholder="请选择会员等级"
+            >
+              <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id+''"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="" prop="mobile">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入会员手机号"
+              clearable
+              style="width: 180px;"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="" prop="gradeId">
+            <el-select
+              v-model="queryParams.userStatus"
+              clearable
+              placeholder="请选择状态"
+            >
+              <el-option v-for="grade in userStatusList"
+                         :key="grade.value"
+                         :label="grade.label"
+                         :value="grade.value"/>
+            </el-select>
+          </el-form-item>
 
+          <el-form-item label="">
+            <el-date-picker
+              v-model="beginTime"
+              style="width: 160px"
+              type="date"
+              placeholder="开始日期">
+            </el-date-picker>
+            至
+            <el-date-picker
+              v-model="endTime"
+              style="width: 160px"
+              type="date"
+              placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+
+          <div style="float: right">
+            <el-button style="background: linear-gradient( 180deg, #FF8646 0%, #FFA360 100%); border: transparent "
+                       type="primary" @click="handleQuery">搜索
+            </el-button>
+            <el-button @click="resetQuery">重置</el-button>
+            <!--          <el-button type="primary" @click="handleAdd" v-hasPermi="['member:index:add']" >新增</el-button>-->
+            <el-button type="primary" @click="addOne"
+                       v-hasPermi="['member:index:add']"
+
+            >新增会员
+            </el-button>
+            <el-button type="primary" @click="addMult"
+                       v-hasPermi="['member:index:add']"
+
+            >批量新增
+            </el-button>
+            <el-button type="primary" @click="handleMassSend"
+                       v-hasPermi="['member:index:add']"
+
+            >会员群发
+            </el-button>
+          </div>
+
+
+        </el-form>
+      </div>
+      <!--    </el-card>-->
+
+      <el-card style="margin-top: 20px">
+        <template>
+          <div class="ds-dbox">
+            <div class="k-one">
+              <div class="title_">激活会员总数</div>
+              <div class="num-size">{{total}}</div>
+              <img class="r-bot-img" src="./imgs/hy-1.png" alt="">
+            </div>
+
+            <div class="k-two">
+              <div class="title_">今日新增/昨日新增</div>
+              <div class="num-size"> {{ addNum }}/{{ yesterdayAddNum }}</div>
+              <img class="r-bot-img" src="./imgs/hy-2.png" alt="">
+            </div>
+            <div class="k-three">
+              <div class="title_">充值总人数</div>
+              <div class="num-size">{{rechargeTotal || 0}}</div>
+              <img class="r-bot-img" src="./imgs/hy-3.png" alt="">
+            </div>
+            <div class="k-four">
+              <div class="title_">储值总余额</div>
+              <div class="num-size">{{balance}}</div>
+              <img class="r-bot-img" src="./imgs/hy-4.png" alt="">
+            </div>
+            <div class="k-five">
+              <div class="title_">积分总余额</div>
+              <div class="num-size">{{point}}</div>
+              <img class="r-bot-img" src="./imgs/hy-5.png" alt="">
+            </div>
+          </div>
+
+        </template>
+      </el-card>
+
+      <!--    <el-card style="margin-top: 20px">-->
+
+      <div style="height: 58vh;overflow: auto;margin-top: 15px">
+        <el-table ref="tables" v-loading="loading" :data="list" border
+                  @selection-change="handleSelectionChange" :default-sort="defaultSort"
+                  @sort-change="handleSortChange">
+          <el-table-column type="index" width="50" align="center" label="序号"/>
+          <el-table-column label="会员名称" align="center" prop="name" width="200">
+            <template slot-scope="scope">
+              <span style="color: #fe8c4a;cursor: pointer  "
+                    @click="goDedi(scope.row.id)">{{ scope.row.name ? scope.row.name : "--" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="会员号" align="center" prop="userNo" width="100"/>
+          <el-table-column label="会员等级" align="center" prop="gradeId" width="80">
+            <template slot-scope="scope">
+              <span>{{ scope.row.gradeId ? getName(allUserGrade, scope.row.gradeId) : '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="会员标签" align="center" prop="userLabelName" width="80">
+            <template slot-scope="scope">
+              <span>{{ scope.row.userLabelName || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="车牌号" align="center" prop="carNo" width="80">
+            <template slot-scope="scope">
+              <span>{{ scope.row.carNo || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="手机号" align="center" prop="mobile" width="110">
+            <template slot-scope="scope">
+              <span>{{ scope.row.mobile ? scope.row.mobile : '-' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="生日" align="center" prop="birthday" width="110">
+            <template slot-scope="scope">
+              <span>{{ scope.row.birthday || '--' }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" align="center" prop="userStatus">
+            <template slot-scope="scope">
+              <div v-if="scope.row.userStatus == '0' " style="color: #00CAFF;">使用中</div>
+              <div v-else style="color: #F44522">已注销</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="充值次数" align="center" prop="rechargeNum">
+            <template slot-scope="scope">
+              <div>{{ scope.row.rechargeNum || 0 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="余额（元）" align="center" prop="cardBalance">
+            <template slot-scope="scope">
+              <div>{{ scope.row.cardBalance ? scope.row.cardBalance.toFixed(2) : 0 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="已使用金额（元）" align="center" prop="usedAmount">
+            <template slot-scope="scope">
+              <div>{{ scope.row.usedAmount || 0 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="剩余积分" align="center" prop="points">
+            <template slot-scope="scope">
+              <div><span>{{ scope.row.points ? scope.row.points : 0 }}</span></div>
+            </template>
+          </el-table-column>
+          <el-table-column label="已使用积分" align="center" prop="points">
+            <template slot-scope="scope">
+              <div><span>{{ scope.row.usedPoints || 0 }}</span></div>
+            </template>
+          </el-table-column>
+          <el-table-column label="成长值" align="center" prop="growthValue">
+            <template slot-scope="scope">
+              <div>{{ scope.row.growthValue || '0' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" width="160" prop="balCreateTime"/>
+          <el-table-column label="操作" align="center" width="150" fixed='right'>
+            <template slot-scope="scope">
+              <el-button
+                v-if="scope.row.userStatus == '0'"
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+              >修改
+              </el-button>
+              <el-button
+                v-if="scope.row.userStatus == '0'"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleLogOff(scope.row)"
+              >会员注销
+              </el-button>
+              <el-button
+                v-if="scope.row.userStatus == '1'"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.page"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <div class="cot-box" v-if="tabindex==1">
+      <div>
+        <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="68px">
+
+          <el-form-item label="" prop="activityName" style="width: 180px">
+            <el-input
+              v-model="queryParams2.activityName"
+              placeholder="请输入群发名称"
+              clearable
+              @keyup.enter.native="handleQuery1"></el-input>
+          </el-form-item>
+          <el-form-item label="" prop="groupName" style="width: 180px">
+            <el-select v-model="queryParams2.status" placeholder="请选择">
+              <el-option label="已发送" value="0"></el-option>
+              <el-option label="发送失败" value="1"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="">
+            <el-date-picker
+              v-model="beginTime2"
+              style="width: 160px"
+              type="date"
+              placeholder="开始日期">
+            </el-date-picker>
+            至
+            <el-date-picker
+              v-model="endTime2"
+              style="width: 160px"
+              type="date"
+              placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item style="float: right">
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery1">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery1">重置</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+      <!--      -->
+      <div style="height: 68vh;overflow: auto">
+        <el-table
+          :data="massSendRecordList"
+          border
+          style="width: 100%">
+          <el-table-column type="index" width="50" align="center" label="序号"/>
+          <el-table-column prop="activityName" label="活动名称" width="180">
+            <template slot-scope="scope">
+              <span>{{ scope.row.activityName || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="sendGift" label="群发礼品">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sendGift || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="sendWay" label="群发方式">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sendWay || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="massContent" label="群发内容" width="220">
+            <template slot-scope="scope">
+              <span>{{ scope.row.massContent || 0 }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="userNum" label="群发会员数量" width="100">
+            <template slot-scope="scope">
+              <span>{{ scope.row.userNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="successNum" label="成功数量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.successNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="failNum" label="失败数量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.failNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态">
+            <template slot-scope="scope">
+              <div v-if="scope.row.status == 0" style="color: #0DC291">已发送</div>
+              <div v-if="scope.row.status == 1" style="color: #F44522">发送失败</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="address" label="已领取数量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.userNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="address" label="已核销数量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.userNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="address" label="未核销数量">
+            <template slot-scope="scope">
+              <span>{{ scope.row.userNum || 0 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="accountName" label="操作人员"></el-table-column>
+          <el-table-column prop="createTime" label="群发时间" width="160"></el-table-column>
+          <el-table-column align="center" label="操作" width="120">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="handleDelete1(scope.row)"
+              >删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+        v-show="total2>0"
+        :total="total2"
+        :page.sync="queryParams2.page"
+        :limit.sync="queryParams2.pageSize"
+        @pagination="getList1"
+      />
+    </div>
+
+    <!--    添加会员信息，选择是否批量录入-->
+    <el-dialog :title="title" width="40%" :visible.sync="openUser" append-to-body>
+      <el-alert
+        type="info"
+        :closable="false">
+        <p v-for="(item,index) in addMember" :id="index">
+          {{ item }}
+        </p>
+      </el-alert>
+      <div style="margin: 10px 0">
+        <el-button type="primary"
+                   icon="el-icon-edit-outline" @click="addOne" round>录入单个会员
+        </el-button>
+        <el-button type="primary"
+                   icon="el-icon-connection" @click="addMult" round>批量导入会员
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :close-on-click-modal="false" :title="title" width="30%" :visible.sync="open" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入会员名称" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="手机号" prop="mobile">
+              <el-input v-model="form.mobile" placeholder="请输入手机号" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="性别" prop="sex">
+              <div class="d-s">
+                <div class="icon-type" v-for="(item,index) in sexTypelist" :key="index"
+                     :class="{ 'acvtive1' : index === tindex }" @click="Typeindex(index)">
+                  <img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
+                  <img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
+                  {{ item }}
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员号" prop="userNo">
+              <el-input v-model="form.userNo" :disabled="form.id" placeholder="请输入会员号，为空系统将自动分配" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员等级" prop="gradeId">
+              <el-select
+                v-model="form.gradeId"
+                placeholder="请选择会员等级"
+                style="width: 100%"
+              >
+                <el-option v-for="grade in userGradeList" :key="grade.id+''" :label="grade.name" :value="grade.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员标签" prop="userLabelId">
+              <el-select
+                multiple
+                v-model="form.userLabelId"
+                placeholder="请选择会员标签（多选）"
+                style="width: 100%"
+              >
+                <el-option v-for="(item,index) in userLabelList" :key="index" :label="item.labelName"
+                           :value="item.id+''"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员生日" prop="birthday">
+              <el-date-picker
+                v-model="form.birthday"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="请选择日期">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="车牌号" prop="carNo">
+              <el-input v-model="form.carNo" placeholder="请输入车牌号" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="所属机构" prop="storeId" v-if="form.id">
+              <el-select
+                v-model="form.mubStoreId"
+                placeholder="请选择所属机构"
+                style="width: 100%"
+              >
+                <el-option v-for="(item,index) in storeList" :key="index" :label="item.name" :value="item.id"/>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="身份证号" prop="idcard">
+              <el-input v-model="form.idcard" placeholder="请输入身份证号" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="初始积分" prop="points" v-if="!form.id">
+              <el-input v-model="form.points" placeholder="请输入会员初始积分"
+                        maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="初始成长值" prop="growthValue" v-if="!form.id">
+              <el-input v-model="form.growthValue" placeholder="请输入会员初始成长值"
+                        maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="储值余额" prop="cardBalance" v-if="!form.id">
+              <el-input v-model="form.cardBalance" placeholder="请输入储值卡初始余额"
+                        maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="会员状态" prop="userStatus">
+              <el-switch
+                v-model="form.userStatus"
+                active-value="0"
+                inactive-value="1"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :close-on-click-modal="false" :title="title" width="30%" :visible.sync="openMassSend" append-to-body>
+      <el-form ref="form1" :model="form1" :rules="rules1" label-width="100px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="群发名称" prop="name">
+              <el-input v-model="form1.name" placeholder="请输入群发名称" maxlength="30"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="群发方式" prop="sendWay">
+              <div style="display: flex">
+                <el-checkbox-group v-model="form1.sendWay">
+                  <el-checkbox label="短信消息"></el-checkbox>
+                </el-checkbox-group>
+                <el-tooltip class="item" effect="light" content="仅对有手机号的会员进行群发" placement="right">
+                  <img style="width: 16px;height: 16px;margin-top: 9px;margin-left: 10px"
+                       src="@/assets/images/wenhao.png">
+                </el-tooltip>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="群发礼品" prop="senfGift">
+              <el-checkbox-group v-model="form1.senfGift">
+                <el-checkbox label="积分"></el-checkbox>
+                <el-checkbox label="优惠券"></el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="短信模板" prop="messageId" v-if="title != '修改会员'">
+              <el-select v-model="form1.messageId" placeholder="请选择短信模板名称" style="width: 100%">
+                <el-option v-for="(item,index) in messageList" :key="index" :label="item.name"
+                           :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="群发会员数量">
+          {{ form1.sendUserNum }}
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm1">确 定</el-button>
+        <el-button @click="openMassSend = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!--    批量录入会员信息-->
+    <el-dialog :title="title" :visible.sync="openUpload" append-to-body>
+      <div style="height: 60px;line-height: 30px">
+        <div> 第一步: 下载示例模板,按照模板填写会员数据,手机号为必填项</div>
+        <a style="margin-left: 50px;color: #00afff"
+           href="/fuint-application/excel/export"> 会员示例模板.xlsx </a>
+      </div>
+      <div style="margin: 20px 0">
+        <div>第二步: 选择用户数据上传并导入会员</div>
+        <el-upload
+          class="upload-demo"
+          v-loading="uploading"
+          action="/fuint-application/excel/import"
+          :headers="headers"
+          :limit="1"
+          :on-change="handleChange"
+          style="margin-left: 50px"
+          :file-list="fileList">
+          <el-button size="small" type="success" icon="el-icon-upload">点击上传</el-button>
+          <div slot="tip">只能上传xls/xlsx文件，单次最大5000行会员数据且不超过1M 超出请分文件处理</div>
+        </el-upload>
+        <!--        <el-button type="primary" round @click="importUser">主要按钮</el-button>-->
+      </div>
+    </el-dialog>
+
+    <!--    批量导入结果-->
+    <el-dialog width="400px" style="margin-top: 150px" :title="title" :visible.sync="openResult" append-to-body>
+      <div class="huiyuan">
+        会员总数：<span class="num">{{ result.total }}</span> 人
+      </div>
+      <div class="huiyuan">
+        成功人数：<span class="num">{{ result.success }}</span> 人
+      </div>
+      <div class="huiyuan">
+        失败人数：<span class="num">{{ result.error }}</span> 人
+        <span v-if="result.error!=0" style="color: red;font-size: 12px">手机号不可为空</span>
+      </div>
+      <div class="huiyuan">
+        重复人数：<span class="num">{{ result.repeat }}</span> 人
+      </div>
+    </el-dialog>
+
+    <!-- 余额充值对话框 -->
+    <balanceRecharge :showDialog="openBalance" :userId="userId" @closeDialog="closeDialog" @close="closeDialog"/>
+
+    <!-- 积分充值对话框 -->
+    <pointRecharge :showDialog="openPoint" :userId="userId" @closeDialog="closeDialog" @close="closeDialog"/>
   </div>
 </template>
 
 <script>
-  import vipList from "../vipComponents/vipList";
-  import balanceList from "../vipComponents/balanceList";
-  export default {
-    name: "Vip",
-    data(){
-      return{
-        radio1: '会员列表',
-        labelPosition: 'right',
-        formLabelAlign: {
-          name: '',
+import {updateMemberStatus} from "@/api/member";
+import balanceRecharge from "./balanceRecharge";
+import pointRecharge from "./pointRecharge";
+import {
+  addUser,
+  delUser,
+  getUser, getUserPhone,
+  listStatistic,
+  listUser, listUserStatistic, logOffUsers,
+  updateUser
+} from "@/api/staff/user/user";
+import {allUserGrade, listUserGrade} from "@/api/staff/user/usergrade";
+import {storesList} from "@/api/staff/store";
+import {getSysConfig} from "@/api/staff/user/sysconfig";
+import {getToken} from "@/utils/auth";
+import {getListApi,addUserMassSend,deleteUserMassSendRecord,listUserMassSendRecord,listUserLabel} from "@/api/vip/vip";
+
+export default {
+  name: "MemberIndex",
+  components: {balanceRecharge, pointRecharge},
+  dicts: ['official', 'zhzt'],
+  data() {
+    return {
+      tabindex: 0,
+      tabs: [
+        {
+          name: "会员信息",
         },
+        {
+          name: "群发记录",
+        },
+      ],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      result: {},
+      // 是否自动上传
+      isUpload: false,
+      headers: {
+        'Access-Token': getToken(),
+      },
+      // 文件上传信息
+      fileList: [],
+      userStatusList:[
+        {
+          label: "使用中",
+          value: 0
+        },
+        {
+          label: "已注销",
+          value: 1
+        }
+      ],
+
+      addMember: [],
+      // 余额
+      balance: '',
+      // 积分
+      point: '',
+      // 升数卡
+      literCard: '',
+      // 加油金
+      refuelMoney: '',
+      // 今日新增
+      addNum: '',
+      // 昨日新增
+      yesterdayAddNum: '',
+      rechargeTotal: "",
+      // 遮罩层
+      loading: true,
+      uploading: false,
+      uploadingFile: 0,
+      // 标题
+      title: "",
+      // 选中数组
+      ids: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      total1: 0,
+
+      total2: 0,
+      queryParams2: {
+        page: 1,
+        pageSize: 10
+      },
+      beginTime2: "",
+      endTime2: "",
+      massSendRecordList: [],
+
+      // 表格数据
+      list: [],
+      // 会员表格数据
+      userList: [],
+      // 当前店铺会员等级列表
+      userGradeList: [],
+      userLabelList:[],
+      // 所有等级信息
+      allUserGrade: [],
+      // 店铺列表
+      storeList: [],
+      storeIds: [],
+      // 是否显示修改对话框
+      open: false,
+      openUser: false,
+      openUpload: false,
+      openResult: false,
+      openMassSend: false,
+      // 当前操作用户
+      userId: '',
+      // 是否弹层充值
+      openBalance: false,
+      // 是否弹层积分
+      openPoint: false,
+      // 日期范围
+      dateRange: [],
+      beginTime: new Date(),
+      endTime: new Date(),
+      // 默认排序
+      defaultSort: {prop: 'updateTime', order: 'descending'},
+      // 表单参数
+      form: {
+        id: '', name: '', gradeId: '', mobile: '', userNo: '', points: 0, startTime: '',
+        endTime: '', refuelMoney: '0', official: 'wgz',
+        cardBalance: 0, literCard: '0', sex: 1, idcard: '', birthday: '', address: '', status: "qy", description: ''
+      },
+      sexTypelist:[
+        "女","男","不详"
+      ],
+      tindex:0,
+      form1: {},
+      messageList: [],
+      // 查询参数
+      queryParams: {
+        page: 1,
+        pageSize: 10,
+        mobile: '',
+        id: '',
+        userNo: '',
+        name: '',
+        gradeId: '',
+        status: '',
+        storeId: '',
+        official: '',
+        cardBalance: '',
+      },
+      ifBalance: '',
+      // 表单校验
+      rules: {
+        name: [
+          {required: true, message: "会员名称不能为空", trigger: "blur"},
+          // { min: 2, max: 200, message: '会员名称长度必须介于2 和 100 之间', trigger: 'blur' }
+        ],
+        gradeId: [{required: true, message: "请选择会员等级", trigger: "blur"}],
+        status: [{required: true, message: "请选择会员状态", trigger: "blur"}],
+        mobile: [
+          {required: true, message: "请输入手机号", trigger: "blur"},
+          {min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
+        ],
+        userStatus:[
+          {required: true, message: "请选择会员状态", trigger: "blur"},
+        ]
+      },
+      // 表单校验
+      rules1: {
+        name: [
+          {required: true, message: "群发名称不能为空", trigger: "blur"},
+        ],
+        sendWay: [{required: true, message: "请选择群发方式", trigger: "blur"}],
+        senfGift: [{required: true, message: "请选择群发礼品", trigger: "blur"}],
+        messageId: [
+          {required: true, message: "短信模板不能为空", trigger: "blur"},
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+    this.getStatistic();
+    this.getConfig();
+    this.getUserList();
+    this.getMessageList()
+  },
+  methods: {
+    getMessageList() {
+      getListApi({page: 1, pageSize: 10000, status: '1'}).then(res => {
+        this.messageList = res.data.records;
+      })
+    },
+    // 定时器
+    queryUserList() {
+      // let _this = this;
+      // setInterval(function (){
+      //   _this.getList();
+      //   _this.getStatistic();
+      // },5000)
+    },
+    // 跳转详情页
+    goDedi(id) {
+      this.$router.push({
+        path: "/member/userInfo",
+        query: {
+          id: id
+        }
+      })
+    },
+    getUserList() {
+      this.loading = true;
+      listUserStatistic().then(response => {
+        this.userList = response.data.records;
+        this.total1 = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 查询列表
+    getList() {
+      this.loading = true;
+
+      let dateRange = []
+      if (this.beginTime && this.endTime) {
+        dateRange.push(this.beginTime.toLocaleDateString())
+        dateRange.push(this.endTime.toLocaleDateString())
+      }
+      listUser(this.addDateRange(this.queryParams, dateRange)).then(response => {
+        this.list = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    getList1() {
+      let dateRange = []
+      if (this.beginTime2 && this.endTime2) {
+        dateRange.push(this.beginTime2.toLocaleDateString())
+        dateRange.push(this.endTime2.toLocaleDateString())
+      }
+      listUserMassSendRecord(this.addDateRange(this.queryParams2, dateRange)).then(res => {
+        this.massSendRecordList = res.data.records
+        this.total2 = res.data.total
+      })
+    },
+    // 获得统计信息
+    getStatistic() {
+      let dateRange = []
+      if (this.beginTime && this.endTime) {
+        dateRange.push(this.beginTime.toLocaleDateString())
+        dateRange.push(this.endTime.toLocaleDateString())
+      }
+      listStatistic(this.addDateRange(this.queryParams, dateRange)).then(response => {
+        this.addNum = response.data.addNum;
+        this.yesterdayAddNum = response.data.yesterdayAddNum;
+        this.rechargeTotal = response.data.rechargeTotal;
+        if (!response.data.balance) {
+          this.balance = 0
+        } else {
+          this.balance = response.data.balance;
+        }
+        if (!response.data.point) {
+          this.point = 0
+        } else {
+          this.point = response.data.point;
+        }
+      });
+      allUserGrade().then(response => {
+        this.allUserGrade = response.data
+      });
+      listUserGrade({page: 1, pageSize: 20}).then(response => {
+        this.userGradeList = response.data.records;
+      });
+      storesList().then(response => {
+        this.storeList = response.data
+      });
+    },
+    // 搜索按钮操作
+    handleQuery1() {
+      this.queryParams2.page = 1;
+      this.getList1();
+    },
+    // 重置按钮操作
+    resetQuery1() {
+      this.queryParams2 = {
+        page: 1,
+        pageSize: 10,
+      }
+      this.beginTime2 = ''
+      this.endTime2 = ''
+      this.handleQuery1();
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.page = 1;
+      if (this.ifBalance == 'haveBalance') {
+        this.queryParams.cardBalance = 1;
+      } else {
+        this.queryParams.cardBalance = 2;
+      }
+      if (this.ifBalance == '') {
+        this.queryParams.cardBalance = ''
+      }
+      this.getList();
+      this.getStatistic();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.queryParams.storeId = '';
+      this.queryParams.official = "";
+      this.ifBalance = ""
+      this.storeIds = [];
+      this.beginTime = ""
+      this.endTime = ""
+      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order);
+      this.handleQuery();
+    },
+    // 状态修改
+    handleStatusChange(row) {
+      let text = row.status == "A" ? "启用" : "禁用";
+      this.$modal.confirm('确认要' + text + '"' + row.name + '"吗？').then(function () {
+        return updateMemberStatus(row.id, row.status);
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function () {
+        row.status = row.status === "N" ? "A" : "N";
+      });
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.multiple = !selection.length
+    },
+    // 排序触发事件
+    handleSortChange(column, prop, order) {
+      this.queryParams.orderByColumn = column.prop;
+      this.queryParams.isAsc = column.order;
+      this.getList();
+    },
+    // 余额充值操作
+    handleBalance(userId) {
+      this.openBalance = true;
+      this.userId = userId.toString();
+    },
+    // 导入会员信息
+    importUser() {
+      this.openResult = true;
+      this.title = "会员创建结果";
+      this.getList();
+      this.getUserList();
+    },
+    // 积分变更操作
+    handlePoint(userId) {
+      this.openPoint = true
+      this.userId = userId.toString();
+    },
+    // 关闭对话框
+    closeDialog(dialog) {
+      if (dialog == 'balance') {
+        this.openBalance = false;
+      }
+      if (dialog == 'point') {
+        this.openPoint = false;
+      }
+      this.userId = "";
+      this.getList();
+    },
+    // 新增按钮操作
+    handleAdd() {
+      this.openUser = true;
+      this.title = "新增会员";
+    },
+    Typeindex(index) {
+      this.tindex = index
+      this.form.sex = index
+    },
+    // 新增按钮操作
+    addOne() {
+      this.tindex = 1
+      this.reset();
+      this.open = true;
+      this.title = "新增会员";
+    },
+    addMult() {
+      this.openUpload = true;
+      this.title = "批量新增会员";
+    },
+    handleMassSend() {
+      this.form1 = {
+        sendWay: [],
+        senfGift: [],
+        sendUserNum: this.total
+      }
+      this.openMassSend = true
+      this.title = "会员群发";
+    },
+    // 获取配置信息
+    getConfig() {
+      getSysConfig('addMember').then(response => {
+        this.addMember = response.data.split(";")
+      });
+      listUserLabel({page: 1, pageSize: 10, status: 'qy'}).then(res => {
+        this.userLabelList = res.data.records
+      })
+    },
+    // 表单重置
+    reset() {
+      this.resetForm("form");
+      this.form = {
+        name: '',
+        gradeId: '',
+        mobile: '',
+        userNo: '',
+        points: '',
+        startTime: '',
+        endTime: '',
+        refuelMoney: '0',
+        official: 'wgz',
+        cardBalance: '',
+        literCard: '0',
+        sex: 1,
+        idcard: '',
+        birthday: '',
+        address: '',
+        status: "qy",
+        description: '',
+        userStatus:'0'
       }
     },
-    components:{
-      vipList,balanceList
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
     },
-    methods: {
-      handleClick(tab, event) {
-        console.log(tab, event);
+    // 提交按钮
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.userLabelId) this.form.userLabelId = this.form.userLabelId.toString()
+          if (this.form.id) {
+            updateUser(this.form).then(response => {
+              if (response.data == 1) {
+                this.$modal.msgSuccess("修改会员成功");
+                this.open = false;
+                this.getList();
+              } else {
+                this.$modal.msgError("手机号已存在");
+              }
+            });
+          } else {
+            getUserPhone({mobile: this.form.mobile}).then(response => {
+              if (response.data) {
+                this.$modal.msgError("手机号已存在");
+              } else {
+                addUser(this.form).then(res => {
+                  this.$modal.msgSuccess("新增会员成功");
+                  this.open = false;
+                  this.openUser = false;
+                  this.getList();
+                  this.getUserList();
+
+                });
+              }
+            })
+          }
+        }
+      });
+    },
+    // 提交按钮
+    submitForm1: function () {
+      this.$refs["form1"].validate(valid => {
+        if (valid) {
+          this.form1.sendWay = this.form1.sendWay.toString()
+          this.form1.senfGift = this.form1.senfGift.toString()
+          addUserMassSend(this.form1).then(res => {
+            this.$message.success("添加成功")
+            this.openMassSend = false
+            this.queryParams.page = 1;
+            this.getList();
+          })
+
+        }
+      });
+    },
+    // 修改按钮操作
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getUser(id).then(response => {
+        this.form = response.data;
+        if (response.data.sex) this.tindex = response.data.sex
+        if (response.data.userLabelId) this.form.userLabelId = response.data.userLabelId.split(",")
+        this.open = true;
+        this.title = "修改会员";
+      });
+    },
+    // 删除按钮操作
+    handleDelete(row) {
+      const name = row.name
+      this.$modal.confirm('是否删除本条数据，删除后无法恢复').then(function () {
+        // return deleteMember(row.id);
+        return delUser(row.id);
+      }).then(() => {
+        this.queryParams.page = 1
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    // 删除按钮操作
+    handleDelete1(row) {
+      const name = row.labelName || this.id;
+      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
+        return deleteUserMassSendRecord(row.id);
+      }).then(() => {
+        this.queryParams2.page = 1
+        this.getList1();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+    // 注销按钮操作
+    handleLogOff(row) {
+      const name = row.name
+      this.$modal.confirm('是否注销本会员数据，注销后无法恢复').then(function () {
+        return logOffUsers(row.balanceId);
+      }).then(() => {
+        this.queryParams.page = 1
+        this.getList();
+        this.$modal.msgSuccess("注销成功");
+      }).catch(() => {
+      });
+    },
+    handleChange(file, fileList) {
+      this.uploading = true;
+      if (file.status === 'success') {
+        this.uploading = false;
+        this.openUpload = false;
+        this.openUser = false;
+        this.importUser();
+        this.fileList.splice(0, 1)
+        this.result = file.response.data
+      }
+    },
+    getindex(index) {
+      this.tabindex = index
+      if (index == 0) {
+        this.getList()
+      } else if (index == 1) {
+        this.getList1()
       }
     }
-
   }
+};
 </script>
 
-<style scoped>
-  .app-center{
-    width: 100%;
+<style scoped lang="scss">
 
-    box-sizing: border-box;
-    padding: 10px;
-  }
-  .app-top{
-    width: 100%;
+.app-container {
+  width: 100%;
+  height: 100vh;
+  background: #f6f8f9;
+  margin: 0;
+  padding: 0;
+}
 
-    height: 60px;
-    box-sizing: border-box;
-    padding: 10px;
-  }
-  .clearfix{
-    width: 100%;
+.sta {
+  height: 100px;
+  margin-top: 10px;
+  background: #f6f8f9;
+  padding-top: 30px;
+}
 
-  }
-  .box-card{
-    width: 100%;
-    margin-bottom: 15px;
-  }
-  .box-gang{
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-  .box{
-    width: 200px;
-    box-sizing: border-box;
-    padding: 10px;
-    background: #f9f9f9;
-    height: 86px;
-    margin-right: 10px;
-  }
-  .size-hui{
-    font-size: 14px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-  }
-  .size-bole{
-    font-weight: bold;
-  }
-  .wgang{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
+.huiyuan {
+  height: 30px;
+  line-height: 30px;
+  font-size: 16px;
+}
 
-  }
-  .table-box{
-    width: 100%;
-  }
-  .pagination-box{
-    width: 100%;
-    margin: 10px auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .top-app-sou{
-    width: 20%;
-  }
+.num {
+  font-weight: bold;
+  color: red;
+  font-size: 18px;
+}
 
+.ds-dbox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+.k-one {
+  width: 19%;
+  border-radius: 10px;
+  border: 1px solid #F5DF1A;
+  background: rgba(252, 238, 109, 0.1);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.k-two {
+  width: 19%;
+  border-radius: 10px;
+  border: 1px solid #0ECB98;
+  background: rgba(14, 203, 152, 0.10);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.k-three {
+  width: 19%;
+  border-radius: 10px;
+  border: 1px solid #fe8c4a;
+  background: rgba(64, 158, 255, 0.1);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.k-four {
+  width: 19%;
+  border-radius: 10px;
+  border: 1px solid #FF8E8D;
+  background: rgba(255, 142, 141, 0.1);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.k-five {
+  width: 19%;
+  border-radius: 10px;
+  border: 1px solid #647CFF;
+  background: rgba(100, 124, 255, 0.1);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.r-bot-img {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  width: 54px;
+  height: 50px;
+
+}
+
+.title_ {
+  font-weight: 400;
+  font-size: 14px;
+  color: #999999;
+  margin-bottom: 10px;
+}
+
+.num-size {
+  font-size: 28px;
+  color: #333333;
+  font-weight: bold;
+}
+
+.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;
+}
+
+.cot-box {
+  width: 98%;
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.icon-type {
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  color: #999999;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.acvtive1 {
+  color: #FF770F !important;
+}
 </style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/balanceRecharge.vue b/fuintCashierWeb/src/views/cashier/NewComponents/balanceRecharge.vue
new file mode 100644
index 000000000..61a8edf27
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/balanceRecharge.vue
@@ -0,0 +1,130 @@
+<template>
+  <!-- 充值对话框 -->
+  <el-dialog class="common-dialog" title="余额充值/扣减" :visible.sync="showDialog" width="700px" @close="cancel" destroy-on-close>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="会员信息：">
+            <span>{{ memberInfo.name }}（ID:{{ memberInfo.id }}）</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="可用余额：" prop="balance">
+            <span>￥{{ memberInfo.balance.toFixed(2) }}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变更类型：" prop="type">
+            <el-radio-group v-model="form.type">
+              <el-radio key="1" label="1" value="1">增加</el-radio>
+              <el-radio key="2" label="2" value="2">扣减</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变更金额：" prop="amount">
+            <el-input v-model="form.amount" placeholder="请输入变更金额" style="width: 200px" maxlength="100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="recharge-item" prop="remark" label="备注信息：">
+            <el-input v-model="form.remark" type="textarea" rows="2" placeholder="请输入备注信息" maxlength="255" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { doRecharge } from "@/api/balance";
+import { getMemberInfo } from "@/api/member";
+export default {
+  name: "balanceRecharge",
+  props: {
+    showDialog:{
+      type:[Boolean],
+      default:()=>false
+    },
+    userId:{
+      type:[String],
+      default:()=> ''
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      memberInfo: { name: '', id: '', balance: 0 },
+      // 表单参数
+      form: { type: '1', amount: '', userId: '' },
+      // 表单校验
+      rules: {
+        userId: [
+          { required: true, message: "请选择会员", trigger: "blur" },
+        ],
+        amount: [
+          { required: true, message: "金额不能为空", trigger: "blur" },
+          { min: 1, max: 6, message: '请在1至99999元范围内输入', trigger: 'blur' },
+          { pattern: /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/, message: `请输入正确的金额`, trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  watch: {
+    showDialog(value) {
+      if (value) {
+          this.getMemberInfo()
+      }
+    }
+  },
+  methods: {
+    // 查询会员信息
+    getMemberInfo() {
+      this.loading = true;
+      getMemberInfo(this.userId).then(response => {
+          this.form.userId = response.data.memberInfo.id;
+          this.memberInfo = response.data.memberInfo;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.$emit('closeDialog','balance');
+    },
+    // 充值表单
+    reset() {
+      this.form.userId = '';
+      this.form.type = '1';
+      this.form.amount = '';
+      this.form.remark = '';
+      this.memberInfo = { name: '', id: '', balance: 0 };
+    },
+    // 提交按钮
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            doRecharge(this.form).then(response => {
+               this.$alert("余额操作成功！");
+               this.$emit('closeDialog','balance');
+               this.reset();
+            });
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-1.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-1.png
new file mode 100644
index 000000000..b8ca58e38
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-1.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-2.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-2.png
new file mode 100644
index 000000000..070eef940
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-2.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-3.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-3.png
new file mode 100644
index 000000000..158f4b216
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-3.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-4.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-4.png
new file mode 100644
index 000000000..a0447e8a1
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-4.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-5.png b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-5.png
new file mode 100644
index 000000000..e8215fd65
Binary files /dev/null and b/fuintCashierWeb/src/views/cashier/NewComponents/imgs/hy-5.png differ
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/pointRecharge.vue b/fuintCashierWeb/src/views/cashier/NewComponents/pointRecharge.vue
new file mode 100644
index 000000000..aba41f934
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/pointRecharge.vue
@@ -0,0 +1,129 @@
+<template>
+  <!-- 积分变更对话框 -->
+  <el-dialog title="积分变更" :visible.sync="showDialog" class="common-dialog" width="700px" @close="cancel" destroy-on-close>
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="会员信息：">
+            <span>{{ memberInfo.name }}（ID:{{ memberInfo.id }}）</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="可用积分：" prop="balance">
+            <span>￥{{ memberInfo.point }}</span>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变更类型：" prop="type">
+            <el-radio-group v-model="form.type">
+              <el-radio key="1" label="1" value="1">增加</el-radio>
+              <el-radio key="2" label="2" value="2">扣减</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变更数量：" prop="amount">
+            <el-input v-model="form.amount" placeholder="请输入变更数量" style="width: 200px" maxlength="100" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item class="recharge-item" prop="remark" label="备注信息：">
+            <el-input v-model="form.remark" type="textarea" rows="2" placeholder="请输入备注信息" maxlength="255" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { doRecharge } from "@/api/point";
+import { getMemberInfo } from "@/api/member";
+export default {
+  name: "pointRecharge",
+  props: {
+    showDialog:{
+      type:[Boolean],
+      default:()=>false
+    },
+    userId:{
+      type:[String],
+      default:()=> ''
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      memberInfo: { name: '', id: '', point: 0 },
+      // 表单参数
+      form: { type: '1', amount: '', userId: '' },
+      // 表单校验
+      rules: {
+        userId: [
+          { required: true, message: "请选择会员", trigger: "blur" },
+        ],
+        amount: [
+          { required: true, message: "金额不能为空", trigger: "blur" },
+          { pattern: /^[0-9]{1,10}$/, message: `请输入1-10位数字`, trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  watch: {
+    showDialog(value) {
+      if (value) {
+          this.getMemberInfo()
+      }
+    }
+  },
+  methods: {
+    // 查询会员信息
+    getMemberInfo() {
+      this.loading = true;
+      getMemberInfo(this.userId).then(response => {
+          this.form.userId = response.data.memberInfo.id;
+          this.memberInfo = response.data.memberInfo;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.$emit('closeDialog','point');
+    },
+    // 充值表单
+    reset() {
+      this.form.userId = '';
+      this.form.type = '1';
+      this.form.amount = '';
+      this.form.remark = '';
+      this.memberInfo = { name: '', id: '', point: 0 };
+    },
+    // 提交按钮
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            doRecharge(this.form).then(response => {
+               this.$alert("积分操作成功！");
+               this.$emit('closeDialog','point');
+               this.reset();
+            });
+        }
+      });
+    }
+  }
+};
+</script>
diff --git a/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue b/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
index 98b8210c3..dd3926d70 100644
--- a/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
+++ b/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
@@ -131,47 +131,7 @@
               <div class="num-size">{{point}}</div>
               <img class="r-bot-img" src="./imgs/hy-5.png" alt="">
             </div>
-            <!--          <el-row :gutter="20">-->
-            <!--            <el-col :span="4">-->
-            <!--              <div class="sta">-->
-            <!--                <el-statistic-->
-            <!--                  group-separator=","-->
-            <!--                  :value="total"-->
-            <!--                  title="会员总数"-->
-            <!--                ></el-statistic>-->
-            <!--              </div>-->
-            <!--            </el-col>-->
-            <!--            <el-col :span="4">-->
-            <!--              <div class="sta">-->
-            <!--                <el-statistic title="今日新增/昨日新增">-->
-            <!--                  <template slot="formatter">-->
-            <!--                    {{ addNum }}/{{ yesterdayAddNum }}-->
-            <!--                  </template>-->
-            <!--                </el-statistic>-->
-            <!--              </div>-->
-            <!--            </el-col>-->
-            <!--            <el-col :span="4">-->
-            <!--              <div class="sta">-->
-            <!--                <el-statistic-->
-            <!--                  group-separator=","-->
-            <!--                  :precision="2"-->
-            <!--                  :value="balance"-->
-            <!--                  title="储值总余额"-->
-            <!--                ></el-statistic>-->
-            <!--              </div>-->
-            <!--            </el-col>-->
 
-            <!--            <el-col :span="4">-->
-            <!--              <div class="sta">-->
-            <!--                <el-statistic-->
-            <!--                  group-separator=","-->
-            <!--                  :value="point"-->
-            <!--                  title="积分总余额"-->
-            <!--                ></el-statistic>-->
-            <!--              </div>-->
-            <!--            </el-col>-->
-
-            <!--          </el-row>-->
           </div>
 
         </template>