newmyj/pages/index/listModel.vue

<template>
	<view class="content">
		<scroll-view scroll-x="true" class="topSearch">
			<view class="itemBox flex">
				<view class="typeTtem flex" @click="changeType(item,ind)" :key='ind' v-for="(item,ind) in workTypeList" :class="{action:typeIndex==ind}">
					<text>
						{{item.title}}
					</text>
				</view>
				<view class="itemTip flex" @click="$refs.popup.open()">
					<uni-icons type="bars" size="40rpx"></uni-icons>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" :style="{'height':height}" class="scroll-wrap" @scrolltolower="getKcList">
			<cmy-mys-list :list='navList[currentIndex].list'></cmy-mys-list>
			<uni-load-more :status="navList[currentIndex].loadingType"></uni-load-more>
		</scroll-view>
		<uni-popup ref="popup" type="bottom">
			<view class="alertBox">
				<view class="flex position-relative padding-c-20">
					<text class="alertTitle">全部筛选</text>
					<image @click="closeAlert" class="alertClose" src="/static/icon/goodsExit.png" mode="scaleToFill"></image>
				</view>
				<view class="padding-t-20">
					<view class="alertItemTitle">
						职业类型
					</view>
					<view class="flex alertTypeBox" >
						<view  class="alertTypeItem"  @click="search.work_type_id=ltt.id" :key='inde' v-for="(ltt,inde) in workTypeList" :class="{action:search.work_type_id==ltt.id}">
							<text>
								{{ltt.title}}
							</text>
						</view>
					</view>
					<view class="alertItemTitle">
						价格类型
					</view>
					<view class="flex alertTypeBox" >
						<view  class="alertTypeItem"  :class="{action:search.timetype===''}" @click="search.timetype=''">
							<text>
								无
							</text>
						</view>
						<view  class="alertTypeItem"  :class="{action:search.timetype==='hour'}"  @click="search.timetype='hour'">
							<text>
								小时
							</text>
						</view>
						<view  class="alertTypeItem"  :class="{action:search.timetype==='day'}"  @click="search.timetype='day'">
							<text>
								每天
							</text>
						</view>
						<view  class="alertTypeItem"  :class="{action:search.timetype==='month'}"  @click="search.timetype='month'">
							<text>
								每月
							</text>
						</view>
					</view>
					<view class="alertItemTitle" v-if="search.timetype!==''">
						最低价格
					</view>
					<input v-if="search.timetype!==''" v-model="search.servicePrice" class="minMoney" type="number" placeholder-class="placeholderText" placeholder="自定义最低价格">
					<view class="alertItemTitle">
						服务区域
					</view>
					<view class="flex alertTypeBox" >
						<view  class="alertTypeItem"  :class="{action:search.is_china===''}" @click="search.is_china=''">
							<text>
								全部
							</text>
						</view>
						<view  class="alertTypeItem"  :class="{action:search.is_china===1}"  @click="search.is_china=1">
							<text>
								国内
							</text>
						</view>
						<view  class="alertTypeItem"  :class="{action:search.is_china===0}"  @click="search.is_china=0">
							<text>
								国外
							</text>
						</view>
					</view>
					<view v-if="search.is_china===1" class="alertItemTitle">
						区域选择
					</view>
					<view v-if="search.is_china===1" class="right">
						<view class="citylist">
							<view class="">
								<view class="flex margin-b-20" v-for="(item,ind) in search.service_area" :key="ind">
									<view>
										{{item.province+item.city+item.district}}
										<text class="margin-l-10 del" @click="search.service_area.splice(ind,1)">
											删除
										</text>
									</view>
								</view>
							</view>
							<view class="flex">
								<pickerAddress class="buttom" @change="onCityClick">选择地区</pickerAddress>
							</view>
						</view>
					</view>
				</view>
				<view class="flex alertButtomBox">
					<view class="cancel" @click="cancelSearch">
						清空选择
					</view>
					<view class="confirm" @click="confirmSearch">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getWorkerList,
	} from '@/api/index.js'
	import {
		getUserWorkTypeList
	} from '@/api/model.js';
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import{mapState} from "vuex"
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				typeIndex: -1,
				workTypeList: [],
				height: '',
				currentIndex: 0,
				navList: [{
						page: 1,
						pageSize: 10,
						list: [],
						loadingType: 'morde',
						loaded: false
					}
				],
				alertIndex:0,
				search:{
					timetype:'',//hour，month，day
					servicePrice:'',
					work_type_id:'',
					service_area:[],
					is_china:'',
				},
			};
		},
		onLoad(opt) {
			if(opt.timetype!==''){
				this.search.timetype=opt.timetype
			}
			if(opt.servicePrice!==''){
				this.search.servicePrice=opt.servicePrice
			}
			if(opt.work_type_id!==''){
				this.search.work_type_id=opt.work_type_id
			}
			if(opt.is_china!==''){
				this.search.is_china=opt.is_china
			}
			if(opt.service_area!==''){
				this.search.service_area=opt.service_area.split('-').map((re)=>{
					const ar = re.split(',')
					return {
						province:ar[0],
						city:ar[1],
						district:ar[2],
					}
				})
			}
			this.init();
		},
		onShow() {
			this.getKcList()
		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		onReachBottom() {

		},
		methods: {
			onCityClick({
				data
			}) {
				let address = {};
				address.province = data[0];
				address.city = data[1];
				address.district = data[2];
				this.search.service_area.push(address)
			},
			cancelSearch(){
				this.search = {
					servicePrice:'',
					work_type_id:'',
					timetype:'',
					service_area:[],
					is_china:'',
				}
			},
			closeAlert(){
				this.$refs.popup.close();
			},
			confirmSearch(){
				this.initData()
				this.closeAlert()
				this.getKcList()
			},
			//初始化查询数据
			initData(){
				const data = this.navList[this.currentIndex]
				data.page=1;
				data.list =[];
				data.loadingType='morde'
			},
			changeType(item,ind){
				if(ind==this.typeIndex){
					this.typeIndex=-1;
					this.search.work_type_id = '';
				}else{
					this.typeIndex=ind;
					this.cancelSearch();
					this.search.work_type_id = item.id;
				}
				this.initData()
				this.getKcList()
			},
			init() {
				const that = this;
				getUserWorkTypeList().then(
					(res) => {
						that.workTypeList = res.data.list
					}
				).catch(
					(res) => {
						console.log(res);
					}
				)
			},
			async getKcList() {
				let that = this;
				let item = that.navList[that.currentIndex]
				if (item.loadingType == 'noMore' || item.loadingType == 'loading') {
					return
				}
				item.loadingType = 'loading'
				let res = {}
				const search= {
					...that.search
				}
				search.service_area = search.service_area.map(
						(item) => {
							return `${item.province},${item.city},${item.district}`
						}
					)
				res = await getWorkerList({
					...search,
					page: item.page,
					pageSize: item.pageSize
				})
				item.list = item.list.concat(res.data.list)
				item.page++
				if (item.pageSize == res.data.list.length) {
					item.loadingType = 'more'
				} else {
					item.loadingType = 'noMore'
				}
				item.loaded = true
			}
		}
	};
</script>
<style lang="scss" scoped>
	.alert{
		background-color: red;
	}
	.scroll-wrap{
		padding: 30rpx;
	}
	.alertBox{
		line-height: 1;
		background-color: #FFF;
		padding: 20rpx 0 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;
			padding: 20rpx;
			.timetype {
				width: 100%;
				justify-content: flex-end;
			}
		
			.citylist {
				.del {
					font-size: $font-sm;
					border-radius: 10rpx;
					background-color: #eee;
					line-height: 1;
					padding: 5rpx 15rpx;
				}
			}
		
			.img {
				width: 26rpx;
			}
		
			.buttom {
				border-radius: 10rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
				background-color: #eee;
			}
		}
		.alertTitle{
			font-weight: bold;
			font-size: 32rpx;
			flex-grow: 1;
			text-align: center;
		}
		.alertClose{
			width: 40rpx;
			height: 40rpx;
		}
		.alertItemTitle{
			font-size: 28rpx;
			padding-left: 20rpx;
			font-weight: bold;
		}
		.minMoney{
			margin: 20rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #e9e9e9;
		}
		.placeholderText{
			font-size: 24rpx;
		}
		.alertTypeBox{
			flex-wrap: wrap;
			justify-content: flex-start;
			padding: 0 20rpx 10rpx;
			margin-top: 20rpx;
			
			.alertTypeItem{
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				background-color: #eee;
				border-radius: 10rpx;
				margin-bottom: 14rpx;
				margin-right: 14rpx;
				&.action{
					background-color: #fee7e4;
					color: #F86859;
				}
			}
		}
		.moneyTitle{
			font-size: 28rpx;
		}
		.alertButtomBox{
			color: #FFF;
			padding: 20rpx;
			border-top: 1px solid #e3e3e3;
			.confirm{
				background-color: #F86859;
			}
			.cancel{
				background-color:orange;
			}
			.cancel,.confirm{
				padding: 10rpx;
				text-align: center;
				width: 350rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.topSearch{
		position: sticky;
		top: 0;
		background-color: #FFF;
		padding-right: 100rpx;
		height: 80rpx;
		.itemBox{
			padding-left: 30rpx;
			align-items: center;
			.itemTip{
				background-color: #FFF;
				position: fixed;
				right: 0;
				top: 0;
				align-items: center;
				height: 80rpx;
				padding: 0 30rpx;
			}
			.typeTtem {
				flex-shrink: 0;
				height: 80rpx;
				align-items: center;
				margin-right: 30rpx;
				&.action{
					color:#F86859;
					border-bottom: 1px solid #F86859;
				}
			}
		}
	}
</style>