You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3760 lines
102 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="joblist-container"
>
<!-- 城市的弹出框 -->
<a-modal class="cityModal" transitionName v-model="visible" width="680px" @cancel="cityModalClose" title="请选择城市" :footer="null">
<div class="inputBox">
<a-input placeholder="请输入城市名称" allow-clear width="300px" v-model="cityValue" @keyup.enter="searchCity" @input="resetCityList"></a-input>
<a-button @click="searchCity">确认</a-button>
</div>
<ul class="firstList">
<li @click="[(currentCityList = hotCityList), (activeInd = -1)]">
<div :class="activeInd == -1 ? 'active' : ''">热门地区</div>
</li>
<li v-for="(item, index) in hasJobCityList.firstList" :key="index" @click="[changeCurrentCity(index), (activeInd = index)]">
<div :class="activeInd == index ? 'active' : ''">
<span v-for="i in item" :key="i">{{ i }}</span>
</div>
</li>
</ul>
<ul class="currentCity">
<li v-for="(item, index) in currentCityList" :key="index">
<div @click="searchJob(item)">{{ item.name }}</div>
</li>
</ul>
</a-modal>
<div class="main-page-obj">
<!-- 筛选导航 -->
<div class="navigation">
<div class="w" id="navigation" style="position: relative;">
<span class="dn">
<!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
<router-link to="/main">
<!-- <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yishoudanlogo"></use></svg
>-->
<img src="//matripe.oss-cn-beijing.aliyuncs.com/bcSVG/dtLogo.png" class="icon" />
</router-link>
</span>
<div class="searchBox g_flex_row_start" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" outline="0" hidefocus="true">
<div class="g_flex_1">
<a-input :placeholder="jobNum ? `近48小时更新${jobNum}条招工信息` : ''" @keyup.enter="onSearch" @input="resetsearch" @blur="hidedownHotStore" @focus="showHotStore" tabindex="0" v-model="searchValue" class="searchinput g_w_all" style allow-clear>
<div slot="prefix" class="fsa w100" @focus.stop tabindex="0" @click.stop="visible = true">
<span class="dpib esl" style="width: 60px">{{ currentCity }}</span>
<div>
<i class="iconfont icon-sousuoxiala"></i>
<i class="iconfont icon-guanbishixin" v-show="currentCity != '全国'" @click.stop="resetCity"></i>
</div>
</div>
<button slot="suffix" @click="onSearch" style="border-radius: 0px 6px 6px 0">搜索</button>
</a-input>
</div>
<div class="g_flex_none g_ml_12">
<a-dropdown :trigger="['click']">
<a style="font-size: 14px;"@click.prevent="e => handleToggle(e)">
筛选
<a-icon type="down" style="font-size: 14px;" v-if="!isToggle" />
<a-icon type="up" style="font-size: 14px;" v-if="isToggle" />
</a>
<div slot="overlay" class="model-obj">
<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style="box-shadow: 3px 3px 20px 0px rgba(77, 87, 94, 0.3);border-radius: 6px;overflow: hidden;">
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }" v-if="false">
<span>
<span>
所有筛选
<i class="iconfont icon-youjiantou"></i>
</span>
<span class="filter-show">
<span @click="delFilter($event, 'price')" v-show="filterObj.price">
{{ filterObj.price }}
<i class="iconfont icon-guanbi2" v-show="filterObj.price"></i>
</span>
<span @click="delFilter($event, 'gender')" v-show="filterObj.gender">
{{ filterObj.gender }}
<i class="iconfont icon-guanbi2" v-show="filterObj.gender"></i>
</span>
<span @click="delFilter($event, 'age')" v-show="filterObj.age">
{{ filterObj.age }}
<i class="iconfont icon-guanbi2" v-show="filterObj.age"></i>
</span>
<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index">
{{ item.name }}
<i class="iconfont icon-guanbi2"></i>
</span>
<i v-show="showDotted" style="line-height: 24px">...</i>
</span>
</span>
<span>
<span class="toggleFilter" @click="hideFilterContent">
{{ filterStatus == 0 ? "收起筛选" : "展开筛选" }}
<i
class="iconfont icon-sousuoxiala"
:style="{
transform: filterStatus == 0 ? 'rotate(180deg) scale(.6)' : '',
}"
></i>
</span>
<a-dropdown :trigger="['click']" overlayClassName="sortClass" placement="bottomRight">
<span class="sort">{{ sortStr }}</span>
<a-menu slot="overlay">
<a-menu-item>
<div class="sortMenu" :class="sortNum == 1 ? 'active' : ''" @click="sortList('price')">工价优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 2 ? 'active' : ''" @click="sortList('juli')">距离优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 3 ? 'active' : ''" @click="sortList('fuwufei')">佣金优先</div>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<div class="filter-content" style="transition: height 0.2s">
<dl class="price">
<dt>工价:</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput"
v-model="minMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="¥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput"
v-model="maxMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="¥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchPrice">确定</button>
</div>
<!-- </div> -->
</div>
<i @click="searchPrice">
<br>
<div class="g_flex_row_start g_mt_12">
<span class="g_mr_40 dav"
:style="{
color: filterObj.price == '3000-4000' ? '#1890ff' : '',
}"
>3000-4000</span
>
<span class="g_mr_40 dav"
:style="{
color: filterObj.price == '4000-5000' ? '#1890ff' : '',
}"
>4000-5000</span
>
<span
class="g_mr_40 dav"
:style="{
color: filterObj.price == '5000-6000' ? '#1890ff' : '',
}"
>5000-6000</span
>
<span class="dav"
:style="{
color: filterObj.price == '6000-7000' ? '#1890ff' : '',
}"
>6000-7000</span
>
</div>
</i>
</dd>
</dl>
<dl class="price" style="padding-bottom: 14px;">
<dt>年龄:</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput age"
v-model="minAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput age"
v-model="maxAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchAge">确定</button>
</div>
<!-- </div> -->
</div>
</dd>
</dl>
<dl>
<dt>性别:</dt>
<dd @click="searchGender">
<span :style="{ color: filterObj.gender == '男' ? '#1890ff' : '' }">男</span>
<span :style="{ color: filterObj.gender == '女' ? '#1890ff' : '' }">女</span>
<span
:style="{
color: filterObj.gender == '男女不限' ? '#1890ff' : '',
}"
>男女不限</span
>
</dd>
</dl>
<dl>
<dt>分类:</dt>
<dd>
<span v-for="(item, index) in classifyList" :key="index" :class="{ 'special-active': filterObj.specialactive.indexOf(item) > -1 }" @click.stop="classifyClick(index, item)">{{ item.name }}</span>
</dd>
</dl>
<dl>
<dt>薪资福利:</dt>
<dd>
<span
v-for="(item, index) in tagArray1"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>宿舍保障:</dt>
<dd>
<span
v-for="(item, index) in tagArray3"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>班制休息:</dt>
<dd>
<span
v-for="(item, index) in tagArray0"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>面试特色:</dt>
<dd>
<span
v-for="(item, index) in tagArray4"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>其他特色:</dt>
<dd>
<span
v-for="(item, index) in tagArray2"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
</div>
</div>
</div>
</a-dropdown>
</div>
</div>
<ul class="hotTag" style="display: none">
<div>热门:</div>
<li
v-for="(item, index) in specialHotTag"
:key="index"
@click="specialclick(index, item)"
:class="{
active: filterObj.specialactive.indexOf(item) > -1,
}"
>
{{ item.name }}
</li>
</ul>
<div class="model-obj-copy">
<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style="border-radius: 6px;overflow: hidden;">
<div class="filter-title" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
<span>
<span class="filter-show">
<span @click="delFilter($event, 'price')" v-show="filterObj.price">
{{ filterObj.price }}
<i class="iconfont icon-guanbi2" v-show="filterObj.price"></i>
</span>
<span @click="delFilter($event, 'gender')" v-show="filterObj.gender">
{{ filterObj.gender }}
<i class="iconfont icon-guanbi2" v-show="filterObj.gender"></i>
</span>
<span @click="delFilter($event, 'age')" v-show="filterObj.age">
{{ filterObj.age }}
<i class="iconfont icon-guanbi2" v-show="filterObj.age"></i>
</span>
<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index">
{{ item.name }}
<i class="iconfont icon-guanbi2"></i>
</span>
<i v-show="showDotted" style="line-height: 24px">...</i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 面包屑 -->
<!-- <a-breadcrumb class="w">
<a-breadcrumb-item href="">
<router-link to="/main"><a-icon type="home" /></router-link>
</a-breadcrumb-item>
<a-breadcrumb-item href="">
<span>一手职位</span>
</a-breadcrumb-item>
</a-breadcrumb>-->
<!-- #### 主体部分 ##### -->
<div class="w" id="maincontent">
<div class="maincontentleft" style="padding-top: 8px">
<div class="tabBar" @click="changeTab($event)">
<div class="tabSubset" :class="{ active: sortTag == 0 }" data-type="0" style="font-size: 16px;">最新</div>
<!-- <div class="tabSubset" :class="{ active: signType == 1 }" data-type="1">按距离</div> -->
<div class="tabSubset" :class="{ active: sortTag == 1 }" data-type="1" style="font-size: 16px;">按工价</div>
<div class="tabSubset" :class="{ active: sortTag == 3 }" data-type="3" style="font-size: 16px;">按佣金</div>
<!-- <div class="tabSubset" :class="{ active: signType == 1 }" v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" data-type="1">一才</div> -->
<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
<!-- v-if="loginValue.agencyName == '郑州一才工作' || loginValue.agencyName == '一才工作'" -->
<!-- <div class="tabSubset" :class="{ active: signType == 2 }" data-type="2">三方</div> -->
</div>
<div class="filter" :class="[filterStatus == 0 ? '' : 'nobd']" style v-if="false">
<div class="filter-title g_flex_row_between" style="margin-bottom: 12px;" :style="{ top: filterStatus == 0 ? '-32px' : '-21px' }">
<span class="g_flex_column_center">
<div class="g_flex_row_start">
<span style="color: #999;" class="g_flex_row_start">
<div class="g_flex_column_center" style="font-size: 14px;">
所有筛选
</div>
<div class="g_flex_column_center">
<i class="iconfont icon-youjiantou" style="font-size: 20px;margin-top: -14px;height: 14px;"></i>
</div>
</span>
<span class="filter-show">
<span @click="delFilter($event, 'price')" v-show="filterObj.price" style="font-size: 14px;cursor: pointer;">
{{ filterObj.price }}
<i class="iconfont icon-guanbi2" v-show="filterObj.price" style="font-size: 14px;"></i>
</span>
<span @click="delFilter($event, 'gender')" v-show="filterObj.gender" style="font-size: 14px;cursor: pointer;">
{{ filterObj.gender }}
<i class="iconfont icon-guanbi2" v-show="filterObj.gender" style="font-size: 14px;cursor: pointer;"></i>
</span>
<span @click="delFilter($event, 'age')" v-show="filterObj.age" style="font-size: 14px;cursor: pointer;">
{{ filterObj.age }}
<i class="iconfont icon-guanbi2" v-show="filterObj.age" style="font-size: 14px;"></i>
</span>
<span @click="delFilter($event, 'special', item)" v-for="(item, index) in filterObj.specialactive" :key="index" style="font-size: 14px;cursor: pointer;">
{{ item.name }}
<i class="iconfont icon-guanbi2" style="font-size: 14px;"></i>
</span>
<i v-show="showDotted" style="line-height: 24px;font-size: 14px;">...</i>
</span>
</div>
</span>
<span>
<!-- <span class="toggleFilter" @click="hideFilterContent">
{{ filterStatus == 0 ? "收起筛选" : "展开筛选" }}
<i
class="iconfont icon-sousuoxiala"
:style="{
transform: filterStatus == 0 ? 'rotate(180deg) scale(.6)' : '',
}"
></i>
</span> -->
<a-dropdown :trigger="['click']" overlayClassName="sortClass" placement="bottomRight">
<span class="sort" style="color: #999;font-size: 14px;">{{ sortStr }}</span>
<a-menu slot="overlay">
<a-menu-item>
<div class="sortMenu" :class="sortNum == 1 ? 'active' : ''" @click="sortList('price')">工价优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 2 ? 'active' : ''" @click="sortList('juli')">距离优先</div>
</a-menu-item>
<a-menu-item>
<div class="sortMenu" :class="sortNum == 3 ? 'active' : ''" @click="sortList('fuwufei')">佣金优先</div>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</div>
<div class="filter-content" style="transition: height 0.2s" v-if="false">
<dl class="price">
<dt>工价:</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput"
v-model="minMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="¥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput"
v-model="maxMonthlyPay"
:maxLength="5"
type="text"
allow-clear
prefix="¥"
@input="resetPriceSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchPrice">确定</button>
</div>
<!-- </div> -->
</div>
<i @click="searchPrice">
<span
:style="{
color: filterObj.price == '3000-4000' ? '#1890ff' : '',
}"
>3000-4000</span
>
<span
:style="{
color: filterObj.price == '4000-5000' ? '#1890ff' : '',
}"
>4000-5000</span
>
<span
:style="{
color: filterObj.price == '5000-6000' ? '#1890ff' : '',
}"
>5000-6000</span
>
<span
:style="{
color: filterObj.price == '6000-7000' ? '#1890ff' : '',
}"
>6000-7000</span
>
</i>
</dd>
</dl>
<dl class="price">
<dt>年龄:</dt>
<dd>
<div class="ageinputbox">
<!-- <div> -->
<a-input
class="ageinput age"
v-model="minAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<span class="middle-line">-</span>
<a-input
class="ageinput age"
v-model="maxAge"
:maxLength="3"
type="text"
allow-clear
suffix="岁"
@input="resetAgeSearch"
@click.stop="
() => {
return false;
}
"
></a-input>
<div class="confirm">
<button @click="searchAge">确定</button>
</div>
<!-- </div> -->
</div>
</dd>
</dl>
<dl>
<dt>性别:</dt>
<dd @click="searchGender">
<span :style="{ color: filterObj.gender == '男' ? '#1890ff' : '' }">男</span>
<span :style="{ color: filterObj.gender == '女' ? '#1890ff' : '' }">女</span>
<span
:style="{
color: filterObj.gender == '男女不限' ? '#1890ff' : '',
}"
>男女不限</span
>
</dd>
</dl>
<dl>
<dt>分类:</dt>
<dd>
<span v-for="(item, index) in classifyList" :key="index" :class="{ 'special-active': filterObj.specialactive.indexOf(item) > -1 }" @click.stop="classifyClick(index, item)">{{ item.name }}</span>
</dd>
</dl>
<dl>
<dt>薪资福利:</dt>
<dd>
<span
v-for="(item, index) in tagArray1"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>宿舍保障:</dt>
<dd>
<span
v-for="(item, index) in tagArray3"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>班制休息:</dt>
<dd>
<span
v-for="(item, index) in tagArray0"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>面试特色:</dt>
<dd>
<span
v-for="(item, index) in tagArray4"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
<dl>
<dt>其他特色:</dt>
<dd>
<span
v-for="(item, index) in tagArray2"
:key="index"
:class="{
'special-active': filterObj.specialactive.indexOf(item) > -1,
}"
@click.stop="specialclick(index, item)"
>{{ item.name }}</span
>
</dd>
</dl>
</div>
</div>
<div style="text-align: center">
<a-spin tip="加载中..." :spinning="isspinning"></a-spin>
</div>
<!-- <div
class="nodata"
v-if="jobMainList.length === 0 && isspinning === false"
>-->
<template v-if="jobMainList.length === 0 && isspinning === false">
<a-empty class="nodata" description="暂无符合条件的岗位" />
</template>
<!-- </div> -->
<div v-if="!isspinning" style="border-radius: 6px;overflow: hidden;">
<div class="list-obj" style="position: relative;">
<div
class="subset"
v-for="(item, index) in jobMainList"
:key="index"
:style="{
background: item.recruitment == '1' ? '#fff' : '#f5f5f5',
}"
>
<!-- v-if="signType == ''" -->
<div class="g_flex_row_between g_w_all item-obj">
<span @click="toDetail(item)" style="cursor: pointer;width: 70%;">
<div class="subsetleft">
<!-- <div class="imgbox">
<img v-if="item.logo.length !== 0" :src="item.logo" style="object-fit: cover; width: 156px; height: 156px" />
<div v-else class="default_avatar">{{ item.brandName || item.jobName }}</div>
</div> -->
<div class="jobinfobox">
<!-- <router-link
target="_blank"
:to="'/detail/' + item.id"
rel="opener"
>-->
<div class="g_flex_row_start">
<div class="jobname">{{ item.jobName }}</div>
<div class="g_flex_column_end">
<div style="color: #a1a1a1;font-size: 14px;margin-left: 15px;">{{ item.up_time }}</div>
</div>
</div>
<!-- <div class="xmfDiv">
<img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/xmfb.svg" class="" alt="" />
<span class="f12 ml4" style="color: #646572">{{ item.supplierName }}</span>
</div> -->
<!-- <img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/ysd1.png" style="width: 20px;height: 20px;" alt=""> -->
<!-- </router-link> -->
<div class="jobinfo">
<span>{{ item.storeDistrict ? item.storeDistrict + ' | ' : ''}}</span>
<span>{{ item.gender }}</span>
<span v-if="item.distance != null && item.distance != '' && formvalue.sortTag == 2">{{ item.distanceKm }}</span>
<span v-else>{{ item.age }}</span>
</div>
<div class="jobtag">
<!-- <span>返费</span> -->
<!-- <i class="iconfont icon-ziying" v-if="item.signType == 1" style></i> -->
<span class="hotTag" v-if="item.hotJob == 1">
<i class="iconfont icon-dianzan1 mr0" style="font-size: 12px"></i>
主推
</span>
<span v-for="(item1, index) in item.jobSpecialLabelNames" :key="index">{{ item1 }}</span>
<span v-if="item.jobSpecialLabelNames.length == 0">暂无特色</span>
</div>
<div class="g_flex_row_start">
<div class="jobpricehour" v-html="getSalaryClassifyValue(item.salaryClassify, item.salaryClassifyValue)"></div>
<div class="g_flex_column_end" style="font-size: 16px">&nbsp;|&nbsp;</div>
<div class="g_flex_column_end">
<div class="jobpricemonth g_flex_column_end" v-if="item.minMonthlyPay" style="margin-left: 0;">
<template v-if="signType != 1">
<span>{{ item.minMonthlyPay ? item.minMonthlyPay / 100 : "" }}</span
>-<span>{{ item.maxMonthlyPay ? item.maxMonthlyPay / 100 : "" }}</span
>元/月
</template>
<template v-else>
<span>{{ item.minMonthlyPay ? item.minMonthlyPay / 100 : "" }}</span
>-<span>{{ item.maxMonthlyPay ? item.maxMonthlyPay / 100 : "" }}</span
>元/月
</template>
</div>
</div>
</div>
</div>
</div>
</span>
<div class="subsetright">
<div class="topContainer">
<div class="updateTime" style="display: none">
<span>更新时间:{{ item.updateTime || "--" }} ( {{ item.diffTime || "--" }} )</span>
</div>
<div class="topbox" v-if="false">
<div>服务费</div>
<div>{{ item.servetype }}</div>
</div>
<div class="fsa f12 pr4" style="background: linear-gradient(138deg,#fde0ad 22%, #fac474); border-radius:2px;color:#754300;line-height:24px;height: 24px;margin-top: 2px;">
<div class>
<img class="mr4" style="width:24px;height:24px;display:block"
src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/fee.svg" lazy-load="false"></img>
</div>
<div class style="font-size:14px;font-weight: 400;">
<!-- {{agencyStatus == 1 ? (item.fuWuFei ? item.fuWuFei : '-') : '仅代理可见'}} -->
{{ item.servetype }}
</div>
</div>
</div>
<div class="bottombox1">
<!-- <a-popover title="" trigger="click" placement="bottomRight">
<template slot="content" class="jobDesp_content">
<div :class="'copy' + index" @click="copyText($event, index)">复制</div>
<span v-if="item.jobDesp" :class="'copyInfo' + index">{{ item.jobDesp }}</span
><span v-else>暂无详单</span>
</template>-->
<a v-if="false">
<button
type="primary"
class="jobDesp br4"
:style="{
background: item.recruitment == '1' ? '#fff' : '#f5f5f5',
}"
@click="toDetail(item)"
>
更多
</button>
</a>
<!-- </a-popover> -->
<div class="g_flex_row_end">
<!-- <a-button shape="circle" type="danger" ghost>
<template #icon> -->
<a v-if="item.customServiceUrl" :href="item.customServiceUrl || 'javascript:;'" target="_blank" class="g_w_60 g_cursor_point">
<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
<a-icon type="message" class="g_fs_16" style="color: #666;" />
</div>
<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
</a>
<div class="g_w_60 g_cursor_point" @click="$message.error('此职位暂未接入客服')" v-else>
<div class="g_text_c g_w_all" style="height: 18px;overflow: hidden;line-height: 18px;">
<a-icon type="message" class="g_fs_16" style="color: #666;" />
</div>
<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">联系客服</div>
</div>
<!-- </template>
</a-button>
<a-button shape="circle" type="danger" ghost @click="toggleGhost" class="g_ml_12">
<template #icon> -->
<div class="g_w_40 g_cursor_point" v-if="false">
<div class="g_text_c g_w_all" style="height: 18px;line-height: 18px;">
<a-icon class="g_fs_17" style="color:#666;" type="star" />
</div>
<div class="g_w_all" style="font-size: 12px;text-align: center;color: #666;zoom: 0.92;">收藏</div>
</div>
<!-- </template> -->
<!-- </a-button> -->
</div>
<a-button class="br4 g_ml_12" @click="torecord(item)" v-if="item.recruitment == '1'" type="primary" style="font-size: 13px;">立即报名</a-button>
<button class="norecruitment" v-else>暂时停招</button>
<!-- <button @click="showmodal(item)" @click="">报名</button> -->
</div>
</div>
</div>
</div>
<div class="top-obj g_flex_c"
style="width: 40px;height: 40px;background-color: #fff;border-radius: 50%;position: fixed;bottom: 100px;right: 30px;cursor: pointer;"
@click="totop"
>
<a-icon type="vertical-align-top" style="font-size: 20px;color: #1890ff;" data-title="点击返回顶部" />
</div>
</div>
<div class="loading-ing g_pt_20 g_pb_20">
<div class="g_w_all g_text_c g_fs_14">
{{ speed == 1 ? '加载中' : '加载完成' }}
</div>
<div class="b-footer">
<div>
<span>
Powered by
<svg class="svg_icon ml4" style="font-size: 46px; margin-top: -2px" aria-hidden="true">
<use xlink:href="#icon-bocai2" />
</svg>
Copyright © 2015-2023 Bocai. All Rights Reserved.
</span>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2023001993号-25A</a>
</div>
</div>
</div>
</div>
<div class="pagecontainer f40" v-if="false">
<a-pagination :current="+formvalue.pageNum" :default-current="1" :defaultPageSize="8" :total="formvalue.total" @change="pageChange" />
<div class="ant-pagination-options-quick-jumper">
跳至
<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
</div>
</div>
</div>
<div class="maincontentright" v-if="false">
<div class="dateinfo">
<h1 class="bottombox">
<i>我的日历</i>
</h1>
<p
class="day"
:style="{
'font-size': '60px',
color: '#1890ff',
'line-height': '80px',
'margin-top': '8px',
}"
>
{{ dateinfo.day }}
</p>
<p class="week" :style="{ 'font-size': '16px', color: '#1890ff' }">{{ dateinfo.week }}</p>
<p class="date" :style="{ 'font-size': '16px', color: '#1890ff' }">{{ dateinfo.date }}</p>
</div>
<div class="hotphone">
<h1 class="bottombox" style>
<i>伯才客服</i>
</h1>
<!-- <div class="fcsc"> -->
<!-- <p>0371-6611 3723</p> -->
<img style="width: 60px; height: 60px; border-radius: 50%; display: block; margin: 24px auto 0" :src="managerInfo.avatar || 'https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/service.jpg'" alt />
<div style="color: #333; font-weight: 600">
<p class="f16" style="margin-top: 10px">
{{ managerInfo.name }}
<i class="iconfont icon-dianhua1 ml4 f14" style="line-height: 24px; color: #1890ff"></i>
</p>
<p class="f16">{{ managerInfo.workPhone || "-" }}</p>
</div>
<!-- </div> -->
</div>
<!-- <div class="relationme">
<p class="bottombox"><i>伯才合作</i></p>
<button>发布伯才</button>
</div>-->
<recommend />
</div>
</div>
</div>
<recordModal :show.sync="recordShow" :jobDetail="currentInfo"></recordModal>
</div>
</template>
<script>
import {
JobListApi,
JobListApiYicai,
getJobSpecialApi,
getProvinceApi,
getHotCityApi,
getCityWhichHasJobApi,
getHotStoreApi,
getClassifyListApi,
getJobNumApi,
// getCityApi,
} from "../../api/job";
import { getUserManagerApi } from "../../api/userinfo";
import $ from "jquery";
import { moneyToFixed, getSalaryClassifyValue, isNotEmptyCheck, disposeJobListData, setReturnFee,setJobInfoPosition } from "../../utils/commonUtil";
import recommend from "@/components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import Clipboard from "clipboard";
// 报名弹窗
import recordModal from "./components/vocationalRecord.vue";
import { data } from "jquery";
// import PinYin from '../../utils/ChinesePY'
// import recordbill from "@/components/FirstJob/components/recordbill.vue";
export default {
// 注入获取职位列表的方法
inject: ["reload"],
// 组件名称
name: "",
// 局部注册的组件
components: {
recommend,
recordModal,
// recordbill,
},
// 组件参数 接收来自父组件的数据
props: {
isspecialboxshow: {
require: true,
},
formvalue: {
// type: Object,
require: true,
},
// isspinning: {
// require: true,
// }, // 加载中显示
},
// 组件状态值
data() {
return {
isToggle:false,
isFetching: false, // 标志位,防止重复加载
speed:1,// 加载进度0 未加载 1加载中 2加载完成
isStop:false,// 是否停止加载
jobMainList: [], // 职位列表
jobNum:0,
recordShow: false,
currentInfo: {}, // 当前点击的职位信息
isLogin: false,
isspinning: false,
sortNum: 1, // 排序的标识
sortStr: "工价优先",
specialList: [], // 获取的特色列表
classifyList: [], // 分类列表
searchValue: "",
specialvalue: [], // 点中的特色标签
classifyvalue: [], // 点中的分类标签
filterObj: {
price: "", // 选中的价格搜索
gender: "", // 选中的性别搜索
specialactive: [], // 点中的特色标签索引
},
showDotted: false,
visible: false, // 录单模态框的展示
confirmLoading: false, // 录单提交的loading效果
cityoption: [], // 城市列表
hotCityList: [], // 热门城市列表
hasJobCityList: {}, // 有职位的城市列表
currentCityList: {}, // 当前首字母展示的城市列表
minMonthlyPay: "",
maxMonthlyPay: "",
isdownHotStoreShow: false, // 热门企业下拉显示
currentPage: "",
currentCity: "全国",
cityValue: "", // 城市输入框内容
activeInd: -1,
hotStoreList: [],
newFormValue: [],
apply: "", // 报名企业id
filterStatus: 0, // 筛选开合状态
filterHeight: "", // 筛选盒子高度
signType: 0, // 自营三方类型(0全部,1自营,2三方)
sortTag:0,
tagArray0: [],
tagArray1: [],
tagArray2: [],
tagArray3: [],
tagArray4: [],
proxyinfo: JSON.parse(localStorage.getItem("LOGIN_DATA")),
nationlist: nationlist,
specialHotTag: [],
loginValue: {},
dateinfo: {
day: "",
week: "",
date: "",
},
options: {
//
price: [
{
value: "3000-4000",
label: "3000-4000元",
uid: 1,
},
{
value: "4000-5000",
label: "4000-5000元",
uid: 1,
},
{
value: "5000-6000",
label: "5000-6000元",
uid: 1,
},
{
value: "6000-7000",
label: "6000-7000元",
uid: 1,
},
],
age: [
{
value: "16-45",
label: "16-45岁",
uid: 2,
},
{
value: "18-35",
label: "18-35岁",
uid: 2,
},
{
value: "45-58",
label: "45-58岁",
uid: 2,
},
{
value: "58",
label: "58岁以上",
uid: 2,
},
],
gender: [
{
value: "1",
label: "男",
uid: 3,
},
{
value: "2",
label: "女",
uid: 3,
},
{
value: "-1",
label: "男女不限",
uid: 3,
},
],
},
relationList: [],
lng: "",
lat: "",
minAge: "",
maxAge: "",
managerInfo: {},
hasTab: false, //判断是不是从后台来的
};
},
// 计算属性
computed: {},
// 侦听器
watch: {
formvalue: {
handler() {
// console.log(e);
// 筛选列表数据处理
// if (e.district !== undefined) {
// if (e.district.length === 0) {
// document.getElementById("city").style.width = 85 + "px";
// } else {
// const result = e.district.join("");
// console.log(result);
// if (result.length > 6) {
// document.getElementById("city").style.width = (result.length + 3) * 14 + "px";
// document.getElementById("city").style.maxWidth = "210px";
// document.querySelector("#city").nextElementSibling.style.width = (result.length + 3) * 14 + "px"; // 获取下一个兄弟元素s
// document.getElementById("city").nextElementSibling.style.maxWidth = "210px";
// } else if (result.length > 5) {
// document.getElementById("city").style.width = (result.length + 2.8) * 14 + "px";
// document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.6) * 14 + "px";
// } else if (result.length > 4) {
// document.getElementById("city").style.width = (result.length + 2.4) * 14 + "px";
// document.querySelector("#city").nextElementSibling.style.width = (result.length + 2.4) * 14 + "px";
// } else {
// document.getElementById("city").style.width = (result.length + 1.5) * 14 + "px";
// document.getElementById("city").style.minWidth = 72 + "px";
// document.querySelector("#city").nextElementSibling.style.width = (result.length + 1.5) * 14 + "px";
// }
// }
// }
// 工价的判断
// if (e.monthlyPayStr.length == 0) {
// document.getElementById("price").style.width = 60 + "px";
// document.getElementById("price").style.minWidth = 60 + "px";
// } else {
// const result = e.monthlyPayStr.join("");
// if (result.length >= 0) {
// document.getElementById("price").style.width = "120px";
// document.getElementById("price").nextElementSibling.style.width = "130px";
// document.querySelector(".ant-cascader-picker-label").style.width =
// "150px";
// }
// }
// if (e.monthlyPayStr.length == 0) {
// document.getElementById("price").style.width = 60 + "px";
// document.getElementById("price").style.minWidth = 60 + "px";
// } else {
// const result = e.monthlyPayStr.join("");
// if (result.length >= 0) {
// document.getElementById("price").style.width = "120px";
// document.getElementById("price").nextElementSibling.style.width = "130px";
// // document.querySelector(".ant-cascader-picker-label").style.width =
// // "150px";
// }
// }
// if (e.sex.length == 0) {
// document.getElementById("gender").style.width = 60 + "px";
// document.getElementById("gender").style.minWidth = 60 + "px";
// } else {
// const result = e.sex.join("");
// if (result.length >= 2) {
// document.getElementById("gender").style.width = "90px";
// document.getElementById("gender").nextElementSibling.style.width = "100px";
// document.querySelector(".ant-cascader-picker-label").style.width =
// "150px";
// }
// }
// 年龄筛选长度的判断
// if (e.ageStr.length === 0) {
// document.getElementById("age").style.width = 60 + "px";
// } else {
// const result = e.ageStr.join("");
// if (result.length >= 0) {
// document.getElementById("age").style.width = "90px";
// document.getElementById("age").nextElementSibling.style.width = "90px";
// // document.querySelector(".ant-cascader-picker-label").style.width =
// // "150px";
// }
// }
},
deep: true,
},
filterObj: {
handler(newv) {
var arr = Object.keys(newv);
console.log(arr.length);
if (arr.length + newv.specialactive.length - 1 > 6) {
this.showDotted = true;
} else {
this.showDotted = false;
}
},
deep: true,
},
"formvalue.pageNum"(val) {
sessionStorage.removeItem("PAGE_TYPE");
},
},
// 组件
// 生命周期钩子 注:没用到的钩子请自行删除
/**
* 组件实例创建完成属性已绑定但DOM还未生成$ el属性还不存在
*/
created() {
// console.log(this.proxyinfo);
console.log(this.$route);
window.addEventListener("beforeunload", (e) => this.removePageInfo());
if (sessionStorage.getItem("PAGE_TYPE")) {
let info = JSON.parse(sessionStorage.getItem("PAGE_TYPE"));
this.signType = info.signType ? info.signType : "";
this.currentPage = info.pageNum ? info.pageNum : 1;
}
if (this.$route.query.tab == 1 || localStorage.getItem("hasTab")) {
this.signType = 1;
this.hasTab = true;
//写入session缓存
localStorage.setItem("hasTab", this.hasTab);
}
if (localStorage.getItem("LOGIN_DATA")) {
this.isLogin = true;
}
if (this.currentPage) {
// console.log(this.currentPage);
this.formvalue.pageNum = this.currentPage;
}
if (this.signType == "") {
this.getJobList();
this.getJobNum();
} else {
this.getJobList();
}
this.getRecommendJob();
this.getJobSpecial();
this.getProvince();
this.getdateinfo();
this.getHotCity();
this.getCityWhichHasJob();
this.getHotStore();
this.getClassifyList();
this.getUserManager();
this.hideFilterContent();
if (isNotEmptyCheck(localStorage.getItem("POSITION_INFO"))) {
let position = JSON.parse(localStorage.getItem("POSITION_INFO"));
let diffTime = new Date().getTime() - JSON.parse(localStorage.getItem("POSITION_INFO")).timestamp;
if (diffTime / 3600000 > 24) {
this.getPosition();
} else {
this.lng = position.lng;
this.lat = position.lat;
}
} else {
this.getPosition();
}
},
/**
* el 被新创建的 vm.el 替换,并挂载到实例上去之后调用该钩子。
* 如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.el 也在文档内。
*/
mounted() {
this.loginValue = localStorage.getItem("LOGIN_DATA") !== null ? JSON.parse(localStorage.getItem("LOGIN_DATA")) : { tel: "" };
console.log(this.loginValue);
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
console.log("beforeDestroy");
// sessionStorage.removeItem("PAGE_TYPE")
window.removeEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener("beforeunload", (e) => this.removePageInfo(e));
},
// 组件方法
methods: {
// ... 其他方法
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = document.documentElement.clientHeight;
const scrollHeight = document.documentElement.scrollHeight;
if (scrollTop + windowHeight >= scrollHeight - 100 && !this.isFetching && !this.isStop) { // 100 是一个阈值,可以根据需要调整
this.isFetching = true;
setTimeout(() => {
this.speed = 1;
this.loadMoreData();
}, 300);
}
},
loadMoreData() {
this.formvalue.pageNum += 1; // 增加页码
if (this.signType != 0) {
this.getJobList({isScroll:1}).then(() => {
this.isFetching = false;
});
} else {
this.getJobList({isScroll:1}).then(() => {
this.isFetching = false;
});
}
},
removePageInfo() {
sessionStorage.removeItem("PAGE_TYPE");
},
// 处理筛选框的定位
// filterbox() {
// return () => {
// return document.getElementById("filterbox")[0];
// // return document.body;
// };
// },
/**
* 获取登录人对应的客户经理信息
*/
getUserManager() {
getUserManagerApi().then(({ data }) => {
console.log(data);
this.$store.commit("setManagerInfo", data.data);
this.managerInfo = data.data;
console.log("+++++++++++++++++++++++++", this.$store);
});
},
async getRecommendJob() {
this.isspinning = true;
try {
if (this.isLogin) {
const { data } = await JobListApi({
pageNum: 1,
pageSize: 4,
jobCategory: 608,
});
console.log(data.data.recordList);
this.fellowList = disposeJobListData(data.data.recordList);
// console.log(this.fellowList);
}
// this.$emit("update:relationList", this.relationList);
} catch (error) {
console.log(error);
}
this.isspinning = false;
},
async getJobList(newdata) {
// this.isspinning = true;
console.log('newdata',newdata);
try {
newdata = {
district: "",
monthlyPayStr: "",
ageStr: "",
jobRequestLabelIds: "",
aliasName: "",
pageNum: this.formvalue.pageNum, // 使用当前页码
pageSize: 8,
total: null, //分页配置
isScroll: newdata && newdata.isScroll == 1 ? 1 : 0,
sortTag: this.sortTag
};
for (var k in this.formvalue) {
if (Array.isArray(this.formvalue[k])) {
newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
} else {
newdata[k] = this.formvalue[k];
}
}
if (this.isLogin) {
const { data } = await JobListApi(newdata);
if (data.status === 200) {
if(data.data.recordList.length < 8){
// 停止加载
this.isStop = true;
this.speed = 2;
}else{
// 继续加载
this.isStop = false;
this.speed = 1;
}
data.data.recordList.forEach(item => {
item.up_time = this.timeShowXXX2(item.updateTime)
item.storeDistrict = setJobInfoPosition(item.storeDistrict)
})
if(newdata.isScroll == 1){
this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
}else{
this.jobMainList = disposeJobListData(data.data.recordList)
}
this.formvalue.total = data.data.recordCount;
} else {
this.$message.info("数据获取失败");
}
}
// this.totop();
} catch (error) {
console.log(error);
}
this.isspinning = false;
},
timeShowXXX2(val){
const now = Date.now();
const diff = now - val;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days < 2) {
if (hours > 0) {
return `${hours}小时前`;
} else if (minutes > 0) {
return `${minutes}分钟前`;
} else {
return `${seconds}秒前`;
}
} else {
return `${days}天前`;
}
},
async getJobListYicai(newdata) {
// this.isspinning = true;
console.log(this.formvalue);
try {
let aId = "";
if (window.location.origin.indexOf("localhost:") > -1 || window.location.origin.indexOf("test.") > -1) {
aId = "2743";
} else {
aId = "3087";
}
newdata = {
agencyId: aId,
recruitment: "1",
keys: "",
pageNum: this.formvalue.pageNum, // 使用当前页码
pageSize: 8,
total: null, //分页配置
};
for (var k in this.formvalue) {
if (Array.isArray(this.formvalue[k])) {
newdata[k] = this.formvalue[k].length > 0 ? this.formvalue[k].join() : "";
} else {
newdata[k] = this.formvalue[k];
}
}
if (this.isLogin) {
const { data } = await JobListApiYicai(newdata);
if (data.status === 200) {
this.jobMainList = this.jobMainList.concat(disposeJobListData(data.data.recordList)); // 追加数据
this.jobMainList.forEach((item, index) => {
if (item.jobType == 2) {
item["servetype"] = setReturnFee(item.agencyReturnFee, item.agencyReturnFeeType);
} else {
item["servetype"] = setReturnFee(item.returnFee, item.returnFeeType);
}
});
this.formvalue.total = data.data.recordCount;
} else {
this.$message.info("数据获取失败");
}
}
// this.totop();
} catch (error) {
console.log(error);
}
this.isspinning = false;
},
async getJobNum() {
const { data } = await getJobNumApi();
this.jobNum = data.data;
console.log('getJobNum',data);
},
//搜索企业名称
onSearch() {
// console.log(e);
// if (typeof e === "string" || typeof e === "number") {
// if (e.length !== 0) {
// console.log("zifuchuan ");
// this.formvalue.aliasName = e;
// this.getJobList();
// }
// } else
console.log(typeof this.searchValue.trim());
// this.formvalue = {
// // 筛选的上传参数
// district: [], // 城镇数据
// monthlyPayStr: [], // 每月工资
// ageStr: '', // 年龄数据
// jobRequestLabelIds: [], // 特色标签索引
// aliasName: '',
// sex: [],
// pageNum: 1,
// pageSize: 8,
// total: null, //分页配置
// }
// this.formvalue.aliasName = "";
this.formvalue.ageStr = "";
if (this.searchValue.trim() !== "") {
this.formvalue.pageNum = 1;
console.log(this.searchValue);
if (typeof +this.searchValue.trim() == "number" && !isNaN(+this.searchValue.trim())) {
this.formvalue.ageStr = this.searchValue.trim();
this.formvalue.keys = "";
} else {
// this.formvalue.aliasName = this.searchValue.trim();
this.formvalue.keys = this.searchValue.trim();
this.formvalue.ageStr = "";
}
// console.log("search1");
// this.formvalue.aliasName = this.searchValue;
// console.log(this.formvalue);
if (this.formvalue.signType == 1) {
this.getJobList();
} else {
this.getJobList();
}
this.isdownHotStoreShow = false;
}
// this.$router.push("/list").catch((err) => {
// console.log(err);
// });
},
// 搜索工价
searchPrice(e) {
console.log(e);
this.formvalue.pageNum = 1;
if (e.target.nodeName == "SPAN") {
if (e.target.textContent == this.filterObj.price) {
this.formvalue.monthlyPayStr = "";
this.filterObj.price = "";
} else {
this.formvalue.monthlyPayStr = e.target.textContent;
this.filterObj.price = this.formvalue.monthlyPayStr;
}
this.getJobList();
} else if (e.target.nodeName == "BUTTON") {
console.log(this.minMonthlyPay);
console.log(this.maxMonthlyPay);
if (this.minMonthlyPay.length != 0 && this.maxMonthlyPay.length != 0 && typeof +this.minMonthlyPay == "number" && typeof +this.maxMonthlyPay == "number" && !isNaN(+this.minMonthlyPay) && !isNaN(+this.maxMonthlyPay)) {
this.formvalue.monthlyPayStr = this.minMonthlyPay + "-" + this.maxMonthlyPay;
this.filterObj.price = this.formvalue.monthlyPayStr;
this.getJobList();
}
}
},
/**
* 搜索年龄
*/
searchAge() {
console.log(this.minAge);
console.log(this.maxAge);
if (this.minAge.length != 0 && this.maxAge.length != 0 && typeof +this.minAge == "number" && typeof +this.maxAge == "number" && !isNaN(+this.minAge) && !isNaN(+this.maxAge)) {
let list = [this.minAge, this.maxAge];
list.sort(function (a, b) {
return a - b;
});
console.log(list);
this.formvalue.ageRangeStr = list[0] + "-" + list[1];
this.filterObj.age = this.formvalue.ageRangeStr;
console.log(this.filterObj.age);
this.getJobList();
}
},
// 搜索性别
searchGender(e) {
console.log(e);
if (e.target.tagName == "SPAN") {
if (e.target.textContent == "男") {
if (this.filterObj.gender == "男") {
this.filterObj.gender = "";
this.formvalue.sex = "";
} else {
this.filterObj.gender = "男";
this.formvalue.sex = 1;
}
} else if (e.target.textContent == "女") {
if (this.filterObj.gender == "女") {
this.filterObj.gender = "";
this.formvalue.sex = "";
} else {
this.filterObj.gender = "女";
this.formvalue.sex = 2;
}
} else {
if (this.filterObj.gender == "男女不限") {
this.filterObj.gender = "";
this.formvalue.sex = "";
} else {
this.filterObj.gender = "男女不限";
this.formvalue.sex = -1;
}
}
this.getJobList();
}
},
// 获取职位特色
getJobSpecial() {
// var timestamp = new Date().getTime();
console.log(new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST")));
console.log(new Date(new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST"))));
if (isNotEmptyCheck(localStorage.getItem("SPECIALLIST"))) {
let diffTime = new Date().getTime() - JSON.parse(localStorage.getItem("SPECIALLIST")).timestamp;
if (diffTime / 3600000 > 2) {
console.log("======================", "needRequest");
this.getJobSpecialList().then((res) => {
this.specialList = res;
this.specialList.forEach((item) => {
if (item.typeClassify == "0") {
this.tagArray0.push(item);
} else if (item.typeClassify == "1") {
this.tagArray1.push(item);
} else if (item.typeClassify == "2") {
this.tagArray2.push(item);
} else if (item.typeClassify == "3") {
this.tagArray3.push(item);
} else if (item.typeClassify == "4") {
this.tagArray4.push(item);
}
if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
this.specialHotTag.push(item);
}
});
});
} else {
this.specialList = JSON.parse(localStorage.getItem("SPECIALLIST")).data;
console.log(diffTime);
this.specialList.forEach((item) => {
if (item.typeClassify == "0") {
this.tagArray0.push(item);
} else if (item.typeClassify == "1") {
this.tagArray1.push(item);
} else if (item.typeClassify == "2") {
this.tagArray2.push(item);
} else if (item.typeClassify == "3") {
this.tagArray3.push(item);
} else if (item.typeClassify == "4") {
this.tagArray4.push(item);
}
if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
this.specialHotTag.push(item);
}
});
}
} else {
this.getJobSpecialList().then((res) => {
this.specialList = res;
this.specialList.forEach((item) => {
if (item.typeClassify == "0") {
this.tagArray0.push(item);
} else if (item.typeClassify == "1") {
this.tagArray1.push(item);
} else if (item.typeClassify == "2") {
this.tagArray2.push(item);
} else if (item.typeClassify == "3") {
this.tagArray3.push(item);
} else if (item.typeClassify == "4") {
this.tagArray4.push(item);
}
if (item.name == "大龄工" || item.name == "暑假工" || item.name == "长白班") {
this.specialHotTag.push(item);
}
});
});
}
this.$nextTick(() => {
let fileterContent = document.querySelector(".filter-content");
this.filterHeight = fileterContent.scrollHeight;
// fileterContent.style.height = this.filterHeight + "px";
});
},
// 改变自营三方类型
changeTab(e) {
this.formvalue.pageNum = 1
if (e.target.dataset.type != undefined) {
this.formvalue.pageNum = 1;
// if (e.target.dataset.type != 0) {
// this.formvalue.signType = this.signType = e.target.dataset.type;
// this.getJobListYicai();
// } else {
this.formvalue.sortTag = this.sortTag = e.target.dataset.type;
this.getJobList();
//}
}
},
async getJobSpecialList() {
const { data } = await getJobSpecialApi();
console.log(data);
if (data.status == 200) {
let container = {
data: data.data,
timestamp: new Date().getTime(),
};
// console.log(container.timestamp);
localStorage.setItem("SPECIALLIST", JSON.stringify(container));
return data.data;
}
},
// 获取省份列表
async getProvince() {
// const that = this;
try {
const { data } = await getProvinceApi();
// console.log(data);
data.data.pop();
this.cityoption = data.data;
// console.log(this.cityoption);
// console.log(data);
} catch (error) {
// console.log(error);
}
},
// 筛选职位
onChange() {
// console.log(e);
// console.log(item);
// console.log(this.formvalue);
// if (item) {
// if (item.uid === 1) {
// console.log(1);
// this.formvalue.monthlyPayStr = item[0];
// } else if (item.uid === 2) {
// this.formvalue.ageStr = item[0];
// } else if (item[0].id) {
// console.log(e.join());
// this.formvalue.district = e;
// } else
// if (item[0].uid == 3){
// this.formvalue.sex = item[0].value;
// }
// }
this.getJobList();
},
pageChange(e) {
console.log(e);
this.formvalue.pageNum = e;
this.$refs.pageinput.value = "";
if (this.signType == 1) {
this.getJobList();
} else {
this.getJobList();
}
},
inputpageChange(e) {
const pagenumcount = this.formvalue.total / this.formvalue.pageSize;
// console.log(pagenumcount);
if (e.target.value) {
if (e.target.value > pagenumcount) {
this.formvalue.pageNum = Math.ceil(pagenumcount);
} else {
this.formvalue.pageNum = e.target.value;
}
} else {
this.formvalue.pageNum = 1;
}
this.getJobList();
// console.log(e);
},
handleChange() {},
claerfilter() {
const { pageNum, pageSize, total } = this.formvalue;
// this.formvalue = { // 改变引用地址不会使vue侦听到数据的变化,
// district: [],
// monthlyPayStr: [],
// ageStr: [],
// jobRequestLabelIds: [],
// pageNum,
// pageSize,
// total, //分页配置
// };
this.formvalue.district = [];
this.formvalue.monthlyPayStr = [];
this.formvalue.ageStr = "";
this.formvalue.jobRequestLabelIds = [];
this.formvalue.aliasName = "";
this.formvalue.cityName = "";
this.formvalue.sex = [];
this.formvalue.levelType = "";
this.formvalue.hotStoreId = "";
this.currentCity = "全国";
this.formvalue.pageNum = pageNum;
this.formvalue.pageSize = pageSize;
this.formvalue.total = total;
// console.log(this.formvalue);
this.filterObj.specialactive = [];
this.specialvalue = [];
this.getJobList();
},
specialclick(index, item) {
// console.log(item);
// console.log(index);
let arrIndex = this.filterObj.specialactive.indexOf(item);
console.log("arrIndex1", arrIndex);
if (arrIndex > -1) {
this.filterObj.specialactive.splice(arrIndex, 1);
this.specialvalue.splice(this.specialvalue.indexOf(item.id), 1);
} else {
this.filterObj.specialactive.push(item);
this.specialvalue.push(item.id);
}
console.log("this.filterObj.specialactive", this.filterObj.specialactive);
console.log("this.specialvalue", this.specialvalue);
this.formvalue.jobRequestLabelIds = this.specialvalue;
// console.log(this.filterObj.specialactive);
this.getJobList();
// console.log(this.specialvalue);
// console.log(this.formvalue);
// console.log(index);
},
classifyClick(index, item) {
let arrIndex = this.filterObj.specialactive.indexOf(item);
console.log("arrIndex", arrIndex);
if (arrIndex > -1) {
this.filterObj.specialactive.splice(arrIndex, 1);
this.classifyvalue.splice(this.classifyvalue.indexOf(item.id), 1);
} else {
this.filterObj.specialactive.push(item);
this.classifyvalue.push(item.id);
}
console.log("this.filterObj.specialactive", this.filterObj.specialactive);
console.log("this.classifyvalue", this.classifyvalue);
this.formvalue.jobCategoryLabelIds = this.classifyvalue;
console.log(this.filterObj.specialactive);
this.getJobList();
},
isspecialboxshowclick() {
this.$emit("update:isspecialboxshow", !this.isspecialboxshow);
},
totop() {
// console.log(window);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
window.body.scrollY = 0;
},
moneyToFixed(value) {
// console.log(value);
return moneyToFixed(value);
},
// 重置搜索结果
resetsearch(e) {
// console.log(e);
if (e.target.value.length === 0) {
this.formvalue.aliasName = "";
this.formvalue.keys = "";
this.formvalue.ageStr = "";
console.log("this.formvalue", this.formvalue);
if (this.formvalue.signType == 1) {
this.getJobList();
} else {
this.getJobList();
}
}
// this.$router.push("/list").catch((err) => {
// console.log(err);
// });
},
delFilter(e, value, items) {
console.log(e);
console.log(items);
if (value == "price") {
this.filterObj.price = "";
this.formvalue.monthlyPayStr = "";
this.minMonthlyPay = "";
this.maxMonthlyPay = "";
} else if (value == "gender") {
this.filterObj.gender = "";
this.formvalue.sex = "";
} else if (value == "age") {
this.filterObj.age = "";
this.formvalue.ageRangeStr = "";
this.minAge = "";
this.maxAge = "";
} else {
this.filterObj.specialactive.splice(this.filterObj.specialactive.indexOf(items), 1);
if (this.classifyvalue.indexOf(items.id) != -1) {
this.classifyvalue.splice(this.classifyvalue.indexOf(items.id), 1);
this.formvalue.jobCategoryLabelIds = this.classifyvalue;
} else {
this.specialvalue.splice(this.specialvalue.indexOf(items.id), 1);
this.formvalue.jobRequestLabelIds = this.specialvalue;
}
// if(this.filterObj.specialactive.indexOf(items) > -1){
// }
}
this.getJobList();
},
resetPriceSearch(e) {
// console.log(e.target.value);
// console.log(+e.target.value);
if (this.minMonthlyPay.length == 0 && this.maxMonthlyPay.length == 0) {
this.formvalue.monthlyPayStr = "";
this.filterObj.price = "";
this.getJobList();
} else if (typeof +e.target.value != "number" || isNaN(+e.target.value)) {
this.$message.warning("请输入正确的价格");
}
},
resetAgeSearch(e) {
console.log(this.minAge);
console.log(this.maxAge);
if (this.minAge.length == 0 && this.maxAge.length == 0) {
this.formvalue.ageRangeStr = "";
this.filterObj.age = "";
this.getJobList();
} else if (typeof +e.target.value != "number" || isNaN(+e.target.value)) {
this.$message.warning("请输入正确的价格");
}
},
cityModalClose() {
// 城市选择弹出框关闭
this.cityValue = "";
this.searchCity();
},
// 获取日期信息
getdateinfo() {
const date = new Date();
// console.log(date);
// console.log(date.getDate());
// console.log(date.getDay());
// console.log(date.getFullYear());
// console.log(date.getMonth());
if (date.getDay() === 1) {
this.dateinfo.week = "星期一";
} else if (date.getDay() === 2) {
this.dateinfo.week = "星期二";
} else if (date.getDay() === 3) {
this.dateinfo.week = "星期三";
} else if (date.getDay() === 4) {
this.dateinfo.week = "星期四";
} else if (date.getDay() === 5) {
this.dateinfo.week = "星期五";
} else if (date.getDay() === 6) {
this.dateinfo.week = "星期六";
} else if (date.getDay() === 7) {
this.dateinfo.week = "星期日";
}
// console.log(date.getDate());
// console.log(date.getDate().length);
if (date.getDate().toString().length <= 1) {
this.dateinfo.day = "0" + date.getDate();
// console.log(this.dateinfo.day);
} else {
this.dateinfo.day = date.getDate();
// console.log(this.dateinfo.day);
}
this.dateinfo.date = date.getFullYear() + "." + (date.getMonth() + 1);
},
// delmark(index) {
// // console.log(index);
// this.specialactive.splice(index, 1);
// this.specialvalue.splice(index, 1);
// this.getJobList();
// },
torecord(item) {
// 跳转到路由新页面的方法
// console.log(item);
// let userinfo = JSON.stringify(item);
sessionStorage.setItem("PAGE_TYPE", JSON.stringify({ id: item.id, pageNum: this.formvalue.pageNum, signType: this.signType, jobClassify: item.jobClassify }));
if (this.signType == "") {
this.$router.push({ name: "recordbill", params: item });
sessionStorage.setItem("CURRENT_FIRM", JSON.stringify(item));
} else if (this.signType == "1") {
this.$router.push({ name: "recordbillYicai", params: item });
sessionStorage.setItem("CURRENT_FIRM_YICAI", JSON.stringify(item));
}
},
getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
return getSalaryClassifyValue(salaryClassify, salaryClassifyValue);
},
async getHotCity() {
try {
const { data } = await getHotCityApi();
// console.log(data);
if (data.status == 200) {
this.hotCityList = data.data;
this.currentCityList = this.hotCityList;
}
} catch (error) {
// console.log(error);
}
},
async getCityWhichHasJob() {
try {
const { data } = await getCityWhichHasJobApi();
console.log(data);
if (data.status == 200) {
let pinyinList = [];
data.data.forEach((item) => {
if (pinyinList.indexOf(item.firstLetter) == -1) {
pinyinList.push(item.firstLetter);
}
});
pinyinList.sort(); // 拼音首字母排序
let firstList = [];
let cityList = [];
let num = -1;
pinyinList.forEach((item, i) => {
if (i % 5 == 0) {
num++;
firstList[num] = [];
}
firstList[num].push(item);
});
firstList.forEach((item, i) => {
cityList[i] = [];
item.forEach((item1) => {
data.data.forEach((item2) => {
if (item2.firstLetter == item1) {
cityList[i].push(item2);
}
});
});
});
this.hasJobCityList.firstList = firstList;
this.hasJobCityList.cityList = cityList;
}
} catch (error) {
// console.log(error);
}
},
async getHotStore() {
try {
const { data } = await getHotStoreApi();
// console.log(data);
if (data.status == 200) {
let middle = [];
this.hotStoreList = data.data;
this.hotStoreList.forEach((item, index) => {
if (index <= 4) {
middle.push(item);
}
});
this.hotStoreList = middle;
// console.log(this.hotStoreList);
}
} catch (error) {
// console.log(error);
}
},
async getClassifyList() {
try {
const { data } = await getClassifyListApi();
console.log(data);
if (data.status == 200) {
console.log(data);
this.classifyList = data.data.labels;
this.$nextTick(() => {
let fileterContent = document.querySelector(".filter-content");
if (isNotEmptyCheck(fileterContent.scrollHeight)) {
this.filterHeight = fileterContent.scrollHeight;
}
// fileterContent.style.height = this.filterHeight + "px";
});
}
} catch (error) {
// console.log(error);
}
},
changeCurrentCity(index) {
this.currentCityList = this.hasJobCityList.cityList[index];
// console.log(index);
},
searchCity() {
this.currentCityList = [];
if (this.cityValue) {
this.hotCityList.forEach((item) => {
// console.log(item);
// console.log(item.name.indexOf(this.cityValue));
if (item.name.indexOf(this.cityValue) > -1) {
// console.log(123);
this.currentCityList.push(item);
}
});
}
if (this.currentCityList.length == 0) {
this.currentCityList = this.hotCityList;
}
},
resetCityList(e) {
if (e.target.value.length === 0) {
this.cityValue = "";
this.currentCityList = this.hotCityList;
}
},
searchJob(item) {
// console.log(item);
this.formvalue.pageNum = 1;
if (item.levelType == 1) {
this.formvalue.cityName = "";
this.formvalue.provinceName = item.name;
} else {
this.formvalue.provinceName = "";
this.formvalue.cityName = item.name;
}
this.formvalue.levelType = item.levelType;
this.currentCity = item.name;
// this.getJobList();
this.visible = false;
console.log("this.formvalue.signType", this.formvalue.signType);
if (this.signType != 0) {
this.getJobList();
} else {
this.getJobList();
}
},
getHotStoreList(item) {
// console.log(item);
this.searchValue = item.storeName;
this.formvalue.keys = item.storeName;
this.isdownHotStoreShow = false;
// this.formvalue.hotStoreId = item.storeId;
this.getJobList();
},
resetResult() {
this.formvalue.cityName = "";
this.formvalue.levelType = "";
this.formvalue.hotStoreId = "";
this.currentCity = "全国";
// console.log(this.formvalue);
// this.getJobList();
if (this.formvalue.signType != 0) {
this.getJobList();
} else {
this.getJobList();
}
},
copyText(event, ind) {
// 复制文本内容
var clipboard = new Clipboard(".copy" + ind, {
// .copy 是点击的触发元素
target: function () {
// 通过target指定要复印的节点
return document.querySelector(".copyInfo" + ind); // .copyInfo 是要复制的目标内容
},
});
// console.log(clipboard);
// if(){
// }
clipboard.on("success", () => {
// success 是成功的回调 success => error 可以捕获复制失败的异常信息
// console.log(123);
// console.log(e);
this.$message.success("复制成功");
clipboard.destroy();
});
},
showHotStore() {
// 显示热门企业下拉
// console.log("isinner");
this.isdownHotStoreShow = true;
},
hidedownHotStore() {
// console.log("isdown");
this.isdownHotStoreShow = false;
},
resetCity() {
// 重置当前城市
this.currentCity = "全国";
this.formvalue.cityName = "";
this.formvalue.levelType = "";
this.formvalue.provinceName = "";
// this.getJobList();
if (this.formvalue.signType != 0) {
this.getJobList();
} else {
this.getJobList();
}
},
/**
* 前往详情页
*/
toDetail(item) {
// :to="signType == '' ? '/detail?id=' + item.id + '&page=' + formvalue.pageNum : '/detailYicai?id=' + item.id + '&page=' + formvalue.pageNum"
sessionStorage.setItem("PAGE_TYPE", JSON.stringify({ id: item.id, pageNum: this.formvalue.pageNum, signType: this.signType, jobClassify: item.jobClassify }));
const routeURL = this.$router.resolve({
name: this.signType == "" ? "Detail" : "DetailYicai",
// query: item.id,
});
window.open(routeURL.href, "_blank");
console.log(item);
},
hideFilterContent() {
setTimeout(() => {
let fileterContent = document.querySelector(".filter-content");
// console.log(fileterContent)
// fileterContent.style.transition = 'all .2s'
if (this.filterStatus == 0) {
console.log("is in the 0 zone");
this.filterStatus = 1;
fileterContent.style.height = "0px";
} else {
console.log("is in the 1 zone");
this.filterStatus = 0;
fileterContent.style.height = this.filterHeight + "px";
}
}, 0);
},
/**
* 获取当前位置信息
*
*
*/
getPosition() {
let that = this;
$.ajax({
url: "https://restapi.amap.com/v3/ip?key=44c6ad3624a5957505fec66f6bdd6110",
// type: "GET",
dataType: "JSONP",
success: function (data) {
console.log(data);
let position = data.rectangle.split(";");
console.log(position);
var lng1;
var lng2;
position.forEach((item, index) => {
if (index == 0) {
lng1 = item.split(",");
} else if (index == 1) {
lng2 = item.split(",");
}
});
that.lng = (+lng1[0] + +lng2[0]) / 2;
that.lat = (+lng1[1] + +lng2[1]) / 2;
localStorage.setItem("POSITION_INFO", JSON.stringify({ lng: that.lng, lat: that.lat, timestamp: new Date().getTime() }));
// lng: '',
// lat: '',
// let code = cityList.find((item) => {
// return item.city == data.city
// }).code
},
});
},
sortList(type) {
console.log(type);
this.formvalue.lng = "";
this.formvalue.lat = "";
if (type == "juli") {
this.formvalue.sortTag = 2;
this.sortNum = 2;
this.sortStr = "距离优先";
this.formvalue.lng = this.lng;
this.formvalue.lat = this.lat;
} else if (type == "fuwufei") {
this.sortNum = 3;
this.sortStr = "佣金优先";
this.formvalue.sortTag = 3;
} else if (type == "price") {
this.sortNum = 1;
this.sortStr = "工价优先";
this.formvalue.sortTag = 1;
}
this.getJobList();
},
/**
* 职教职培报名点击
*/
showRecord(info) {
console.log(info);
this.currentInfo = info;
this.recordShow = true;
// window.open(`https://jinshuju.net/f/ohFOxo?x_field_1=${this.currentInfo.vocationalName}&background=white&banner=show&embedded=true&inner_redirect=false`);
// console.log("this.recordShow", this.recordShow);
// console.log("this.currentInfo", this.currentInfo);
},
handleToggle(e){
this.isToggle = !this.isToggle
}
},
};
</script>
<style scoped lang="less">
.joblist-container {
background-color: #f0f0f0;
padding-top: 56px;
}
// .dropdown {
// display: inline-block;
// width: 100px;
// height: 32px;
// line-height: 30px;
// font-size: 16px;
// // border: 1px solid rgba(77, 87, 94, 0.3);
// border-radius: 4px;
// margin-left: 16px;
// border: 1px solid #1890ff;
// background-color: #fff;
// color: rgba(255, 106, 0, 1);
// text-align: center;
// cursor: pointer;
// &:hover {
// color: #fff;
// background-color: #ff791a;
// }
// }
/deep/ .ant-drawer-content {
box-sizing: border-box;
}
// 录单模态框样式
/deep/ .ant-drawer-wrapper-body {
// overflow: none;
// position: relative;
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
}
.ant-drawer-header {
position: absolute;
width: 100%;
background-color: #fff;
padding: 12px 24px;
z-index: 999;
.ant-drawer-close {
height: 48px;
width: 48px;
line-height: 48px;
}
}
.ant-drawer-body {
overflow-y: auto;
margin-top: 47px;
}
}
/deep/ .ant-form {
// overflow: auto;
margin-bottom: 50px;
}
/deep/ .ant-form-item {
// margin-bottom: 0;
display: flex;
justify-content: start;
align-items: middle;
margin-top: -8px;
.ant-form-item-label {
line-height: 40px;
// font-weight: bold;
}
.ant-input {
// width: 430px;
height: 40px;
// border: none;
border: 1px solid #dddddd;
box-shadow: none !important;
// background-color: #f6f6f6;
}
.ant-select-selection__rendered,
.ant-select-selection--single,
.ant-select {
height: 40px;
// border: none;
// border: 1px solid #dddddd;
line-height: 40px;
box-shadow: none !important;
border-color: #d9d9d9;
/deep/ .ant-form-item-children {
line-height: 40px;
// .ant-radio-checked {
// }
// display: flex !important;
}
// &:hover {
// border-color: #d9d9d9;
// }
// &:focus {
// border-color: #d9d9d9;
// }
// &:active {
// border-color: #d9d9d9;
// }
}
}
// /deep/ .ant-modal-footer {
// padding: 10px 24px;
// .ant-btn {
// box-shadow: none;
// &:hover {
// color: #1890ff;
// border-color: #1890ff;
// }
// }
// .ant-btn.ant-btn-primary {
// background-color: #1890ff !important;
// border: none;
// line-height: 32px;
// margin-left: 12px;
// color: #fff;
// box-shadow: none;
// &:hover {
// background-color: #ff8025 !important;
// }
// }
// }
/deep/ .ant-modal-header {
.ant-modal-title {
font-size: 20px;
// font-weight: normal;
}
}
/deep/ .ant-drawer-body {
overflow: auto;
padding: 20px 16px 8px 16px;
}
/deep/ .navigation {
// margin-top: -1px;
width: 100vw;
padding: 25px 0 64px 0;
background-color: #f0f0f0;
// border: 1px solid #f6f6f6;
// height: 72px;
// margin-bottom: 10px;
// line-height: 100px;
position: relative;
z-index: 9;
.special-active {
color: rgb(254, 97, 0) !important;
background-color: rgba(255, 106, 0, 0.1) !important;
}
.ant-cascader-picker-focused {
input {
transition: all 0.3s;
}
input::placeholder {
color: rgb(255, 106, 0) !important;
}
i {
color: rgb(255, 106, 0) !important;
}
}
> .w {
// height: 72px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
// flex-direction: column;
.icon {
width: 90px;
height: auto;
margin-top: 6px;
}
.searchBox {
position: relative;
// margin-left: 100px;
width: 640px;
line-height: 44px;
z-index: 10;
.hotStore {
position: absolute;
top: 46px;
left: 0px;
line-height: 24px;
// margin: 8px 0 12px 0;
font-size: 14px;
display: flex;
> span {
width: 80px;
}
ul {
display: flex;
flex-wrap: wrap;
flex: 1;
li {
color: #1890ff;
margin-right: 20px;
overflow: hidden;
cursor: pointer;
&:hover {
color: #ff8f3f;
}
&:active {
color: #e24f00;
}
// &:nth-child(-n + 5) {
// display: none;
// }
}
}
}
.downHotStore {
position: absolute;
width: 685px;
top: 44px;
left: 0;
z-index: 99;
// border-radius: 8px;
background-color: #fff;
border: 1px solid #eee;
div {
padding: 0 12px;
}
li {
height: 42px;
line-height: 42px;
padding: 0 12px;
font-size: 14px;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
}
}
.searchinput {
// margin-top: 19px;
// margin-right: 285px;
// width: 685px;
// height: 44px;
&.ant-input-affix-wrapper {
// width: 772px;
position: relative;
.ant-input-prefix {
position: absolute;
height: 86%;
width: 80px;
left: 4px;
top: 50%;
padding: 0 8px;
background-color: #fff;
transform: translateY(-50%);
cursor: pointer;
&::after {
content: "";
position: absolute;
width: 1px;
height: 50%;
background-color: #eee;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
> div {
position: relative;
&:hover .icon-guanbishixin {
opacity: 1;
}
&:hover {
opacity: 0.6;
}
> span {
display: inline-block;
text-align: center;
user-select: none;
width: 60px;
}
i {
display: inline-block;
transform: scale(0.6);
transition: opacity 0.1s;
font-size: 12px;
color: #c5c5c5;
}
.icon-guanbishixin {
position: absolute;
right: 0;
top: 3px;
opacity: 0;
transform: scale(1.4);
}
}
}
.ant-input-suffix {
right: 0px !important;
.ant-input-clear-icon {
margin-right: 20px;
width: 1.5em !important;
height: 1.5em !important;
> svg {
width: 100%;
height: 100%;
}
}
}
}
> .ant-input {
height: 40px;
text-indent: 60px;
background: #fff;
border: 2px solid #1890ff;
border-radius: 6px;
box-shadow: 0px 2px 4px 0px transparent;
font-size: 14px !important;
padding-right: 0;
// border-color: #e9e9e9;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #2395ff;
box-shadow: none;
}
&:focus {
border-color: #2395ff;
}
}
button {
width: 80px;
height: 40px;
color: white;
background: #1890ff;
border-color: #1890ff;
border: none;
// border-radius: 999px;
font-size: 16px;
box-shadow: none;
cursor: pointer;
outline: none;
&:hover {
background-color: #1890ff;
}
// &:focus {
// border: none;
// }
}
}
.specialbox {
position: absolute;
border-bottom: 1px solid #f6f6f6;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
// display: ;
transition: all 0.4s;
left: 0;
top: 45px;
width: 100vw;
background-color: #fff;
z-index: 99;
ul {
overflow: hidden;
padding: 20px 0 8px 0;
li {
padding: 4px 16px;
margin: 0px 16px 12px 0;
cursor: pointer;
float: left;
background: rgba(216, 216, 216, 0.3);
// border-radius: 15px;
font-size: 14px;
color: #4d575e;
line-height: 22px;
&:hover {
color: rgb(254, 97, 0);
background-color: rgba(255, 106, 0, 0.1);
}
}
}
}
.filterbox {
display: flex;
justify-content: flex-start;
min-width: 664px;
> li {
// margin-top: 22px;
font-size: 14px;
color: #4d575e;
margin-right: 4px;
line-height: 44px;
.ant-cascader-picker {
width: auto;
position: relative;
transform: translateY(-2px);
.anticon-close-circle {
font-size: 14px;
}
.icon-xiala {
font-size: 12px;
transform: translateY(1px) scale(0.5);
}
.ant-cascader-input {
width: 60px;
height: 40px;
// line-height: 40px;
// margin-top: -5px;
// max-width: 150px !important;
border: none;
padding: 0;
// margin-bottom: 6px;
box-shadow: none;
&::placeholder {
// width: auto;
// text-indent: 20px;
color: #4d575ecc;
// line-height: 20px;
font-size: 14px;
}
}
span {
width: 60px;
// max-width: 150px;
color: rgb(255, 106, 0) !important;
font-size: 14px;
padding: 0 20px 0 0;
text-align: left;
// line-height: 22px !important;
}
}
}
> li:not(.ageinputbox) {
padding-top: 4px;
}
.ageinputbox {
position: relative;
&:hover .confirm {
display: block;
}
.ageinput.age {
position: relative;
z-index: 3;
padding: 0;
padding-top: 8px;
margin: 0 5px;
height: 32px;
width: 90px;
text-indent: 10px;
border-color: #e9e9e9;
&:hover {
input {
border-color: #1890ff;
}
}
input {
// border-radius: 999px;
padding-right: unset;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 0px;
top: 76%;
}
}
.confirm {
position: absolute;
display: none;
width: 160px;
height: 48px;
line-height: 44px;
left: 8px;
top: 0;
z-index: 1;
border: 1px solid #eee;
background-color: #fff;
box-shadow: 0 5px 10px 5px #eee;
button {
position: relative;
width: 44px;
height: 28px;
line-height: 26px;
top: 50%;
transform: translateY(-50%);
margin-right: 8px;
float: right;
background-color: #1890ff;
border: none;
color: #fff;
&:hover {
background-color: #1890ffdd;
}
&:active {
background-color: #1890ffdd;
}
}
}
}
> li:first-child {
> div {
display: flex;
// line-height: 40px;
margin-top: -2px;
margin-right: 12px;
cursor: pointer;
span {
margin-right: 12px;
}
}
}
.claerfilter {
position: relative;
color: #8c8d8f;
font-size: 14px;
margin: 0px 10px 0 10px;
// color: rgba(78, 88, 95, 0.8);
transform: translateY(-1px);
// margin-left: 25px;
a {
display: inline-block;
// margin-top: 4px;
transition: all 0.5s;
// line-height: 14px;
&:active {
color: #ff6a00;
transition: none;
}
}
}
}
.hotTag {
display: flex;
line-height: 44px;
margin-left: 18px;
div {
font-size: 14px;
}
li {
margin-right: 12px;
color: #ff6a00;
font-size: 14px;
cursor: pointer;
}
> .active {
text-decoration: underline;
}
}
}
.ant-input{
border-color: #c4c7ce !important;
&:hover{
border-color: #a7aab5 !important;
}
&:focus{
border-color: #4e6ef2 !important;
}
}
}
/deep/ #maincontent {
display: flex;
justify-content: center;
margin-top: 10px;
background-color: #f0f0f0;
.maincontentleft {
width: 800px;
margin-right: 16px;
text-align: left;
position: relative;
.tabBar {
position: absolute;
display: flex;
justify-content: start;
align-items: center;
width: 100%;
top: -40px;
text-align: center;
line-height: 40px;
border-bottom: 2px solid #1890ff;
z-index: 999;
font-size: 16px;
.tabSubset {
width: 80px;
height: 32px;
line-height: 32px;
border-radius: 6px 6px 0px 0px;
cursor: pointer;
&.active {
background-color: #1890ff;
color: #fff;
}
}
}
.nodata {
overflow: hidden;
height: 230px;
padding-top: 30px;
text-align: center;
background-color: #fff;
// border-radius: 5px;
margin: 0 auto;
color: #00000066;
margin-bottom: 20px;
p {
position: relative;
transform: translateY(35px);
}
}
.subset {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ededed;
background: #ffffff;
transition: all 0.2s;
// border: 1px solid transparent;
overflow: hidden;
.item-obj{
transition: all 0.2s;
padding: 16px;
}
&:hover {
.item-obj{
transform: scale(1.02);
// box-shadow: 0 2px 12px 0 red
}
}
.subsetleft {
display: flex;
.imgbox {
width: 156px;
height: 156px;
margin-right: 16px;
position: relative;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
// width: 100%;
height: 100%;
}
.default_avatar {
width: 156px;
height: 156px;
display: flex;
align-items: center;
text-align: center;
background-color: #d85043;
color: #fff;
font-size: 44px;
line-height: 1.3;
}
}
.jobinfobox {
.jobname {
// margin: 12px 0;
font-size: 18px;
font-weight: 600;
text-align: left;
color: #333;
line-height: 26px;
&:hover {
color: #1890ff;
}
}
.jobinfo {
margin-top: 8px;
// opacity: 0.5;
font-size: 14px;
font-weight: 400;
text-align: left;
color: #999;
line-height: 20px;
}
.jobtag {
display: flex;
margin-top: 10px;
align-items: center;
text-align: left;
// span:first-child {
// color: #1890ff;
// background: rgba(254, 97, 0, 0.1);
// }
i {
margin-right: 8px;
color: #1890ff;
font-size: 20px;
}
span {
// height: 20px;
margin-right: 8px;
line-height: 1;
font-size: 14px;
padding: 4px 8px;
background: rgba(51, 51, 51, 0.06);
border-radius: 2px;
color: #666666;
}
.hotTag {
background-color: #1890ff;
color: #fff;
font-size: 12px;
padding: 4px;
i {
margin-right: 4px;
color: #fff;
}
}
}
.jobpricemonth {
display: inline-block;
margin-top: 10px;
font-size: 14px;
font-weight: 400;
text-align: left;
color: #333;
line-height: 20px;
margin-left: 8px;
}
.xmfDiv {
display: inline-block;
height: 20px;
margin-top: 4px;
background: #f1faff;
border-radius: 2px;
line-height: 16px;
padding-right: 4px;
}
.jobpricehour {
margin-top: 8px;
font-size: 14px;
font-weight: normal;
text-align: left;
color: #ff4400;
display: inline-block;
// line-height: 24px;
font-weight: 600;
span {
vertical-align: baseline;
font-size: 22px;
line-height: 28px;
}
i {
font-size: 18px;
line-height: 28px;
}
}
}
}
.subsetright {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.topContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
// margin-top: -8px;
}
.updateTime {
line-height: 1;
font-size: 14px;
color: #999;
}
.topbox {
width: 100px;
height: 48px;
margin-top: 8px;
overflow: hidden;
text-align: center;
// border-radius: 4px;
border-radius: 4px;
line-height: 26px;
div {
// font-weight: normal;
font-size: 16px;
span {
font-size: 20px;
// font-weight: normal;
}
}
div:first-child {
height: 22px;
background: #ff4400;
line-height: 21px;
font-size: 14px;
color: #ffffff;
border: 1px solid #ff4400;
// border-radius: 4px 4px 0px 0px;
}
div:last-child {
font-weight: normal;
background-color: #ff6a001a;
color: #ff4400 !important;
}
}
.bottombox1 {
display: flex;
align-items: center;
.jobDesp {
border: 1px solid #1890ff;
background-color: #fff;
color: #1890ff;
transition: none;
box-shadow: none;
text-shadow: none;
cursor: pointer;
&:hover {
color: #fff;
background-color: #1890ff;
}
}
button {
min-width: 80px;
height: 32px;
font-size: 16px;
// border: 1px solid rgba(77, 87, 94, 0.3);
// border-radius: 4px;
}
> a {
button:first-child {
border: 1px solid #d9d9d9;
// border-radius: 4px;
color: #4d575e;
background-color: #fff;
cursor: pointer;
&:hover {
color: #1890ff;
border-color: #1890ff;
background-color: #fff;
}
}
}
.apply {
margin-left: 16px;
border: 1px solid #1890ff;
padding: 0 16px;
background-color: #fff;
color: #1890ff;
cursor: pointer;
&:hover {
color: #fff;
background-color: #1890ff;
}
}
}
}
.norecruitment {
background-color: #f5f5f5;
border: 1px solid #ccc;
margin-left: 16px;
color: #ccc;
}
}
// .pagecontainer {
// display: flex;
// justify-content: center;
// text-align: center;
// margin-bottom: 30px;
// .ant-pagination-options-quick-jumper {
// margin-left: 10px;
// font-size: 16px;
// }
// .ant-pagination-disabled {
// a:hover {
// color: #c5c5c5 !important;
// }
// }
// .ant-pagination-next,
// .ant-pagination-prev {
// a:hover {
// color: #1890ff;
// }
// }
// input[type="text"] {
// box-shadow: none;
// &:focus {
// border: 1px solid #1890ff;
// }
// &:hover {
// border: 1px solid #1890ff;
// }
// }
// .ant-pagination-item {
// border: none;
// a:hover {
// color: #1890ff;
// }
// }
// .ant-pagination-item-active {
// background: #1890ff;
// a {
// color: white;
// }
// a:hover {
// color: white;
// }
// }
// .ant-pagination-item-link {
// border: none;
// }
// }
}
.maincontentright {
width: 240px;
position: relative;
top: -42px;
> div {
margin-bottom: 16px;
border: 1px solid #ededed;
border-radius: 6px;
}
.dateinfo {
text-align: center;
overflow: hidden;
border-radius: 6px;
border: none;
position: relative;
padding-bottom: 10px;
background-color: #f4faff;
.bottombox {
position: relative;
margin-top: 0;
margin-bottom: 0;
// padding-top: 10px;
height: 44px;
padding: 0;
line-height: 44px;
font-size: 16px;
font-weight: 600;
border-bottom: none;
color: #fff;
background-color: #1890ff;
z-index: 10;
&::after {
left: 0;
// display: none;
}
}
}
.hotphone {
overflow: hidden;
position: relative;
width: 240px;
height: 210px;
// height: 114px;
// padding: 0 20px 20px 20px;
border-radius: 6px;
background-color: #fff;
text-align: center;
.bottombox {
font-size: 16px;
font-weight: 600;
}
}
.relationme {
overflow: hidden;
position: relative;
width: 240px;
height: 160px;
padding: 0 20px 20px;
background: #ffffff;
text-align: center;
button {
position: absolute;
width: 120px;
height: 32px;
margin-top: 16px;
font-size: 16px;
line-height: 20px;
// border-radius: 999px;
border: 0;
background-color: #1890ff;
color: #fff;
top: 55%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
}
}
.sortClass {
.sortMenu {
text-align: center;
height: 46px;
line-height: 46px;
}
.ant-dropdown-menu {
padding: 0;
}
.ant-dropdown-menu-item {
width: 140px;
padding: 0 16px;
&:not(:last-child) {
.sortMenu {
border-bottom: 1px solid #eee;
}
}
&:hover {
background-color: #f4faff;
}
}
.active.sortMenu {
color: #1890ff;
}
}
.cityModal {
.inputBox {
display: flex;
}
/deep/ .ant-input-affix-wrapper {
flex: 1;
margin-right: 12px;
.ant-input {
&:hover {
border-color: #1890ff;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
}
.ant-btn {
&:hover {
border-color: #1890ff;
color: #1890ff;
}
&:active {
border-color: #ee3f00;
color: #ee3f00;
}
&:focus {
border-color: #1890ff;
color: #1890ff;
}
}
button {
width: 60px;
height: 32px;
}
.firstList {
display: flex;
justify-content: start;
margin: 30px 0;
li {
width: 16.6%;
text-align: center;
color: #666;
div {
width: 60%;
padding-bottom: 5px;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
.active {
color: #1890ff;
// position: relative;
// &::after {
// content:'';
// display: block;
// position: absolute;
// height: 2px;
// width: 50px;
// bottom: 0;
// left: 0;
// background-color: #1890ff;
// }
border-bottom: 2px solid #1890ff;
}
}
}
.currentCity {
display: flex;
flex-wrap: wrap;
li {
width: 16.6%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
div {
width: 60%;
&:hover {
color: #1890ff;
}
}
}
}
}
p {
margin-bottom: 0;
}
.model-obj,.model-obj-copy{
background-color: #ffffff;
position: absolute;
left: -592px;
top: 44px;
width: 640px;
border-radius: 6px;
.filter {
// position: relative;
// width: 100%;
// top: -10px;
// margin-top: 10px;
// margin-bottom: 6px;
box-sizing: border-box;
border: 1px solid #ededed;
// background-color: pink;
padding: 12px;
.filter-title {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
width: 100%;
height: 24px;
top: -34px;
left: 0;
padding-left: 20px;
z-index: 10;
span i {
font-size: 12px;
}
.toggleFilter {
height: 24px;
padding: 0px 2px 0 4px;
line-height: 22px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
i {
// line-height: 28px;
height: 100%;
line-height: 22px;
display: inline-block;
transform-origin: center;
transform: scale(0.6);
margin-left: 2px;
}
}
.sort {
width: 86px;
height: 22px;
margin-left: 16px;
display: inline-block;
text-align: center;
padding: 0px 2px 0 4px;
line-height: 20px;
border: 1px solid #ededed;
background-color: #f5f5f5;
border-radius: 4px;
color: #666;
cursor: pointer;
user-select: none;
}
> span:first-child {
display: flex;
align-items: center;
justify-content: start;
line-height: 22px;
> span:first-child {
margin-right: 14px;
i {
margin-left: 4px;
}
}
}
.filter-show {
display: flex;
line-height: 1;
color: #666;
> span:nth-child(-n + 6) {
display: inline-block;
}
> span {
display: none;
height: 24px;
line-height: 22px;
padding: 0 2px 0 4px;
background-color: #f5f5f5;
border: 1px solid #ededed;
margin-right: 8px;
user-select: none;
border-radius: 4px;
cursor: pointer;
&:hover {
border-color: #1890ff;
background: #f4faff;
color: #1890ff;
i {
color: #1890ff;
}
}
i {
font-size: 14px;
margin-left: 4px;
color: #666;
}
}
}
}
.filter-content {
overflow: hidden;
// background-color: skyblue;
dl {
display: flex;
justify-content: start;
padding: 8px 8px 4px 8px;
font-size: 14px;
line-height: 1.5;
user-select: none;
.special-active {
color: #1890ff !important;
// background-color: rgba(255, 106, 0, 0.1) !important;
}
&:first-child {
padding-bottom: 7px;
dd {
> i {
> span {
color: #333;
&:hover {
color: #1890ff;
}
}
}
}
}
&:not(:last-child) {
border-bottom: 1px dotted #ededed;
}
&:not(:first-child) {
dd {
display: flex;
justify-content: start;
flex-wrap: wrap;
> span {
margin-bottom: 4px;
color: #333;
cursor: pointer;
&:hover {
color: #1890ff;
}
}
}
}
dt {
width: 74px;
margin-right: 16px;
text-align: left;
color: #888;
}
dd {
flex: 1;
.ageinputbox {
position: relative;
display: inline-block;
margin-right: 16px;
> span:nth-of-type(2) {
position: relative;
z-index: 2;
}
&:hover .confirm {
display: block;
}
.ageinput:not(.age) {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 20px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.ageinput {
position: relative;
z-index: 3;
padding: 0;
// margin: 0 5px;
height: 26px;
width: 80px;
border-color: #ddd;
.ant-input-prefix {
left: 3px;
top: 51%;
}
&:hover {
input {
border-color: #1890ff;
}
}
input {
border-radius: 4px;
text-indent: 10px;
height: 26px;
padding: 0;
padding-right: unset;
border-color: #ddd;
&::placeholder {
// text-indent: 30px;
font-size: 14px !important;
}
&:hover {
border-color: #1890ff;
box-shadow: none;
}
&:focus {
border-color: #1890ff;
box-shadow: none;
}
}
.ant-input-suffix {
right: 3px;
}
}
.confirm {
position: absolute;
display: none;
width: 254px;
height: 46px;
line-height: 46px;
left: -8px;
top: -11px;
z-index: 1;
border: 1px solid #eee;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 0px 10px 5px #eee;
button {
position: relative;
width: 44px;
height: 26px;
line-height: 26px;
top: 52%;
transform: translateY(-50%);
margin-right: 8px;
float: right;
background-color: #1890ff;
border-radius: 4px;
border: none;
color: #fff;
&:hover {
background-color: #1890ffdd;
}
&:active {
background-color: #1890ffdd;
}
}
}
}
> span {
margin-right: 40px;
> span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
.price {
dd i {
span {
cursor: pointer;
margin-right: 40px;
}
}
}
}
}
}
.dav{
&:hover{
color: rgb(24, 144, 255);
}
}
.b-footer{
div {
text-align: center;
// margin-top: 16px;
color: #4d575e;
font-size: 12px;
i {
display: inline-block;
vertical-align: middle;
width: 1px;
height: 16px;
margin: 0 10px;
background-color: #4d575e;
}
}
}
.model-obj-copy{
left: 50%;
top: 52px;
transform: translateX(-50%);
background-color: transparent;
.filter{
padding: 0;
.filter-title{
top: 0 !important;
position: relative;
padding-left: 0;
.filter-show{
>span{
background-color: #fff;
}
}
}
}
}
.stoggle{
transform: rotate(90deg);
}
</style>