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="1" 
			: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>
						<!-- 工种选择使用JobTypePicker组件 -->
						<view v-else-if="item.type === 'typeId'" class="job-type-selector" @click="openJobTypePickerInPopup">
							<view class="selected-job-type">
								{{ popupSelectedJobType || '请选择工种' }}
							</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" showSelectWholeCity @confirm="onAddressConfirm">
			<template #custom-options>
				<view class="address-item select-all-item" @click="selectAllAreas">
					<uv-icon name="checkmark-circle" size="30rpx" color="#3796F8"></uv-icon>
					选择全部地区
				</view>
			</template>
		</AddressPicker>
		
		<!-- 工种选择组件 -->
		<JobTypePicker ref="jobTypePicker" @confirm="onJobTypeConfirm">
			<template #custom-options>
				<view class="job-type-item select-all-item" @click="selectAllJobTypes">
					<uv-icon name="checkmark-circle" size="30rpx" color="#3796F8"></uv-icon>
					选择全部工种
				</view>
			</template>
		</JobTypePicker>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import AddressPicker from '@/components/AddressPicker.vue'
	import JobTypePicker from '@/components/JobTypePicker.vue'
	export default {
		components: {
			AddressPicker,
			JobTypePicker
		},
		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: '', // 弹窗中选中的地址
				popupSelectedJobType: '', // 弹窗中选中的工种
			}
		},
		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: {
            init(){
                this.$refs.dropDown.init()
            },
			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
				}
				
				// 工种选择使用JobTypePicker组件
				if(name === 'typeId'){
					this.$refs.jobTypePicker.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 == '全部地区' ? 'all' : this.areaId.value // 使用存储的ID值
						})
					} else if(n.type === 'typeId' && this.popupSelectedJobType) {
						// 工种选择使用JobTypePicker的结果
						this.result.push({
							name: n.type,
							label: this.popupSelectedJobType,
							value: this.popupSelectedJobType == '全部工种' ? 'all' : this.typeId.value // 使用存储的ID值
						})
					} 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.activeName = 'areaId'
				this.$refs.addressPicker.open()
			},
			
			// 弹窗中打开工种选择器
			openJobTypePickerInPopup() {
				this.activeName = 'typeId'
				this.$refs.jobTypePicker.open()
			},
			
			// 地址选择确认回调
			onAddressConfirm(addressResult) {
				// 更新弹窗中的地址显示
				this.popupSelectedAddress = addressResult.fullAddress
				
				// 更新areaId的状态
				this.areaId.label = addressResult.fullAddress
				this.areaId.value = addressResult.selectedId // 使用ID而不是地址文本
				
				console.log('addressResult', addressResult);
				
				// 调用clickItem来更新result数组并触发父组件事件
				this.clickItem({
					label: addressResult.fullAddress,
					value: addressResult.selectedId, // 传ID给后端
				})
				
				// 关闭下拉菜单 - 通过发送事件来关闭
				uni.$emit(`${this.sign}_CLOSEPOPUP`)
			},
			
			// 选择全部地区
			selectAllAreas() {
				// 更新弹窗中的地址显示
				this.popupSelectedAddress = '全部地区'
				
				// 更新areaId的状态
				this.areaId.label = '地点'
				this.areaId.value = 'all'
				
				// 调用clickItem来更新result数组并触发父组件事件
				this.clickItem({
					label: '地点',
					value: 'all',
				})
				
				// 关闭地址选择器
				this.$refs.addressPicker.close()
				
				// 关闭下拉菜单
				uni.$emit(`${this.sign}_CLOSEPOPUP`)
			},
			
			// 工种选择确认回调
			onJobTypeConfirm(jobTypeResult) {
				// 更新弹窗中的工种显示
				this.popupSelectedJobType = jobTypeResult.fullJobType
				
				// 更新typeId的状态
				this.typeId.label = jobTypeResult.fullJobType
				this.typeId.value = jobTypeResult.selectedId // 使用ID而不是工种文本
				
				console.log('jobTypeResult', jobTypeResult);
				
				// 调用clickItem来更新result数组并触发父组件事件
				this.clickItem({
					label: jobTypeResult.fullJobType,
					value: jobTypeResult.selectedId, // 传ID给后端
				})
				
				// 关闭下拉菜单 - 通过发送事件来关闭
				uni.$emit(`${this.sign}_CLOSEPOPUP`)
			},
			
			// 选择全部工种
			selectAllJobTypes() {
				// 更新弹窗中的工种显示
				this.popupSelectedJobType = '全部工种'
				
				// 更新typeId的状态
				this.typeId.label = '工种'
				this.typeId.value = 'all'
				
				// 调用clickItem来更新result数组并触发父组件事件
				this.clickItem({
					label: '工种',
					value: 'all',
				})
				
				// 关闭工种选择器
				this.$refs.jobTypePicker.close()
				
				// 关闭下拉菜单
				uni.$emit(`${this.sign}_CLOSEPOPUP`)
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	// 全部地区按钮样式
	::v-deep .select-all-item {
		display: flex;
		align-items: center;
		color: #3796F8;
		background: rgba(#3796F8, 0.1);
		font-weight: bold;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #f0f0f0;
		
		uv-icon {
			margin-right: 10rpx;
		}
	}
	.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;
					}
				}
				
				.job-type-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-job-type {
						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>