<template>
  <view class="success-container">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="icon-circle">
        <text class="iconfont icon-check">✓</text>
      </view>
      <text class="success-text">面试报名成功</text>
    </view>
    
    <!-- 面试信息 -->
    <view class="interview-info">
      <view class="info-title">面试信息</view>
      <view class="info-item">
        <text class="label">面试时间:</text>
        <text class="value">2024/06/28 14:48</text>
      </view>
      <view class="info-item time-end">
        <text class="value">2024/06/28 16:47</text>
      </view>
      <view class="info-item">
        <text class="label">面试公司:</text>
        <text class="value">敏龙科技集团有限公司</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="btn-container">
      <button class="start-btn" @click="startInterview">开始面试</button>
    </view>
    
    <!-- 底部提示 -->
    <view class="bottom-tips">
      <text>本次面试将在约定时间内有效，请按时参加面试</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      interviewInfo: {
        position: '前端岗位',
        startTime: '2024/06/28 14:48',
        endTime: '2024/06/28 16:47',
        company: '敏龙科技集团有限公司'
      }
    }
  },
  methods: {
    startInterview() {
      uni.navigateTo({
        url: '/pages/interview-notice/interview-notice',
        fail: (err) => {
          console.error('页面跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.success-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 30rpx;
}

.success-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60rpx 0;
}

.icon-circle {
  width: 120rpx;
  height: 120rpx;
  background-color: #4cd137;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}

.icon-check {
  color: white;
  font-size: 60rpx;
  font-weight: bold;
}

.success-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.interview-info {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.info-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  margin: 15rpx 0;
  font-size: 28rpx;
  color: #333;
}

.time-end {
  margin-top: -10rpx;
  padding-left: 120rpx;
}

.label {
  color: #666;
  width: 120rpx;
}

.btn-container {
  margin: 40rpx 0;
}

.start-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #6c5ce7;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
}

.bottom-tips {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}
</style> 