diff --git a/fuintCashierWeb/src/components/ThemePicker/index.vue b/fuintCashierWeb/src/components/ThemePicker/index.vue
index 477d3c439..3eec02c97 100644
--- a/fuintCashierWeb/src/components/ThemePicker/index.vue
+++ b/fuintCashierWeb/src/components/ThemePicker/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-color-picker
     v-model="theme"
-    :predefine="['#5393ff', '#00a7ac', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d' ]"
+    :predefine="['#5393ff', '', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d' ]"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
   />
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
new file mode 100644
index 000000000..539b68e89
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
@@ -0,0 +1,453 @@
+<!--发票-->
+<template>
+  <div class="app-center">
+    <div class="box-center">
+      <div class="box-title">交班统计</div>
+      <div class="box-ge">
+        <div class="input-box">
+          <div>油站名称:</div>
+          <div>蓝鲸加油站</div>
+        </div>
+        <div class="input-box">
+          <div>收银员:</div>
+          <div>陈某人</div>
+        </div>
+        <div class="input-box">
+          <div>交班方式:</div>
+          <div>门店统一交班</div>
+        </div>
+        <div class="input-box">
+          <div>开始时间:</div>
+          <div>2023-10-24 15:41:47</div>
+        </div>
+        <div class="input-box">
+          <div>结束时间:</div>
+          <div>2023-10-24 15:41:47</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="input-box">
+          <div>当前版本:</div>
+          <div>V1.0.1</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">订单汇总</div>
+        <div class="input-hui">
+          <div>类型</div>
+          <div>金额</div>
+        </div>
+        <div class="input-box">
+          <div>油品订单(订单)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>油品订单(退款)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>油品订单(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>油品优惠(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>抹零总额(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>油品交易(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+        <el-divider></el-divider>
+<!--       六个一条线 -->
+        <div class="input-box">
+          <div>会员储值(订单)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>会员储值(退款)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>会员储值(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>储值赠送(订单)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>储值赠送(退款)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>储值赠送(实际)</div>
+          <div>￥2164.55</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>普通收款(订单)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>普通收款(退款)</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>普通收款(实收)</div>
+          <div>￥2164.55</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">退款汇总</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>退款金额</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥2164.55</div>
+        </div>
+      </div>
+
+      <div class="box-ge">
+        <div class="boloicon">实收汇总</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>金额</div>
+        </div>
+        <div class="input-box">
+          <div>现金</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>储值卡</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>加油金</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>银行转1</div>
+          <div>￥2164.55</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥2164.55</div>
+        </div>
+      </div>
+
+      <div class="box-ge">
+        <div class="boloicon">油品订单</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>金额</div>
+        </div>
+        <div class="input-box">
+          <div>现金</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>储值卡</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>加油金</div>
+          <div>￥2164.55</div>
+        </div>
+        <div class="input-box">
+          <div>银行转1</div>
+          <div>￥2164.55</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥2164.55</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">商品订单</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>金额</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥0.00</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">普通订单</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>金额</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥0.00</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">会员储值</div>
+        <div class="input-hui">
+          <div>支付方式</div>
+          <div>金额</div>
+        </div>
+        <div class="input-box">
+          <div>现金</div>
+          <div>￥888.88</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥888.88</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">油号统计</div>
+        <div class="input-hui-frou">
+          <div>油号</div>
+          <div>笔数</div>
+          <div>升数</div>
+          <div style="text-align: right">金额</div>
+        </div>
+        <div class="input-box-frou">
+          <div>92#</div>
+          <div>9</div>
+          <div>1447.03</div>
+          <div style="text-align: right">￥888.88</div>
+        </div>
+        <div class="input-box-frou">
+          <div>92#</div>
+          <div>9</div>
+          <div>1447.03</div>
+          <div style="text-align: right">￥888.88</div>
+        </div>
+
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥888.88</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">优惠统计</div>
+        <div class="input-hui">
+          <div>油品</div>
+          <div>金额</div>
+        </div>
+        <div class="input-box">
+          <div>92#</div>
+          <div>￥888.88</div>
+        </div>
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥888.88</div>
+        </div>
+      </div>
+      <div class="box-ge">
+        <div class="boloicon">油枪统计</div>
+        <div class="input-hui-frou">
+          <div>油号</div>
+          <div>笔数</div>
+          <div>升数</div>
+          <div style="text-align: right">金额</div>
+        </div>
+        <div class="input-box-frou">
+          <div>一号枪</div>
+          <div>9</div>
+          <div>1447.03</div>
+          <div style="text-align: right">￥888.88</div>
+        </div>
+        <div class="input-box-frou">
+          <div>二号枪</div>
+          <div>9</div>
+          <div>1447.03</div>
+          <div style="text-align: right">￥888.88</div>
+        </div>
+
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥888.88</div>
+        </div>
+      </div>
+
+      <div class="box-ge">
+        <div class="boloicon">员工统计</div>
+        <div class="input-hui-frou">
+          <div>员工姓名</div>
+          <div>笔数</div>
+
+          <div style="text-align: right">金额</div>
+        </div>
+        <div class="input-box-frou">
+          <div>一号员工</div>
+          <div>9</div>
+
+          <div style="text-align: right">￥888.88</div>
+        </div>
+        <div class="input-box-frou">
+          <div>二号员工</div>
+          <div>9</div>
+
+          <div style="text-align: right">￥888.88</div>
+        </div>
+
+        <el-divider></el-divider>
+        <div class="input-box">
+          <div>合计</div>
+          <div>￥888.88</div>
+        </div>
+      </div>
+
+    </div>
+    <div style="width: 100%; height: 100px"></div>
+    <div class="app-bottom">
+      <el-card >
+        <div class="bottom-xz">
+          <div class="anniu">交班</div>
+          <div class="anniu-lv">云打印</div>
+          <div class="anniu-lv">本地打印</div>
+          <div ><el-link type="primary">交班记录</el-link></div>
+        </div>
+      </el-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "Handover",
+
+
+    }
+</script>
+
+<style scoped lang="scss">
+  .app-center{
+    width: 100%;
+
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .box-center{
+    width: 508px;
+    height: 85vh;
+    background-color: white;
+    margin: 10px auto;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+  .box-ge{
+    border-bottom: 1px solid #ececec ;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .box-title{
+    font-size: 18px;
+    text-align: center;
+    align-items: center;
+    margin-top: 15px;
+  }
+  .input-box{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 5px 0px;
+  }
+  .input-box-frou{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 5px 0px;
+    div{
+      width: 25%;
+      text-align: left;
+    }
+  }
+  .input-hui{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 15px 0px;
+    background: #f7f7f7;
+    box-sizing: border-box;
+    padding: 5px 0px;
+  }
+  .input-hui-frou{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 15px 0px;
+    background: #f7f7f7;
+    box-sizing: border-box;
+    padding: 5px 0px;
+    div{
+      width: 25%;
+      text-align: left;
+    }
+  }
+  .boloicon{
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+  .app-bottom{
+    position: fixed;
+    bottom: 0px;
+    height: 100px;
+    width: 90%;
+  }
+  .bottom-xz{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .anniu{
+    width: 100px;
+    height: 40px;
+    background: #00afff;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 50px;
+    margin: 0px 15px;
+    cursor: pointer;
+  }
+  .anniu-lv{
+    background: #1ab394;
+    width: 100px;
+    height: 40px;
+
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 50px;
+    margin: 0px 15px;
+    cursor: pointer;
+  }
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Integral.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Integral.vue
new file mode 100644
index 000000000..072183478
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Integral.vue
@@ -0,0 +1,528 @@
+<!--积分-->
+<template>
+    <div class="app-center">
+      <div class="center-left">
+        <div class="center-vh">
+          <div class="center-left-top">
+            <div class="vip-bottom" >
+              <div>会员登录</div>
+            </div>
+          </div>
+          <div class="center-left-hj">
+            <div class="hj-box" style="justify-content: left">油品:￥200.00</div>
+            <div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
+            <div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
+          </div>
+          <div class="center-left-hj">
+            <div>满减活动</div>
+            <div>-￥2.87</div>
+          </div>
+          <div class="center-left-th">
+            <div class="th-box">
+              <div>扫码支付</div>
+              <div class="bule">394.7</div>
+            </div>
+            <div class="th-box">
+              <div>找零</div>
+              <div class="bule">394.7</div>
+            </div>
+            <div class="th-box">
+              <div>加油员</div>
+              <div style="cursor: pointer;color: crimson"  >加油员名称</div>
+            </div>
+          </div>
+        </div>
+        <div class="bottom-posi">
+          <div class="center-left-wrap">
+            <div class="wrap-box" v-for="(item,index) in 3" :key="index">
+
+              <span>支付方式</span>
+            </div>
+          </div>
+          <div class="center-left-bottom">
+            <div>
+              <div class="bottom-price">￥349.78</div>
+              <div class="price-red">优惠合计：5.74元</div>
+            </div>
+            <div class="center-left-lv" >请先登录会员</div>
+          </div>
+        </div>
+
+      </div>
+      <div class="center-right">
+        <div class="center-right-top">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="全部" name="first"></el-tab-pane>
+            <el-tab-pane label="车用品" name="second"></el-tab-pane>
+            <el-tab-pane label="优惠卡券" name="third"></el-tab-pane>
+            <el-tab-pane label="食品酒饮" name="fourth"></el-tab-pane>
+            <el-tab-pane label="数码家电" name="fourthf"></el-tab-pane>
+            <el-tab-pane label="其它礼品" name="fourthp"></el-tab-pane>
+          </el-tabs>
+          <div style="width: 200px; ">
+            <el-input v-model="input" placeholder="请输入内容"></el-input>
+          </div>
+
+        </div>
+
+        <div class="wrap-right">
+          <div class="ts-box">
+                <div class="wrap-right-box" v-for="(item,index) in 17" :key="index">
+                  <el-card shadow="hover">
+                    <div class="box-six">
+                      <img src="../../../assets/images/goods.png" >
+                    </div>
+                    <div class="box-four">
+                      <div class="title-red">1000积分</div>
+                      <div class="title-hui">库存:不限</div>
+                      <div class="title-goods">
+                        <el-tag type="danger" size="mini"  effect="dark">加钱购</el-tag>
+                        <span style="margin-left: 5px">商品名称</span>
+                      </div>
+                    </div>
+                  </el-card>
+                </div>
+          </div>
+        </div>
+        <div class="wrap-right-bottom">
+          <div class="chongzhi" > <i class="el-icon-refresh"></i> 重置</div>
+          <div style="display: flex;align-items: center">
+            <div class="ddjil">订单记录</div>
+            <div class="gwuc"> <i class="el-icon-shopping-cart-2"></i> <span style="margin-left: 5px">购物车</span></div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "Integral",
+      data(){
+          return{
+            activeName:'first',
+            input:''
+          }
+      },
+      methods:{
+        handleClick(tab, event){
+          console.log(tab, event);
+        }
+      }
+    }
+</script>
+
+<style scoped lang="scss">
+  .app-center{
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100vh;
+  }
+  .center-left{
+    width: 33%;
+    border-radius: 8px;
+    overflow: hidden;
+    height: 98vh;
+    position: relative;
+  }
+  .bottom-posi{
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+  }
+  .center-app{
+    width: 33%;
+    border-radius: 8px;
+    overflow: hidden;
+    /*background: white;*/
+
+  }
+  .center-right{
+    width: 65%;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0px 10px;
+    height: 98vh;
+    /*background: white;*/
+  }
+  .center-top{
+    width: 100%;
+    height: 86vh;
+    background: white;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    padding: 10px;
+    position: relative;
+
+  }
+  .center-top-title{
+    box-sizing: border-box;
+    padding: 10px 0px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ececec;
+    font-size: 18px;
+    margin-bottom: 10px;
+  }
+  .center-top-tab{
+    box-sizing: border-box;
+    padding: 15px 0px;
+
+  }
+  .center-top-input{
+    width: 100%;
+    height: 60px;
+    background: #f8f8f8;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    input{
+      width: 90%;
+      font-size: 18px;
+      border: none;
+      outline: none;
+      background-color:transparent;
+    }
+
+  }
+  .center-top-data{
+    width: 100%;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 10px;
+
+
+    /*background-color: #f8f8f8;*/
+  }
+  .center-top-of{
+    width: 100%;
+    /*background-color: #99a9bf;*/
+    height: 70vh;
+    overflow: auto;
+
+
+  }
+  .wrap-wrap{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .of-box{
+    width: 31%;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    box-sizing: border-box;
+    background-color: #b4d5ff;
+    height: 110px;
+    padding: 10px;
+    color: #3e4f60;
+  }
+  .of-title{
+    font-weight: bold;
+    font-size: 22px;
+    text-align: center;
+    margin: 13px;
+  }
+  .data-top{
+    width: 100%;
+    background-color: #ededed;
+    box-sizing: border-box;
+    padding: 15px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .data-top-box{
+    width: 100%;
+    /*background-color: #ededed;*/
+    box-sizing: border-box;
+    padding: 15px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .data-top-three{
+    width: 55%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+  }
+  .data-top-title{
+    width: 45%;
+    overflow: hidden;
+  }
+  .content-top-bottom{
+    position: absolute;
+    bottom:-16px;
+    width: 98%;
+    border-top: 1px solid #ececec;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    color: #2c3e50;
+    font-size: 18px;
+    box-sizing: border-box;
+    padding: 15px ;
+    background-color: white;
+
+
+  }
+  .center-left-top{
+    width: 100%;
+    background: #5393ff;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .center-vh{
+    /*height: 68vh;*/
+  }
+  .center-left-hj{
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 15px;
+    margin-bottom: 2px;
+  }
+  .center-left-th{
+    background: white;
+    box-sizing: border-box;
+    padding: 15px;
+    margin: 10px auto;
+  }
+  .center-left-wrap{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    /*margin-top: 280px;*/
+  }
+  .wrap-box{
+    width: 31%;
+    background: #ffffff;
+    border-radius: 8px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 10px;
+
+  }
+  .wrap-box :hover{
+    /*background: #00afff !important;*/
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #00afff;
+    cursor: pointer;
+    /*color: white;*/
+  }
+
+  .center-left-bottom{
+    width: 100%;
+    background-color: white;
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .bottom-qk{
+    border: 1px solid #99a9bf;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #99a9bf;
+    margin: 15px 0px ;
+  }
+  .bottom-qd{
+    border: 1px solid #13ce66;
+    background: #13ce66;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #ffffff;
+
+    margin: 15px 10px ;
+  }
+  .bottom-gd{
+    border: 1px solid #5393ff;
+    background: #5393ff;
+    box-sizing: border-box;
+    padding: 14px 20px;
+    border-radius: 50px;
+    color: #ffffff;
+
+    margin: 15px 10px ;
+  }
+
+  .bottom-price{
+    font-size: 26px;
+    font-weight: bold;
+  }
+  .price-red{
+    color: red;
+  }
+  .center-left-lv{
+    width: 60%;
+    height: 80px;
+    background-color: #13ce66;
+    color: white;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  .th-box{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #f6f8f9;
+    box-sizing: border-box;
+    padding: 10px 0px;
+  }
+  .hj-box{
+    width: 33%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .bule{
+    font-weight: 700;
+    color: #5393ff !important;
+  }
+  .vip-bottom{
+    border: 1px solid #ffffff;
+    box-sizing: border-box;
+    padding: 5px 15px;
+    border-radius: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+  }
+  .center-right-top{
+    width: 100%;
+    background: white;
+    height: 75px;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .wrap-right{
+    width: 100%;
+    height: 78vh;
+    background: white;
+    overflow: auto;
+  }
+  .ts-box{
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .wrap-right-box{
+    width: 205px;
+    height: 270px;
+    /*margin-right: 10px;*/
+    /*margin-bottom: 10px;*/
+    margin: 5px;
+  }
+  .box-six{
+    width: 100%;
+    height: 160px;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+
+  }
+  .title-red{
+    font-size: 18px;
+    font-weight: bold;
+    color: rgb(238, 59, 62);
+  }
+  .title-hui{
+    font-size: 14px;
+    /*font-weight: bold;*/
+    color: #999999;
+    margin: 5px 0px;
+  }
+  .title-goods{
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+  }
+  .wrap-right-bottom{
+    width: 100%;
+    background: white;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    margin-top: 10px;
+    box-sizing: border-box;
+    padding: 15px;
+    justify-content: space-between;
+  }
+  .chongzhi{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    box-sizing: border-box;
+    padding: 10px 15px;
+    border: 1px solid #999999;
+    font-size: 20px;
+    cursor: pointer;
+
+  }
+.ddjil{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  box-sizing: border-box;
+  padding: 10px 15px;
+  border: 1px solid #13ce66;
+  font-size: 20px;
+  background: #13ce66;
+  color: white;
+  margin: 8px 10px;
+  cursor: pointer;
+}
+  .gwuc{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    box-sizing: border-box;
+    padding: 10px 25px;
+    border: 1px solid #5393ff;
+    font-size: 20px;
+    background: #5393ff;
+    color: white;
+    margin: 8px 10px;
+    cursor: pointer;
+  }
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Order.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Order.vue
new file mode 100644
index 000000000..1145eb465
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Order.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="app-center">
+      <div class="app-top">
+      <el-card >
+        <el-radio-group v-model="radio1">
+          <el-radio-button label="收银台订单"></el-radio-button>
+          <el-radio-button label="油品交易订单"></el-radio-button>
+          <el-radio-button label="商品交易订单"></el-radio-button>
+          <el-radio-button label="会员充值订单"></el-radio-button>
+          <el-radio-button label="普通收款订单"></el-radio-button>
+          <el-radio-button label="增值交易订单"></el-radio-button>
+          <el-radio-button label="未支付订单"></el-radio-button>
+          <el-radio-button label="积分兑换订单"></el-radio-button>
+        </el-radio-group>
+      </el-card>
+      </div>
+      <order_Cashier v-if="radio1 == '收银台订单' "></order_Cashier>
+      <order_Oil v-if="radio1 == '油品交易订单' "></order_Oil>
+      <order_Goods v-if="radio1 == '商品交易订单' "></order_Goods>
+      <order_Vip v-if="radio1 == '会员充值订单' "></order_Vip>
+      <order_Ordinary v-if="radio1 == '普通收款订单' "></order_Ordinary>
+      <order_Added v-if="radio1 == '增值交易订单' "></order_Added>
+      <order_Unpaid v-if="radio1 == '未支付订单' "></order_Unpaid>
+      <order_Integral v-if="radio1 == '积分兑换订单' "></order_Integral>
+    </div>
+</template>
+
+<script>
+  import order_Cashier from "../orderComponents/order_Cashier";
+  import order_Added from "../orderComponents/order_Added";
+  import order_Goods from "../orderComponents/order_Goods";
+  import order_Integral from "../orderComponents/order_Integral";
+  import order_Oil from "../orderComponents/order_Oil";
+  import order_Ordinary from "../orderComponents/order_Ordinary";
+  import order_Unpaid from "../orderComponents/order_Unpaid";
+  import order_Vip from "../orderComponents/order_Vip";
+
+    export default {
+        name: "Order",
+        data(){
+          return{
+
+            radio1:'收银台订单'
+          }
+        },
+      components:{
+        order_Cashier,order_Added,order_Goods,order_Integral,order_Oil,order_Ordinary,order_Unpaid,order_Vip
+      },
+      methods: {
+        handleClick(tab, event) {
+          console.log(tab, event);
+        }
+      }
+
+    }
+</script>
+
+<style scoped>
+  .app-center{
+    width: 100%;
+
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .app-top{
+    width: 100%;
+    margin-bottom: 20px;
+    height: 60px;
+    box-sizing: border-box;
+
+  }
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue
index 77cf3fcc3..d8b4995a0 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Recharge.vue
@@ -1,6 +1,16 @@
 <template>
     <div class="app-center">
-      <div class="">充值</div>
+      <div class="background-bj">
+        <div class="dispul">
+          <div class="input-sousuo">
+            <input type="text" placeholder="会员手机号，会员卡号，会员密码" >
+          </div>
+          <div class="anniu">
+            <div>搜索</div>
+          </div>
+        </div>
+
+      </div>
     </div>
 </template>
 
@@ -24,4 +34,46 @@
     padding: 10px;
 
   }
+  .background-bj{
+    width: 100%;
+    height: 100vh;
+    background: white;
+
+  }
+  .input-sousuo{
+    width: 550px;
+    height: 50px;
+    border-radius: 50px;
+    background-color: #f2f2f7;
+
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0px 15px;
+    input{
+      width: 90%;
+      font-size: 18px;
+      border: none;
+      outline: none;
+      background-color:transparent;
+    }
+  }
+  .dispul{
+    width: 50%;
+    margin: 300px auto;
+    display: flex;
+    align-items: center;
+  }
+  .anniu{
+    width: 100px;
+    height: 50px;
+    border-radius: 50px;
+    background: #00afff;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10px;
+    cursor: pointer;
+  }
 </style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue b/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
new file mode 100644
index 000000000..f432e75a8
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
@@ -0,0 +1,108 @@
+<!--会员-->
+<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>
+
+      <vipList v-if="radio1 == '会员列表' "></vipList>
+      <balanceList v-if="radio1 == '余额记录' "></balanceList>
+
+  </div>
+</template>
+
+<script>
+  import vipList from "../vipComponents/vipList";
+  import balanceList from "../vipComponents/balanceList";
+  export default {
+    name: "Vip",
+    data(){
+      return{
+        radio1: '会员列表',
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+      }
+    },
+    components:{
+      vipList,balanceList
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+  .app-center{
+    width: 100%;
+
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue b/fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue
new file mode 100644
index 000000000..7f9cd215d
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="app-center">
+      <div class="wbai">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>卡券核销</span>
+            <div style="width: 80% ;margin:0px 20px">
+              <el-input v-model="input" placeholder="请输入会员手机号，兑换券核销码"></el-input>
+            </div>
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+            <div>
+            </div>
+          </div>
+          <div class="bottom-di">
+            <el-empty :image-size="200"  description="请输入检索信息进行搜索~"></el-empty>
+          </div>
+
+        </el-card>
+      </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "WriteOff",
+        data(){
+          return{
+
+          }
+        }
+
+    }
+</script>
+
+<style scoped>
+  .app-center{
+    width: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+    align-items: center;
+    display: flex;
+
+  }
+  input{
+    width: 90%;
+    font-size: 18px;
+    border: none;
+    outline: none;
+    background-color:transparent;
+  }
+  .wbai{
+    width: 100%;
+  }
+  .bottom-di{
+    width: 100%;
+    height: 85vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/credit.vue b/fuintCashierWeb/src/views/cashier/NewComponents/credit.vue
new file mode 100644
index 000000000..bca53f2f6
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/credit.vue
@@ -0,0 +1,267 @@
+<template>
+    <div class="app-center">
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>挂账</span>
+        </div>
+        <div style="display: flex;">
+          <div class="top-app-sou">
+            <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+              <el-form-item label="名称">
+                <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div style="margin-left: 10px">
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          </div>
+        </div>
+      </el-card>
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>统计</span>
+        </div>
+        <div class="box-gang">
+          <div class="box" v-for="(item,index) in 7" :key="index">
+            <div class="size-hui">挂账笔数</div>
+            <div class="size-bole">55</div>
+          </div>
+
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div class="wgang">
+             <div>列表</div>
+             <div style="display: flex ">
+               <el-button type="primary" size="mini">新增挂账记录</el-button>
+               <el-button type="success" size="mini">批量挂账归还</el-button>
+             </div>
+           </div>
+        <div class="table-box">
+            <el-table
+              :data="tableData"
+              style="width: 100%">
+              <el-table-column type="expand">
+                <template slot-scope="props">
+                  <el-form label-position="left" inline class="demo-table-expand">
+                    <el-form-item label="名称">
+                      <span>{{ props.row.name }}</span>
+                    </el-form-item>
+                  </el-form>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                label="单据号"
+                width="150">
+              </el-table-column>
+              <el-table-column label="挂账单位">
+                <el-table-column
+                  prop="name"
+                  label="单位名称"
+                  width="120">
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="挂账人"
+                  width="120">
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="联系电话"
+                  width="120">
+                </el-table-column>
+              </el-table-column>
+              <el-table-column label="记录明显">
+                <el-table-column
+                  prop="province"
+                  label="类型"
+                  width="120">
+                </el-table-column>
+                <el-table-column
+                  prop="city"
+                  label="金额"
+                  width="120">
+                </el-table-column>
+                <el-table-column
+                  prop="address"
+                  label="状态"
+                  width="300">
+                </el-table-column>
+              </el-table-column>
+              <el-table-column
+                prop="zip"
+                label="操作人"
+                width="220">
+              </el-table-column>
+              <el-table-column
+                prop="zip"
+                label="创建时间"
+                width="220">
+              </el-table-column>
+<!--              <el-table-column-->
+<!--                prop="zip"-->
+<!--                label="操作"-->
+<!--                width="220">-->
+<!--              </el-table-column>-->
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-edit"
+                  >修改</el-button>
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </div>
+        <div class="pagination-box">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000">
+          </el-pagination>
+        </div>
+
+
+      </el-card>
+
+
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "credit",
+      data(){
+        return{
+          labelPosition: 'right',
+          formLabelAlign: {
+            name: '',
+
+          },
+          tableData: [{
+            date: '2016-05-03',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-08',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-06',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-07',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }]
+
+        }
+
+
+      }
+
+    }
+</script>
+
+<style scoped>
+  .app-center{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue b/fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue
index f0a5b89a6..abafb0a62 100644
--- a/fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue
+++ b/fuintCashierWeb/src/views/cashier/NewComponents/homeindex.vue
@@ -250,11 +250,7 @@
     border-radius: 8px;
     overflow: hidden;
     height: 98vh;
-
     position: relative;
-    /*height: 70vh;*/
-    /*box-sizing: border-box;*/
-    /*padding: 10px;*/
   }
   .bottom-posi{
     width: 100%;
diff --git a/fuintCashierWeb/src/views/cashier/index.vue b/fuintCashierWeb/src/views/cashier/index.vue
index 1db78e715..7b9b2cec6 100644
--- a/fuintCashierWeb/src/views/cashier/index.vue
+++ b/fuintCashierWeb/src/views/cashier/index.vue
@@ -192,7 +192,13 @@
 
     <homeindex v-if="leftindex == 0"></homeindex>
     <Recharge v-if="leftindex == 1"></Recharge>
-    <div style="width: 100%;padding:200px " v-if="leftindex != 0 && leftindex != 1">
+    <Order v-if="leftindex == 2"></Order>
+    <vip v-if="leftindex == 3"></vip>
+    <WriteOff v-if="leftindex == 4"></WriteOff>
+    <credit v-if="leftindex == 5"></credit>
+    <Integral v-if="leftindex == 6"></Integral>
+    <Handover v-if="leftindex == 7"></Handover>
+    <div style="width: 100%;padding:200px " v-if="leftindex != 0 && leftindex != 1 && leftindex != 2  && leftindex != 3  && leftindex != 4 && leftindex != 5 && leftindex != 6 && leftindex != 7">
       <el-empty  description="暂未开发"></el-empty>
     </div>
 
@@ -217,6 +223,12 @@ import couponConfirm from "./components/couponConfirm";
 import noGoodsCashier from "./components/noGoodsCashier";
 import homeindex from "./NewComponents/homeindex";
 import Recharge from "./NewComponents/Recharge";
+import Order from "./NewComponents/Order";
+import Vip from "./NewComponents/Vip";
+import WriteOff from "./NewComponents/WriteOff";
+import credit from "./NewComponents/credit";
+import Integral from "./NewComponents/Integral";
+import Handover from "./NewComponents/Handover";
 export default {
   name: "Cashier",
   components: {
@@ -232,7 +244,12 @@ export default {
     noGoodsCashier,
     homeindex,
     Recharge,
-
+    Order,
+    Vip,
+    WriteOff,
+    credit,
+    Integral,
+    Handover
 
 
   },
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Added.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Added.vue
new file mode 100644
index 000000000..2d77cd51f
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Added.vue
@@ -0,0 +1,266 @@
+<!--增值交易订单-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>增值交易统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>增值交易列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Cashier.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Cashier.vue
new file mode 100644
index 000000000..dc38e7987
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Cashier.vue
@@ -0,0 +1,266 @@
+<!-- 收银台订单-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>收银台订单统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>收银台订单列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Goods.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Goods.vue
new file mode 100644
index 000000000..2c4b5a9b4
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Goods.vue
@@ -0,0 +1,266 @@
+<!--商品交易列表-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>商品交易统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>商品交易列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Integral.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Integral.vue
new file mode 100644
index 000000000..895e4864b
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Integral.vue
@@ -0,0 +1,307 @@
+<!--积分兑换订单-->
+<template>
+    <div>
+      <el-tabs type="border-card">
+        <el-tab-pane label="用户管理">
+
+            <div class="top-dis">
+              <div class="top-app-sou">
+                <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+                  <el-form-item label="名称">
+                    <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+                  </el-form-item>
+                </el-form>
+              </div>
+              <div style="margin-left: 10px">
+                <el-button type="primary" icon="el-icon-search">查询</el-button>
+              </div>
+            </div>
+
+<!--          列表-->
+          <div class="bottom-dis">
+            <div class="wgang">
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="全部订单" name="first"></el-tab-pane>
+                <el-tab-pane>
+                  <div slot="label" class="hgang"> 待处理/待发货 <span class="hongdian">1</span>  </div>
+                </el-tab-pane>
+                <el-tab-pane>
+                  <div slot="label" class="hgang"> 已完成/已发货 <span class="hongdian">1</span>  </div>
+                </el-tab-pane>
+                <el-tab-pane>
+                  <div slot="label" class="hgang"> 已拒绝/已退款 <span class="hongdian">1</span>  </div>
+                </el-tab-pane>
+                <el-tab-pane>
+                  <div slot="label" class="hgang"> 未付款订单 <span class="hongdian">1</span>  </div>
+                </el-tab-pane>
+
+              </el-tabs>
+            </div>
+            <div class="table-box">
+              <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column type="expand">
+                  <template slot-scope="props">
+                    <el-form label-position="left" inline class="demo-table-expand">
+                      <el-form-item label="名称">
+                        <span>{{ props.row.name }}</span>
+                      </el-form-item>
+                    </el-form>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="date"
+                  label="用户信息"
+                  width="150">
+                </el-table-column>
+                <el-table-column label="余额">
+                  <el-table-column
+                    prop="name"
+                    label="储值卡"
+                    width="120">
+                  </el-table-column>
+                  <el-table-column
+                    prop="name"
+                    label="升值卡"
+                    width="120">
+                  </el-table-column>
+
+                </el-table-column>
+                <el-table-column label="会员等级">
+                  <el-table-column
+                    prop="province"
+                    label="汽油"
+                    width="120">
+                  </el-table-column>
+                  <el-table-column
+                    prop="city"
+                    label="柴油"
+                    width="120">
+                  </el-table-column>
+                  <el-table-column
+                    prop="city"
+                    label="天然气"
+                    width="120">
+                  </el-table-column>
+                </el-table-column>
+                <el-table-column label="统计">
+                  <el-table-column
+                    prop="province"
+                    label="加油金"
+                    width="120">
+                  </el-table-column>
+                  <el-table-column
+                    prop="city"
+                    label="积分"
+                    width="120">
+                  </el-table-column>
+                  <el-table-column
+                    prop="city"
+                    label="消费次数"
+                    width="120">
+                  </el-table-column>
+                </el-table-column>
+
+                <el-table-column
+                  prop="zip"
+                  label="实体卡号"
+                  width="220">
+                </el-table-column>
+
+                <el-table-column
+                  prop="zip"
+                  label="状态"
+                  width="120">
+                </el-table-column>
+
+                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                  <template slot-scope="scope">
+                    <el-button
+                      size="mini"
+                      type="text"
+                      icon="el-icon-edit"
+                    >更多操作</el-button>
+
+                  </template>
+                </el-table-column>
+
+              </el-table>
+            </div>
+            <div class="pagination-box">
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="1000">
+              </el-pagination>
+            </div>
+
+          </div>
+
+        </el-tab-pane>
+        <el-tab-pane label="配置管理">
+
+           <div class="bottom-dis">
+            <div slot="header" class="clearfix">
+              <span>统计</span>
+            </div>
+            <div class="box-gang">
+              <div class="box" v-for="(item,index) in 7" :key="index">
+                <div class="size-hui">订单总数</div>
+                <div class="size-bole">55</div>
+              </div>
+            </div>
+       </div>
+        </el-tab-pane>
+
+      </el-tabs>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "order_Integral",
+      data(){
+        return{
+          radio1:'',
+          activeName: 'second',
+          formLabelAlign: {
+            name: '',
+            },
+          tableData: [{
+            date: '2016-05-03',
+            name: '王小狼',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-02',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-08',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-06',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }, {
+            date: '2016-05-07',
+            name: '王小虎',
+            province: '上海',
+            city: '普陀区',
+            address: '上海市普陀区金沙江路 1518 弄',
+            zip: 200333
+          }]
+        }
+      },
+      methods:{
+        handleClick(tab, event) {
+          console.log(tab, event);
+        }
+      }
+
+    }
+</script>
+
+<style scoped>
+  .clearfix{
+    width: 100%;
+    margin-bottom: 10px;
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+  .top-dis{
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px;
+  }
+  .bottom-dis{
+    width: 100%;
+    box-sizing: border-box;
+    padding: 15px;
+  }
+  .hongdian{
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: crimson;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .hgang{
+    display: flex;
+  }
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue
new file mode 100644
index 000000000..ab1a1da44
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue
@@ -0,0 +1,267 @@
+<!--油品订单-->
+
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>油品订单统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>油品订单列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Ordinary.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Ordinary.vue
new file mode 100644
index 000000000..7a864df54
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Ordinary.vue
@@ -0,0 +1,266 @@
+<!--普通收款订单-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>普通收款统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>普通收款列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Unpaid.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Unpaid.vue
new file mode 100644
index 000000000..cbbf35031
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Unpaid.vue
@@ -0,0 +1,266 @@
+<!--未支付订单-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>未支付订单统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>未支付订单列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/orderComponents/order_Vip.vue b/fuintCashierWeb/src/views/cashier/orderComponents/order_Vip.vue
new file mode 100644
index 000000000..e75cf6d3c
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/orderComponents/order_Vip.vue
@@ -0,0 +1,266 @@
+<!--会员充值订单-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>会员充值统计</span>
+      </div>
+      <div class="box-gang">
+        <div class="box" v-for="(item,index) in 7" :key="index">
+          <div class="size-hui">订单总数</div>
+          <div class="size-bole">55</div>
+        </div>
+
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div class="wgang">
+        <div>会员充值列表</div>
+        <div style="display: flex ">
+
+          <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+        </div>
+      </div>
+      <div class="table-box">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form label-position="left" inline class="demo-table-expand">
+                <el-form-item label="名称">
+                  <span>{{ props.row.name }}</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="用户信息"
+            width="150">
+          </el-table-column>
+          <el-table-column label="余额">
+            <el-table-column
+              prop="name"
+              label="储值卡"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="升值卡"
+              width="120">
+            </el-table-column>
+
+          </el-table-column>
+          <el-table-column label="会员等级">
+            <el-table-column
+              prop="province"
+              label="汽油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="柴油"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="天然气"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+          <el-table-column label="统计">
+            <el-table-column
+              prop="province"
+              label="加油金"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="积分"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="city"
+              label="消费次数"
+              width="120">
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="实体卡号"
+            width="220">
+          </el-table-column>
+
+          <el-table-column
+            prop="zip"
+            label="状态"
+            width="120">
+          </el-table-column>
+
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+              >更多操作</el-button>
+
+            </template>
+          </el-table-column>
+
+        </el-table>
+      </div>
+      <div class="pagination-box">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="1000">
+        </el-pagination>
+      </div>
+
+
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "order_Cashier",
+    data(){
+      return{
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/vipComponents/balanceList.vue b/fuintCashierWeb/src/views/cashier/vipComponents/balanceList.vue
new file mode 100644
index 000000000..0c3550146
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/vipComponents/balanceList.vue
@@ -0,0 +1,404 @@
+<template>
+  <div>
+    <el-card class="box-card">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="储值卡记录" name="first"></el-tab-pane>
+          <el-tab-pane label="升数卡记录" name="second"></el-tab-pane>
+        </el-tabs>
+      <div style="display: flex;">
+        <div class="top-app-sou">
+          <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+            <el-form-item label="名称">
+              <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div style="margin-left: 10px">
+          <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+<!--    储值卡-->
+    <div v-if="activeName == 'first' ">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>储值卡统计</span>
+        </div>
+        <div class="box-gang">
+          <div class="box" v-for="(item,index) in 7" :key="index">
+            <div class="size-hui">会员总数</div>
+            <div class="size-bole">55</div>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div class="wgang">
+          <div>列表</div>
+          <div style="display: flex ">
+
+            <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+          </div>
+        </div>
+        <div class="table-box">
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column type="expand">
+              <template slot-scope="props">
+                <el-form label-position="left" inline class="demo-table-expand">
+                  <el-form-item label="名称">
+                    <span>{{ props.row.name }}</span>
+                  </el-form-item>
+                </el-form>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="用户信息"
+              width="150">
+            </el-table-column>
+            <el-table-column label="余额">
+              <el-table-column
+                prop="name"
+                label="储值卡"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="升值卡"
+                width="120">
+              </el-table-column>
+
+            </el-table-column>
+            <el-table-column label="会员等级">
+              <el-table-column
+                prop="province"
+                label="汽油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="柴油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="天然气"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="统计">
+              <el-table-column
+                prop="province"
+                label="加油金"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="积分"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="消费次数"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="实体卡号"
+              width="220">
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="状态"
+              width="120">
+            </el-table-column>
+
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                >更多操作</el-button>
+
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+        <div class="pagination-box">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000">
+          </el-pagination>
+        </div>
+
+
+      </el-card>
+    </div>
+<!--    升数卡-->
+    <div v-if="activeName == 'second' ">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>升数卡统计</span>
+        </div>
+        <div class="box-gang">
+          <div class="box" v-for="(item,index) in 7" :key="index">
+            <div class="size-hui">会员总数</div>
+            <div class="size-bole">55</div>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div class="wgang">
+          <div>列表</div>
+          <div style="display: flex ">
+
+            <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+          </div>
+        </div>
+        <div class="table-box">
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column type="expand">
+              <template slot-scope="props">
+                <el-form label-position="left" inline class="demo-table-expand">
+                  <el-form-item label="名称">
+                    <span>{{ props.row.name }}</span>
+                  </el-form-item>
+                </el-form>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="用户信息"
+              width="150">
+            </el-table-column>
+            <el-table-column label="余额">
+              <el-table-column
+                prop="name"
+                label="储值卡"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="升值卡"
+                width="120">
+              </el-table-column>
+
+            </el-table-column>
+            <el-table-column label="会员等级">
+              <el-table-column
+                prop="province"
+                label="汽油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="柴油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="天然气"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="统计">
+              <el-table-column
+                prop="province"
+                label="加油金"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="积分"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="消费次数"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="实体卡号"
+              width="220">
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="状态"
+              width="120">
+            </el-table-column>
+
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                >更多操作</el-button>
+
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+        <div class="pagination-box">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000">
+          </el-pagination>
+        </div>
+
+
+      </el-card>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "balanceList",
+    data(){
+      return{
+        activeName: 'first',
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+        },
+
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小狼',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-08',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-06',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }, {
+          date: '2016-05-07',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333
+        }]
+      }
+
+    },
+    methods: {
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>
diff --git a/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue b/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
new file mode 100644
index 000000000..5c40e1150
--- /dev/null
+++ b/fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
@@ -0,0 +1,265 @@
+<template>
+    <div>
+      <el-card class="box-card">
+        <div style="display: flex;">
+          <div class="top-app-sou">
+            <el-form :label-position="labelPosition" label-width="40px" :model="formLabelAlign">
+              <el-form-item label="名称">
+                <el-input v-model="formLabelAlign.name" placeholder="请输入要搜索的内容"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div style="margin-left: 10px">
+            <el-button type="primary" icon="el-icon-search">搜索</el-button>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>统计</span>
+        </div>
+        <div class="box-gang">
+          <div class="box" v-for="(item,index) in 7" :key="index">
+            <div class="size-hui">会员总数</div>
+            <div class="size-bole">55</div>
+          </div>
+
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <div class="wgang">
+          <div>列表</div>
+          <div style="display: flex ">
+
+            <el-button type="primary" size="mini" icon="el-icon-plus">新增会员</el-button>
+          </div>
+        </div>
+        <div class="table-box">
+          <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column type="expand">
+              <template slot-scope="props">
+                <el-form label-position="left" inline class="demo-table-expand">
+                  <el-form-item label="名称">
+                    <span>{{ props.row.name }}</span>
+                  </el-form-item>
+                </el-form>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="用户信息"
+              width="150">
+            </el-table-column>
+            <el-table-column label="余额">
+              <el-table-column
+                prop="name"
+                label="储值卡"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="升值卡"
+                width="120">
+              </el-table-column>
+
+            </el-table-column>
+            <el-table-column label="会员等级">
+              <el-table-column
+                prop="province"
+                label="汽油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="柴油"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="天然气"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+            <el-table-column label="统计">
+              <el-table-column
+                prop="province"
+                label="加油金"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="积分"
+                width="120">
+              </el-table-column>
+              <el-table-column
+                prop="city"
+                label="消费次数"
+                width="120">
+              </el-table-column>
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="实体卡号"
+              width="220">
+            </el-table-column>
+
+            <el-table-column
+              prop="zip"
+              label="状态"
+              width="120">
+            </el-table-column>
+
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                >更多操作</el-button>
+
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+        <div class="pagination-box">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="1000">
+          </el-pagination>
+        </div>
+
+
+      </el-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "vipList",
+      data(){
+          return{
+            labelPosition: 'right',
+            formLabelAlign: {
+              name: '',
+            },
+            tableData: [{
+              date: '2016-05-03',
+              name: '王小狼',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-02',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-04',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-01',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-08',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-06',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }, {
+              date: '2016-05-07',
+              name: '王小虎',
+              province: '上海',
+              city: '普陀区',
+              address: '上海市普陀区金沙江路 1518 弄',
+              zip: 200333
+            }]
+          }
+      }
+    }
+</script>
+
+<style scoped>
+  .app-top{
+    width: 100%;
+
+    height: 60px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+  .clearfix{
+    width: 100%;
+
+  }
+  .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;
+
+  }
+  .table-box{
+    width: 100%;
+  }
+  .pagination-box{
+    width: 100%;
+    margin: 10px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .top-app-sou{
+    width: 20%;
+  }
+
+
+</style>