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.
287 lines
6.4 KiB
287 lines
6.4 KiB
<template>
|
|
<view class="running-water">
|
|
<navbar :title="title[status]" leftClick @leftClick="leftClick"
|
|
bgColor="#DC2828"
|
|
color="#fff"
|
|
/>
|
|
|
|
<view style="background-color: #DC2828;height: 150rpx;">
|
|
|
|
</view>
|
|
|
|
<view class="card-wrapper">
|
|
<view class="card">
|
|
<view class="card-section">
|
|
<view class="amount-title">总佣金(元)</view>
|
|
<view class="amount-value">¥ {{ info.lj_money }}</view>
|
|
<!-- <view class="action-btn" @click="goWithdraw">提现</view> -->
|
|
</view>
|
|
<view class="card-divider"></view>
|
|
<view class="card-section">
|
|
<view class="amount-title">累计提现(元)</view>
|
|
<view class="amount-value">¥ {{ info.lj_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="date-filter">
|
|
<text class="filter-title">金额明细</text>
|
|
|
|
<view class="filter-actions">
|
|
<view class="date-select" @click="openCalendar">
|
|
<text class="date-text">{{queryParams.year || '全部'}} {{queryParams.month || ''}}</text>
|
|
<uv-icon name="calendar" size="32rpx" color="#666"></uv-icon>
|
|
</view>
|
|
|
|
<view v-if="queryParams.year" class="reset-btn" @click="resetFilter">
|
|
<uv-icon name="trash" size="28rpx" color="#999"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tab-box">
|
|
<view class="tab-box1" v-if="agentFlow.records.length>0 && agentFlow.total>0">
|
|
<uv-cell center border :title="item.title" v-for="(item, index) in agentFlow.records" :key="item.id"
|
|
:value="x[item.type] + item.money" :label="item.createTime" />
|
|
</view>
|
|
<view style="padding: 100rpx 0;" v-else>
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 日历选择器 -->
|
|
<uv-calendars
|
|
ref="calendar"
|
|
:insert="false"
|
|
mode="year-month"
|
|
color="#DC2828"
|
|
@confirm="calendarConfirm"
|
|
></uv-calendars>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
year: '',
|
|
month: ''
|
|
},
|
|
title: ['余额记录', '提现记录', '佣金记录'],
|
|
agentFlow: {
|
|
total: 1,
|
|
records: []
|
|
},
|
|
x: ['+', '-', '-', '+'],
|
|
status: 0,
|
|
info : {},
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getAgentFlow()
|
|
},
|
|
onReachBottom() {
|
|
this.loadMoreData()
|
|
},
|
|
onLoad(e) {
|
|
this.status = e.status || 0;
|
|
// 加载数据
|
|
this.getAgentFlow();
|
|
this.$store.commit('getUserInfo');
|
|
this.getTeamInfo();
|
|
},
|
|
methods: {
|
|
// 获取团队信息
|
|
getTeamInfo() {
|
|
this.$api('getTeamHeader', res => {
|
|
if (res.code == 200) {
|
|
this.info = res.result;
|
|
}
|
|
})
|
|
},
|
|
loadMoreData(){
|
|
if(this.queryParams.pageSize < this.total){
|
|
this.queryParams.pageSize += 10
|
|
this.getAgentFlow()
|
|
}
|
|
},
|
|
leftClick() { //返回钱包
|
|
uni.navigateBack(-1)
|
|
},
|
|
getAgentFlow() { //获取流水记录
|
|
let type = this.status;
|
|
const params = {
|
|
type,
|
|
pageNo: this.queryParams.pageNo,
|
|
pageSize: this.queryParams.pageSize
|
|
};
|
|
|
|
// 只有当年份有值时才添加年份筛选
|
|
if (this.queryParams.year) {
|
|
// 提取数字部分
|
|
const year = this.queryParams.year.replace('年', '');
|
|
params.year = year;
|
|
|
|
// 如果月份有值，添加月份筛选
|
|
if (this.queryParams.month) {
|
|
const month = this.queryParams.month.replace('月', '');
|
|
params.month = month;
|
|
}
|
|
}
|
|
|
|
this.$api('getLogList', params, res => {
|
|
if (res.code == 200) {
|
|
this.agentFlow = res.result;
|
|
}
|
|
})
|
|
},
|
|
goWithdraw() {
|
|
// 跳转到提现页面
|
|
uni.navigateTo({
|
|
url: '/pages_order/mine/withdraw'
|
|
});
|
|
},
|
|
// 日历选择器相关方法
|
|
openCalendar() {
|
|
this.$refs.calendar.open();
|
|
},
|
|
calendarConfirm(e) {
|
|
// 判断是否有值
|
|
if (e.year && e.month) {
|
|
this.queryParams.year = e.year + '年';
|
|
this.queryParams.month = e.month + '月';
|
|
} else {
|
|
// 重置为全部
|
|
this.queryParams.year = '';
|
|
this.queryParams.month = '';
|
|
}
|
|
|
|
// 重置页码
|
|
this.queryParams.pageNo = 1;
|
|
|
|
// 更新数据
|
|
this.getAgentFlow();
|
|
},
|
|
// 重置筛选
|
|
resetFilter() {
|
|
this.queryParams.year = '';
|
|
this.queryParams.month = '';
|
|
this.queryParams.pageNo = 1;
|
|
this.getAgentFlow();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.running-water {
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
background: #F5F5F5;
|
|
|
|
.card-wrapper {
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
margin-top: -90rpx;
|
|
z-index: 10;
|
|
|
|
.card {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
|
|
.card-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
|
|
.amount-title {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
color: #DC2828;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 160rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
border: 1px solid #DC2828;
|
|
color: #DC2828;
|
|
font-size: 28rpx;
|
|
border-radius: 35rpx;
|
|
}
|
|
}
|
|
|
|
.card-divider {
|
|
width: 1px;
|
|
background-color: #eee;
|
|
}
|
|
}
|
|
}
|
|
|
|
.date-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 20rpx;
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.filter-title {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.date-select {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12rpx 20rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8rpx;
|
|
|
|
.date-text {
|
|
margin-right: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.reset-btn {
|
|
margin-left: 20rpx;
|
|
padding: 12rpx;
|
|
}
|
|
}
|
|
|
|
.tab-box {
|
|
margin: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|