|
|
@@ -0,0 +1,366 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <!-- Custom Navbar -->
|
|
|
+ <view class="custom-navbar">
|
|
|
+ <view class="navbar-content">
|
|
|
+ <view class="navbar-left" @click="goBack">
|
|
|
+ <u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" size="36"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="navbar-title">面试管理</view>
|
|
|
+ <view class="navbar-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Tab Navigation -->
|
|
|
+ <view class="tab-section">
|
|
|
+ <u-tabs
|
|
|
+ :list="tabs"
|
|
|
+ :current="activeTab"
|
|
|
+ @change="switchTab"
|
|
|
+ :is-scroll="false"
|
|
|
+ :height="88"
|
|
|
+ :font-size="24"
|
|
|
+ active-color="rgba(1, 107, 246, 1)"
|
|
|
+ inactive-color="rgba(102, 102, 102, 1)"
|
|
|
+ :bar-width="80"
|
|
|
+ :bar-height="4"
|
|
|
+ :gutter="40"
|
|
|
+ bg-color="#ffffff"
|
|
|
+ :bar-style="{
|
|
|
+ borderRadius: '2rpx'
|
|
|
+ }"
|
|
|
+ ></u-tabs>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- Content Section -->
|
|
|
+ <view class="content-section">
|
|
|
+ <!-- 待反馈 -->
|
|
|
+ <view v-if="activeTab === 0">
|
|
|
+ <view v-if="pendingFeedback.length > 0" class="interview-list">
|
|
|
+ <!-- 待反馈面试列表 -->
|
|
|
+ <view class="interview-item" v-for="interview in pendingFeedback" :key="interview.id" @click="goToInterviewDetail(interview)">
|
|
|
+ <view class="interview-info">
|
|
|
+ <view class="candidate-name">{{ interview.candidateName }}</view>
|
|
|
+ <view class="interview-time">{{ interview.interviewTime }}</view>
|
|
|
+ <view class="position">{{ interview.position }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="interview-status">
|
|
|
+ <text class="status-text pending">待反馈</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-state" v-else>
|
|
|
+ <view class="empty-illustration">
|
|
|
+ <image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已反馈 -->
|
|
|
+ <view v-if="activeTab === 1">
|
|
|
+ <view v-if="feedbackReceived.length > 0" class="interview-list">
|
|
|
+ <!-- 已反馈面试列表 -->
|
|
|
+ <view class="interview-item" v-for="interview in feedbackReceived" :key="interview.id" @click="goToInterviewDetail(interview)">
|
|
|
+ <view class="interview-avatar">
|
|
|
+ <image :src="interview.avatar" class="avatar-image" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="interview-content">
|
|
|
+ <view class="interview-title">与{{ interview.candidateName }}的面试</view>
|
|
|
+ <view class="position-info">面试职位: {{ interview.position }} | {{ interview.salary }}</view>
|
|
|
+ <view class="interview-time">面试时间: {{ interview.interviewTime }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="interview-result">
|
|
|
+ <text class="result-text" :class="interview.status === 'passed' ? 'passed' : 'failed'">
|
|
|
+ {{ interview.status === 'passed' ? '已通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-state" v-else>
|
|
|
+ <view class="empty-illustration">
|
|
|
+ <image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 全部面试 -->
|
|
|
+ <view v-if="activeTab === 2">
|
|
|
+ <view v-if="allInterviews.length > 0" class="interview-list">
|
|
|
+ <!-- 全部面试列表 -->
|
|
|
+ <view class="interview-item" v-for="interview in allInterviews" :key="interview.id" @click="goToInterviewDetail(interview)">
|
|
|
+ <view class="interview-avatar">
|
|
|
+ <image :src="interview.avatar" class="avatar-image" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="interview-content">
|
|
|
+ <view class="interview-title">与{{ interview.candidateName }}的面试</view>
|
|
|
+ <view class="position-info">面试职位: {{ interview.position }} | {{ interview.salary }}</view>
|
|
|
+ <view class="interview-time">面试时间: {{ interview.interviewTime }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="interview-result">
|
|
|
+ <text class="result-text" :class="interview.status === 'passed' ? 'passed' : 'failed'">
|
|
|
+ {{ interview.status === 'passed' ? '已通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="empty-state" v-else>
|
|
|
+ <view class="empty-illustration">
|
|
|
+ <image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 0,
|
|
|
+ activeTab: 0,
|
|
|
+ tabs: [
|
|
|
+ { name: '待反馈 (0)' },
|
|
|
+ { name: '已反馈 (2)' },
|
|
|
+ { name: '全部面试' }
|
|
|
+ ],
|
|
|
+ // 待反馈面试数据
|
|
|
+ pendingFeedback: [],
|
|
|
+ // 已反馈面试数据
|
|
|
+ feedbackReceived: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ candidateName: '廖春',
|
|
|
+ interviewTime: '2025-08-05 20:40',
|
|
|
+ position: '亚马逊总监',
|
|
|
+ salary: '24-36K · 16薪',
|
|
|
+ status: 'passed',
|
|
|
+ avatar: '/static/images/default-avatar.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ candidateName: '廖春',
|
|
|
+ interviewTime: '2025-08-05 20:40',
|
|
|
+ position: '亚马逊总监',
|
|
|
+ salary: '24-36K · 16薪',
|
|
|
+ status: 'failed',
|
|
|
+ avatar: '/static/images/default-avatar.png'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 全部面试数据
|
|
|
+ allInterviews: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ candidateName: '廖春',
|
|
|
+ interviewTime: '2025-08-05 20:40',
|
|
|
+ position: '亚马逊总监',
|
|
|
+ salary: '24-36K · 16薪',
|
|
|
+ status: 'passed',
|
|
|
+ avatar: '/static/images/default-avatar.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ candidateName: '廖春',
|
|
|
+ interviewTime: '2025-08-05 20:40',
|
|
|
+ position: '亚马逊总监',
|
|
|
+ salary: '24-36K · 16薪',
|
|
|
+ status: 'failed',
|
|
|
+ avatar: '/static/images/default-avatar.png'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ const systemInfo = uni.getSystemInfoSync()
|
|
|
+ this.statusBarHeight = systemInfo.statusBarHeight || 0
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ switchTab(index) {
|
|
|
+ this.activeTab = index
|
|
|
+ },
|
|
|
+ goToInterviewDetail(interview) {
|
|
|
+ console.log('查看面试详情:', interview)
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: `/pages/interview/detail?id=${interview.id}`
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* Custom Navbar */
|
|
|
+.custom-navbar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding-top: 80rpx;
|
|
|
+
|
|
|
+ .navbar-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .navbar-left, .navbar-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-title {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Tab Section */
|
|
|
+.tab-section {
|
|
|
+ position: fixed;
|
|
|
+ top: 168rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 32rpx 20rpx 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* Content Section */
|
|
|
+.content-section {
|
|
|
+ margin-top: 268rpx;
|
|
|
+ height: calc(100vh - 268rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* Empty State */
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .empty-illustration {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .empty-image {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 800rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ color: rgba(120, 130, 138, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* Interview List */
|
|
|
+.interview-list {
|
|
|
+ .interview-item {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 32rpx;
|
|
|
+ border-bottom: 1rpx solid rgba(240, 240, 240, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .interview-avatar {
|
|
|
+ margin-right: 24rpx;
|
|
|
+
|
|
|
+ .avatar-image {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(240, 240, 240, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .interview-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .interview-title {
|
|
|
+ color: rgba(21, 22, 26, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .position-info {
|
|
|
+ color: rgba(117, 119, 124, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 36rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .interview-time {
|
|
|
+ color: rgba(117, 119, 124, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 36rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .interview-result {
|
|
|
+ align-self: flex-start;
|
|
|
+ margin-top: 8rpx;
|
|
|
+
|
|
|
+ .result-text {
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+
|
|
|
+ &.passed {
|
|
|
+ color: rgba(40, 167, 69, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.failed {
|
|
|
+ color: rgba(220, 53, 69, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wkw