420 lines
14 KiB
Vue
420 lines
14 KiB
Vue
<!--积分兑换订单-->
|
|
<template>
|
|
<div>
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane label="积分商城订单">
|
|
<el-alert
|
|
title="当前页面订单为油站小程序端用户在积分商城兑换的订单记录,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分商城"
|
|
type="error">
|
|
</el-alert>
|
|
|
|
<points-mall></points-mall>
|
|
|
|
<!-- <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 name="first1">-->
|
|
<!-- <div slot="label" class="hgang"> 待处理/待发货 <span class="hongdian">1</span> </div>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane name="first2">-->
|
|
<!-- <div slot="label" class="hgang"> 已完成/已发货 <span class="hongdian">1</span> </div>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane name="first3">-->
|
|
<!-- <div slot="label" class="hgang"> 已拒绝/已退款 <span class="hongdian">1</span> </div>-->
|
|
<!-- </el-tab-pane>-->
|
|
<!-- <el-tab-pane name="first4">-->
|
|
<!-- <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="积分收银台订单">
|
|
<el-alert
|
|
title="PC积分收银台在线兑换订单记录,收银台订单无需确认操作,如有付款金额,付款订单请在增值性订单列表中查看,类型为:积分收银"
|
|
type="error">
|
|
</el-alert>
|
|
|
|
<points-cashier></points-cashier>
|
|
|
|
<!-- <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>-->
|
|
<!-- <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-tab-pane>
|
|
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PointsCashier from "@/views/cashier/orderComponents/integralComponents/pointsCashier.vue";
|
|
import PointsMall from "@/views/cashier/orderComponents/integralComponents/pointsMall.vue";
|
|
|
|
export default {
|
|
name: "order_Integral",
|
|
components: {PointsCashier, PointsMall},
|
|
data(){
|
|
return{
|
|
labelPosition: 'right',
|
|
radio1:'',
|
|
activeName: 'first',
|
|
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>
|