You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
7.4 KiB
319 lines
7.4 KiB
<template>
|
|
<view>
|
|
<lf-nav title="余额" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
|
|
<view class="head">
|
|
<view class="bg-left"></view>
|
|
<view class="bg-right"></view>
|
|
<view class="head-content">
|
|
<view>
|
|
<text class="lf-iconfont icon-yuebao lf-font-50"></text>
|
|
</view>
|
|
<view class="point">
|
|
<text>{{ num || 0 }}</text>
|
|
<text class="label">(元)</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="lf-row-between lf-m-b-30">
|
|
<view class="lf-font-32 lf-color-black lf-font-bold">余额变动明细</view>
|
|
<picker mode='date' :value="date" @change="dateChange">
|
|
<view style="width: 440rpx; text-align: right;">
|
|
<text>{{ date || getDay }}</text>
|
|
<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10"></text>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
<view class="lf-row-between">
|
|
<view class="lf-font-36 lf-color-black lf-font-bold"
|
|
:class="{'lf-color-price': item.value < 0}"
|
|
style="width: 70%;">{{ item.balance }}
|
|
</view>
|
|
<view class="lf-font-24 lf-color-555">{{ item.note }}</view>
|
|
</view>
|
|
<view class="lf-row-between lf-m-t-20">
|
|
<view class="lf-font-24 lf-color-555">¥{{ item.current }}</view>
|
|
<view class="lf-font-24 lf-color-777">{{ item.created_at }}</view>
|
|
</view>
|
|
</view>
|
|
<lf-nocontent src="/static/images/empty.png" v-if="list.length <= 0"></lf-nocontent>
|
|
</view>
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { pageLogin, getUrl, config, is } from '@/common/js/utils.js';
|
|
export default {
|
|
data(){
|
|
return {
|
|
date: '',
|
|
// activeIndex: 0,
|
|
// tabList: [{
|
|
// id: 0,
|
|
// name: "收入",
|
|
// init: false,
|
|
// page: 0,
|
|
// more: true,
|
|
// show: false
|
|
// }, {
|
|
// id: 1,
|
|
// name: "支出",
|
|
// init: false,
|
|
// page: 0,
|
|
// more: true,
|
|
// show: false
|
|
// }],
|
|
// dataList: {
|
|
// 0: [],
|
|
// 1: []
|
|
// },
|
|
list: [],
|
|
show: false,
|
|
page: 0,
|
|
more: true,
|
|
token: '',
|
|
num: "",
|
|
showText: '正在加载下一页数据',
|
|
config: ''
|
|
}
|
|
},
|
|
computed: {
|
|
getDay(){
|
|
return this.$shared.recordTime(new Date(), '-', 'date');
|
|
}
|
|
},
|
|
onLoad(e){
|
|
// TODO 将list数据渲染到页面上，，根据date请求筛选
|
|
// 第三方平台配置颜色
|
|
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
|
|
this.setData({
|
|
config: bgConfig
|
|
}); // var status=0,page=1;
|
|
// this.queryBalanceList(token);
|
|
|
|
// var status = e.type ? e.type : 0;
|
|
// var page = this.tabList[status].page;
|
|
pageLogin(getUrl(), token => {
|
|
this.setData({
|
|
'token': token
|
|
});
|
|
this.queryBalanceList();
|
|
this.queryUserSum(token);
|
|
});
|
|
// this.queryBalanceList(token, status, page);
|
|
// this.queryUserSum(this.token);
|
|
},
|
|
methods: {
|
|
dateChange(event){
|
|
this.date = event.detail.value;
|
|
this.page = 0;
|
|
this.more = true;
|
|
this.show = false;
|
|
this.showText = '正在加载下一页数据';
|
|
this.queryBalanceList();
|
|
},
|
|
|
|
queryBalanceList() {
|
|
// var type = status ? 'consume' : 'recharge';
|
|
// var params = type ? {
|
|
// type
|
|
// } : {};
|
|
// params.page = page;
|
|
uni.showLoading({
|
|
title: '正在获取中'
|
|
})
|
|
let token = this.token;
|
|
let params = {
|
|
page: this.page
|
|
};
|
|
if(this.date){
|
|
params.day = this.date;
|
|
}
|
|
this.$http.get({
|
|
api: 'api/users/balance/list',
|
|
header: {
|
|
Authorization: token
|
|
},
|
|
data: params
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
// this.result(res, status);
|
|
var page = res.meta.pagination;
|
|
this.page = page.current_page;
|
|
this.more = page.current_page < page.total_pages;
|
|
this.show = false;
|
|
console.log("page", page);
|
|
if(page.current_page == 1){
|
|
this.list = res.data;
|
|
}else{
|
|
this.list.push(...res.data);
|
|
}
|
|
console.log("res.data", this.list);
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '数据请求失败',
|
|
success: res => {}
|
|
});
|
|
}
|
|
|
|
uni.hideLoading();
|
|
}).catch(rej => {
|
|
uni.showToast({
|
|
title: "请求失败",
|
|
image: '../../../static/error.png'
|
|
});
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
// 获取总余额
|
|
queryUserSum(token) {
|
|
this.$http.get({
|
|
api: "api/users/balance/sum",
|
|
header: {
|
|
Authorization: token
|
|
}
|
|
}).then(res => {
|
|
if (res.statusCode == 200) {
|
|
res = res.data;
|
|
this.setData({
|
|
"num": res.data.sum
|
|
});
|
|
} else {
|
|
wx.showModal({
|
|
title: '提示',
|
|
content: '数据请求失败',
|
|
success: res => {}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
setData: function (obj) {
|
|
let that = this;
|
|
let keys = [];
|
|
let val, data;
|
|
Object.keys(obj).forEach(function (key) {
|
|
keys = key.split('.');
|
|
val = obj[key];
|
|
data = that.$data;
|
|
keys.forEach(function (key2, index) {
|
|
if (index + 1 == keys.length) {
|
|
that.$set(data, key2, val);
|
|
} else {
|
|
if (!data[key2]) {
|
|
that.$set(data, key2, {});
|
|
}
|
|
}
|
|
|
|
data = data[key2];
|
|
});
|
|
});
|
|
}
|
|
},
|
|
onReachBottom(e) {
|
|
// var status = this.activeIndex;
|
|
// var page = this.tabList[status].page + 1;
|
|
// var tabList = `tabList[${status}]`;
|
|
|
|
|
|
if (this.more) {
|
|
this.page++;
|
|
this.show = true;
|
|
this.queryBalanceList();
|
|
// this.setData({
|
|
// [`${tabList}.show`]: true
|
|
// });
|
|
// var token = this.token;
|
|
// this.queryBalanceList(token, status, page);
|
|
} else {
|
|
wx.showToast({
|
|
icon: 'error',
|
|
title: '再拉也没有啦'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.head{
|
|
width: 750rpx;
|
|
// height: 512rpx;
|
|
height: 429rpx;
|
|
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
padding: 60rpx 32rpx;
|
|
color: #FFFFFF;
|
|
.bg-left{
|
|
position: absolute;
|
|
width: 196rpx;
|
|
height: 196rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(255,255,255,0.04);
|
|
left: -92rpx;
|
|
bottom: 60rpx;
|
|
}
|
|
.bg-right{
|
|
position: absolute;
|
|
width: 520rpx;
|
|
height: 520rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(255,255,255,0.04);
|
|
right: -168rpx;
|
|
top: -122rpx;
|
|
}
|
|
.head-content{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&>view{
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.point{
|
|
font-size: 72rpx;
|
|
letter-spacing: 2rpx;
|
|
font-weight: bold;
|
|
word-break: break-all;
|
|
line-height: 1;
|
|
margin-top: 10rpx;
|
|
.label{
|
|
font-size: 36rpx;
|
|
font-weight: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main{
|
|
padding: 30rpx 32rpx;
|
|
width: 750rpx;
|
|
height: max-content;
|
|
box-sizing: border-box;
|
|
.item{
|
|
width: 686rpx;
|
|
height: max-content;
|
|
background: #F4F8F8;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 26rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
</style>
|