recruitment-wechat-uniapp-241012/components/screen/screenWork.vue

<template>
	<view class="page">
		<uv-drop-down ref="dropDown" 
		:sign="sign" 
		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 name="areaId" type="1" 
			:label="dropItem('areaId').label" 
			:value="dropItem('areaId').value">
			</uv-drop-down-item>

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

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

			<uv-drop-down-item 
			name="vip_type" 
			type="1" 
			label='智能推荐'
			:value="0">
			</uv-drop-down-item>
		</uv-drop-down>
		
		<uv-drop-down-popup 
		:sign="sign" 
		: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="item.type">
						<view class="title">
							{{ role ? item.bossTitle : item.title }}
						</view>
						<!-- 地址选择使用AddressPicker组件 -->
						<view v-if="item.type === 'areaId'" class="address-selector" @click="openAddressPickerInPopup">
							<view class="selected-address">
								{{ popupSelectedAddress || '请选择工作地区' }}
							</view>
							<view class="arrow">
								<uv-icon name="arrow-right" size="30rpx"></uv-icon>
							</view>
						</view>
						<!-- 其他选项使用tagList -->
						<view v-else class="tagList">
							<view 
							:class="{act : i == item.index}"
							@click="clickTag(item, i)"
							v-for="(t, i) in item.tag"
							:key="t.label">
								{{ t.label }}
							</view>
						</view>
					</view>
				</view>
				
				<view class="btn" @click="submit">
					<button class="a">提交</button>
				</view>
			</view>
		</uv-popup>
		
		<!-- 地址选择组件 -->
		<AddressPicker ref="addressPicker" @confirm="onAddressConfirm" />
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import AddressPicker from '@/components/AddressPicker.vue'
	export default {
		components: {
			AddressPicker
		},
		props : {
			sign : {
				default : 'dropDown_1'
			},
		},
		data() {
			return {
				// 表示value等于这些值，就属于默认值
				defaultValue: [0, 'all', 'all'],
				// 筛选结果
				result: [],
				activeName: 'areaId',
				areaId: {
					label: '全部',
					value: 0,
					activeIndex: 0,
					color: '#333',
					activeColor: '#3796F8',
					child: [
						{
							label: '全部',
							value: 0,
						},
					]
				},
				typeId: {
					label: '工种',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#3796F8',
					child: [
						{
							label: '全部',
							value: 'all'
						},
					]
				},
				natureId: {
					label: '性质',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#3796F8',
					child: [
						{
							label: '全部',
							value: 'all'
						},
					]
				},
				list : [
					// {
					// 	title : '您目前所属的年龄段',
					// 	tag : ['18岁～35岁', '35岁～45岁', '45岁～50岁', '50岁以上'],
					// 	index : 0,
					// },
					{
						title : '您希望从事的工种',
						bossTitle : '您希望招工的工种',
						tag : [],
						index : 0,
						type : 'typeId',
					},
					{
						title : '您希望从事的工作性质',
						bossTitle : '您希望招工的工作性质',
						tag : [],
						index : 0,
						type : 'natureId',
					},
					{
						title : '您希望从事的工作地区',
						bossTitle : '您希望招工的工作地区',
						tag : [],
						index : 0,
						type : 'areaId',
					},
				],
				popupSelectedAddress: '', // 弹窗中选中的地址
			}
		},
		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(['jobTypeList', 'natureList', 'addressList']),
		},
		mounted() {
			setTimeout(this.initData, 500)
		},
		methods: {
			initData(){
				
				if(this.addressList.length == 0){
					setTimeout(this.initData, 500)
				}
				
				// 工种
				this.jobTypeList.forEach(n => {
					this.typeId.child.push({
						label: n.name,
						value: n.id,
					})
				})
				this.list[0].tag = this.typeId.child
				
				// 工作性质
				this.natureList.forEach(n => {
					this.natureId.child.push({
						label: n.name,
						value: n.id,
					})
				})
				this.list[1].tag = this.natureId.child
				
				// if(this.addressList[0]){
				// 	this.areaId.value = this.addressList[0].id
				// 	this.areaId.label = this.addressList[0].adress
					
				// 	this.defaultValue.slice(0, 1, this.addressList[0].id)
				// 	this.$forceUpdate()
				// }
				
				// 地址
				this.addressList.forEach(n => {
					this.areaId.child.push({
						label: n.adress,
						value: n.id,
					})
				})
				this.list[2].tag = this.areaId.child
				
			},
			clickTag(item, i){
				item.index = i
			},

			change(e) {},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const {
					name,
					active,
					type
				} = e;
				
				
				this.activeName = name;
				
				// 地址选择使用AddressPicker组件
				if(name === 'areaId'){
					this.$refs.addressPicker.open()
					return
				}
				
				// 智能推荐弹窗
				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);

				console.log('this.result', this.result);

				this.$emit('clickItem', this.result)
			},
			submit(){
				
				this.result = []
				
				this.list.forEach(n => {
					// 地址选择使用AddressPicker的结果
					if(n.type === 'areaId' && this.popupSelectedAddress) {
						this.result.push({
							name: n.type,
							label: this.popupSelectedAddress,
							value: this.popupSelectedAddress
						})
					} else {
						// 其他选项使用tag选择
						let t = n.tag[n.index]
						this.result.push({
							name: n.type,
							label : t.label,
							value : t.value
						})
					}
				})
				
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				
				this.$emit('clickItem', this.result)
				
				this.$refs.popup.close()
			},
			// 弹窗中打开地址选择器
			openAddressPickerInPopup() {
				this.$refs.addressPicker.open()
			},
			
			// 地址选择确认回调
			onAddressConfirm(addressResult) {
				// 更新弹窗中的地址显示
				this.popupSelectedAddress = addressResult.fullAddress
				
				// 更新areaId的状态
				this.areaId.label = addressResult.fullAddress
				this.areaId.value = addressResult.selectedAddress.adress
				
				console.log('addressResult', addressResult);
				
				// 调用clickItem来更新result数组并触发父组件事件
				this.clickItem({
					label: addressResult.fullAddress,
					value: addressResult.selectedAddress.adress,
				})
				
				// 关闭下拉菜单
				this.$refs.dropDown.close()
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.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;
					}
				}
				
				.address-selector {
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: rgba($uni-color, 0.1);
					padding: 10rpx 20rpx;
					margin: 10rpx;
					border-radius: 10rpx;
					font-size: 26rpx;
					
					.selected-address {
						flex: 1;
						color: #333;
					}
					
					.arrow {
						margin-left: 10rpx;
					}
				}
			}
		}
		.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>