dou_fire/pages/account/cash.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>
		<!-- 账户余额 -->
		<view class="total" :style="'background-image: url(' + require('@/static/imgs/cash_back.png') + ');'">
			<view class="total-value nowrap">{{total}}</view>
			<view class="total-text">{{type == 'self' ? '个人总业绩': '团队总业绩'}}</view>
		</view>
		<!-- 账户记录 -->
		<view class="logs">
			<view class="log-item">
				<view class="tabs">
					<u-tabs
						:list="tabs"
						:activeStyle="{'color': '#446EFE'}"
						lineColor="#446EFE"
						:scrollable="false"
						@click="onDayTab"
					></u-tabs>
				</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>类&nbsp;&nbsp;&nbsp;&nbsp;型</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>客&nbsp;&nbsp;&nbsp;&nbsp;户</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>时&nbsp;&nbsp;&nbsp;&nbsp;间</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>
		
	</view>
</template>

<script>
	import { cash } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				tabs		: [
					{ name: '当月业绩', value: 'month'},
					{ name: '当年业绩', value: 'year'}
				],
				dayType		: 'month',
				type		: 'self',
				total		: '0.00',
				list		: [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status  	: ''
			};
		},
		created() {
			this.getLog()
		},
		methods: {
			onTabs(e){
				if(this.type === e) return
				this.type = e
				this.page.current = 1
				this.getLog()
			},
			// 选择日期
			onDayTab(e){
				if(this.dayType === e.value) return
				this.dayType = e.value
				this.page.current = 1
				this.getLog()
			},
			// 获取列表
			getLog(){
				cash({
					day : this.dayType,
					type: this.type,
					page: this.page.current
				}).then(res => {
					let { total, lists } = res;
					let atList   = lists.page.current == 1 ? [] : this.list
					this.list = atList.concat(lists.data)
					this.total = total
					this.page = lists.page
					this.pagesShow = false
				}).catch(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;
		}
	}
	// 记录空
	.list-null{
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// 记录
	.logs{
		padding: 30rpx;
		box-sizing: border-box;
		.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: 100rpx;
					}
				}
				&-val{
					text-align: right;
					width: calc(100% - 100rpx);
				}
			}
		}
	}
</style>