odd_job_applet/pages/broker/brokerlist.vue

<template>
	<view>
		<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="menu">
			<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="brokerList">
			<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>
				<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="../../static/images/broker/contact.png"></image>
					</view>
					<view class="infor-item" :data-index="index" @tap="showModal">
						<image class="infor-item-icon" src="../../static/images/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="../../static/images/index/cardD.png" mode="widthFix"></image>
						<view class="infor-item-text">服务区域：{{item.province}} - {{item.city}} - {{item.district}}</view>
					</view>
					<view class="infor-item" :data-index="index" @tap="showModal">
						<image class="infor-item-icon" src="../../static/images/broker/broker.png" mode="widthFix"></image>
						<view class="infor-item-text">镇/村：{{item.town}} - {{item.village}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="filterbg">
			<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">确定</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="itembox-til text-right">姓名：</view>
							<view class="itembox-con text-gray">{{modal.brokerinfo.title}}</view>
						</view>
						<view class="itembox text-left">
							<view class="itembox-til text-right">手机号：</view>
							<view class="itembox-con text-gray">{{modal.brokerinfo.mobile}}</view>
						</view>
						<view class="itembox text-left">
							<view class="itembox-til text-right">微信号：</view>
							<view class="itembox-con text-gray">{{modal.brokerinfo.weixin}}</view>
						</view>
						<view class="itembox text-left">
							<view class="itembox-til text-right">QQ号：</view>
							<view class="itembox-con text-gray">{{modal.brokerinfo.qq}}</view>
						</view>

						<view class="itembox text-left">
							<view class="itembox-til text-right">服务区域：</view>
							<view class="itembox-con text-gray">{{modal.brokerinfo.province}} -
								{{modal.brokerinfo.city}}
							</view>
						</view>
						<view class="itembox text-left" style="padding-bottom: 30rpx;" :data-index="index"
							@tap="showModal">
							<view class="itembox-til text-right">基本介绍：</view>
							<view class="itembox-con text-gray">
								<text>{{modal.brokerinfo.details}}</text>
							</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-blue" @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",
			};
		},
		onLoad: function() {
			_this = this;
			_this.arealist.data = require('@/common/area.json');
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		onShareAppMessage: function(res) {
			return {
				title: "经纪人列表",
				path: "/pages/broker/brokerlist"
			}
		},
		methods: {
			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
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
					console.log("列表",_this.plist)
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			showModal: function(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;
	}

	.itembox-til {
		width: 160rpx;
	}

	.itembox-con {
		width: 530rpx;
	}

	.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;
					//方向向下的箭头图片，实际就是实现了点击下箭头后旋转变成上箭头
				}
			}
		}
	}

	.brokerList {
		padding: 28rpx 26rpx 0;

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

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

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

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

					.infor-header-icon {
						width: 144rpx;
						height: 36rpx;
					}
				}

				.infor-item {
					font-size: 28rpx;
					font-weight: 400;
					color: #747474;
					display: flex;
					align-items: center;
					
					.infor-item-icon {
						margin-right: 20rpx;
						width: 27rpx;
					}
					
					.infor-item-text {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>