162 lines
3.9 KiB
Vue
162 lines
3.9 KiB
Vue
<template>
|
||
<view class="min-body">
|
||
<u-cell-group :border="false">
|
||
<u-cell :border="false">
|
||
<view slot="title" class="lit-333 bold ad-bd" @click="showData = true">
|
||
{{date}}
|
||
</view>
|
||
<!-- <view slot="value" class="lit-666">
|
||
<view style="text-align: right;">
|
||
本月支出：<text style="color: #2EA308;">￥{{dateData.expenditure}}</text>
|
||
</view>
|
||
<view style="text-align: right;">
|
||
本月收入：<text style="color: #DB0808;">￥{{dateData.income}}</text>
|
||
</view>
|
||
</view> -->
|
||
</u-cell>
|
||
</u-cell-group>
|
||
<view class="white-box" v-if="dataList.length > 0">
|
||
<u-cell-group :border="false">
|
||
<u-cell v-for="(item,index) in dataList" :key="index">
|
||
<view slot="title" class="lit-333 bold">
|
||
{{item.desc}}
|
||
</view>
|
||
<view class="lit-666" slot="label" style="margin-top: 20rpx;">
|
||
{{item.create_time}}
|
||
</view>
|
||
<view slot="value" class="lit-333 bold">
|
||
{{item.type == 0?'+':'-'}}￥{{item.amount/100}}
|
||
</view>
|
||
</u-cell>
|
||
|
||
</u-cell-group>
|
||
</view>
|
||
<u-datetime-picker ref="datetimePicker" :show="showData" :minDate="minDate" :maxDate="maxDate" mode="year-month"
|
||
@confirm="confirm" @close="showData = false" @cancel="showData = false"></u-datetime-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
conWalletFlowAPI
|
||
} from "@/request/recharge/index.js";
|
||
import mixin from '@/static/js/mixin/mixin';
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
date: "全部",
|
||
page: 1,
|
||
lock: true,
|
||
dataList: [],
|
||
dateData: {
|
||
income: 0,
|
||
expenditure: 0,
|
||
},
|
||
showData: false,
|
||
minDate: "",
|
||
maxDate: "",
|
||
endyear: '',
|
||
};
|
||
},
|
||
// onReady() {
|
||
// this.$refs.datetimePicker.setFormatter(this.formatter)
|
||
// },
|
||
methods: {
|
||
init() {
|
||
// 初始化时需要格式化最大与最小选择时间，再次调用时不需要
|
||
if (!this["minDate"] && !this["maxDate"]) {
|
||
let d = new Date();
|
||
let minDate = new Date("2022/01/01").getTime(),
|
||
maxDate = new Date(
|
||
`${d.getFullYear()}/${d.getMonth() + 1}/01`
|
||
).getTime();
|
||
this["minDate"] = minDate;
|
||
this["maxDate"] = maxDate;
|
||
};
|
||
this.GetList();
|
||
},
|
||
/**
|
||
* @确认时间
|
||
*
|
||
*/
|
||
confirm(e) {
|
||
let m = this["$u"].timeFormat(e["value"], "yyyy-mm");
|
||
this["date"] = m;
|
||
this["showData"] = false;
|
||
this["page"] = 1;
|
||
this.GetList();
|
||
},
|
||
/**
|
||
* @获取列表
|
||
*/
|
||
GetList() {
|
||
let parameters = {
|
||
date: this["date"] == "全部" ? "" : this["date"],
|
||
page: this["page"],
|
||
};
|
||
conWalletFlowAPI(parameters).then((res) => {
|
||
if (this["page"] == 1) {
|
||
this["dataList"] = [];
|
||
};
|
||
// 合并列表
|
||
this["dataList"] = this["dataList"].concat(res['data']['data']['data']);
|
||
|
||
// 列表总数
|
||
this["total"] = res['data']['data']['total'];
|
||
|
||
// 本月支出/本月收入
|
||
this["dateData"]["income"] = res['data']["income"] / 100;
|
||
this["dateData"]["expenditure"] = res['data']["expenditure"] / 100;
|
||
this["page"]++;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @该项属于什么类型
|
||
*/
|
||
filterMf(item) {
|
||
if (!item.type) {
|
||
return `+ ${this.RetainDecimalPoint(item['amount'])}`
|
||
} else {
|
||
return `- ${this.RetainDecimalPoint(item['amount'])}`
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.init();
|
||
},
|
||
onReachBottom() {
|
||
if (this["dataList"]['length'] >= this["total"]) return;
|
||
this.GetList();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.min-body {
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.white-box {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
margin: 20rpx 0;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.ad-bd {
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid #dedede;
|
||
width: 186rpx;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.top-infor {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|