mdapp/pages/index/index.vue

<template>
	<view class="page u-skeleton">
		<!-- 经纪人信息卡片 -->
		<view class="userinfo-wrap u-skeleton-fillet box-shadow">
			<!-- 个人信息 -->
			<view class="userinfo">
				<view class="user">
					<view class="avatar-wrap">
						<u-avatar
							class="u-skeleton-circle"
							:src="userInfo.avatar"
							size="128"
							mode="circle"
						></u-avatar>
						<!-- :show-level="true" -->
						<view class="avatar-bg box-shadow"></view>
					</view>
					<view class="info">
						<view class="nickname u-skeleton-rect">
							{{userInfo.nickname ? userInfo.nickname : '未登录'}}
						</view>
					</view>
				</view>
				<u-button
					v-if="!userInfo.nickname"
					class="u-skeleton-fillet"
					size="mini"
					type="primary"
					@click="pageTo('/pages/user/login/login')"
					:customStyle="{ margin: 0 }"
				>
					立即登录
				</u-button>
				<u-button
					v-if="userInfo.nickname"
					<u-icon name="/static/icon/setting.png" size="24"></u-icon>
				</u-button>
			</view>
			<u-line length="650rpx" margin="30rpx 0 0"></u-line>
			<!-- 数据信息 -->
			<view class="datainfo">
				<view class="data-item">
					<view class="data u-skeleton-fillet">00</view>
					<view class="item u-skeleton-fillet">报备客户</view>
				</view>
				<view class="data-item">
					<view class="data u-skeleton-fillet">00</view>
					<view class="item u-skeleton-fillet">到访客户</view>
				</view>
				<view class="data-item">
					<view class="data u-skeleton-fillet">00</view>
					<view class="item u-skeleton-fillet">成交客户</view>
				</view>
				<view class="data-item">
					<view class="data u-skeleton-fillet">
						100000
					</view>
					<view class="item u-skeleton-fillet">总佣金</view>
				</view>
				<view class="data-item">
					<view class="data u-skeleton-fillet">00</view>
					<view class="item u-skeleton-fillet">未读消息</view>
				</view>
			</view>
		</view>

		<!-- 功能卡片 -->
		<view class="function-card-wrap">
			<view class="col-card-wrap">
				<view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('/pages/agent/recommend/create')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/thump-up.png" size="32"></u-icon>
							️我要推荐
						</view>
						<view class="sub-title u-line-1">Recommend</view>
					</view>
					<u-image src="/static/icon/wenli1.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
				<view class="function-card box-shadow u-skeleton-fillet"  @click="pageTo('/pages/agent/recommend/list')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/customer.png" size="32"></u-icon>
							我的客户
						</view>
						<view class="sub-title u-line-1">Customer</view>
					</view>
					<u-image src="/static/icon/wenli2.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
			</view>
			<view class="col-card-wrap">
				<view class="function-card box-shadow u-skeleton-fillet" @click="pageTo('dev')">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/money.png" size="32"></u-icon>
							我的佣金
						</view>
						<view class="sub-title u-line-1">Commission</view>
					</view>
					<u-image src="/static/icon/wenli3.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
				<view class="function-card box-shadow u-skeleton-fillet" @click="commonRulesShow = true">
					<view class="title-wrap">
						<view class="main-title">
							<u-icon class="u-m-r-5" name="/static/icon/book.png" size="32"></u-icon>
							佣金政策
						</view>
						<view class="sub-title u-line-1">Rules</view>
					</view>
					<u-image src="/static/icon/wenli4.png" mode="heightFix" height="144rpx" class="icon"></u-image>
				</view>
			</view>
		</view>

		<!-- 项目卡片 -->
		<view class="card-list-wrap box-shadow u-m-b-20">
			<view class="header-title-warp">
				<view class="title u-skeleton-rect">
					<u-icon class="u-m-r-5" name="/static/icon/fire.png" size="36"></u-icon>
					高佣热销
				</view>
				<view v-show="propertyList.length > 5" class="more u-skeleton-rect">
					更多
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="propertyList.length == 0" class="u-m-t-40 u-m-b-40"><u-empty mode="list" text="暂无在售房源"></u-empty></view>
			<view :class="'property-row-wrap'">
				<view class="property-body u-skeleton-fillet box-shadow" v-for="(item, index) in propertyList" :key="index" @click="showDetail(index)">
					<view class="image-wrap">
						<text class="tag u-skeleton-rect">{{ item.sale_tag }}</text>
						<image class="u-skeleton-rect" :src="item.cover_image" mode="aspectFill"></image>
					</view>
					<view class="property-info-wrap">
						<view class="title u-skeleton-rect">{{ item.name }}</view>
						<view class="commission u-line-1 u-skeleton-rect">{{ item.commissionText }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 平台佣金政策弹窗 -->
		<u-popup v-model="commonRulesShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
			<view class="bwin-popup">
				<view class="popup-header">平台佣金政策</view>
				<view class="popup-body"><!-- <u-parse :html="xxxxxxxxxx"></u-parse> --></view>
			</view>
		</u-popup>

		<!-- 项目佣金政策信息弹窗 -->
		<u-popup v-model="propertyPopupShow" mode="center" width="80%" height="800rpx" border-radius="20" closeable>
			<view class="bwin-popup">
				<view class="popup-header">{{ propertyList[currentPropertyIndex].name + '佣金政策' }}</view>
				<view class="popup-body">
					<u-parse :html="propertyList[currentPropertyIndex].rulesInfo.des_content"></u-parse>
					<u-divider marginTop="20" marginBottom="20">详情</u-divider>
					<view class="property-info">
						<view class="item">
							<view class="item-title">营销中心：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].address }}</view>
						</view>
						<view class="item">
							<view class="item-title">销售热线：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].tel }}</view>
						</view>
						<view class="item">
							<view class="item-title">保护期：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].rulesInfo.safe_time + '小时' }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 骨架屏 -->
		<u-skeleton :loading="skeletonLoading" animation></u-skeleton>
	</view>
</template>

<script>
var that;
export default {
	data() {
		// 页面数据变量
		return {
			userInfo: {},
			skeletonLoading: true,
			agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'],
			propertyList: [
				{
					name: '在售项目1',
					cover_image: 'https://zdcdn.2bwin.cn/uploads/20220501/af6eb9c2a5d462be10a15c2302e5e6b5.jpg',
					sale_tag: '刚需好盘',
					rulesInfo: {
						des: '内容加载中....',
						des_content: '内容加载中....'
					}
				},
				{
					name: '在售项目2',
					cover_image: 'https://zdcdn.2bwin.cn/uploads/20220501/f11aa1c5e2e091f6b1e8a1d58fbe9d5e.jpg',
					sale_tag: '佣金易拿',
					rulesInfo: {
						des: '内容加载中....',
						des_content: '内容加载中....'
					}
				}
			],
			commonRulesShow: false,
			propertyPopupShow: false,
			currentPropertyIndex: 0,
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {},
			scrollTop: 0
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面触底部
	onReachBottom() {},
	// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
	onResize() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 监听 - 页面创建时
	created() {},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			const userInfo = uni.getStorageSync('MD_userInfo')
			this.userInfo = userInfo
			
			// uni.api.estate.apireportlist({
			// 	token: 'xxxx'
			// }).then(res => {
			// 	console.log(res)
			// })
			// uni.api.estate.apiestatelist().then(res => {
			// 	console.log(res)
			// })
			
			// let currentTime = Date.parse(new Date()) / 1000; // 秒级
			// // 初始化平台数据
			// let systemConfig = vk.vuex.get('$app.systemConfig');

			// if (!systemConfig.use_skeleton) {
				this.skeletonLoading = false;
			// }

			// if (vk.pubfn.isNull(systemConfig._id)) {
			// 	// 不存在则直接初始化
			// 	vk.callFunction({
			// 		url: 'client/agent/pub/getConfigInfo',
			// 		needAlert: false
			// 	}).then(res => {
			// 		vk.vuex.set('$app.systemConfig', res.config);
			// 		vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
			// 	});
			// } else {
			// 	let mathTime = ((currentTime - systemConfig.lastGetTime) / 3600).toFixed(2);
			// 	if (mathTime > systemConfig.cache_time) {
			// 		vk.callFunction({
			// 			url: 'client/agent/pub/getConfigInfo',
			// 			needAlert: false
			// 		}).then(res => {
			// 			vk.vuex.set('$app.systemConfig', res.config);
			// 			vk.vuex.set('$app.systemConfig.lastGetTime', currentTime);
			// 		});
			// 	}
			// }

			// // 请求经纪人个人数据
			// let lastInitAgentDataTime = vk.vuex.get('$user.history.lastInitAgentDataTime');
			// if (currentTime - lastInitAgentDataTime >= 60 && vk.checkToken()) {
			// 	// 个人数据1分钟主动更新1次
			// 	vk.callFunction({
			// 		url: 'client/agent/kh/getAgentData',
			// 		data: {
			// 			agentId: vk.vuex.get('$user.agentInfo._id')
			// 		},
			// 		needAlert: false
			// 	}).then(res => {
			// 		vk.vuex.set('$user.dataInfo.recommendNum', res.data.recommendNum);
			// 		vk.vuex.set('$user.dataInfo.visitedNum', res.data.visitedNum);
			// 		vk.vuex.set('$user.dataInfo.buyNum', res.data.buyNum);
			// 		vk.vuex.set('$user.dataInfo.totalCommission', res.data.totalCommission);
			// 		vk.vuex.set('$user.history.lastInitAgentDataTime', currentTime);
			// 	});
			// }

			// // 请求未读消息数量
			// // 最快1分钟请求一次
			// let lastGetUnreadMsgTime = vk.vuex.get('$user.history.lastGetUnreadMsgTime');
			// if (currentTime - lastGetUnreadMsgTime > 60 && vk.checkToken()) {
			// 	vk.callFunction({
			// 		url: 'client/agent/kh/getUnreadMsgNum'
			// 	}).then(res => {
			// 		vk.vuex.set('$user.dataInfo.unreadMsgNum', res.num);
			// 		vk.vuex.set('$user.history.lastGetUnreadMsgTime', currentTime);
			// 	});
			// }

			// // 请求在售项目列表
			// vk.callFunction({
			// 	url: 'client/agent/pub/getPropertyList',
			// 	needAlert: false
			// }).then(res => {
			// 	that.propertyList = res.list;

			// 	// 存储到vuex，方便其他页面调用
			// 	if (res.list.length < 5) {
			// 		// 若大于等于5则可能有更多项目，则不缓存
			// 		let list = res.list.map(function(val, index) {
			// 			return { value: val._id, label: val.name };
			// 		});
			// 		vk.vuex.set('$app.propertyList', list);
			// 	}

			// 	// 拼接佣金政策
			// 	// 非经纪人身份时显示佣金政策简介
			// 	// 否则显示最高可获得的佣金额度
			// 	let i;
			// 	for (i = 0; i < res.list.length; i++) {
			// 		let agentType = vk.vuex.get('$user.agentInfo.type');
			// 		if (vk.pubfn.isNull(agentType)) {
			// 			// 还未注册为经纪人
			// 			that.propertyList[i].commissionText = that.propertyList[i].rulesInfo.des;
			// 		} else {
			// 			let commissionInfo = that.propertyList[i].rulesInfo.commission_info;
			// 			let item = vk.pubfn.getListItem(commissionInfo, 'type', agentType);
			// 			that.propertyList[i].commissionText = '您最高可获得佣金' + item.amount + '元';
			// 		}
			// 	}

			// 	that.skeletonLoading = false;
			// });
		},
		pageTo(path) {
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		// 弹窗展示项目佣金详情
		showDetail(index) {
			that.currentPropertyIndex = index;
			that.propertyPopupShow = true;
		}
	},
	// 监听器
	watch: {},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.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;
			
			.avatar-wrap {
				position: relative;
				.avatar-bg {
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 50%;
					width: 128rpx;
					height: 128rpx;
				}
			}

			.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;
				}
			}
		}
	}
	.datainfo {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 20rpx 0 0;

		.data-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.data {
				font-weight: bold;
				font-size: $u-h2;
				line-height: $u-h2;
				margin-bottom: 10rpx;
			}

			.item {
				font-size: $u-p2;
				color: $u-content-color;
			}
		}
	}
}

.function-card-wrap {
	.col-card-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.function-card {
		background-color: #fff;
		padding: 32rpx 20rpx;
		width: 345rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;

		.title-wrap {
			text-align: left;

			.main-title {
				display: flex;
				align-items: center;
				font-size: $u-p;
				font-weight: bold;
			}

			.sub-title {
				font-size: $u-p2;
				color: $u-content-color;
			}
		}

		.icon {
			text-align: right;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
}

// 项目列表
.card-list-wrap {
	background-color: #fff;
	// margin: 0rpx -20rpx 20rpx;
	padding: 20rpx 20rpx 0 20rpx;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;

	.header-title-warp {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			display: flex;
			align-items: center;
			color: $u-main-color;
			font-weight: bold;
			font-size: $u-p;
		}

		.more {
			font-size: $u-sub;
			color: $u-tips-color;
		}
	}

	// 行版
	.property-row-wrap {
		.property-body {
			width: 100%;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			// background-color: #fff;
			.image-wrap {
				position: relative;

				image {
					width: 100%;
					height: 300rpx;
					display: block;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}

				.tag {
					color: #ffffff;
					background-color: $u-theme-color;
					font-size: $u-p2;
					position: absolute;
					z-index: 1;
					left: 0;
					padding: 8rpx 20rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.property-info-wrap {
				padding: 20rpx;

				.title {
					font-weight: bold;
					color: $u-main-color;
					font-size: $u-p;
				}

				.commission {
					margin-top: 10rpx;
					font-size: $u-p2;
					color: $u-content-color;
				}
			}
		}
	}

	// 两列版
	.property-col-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;

		.property-body {
			width: 325rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			// background-color: #fff;
			.image-wrap {
				position: relative;

				image {
					width: 100%;
					height: 300rpx;
					display: block;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}

				.tag {
					color: #ffffff;
					background-color: $u-theme-color;
					font-size: $u-sub;
					position: absolute;
					z-index: 1;
					left: 0;
					padding: 8rpx 20rpx;
					border-top-left-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.property-info-wrap {
				padding: 20rpx;

				.title {
					font-weight: bold;
					color: $u-main-color;
					font-size: $u-p2;
				}

				.commission {
					margin-top: 10rpx;
					font-size: $u-sub;
					color: $u-content-color;
				}
			}
		}
	}
}

.popup-body {
	.property-info {
		font-size: $u-p1;
		.item {
			display: flex;
			margin-bottom: 10rpx;

			.item-title {
				font-weight: bold;
			}
		}
	}
}
</style>