universal-wechat-uniapp-241007/pages_order/components/screen/screenRen.vue

<template>
	<view>
		<uv-drop-down ref="dropDown" 
		sign="dropDown_1" 
		text-active-color="#3796F8"
			:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
			:extra-active-icon="{name:'arrow-up-fill',color:'#3796F8',size:'26rpx'}" 
			:defaultValue="defaultValue"
			:custom-style="{padding: '0 30rpx'}" 
			@click="selectMenu">

			<uv-drop-down-item 
			v-if="isArea"
			name="area" type="2" 
			:label="dropItem('area').label" 
			:value="dropItem('area').value">
			</uv-drop-down-item>

			<uv-drop-down-item 
			v-if="isMaxPrice"
			name="maxPrice" type="2" 
			:label="dropItem('maxPrice').label" 
			:value="dropItem('maxPrice').value">
			</uv-drop-down-item>


			
		</uv-drop-down>
		
		<uv-drop-down-popup 
		sign="dropDown_1" 
		:click-overlay-on-close="true" 
		:currentDropItem="currentDropItem"
		@clickItem="clickItem" 
		@popupChange="change"></uv-drop-down-popup>
		
		<uv-popup ref="popup" :round="30"
		:safeAreaInsetBottom="false">
			<view class="popup">
				
				<view class="list">
					<view class="item"
					v-for="(item, index) in list"
					:key="index">
						<view class="title">
							{{ item.title }}
						</view>
						<view class="tagList">
							<view 
							:class="{act : i == item.index}"
							@click="clickTag(item, i)"
							v-for="(t, i) in item.tag"
							:key="t">
								{{ t.label }}
							</view>
						</view>
					</view>
				</view>
				
				<view class="btn" @click="submit">
					<button class="a">提交</button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		props : {
			isArea : {
				default : true
			},
			isMaxPrice : {},
		},
		data() {
			return {
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', 'all'],
				// 筛选结果
				result: [],
				activeName: 'area',
				area: {
					label: '区域',
					value: 0,
					activeIndex: 0,
					color: '#333',
					activeColor: '#3796F8',
					child: [
						{
							label: '全部',
							value: 0,
						},
					]
				},
				maxPrice: {
					label: '最高价',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#3796F8',
					child: [
						{
							label: '全部',
							value: 'all'
						},
						{
							label: '500以下',
							value: 500
						},
						{
							label: '1000以下',
							value: 1000
						},
						{
							label: '1500以下',
							value: 1500
						},
						{
							label: '2000以下',
							value: 2000
						},
						{
							label: '2500以下',
							value: 2500
						},
						{
							label: '3000以下',
							value: 3000
						},
						{
							label: '5000以下',
							value: 5000
						},
						{
							label: '8000以下',
							value: 8000
						},
					]
				},
				list : [
					// {
					// 	title : '您目前所属的年龄段',
					// 	tag : ['18岁～35岁', '35岁～45岁', '45岁～50岁', '50岁以上'],
					// 	index : 0,
					// },
					{
						title : '您希望从事的工种',
						tag : ['电工', '焊工', '叉车', '其他'],
						index : 0,
					},
					{
						title : '您希望从事的工作性质',
						tag : ['全职', '临时工',],
						index : 0,
					},
				]
			}
		},
		computed : {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			},
			...mapState(['cityList']),
		},
		mounted() {
			//价格
			// this.jobTypeList.forEach(n => {
			// 	this.maxPrice.child.push({
			// 		label: n.name,
			// 		value: n.id,
			// 	})
			// })
			
			
			// 地区
			this.cityList.forEach(n => {
				this.area.child.push({
					label: n.name,
					value: n.id,
				})
			})
		},
		methods: {
			clickTag(item, i){
				console.log(i);
				item.index = i
			},

			change(e) {},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				
				
				this.activeName = name;
				
				if(type == 1){
					this.$refs.popup.open()
					return
				}

				const find = this.result.find(item => item.name == this.activeName);
				if (find) {
					const findIndex = this[this.activeName]
						.child.findIndex(item => item.label == find.label && item
							.value == find.value);
					this[this.activeName].activeIndex = findIndex;

				} else {
					this[this.activeName].activeIndex = 0;
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let {
					label,
					value
				} = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);


				this.$emit('clickItem', this.result)
			},
			submit(){
				
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	/deep/ .uv-drop-down{
		justify-content: space-around;
	}
	.popup{
		width: 80vw;
		padding: 40rpx;
		.list{
			.item{
				margin-top: 20rpx;
				.title{
					font-weight: 900;
					font-size: 30rpx;
				}
				.tagList{
					display: flex;
					flex-wrap: wrap;
					padding: 10rpx 0;
					view{
						background: rgba($uni-color, 0.1);
						padding: 10rpx 20rpx;
						margin: 10rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
					}
					.act{
						color: #fff;
						background: $uni-color;
					}
				}
			}
		}
		.btn {
			display: flex;
			justify-content: center;
			width: 100%;
			margin-top: 20rpx;
			.a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90%;
				color: #FFF;
				background-color: $uni-color;
				border: 1px solid rgba($uni-color, 0.2);
				border-radius: 100rpx;
				font-size: 30rpx;
			}
		}
	}
}
</style>