收银台
This commit is contained in:
parent
57f5d5489c
commit
93c1c6e04d
@ -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"
|
||||
/>
|
||||
|
||||
453
fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
Normal file
453
fuintCashierWeb/src/views/cashier/NewComponents/Handover.vue
Normal file
@ -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>
|
||||
528
fuintCashierWeb/src/views/cashier/NewComponents/Integral.vue
Normal file
528
fuintCashierWeb/src/views/cashier/NewComponents/Integral.vue
Normal file
@ -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>
|
||||
73
fuintCashierWeb/src/views/cashier/NewComponents/Order.vue
Normal file
73
fuintCashierWeb/src/views/cashier/NewComponents/Order.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
108
fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
Normal file
108
fuintCashierWeb/src/views/cashier/NewComponents/Vip.vue
Normal file
@ -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>
|
||||
66
fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue
Normal file
66
fuintCashierWeb/src/views/cashier/NewComponents/WriteOff.vue
Normal file
@ -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>
|
||||
267
fuintCashierWeb/src/views/cashier/NewComponents/credit.vue
Normal file
267
fuintCashierWeb/src/views/cashier/NewComponents/credit.vue
Normal file
@ -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>
|
||||
@ -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%;
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
267
fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue
Normal file
267
fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
266
fuintCashierWeb/src/views/cashier/orderComponents/order_Vip.vue
Normal file
266
fuintCashierWeb/src/views/cashier/orderComponents/order_Vip.vue
Normal file
@ -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>
|
||||
404
fuintCashierWeb/src/views/cashier/vipComponents/balanceList.vue
Normal file
404
fuintCashierWeb/src/views/cashier/vipComponents/balanceList.vue
Normal file
@ -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>
|
||||
265
fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
Normal file
265
fuintCashierWeb/src/views/cashier/vipComponents/vipList.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user