招聘会列表添加地区筛选
This commit is contained in:
xuchao
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user