feat(portal): 职位卡片添加发布时间和分享按钮
- 在职位卡片中显示发布时间(格式:YYYY-MM-DD) - 添加分享图标按钮,点击复制职位详情页链接 - 分享按钮用 Element Plus 的 ShareDocument 图标代替
This commit is contained in:
parent
842704f095
commit
5275dd211e
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue