mdapp/pages/index/index.vue

<template>
	<view class="page u-skeleton">
		<wm-watermark :text="userInfo.phone" :num="50"></wm-watermark>
		<!-- 经纪人信息卡片 -->
		<view class="userinfo-wrap u-skeleton-fillet box-shadow">
			<!-- 个人信息 -->
			<view class="userinfo">
				<view class="user">
					<view class="avatar-wrap" @click="pageTo('/pages/user/setting/avatar')">
						<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.user_id ? userInfo.nickname ? userInfo.nickname : '未设置用户名'  : '未登录'}}
						</view>
					</view>
					<image v-if="userInfo && userInfo.manage_type == 2" src="../../static/bg_scan.png" class="scoped-scan-img" @click="scanHandle"></image>
				</view>
				<u-button
					v-if="!userInfo.user_id"
					class="u-skeleton-fillet"
					size="mini"
					type="primary"
					@click="pageTo('/pages/user/login/login')"
					:customStyle="{ margin: 0 }"
				>
					立即登录
				</u-button>
				<view
					v-if="userInfo.user_id" style="padding: 20px" @click="pageTo('/pages/user/setting/setting')">
					<u-icon name="/static/icon/setting.png" size="24"></u-icon>
				</view>
			</view>
			<u-line length="650rpx" margin="30rpx 0 0"></u-line>
			<!-- 数据信息 -->
			<view class="datainfo">
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=1')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['1'] || 0}}</view>
					<view class="item u-skeleton-fillet">未到访</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=2')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['2'] || 0}}</view>
					<view class="item u-skeleton-fillet">已到访</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=3')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['3'] || 0}}</view>
					<view class="item u-skeleton-fillet">已认购</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=4')">
					<view class="data u-skeleton-fillet">
						{{reportStepCountObj['4'] || 0}}
					</view>
					<view class="item u-skeleton-fillet">已签约</view>
				</view>
				<view class="data-item" @click="pageTo('/pages/agent/recommend/list?filterStepStatus=5')">
					<view class="data u-skeleton-fillet">{{reportStepCountObj['5'] || 0}}</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/money.png" size="32"></u-icon>
							报备管理
						</view>
						<view class="sub-title u-line-1">Filing</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('/pages/cust/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/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, item)">
					<view class="image-wrap">
						<text class="tag u-skeleton-rect">{{ item.estate_tag }}</text>
						<image class="u-skeleton-rect" :src="item.pri_image" mode="aspectFill"></image>
					</view>
					<view class="property-info-wrap">
						<view class="title u-skeleton-rect">{{ item.estate_name }}
							<text class="s">{{areaTypeObj[item.area_type]}}</text>
						</view>
						<view class="commission u-skeleton-rect" v-if="userInfo.auth_state == 1">预计佣金：{{ item.brokerage }}</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].estate_name + '介绍' }}</view>
				<view class="popup-body">
					<u-parse :html="propertyList[currentPropertyIndex].introduce"></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" style="text-decoration: underline;color: #2080f0;" @click="oneImgHandle(propertyList[currentPropertyIndex])">点击查看楼盘一页纸</view>
						</view>
						<view class="item" v-if="userInfo.auth_state == 1">
							<view class="item-title">预计佣金：</view>
							<view class="item-info" style="color: red;font-weight: bold;">{{ propertyList[currentPropertyIndex].brokerage }}</view>
						</view>
						<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].marketing_phone || '00000000' }}</view>
						</view>
						<view class="item">
							<view class="item-title">带看需收集：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].report_visit }}</view>
						</view>
						<view class="item">
							<view class="item-title">报备保护期：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].report_lock + '天' }}</view>
						</view>
						<view class="item">
							<view class="item-title">带看保护期：</view>
							<view class="item-info">{{ propertyList[currentPropertyIndex].lead_lock + '天' }}</view>
						</view>
					</view>
					<u-divider marginTop="20" marginBottom="20">更多</u-divider>
					<view class="scoped-estate-desc">
						<!-- <view v-html="curHtml"></view> -->
						<rich-text :nodes="curHtml | filtersRichText"></rich-text>
					</view>
				</view>
			</view>
		</u-popup>

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

		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>

<script>
var that;
import { arrToObj } from '@/utils'
import backTop from '@/components/back-top/back-top.vue'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
export default {
	components: {
		backTop,
		wmWatermark
	},
	filters: {
		filtersRichText(html) { //控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		}
	},
	data() {
		// 页面数据变量
		return {
			curHtml: '',
			backTop: {
				src: '../../static/back-top/top.png',
				scrollTop: 0
			},
			userInfo: {},
			skeletonLoading: true,
			agentTypeList: ['', '自由经纪人', '渠道经纪人', '老业主'],
			propertyList: [
				{
					estate_name: '在售项目1',
					pri_image: 'https://zdcdn.2bwin.cn/uploads/20220501/af6eb9c2a5d462be10a15c2302e5e6b5.jpg',
					sale_tag: '刚需好盘',
					rulesInfo: {
						des: '内容加载中1....',
						des_content: '内容加载中2....'
					}
				},
			],
			commonRulesShow: false,
			propertyPopupShow: false,
			currentPropertyIndex: 0,
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {},
			scrollTop: 0,
			reportStepCountObj: {},
			areaTypeObj: {},
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		this.backTop.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		// that = this;
		// this.options = options;
		// this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {
		this.init()
		const dictObj = uni.getStorageSync('MD_dict')
		this.areaTypeObj = arrToObj(dictObj.area_type)
	},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面触底部
	onReachBottom() {},
	// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
	onResize() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 监听 - 页面创建时
	created() {},
	// 函数
	methods: {
		oneImgHandle (item) {
			uni.api.estate.apiestateinfodetail({id: item.id}).then(res => {
				const curImgUrl = res.info_img || ''
				if (!curImgUrl) {
					uni.$msg('该楼盘暂未设置一页纸楼盘简介~')
					return
				}
				uni.previewImage({
					current: curImgUrl,
					urls: [curImgUrl],
				})
			})
		},
		scanHandle () {
			uni.scanCode({
				success: function (res) {
					uni.navigateTo({
						url: `/pages/agent/recommend/detail2?id=${res.result}`
					})
				}
			})
		},
		// 页面数据初始化函数
		init(options) {
			const userInfo2 = uni.getStorageSync('MD_userInfo2')
			this.userInfo = userInfo2 || {}
			uni.api.estate.apireportcount().then(res => {
				const reportStepCount = res.report_step_count || []
				let reportStepCountObj = {}
				reportStepCount.forEach(item => {
					reportStepCountObj[item.report_step] = item.total || 0
				})
				this.reportStepCountObj = {...reportStepCountObj}
			})
			uni.api.estate.apiestatelist({page_size: 100}).then(res => {
				const list = res.list || []
				// let oneObj = list[0] || {}
				this.propertyList = [...list]
				// this.propertyList = [list[0], list[1], list[2]]
			})
			
			// 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, item) {
			this.currentPropertyIndex = index;
			this.propertyPopupShow = true;
			uni.api.estate.apiestatecontentdetail({id: item.id}).then(res => {
				this.curHtml = res.content || ''
			})
		}
	},
	// 监听器
	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;
					.s {
						font-weight: normal;
						padding-left: 10rpx;
					}
				}

				.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;
			text-align: left;
			.item-title {
				font-weight: bold;
				width: 170rpx;
			}
			.item-info {
				flex: 1;
			}
		}
	}
}



.scoped-scan-img {
	padding-left: 20px;
	width:  90rpx;
	height: 90rpx;
}


.scoped-estate-desc {
	padding: 10rpx;
	iamge, img {
		width: 100%;
	}
}
</style>