|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <view class="job-detail-container">
|
|
|
+ <!-- 顶部信息区域 -->
|
|
|
+ <view class="job-header">
|
|
|
+ <view class="job-title">{{ jobDetail.title }}</view>
|
|
|
+ <view class="job-salary">{{ jobDetail.salary }}</view>
|
|
|
+ <view class="job-department">{{ jobDetail.department }}</view>
|
|
|
+
|
|
|
+ <view class="job-requirements">
|
|
|
+ <view class="requirement-item">
|
|
|
+ <view class="dot"></view>
|
|
|
+ <text>{{ jobDetail.location }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="requirement-item">
|
|
|
+ <view class="time-icon"></view>
|
|
|
+ <text>{{ jobDetail.experience }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 工作地点区域 -->
|
|
|
+ <view class="section">
|
|
|
+ <view class="section-title">工作地点</view>
|
|
|
+ <view class="map-container">
|
|
|
+ <image class="map-image" src="/static/images/map.png" mode="aspectFill"></image>
|
|
|
+ <view class="map-time">预计14:32到达</view>
|
|
|
+ <view class="refresh-icon">
|
|
|
+ <text class="iconfont icon-refresh"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 福利待遇区域 -->
|
|
|
+ <view class="section">
|
|
|
+ <view class="section-title">福利待遇</view>
|
|
|
+ <view class="benefits-list">
|
|
|
+ <view class="benefit-tag" v-for="(benefit, index) in jobDetail.benefits" :key="index">{{ benefit }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 岗位介绍区域 -->
|
|
|
+ <view class="section">
|
|
|
+ <view class="section-title">岗位介绍</view>
|
|
|
+ <view class="job-description">
|
|
|
+ <view class="description-subtitle">{{ jobDetail.description[0].subtitle }}</view>
|
|
|
+ <view class="description-content">
|
|
|
+ <view class="description-item" v-for="(item, index) in jobDetail.description[0].items" :key="index">
|
|
|
+ <view class="blue-dot"></view>
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 右侧开始面试按钮 -->
|
|
|
+ <view class="interview-button" @click="startInterview">
|
|
|
+ <text>开始面试</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ jobDetail: {
|
|
|
+ title: '产品经理',
|
|
|
+ salary: '20k-30k/月',
|
|
|
+ department: '产品研发部 全职',
|
|
|
+ location: '浙江线',
|
|
|
+ experience: '5-8年',
|
|
|
+ benefits: ['五险一金', '节日福利', '股权激励'],
|
|
|
+ description: [
|
|
|
+ {
|
|
|
+ subtitle: '战略规划与执行',
|
|
|
+ items: [
|
|
|
+ '负责敏锐的行业热点感受性,密切追踪行业动态与趋势,为企业战略决策提供参考。',
|
|
|
+ '结心制定企业战略规划,将长期愿景转化为可操作的战略目标,并有效分解为各阶段具体任务。'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 尝试从本地存储获取职位详情
|
|
|
+ try {
|
|
|
+ const jobDetailStr = uni.getStorageSync('currentJobDetail');
|
|
|
+ if (jobDetailStr) {
|
|
|
+ const jobData = JSON.parse(jobDetailStr);
|
|
|
+ // 这里可以根据实际数据结构进行处理
|
|
|
+ // 如果后端返回的数据结构与页面需要的不一致,可以在这里进行转换
|
|
|
+ this.jobDetail = {
|
|
|
+ ...this.jobDetail,
|
|
|
+ title: jobData.title || this.jobDetail.title,
|
|
|
+ salary: jobData.salary || this.jobDetail.salary,
|
|
|
+ department: jobData.department || this.jobDetail.department,
|
|
|
+ location: jobData.location || this.jobDetail.location,
|
|
|
+ experience: jobData.experience || this.jobDetail.experience,
|
|
|
+ benefits: jobData.benefits || this.jobDetail.benefits,
|
|
|
+ description: jobData.description || this.jobDetail.description
|
|
|
+ };
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取职位详情失败:', e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ startInterview() {
|
|
|
+ // 开始面试的逻辑
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/camera/camera'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.job-detail-container {
|
|
|
+ padding: 20rpx;
|
|
|
+ position: relative;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.job-header {
|
|
|
+ padding: 20rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.job-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.job-salary {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ff6b00;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.job-department {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.job-requirements {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.requirement-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.dot {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #0052d9;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time-icon {
|
|
|
+ width: 26rpx;
|
|
|
+ height: 26rpx;
|
|
|
+ background-color: #999;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.section {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.map-container {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.map-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.map-time {
|
|
|
+ position: absolute;
|
|
|
+ left: 20rpx;
|
|
|
+ bottom: 20rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 6rpx 12rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.refresh-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ bottom: 20rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.benefits-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.benefit-tag {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.description-subtitle {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.description-content {
|
|
|
+ padding-left: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.description-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blue-dot {
|
|
|
+ min-width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #0052d9;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.description-item text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.6;
|
|
|
+}
|
|
|
+
|
|
|
+.interview-button {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background-color: #0052d9;
|
|
|
+ color: #fff;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-top-left-radius: 16rpx;
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+}
|
|
|
+</style>
|