<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="orderWithdrawList.length>0" style="width: 100%;padding: 0 30rpx;box-sizing: border-box;">
<view v-for="(item,index) in orderWithdrawList" :key="index">
<view class="custom-list-item">
<view class="custom-list-item-left">
<text>申请状态：{{ withdrawStatus(item.status) }}</text>
<text>提现类型：{{ withdrawType(item.withdrawType) }}</text>
<text>支付方式：{{ payWay(item.payWay) }}</text>
<text>支付状态：{{ payStatus(item.payStatus) }}</text>
<text>手续费：{{ item && item.servicePrice }}</text>
<text>提现时间：{{ item && item.createTime }}</text>
</view>
<text
class="custom-list-item-right">{{ item.withdrawPrice }}</text>
</view>
</view>
</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: 0,
},
{
name: '提现成功',
key: 1,
},
{
name: '提现失败',
key: 2,
}
],
serialType: '',
orderWithdrawList: []
}
},
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.$refs.customScrollList.refresh()
},
/**
* 获取数据
*/
async load(paging) {
try{
this.$refs.customScrollList.showPullUp = true
let res = await this.$u.api.orderWithdrawList({
noSign: 1,
userid: this.distribution_user_info.userId,
pageNum: 1,
pageSize: 10,
serialType: this.serialType
})
if(res && res.code ===200) {
if(res.data.rows){
this.orderWithdrawList = this.orderWithdrawList.concat(res.data.rows)
}else {
this.orderWithdrawList = []
}
this.$refs.customScrollList.loadSuccess({
list: this.orderWithdrawList,
total: this.orderWithdrawList.length
})
} else {
this.$refs.customScrollList.loadSuccess({
list: [],
total: res.data.total || this.orderWithdrawList.length
})
}
}catch(e){
//TODO handle the exception
console.error("e===",e)
this.$refs.customScrollList.loadSuccess({
list: [],
total: res.data.total || this.orderWithdrawList.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.orderWithdrawList({
pageNum: paging.page,
pageSize: paging.size
})
if(res && res.code ===200) {
if(res.data.performList){
this.orderWithdrawList = [].concat(res.data.performList)
}else {
this.orderWithdrawList = []
}
// this.orderWithdrawList = null
this.$refs.customScrollList.refreshSuccess({
list: this.orderWithdrawList,
total: this.orderWithdrawList.length
})
} else {
this.$refs.customScrollList.refreshSuccess({
list: [],
total: res.data.total || this.orderWithdrawList.length
})
}
}catch(e){
//TODO handle the exception
console.error("e===",e)
this.$refs.customScrollList.refreshSuccess({
list: [],
total: res.data.total || this.orderWithdrawList.length
})
}
},
/**
* 支付方式
*/
payWay(type){
let src = ''
switch(type) {
case 'cahsh': src="现金"; break;
case 'wecaht.applet': src="微信小程序支付"; break;
case 'alipay': src="支付宝"; break;
}
return src
},
/**
* 支付状态
*/
payStatus(type){
let src = ''
switch(type) {
case '0': src="未支付"; break;
case '1': src="已支付"; break;
case '2': src="支付中"; break;
case '3': src="支付失败"; break;
case '4': src="支付退款"; break;
}
return src
},
/**
* 提现方式
*/
withdrawType(type){
let src = ''
switch(type) {
case 'wechat': src="微信零钱"; break;
case 'bank': src="银行卡"; break;
}
return src
},
/**
* 申请状态
*/
withdrawStatus(type){
let src = ''
switch(type) {
case '0': src="申请中"; break;
case '1': src="提现成功"; break;
case '2': src="提现失败"; break;
}
return src
},
}
}
</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;
>view {
width: 100%;
}
}
.custom-list-item {
width: 100%;
border-bottom: 2rpx solid #EEEEEE;
padding: 40rpx 10rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.custom-list-item-left {
display: flex;
flex-direction: column;
font-family: SourceHanSansCN, SourceHanSansCN;
>text {
margin-bottom: 10rpx;
font-size: 28rpx;
font-weight: 400;
color: #363636;
}
>text:last-child {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
}
.custom-list-item-right {
font-size: 28rpx;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
color: #363636;
white-space: nowrap;
}
}
/** 收支列表 结束 */
</style>