|
|
@@ -1,51 +1,41 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div v-if="list.length">
|
|
|
- <div class="position-item mb-3 job-closed" v-for="(val, i) in list" :key="i" @mouseenter="handleMouseEnter(val)" @mouseleave="val.active = false">
|
|
|
- <div class="info-header">
|
|
|
- <div v-if="val.active" class="header-btn">
|
|
|
- <v-btn class="half-button" color="primary" size="small">继续沟通</v-btn>
|
|
|
- <v-btn v-if="props.tab === 4" class="half-button ml-3" color="primary" size="small">取消感兴趣</v-btn>
|
|
|
- </div>
|
|
|
- <div class="img-box">
|
|
|
- <v-avatar :image="val.contact.avatars || 'https://minio.citupro.com/dev/menduner/7.png'" size="x-small"></v-avatar>
|
|
|
- <span class="name">
|
|
|
- <span class="mx-3">{{ val.contact.name }}</span>
|
|
|
- <span class="gray">{{ val.contact.postNameCn }}</span>
|
|
|
- </span>
|
|
|
+ <div v-if="items.length" class="mt-3">
|
|
|
+ <div class="sub-li mb-3" v-for="item in items" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
|
|
|
+ <div class="company-info-top" @click="handleClickEnterprise(item, 'briefIntroduction')">
|
|
|
+ <div class="company-info">
|
|
|
+ <div class="float-left mr-5">
|
|
|
+ <v-img :src="item.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :alt="item.enterprise.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
|
|
|
+ </div>
|
|
|
+ <h3 :class="{'default-active': item.active }">{{ item.enterprise.anotherName }}</h3>
|
|
|
+ <p>{{ item.enterprise.financingName }}<span class="mx-2">|</span>{{ item.enterprise.industryName }}<span class="mx-2">|</span>{{ item.enterprise.scaleName }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="info-content">
|
|
|
- <div class="job-info">
|
|
|
- <div class="job-name cursor-pointer">
|
|
|
- <span class="mr-3 info-name">{{ val.name }}</span>
|
|
|
- <span>[{{ val.areaName }}]</span>
|
|
|
- </div>
|
|
|
- <div class="job-other">
|
|
|
- <span class="salary">{{ val.payFrom }}-{{ val.payTo }}k</span>
|
|
|
- <v-chip class="mx-3" color="primary" label size="small">{{ val.expName }}</v-chip>
|
|
|
- <v-chip color="primary" label size="small">{{ val.eduName }}</v-chip>
|
|
|
+ <div class="company-info-bottom">
|
|
|
+ <div class="chipBox">
|
|
|
+ <div class="d-inline-block" v-for="(val, i) in item.enterprise.welfareList" :key="i">
|
|
|
+ <span>{{ val }}</span>
|
|
|
+ <span class="mx-1" v-if="i !== item.enterprise.welfareList.length - 1">|</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="props.tab === 3" class="interview-info">
|
|
|
- <div>面试时间：2022.03.15 17:00</div>
|
|
|
- <div class="mt-3">面试地点：先烈中路100号大院203室</div>
|
|
|
- </div>
|
|
|
- <div v-else class="company-info">
|
|
|
- <v-img width="50" height="50" :src="val.contact.avatars || 'https://minio.citupro.com/dev/menduner/7.png'"></v-img>
|
|
|
- <div class="ml-3">
|
|
|
- <div class="cursor-pointer info-name">{{ val.enterprise.name }}</div>
|
|
|
- <div class="mt-3">
|
|
|
- <v-chip color="primary" label size="small" class="mr-3" v-for="k in desc" :key="k">{{ val.enterprise[k] }}</v-chip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="footer-right">
|
|
|
+ <v-avatar size="x-small" :image="item.contact.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
|
|
|
+ <span class="mx-2 textColor666">
|
|
|
+ {{ item.contact.name }}
|
|
|
+ <span v-if="item?.contact?.name && item?.post?.nameCn">|</span>
|
|
|
+ {{ item?.post?.nameCn }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <CtPagination
|
|
|
+ :total="total"
|
|
|
+ :page="page.pageNo"
|
|
|
+ :limit="page.pageSize"
|
|
|
+ @handleChange="handleChangePage"
|
|
|
+ ></CtPagination>
|
|
|
</div>
|
|
|
- <div v-else>
|
|
|
- <Empty></Empty>
|
|
|
- </div>
|
|
|
+ <Empty v-else></Empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -53,136 +43,109 @@
|
|
|
// 看过我
|
|
|
defineOptions({ name: 'position-seen-me' })
|
|
|
import { ref } from 'vue'
|
|
|
-// import { dealDictArrayData, dealDictObjData } from '@/utils/position'
|
|
|
+import { getInterestedMePage } from '@/api/recruit/personal/personalCenter'
|
|
|
+import { dealDictObjData } from '@/utils/position'
|
|
|
import Empty from '@/components/Empty'
|
|
|
|
|
|
-const props = defineProps({
|
|
|
- tab: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- }
|
|
|
+const total = ref(0)
|
|
|
+const items = ref([])
|
|
|
+const page = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
})
|
|
|
|
|
|
-// const items = ref([])
|
|
|
-// const page = ref({
|
|
|
-// pageNo: 1,
|
|
|
-// pageSize: 10
|
|
|
-// })
|
|
|
-const list = ref([
|
|
|
- // {
|
|
|
- // contact: {
|
|
|
- // name: '肖女士',
|
|
|
- // avatars: 'https://cdn.vuetifyjs.com/images/john.jpg',
|
|
|
- // postNameCn: '人事经理'
|
|
|
- // },
|
|
|
- // name: '前端开发工程师',
|
|
|
- // areaName: '北京·石景山区·八大处',
|
|
|
- // payFrom: 15,
|
|
|
- // payTo: 18,
|
|
|
- // expName: '3-5年',
|
|
|
- // eduName: '本科',
|
|
|
- // active: false,
|
|
|
- // enterprise: {
|
|
|
- // name: '广州辞图科技有限公司',
|
|
|
- // industryName: '互联网',
|
|
|
- // scaleName: '0-20人',
|
|
|
- // financingName: '未融资'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // contact: {
|
|
|
- // name: '肖女士',
|
|
|
- // avatars: 'https://cdn.vuetifyjs.com/images/john.jpg',
|
|
|
- // postNameCn: '人事经理'
|
|
|
- // },
|
|
|
- // name: '前端开发工程师',
|
|
|
- // areaName: '北京·石景山区·八大处',
|
|
|
- // payFrom: 15,
|
|
|
- // payTo: 18,
|
|
|
- // expName: '3-5年',
|
|
|
- // eduName: '本科',
|
|
|
- // active: false,
|
|
|
- // enterprise: {
|
|
|
- // name: '广州辞图科技有限公司',
|
|
|
- // industryName: '互联网',
|
|
|
- // scaleName: '0-20人',
|
|
|
- // financingName: '未融资'
|
|
|
- // }
|
|
|
- // }
|
|
|
-])
|
|
|
-
|
|
|
-const desc = ['industryName', 'financingName', 'scaleName']
|
|
|
+const getData = async () => {
|
|
|
+ const res = await getInterestedMePage(page.value)
|
|
|
+ items.value = res.list.map(e => {
|
|
|
+ e.enterprise = dealDictObjData({}, e.enterprise)
|
|
|
+ e.active = false
|
|
|
+ return e
|
|
|
+ })
|
|
|
+ total.value = res.total
|
|
|
+}
|
|
|
+getData()
|
|
|
|
|
|
-const handleMouseEnter = (val) => {
|
|
|
- if (props.tab !==3 ) val.active = true
|
|
|
+const handleClickEnterprise = (item, key) => {
|
|
|
+ window.open(`/recruit/personal/company/details/${item.enterprise.id}?key=${key}`)
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.position-item {
|
|
|
- height: 144px;
|
|
|
- background-color: #fff;
|
|
|
+.sub-li {
|
|
|
+ position: relative;
|
|
|
+ height: 130px;
|
|
|
border-radius: 12px;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all .2s linear;
|
|
|
+ background-color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
&:hover {
|
|
|
box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
|
|
|
}
|
|
|
- .info-header {
|
|
|
- height: 48px;
|
|
|
- background: linear-gradient(90deg,#f5fcfc,#fcfbfa);
|
|
|
- .img-box {
|
|
|
- padding: 12px 24px;
|
|
|
- .name {
|
|
|
- color: var(--color-222);
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- .gray {
|
|
|
- color: var(--color-666);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .header-btn {
|
|
|
- padding: 10px 10px 0 0;
|
|
|
- float: right;
|
|
|
- .v-btn {
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
+}
|
|
|
+.textColor666 {
|
|
|
+ color: var(--color-666);
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.company-info {
|
|
|
+ float: left;
|
|
|
+ margin-left: 16px;
|
|
|
+ width: 282px;
|
|
|
+}
|
|
|
+.company-info-top {
|
|
|
+ display: flex;
|
|
|
+ height: 76px;
|
|
|
+ padding: 16px 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.company-info h3 {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: var(--color-222);
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 0 0 4px 0;
|
|
|
+ padding: 0;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.company-info p {
|
|
|
+ height: 18px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: var(--color-999);
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+.company-info-bottom {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #f8fcfb;
|
|
|
+ .chipBox {
|
|
|
+ width: 70%;
|
|
|
+ min-width: 70%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--color-999);
|
|
|
}
|
|
|
- .info-content {
|
|
|
- display: flex;
|
|
|
- padding: 16px 24px;
|
|
|
- justify-content: space-between;
|
|
|
- .job-info {
|
|
|
- width: 430px;
|
|
|
- min-width: 430px;
|
|
|
- max-width: 430px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- .job-name {
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- color: var(--color-222);
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- .job-other {
|
|
|
- color: var(--v-error-base);
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- .company-info {
|
|
|
- display: flex;
|
|
|
- align-items: center
|
|
|
- }
|
|
|
- .interview-info {
|
|
|
- color: var(--color-333);
|
|
|
- font-size: 15px;
|
|
|
+ .position {
|
|
|
+ color: var(--color-666);
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: var(--v-primary-base);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.info-name:hover {
|
|
|
- color: var(--v-primary-base);
|
|
|
-}
|
|
|
</style>
|
Xiao_123