mdapp/pages/user/mine/commission.vue

<template>
	<view class="page">
		<!-- 经纪人信息卡片 -->
		<view class="userinfo-wrap box-shadow">
			<!-- 个人信息 -->
			<view class="userinfo">
				<view class="user">
					<u-avatar
						class="u-skeleton-circle box-shadow"
						:src="vk.vuex.get('$user.userInfo.avatar')"
						size="120"
						:show-level="vk.checkToken() && vk.vuex.get('$user.agentInfo.verify_status') == 1"
						@click="vk.checkToken() ? vk.navigateTo('/pages/user/setting/avatar') : vk.toast('登录后可设置头像')"
					></u-avatar>
					<view class="info">
						<view class="nickname u-skeleton-rect">
							{{
								vk.checkToken()
									? vk.vuex.get('$user.agentInfo.relname')
										? vk.vuex.get('$user.agentInfo.relname')
										: vk.vuex.get('$user.userInfo.username')
									: '未登录'
							}}
						</view>
						<u-tag
							class="u-m-r-10"
							v-if="vk.checkToken() && vk.pubfn.isNotNull(vk.vuex.get('$user.agentInfo.type'))"
							size="mini"
							type="primary"
							:text="agentTypeList[vk.vuex.get('$user.agentInfo.type')]"
						></u-tag>
						<u-tag v-if="vk.vuex.get('$user.agentInfo.verify_status') == 1" size="mini" type="success" text="已认证"></u-tag>
						<view v-else class="mobile u-skeleton-rect">登录后开始推荐赚佣</view>
					</view>
				</view>
				<view class="commission-num">
					<view class="main-title"><u-count-to bold :start-val="0" :end-val="vk.vuex.get('$user.dataInfo.totalCommission')"></u-count-to></view>
					<view class="sub-title">元</view>
				</view>
			</view>
		</view>

		<view v-show="dataList.length == 0" class="empty-wrap"><u-empty text="暂无佣金记录"></u-empty></view>
		<!-- 记录 -->
		<u-cell-group class="box-shadow" v-show="dataList.length > 0">
			<u-cell-item
				v-for="(item, index) in dataList"
				:key="index"
				:title="item.customerInfo.name + '(' + item.customerInfo.mobile + ')'"
				:label="item.propertyInfo.name + ' / ' + item.amount + '元 / ' + vk.pubfn.timeFormat(item._add_time, 'yyyy-MM-dd')"
				value="查看详情"
				arrow
				@click="showDetailPopup(index)"
			></u-cell-item>
		</u-cell-group>

		<!-- 消息详情 -->
		<!-- <u-popup v-model="detailPopupShow" mode="center" width="80%" height="480rpx" border-radius="20" closeable close-icon-color="#fff">
			<view class="bwin-popup">
				<view class="popup-header">消息详情</view>
				<view v-if="detailPopupShow" class="popup-body">
					<text class="content" v-if="dataList[currentItemIndex].type == 'text'">{{ dataList[currentItemIndex].body.content }}</text>
					<u-image v-if="dataList[currentItemIndex].type == 'image'" :src="dataList[currentItemIndex].body.files" mode="widthFix" width="100%"></u-image>
					<view class="from-info">
						<view class="nickname">{{ dataList[currentItemIndex].fromUserInfo.nickname }}</view>
						<view class="date">{{ dataList[currentItemIndex]._add_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
				</view>
			</view>
		</u-popup> -->

		<u-loadmore
			v-if="dataList.length > 0"
			marginTop="20"
			:line="true"
			:status="loadmore.status"
			:loading-text="loadmore.loadingText"
			:loadmore-text="loadmore.defaultText"
			:nomore-text="loadmore.nomoreText"
		/>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'],
			dataList: [],
			detailPopupShow: false,
			currentItemIndex: 0,
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currentPage: 1
			}
		};
	},
	onLoad() {
		that = this;

		vk.callFunction({
			url: 'client/agent/kh/getCommissionList',
			title: '请求中...',
			data: {
				agentId: vk.vuex.get('$user.agentInfo._id')
			},
			needAlert: false
		}).then(res => {
			if (res.list.length < 10) {
				that.loadmore.status = 'nomore';
			}
			that.dataList = res.list;
			vk.vuex.set('$user.dataInfo.totalCommission', res.totalCommission);
		});
	},
	onReachBottom() {
		if (that.loadmore.status == 'nomore') {
			return;
		}
		that.loadmore.currentPage++;
		vk.callFunction({
			url: 'client/agent/kh/getCommissionList',
			title: '请求中...',
			needAlert: false,
			data: {
				pageIndex: that.loadmore.currentPage,
				agentId: vk.vuex.get('$user.agentInfo._id')
			}
		}).then(res => {
			if (res.list.length < 10) {
				that.loadmore.status = 'nomore';
			}
			that.dataList = that.dataList.concat(res.list);
		});
	},
	methods: {
		showDetailPopup(index) {
			that.currentItemIndex = index;
			that.detailPopupShow = true;
		}
	}
};
</script>
<style lang="scss">
.page {
	min-height: calc(100vh - 44px);
}
.userinfo-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #fff;
	padding: 32rpx;
	width: 100%;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	position: relative;

	.userinfo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.user {
			display: flex;
			align-items: center;

			.info {
				margin-left: 32rpx;

				.nickname {
					font-size: $u-p;
					font-weight: bold;
					color: $u-main-color;
					margin-bottom: 5rpx;
				}

				.mobile {
					font-size: $u-p1;
					color: $u-tips-color;
				}
			}
		}
	}

	.commission-num {
		display: flex;
		align-items: flex-end;
		.main-title {
			font-size: $u-h1;
			font-weight: bold;
			line-height: $u-h2;
			margin-right: 10rpx;
		}
		.sub-title {
			font-size: $u-p2;
		}
	}
}
.popup-body {
	.content {
		font-size: $u-p;
		display: flex;
		padding: 20rpx;
		background-color: $u-bg-color;
		border-radius: 10rpx;
		width: 100%;
	}

	.from-info {
		padding-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $u-p1;

		.nickname {
			color: $u-main-color;
		}

		.date {
			color: $u-content-color;
		}
	}
}
</style>