|
|
@@ -0,0 +1,458 @@ |
|
|
|
<template> |
|
|
|
<div class='page-home'> |
|
|
|
<div class="back-box"> |
|
|
|
<van-icon class="back-icon" @click="goBack" size=".6rem" name="arrow-left" color="#fff" /> |
|
|
|
<span>{{titleStr}}</span> |
|
|
|
</div> |
|
|
|
<img src="../../assets/images/bg.png" class="top-circle-img"> |
|
|
|
<p class="top-circle-p" @click="showPicker()">{{dealTime(currentDate)}}</p> |
|
|
|
|
|
|
|
<van-list |
|
|
|
style="margin:2.4rem 0 1rem 0;height:calc(100vh - 4rem);overflow-y:auto;" |
|
|
|
v-model="loading" |
|
|
|
:finished="finished" |
|
|
|
finished-text="没有更多了" |
|
|
|
@load="loadMore" |
|
|
|
> |
|
|
|
<div class="item-record" v-if="pageType!=2" v-for="(item,index) in recordList" :key="index"> |
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">券状态</div> |
|
|
|
<div class="item-right" style="color:#FFAE00;" v-if="item.couponOrderStatus==0">未核销</div> |
|
|
|
<div class="item-right" style="color:#52A0FD;" v-if="item.couponOrderStatus==1">已核销</div> |
|
|
|
<div class="item-right" style="color:#FF5700;" v-if="item.couponOrderStatus==2">已过期</div> |
|
|
|
<div class="item-right" style="color:#FF5700;" v-if="item.couponOrderStatus==3">已退款</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">券名称</div> |
|
|
|
<div class="item-right">{{item.title}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">券码</div> |
|
|
|
<div class="item-right">{{item.id}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail" v-if="pageType !=1"> |
|
|
|
<div class="item-left">购买时间</div> |
|
|
|
<div class="item-right">{{dealTime02(item.createDate)}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail" v-if="pageType !=2"> |
|
|
|
<div class="item-left">核销时间</div> |
|
|
|
<div class="item-right">{{dealTime02(item.updateDate)}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">购买用户</div> |
|
|
|
<div class="item-right">{{item.cuserPhone}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail" v-if="pageType ==1"> |
|
|
|
<div class="item-left">核销员</div> |
|
|
|
<div class="item-right">{{item.buserName}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">券面额</div> |
|
|
|
<div class="item-right">{{item.price/100}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">券售价</div> |
|
|
|
<div class="item-right">{{item.couponPrice/100}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- --> |
|
|
|
<div class="item-record" v-if="pageType==2" v-for="(item,index) in recordList" :key="index"> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">订单编号</div> |
|
|
|
<div class="item-right">{{item.id}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">订单金额</div> |
|
|
|
<div class="item-right">{{item.payment+'元'}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">交易时间</div> |
|
|
|
<div class="item-right">{{dealTime02(item.createDate)}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">支付方式</div> |
|
|
|
<!-- <div class="item-right">{{item.type}}</div> --> |
|
|
|
<div class="item-right">微信</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">支付状态</div> |
|
|
|
<!-- <div class="item-right">{{item.orderStatus}}</div> --> |
|
|
|
<div class="item-right">交易成功</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">付款人</div> |
|
|
|
<div class="item-right" v-if="item.cuserName">{{item.cuserName}}</div> |
|
|
|
<div class="item-right" v-if="!item.cuserName">{{item.nickName}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">付款人手机号</div> |
|
|
|
<div class="item-right">{{item.cuserPhone}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">收款人</div> |
|
|
|
<div class="item-right">{{item.buserName}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="item-detail"> |
|
|
|
<div class="item-left">收款人手机号</div> |
|
|
|
<div class="item-right">{{item.buserPhone}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</van-list> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="picker-bg" v-if="isShowPicker"> |
|
|
|
<van-datetime-picker |
|
|
|
@confirm="changeTime" |
|
|
|
@cancel="isShowPicker=false" |
|
|
|
v-model="changeDate" |
|
|
|
type="date" |
|
|
|
title="选择年月日" |
|
|
|
:min-date="minDate" |
|
|
|
:max-date="maxDate" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script type="text/babel"> |
|
|
|
import {formatDate} from '@/filters' |
|
|
|
// 组件 |
|
|
|
export default { |
|
|
|
name: 'page-index', |
|
|
|
components: { |
|
|
|
|
|
|
|
}, |
|
|
|
computed: { |
|
|
|
|
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
pageType: 0, |
|
|
|
titleStr: '交易记录', |
|
|
|
isShowPicker: false, |
|
|
|
minDate: new Date(1990, 0, 1), |
|
|
|
maxDate: new Date(), |
|
|
|
currentDate: formatDate(new Date(),'yyyy-MM-dd'), |
|
|
|
changeDate: formatDate(new Date(),'yyyy-MM-dd'), |
|
|
|
|
|
|
|
pageNum: 1, |
|
|
|
recordList: [], |
|
|
|
loading: false, |
|
|
|
finished: false, |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.pageType = this.$route.query.index |
|
|
|
this.titleStr = this.pageType == '0' ? '交易记录': (this.pageType == '1' ? '核销记录':'收银记录') |
|
|
|
this.getData() |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
dealTicketStatus (status) { |
|
|
|
let str = '' |
|
|
|
if (status == 0) { |
|
|
|
str = '未核销' |
|
|
|
} else if (status == 1) { |
|
|
|
str = '已核销' |
|
|
|
} else if (status == 2) { |
|
|
|
str = '已过期' |
|
|
|
} else if (status == 3) { |
|
|
|
str = '已退款' |
|
|
|
} |
|
|
|
return str |
|
|
|
}, |
|
|
|
doSearch () { |
|
|
|
this.pageNum = 1 |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
loadMore () { |
|
|
|
this.pageNum += 1 |
|
|
|
this.getData() |
|
|
|
|
|
|
|
}, |
|
|
|
dealTime (time) { |
|
|
|
return formatDate(new Date(time), 'yyyy-MM-dd'); |
|
|
|
}, |
|
|
|
dealTime02 (time) { |
|
|
|
return formatDate(new Date(time), 'yyyy-MM-dd HH:mm:ss'); |
|
|
|
}, |
|
|
|
showPicker () { |
|
|
|
this.isShowPicker = true; |
|
|
|
this.changeDate = new Date() |
|
|
|
}, |
|
|
|
changeTime (val) { |
|
|
|
this.currentDate = formatDate(new Date(val),'yyyy-MM-dd'); |
|
|
|
this.isShowPicker = false; |
|
|
|
}, |
|
|
|
getData () { |
|
|
|
this.loading = true |
|
|
|
let arr = ['couponOrderListUnVerified','couponOrderListVerified','micropayListMicroPay'] |
|
|
|
this.$http[arr[this.pageType]]({ |
|
|
|
method: 'get', |
|
|
|
params: { |
|
|
|
data: '2020-10-22', |
|
|
|
// data: this.currentDate, |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize: 10, |
|
|
|
} |
|
|
|
}).then(res => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.loading = false |
|
|
|
this.finished = res.data.list.list.length === 0 |
|
|
|
this.recordList = this.recordList.concat(res.data.list.list) |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
goBack() { |
|
|
|
this.$router.go(-1) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" rel="stylesheet/less" scoped> |
|
|
|
.floatR { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
@font-face { |
|
|
|
font-family: 'iconfont'; /* project id 1353693 */ |
|
|
|
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot'); |
|
|
|
src: url('//at.alicdn.com/t/font_1353693_617eu8di04k.eot?#iefix') format('embedded-opentype'), |
|
|
|
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff2') format('woff2'), |
|
|
|
url('//at.alicdn.com/t/font_1353693_617eu8di04k.woff') format('woff'), |
|
|
|
url('//at.alicdn.com/t/font_1353693_617eu8di04k.ttf') format('truetype'), |
|
|
|
url('//at.alicdn.com/t/font_1353693_617eu8di04k.svg#iconfont') format('svg'); |
|
|
|
} |
|
|
|
|
|
|
|
.page-home { |
|
|
|
background: #f8f8fa; |
|
|
|
.back-box { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
z-index: 1000; |
|
|
|
width: 100%; |
|
|
|
height: 1.3rem; |
|
|
|
line-height: 1.3rem; |
|
|
|
background: #52A0FD; |
|
|
|
color: #fff; |
|
|
|
font-size: @fontSize16; |
|
|
|
.back-icon { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
margin: .4rem 0 0 .1rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.top-circle-img { |
|
|
|
position: absolute; |
|
|
|
top: .7rem; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 1.5rem; |
|
|
|
} |
|
|
|
.top-circle-p { |
|
|
|
position: absolute; |
|
|
|
top: 1.3rem; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 1rem; |
|
|
|
line-height: 1rem; |
|
|
|
z-index: 1000; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
font-size: @fontSize16 |
|
|
|
} |
|
|
|
} |
|
|
|
.header-wrap { |
|
|
|
width: 100%; |
|
|
|
height: 4rem; |
|
|
|
position: relative; |
|
|
|
top: -1rem; |
|
|
|
|
|
|
|
.header-bg { |
|
|
|
width: 100%; |
|
|
|
height: 4rem; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.header-box { |
|
|
|
position: absolute; |
|
|
|
left: 3.5%; |
|
|
|
top: 1.4rem; |
|
|
|
width: 93%; |
|
|
|
height: 3rem; |
|
|
|
background: url('../../assets/images/reviveimg.png') no-repeat; |
|
|
|
background-size: 100%; |
|
|
|
border-radius: .2rem; |
|
|
|
box-shadow: 2px 6px .3rem rgba(0,0,0,.15); |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
.header-logo { |
|
|
|
float: left; |
|
|
|
width: 1.7rem; |
|
|
|
height: 1.7rem; |
|
|
|
margin: .7rem .5rem 0 .5rem; |
|
|
|
} |
|
|
|
.header-name-box { |
|
|
|
float: left; |
|
|
|
width: 5.5rem; |
|
|
|
margin-top: .7rem; |
|
|
|
|
|
|
|
.header-title { |
|
|
|
width: 100%; |
|
|
|
height: .75rem; |
|
|
|
line-height: .75rem; |
|
|
|
color: #333; |
|
|
|
font-size: @fontSize16; |
|
|
|
text-align: left; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
&:nth-of-type(2) { |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.header-detail { |
|
|
|
float: right; |
|
|
|
width: .7rem; |
|
|
|
height: .7rem; |
|
|
|
margin-top: 1.2rem; |
|
|
|
margin-right: .3rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text-left,.text-right { |
|
|
|
float: left; |
|
|
|
width: 4.4rem; |
|
|
|
height: 2rem; |
|
|
|
font-size: @fontSize16; |
|
|
|
span { |
|
|
|
display: block; |
|
|
|
margin-top: .3rem; |
|
|
|
&:nth-of-type(1) { |
|
|
|
color: #888; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.text-center { |
|
|
|
float: left; |
|
|
|
width: .5rem; |
|
|
|
height: 2rem; |
|
|
|
line-height: 2rem; |
|
|
|
} |
|
|
|
.search-btn { |
|
|
|
width: 100%; |
|
|
|
float: left; |
|
|
|
height:1rem; |
|
|
|
background: #51a0fc; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.picker-bg { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: rgba(0,0,0,.2); |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
z-index: 100; |
|
|
|
/deep/ .van-picker { |
|
|
|
width: 100%; |
|
|
|
position:absolute!important; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.item-record { |
|
|
|
margin: .35rem .4rem; |
|
|
|
border-radius: .1rem; |
|
|
|
background: #fff; |
|
|
|
box-shadow: .05rem .12rem .15rem rgba(0,0,0,0.15); |
|
|
|
font-size: @fontSize14; |
|
|
|
.item-detail { |
|
|
|
width: 100%; |
|
|
|
height: 1rem; |
|
|
|
line-height: 1rem; |
|
|
|
padding: 0 .4rem; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
.item-left,.item-right { |
|
|
|
float: left; |
|
|
|
span { |
|
|
|
display: block; |
|
|
|
margin-top: .4rem; |
|
|
|
font-size: @fontSize16; |
|
|
|
text-align: left; |
|
|
|
&:nth-of-type(1) { |
|
|
|
max-width: 6rem; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
&:nth-of-type(2) { |
|
|
|
margin-top: .2rem; |
|
|
|
color: #888; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.item-right { |
|
|
|
float: right; |
|
|
|
color: #888; |
|
|
|
span { |
|
|
|
text-align: right; |
|
|
|
&:nth-of-type(2) { |
|
|
|
font-size: @fontSize14; |
|
|
|
color: red; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style> |