267 lines
6.6 KiB
Vue
267 lines
6.6 KiB
Vue
|
<!-- 收银台订单-->
|
||
|
|
<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>
|