sj-miniprogram/pages/assessment/training.vue

<template>
  <view class="container">
    <view class="status-bar"></view>
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <image src="/static/icons/back_black.svg" class="back-icon" mode="aspectFit"></image>
      </view>
      <text class="page-title">岗位培训测评</text>
      <view class="nav-right"></view>
    </view>

    <view class="content">
      <view class="success-header">
        <view class="check-circle">
           <view class="css-check"></view>
        </view>
        <text class="success-title">预约成功</text>
        <text class="success-subtitle">请按照提示步骤完成所有测评环节</text>
      </view>

      <view class="training-card">
        <view class="card-header">
          <text class="job-name">{{ title }}</text>
          <text class="status-tag">进行中</text>
        </view>
        
        <view class="step-list">
          <view class="step-item active">
             <view class="step-num">1</view>
             <view class="step-info">
               <text class="s-title">培训环节</text>
               <text class="s-desc">了解岗位职责与核心能力要求</text>
             </view>
             <view class="step-status">已完成</view>
          </view>
          <view class="step-item current">
             <view class="step-num">2</view>
             <view class="step-info">
               <text class="s-title">在线测评</text>
               <text class="s-desc">检验培训成果，获取能力值雷达图</text>
             </view>
             <view class="step-status">待开始</view>
          </view>
          <view class="step-item">
             <view class="step-num">3</view>
             <view class="step-info">
               <text class="s-title">测评报告生成</text>
               <text class="s-desc">全能力维度分析报告</text>
             </view>
          </view>
        </view>
      </view>

      <view class="action-section">
        <button class="start-btn" @click="goToAssessment">进入岗位测评</button>
        <text class="tip">由于该项目为专业测评，请确保预留30分钟不间断时间</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const title = ref('审计员一级');
const assessmentId = ref('');

onLoad((options) => {
    if (options.title) title.value = options.title;
    if (options.assessmentId) assessmentId.value = options.assessmentId;
    else if (options.id) assessmentId.value = options.id;
});

const goBack = () => uni.navigateBack();

const goToAssessment = () => {
    // 进入测评提醒页面，带上 source=training 参数以便在结果页识别
    uni.navigateTo({
        url: `/pages/assessment/remind?family=audit&source=training&id=${assessmentId.value}`
    });
};
</script>

<style lang="scss" scoped>
.container { min-height: 100vh; background-color: #F8F9FB; display: flex; flex-direction: column; }
.status-bar { height: env(safe-area-inset-top); background: #FFF; }
.nav-bar {
    height: 88rpx; background: #FFF; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx;
    .page-title { font-size: 34rpx; font-weight: bold; }
    .nav-left, .nav-right { width: 60rpx; }
    .back-icon { width: 40rpx; height: 40rpx; }
}

.content { padding: 120rpx 40rpx 40rpx; flex: 1; display: flex; flex-direction: column; }

.success-header {
    display: flex; flex-direction: column; align-items: center; margin-bottom: 80rpx;
    .check-circle { 
        width: 140rpx; height: 140rpx; background: #67C23A; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 30rpx;
        .css-check { width: 60rpx; height: 30rpx; border-left: 7rpx solid #fff; border-bottom: 7rpx solid #fff; transform: rotate(-45deg); margin-top:-10rpx;}
    }
    .success-title { font-size: 44rpx; font-weight: bold; color: #1A1A1A; margin-bottom: 16rpx; }
    .success-subtitle { font-size: 28rpx; color: #999; }
}

.training-card {
    background: #FFF; border-radius: 32rpx; padding: 40rpx; box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.03); margin-bottom: 40rpx;
    .card-header { 
        display: flex; justify-content: space-between; align-items: center; margin-bottom: 40rpx; padding-bottom: 30rpx; border-bottom: 1rpx solid #F0F0F0;
        .job-name { font-size: 36rpx; font-weight: bold; color: #1A1A1A; }
        .status-tag { background: #EBF2FF; color: #1F6CFF; font-size: 22rpx; padding: 6rpx 16rpx; border-radius: 30rpx; }
    }
    .step-list {
        display: flex; flex-direction: column; gap: 40rpx;
        .step-item {
            display: flex; align-items: center; position: relative;
            &::after { content: ''; position: absolute; left: 24rpx; top: 50rpx; bottom: -50rpx; width: 2rpx; background: #EEE; }
            &:last-child::after { display: none; }
            
            .step-num { width: 48rpx; height: 48rpx; border-radius: 50%; background: #EEE; color: #999; display: flex; align-items: center; justify-content: center; font-size: 24rpx; font-weight: bold; margin-right: 30rpx; z-index: 1; }
            .step-info { 
                flex: 1; 
                .s-title { font-size: 28rpx; font-weight: bold; color: #333; display: block; margin-bottom: 4rpx; }
                .s-desc { font-size: 22rpx; color: #999; display: block; }
            }
            .step-status { font-size: 24rpx; color: #999; }
            
            &.active { .step-num { background: #E6F7FF; color: #1F6CFF; } .step-status { color: #1F6CFF; } }
            &.current { .step-num { background: #1F6CFF; color: #FFF; } .s-title { color: #1F6CFF; } }
        }
    }
}

.action-section {
    margin-top: 60rpx; display: flex; flex-direction: column; align-items: center;
    .start-btn { 
        width: 100%; height: 100rpx; background: #1F6CFF; color: #FFF; border-radius: 50rpx; font-size: 32rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; margin-bottom: 30rpx;
        box-shadow: 0 10rpx 20rpx rgba(31, 108, 255, 0.2);
    }
    .tip { font-size: 22rpx; color: #BBB; text-align: center; }
}
</style>