dingdong-mall/pages/my/my-team-member.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">查看团队（{{totalMembers}}）</block>
		</cu-custom>
		<!-- 团队成员信息 -->
		<view class="margin-top-sm margin-lr-sm padding bg-white name-card shadow-warp" v-for="(member, index) in members">
			<!-- 个人名片 -->
			<view class="flex justify-start">
				<view class="cu-avatar round" :style="'background-image:url(' + member.customerLogoUrl + '); width: 130rpx; height: 130rpx;'"></view>
				<view class="margin-left-sm flex-column-around">
					<view class="text-black text-xl">{{member.name}}</view>
					<view class="">
						<text class="margin-right-xs">角色：合伙人</text>
					</view>
				</view>
			</view>
			<!-- 实名及公告图标 -->
			<view class="flex justify-end oper-bar">
				<view class="text-center margin-right-sm text-orange" @click="makePhoneCall(member.phone)">
					<view class="cuIcon-phone"></view>
				</view>
			</view>
			<!-- 人员下辖团队统计 -->
			<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
				<view class="cu-item">
					<view class="margin-bottom-xs">客户数</view>
					<view class="text-red">{{member.customerNums}}</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs">本月绑定</view>
					<view class="text-red">{{member.customerBindCurMonth}}</view>
				</view>
				<view class="cu-item solid-left">
					<view class="margin-bottom-xs">团队</view>
					<view class="text-red">{{member.teamNums}}</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs">本月绑定</view>
					<view class="text-red">{{member.teamBindCurMonth}}</view>
				</view>
				<view class="cu-item" v-for="(item, index) in member.orderAnalyse">
					<view class="margin-bottom-xs">{{item.title}}</view>
					<view class="text-red" v-if="item.unit === 'yuan'">
						￥{{item.num}}
					</view>
					<view v-else class="text-red">
						{{item.num}}{{item.unit}}
					</view>
				</view>
			</view>
		</view>
		<load-status-bar class="margin-tb-xl" ref="loadStatusBar" @loadMore="loadMyOperaMembers"></load-status-bar>
	</view>
</template>

<script>
	import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';

	export default {
		components: {
			horizontalNameCard,
			loadStatusBar
		},
		data() {
			return {
				totalMembers: 0,
				members: [],
				curUserInfo: {},
				pageNum: 0,
				pageSize: 0
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				this.resetData();
				// this.myOperaMembers = await this.$api.data('myOperaMembers');
				this.loadMyOperaMembers();
			},
			resetData() {
				this.pageNum = this.$globalData.initPageNum;
				this.pageSize = this.$globalData.initPageSize;
			},
			makePhoneCall(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},
			async loadMyOperaMembers(params = {}) {
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.customerPlace = this.curUserInfo.customerId;
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.qryCustomerList(params);
					let rowsLength = res.rows.length;
					if (rowsLength > 0) {
						this.members = this.members.concat(res.rows);
						this.totalMembers = res.total;
						this.pageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar.showLoadMore();
							return;
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
			}
		}
	}
</script>

<style scoped>
	.name-card {
		position: relative;
	}

	.name-card .oper-bar {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 50rpx;
	}
</style>