招聘会列表添加地区筛选

pages/careerfair/careerfair.vue

@@ -22,9 +22,65 @@
 						@click="getFair('refresh')"></uni-icons>
 					<input class="input" placeholder="招聘会" placeholder-class="inputplace"
 						v-model="pageState.jobFairTitle" />
+					<view class="btn-feel" v-show="state.current != 3" @click="openFilter">筛选</view>
 				</view>
 			</view>
+			 <uni-popup
+				ref="selectFilterModel"
+				type="bottom"
+				borderRadius="10px 10px 0 0"
+				background-color="#FFFFFF"
+				class="popup-fix"
+			>
+				<view class="popup-content">
+					<view class="popup-list">
+						<view class="content-wrapper">
+							<!-- 左侧筛选类别 -->
+							<!-- <scroll-view class="filter-nav" scroll-y>
+								<view
+									v-for="(item, index) in filterOptions"
+									:key="index"
+									class="nav-item button-click"
+									:class="{ active: activeTab === item.key }"
+									@click="scrollTo(item.key)"
+								>
+									{{ item.label }}
+								</view>
+							</scroll-view> -->
 
+							<!-- 右侧筛选内容 -->
+							<scroll-view class="filter-content" :scroll-into-view="activeTab" scroll-y>
+								<view v-for="(item, index) in filterOptions" :key="index">
+									<view class="content-item">
+										<view class="item-title" :id="item.key">{{ item.label }}</view>
+										<radio-group class="check-content" @change="handleSelect">
+											<label
+												v-for="option in item.options"
+												:key="option.value"
+												class="checkbox-item button-click"
+												:class="{
+													checkedstyle: selectedValues === String(option.value),
+												}"
+											>
+												<radio
+													style="display: none"
+													:value="String(option.value)"
+													:checked="selectedValues === String(option.value)"
+												/>
+												<text class="option-label">{{ option.label }}</text>
+											</label>
+										</radio-group>
+									</view>
+								</view>
+							</scroll-view>
+						</view>
+					</view>
+					<view class="popup-bottom">
+						<view class="btn-cancel btn-feel" @click="cleanup">重置</view>
+						<view class="btn-confirm btn-feel" @click="confirm">确认</view>
+					</view>
+				</view>
+			</uni-popup>
 			<!-- 主体内容区域 -->
 			<view class="container-main">
 				<scroll-view scroll-y class="main-scroll" :class="{fullHeightScroll:!showTabar}" @scrolltolower="handleScrollToLower">
@@ -151,10 +207,57 @@
 	onShow(() => {
 		// 更新自定义tabbar选中状态
 		tabbarManager.updateSelected(1);
+		getoptions();
 	});//
+	//筛选
+	const filterOptions = ref([]);
+	const activeTab = ref('');
+	const selectFilterModel = ref(null);
+	const selectedValues = ref(null);
+	function openFilter() {
+		selectFilterModel.value?.open();
+	}
+	const scrollTo = (key) => {
+		activeTab.value = key;
+	};
 
-	
+	const handleSelect = (e) => {
-	
+		selectedValues.value = e.detail.value
+	};
+	function cleanup(){
+		selectedValues.value = null
+		confirm()
+	}
+	function confirm(){
+		getFair("refresh");
+		selectFilterModel.value?.close();
+	}
+	function getoptions() {
+		let headers = {
+			'Content-Type': 'application/x-www-form-urlencoded',
+		}
+		let params = {
+			dictType:'administrative_division',
+			dictParentValue:'653100000000',
+			childFlag:'1',
+		}
+		filterOptions.value = [{
+				label: '所在区域',
+				key: 'area',
+				options: []
+		}];
+		$api.myRequest('/system/public/dict/data/getByParentValue',params,'POST',9100,headers).then(res=>{
+			if (res.code == 200) {
+				filterOptions.value[0].options = res.data.map(item=>{
+					return {
+						label: item.dictLabel,
+						value: item.dictValue,
+					}
+				})
+			}
+		})
+		activeTab.value = 'area';
+	}
 	async function thirdLogin(needToast){
 		let form={}
 		if (uni.getStorageSync('userInfo') && (uni.getStorageSync('userInfo').isCompanyUser=='1' || uni.getStorageSync('userInfo').isCompanyUser=='2')) {
@@ -420,6 +523,7 @@
 			pageSize: pageState.pageSize,
 			jobFairTitle: pageState.jobFairTitle,
 			jobFairType: state.current,
+			dictValue: selectedValues.value,
 		};
 		if (isLogin.value) {
 			if (userInfo.value.userType == "ent") {
@@ -577,7 +681,168 @@
 		return dates;
 	}
 </script>
+<style lang="scss" scoped>
+.popup-fix {
+    z-index: 9999 !important;
+}
+.popup-content {
+    color: #000000;
+    height: 70vh;
+	padding-bottom: 20rpx;
+}
+.popup-bottom {
+    padding: 40rpx 28rpx 20rpx 28rpx;
+    display: flex;
+    justify-content: space-between;
+    .btn-cancel {
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #666d7f;
+        line-height: 90rpx;
+        width: 33%;
+        min-width: 222rpx;
+        height: 90rpx;
+        background: #f5f5f5;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        text-align: center;
+    }
+    .btn-confirm {
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #ffffff;
+        text-align: center;
+        width: 67%;
+        height: 90rpx;
+        margin-left: 28rpx;
+        line-height: 90rpx;
+        background: #256bfa;
+        min-width: 444rpx;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+    }
+}
+.popup-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-evenly;
+    height: calc(77vh - 100rpx - 150rpx);
+    overflow: hidden;
+    .picker-view {
+        width: 100%;
+        height: 500rpx;
+        margin-top: 20rpx;
+        .uni-picker-view-mask {
+            background: rgba(0, 0, 0, 0);
+        }
+        .item {
+            line-height: 84rpx;
+            height: 84rpx;
+            text-align: center;
+            font-weight: 400;
+            font-size: 32rpx;
+            color: #cccccc;
+        }
+        .item-active {
+            color: #333333;
+        }
+        .uni-picker-view-indicator:after {
+            border-color: #e3e3e3;
+        }
+        .uni-picker-view-indicator:before {
+            border-color: #e3e3e3;
+        }
+    }
+    // .list {
+    //     .row {
+    //         font-weight: 400;
+    //         font-size: 32rpx;
+    //         color: #333333;
+    //         line-height: 84rpx;
+    //         text-align: center;
+    //     }
+    // }
+}
 
+.content-wrapper {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+}
+
+.filter-nav {
+    width: 200rpx;
+    background-color: #ffffff;
+
+    .nav-item {
+        height: 100rpx;
+        line-height: 100rpx;
+        text-align: center;
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #666d7f;
+        &.active {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #256bfa;
+        }
+    }
+}
+
+.filter-content {
+    flex: 1;
+    padding: 20rpx;
+    background-color: #f6f6f6;
+
+    .content-item {
+        margin-top: 30rpx;
+        .item-title {
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #333333;
+            margin-bottom: 15rpx;
+        }
+    }
+    .content-item:first-child {
+        margin-top: 0rpx;
+    }
+
+    .check-content {
+        display: grid;
+        gap: 16rpx;
+        grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
+        place-items: stretch;
+
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            background-color: #d9d9d9;
+
+            min-width: 0;
+            padding: 0 10rpx;
+            height: 80rpx;
+            background: #e8eaee;
+            border-radius: 12rpx 12rpx 12rpx 12rpx;
+
+            .option-label {
+                font-size: 28rpx;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+        .checkedstyle {
+            height: 76rpx;
+            background: rgba(37, 107, 250, 0.06);
+            border-radius: 12rpx 12rpx 12rpx 12rpx;
+            border: 2rpx solid #256bfa;
+            color: #256bfa;
+        }
+    }
+}
+</style>
 <style scoped lang="stylus">
 	.app-custom-root {
 		position: fixed;
@@ -639,6 +904,8 @@
 		padding: 0 24rpx;
 		width: calc(100% - 48rpx);
 		position: relative;
+		display: flex;
+		align-items: center;
 	}
 
 	.app-container .container-header .header-input .iconsearch {
@@ -654,6 +921,7 @@
 		background: #ffffff;
 		border-radius: 75rpx;
 		font-size: 28rpx;
+		flex:1
 	}
 
 	.app-container .container-header .header-input .inputplace {
@@ -661,7 +929,13 @@
 		font-size: 28rpx;
 		color: #b5b5b5;
 	}
-
+	.app-container .container-header .header-input .btn-feel {
+		font-weight: 400;
+		font-size: 28rpx;
+		text-align: center;
+		color: #484444;
+		width: 80rpx;
+	}
 	.app-container .container-header .header-date {
 		padding: 28rpx;
 		display: flex;