308 lines
8.6 KiB
Vue
308 lines
8.6 KiB
Vue
|
<!--积分兑换订单-->
|
||
|
|
<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>
|