<template>
|
<view class="cash-list-vip">
|
<view class="cash-tabs">
|
<view class="tab-item" :class="{ active: currentTab === -1 }" @click="switchTab(-1)">
|
全部
|
</view>
|
<view class="tab-item" :class="{ active: currentTab === 10 }" @click="switchTab(10)">
|
待审核
|
</view>
|
<view class="tab-item" :class="{ active: currentTab === 20 }" @click="switchTab(20)">
|
审核通过
|
</view>
|
<view class="tab-item" :class="{ active: currentTab === 30 }" @click="switchTab(30)">
|
已驳回
|
</view>
|
</view>
|
|
<view class="cash-list">
|
<view class="cash-item" v-for="item in cashList" :key="item.id">
|
<view class="cash-header">
|
<view class="cash-no">提现单号：{{ item.cash_no }}</view>
|
<view class="cash-status" :class="{
|
'pending': item.apply_status === 10,
|
'approved': item.apply_status === 20,
|
'rejected': item.apply_status === 30,
|
'paid': item.apply_status === 40
|
}">
|
{{ getStatusText(item.apply_status) }}
|
</view>
|
</view>
|
|
<view class="cash-content">
|
<view class="cash-info">
|
<view class="info-item">
|
<view class="label">提现金额</view>
|
<view class="value">¥{{ item.money }}</view>
|
</view>
|
<view class="info-item">
|
<view class="label">手续费</view>
|
<view class="value">¥{{ item.fee_money }}</view>
|
</view>
|
<view class="info-item">
|
<view class="label">实际到账</view>
|
<view class="value red">¥{{ item.real_money }}</view>
|
</view>
|
<view class="info-item">
|
<view class="label">提现方式</view>
|
<view class="value">{{ getPayTypeText(item.pay_type) }}</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="cash-footer">
|
<view class="cash-time">{{ item.create_time }}</view>
|
</view>
|
|
<view class="reject-reason" v-if="item.apply_status === 30 && item.reject_reason">
|
驳回原因：{{ item.reject_reason }}
|
</view>
|
</view>
|
|
<view class="no-data" v-if="cashList.length === 0">
|
暂无提现记录
|
</view>
|
</view>
|
|
<!-- 加载更多 -->
|
<view class="load-more" v-if="cashList.length > 0 && hasMore">
|
<view @click="loadMore">点击加载更多</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
titel: '提现明细',
|
currentTab: -1, // -1: 全部, 10: 待审核, 20: 审核通过, 30: 已驳回
|
page: 1,
|
hasMore: true,
|
cashList: []
|
};
|
},
|
onLoad() {
|
this.loadData();
|
},
|
methods: {
|
// 加载数据
|
loadData() {
|
let self = this;
|
uni.showLoading({ title: '加载中' });
|
|
let params = {
|
page: self.page
|
};
|
|
if (self.currentTab !== -1) {
|
params.status = self.currentTab;
|
}
|
|
self._get('plus.vip.cash/lists', params, function(res) {
|
uni.hideLoading();
|
|
if (self.page === 1) {
|
self.cashList = res.data.list.data;
|
} else {
|
self.cashList = [...self.cashList, ...res.data.list.data];
|
}
|
|
// 判断是否还有更多数据
|
self.hasMore = res.data.list.last_page > res.data.list.current_page;
|
});
|
},
|
|
// 切换标签页
|
switchTab(tab) {
|
if (this.currentTab !== tab) {
|
this.currentTab = tab;
|
this.page = 1;
|
this.hasMore = true;
|
this.loadData();
|
}
|
},
|
|
// 加载更多
|
loadMore() {
|
if (this.hasMore) {
|
this.page++;
|
this.loadData();
|
}
|
},
|
|
// 获取状态文本
|
getStatusText(status) {
|
const statusMap = {
|
10: '待审核',
|
20: '审核通过',
|
30: '已驳回',
|
40: '已打款'
|
};
|
return statusMap[status] || '未知';
|
},
|
|
// 获取状态样式类
|
getStatusClass(status) {
|
const classMap = {
|
10: 'pending',
|
20: 'approved',
|
30: 'rejected',
|
40: 'paid'
|
};
|
return classMap[status] || '';
|
},
|
|
// 获取提现方式文本
|
getPayTypeText(type) {
|
const typeMap = {
|
10: '微信',
|
20: '支付宝',
|
30: '银行卡'
|
};
|
return typeMap[type] || '未知';
|
},
|
|
goback() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.cash-list-vip {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
|
.head_top {
|
position: absolute;
|
width: 100%;
|
padding-top: var(--status-bar-height);
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.cash-tabs {
|
display: flex;
|
background: #fff;
|
margin-bottom: 20rpx;
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 30rpx 0;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
|
&.active {
|
color: #FF5649;
|
font-weight: bold;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 60rpx;
|
height: 6rpx;
|
background: #FF5649;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
}
|
|
.cash-list {
|
.cash-item {
|
background: #fff;
|
margin-bottom: 20rpx;
|
|
.cash-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 30rpx;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
.cash-no {
|
font-size: 26rpx;
|
color: #999;
|
}
|
|
.cash-status {
|
font-size: 26rpx;
|
|
&.pending {
|
color: #FF9900;
|
}
|
|
&.approved {
|
color: #07c160;
|
}
|
|
&.rejected {
|
color: #FF5649;
|
}
|
|
&.paid {
|
color: #07c160;
|
}
|
}
|
}
|
|
.cash-content {
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
.cash-info {
|
.info-item {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: #333;
|
|
&.red {
|
color: #FF5649;
|
}
|
}
|
}
|
}
|
}
|
|
.cash-footer {
|
padding: 20rpx 30rpx;
|
|
.cash-time {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
|
.reject-reason {
|
padding: 20rpx 30rpx;
|
background: #fff9f9;
|
font-size: 26rpx;
|
color: #FF5649;
|
border-top: 1rpx solid #f5f5f5;
|
}
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 100rpx 0;
|
color: #999;
|
font-size: 28rpx;
|
}
|
}
|
|
.load-more {
|
text-align: center;
|
padding: 30rpx;
|
|
view {
|
display: inline-block;
|
padding: 15rpx 30rpx;
|
background: #f5f5f5;
|
border-radius: 30rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
}
|
</style>
|
