457 lines
12 KiB
Vue
457 lines
12 KiB
Vue
<template>
|
||
<view class="" style="width: 100vw;overflow: hidden;">
|
||
<view class="calendar">
|
||
<picker mode="date" fields="month" @change="bindDateChangeMonth">
|
||
<view class="date">
|
||
<view class="month">{{nowDate.m}}月</view>
|
||
<view>{{nowDate.y}}</view>
|
||
</view>
|
||
</picker>
|
||
<uni-calendar :insert="true" @change="changeDate" :date="nowYMD" :showMonth="false" />
|
||
</view>
|
||
<view class="detail">
|
||
<uni-section class="title" titleFontSize="32rpx" :title="'账单明细 '+ nowYMD" type="line"></uni-section>
|
||
<view class="card">
|
||
<view class="item">
|
||
<view class="text">
|
||
押金(元)
|
||
<view class="price">{{extend.deposit.toFixed(2)}}</view>
|
||
</view>
|
||
<!-- <view class="tips">
|
||
押金：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
|
||
</view> -->
|
||
</view>
|
||
<view class="item">
|
||
<view class="text">
|
||
个人收益金额(元)
|
||
<view class="price">{{extend.user_money.toFixed(2)}}</view>
|
||
</view>
|
||
<!-- <view class="tips">
|
||
收益：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
|
||
</view> -->
|
||
</view>
|
||
<view class="all" style="justify-content: space-between;">
|
||
<view></view>
|
||
<view style="display: flex;">
|
||
<view>收益总金额(元):</view>
|
||
<view class="price">
|
||
{{(extend.deposit+extend.user_money).toFixed(2)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bill_list">
|
||
<view class="item" v-for="(item, index) in billList" :key="item.id">
|
||
<view class="top">
|
||
账单日期: {{ item.create_time }}
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="text">
|
||
<view class="t_item">
|
||
<view class="t_title">任务名称：</view>
|
||
<view class="tips">{{ item.remark }}</view>
|
||
</view>
|
||
<view class="t_item">
|
||
<view class="t_title">收益来源：</view>
|
||
<view class="tips">
|
||
<text v-if="item.change_type == 202" style="color: #46be61">{{ item.type_desc }}</text>
|
||
<text v-else-if="item.change_type == 203" style="color: #ff7c32">{{ item.type_desc }}</text>
|
||
<text v-else="item.change_type == 203">{{ item.type_desc }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="price">{{ item.change_amount_desc }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="card" v-for="(item, index) in billList" :key="index">
|
||
<view class="top">
|
||
<view class="blue">账单详情</view>
|
||
<view>账单日期：{{item.create_time}}</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="left">
|
||
<view>收益金额(元){{item.change_amount}}</view>
|
||
<view class="num"></view>
|
||
</view>
|
||
<view class="right">
|
||
<view>支出金额:{{item.change_amount_desc<0?item.change_amount:'0.00'}}</view>
|
||
<view>入账金额:{{item.change_amount_desc>0?item.change_amount:'0.00'}}</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
|
||
:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { accountLogLists } from "@/api/pay.js"
|
||
import { Toast } from '@/libs/uniApi.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
transition: true,
|
||
billList: [],
|
||
nowDate: {
|
||
y: '',
|
||
m: '',
|
||
d: ''
|
||
},
|
||
extend: {
|
||
deposit: 0,
|
||
user_money: 0
|
||
},
|
||
loadConfig: {
|
||
page: 1,
|
||
limit: 15,
|
||
loadingText: '努力加载中',
|
||
loadmoreText: '轻轻上拉',
|
||
nomoreText: '没有更多账单了~~',
|
||
status: 'loadmore'
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initDate();
|
||
this.initLoad();
|
||
},
|
||
onShow() {},
|
||
computed: {
|
||
nowYMD() {
|
||
let m = this.nowDate.m < 10 ? '0' + this.nowDate.m : this.nowDate.m;
|
||
let d = this.nowDate.d < 10 ? '0' + this.nowDate.d : this.nowDate.d;
|
||
return this.nowDate.y + '-' + m + '-' + d;
|
||
},
|
||
// 总收益
|
||
aggregateAmount() {
|
||
return (this.income > this.disbursement ? this.income - this.disbursement : 0).toFixed(2);
|
||
},
|
||
// 收益
|
||
income() {
|
||
let count = 0;
|
||
this.billList.forEach(item => {
|
||
item.action == 1 ? count += +item.change_amount : null;
|
||
})
|
||
return count.toFixed(2);
|
||
},
|
||
// 平台收益
|
||
terraceIncome() {
|
||
let count = 0;
|
||
let num = 0;
|
||
this.billList.forEach(item => {
|
||
if (item.action == 1 && item.change_type !== 201) {
|
||
count += +item.change_amount;
|
||
num++;
|
||
}
|
||
})
|
||
return {
|
||
count: count.toFixed(2),
|
||
num: num
|
||
};
|
||
},
|
||
// 支出
|
||
disbursement() {
|
||
let count = 0;
|
||
this.billList.forEach(item => {
|
||
item.action == 2 ? count += +item.change_amount : null;
|
||
})
|
||
return count.toFixed(2);
|
||
},
|
||
// 平台支出
|
||
terraceDisbursement() {
|
||
let count = 0;
|
||
let num = 0;
|
||
this.billList.forEach(item => {
|
||
if (item.action == 2 && item.change_type !== 201) {
|
||
count += +item.change_amount;
|
||
num++;
|
||
}
|
||
})
|
||
return {
|
||
count: count.toFixed(2),
|
||
num: num
|
||
};
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.loadBill()
|
||
},
|
||
methods: {
|
||
// 初始化加载
|
||
async initLoad(){
|
||
this.loadConfig.page = 1;
|
||
this.loadConfig.status = 'loadmore';
|
||
this.billList = [];
|
||
await this.loadBill();
|
||
},
|
||
async loadBill() {
|
||
if (this.loadConfig.status == "nomore") return;
|
||
this.loadConfig.status = "loading"
|
||
let res = await accountLogLists({
|
||
type: 'um', //账户余额
|
||
page_no: this.loadConfig.page,
|
||
page_size: this.loadConfig.limit,
|
||
time: this.nowYMD
|
||
});
|
||
this.loadConfig.status = "loadmore"
|
||
if (res.data.lists.length < this.loadConfig.limit) {
|
||
this.loadConfig.status = "nomore"
|
||
} else {
|
||
this.loadConfig.page++;
|
||
}
|
||
if(res.data?.extend){
|
||
this.extend = res.data.extend;
|
||
}
|
||
this.billList = [...this.billList, ...res.data.lists];
|
||
},
|
||
initDate() {
|
||
let date = new Date();
|
||
this.nowDate.y = date.getFullYear();
|
||
this.nowDate.m = date.getMonth() + 1;
|
||
this.nowDate.d = date.getDate();
|
||
},
|
||
// 选择日期
|
||
changeDate(e) {
|
||
this.nowDate.y = e.year;
|
||
this.nowDate.m = +e.month;
|
||
this.nowDate.d = e.date;
|
||
this.initLoad()
|
||
},
|
||
// 选择月份
|
||
bindDateChangeMonth(e) {
|
||
this.nowDate.y = e.detail.value.split('-')[0];
|
||
let m = e.detail.value.split('-')[1];
|
||
this.nowDate.m = m < 10 ? +m : m;
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.initLoad().then(()=>{
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.calendar {
|
||
background-color: #fff;
|
||
padding-bottom: 28rpx;
|
||
|
||
.date {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
background-color: #fff;
|
||
padding: 28rpx;
|
||
color: #333333;
|
||
font-size: 25rpx;
|
||
|
||
.month {
|
||
margin-right: 15rpx;
|
||
height: 49rpx;
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 28rpx;
|
||
|
||
.title {
|
||
width: 100%;
|
||
background-color: transparent;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.card {
|
||
width: 694rpx;
|
||
// height: 454rpx;
|
||
padding: 28rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
|
||
.item {
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 39rpx;
|
||
// padding-bottom: 40rpx;
|
||
|
||
.text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 39rpx;
|
||
display: flex;
|
||
justify-content: left;
|
||
padding-bottom: 28rpx;
|
||
|
||
.price {
|
||
font-size: 35rpx;
|
||
font-weight: 500;
|
||
color: #F9AA32;
|
||
line-height: 39rpx;
|
||
margin-left: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.all {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 39rpx;
|
||
display: flex;
|
||
justify-content: right;
|
||
|
||
.price {
|
||
font-size: 42rpx;
|
||
font-weight: 500;
|
||
color: #F02828;
|
||
line-height: 39rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bill_list {
|
||
// background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.card {
|
||
width: 694rpx;
|
||
padding: 28rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 21rpx;
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #333333FF;
|
||
line-height: 39rpx;
|
||
|
||
.blue {
|
||
width: 137rpx;
|
||
height: 49rpx;
|
||
background: #3274F9;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 39rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 160rpx;
|
||
|
||
.left {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 39rpx;
|
||
|
||
.num {
|
||
font-size: 39rpx;
|
||
font-weight: 500;
|
||
color: #F02828;
|
||
line-height: 39rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 39rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item {
|
||
margin: 0 auto;
|
||
margin-bottom: 28rpx;
|
||
width: 694rpx;
|
||
// height: 238rpx;
|
||
background: #ffffff;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
opacity: 1;
|
||
padding: 28rpx;
|
||
|
||
.top {
|
||
margin-bottom: 28rpx;
|
||
font-size: 25rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
&:before {
|
||
display: inline-block;
|
||
content: "账单详情";
|
||
width: 137rpx;
|
||
height: 49rpx;
|
||
line-height: 49rpx;
|
||
text-align: center;
|
||
background: #0122c7;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
color: #fff;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.text {
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 39rpx;
|
||
|
||
.t_item {
|
||
display: flex;
|
||
|
||
.t_title {
|
||
margin-bottom: 16rpx;
|
||
flex-shrink: 0 !important;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #f02828;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |