odd_job_applet/pages/broker/brokerlist.vue

<template>
	<view>
		<u-sticky>
			<view class="cu-bar search bg-gray">
				<view class="search-form round text-center">
					<text class="cuIcon-search"></text>
					<input @input="bindInput" :adjust-position="false" type="text" placeholder="请输入关键字"
						confirm-type="search"></input>
				</view>
				<view class="action" v-if="searchval!==''">
					<button class="cu-btn bg-white shadow-blur round" @click="btnSearch()">搜索</button>
				</view>
			</view>

			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					@markertap="markertap">
				</map>
			</view>
		</u-sticky>

		<view class="menu" v-if="false">
			<view class="menu-top">
				<view class="menu-top-item">优秀经纪人
					<view class="item-icon">
						<u-icon name="arrow-down" color="#000000" size="25rpx"></u-icon>
					</view>
				</view>
				<view class="menu-top-item" :style="filterbox!==null? 'color:#CA151C' : ''" data-filterbox="area"
					@tap="showFilter">{{arealist.title}}
					<view class="item-icon" :style="{transform:filterbox!==null?transform:'', transition:transition}">
						<u-icon name="arrow-down" :color="filterbox!==null? '#CA151C' : '#000000'"
							size="25rpx"></u-icon>
					</view>
				</view>
			</view>
			<view class="filtercon" v-if="filterbox!==null">
				<view class="grid margin-bottom text-left col-3 bg-white" v-if="filterbox=='area'">
					<view class="solids-right padding-bottom">
						<scroll-view scroll-y="true" style="height: 600rpx;">
							<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择省</view>
							<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(4,0)">全部</view>
							<block v-for="(item,index) in arealist.data" :key="index">
								<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(1,index)">
									{{item.title}}
								</view>
							</block>
						</scroll-view>
					</view>
					<view class="solids-right padding-bottom">
						<scroll-view scroll-y="true" style="height: 600rpx;">
							<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择市</view>
							<block v-for="(item,index) in arealist.cityarr" :key="index">
								<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(2,index)">
									{{item.title}}
								</view>
							</block>
						</scroll-view>
					</view>
					<view class="padding-bottom">
						<scroll-view scroll-y="true" style="height: 600rpx;">
							<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择区县</view>
							<block v-for="(item,index) in arealist.districtarr" :key="index">
								<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(3,index)">
									{{item.title}}
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>

		<view class="mainArea" :style="{height:mainHeight}">
			<view class="areaList">
				<scroll-view :style="{height:mainHeight}" class="areaScroll" scroll-y="true">
					<view class="areaCard" :class="areaItem == '' ? 'areaCardSel' : ''" @click="selArea('全部')">全部</view>
					<view class="areaCard" v-for="(item,index) in mainArea" :key="index"
						:class="areaItem == item ? 'areaCardSel' : ''" @click="selArea(item)">{{item}}</view>
				</scroll-view>
			</view>

			<view class="brokerList">
				<scroll-view :style="{height:mainHeight}" class="brokerScroll" scroll-y="true"
					@scrolltolower="brokerListLower">
					<view class="brokerCard" v-for="(item,index) in plist" :key="index">
						<view class="brokerCard-avatar">
							<image class="brokerCard-avatar-image"
								:src="item.muser.avatar ? item.muser.avatar : $getImageUrl('static/images/applet/dfhead.jpg')">
							</image>
							<view class="avatar-bg"
								:style="'background-image:url('+$getImageUrl('static/images/applet/bg/brokerIdentity.png')+');'">
								<view class="avatar-bg-title">金牌经纪人 {{item.title}}</view>
								<!-- <view class="avatar-bg-name"></view> -->
							</view>
						</view>
						<view class="brokerCard-infor">
							<view class="infor-header">
								<view :data-index="index" @tap="showModal">{{item.title}}</view>
								<image :data-telephone="item.mobile" @tap="makeTelephone" class="infor-header-icon"
									:src="$getImageUrl('static/images/applet/broker/contact.png')" mode="widthFix">
								</image>
							</view>
							<view class="infor-item" :data-index="index" @tap="showModal">
								<image class="infor-item-icon"
									:src="$getImageUrl('static/images/applet/broker/broker.png')" mode="widthFix">
								</image>
								<view class="infor-item-text">优秀经纪人</view>
							</view>
							<view class="infor-item" :data-index="index" @tap="showModal">
								<image class="infor-item-icon" :src="$getImageUrl('static/images/applet/comJobs/icon-pageView.png')"
									mode="widthFix">
								</image>
								<view class="infor-item-text">镇/村：{{item.town}} - {{item.village}}</view>
							</view>
							<view class="infor-item" :data-index="index" @tap="showModal">
								<image class="infor-item-icon"
									:src="$getImageUrl('static/images/applet/index/cardD.png')" mode="widthFix"></image>
								<view class="infor-item-text">服务区域：{{item.region}}</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="pstatus"></uni-load-more>
				</scroll-view>
			</view>
		</view>

		<view class="filterbg" v-if="false">
			<view class="flex justify-between solids-bottom padding bg-white">
				<view class="text-bold">推荐</view>
				<view class="flex justify-end">
					<view class="cu-tag radius" data-filterbox="area" @tap="showFilter">{{arealist.title}}</view>
				</view>
			</view>


		</view>

		<view class="bg-white cu-list menu-avatar" v-if="false">
			<block v-for="(item,index) in plist" :key="index">
				<view class="cu-item" style="border-bottom: 0rpx !important; border-top: 0rpx !important;">
					<view class="cu-avatar round lg"
						:style="'background-image:url('+(item.muser.avatar ? item.muser.avatar : $getImageUrl('static/images/applet/dfhead.jpg'))+');'">
					</view>
					<view class="content" :data-index="index" @tap="showModal">
						<view class="text-cut text-bold">{{item.title}}</view>
					</view>
					<view class="action">
						<button class="cu-btn bg-blue cuIcon" :data-telephone="item.mobile" @tap="makeTelephone">
							<text class="cuIcon-dianhua"></text>
						</button>
					</view>
				</view>
				<view class="itembox" :data-index="index" @tap="showModal">
					<view class="itembox-til">服务区域：</view>
					<view class="itembox-con text-gray">{{item.province}} - {{item.city}} - {{item.district}}</view>
				</view>
				<view class="itembox" :data-index="index" @tap="showModal">
					<view class="itembox-til">镇/村：</view>
					<view class="itembox-con text-gray">{{item.town}} - {{item.village}}</view>
				</view>
				<view class="itembox solids-bottom" style="padding-bottom: 30rpx;" :data-index="index" @tap="showModal">
					<view class="itembox-til">区域：</view>
					<view class="itembox-con text-gray" style="height: 75rpx; overflow: hidden;">
						<text>{{item.region}}</text>
					</view>
				</view>
				<view class="itembox solids-bottom" style="padding-bottom: 30rpx;" :data-index="index" @tap="showModal">
					<view class="itembox-til">基本介绍：</view>
					<view class="itembox-con text-gray" style="height: 75rpx; overflow: hidden;">
						<text>{{item.details}}</text>
					</view>
				</view>
			</block>
		</view>
		<!-- <uni-load-more :status="pstatus"></uni-load-more> -->

		<view class="cu-modal bottom-modal" :class="modal.name=='detailsbox'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green" @tap="hideModal">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-tb">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">姓名：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.title}}</view>
							</view>
						</view>
						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">手机号：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.mobile}}</view>
							</view>
							<view class="itembox-btn" :data-telephone="modal.brokerinfo.mobile" @tap="makeTelephone">拨打
							</view>
						</view>
						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">微信号：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.weixin}}</view>
							</view>
						</view>
						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">QQ号：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.qq}}</view>
							</view>
						</view>

						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">服务区域：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.province}} -
									{{modal.brokerinfo.city}}
								</view>
							</view>
						</view>
						<view class="itembox text-left">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">工作地点：</view>
								<view class="itembox-con text-gray">{{modal.brokerinfo.district}} -
									{{modal.brokerinfo.town}}-{{modal.brokerinfo.village}}
								</view>
							</view>
							<view class="itembox-btn" @tap="openMap">导航</view>
						</view>
						<view class="itembox text-left" style="padding-bottom: 30rpx;" :data-index="index"
							@tap="showModal">
							<view class="itemboxLeft">
								<view class="itembox-til text-right">基本介绍：</view>
								<view class="itembox-con text-gray">
									<text>{{modal.brokerinfo.details}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action text-gray" @tap="goNavPage('/pages/index/index')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/index.png"></image>
				</view>
				首页
			</view>
			<view class="action text-gray" @tap="goNavPage('/pages/comjobs/comjobs')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/jobs.png"></image>
				</view>
				招聘
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-gray videoimg" @tap="goNavPage('/pages/video/videolist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/video.png"></image>
				</view>
				微工作
			</view>
			<!-- #endif -->

			<view class="action text-red" @tap="goNavPage('/pages/broker/brokerlist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/brokerSelected.png"></image>
				</view>
				经纪人
			</view>

			<view class="action text-gray" @tap="goNavPage('/pages/my/my')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/my.png"></image>
				</view>
				我的
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				filterbox: null,
				arealist: {
					title: "区域",
					value: "",
					cityarr: [],
					districtarr: [],
					data: []
				},

				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				searchval: "",

				modal: {
					name: null,
					brokerinfo: {}
				},
				transform: "rotate(180deg)",
				transition: "all .3s",
				mainArea: [],
				areaItem: "",

				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0.000000,
				longitude: 0.000000,
				covers: [],
				mainHeight: 0,
				bottomHeight: 0
			};
		},
		onLoad: function() {
			_this = this;
			_this.arealist.data = require('@/common/area.json');
			_this.getMore();
			_this.getArea();

			uni.getLocation({
				success: function(res) {
					console.log(res);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
				},
			});
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			// if (_this.pstatus !== 'more') {
			// 	return;
			// }
			// _this.getMore();
		},
		onShareAppMessage: function(res) {
			return {
				title: "经纪人列表",
				path: "/pages/broker/brokerlist"
			}
		},
		onReady: function() {
			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.mainArea').boundingClientRect()
					query.exec(function(res) {
						uni.createSelectorQuery().selectAll('.tabbar').boundingClientRect(data => {
							_this.mainHeight = resu.windowHeight - res[0].top - data[0]
								.height + 'px';
							console.log('打印页面的剩余高度', _this.mainHeight);
						}).exec()
					})
				},
				fail: (res) => {}
			})
		},
		methods: {
			openMap(e) {
				uni.openLocation({
					longitude: Number(_this.modal.brokerinfo.longitude),
					latitude: Number(_this.modal.brokerinfo.latitude),
					name: _this.modal.brokerinfo.village,
					address: _this.modal.brokerinfo.province + _this.modal.brokerinfo.city + _this.modal.brokerinfo
						.town + _this.modal.brokerinfo.village,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},

			brokerListLower() {
				if (_this.pstatus !== 'more') {
					return;
				}
				_this.getMore();
			},

			markertap(e) {
				console.log("点击标记点", e.detail.markerId)
				_this.modal.name = "detailsbox";
				_this.modal.brokerinfo = _this.plist[e.detail.markerId];
			},

			selArea(item) {
				if (item == '全部') {
					_this.areaItem = ''
				} else {
					_this.areaItem = item;
				}
				_this.pageRefresh();
			},

			getArea() {
				_this.$req.ajax({
					path: "index/getStreet"
				}).then((data) => {
					_this.mainArea = data;
					console.log("列表", data, _this.mainArea)
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			showFilter: function(e) {
				var nowfilterbox = e.currentTarget.dataset.filterbox;
				if (_this.filterbox == nowfilterbox) {
					_this.filterbox = null;
				} else {
					_this.filterbox = nowfilterbox;
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			checkArea: function(level, index) {
				if (level == 1) {
					_this.arealist.cityarr = _this.arealist.data[index].children;
					_this.arealist.districtarr = [];
				} else if (level == 2) {
					_this.arealist.districtarr = _this.arealist.cityarr[index].children;
				} else if (level == 3) {
					_this.arealist.title = _this.arealist.districtarr[index].title;
					_this.arealist.value = _this.arealist.districtarr[index].title;
					_this.filterbox = null;
					_this.pageRefresh();
				} else if (level == 4) {
					_this.arealist.cityarr = [];
					_this.arealist.districtarr = [];
					_this.arealist.title = "全部";
					_this.arealist.value = "";
					_this.filterbox = null;
					_this.pageRefresh();
				}
			},
			// 搜索
			bindInput: function(e) {
				_this.searchval = e.detail.value;
			},
			btnSearch: function() {
				if (_this.searchval == "") {
					uni.showModal({
						title: '信息提示',
						content: "请输入要搜索的关键字...",
						showCancel: false
					});
					return false;
				}
				_this.pageRefresh();
			},

			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},

			getMore: function() {
				_this.$req.ajax({
					path: "broker/getListBroker",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						searchval: _this.searchval,
						// district: _this.arealist.value
						town: _this.areaItem
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					_this.getAreaList();
					uni.stopPullDownRefresh();
					console.log("列表", _this.plist)
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			getAreaList() {
				_this.covers = [];
				for (var i in _this.plist) {
					let EmptyList = {};
					EmptyList.id = parseInt(i)
					EmptyList.latitude = _this.plist[i].latitude
					EmptyList.longitude = _this.plist[i].longitude
					EmptyList.iconPath = _this.plist[i].muser.avatar ? _this.plist[i].muser.avatar : _this.$getImageUrl(
						'static/images/applet/dfhead.jpg')
					EmptyList.title = _this.plist[i].title
					// EmptyList.label = _this.plist[i].title
					EmptyList.width = 30
					EmptyList.height = 30
					_this.covers.push(EmptyList);
				}
				console.log("查看经纬度", _this.covers)
			},

			showModal: function(e) {
				console.log("查看ID", e)
				var index = e.currentTarget.dataset.index;
				_this.modal.name = "detailsbox";
				_this.modal.brokerinfo = _this.plist[index];
			},
			hideModal: function(e) {
				_this.modal.name = null;
			},
			// 咨询电话
			makeTelephone: function(e) {
				var telephone = e.currentTarget.dataset.telephone;
				uni.makePhoneCall({
					phoneNumber: telephone
				});
			},

			goNavPage: function(pageurl) {
				uni.redirectTo({
					url: pageurl
				});
			},

			goDetail: function(agentid) {
				uni.navigateTo({
					url: '/pages/agent/detail?agentid=' + agentid
				});
			}
		}
	}
</script>

<style lang="scss">
	.echo-agent-list .echo-item .echo-tilpic {
		width: 120rpx;
		height: 120rpx;
	}

	.echo-agent-list .echo-item .echo-content {
		width: 550rpx;
	}

	.cu-item:after {
		border: 0rpx !important;
	}

	.itembox {
		padding: 10rpx 30rpx;
		width: 100%;
		display: flex;
		// justify-content: start;
		align-items: center;
		justify-content: space-between;
	}

	.itemboxLeft {
		display: flex;
		align-items: center;
	}

	.itembox-btn {
		padding: 0 20rpx;
		height: 50rpx;
		border-radius: 25rpx;
		border: 1rpx solid #00aa00;
		color: #00aa00;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itembox-til {
		width: 160rpx;
	}

	.itembox-con {
		width: 430rpx;
	}

	.menu {
		width: 100%;
		background-color: #FFFFFF;
		position: relative;

		.menu-top {
			display: flex;
			padding: 25rpx 20rpx;

			.menu-top-item {
				margin-right: 50rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.item-icon {
					margin-left: 10rpx;
					// width: 20rpx;
					// height: 20rpx;
					// display: inline-block;
					// background-image: url(@/static/images/goods/up.png);
					// background-size: cover;
					// background-repeat: no-repeat;
					// background-position: center;
					//方向向下的箭头图片，实际就是实现了点击下箭头后旋转变成上箭头
				}
			}
		}
	}

	.mainArea {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.areaList {
		flex: 1;
		background-color: #FFFFFF;

		.areaScroll {
			padding: 30rpx 20rpx 30rpx;

			.areaCard {
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 25rpx;
				font-weight: 600;
				text-align: center;
				border-radius: 25rpx;
			}

			.areaCardSel {
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 25rpx;
				font-weight: 600;
				text-align: center;
				border-radius: 25rpx;
				background-color: #cd0000;
				color: #FFFFFF;
			}
		}
	}

	.brokerList {
		flex: 3;

		.brokerScroll {
			padding: 17rpx 17rpx 0;

			.brokerCard {
				margin-bottom: 15rpx;
				padding: 15rpx 15rpx;
				display: flex;
				background-color: #FFFFFF;
				border-radius: 12rpx;

				.brokerCard-avatar {
					width: 170rpx;
					height: 170rpx;
					position: relative;
					display: flex;
					justify-content: center;

					.brokerCard-avatar-image {
						width: 170rpx;
						height: 170rpx;
					}

					.avatar-bg {
						width: 160rpx;
						height: 40rpx;
						position: absolute;
						bottom: 10rpx;
						background-size: cover;
						background-position: 0 1rpx;
						font-size: 13rpx;
						color: #F9E2AC;
						display: flex;
						align-items: center;


						.avatar-bg-title {
							margin-left: 40rpx;
							line-height: 40rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}

						// .avatar-bg-name {
						// 	margin-left: 5rpx;
						// 	line-height: 30rpx;

						// }
					}
				}

				.brokerCard-infor {
					flex: 1;
					margin-left: 28rpx;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.infor-header {
						font-size: 25rpx;
						font-weight: 600;
						color: #383838;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.infor-header-icon {
							width: 100rpx;
							height: 20rpx;
						}
					}

					.infor-item {
						font-size: 20rpx;
						font-weight: 400;
						color: #747474;
						display: flex;
						align-items: center;

						.infor-item-icon {
							margin-right: 20rpx;
							width: 22rpx;
							height: 22rpx;
						}

						.infor-item-text {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}

	.detailBox {
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.detailBox-item {
			.detailBox-item-button {
				width: 100rpx;
				height: 30rpx;
				background-color: #cd0000;
			}
		}
	}
</style>