yizhizan-h5/pages/recruitmentData/interviewManage.vue

<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>