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="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 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="bg-white cu-list menu-avatar">
			<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: {}
				}
			};
		},
		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();
				}).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>
	.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; }
</style>