<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-30 15:34:12
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2019-09-05 11:32:13
|
* @Description:
|
-->
|
<template>
|
<!-- 商户收款：订单列表页面 -->
|
<div class="box h-100-g">
|
<x-header title="订单明细" :left-options="{backText:''}">
|
<!-- <div slot="right" class="slot-right">筛选</div> -->
|
</x-header>
|
<section v-if="orderList.length">
|
<h3 class="count">今日成功交易金额：<span class="number">{{countPrice}}</span> 元</h3>
|
<div class="order-item" v-for="(item, index) in orderList" :key="index"
|
@click="$router.push(`/product/dmf-detail?id=${item.orderId}`)">
|
<!-- /product/dmf-detail?id=1251909050004223 -->
|
<group>
|
<h4 class="title">商户名称：{{item.merName}}</h4>
|
<div class="price">
|
<p>支付宝扫码收款</p>
|
<div>
|
<p class="num">{{item.payAmt}}</p>
|
<p v-if="item.status==2" class="fail">{{item.status | getStatus}}</p>
|
<p v-else-if="item.status==3" class="success">{{item.status | getStatus}}</p>
|
<p v-else>{{item.status | getStatus}}</p>
|
</div>
|
</div>
|
<footer class="foot flex-44">
|
<p>{{$tool.date(item.creTime, 'YYYY-MM-DD HH:mm:ss')}}</p>
|
<p>渠道名称：{{item.chanName}}</p>
|
</footer>
|
</group>
|
</div>
|
</section>
|
<f-no-data v-else></f-no-data>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'facepay_list',
|
data() {
|
return {
|
orderList: [],
|
countPrice: 0
|
}
|
},
|
created() {
|
this.init()
|
},
|
filters: {
|
getStatus(v) {
|
switch (v) {
|
case 0:
|
return '待支付';
|
case 1:
|
return '交易成功';
|
case 2:
|
return '订单超时';
|
case 3:
|
return '退款成功';
|
}
|
}
|
},
|
methods: {
|
getTime(v) {
|
return this.$tool.date(v, 'YYYY-MM-DD hh:ss:mm');
|
},
|
init() {
|
// 查询参数，后期做
|
// "endTime": "2019-05-27T08:31:59.603Z",
|
// "mgrId": 0,
|
// "orderId": 0,
|
// "prodId": 0,
|
// "staTime": "2019-05-27T08:31:59.603Z",
|
// "status": 0
|
// merId
|
this.$api.facepay_orderList({merId:this.$route.query.merId}).then(res => {
|
let body = res.body;
|
this.countPrice = body.sumAmt || 0;
|
this.orderList = body.dmfOrderVoList || [];
|
})
|
}
|
}
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
.box{
|
background-color: #f1f1f1;
|
padding-top: 54px;
|
}
|
.order-item {
|
margin-bottom: 15px;
|
|
.number {
|
color: #bd8e55;
|
}
|
}
|
|
.count {
|
height: 44px;
|
line-height: 44px;
|
padding-left: 15px;
|
}
|
|
.flex-44 {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 44px;
|
line-height: 44px;
|
}
|
|
.title {
|
color: #c6c6c6;
|
font-weight: normal;
|
text-align: right;
|
border-bottom: 1px solid #D9D9D9;
|
padding-right: 15px;
|
height: 44px;
|
line-height: 44px;
|
font-size: 14px;
|
}
|
|
.price {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 90px;
|
padding: 0 15px;
|
text-align: center;
|
color: #5a5a5a;
|
font-weight: 600;
|
font-size: 16px;
|
|
.num {
|
color: #bd8e55;
|
font-size: 20px;
|
}
|
.success{
|
color: #ff7a45;
|
}
|
.fail{
|
color: #f5222d;
|
}
|
}
|
|
.foot {
|
background-color: #f8f5f1;
|
padding: 0 15px;
|
font-size: 14px;
|
}
|
|
</style>
|
