yuzhiran
372 lines
14 KiB
Vue
372 lines
14 KiB
Vue
<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.dimensions">
|
|
<view class="section-title">📊 四维能力评估</view>
|
|
<view class="dim-grid">
|
|
<view class="dim-item" v-for="dim in dimList" :key="dim.key">
|
|
<view class="dim-header">
|
|
<text class="dim-name">{{ dim.label }}</text>
|
|
<text class="dim-score">{{ dim.value }}分</text>
|
|
</view>
|
|
<view class="dim-bar-bg">
|
|
<view class="dim-bar-fill" :style="{ width: dim.value + '%', background: dim.color }"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</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="generateCard">📸 生成分享卡片</button>
|
|
<button class="btn-outline" @click="retryInterview">再面一次</button>
|
|
<button class="btn-ghost" @click="goHistory">返回记录</button>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else class="empty-box"><text>暂无报告数据</text></view>
|
|
|
|
<!-- Share card canvas (hidden) -->
|
|
<canvas canvas-id="shareCard" class="hidden-canvas" :style="{ width: cardWidth + 'px', height: cardHeight + 'px' }"></canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { api } from '../../config'
|
|
|
|
const loading = ref(true)
|
|
const report = ref(null)
|
|
const dimList = ref([])
|
|
const cardWidth = 600
|
|
const cardHeight = 900
|
|
|
|
const dimDefs = [
|
|
{ key: 'logic', label: '逻辑思维', color: '#6366F1' },
|
|
{ key: 'expression', label: '表达能力', color: '#10B981' },
|
|
{ key: 'professionalism', label: '专业度', color: '#F59E0B' },
|
|
{ key: 'stability', label: '稳定性', color: '#EF4444' },
|
|
]
|
|
|
|
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 }
|
|
|
|
const res = await uni.request({
|
|
url: api(`/interview/${interviewId}`),
|
|
method: 'GET',
|
|
header: { 'Authorization': `Bearer ${token}` },
|
|
})
|
|
if (res.statusCode === 200) {
|
|
const data = res.data
|
|
const rawSummary = data.summary || ''
|
|
|
|
// Try to parse summary JSON for structured display
|
|
let summaryText = rawSummary
|
|
let dimensions = null
|
|
try {
|
|
const parsed = JSON.parse(rawSummary)
|
|
dimensions = {
|
|
logic: parsed['逻辑思维'] || 0,
|
|
expression: parsed['表达能力'] || 0,
|
|
professionalism: parsed['专业度'] || 0,
|
|
stability: parsed['稳定性'] || 0,
|
|
}
|
|
const parts = []
|
|
if (parsed['优点']) parts.push('✅ 优点：' + parsed['优点'].join('、'))
|
|
if (parsed['不足']) parts.push('⚠️ 不足：' + parsed['不足'].join('、'))
|
|
if (parsed['建议']) parts.push('💡 建议：' + parsed['建议'].join('、'))
|
|
summaryText = parts.join('\n')
|
|
} catch {}
|
|
|
|
// Use backend dimensions if available, else parsed
|
|
const dims = data.dimensions || dimensions
|
|
if (dims) {
|
|
dimList.value = dimDefs.map(d => ({
|
|
...d,
|
|
value: Math.min(100, Math.max(0, Math.round(dims[d.key] || 0))),
|
|
}))
|
|
}
|
|
|
|
report.value = {
|
|
position: data.position || '通用岗位',
|
|
totalScore: data.totalScore || 0,
|
|
questionCount: data.questionCount || 0,
|
|
summary: summaryText,
|
|
messages: data.messages || [],
|
|
dimensions: dims,
|
|
interviewId,
|
|
}
|
|
|
|
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
|
|
if (c.data.dimensions) {
|
|
dimList.value = dimDefs.map(d => ({
|
|
...d,
|
|
value: Math.min(100, Math.max(0, Math.round(c.data.dimensions[d.key] || 0))),
|
|
}))
|
|
}
|
|
}
|
|
}).catch(e => {
|
|
console.error('[report] auto-complete failed:', e)
|
|
})
|
|
}
|
|
}
|
|
} 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' })
|
|
|
|
async function generateCard() {
|
|
if (!report.value) return
|
|
uni.showLoading({ title: '生成中...' })
|
|
await nextTick()
|
|
|
|
const ctx = uni.createCanvasContext('shareCard')
|
|
const w = cardWidth
|
|
const h = cardHeight
|
|
const r = dimList.value
|
|
const total = report.value.totalScore
|
|
const pos = report.value.position
|
|
const date = new Date().toLocaleDateString('zh-CN')
|
|
|
|
// Background gradient
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, h)
|
|
gradient.addColorStop(0, '#1E1B4B')
|
|
gradient.addColorStop(0.5, '#312E81')
|
|
gradient.addColorStop(1, '#1E1B4B')
|
|
ctx.setFillStyle(gradient)
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
|
// Border decoration
|
|
ctx.setStrokeStyle('#4F46E5')
|
|
ctx.setLineWidth(4)
|
|
ctx.strokeRect(16, 16, w - 32, h - 32)
|
|
|
|
// Title
|
|
ctx.setFillStyle('#FFFFFF')
|
|
ctx.setFontSize(36)
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText('🎯 模拟面试报告', w / 2, 80)
|
|
|
|
// Position
|
|
ctx.setFontSize(24)
|
|
ctx.setFillStyle('#A5B4FC')
|
|
ctx.fillText(pos + ' | ' + date, w / 2, 120)
|
|
|
|
// Total score circle
|
|
const cx = w / 2
|
|
const cy = 220
|
|
const radius = 72
|
|
|
|
// Glow effect
|
|
ctx.setStrokeStyle('rgba(99,102,241,0.3)')
|
|
ctx.setLineWidth(16)
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, radius + 10, 0, Math.PI * 2)
|
|
ctx.stroke()
|
|
|
|
// Circle background
|
|
ctx.setFillStyle('#2D2A6E')
|
|
ctx.beginPath()
|
|
ctx.arc(cx, cy, radius, 0, Math.PI * 2)
|
|
ctx.fill()
|
|
|
|
// Total score text
|
|
ctx.setFillStyle(total >= 80 ? '#34D399' : total >= 60 ? '#FBBF24' : '#F87171')
|
|
ctx.setFontSize(52)
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText(String(total), cx, cy - 8)
|
|
|
|
ctx.setFontSize(16)
|
|
ctx.setFillStyle('#A5B4FC')
|
|
ctx.fillText('总分', cx, cy + 34)
|
|
|
|
// Dimension bars
|
|
const barColors = ['#6366F1', '#10B981', '#F59E0B', '#EF4444']
|
|
const barStartY = 330
|
|
const barH = 36
|
|
const barGap = 16
|
|
const barMaxW = 380
|
|
const barX = 130
|
|
|
|
for (let i = 0; i < r.length; i++) {
|
|
const d = r[i]
|
|
const y = barStartY + i * (barH + barGap)
|
|
const v = d.value
|
|
|
|
// Label
|
|
ctx.setFontSize(20)
|
|
ctx.setFillStyle('#A5B4FC')
|
|
ctx.setTextAlign('left')
|
|
ctx.fillText(d.label, 40, y + 26)
|
|
|
|
// Bar background
|
|
ctx.setFillStyle('rgba(255,255,255,0.08)')
|
|
ctx.beginPath()
|
|
ctx.roundRect ? ctx.roundRect(barX, y, barMaxW, barH, barH / 2) : ctx.rect(barX, y, barMaxW, barH)
|
|
ctx.fill()
|
|
|
|
// Bar fill
|
|
ctx.setFillStyle(barColors[i])
|
|
ctx.beginPath()
|
|
const fillW = Math.max(0, (v / 100) * barMaxW)
|
|
ctx.roundRect ? ctx.roundRect(barX, y, fillW, barH, barH / 2) : ctx.rect(barX, y, fillW, barH)
|
|
ctx.fill()
|
|
|
|
// Score text
|
|
ctx.setFontSize(20)
|
|
ctx.setFillStyle('#FFFFFF')
|
|
ctx.setTextAlign('right')
|
|
ctx.fillText(v + '分', w - 40, y + 26)
|
|
}
|
|
|
|
// Divider line
|
|
ctx.setStrokeStyle('rgba(165,180,252,0.3)')
|
|
ctx.setLineWidth(1)
|
|
ctx.beginPath()
|
|
ctx.moveTo(40, 600)
|
|
ctx.lineTo(w - 40, 600)
|
|
ctx.stroke()
|
|
|
|
// Bottom info
|
|
ctx.setFontSize(20)
|
|
ctx.setFillStyle('#A5B4FC')
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText('「职引」- AI 模拟面试助手', w / 2, 650)
|
|
ctx.setFontSize(16)
|
|
ctx.setFillStyle('rgba(165,180,252,0.5)')
|
|
ctx.fillText('扫码开始你的模拟面试 → 在微信搜索"职引"小程序', w / 2, 690)
|
|
|
|
// QR text hint
|
|
ctx.setFillStyle('#FFFFFF')
|
|
ctx.setFontSize(16)
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText('在微信搜索「职引」小程序', w / 2, 760)
|
|
ctx.fillText('查看完整面试报告', w / 2, 790)
|
|
|
|
ctx.draw(false, async () => {
|
|
try {
|
|
const tempRes = await uni.canvasToTempFilePath({ canvasId: 'shareCard' })
|
|
uni.hideLoading()
|
|
uni.showActionSheet({
|
|
itemList: ['保存到相册', '分享给好友'],
|
|
success: (res) => {
|
|
if (res.tapIndex === 0) {
|
|
uni.saveImageToPhotosAlbum({ filePath: tempRes.tempFilePath, success: () => uni.showToast({ title: '已保存到相册', icon: 'success' }) })
|
|
} else if (res.tapIndex === 1) {
|
|
uni.shareAppMessage ? uni.shareAppMessage({ title: '我的面试报告', imageUrl: tempRes.tempFilePath }) : uni.showToast({ title: '请截图后分享', icon: 'none' })
|
|
}
|
|
},
|
|
})
|
|
} catch (e) {
|
|
uni.hideLoading()
|
|
uni.showToast({ title: '卡片生成失败', icon: 'none' })
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page { background: #F3F4F6; min-height: 100vh; }
|
|
.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; flex-direction: column; gap: 16rpx; margin-top: 32rpx; }
|
|
.btn-primary { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #FFFFFF; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; font-weight: 600; }
|
|
.btn-outline { background: #FFFFFF; color: #4F46E5; border-radius: 16rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; border: 2rpx solid #4F46E5; }
|
|
.btn-ghost { background: transparent; color: #6B7280; border-radius: 16rpx; height: 72rpx; line-height: 72rpx; font-size: 24rpx; }
|
|
.empty-box { padding: 200rpx 0; text-align: center; color: #9CA3AF; font-size: 28rpx; }
|
|
.hidden-canvas { position: fixed; left: -9999px; top: -9999px; pointer-events: none; }
|
|
.dim-grid { display: flex; flex-direction: column; gap: 20rpx; }
|
|
.dim-header { display: flex; justify-content: space-between; margin-bottom: 8rpx; }
|
|
.dim-name { font-size: 24rpx; color: #374151; }
|
|
.dim-score { font-size: 24rpx; color: #4F46E5; font-weight: 600; }
|
|
.dim-bar-bg { height: 20rpx; background: #F3F4F6; border-radius: 10rpx; overflow: hidden; }
|
|
.dim-bar-fill { height: 100%; border-radius: 10rpx; transition: width 0.6s ease; }
|
|
</style>
|