|
|
@@ -0,0 +1,282 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar :is-back="false" title="充值明细">
|
|
|
+
|
|
|
+ <view class="navbar-screen" slot="right" @click="showdate = true"><span>筛选</span>
|
|
|
+ <u-icon name="filter-2-fill" custom-prefix="custom-icon" color="#b0b8c8" size="32"></u-icon>
|
|
|
+ </view>
|
|
|
+ </ujp-navbar>
|
|
|
+ <u-calendar v-model="showdate" mode="date" @change="changedate"></u-calendar>
|
|
|
+
|
|
|
+
|
|
|
+<view class="topBodyMain" v-if="list.length">
|
|
|
+ <view class="topBody1">
|
|
|
+ <view>{{form.startDate}}</view>
|
|
|
+ <view>充值人次：{{recordsTotal}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="topBody2">
|
|
|
+ <view>充值：{{topBody.totalFee}}元</view>
|
|
|
+ <view>退款：{{topBody.refundFee}}元</view>
|
|
|
+ <view>汇总：{{topBody.sumFee}}元</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="detailed">
|
|
|
+ <view style="text-align: center;margin-top: 100px" v-if="!list.length">
|
|
|
+ <img src="@/assets/img/blankpage.png">
|
|
|
+ <view>查询为空</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="detailed-list" v-for="(item ,index) in list" :key="index">
|
|
|
+
|
|
|
+ <view class="detailed-item detailed-item-body">
|
|
|
+ <view class="nickNameBody">
|
|
|
+
|
|
|
+ <view class="line1">
|
|
|
+
|
|
|
+ <view class="span nickName">{{item.nickName}} </view>
|
|
|
+ <view class="span">{{item.phone}} </view>
|
|
|
+ </view>
|
|
|
+ <view class="line2">
|
|
|
+ <view class="span">充值：{{item.totalFee}}</view>
|
|
|
+ <view class="span" :class="{
|
|
|
+ refundFee:item.refundFee
|
|
|
+ }">退款：{{item.refundFee}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="line3">
|
|
|
+ <view class="span">
|
|
|
+ <u-icon name="clock"></u-icon>{{item.payTime?item.payTime.slice(11):''}}
|
|
|
+ </view>
|
|
|
+ <view class="span">
|
|
|
+ {{item.outOrderNo}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="totalFee" :class="{
|
|
|
+ refundFee:item.refundFee
|
|
|
+ }">
|
|
|
+ {{item.showFee?item.showFee.toFixed(2):0}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-divider v-if="list.length&&list.length == recordsTotal" color="#B6BDC3" style="margin-top:20px;"
|
|
|
+ bg-color="#f7f7f7">已经到底了</u-divider>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <Tabbar :current="2" ref="tabbarMain"></Tabbar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Tabbar from '@/components/TabbarFinance.vue'
|
|
|
+ import * as API from '@/apis/finance.js'
|
|
|
+ import {
|
|
|
+ beforeTimeStamp,
|
|
|
+ currentTimeStamp,
|
|
|
+ parseUnixTime
|
|
|
+ } from '@/utils'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showdate: false,
|
|
|
+
|
|
|
+ form: {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ pageIndex: 1,
|
|
|
+ recordsTotal: 0,
|
|
|
+ list: [],
|
|
|
+ topBody: {
|
|
|
+ totalFee: 0,
|
|
|
+ refundFee: 0,
|
|
|
+ sumFee: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Tabbar
|
|
|
+
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ this.myLoadmore();
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.$refs.tabbarMain) {
|
|
|
+ this.$refs.tabbarMain.setcount(1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.info = this.carhelp.getPersonInfo()
|
|
|
+ this.form.startDate = parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+ this.form.endDate = parseUnixTime(new Date(), '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.getList()
|
|
|
+
|
|
|
+ //this.getStation()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ changedate(e) {
|
|
|
+ // this.queryDate = e.result
|
|
|
+ this.form.startDate = e.result
|
|
|
+ this.form.endDate = e.result
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ getList() {
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ this.form.pageIndex = this.pageIndex
|
|
|
+ this.form.pageSize = 999
|
|
|
+
|
|
|
+ API.rechargeList(this.form).then((res) => {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.list = res.data.data;
|
|
|
+ this.topBody.totalFee = 0
|
|
|
+ this.topBody.refundFee = 0
|
|
|
+
|
|
|
+ this.list.forEach(item => {
|
|
|
+ item.showFee = item.totalFee - item.refundFee
|
|
|
+ this.topBody.totalFee += item.totalFee
|
|
|
+ this.topBody.refundFee += item.refundFee
|
|
|
+
|
|
|
+ })
|
|
|
+ this.topBody.totalFee = this.topBody.totalFee.toFixed(2)
|
|
|
+ this.topBody.refundFee = this.topBody.refundFee.toFixed(2)
|
|
|
+ this.topBody.sumFee = this.topBody.totalFee - this.topBody.refundFee;
|
|
|
+ this.topBody.sumFee = this.topBody.sumFee.toFixed(2)
|
|
|
+
|
|
|
+ this.recordsTotal = res.data.recordsTotal
|
|
|
+ uni.hideLoading()
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ myLoadmore() {
|
|
|
+ if (this.list.length < this.recordsTotal) {
|
|
|
+ this.pageIndex += 1;
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .topBodyMain {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ top: 90rpx;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ background: #dbd9d9;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailed {
|
|
|
+ padding-top: 160rpx;
|
|
|
+ .detailed-list {
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+ border-bottom: 1px solid #d6c0c0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .detailed-item-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .refundFee {
|
|
|
+ color: #fd8008;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nickNameBody {
|
|
|
+
|
|
|
+ .line1,
|
|
|
+ .line2 {
|
|
|
+ display: flex;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ .span {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .line1 {
|
|
|
+ color: #777777
|
|
|
+ }
|
|
|
+
|
|
|
+ .line2 {
|
|
|
+ margin: 8rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line3 {
|
|
|
+ display: flex;
|
|
|
+ color: #777777;
|
|
|
+ .span {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nickName {
|
|
|
+ width: 200rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .totalFee {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 48rpx;
|
|
|
+ white-space: pre;
|
|
|
+ // margin-left: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin