<template>
<view class="consume-content" :style="{'--status-bar-': statusBarHeight}">
<view class="consume-content-info">
<!-- 头部主要内容 开始 -->
<view class="consume-content-header">
<customNavbar title="收支明细" bgColor="var(--gd-bgm-color)" :customNavbarInfo="{}" :contentStyle="{}"
:leftStyle="{color: '#fff'}"></customNavbar>
<!-- tab 开始 -->
<u-tabs
:list="list1"
@click="clickTabs"
lineColor="var(--gd-bgm-color)"
:activeStyle="{ color: 'rgba(127, 127, 127, 1)' }"
:inactiveStyle="{ color: 'rgba(127, 127, 127, 1)' }"
:scrollable="false"
></u-tabs>
<!-- tab 结束 -->
</view>
<!-- 头部主要内容 结束 -->
<!-- 收支列表 开始 -->
<view class="consume-content-list">
<customScrollList
ref="customScrollList"
@load="load"
@paging="paging"
@refresh="refresh"
>
<view v-if="marketPersonsSerialList.length>0" style="width: 100%;padding: 0 30rpx;box-sizing: border-box;">
<customListItem :item="item" v-for="(item,index) in marketPersonsSerialList" />
</view>
</customScrollList>
</view>
<!-- 收支列表 结束 -->
</view>
</view>
</template>
<script>
import {
navigateTo
} from "@/utils/util.js"
export default {
data() {
return {
title: '收支明细',
statusBarHeight: 0, // 状态栏安全距离
monry: 123456.789,
moneyValue: null,
tool: [ // 我的工具
{
title: "支付设置",
icon: this.$commonConfig.staticUrl + 'balance/zhifu.png',
url: '/pages/invitationStatistics/index'
},
{
title: "余额提现",
icon: this.$commonConfig.staticUrl + 'balance/mingxi.png',
url: '/pages/balance/index'
},
],
list1: [
{
name: '全部',
key: '',
},
{
name: '收入',
key: 1,
},
{
name: '支出',
key: 2,
}],
serialType: '',
marketPersonsSerialList: []
}
},
onLoad() {
},
onShow() {
this.statusBarHeight = getApp().globalData.statusBarHeight
},
methods: {
/**
* @author ygh
* @data 2023-12-20
*/
navigateToFun() {
navigateTo('/pages/cash/index')
},
/**
* 数字显示格式化
*
*/
numFormat(num = 0) {
if (num < 100000) {
return num
} else if (num > 100000) {
return (num / 10000).toFixed(2)
}
},
/**
* 选择tabs
*/
clickTabs(item) {
console.log('item', item);
if(this.serialType == item.key) return
this.serialType = item.key
this.marketPersonsSerialList = []
this.$refs.customScrollList.refresh()
},
/**
* 获取数据
*/
async load(paging) {
try{
if(paging.page == 1) {
this.marketPersonsSerialList = []
}
this.$refs.customScrollList.showPullUp = true
let res = await this.$u.api.marketPersonsSerial({
noSign: 1,
userid: this.distribution_user_info.userId,
pageNum: paging.page,
pageSize: paging.size,
serialType: this.serialType
})
if(res && res.code ===200) {
if(res.data.rows){
let list = JSON.parse(JSON.stringify(this.marketPersonsSerialList))
res.data.rows.forEach(item=>{
list.push({
...item
})
})
this.marketPersonsSerialList = list
}else {
}
this.$refs.customScrollList.loadSuccess({
list: this.marketPersonsSerialList,
total: res.data.total
})
} else {
this.$refs.customScrollList.loadSuccess({
list: [],
total: res.data.total || this.marketPersonsSerialList.length
})
}
}catch(e){
//TODO handle the exception
console.error("e===",e)
this.$refs.customScrollList.loadSuccess({
list: [],
total: this.marketPersonsSerialList.length
})
}
},
paging(paging){
console.log("下拉 加载数据")
},
/**
* 下拉触底
*/
async refresh(paging){
console.log("上拉 加载数据")
//this.$refs.customScrollList.showEmpty = true
try{
//this.$refs.customScrollList.showPullUp = true
let res = await this.$u.api.marketPersonsSerial({
pageNum: paging.page,
pageSize: paging.size,
userid: this.distribution_user_info.userId,
serialType: this.serialType
})
if(res && res.code ===200) {
if(res.data.rows){
let list = []
res.data.rows.forEach(item=>{
list.push({
...item
})
})
this.marketPersonsSerialList = list
}else {
this.marketPersonsSerialList = []
}
// this.marketPersonsSerialList = null
this.$refs.customScrollList.refreshSuccess({
list: this.marketPersonsSerialList,
total: res.data.total
})
} else {
this.$refs.customScrollList.refreshSuccess({
list: [],
total: res.data.total || this.marketPersonsSerialList.length
})
}
}catch(e){
//TODO handle the exception
console.error("e===",e)
this.$refs.customScrollList.refreshSuccess({
list: [],
total: this.marketPersonsSerialList.length
})
}
},
}
}
</script>
<style lang="scss" scoped>
.consume-content {
width: 100%;
height: 100%;
--header-h: 90rpx;
.consume-content-info {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
}
/** 头部主要内容 开始 */
.consume-content-header {
width: 100%;
//height: var(--header-h);
box-sizing: border-box;
position: relative;
::v-deep .u-search {
padding: 0 30rpx !important;
}
::v-deep .u-search__action {
color: #fff !important;
}
/** 余额 开始 */
.consume-content-money {
width: 100%;
box-sizing: border-box;
margin-top: 50rpx;
padding-left: 66rpx;
color: #fff;
>text {
font-size: 24rpx;
}
.consume-content-money-num {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
margin-top: 24rpx;
>text:nth-child(1) {
.balance-userinfo-util {
font-size: 24rpx;
margin-left: 5rpx;
}
::v-deep .u-count-num {
font-weight: bold !important;
font-size: 48rpx !important;
}
}
>text:nth-child(2) {
margin-top: 20rpx;
font-size: 24rpx;
}
}
}
/** 余额 结束 */
/** 提现 开始 */
.consume-content-cash {
width: 100%;
box-sizing: border-box;
position: absolute;
top: 100%;
transform: translateY(-50%);
padding: 0 12rpx;
.consume-content-consume-box {
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
border-radius: 20rpx;
box-sizing: border-box;
padding: 34rpx 30rpx 38rpx;
>text {
font-size: 28rpx;
color: #363636;
}
.consume-content-consume-money {
width: 100%;
display: flex;
align-items: center;
padding: 40rpx 0 20rpx;
border-bottom: 2rpx solid #EEEEEE;
::v-deep .u-cell__body {
padding: 20rpx 0 !important;
}
.consume-content-consume-input {
width: 100%;
padding: 0 10rpx;
}
>text {
flex-shrink: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.consume-content-consume-money-icon {
font-size: 32rpx;
}
.consume-content-consume-money-all {
color: var(--gd-but-color);
font-size: 24rpx;
cursor: pointer;
}
}
.consume-content-consume-card {
width: 100%;
::v-deep .u-cell__body {
padding: 20rpx 0 !important;
}
}
.consume-content-consume-submit {
width: 100%;
height: 92rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 80rpx 0;
margin-top: 70rpx;
>view {
width: 100%;
height: 100%;
border-radius: 46rpx;
color: #fff;
background-color: var(--gd-but-color);
font-size: 28rpx;
font-family: SourceHanSansCN, SourceHanSansCN;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
/** 提现 结束 */
}
/** 头部主要内容 结束 **/
/** 收支列表 开始 */
.consume-content-list {
width: 100%;
height: 100%;
background: #F7F7F9;
// overflow: hidden;
}
/** 收支列表 结束 */
</style>