初始化：职引项目 v1.0
This commit is contained in:
yuzhiran
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="header" v-if="!loading && report">
|
||||
<text class="report-title">面试报告</text>
|
||||
<text class="report-position">{{ report.position }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-box"><text>加载中...</text></view>
|
||||
|
||||
<view v-else-if="report" class="body">
|
||||
<view class="score-card">
|
||||
<view class="score-circle" :class="scoreLevel(report.totalScore)">
|
||||
<text class="score-num">{{ report.totalScore }}</text>
|
||||
<text class="score-label">总分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-row">
|
||||
<text class="info-label">面试岗位</text>
|
||||
<text class="info-value">{{ report.position }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">面试题数</text>
|
||||
<text class="info-value">{{ report.questionCount }} 题</text>
|
||||
</view>
|
||||
|
||||
<view class="section" v-if="report.summary">
|
||||
<view class="section-title">📝 评估总结</view>
|
||||
<text class="summary-text">{{ report.summary }}</text>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">💬 完整对话</view>
|
||||
<view class="msg-list">
|
||||
<view v-for="(msg, idx) in report.messages" :key="idx" class="msg-item" :class="msg.role">
|
||||
<view class="msg-label">{{ msg.role === 'ai' ? '面试官' : '你' }}</view>
|
||||
<text class="msg-content">{{ msg.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="actions">
|
||||
<button class="btn-primary" @click="retryInterview">再面一次</button>
|
||||
<button class="btn-outline" @click="goHistory">返回记录</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-box"><text>暂无报告数据</text></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { api } from '../../config'
|
||||
|
||||
const loading = ref(true)
|
||||
const report = ref(null)
|
||||
|
||||
onLoad(async (options) => {
|
||||
const interviewId = options?.interviewId || ''
|
||||
if (!interviewId) { loading.value = false; return }
|
||||
|
||||
try {
|
||||
const token = uni.getStorageSync('token') || ''
|
||||
if (!token) { loading.value = false; return }
|
||||
|
||||
// Get interview details
|
||||
const res = await uni.request({
|
||||
url: api(`/interview/${interviewId}`),
|
||||
method: 'GET',
|
||||
header: { 'Authorization': `Bearer ${token}` },
|
||||
})
|
||||
if (res.statusCode === 200) {
|
||||
const data = res.data
|
||||
report.value = {
|
||||
position: data.position || '通用岗位',
|
||||
totalScore: data.totalScore || 0,
|
||||
questionCount: data.questionCount || 0,
|
||||
summary: data.summary || '',
|
||||
messages: data.messages || [],
|
||||
}
|
||||
// Auto-complete if in progress
|
||||
if (data.status === 'in_progress') {
|
||||
uni.request({
|
||||
url: api(`/interview/${interviewId}/complete`),
|
||||
method: 'POST',
|
||||
header: { 'Authorization': `Bearer ${token}` },
|
||||
}).then(c => {
|
||||
if (c.statusCode === 200 && c.data) {
|
||||
report.value.totalScore = c.data.totalScore || report.value.totalScore
|
||||
report.value.summary = c.data.summary || report.value.summary
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
} catch(e) { console.error(e) }
|
||||
finally { loading.value = false }
|
||||
})
|
||||
|
||||
const scoreLevel = (s) => { if (s >= 80) return 'good'; if (s >= 60) return 'medium'; return 'poor' }
|
||||
const retryInterview = () => uni.switchTab({ url: '/pages/index/index' })
|
||||
const goHistory = () => uni.switchTab({ url: '/pages/history/history' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page { background: #F3F4F6; }
|
||||
.header {
|
||||
background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-mid) 50%, var(--color-gradient-end) 100%);
|
||||
padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx; min-height: 90rpx;
|
||||
}
|
||||
.report-title { font-size: 36rpx; font-weight: 700; color: #FFFFFF; display: block; }
|
||||
.report-position { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
|
||||
.loading-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
|
||||
.body { padding: 0 32rpx 48rpx; }
|
||||
.score-card { display: flex; justify-content: center; margin: -40rpx 0 30rpx; }
|
||||
.score-circle {
|
||||
width: 180rpx; height: 180rpx; border-radius: 50%;
|
||||
background: #FFFFFF; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
box-shadow: 0 8rpx 30rpx rgba(79,70,229,0.2);
|
||||
}
|
||||
.score-circle.good { box-shadow: 0 8rpx 30rpx rgba(5,150,105,0.2); }
|
||||
.score-circle.medium { box-shadow: 0 8rpx 30rpx rgba(217,119,6,0.2); }
|
||||
.score-circle.poor { box-shadow: 0 8rpx 30rpx rgba(220,38,38,0.2); }
|
||||
.score-num { font-size: 56rpx; font-weight: 700; color: #4F46E5; line-height: 1.2; }
|
||||
.good .score-num { color: #059669; }
|
||||
.medium .score-num { color: #D97706; }
|
||||
.poor .score-num { color: #DC2626; }
|
||||
.score-label { font-size: 20rpx; color: #9CA3AF; margin-top: 4rpx; }
|
||||
.info-row { display: flex; justify-content: space-between; padding: 20rpx 0; border-bottom: 1rpx solid #E5E7EB; }
|
||||
.info-label { font-size: 24rpx; color: #6B7280; }
|
||||
.info-value { font-size: 24rpx; color: #111827; font-weight: 500; }
|
||||
.section { background: #FFFFFF; border-radius: 20rpx; padding: 28rpx; margin-top: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04); }
|
||||
.section-title { font-size: 28rpx; font-weight: 600; color: #111827; margin-bottom: 16rpx; }
|
||||
.summary-text { font-size: 24rpx; color: #374151; line-height: 1.8; white-space: pre-wrap; }
|
||||
.msg-list { display: flex; flex-direction: column; gap: 16rpx; }
|
||||
.msg-item { padding: 16rpx; border-radius: 12rpx; }
|
||||
.msg-item.ai { background: #F9FAFB; border-left: 4rpx solid #4F46E5; }
|
||||
.msg-item.user { background: #EEF2FF; border-left: 4rpx solid #818CF8; }
|
||||
.msg-label { font-size: 20rpx; font-weight: 600; color: #4F46E5; margin-bottom: 8rpx; }
|
||||
.msg-content { font-size: 24rpx; color: #111827; line-height: 1.7; white-space: pre-wrap; }
|
||||
.actions { display: flex; gap: 20rpx; margin-top: 32rpx; }
|
||||
.btn-primary { flex: 1; background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #FFFFFF; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; font-weight: 600; }
|
||||
.btn-outline { flex: 1; background: #FFFFFF; color: #4F46E5; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; border: 2rpx solid #4F46E5; }
|
||||
.empty-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user