353 lines
8.0 KiB
Vue
353 lines
8.0 KiB
Vue
<template>
|
|
<div class="wrapper">
|
|
<div class="search-wrap">
|
|
<div class="left" @click="show=true">
|
|
<span>{{ search.typeName ? search.typeName : "全部" }}</span>
|
|
<u-icon name="arrow-down" color="#ffffff" size="20"></u-icon>
|
|
</div>
|
|
<div class="right">
|
|
<u-icon name="search" size="32" color="rgba(255,255,255,0.5)" :custom-style="{marginRight:'8px'}"></u-icon>
|
|
<input placeholder="请输入需要搜索的内容" style="flex: 1;color:#fff;" confirm-type="search"
|
|
placeholder-style="color:rgba(255,255,255,0.5)" v-model="search.title"
|
|
@confirm="current=1;getList()"></input>
|
|
</div>
|
|
</div>
|
|
<div class="job-list" v-if="list.length">
|
|
<header>
|
|
<span>招工就业列表</span>
|
|
<div class="right">
|
|
共<em>{{ total }}</em>个职位
|
|
</div>
|
|
</header>
|
|
<div class="card" v-for="(item,index) in list" :key="index">
|
|
<template v-if="item.type == 1">
|
|
<div class="top" @click="toDetail(0,item)">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="job-content">{{ item.remark || "" }}</div>
|
|
<div class="photo">
|
|
<img
|
|
:src="photo.url"
|
|
alt="" v-for="photo in item.files" :key="photo.id">
|
|
</div>
|
|
<div class="info">
|
|
<div class="tag">个人求职</div>
|
|
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<span class="name">{{ item.linkName }}</span>
|
|
<div class="right" @click="phone(item)">
|
|
<u-icon name="phone-fill" size="36" color="#4181FF" :custom-style="{marginRight:'8px'}"></u-icon>
|
|
{{ item.linkPhone }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-if="item.type == 0">
|
|
<div class="top" @click="toDetail(1,item)">
|
|
<div class="post-info">
|
|
<div class="post">{{ item.title }}</div>
|
|
<div class="salary">{{ item.salary }}</div>
|
|
</div>
|
|
<div class="require">{{ item.remark || "" }}</div>
|
|
<div class="info">
|
|
<div class="tag" style="background-color:#1AAAFF">企业招工</div>
|
|
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="company">{{ item.companyName }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-else></AiEmpty>
|
|
<div class="btn-wrapper">
|
|
<div class="btn" @click="$linkTo('./pubJob')" hover-class="text-hover">我要找工作</div>
|
|
</div>
|
|
<u-select v-model="show" :list="selectList" @confirm="onConfirm"></u-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "AppJob",
|
|
appName: "招工就业",
|
|
data() {
|
|
return {
|
|
show: false,
|
|
current: 1,
|
|
list: [],
|
|
total: 0,
|
|
search: {
|
|
title: "",
|
|
type: "",
|
|
typeName: "",
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
selectList() {
|
|
return [{
|
|
value: '',
|
|
label: '全部'
|
|
}, {
|
|
value: '0',
|
|
label: '企业招工'
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '个人求职'
|
|
}];
|
|
}
|
|
},
|
|
methods: {
|
|
preview(index) {
|
|
this.$previewImage(this.list, index, "url");
|
|
},
|
|
phone({linkPhone: phoneNumber}) {
|
|
uni.makePhoneCall({phoneNumber});
|
|
},
|
|
onConfirm(val) {
|
|
this.search.typeName = val[0].label;
|
|
this.search.type = val[0].value;
|
|
this.current = 1;
|
|
this.getList();
|
|
},
|
|
getList() {
|
|
this.$instance.post("/app/appjob/list", null, {
|
|
params: {
|
|
...this.search,
|
|
current: this.current
|
|
}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
|
|
this.total = res.data.total;
|
|
}
|
|
})
|
|
},
|
|
toDetail(val, {id}) {
|
|
uni.navigateTo({
|
|
url: !!val ? `./compJob?id=${id}` : `./persJob?id=${id}`
|
|
})
|
|
}
|
|
},
|
|
onShow() {
|
|
this.current = 1;
|
|
this.getList();
|
|
},
|
|
onReachBottom() {
|
|
this.current++;
|
|
this.getList();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wrapper {
|
|
padding-top: 124px;
|
|
}
|
|
|
|
.search-wrap {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 11;
|
|
width: 100%;
|
|
height: 124px;
|
|
background: #4181FF;
|
|
box-sizing: border-box;
|
|
padding: 0 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > span {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
height: 64px;
|
|
background: rgba(0, 0, 0, .2);
|
|
border-radius: 32px;
|
|
margin-left: 32px;
|
|
box-sizing: border-box;
|
|
padding: 0 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.job-list {
|
|
box-sizing: border-box;
|
|
padding: 0 32px 156px;
|
|
|
|
& > header {
|
|
box-sizing: border-box;
|
|
padding: 48px 0 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
& > span {
|
|
font-size: 38px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.right {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > em {
|
|
color: #4181FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card {
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
|
|
border-radius: 16px;
|
|
margin-bottom: 24px;
|
|
|
|
.top {
|
|
box-sizing: border-box;
|
|
padding: 32px;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
|
|
.title {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 50px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.job-content {
|
|
font-size: 32px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 44px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.photo {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
|
|
& > img {
|
|
width: 204px;
|
|
height: 204px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24px;
|
|
|
|
.tag {
|
|
width: 144px;
|
|
height: 48px;
|
|
background: #42D784;
|
|
border-radius: 24px;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
}
|
|
|
|
.date {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.post-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.post {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.salary {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #FF3521;
|
|
}
|
|
}
|
|
|
|
.require {
|
|
font-size: 32px;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
height: 104px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 0 32px;
|
|
|
|
.name {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #4181FF;
|
|
}
|
|
|
|
.company {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|