feat(portal): 职位卡片添加发布时间和分享按钮

- 在职位卡片中显示发布时间(格式:YYYY-MM-DD)
- 添加分享图标按钮,点击复制职位详情页链接
- 分享按钮用 Element Plus 的 ShareDocument 图标代替
This commit is contained in:
TianyangZhang 2026-03-25 17:13:01 +08:00
parent 842704f095
commit 5275dd211e
1 changed files with 97 additions and 16 deletions

View File

@ -1,22 +1,103 @@
<template>
<el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
<div class="job-title">{{ job.title }}</div>
<div class="job-meta">
<span>{{ job.company_name || job.organization_name }}</span>
<el-divider direction="vertical" />
<span>{{ job.location }}</span>
<el-divider direction="vertical" />
<span class="salary">{{ job.salary }}</span>
</div>
<el-tag size="small">{{ job.category }}</el-tag>
</el-card>
<div class="job-card-wrapper">
<el-card class="job-card" shadow="hover" @click="$router.push(`/jobs/${job.id}`)">
<div class="job-title">{{ job.title }}</div>
<div class="job-meta">
<span>{{ job.company_name || job.organization_name }}</span>
<el-divider direction="vertical" />
<span>{{ job.location }}</span>
<el-divider direction="vertical" />
<span class="salary">{{ job.salary }}</span>
</div>
<div class="job-footer">
<el-tag size="small">{{ job.category }}</el-tag>
<span class="publish-time">{{ formatDate(job.created_at) }}</span>
</div>
</el-card>
<el-button
class="share-btn"
type="primary"
text
@click.stop="shareJob"
:icon="ShareDocument"
/>
</div>
</template>
<script setup>
defineProps({ job: Object })
import { ElMessage } from 'element-plus'
import { ShareDocument } from '@element-plus/icons-vue'
const props = defineProps({ job: Object })
function formatDate(dateStr) {
if (!dateStr) return ''
return dateStr.slice(0, 10)
}
function shareJob() {
//
const jobUrl = `${window.location.origin}/#/jobs/${props.job.id}`
//
navigator.clipboard.writeText(jobUrl).then(() => {
ElMessage.success('已复制职位链接')
}).catch(() => {
//
const textArea = document.createElement('textarea')
textArea.value = jobUrl
document.body.appendChild(textArea)
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
ElMessage.success('已复制职位链接')
})
}
</script>
<style scoped>
.job-card { cursor: pointer; margin-bottom: 12px; }
.job-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.job-meta { color: #666; font-size: 13px; margin-bottom: 8px; }
.salary { color: #f56c6c; font-weight: 500; }
.job-card-wrapper {
position: relative;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.job-card {
cursor: pointer;
flex: 1;
}
.job-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
}
.job-meta {
color: #666;
font-size: 13px;
margin-bottom: 12px;
}
.job-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.publish-time {
color: #999;
font-size: 12px;
}
.salary {
color: #f56c6c;
font-weight: 500;
}
.share-btn {
margin-top: 8px;
flex-shrink: 0;
}
</style>