301 lines
7.0 KiB
Vue
301 lines
7.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-sticky bgColor="#446EFE">
|
||
<view class="type-tab">
|
||
<text :class="{'active': type == 'self' }" @click="onTabs('self')">个人业绩</text>/
|
||
<text :class="{'active': type == 'group' }" @click="onTabs('group')">团队业绩</text>
|
||
</view>
|
||
</u-sticky>
|
||
<!-- 账户余额 -->
|
||
<oct-calendar-picker ref="CalendarPicker" @change="onDay" />
|
||
<view class="total" :style="'background-image: url(' + require('@/static/imgs/cash_back.png') + ');'">
|
||
<view class="total-value nowrap">{{count}}</view>
|
||
<view class="total-text">{{type == 'self' ? '个人总业绩': '团队总业绩'}}</view>
|
||
<view class="total-total">筛选区间业绩：{{total}}</view>
|
||
</view>
|
||
<!-- 账户记录 -->
|
||
<view class="logs">
|
||
<view class="log-item">
|
||
<view class="log-header">
|
||
<view class="log-header-data" @click="onPickeShow()">
|
||
<label>筛选：</label>
|
||
<view class="log-header-data-q">
|
||
<view :class="{'show': dayTime.start_at != ''}">{{dayTime.start_at || "开始日期"}}</view>
|
||
<view :class="{'show': dayTime.end_at != ''}">{{dayTime.end_at || "结束日期"}}</view>
|
||
</view>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
<view class="log-header-title" @click="onDefaultLog">默认</view>
|
||
</view>
|
||
<block v-if="list.length > 0">
|
||
<view class="log-flex" v-for="(item, index) in list" :key="index">
|
||
<view class="log-flex-item">
|
||
<label>类 型：</label>
|
||
<view class="log-flex-val nowrap">{{item.type}}</view>
|
||
</view>
|
||
<view class="log-flex-item">
|
||
<label>金 额：</label>
|
||
<view class="log-flex-val nowrap">{{item.perf}}</view>
|
||
</view>
|
||
<view class="log-flex-item">
|
||
<label>客 户：</label>
|
||
<view class="log-flex-val nowrap">{{item.nick_name || '-'}}</view>
|
||
</view>
|
||
<view class="log-flex-item">
|
||
<label>推荐人：</label>
|
||
<view class="log-flex-val nowrap">{{item.parent_name || '-'}}</view>
|
||
</view>
|
||
<view class="log-flex-item">
|
||
<label>时 间：</label>
|
||
<view class="log-flex-val nowrap">{{item.created_at}}</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="list-null">
|
||
<u-empty
|
||
mode="history"
|
||
icon="http://cdn.uviewui.com/uview/empty/history.png"
|
||
text="暂无相关账户记录"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<u-loadmore v-if="pagesShow" :status="status" />
|
||
</view>
|
||
<!-- 筛选时间 -->
|
||
<!-- <button @click="">打开弹窗</button> -->
|
||
<!-- <u-calendar
|
||
v-if="maxDate != ''"
|
||
:show="dayShow"
|
||
mode="range"
|
||
color="#446EFE"
|
||
:minDate="minDate"
|
||
:maxDate="maxDate"
|
||
monthNum="36"
|
||
title="选择筛选区间"
|
||
@close="dayShow = false"
|
||
@confirm="onDay"
|
||
></u-calendar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { cash } from '@/apis/interfaces/account.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
dayShow : false,
|
||
minDate : '',
|
||
maxDate : '',
|
||
dayTime : {
|
||
start_at: '',
|
||
end_at : ''
|
||
},
|
||
type : 'self',
|
||
total : '0.00',
|
||
count : '0.00',
|
||
list : [],
|
||
page : {
|
||
current : 1,
|
||
has_more: false,
|
||
},
|
||
pagesShow : false,
|
||
status : ''
|
||
};
|
||
},
|
||
created() {
|
||
this.getLog()
|
||
// 获取当天前日期
|
||
let date = new Date()
|
||
let year = date.getFullYear()
|
||
let month = date.getMonth() + 1
|
||
let day = date.getDate() + 1
|
||
this.maxDate = year + '-' + month + '-' + day
|
||
},
|
||
methods: {
|
||
// 打开时间筛选
|
||
onPickeShow(){
|
||
this.$refs.CalendarPicker.open()
|
||
},
|
||
// 筛选tab
|
||
onTabs(e){
|
||
if(this.type === e) return
|
||
this.type = e
|
||
this.page.current = 1
|
||
this.getLog()
|
||
},
|
||
// 默认日期
|
||
onDefaultLog(){
|
||
this.dayTime = {
|
||
start_at: '',
|
||
end_at : ''
|
||
}
|
||
this.page.current = 1
|
||
this.getLog()
|
||
},
|
||
// 选择日期
|
||
onDay(e){
|
||
this.dayTime = {
|
||
start_at: e.startDate,
|
||
end_at : e.endDate
|
||
}
|
||
this.dayShow = false
|
||
this.page.current = 1
|
||
this.getLog()
|
||
},
|
||
// 获取列表
|
||
getLog(){
|
||
cash({
|
||
start_at: this.dayTime.start_at,
|
||
end_at : this.dayTime.end_at,
|
||
type : this.type,
|
||
page : this.page.current
|
||
}).then(res => {
|
||
let { total, lists, start, now, count } = res;
|
||
let atList = lists.page.current == 1 ? [] : this.list
|
||
if(this.minDate == '') this.minDate = start
|
||
this.list = atList.concat(lists.data)
|
||
this.total = total
|
||
this.count = count
|
||
this.page = lists.page
|
||
this.pagesShow = false
|
||
}).catch(err => {
|
||
|
||
console.log(err)
|
||
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.pagesShow = true;
|
||
if(this.page.has_more){
|
||
this.status = 'loading';
|
||
this.page.current++
|
||
this.getLog()
|
||
return
|
||
}
|
||
this.status = 'nomore';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 统计类型选择
|
||
.type-tab{
|
||
text-align: center;
|
||
padding-bottom: 20rpx;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
text{
|
||
margin: 0 30rpx;
|
||
line-height: 70rpx;
|
||
&.active{
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
// 账户余额
|
||
.total{
|
||
margin: 30rpx 30rpx 0;
|
||
background-size: cover;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
padding: 50rpx 30rpx;
|
||
color: white;
|
||
.total-value{
|
||
font-weight: bold;
|
||
font-size: 60rpx;
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
}
|
||
.total-text{
|
||
font-size: 30rpx;
|
||
opacity: .7;
|
||
line-height: 40rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
.total-total{
|
||
margin-top: 30rpx;
|
||
border-top: solid 1px rgba(255, 255, 255, .7);
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
padding-top: 30rpx;
|
||
}
|
||
}
|
||
// 记录空
|
||
.list-null{
|
||
height: 50vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
// 记录
|
||
.logs{
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
// 记录筛选
|
||
.log-header{
|
||
border-bottom: solid 1rpx #ddd;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 0;
|
||
.log-header-title{
|
||
line-height: 70rpx;
|
||
font-size: 30rpx;
|
||
color: gray;
|
||
color: $main-color;
|
||
}
|
||
.log-header-data{
|
||
display: flex;
|
||
align-items: center;
|
||
label{
|
||
font-size: 30rpx;
|
||
}
|
||
.log-header-data-q{
|
||
font-size: 24rpx;
|
||
line-height: 30rpx;
|
||
color: gray;
|
||
.show{ color: $main-color; }
|
||
}
|
||
}
|
||
}
|
||
// 记录
|
||
.log-item{
|
||
background: white;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
.tabs{
|
||
border-bottom: solid 1rpx #F6F6F6;
|
||
margin: 0 -30rpx 10rpx;
|
||
}
|
||
.log-flex{
|
||
border-bottom: solid 1rpx #F6F6F6;
|
||
padding: 20rpx 0;
|
||
&:last-child{border-bottom: none;}
|
||
&-item{
|
||
line-height: 54rpx;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
label{
|
||
color: gray;
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
&-val{
|
||
text-align: right;
|
||
width: calc(100% - 140rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|