|
|
<template>
|
|
|
<div class="recommend-container">
|
|
|
<div class="recommendposition">
|
|
|
<!-- :class="isdetail ? 'showborder' : ''" -->
|
|
|
<h1 class="bottombox" style="text-align: center">
|
|
|
<i>推荐职位</i>
|
|
|
</h1>
|
|
|
<div style="text-align: center">
|
|
|
<a-spin tip="加载中..." :spinning="isspinning"></a-spin>
|
|
|
</div>
|
|
|
<div class="jobBox">
|
|
|
<div class="jobinfobox" v-for="(item, index) in relationList" :key="index">
|
|
|
<router-link target="_blank" :to="'/detail?id=' + item.id +'&jobClassify='+item.jobClassify" @click.prevent="resetpage">
|
|
|
<!-- <a href="javascript:;" > -->
|
|
|
<!-- <div class="imgbox">
|
|
|
<img v-if="item.logo" :src="item.logo" alt />
|
|
|
<img v-else src="../../../../static/img/nopicture.png" alt />
|
|
|
<span>服务费{{ item.servetype }}</span>
|
|
|
</div> -->
|
|
|
|
|
|
<div class="jobname">{{item.jobName || '-' }}</div>
|
|
|
<span style=" padding: 0 10px;
|
|
|
height: 20px;
|
|
|
background: #ff4400;
|
|
|
border-radius: 16px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
line-height: 20px;">服务费{{ item.servetype }}</span>
|
|
|
<!-- </a> -->
|
|
|
</router-link>
|
|
|
<div class="jobinfo">
|
|
|
<span>{{ item.district }}</span>
|
|
|
<span>{{ item.gender }}</span>
|
|
|
<span>{{ item.age }}</span>
|
|
|
</div>
|
|
|
<div class="jobtag">
|
|
|
<!-- <span>返费</span> -->
|
|
|
<span v-for="(item1, index) in item.jobSpecialLabelNames" :key="index">{{ item1 }}</span>
|
|
|
</div>
|
|
|
<div class="jobprice" v-html="
|
|
|
getSalaryClassifyValue(
|
|
|
item.salaryClassify,
|
|
|
item.salaryClassifyValue
|
|
|
)
|
|
|
">
|
|
|
<!-- <template v-if="item.hourlyPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/小时</template
|
|
|
>
|
|
|
<template v-else-if="item.dayPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/日</template
|
|
|
>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { disposeJobListData, getSalaryClassifyValue } from '../../../utils/commonUtil'
|
|
|
import {
|
|
|
JobListApi,
|
|
|
// getCityApi,
|
|
|
} from '../../../api/job'
|
|
|
export default {
|
|
|
inject: ['reload'],
|
|
|
// 组件名称
|
|
|
name: '',
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
isspinning: false,
|
|
|
isdetail: false,
|
|
|
relationList: [],
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.getRecommendJob()
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
// console.log(this.$route.fullPath);
|
|
|
if (this.$route.fullPath.indexOf('detail') > -1) {
|
|
|
this.isdetail = true
|
|
|
}
|
|
|
console.log(this.isdetail)
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
async getRecommendJob() {
|
|
|
this.isspinning = true
|
|
|
try {
|
|
|
const { data } = await JobListApi({
|
|
|
pageNum: 1,
|
|
|
pageSize: 3,
|
|
|
jobCategory: 608,
|
|
|
})
|
|
|
console.log(data)
|
|
|
this.relationList = disposeJobListData(data.data.recordList)
|
|
|
|
|
|
console.log(this.relationList)
|
|
|
// this.relationList.forEach((item) => {
|
|
|
// item.age = ''
|
|
|
// })
|
|
|
// this.$emit("update:relationList", this.relationList);
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
this.isspinning = false
|
|
|
},
|
|
|
resetpage() {
|
|
|
console.log(1)
|
|
|
setTimeout(() => {
|
|
|
this.reload()
|
|
|
document.body.scrollTop = 0
|
|
|
document.documentElement.scrollTop = 0
|
|
|
}, 1000)
|
|
|
},
|
|
|
getSalaryClassifyValue(salaryClassify, salaryClassifyValue) {
|
|
|
return getSalaryClassifyValue(salaryClassify, salaryClassifyValue)
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.showborder {
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
}
|
|
|
.recommendposition {
|
|
|
// width: 270px;
|
|
|
// height: 1008px;
|
|
|
overflow: hidden;
|
|
|
background: #ffffff;
|
|
|
border-radius: 6px;
|
|
|
// padding: 0px 20px 0px 20px;
|
|
|
|
|
|
h1 {
|
|
|
// margin-bottom: 12px;
|
|
|
font-size: 16px;
|
|
|
text-align: left;
|
|
|
&::after {
|
|
|
// display: none;
|
|
|
}
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
line-height: 20px;
|
|
|
// border-bottom: 2px solid #1890ff;
|
|
|
// padding: 6px 0;
|
|
|
}
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
margin-top: -4px;
|
|
|
width: 4px;
|
|
|
height: 20px;
|
|
|
margin-right: 8px;
|
|
|
background: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
.jobBox {
|
|
|
padding: 16px 20px 0 20px;
|
|
|
border-radius: 0 0 6px 6px;
|
|
|
overflow: hidden;
|
|
|
.jobinfobox:last-of-type {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
.jobinfobox {
|
|
|
// width: 240px;
|
|
|
// height: 298px;
|
|
|
// margin-bottom: 16px;
|
|
|
background: #ffffff;
|
|
|
// border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
border-radius: 4px;
|
|
|
// padding: 20px;
|
|
|
border-bottom: 1px solid #f2f0ec;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
.imgbox {
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
position: relative;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
span {
|
|
|
position: absolute;
|
|
|
// width: 118px;
|
|
|
padding: 0 10px;
|
|
|
height: 20px;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
background: #1890ff;
|
|
|
border-radius: 16px 16px 16px 0px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
.jobname {
|
|
|
// height: 45px;
|
|
|
// margin: 12px 0;
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 18px;
|
|
|
margin-bottom: 8px;
|
|
|
// margin-top: 16px;
|
|
|
// border-bottom: 1px solid #f2f0ec;
|
|
|
}
|
|
|
.jobinfo {
|
|
|
margin-top: 8px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
text-align: left;
|
|
|
color: #999;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.jobtag {
|
|
|
margin-top: 12px;
|
|
|
text-align: left;
|
|
|
// span:first-child {
|
|
|
// color: #1890ff;
|
|
|
// background: rgba(254, 97, 0, 0.1);
|
|
|
// }
|
|
|
span {
|
|
|
margin-right: 12px;
|
|
|
font-size: 14px;
|
|
|
padding: 2px 5px;
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
span:nth-of-type(n + 3) {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
/deep/ .jobprice {
|
|
|
margin-top: 8px;
|
|
|
margin-bottom:8px;
|
|
|
font-size: 14px;
|
|
|
text-align: left;
|
|
|
color: #ff4400;
|
|
|
line-height: 18px;
|
|
|
font-weight: 600;
|
|
|
span {
|
|
|
font-weight: 600 !important;
|
|
|
}
|
|
|
i {
|
|
|
font-size: 18px;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|