<template>
|
<div style="padding:10px;padding-top:10px" id="order-panel-body">
|
<el-row style="margin-top:5px">
|
<table class="tableCss">
|
<thead>
|
<tr>
|
<td class="tableCssTd">订单号</td>
|
<td class="tableCssTd">灯杆ID</td>
|
<td class="tableCssTd">充电类型</td>
|
<td class="tableCssTd">充电时间</td>
|
<td class="tableCssTd">支付金额</td>
|
<td class="tableCssTd">支付方式</td>
|
<td class="tableCssTd">创建时间</td>
|
<td class="tableCssTd">支付状态</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in dataList" :key="index">
|
<td>{{item.outTradeNo}}</td>
|
<td>{{item.streetlightId}}</td>
|
<td v-if="item.chargeType === 0">USB</td>
|
<td v-if="item.chargeType === 1">电单车</td>
|
<td v-if="item.chargeType === 2">电动汽车</td>
|
<td>{{item.chargingTime / 2}} 小时</td>
|
<td v-if="item.totalMoney === 0">免费</td>
|
<td v-if="item.totalMoney != 0">{{item.totalMoney}} 元</td>
|
<td v-if="item.orderType === 0">微信</td>
|
<td v-if="item.orderType === 1">支付宝</td>
|
<td>{{item.orderCreateTime}}</td>
|
<td v-if="item.orderStatus === 'FAIL'"><span style="color:white">未支付</span></td>
|
<td v-if="item.orderStatus === 'SUCCESS'"><span style="color:green">已支付</span></td>
|
<td v-if="item.orderStatus === 'REFUND'"><span style="color:orange">已退款</span></td>
|
<td v-if="item.orderStatus === 'RFERROR'"><span style="color:red">退款失败</span></td>
|
</tr>
|
</tbody>
|
</table>
|
</el-row>
|
<el-row>
|
<el-col :span="10">
|
<el-input @keyup.enter.native="getKeyOrder()" style="margin-left:10px;width:60%" placeholder="搜索订单号" v-model="outTradeNo"></el-input>
|
<el-button @click="getKeyOrder()" size="mini" style="background-color:#1184DE;color:white;border:0px">搜索</el-button>
|
<span>每页{{limit}}个</span>
|
</el-col>
|
<el-col :span="10">
|
<el-button size="mini" v-if="page != 1" @click="prePage()" style="background-color:#1184DE;color:white;border:0px">上一页</el-button>
|
<el-button size="mini" v-if="page === 1" disabled style="background-color:#1184DE;color:white;border:0px">上一页</el-button>
|
<span>当前第 {{page}} 页</span>
|
<el-button size="mini" v-if="page < pages" @click="nextPage()" style="background-color:#1184DE;color:white;border:0px">下一页</el-button>
|
<el-button size="mini" v-if="page === pages" disabled style="background-color:#1184DE;color:white;border:0px">下一页</el-button>
|
<span>共{{total}}个</span>
|
<span>共{{pages}}页</span>
|
</el-col>
|
<el-col :span="4">
|
<el-input v-model="turnPage" placeholder="输入页码" style="width:30%;background-color:rgba(0,0,0,0);color:white"></el-input>
|
<el-button @click="turnPageTo()" size="mini" style="background-color:#1184DE;border:1px solid white;color:white;border:0px">跳转</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
streetlightId: '',
|
page: 1,
|
limit: 10,
|
pages: 0,
|
total: 0,
|
turnPage: '',
|
outTradeNo: '',
|
dataList: []
|
}
|
},
|
activated () {
|
this.init()
|
},
|
computed: {
|
streetlightStateId () {
|
return this.$store.state.charge.streetlightIdOfChargeControl
|
}
|
},
|
watch: {
|
streetlightStateId (curVal, oldVal) {
|
this.page = 1
|
this.streetlightId = curVal
|
this.getOrderList(curVal)
|
}
|
},
|
methods: {
|
init () {
|
var h = window.innerHeight || document.body.clientHeight
|
var orderPanelBody = document.getElementById('order-panel-body')
|
var num = (h / 2) - 57
|
this.limit = Math.floor(num / 40)
|
orderPanelBody.style.height = num + 'px'
|
},
|
getOrderList (val) {
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/orderlist'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: val,
|
page: this.page,
|
limit: this.limit
|
})
|
}).then(({ data }) => {
|
this.dataList = data.page.list
|
this.pages = data.page.pages
|
this.total = data.page.total
|
})
|
},
|
getKeyOrder () {
|
if (this.outTradeNo === '') {
|
this.dataList = []
|
this.page = 1
|
this.getOrderList(this.streetlightId)
|
return
|
}
|
this.$http({
|
url: this.$http.adornUrl('/pole/polec2charging/getLikenessOrder'),
|
method: 'get',
|
params: this.$http.adornParams({
|
streetlightId: this.streetlightId,
|
limit: this.limit,
|
outTradeNo: this.outTradeNo
|
})
|
}).then(({ data }) => {
|
this.dataList = data.list
|
this.pages = 1
|
this.total = data.list.length
|
})
|
},
|
prePage () {
|
this.dataList = []
|
this.page = Number(this.page) - 1
|
this.getOrderList(this.streetlightId)
|
},
|
nextPage () {
|
this.dataList = []
|
this.page = Number(this.page) + 1
|
this.getOrderList(this.streetlightId)
|
},
|
turnPageTo () {
|
if (this.turnPage <= 0) {
|
this.$message({
|
message: '请输入大于0的页码',
|
type: 'warning'
|
})
|
return
|
} else if (this.turnPage > this.pages) {
|
this.$message({
|
message: '请输入小于' + this.pages + '的页码',
|
type: 'warning'
|
})
|
return
|
}
|
this.page = this.turnPage
|
this.dataList = []
|
this.getOrderList(this.streetlightId)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.tableCss {
|
margin: 0px;
|
padding: 0px 20px;
|
margin-top: 0px;
|
/* padding-top:0px; */
|
width: 100%;
|
overflow: hidden;
|
background-color: rgba(0, 0, 0, 0);
|
border-collapse: separate;
|
border-spacing: 0px 10px;
|
}
|
.tableCss tr {
|
text-align: center;
|
}
|
.tableCssTd {
|
margin-top: 20px;
|
background-color: #1184DE;
|
text-align: center;
|
height: 35px;
|
background-size: 150% 150%;
|
background-repeat: no-repeat;
|
}
|
[placeholder~="输入页码"] {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
[placeholder~="输入页码"]:focus {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
[placeholder~="搜索订单号"] {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
[placeholder~="搜索订单号"]:focus {
|
border: 1px solid white;
|
color: white;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
|
</style>
|
