535 lines
10 KiB
Vue
535 lines
10 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view v-if="gameState === 'prepare'" class="prepare-screen">
|
|
<view class="countdown-circle">
|
|
<text class="countdown-text">{{ prepareCountdown }}</text>
|
|
</view>
|
|
<text class="prepare-text">准备开始</text>
|
|
</view>
|
|
|
|
<view v-else-if="gameState === 'playing'" class="game-screen">
|
|
<view class="timer-bar">
|
|
<view class="timer-progress" :style="{ width: timerProgress + '%' }"></view>
|
|
<text class="timer-text">{{ countdown }}s</text>
|
|
</view>
|
|
|
|
<view class="stats-bar">
|
|
<view class="stat-item">
|
|
<text class="stat-label">正确</text>
|
|
<text class="stat-value correct">{{ correctCount }}</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">错误</text>
|
|
<text class="stat-value wrong">{{ wrongCount }}</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-label">正确率</text>
|
|
<text class="stat-value">{{ accuracy }}%</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="question" class="question-card">
|
|
<view class="question-header">
|
|
<text class="question-title">题目</text>
|
|
<view class="question-meta">
|
|
<view class="meta-tag category-tag">
|
|
<text class="meta-text">{{ getCategoryText(question.category) }}</text>
|
|
</view>
|
|
<view class="meta-tag difficulty-tag" :class="getDifficultyClass(question.difficulty)">
|
|
<text class="meta-text">{{ getDifficultyText(question.difficulty) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="question-content">
|
|
<text class="question-text">{{ question.question }}</text>
|
|
</view>
|
|
<view v-if="question.options" class="options-list">
|
|
<view
|
|
v-for="(option, index) in question.options"
|
|
:key="index"
|
|
class="option-item"
|
|
:class="{
|
|
'correct': answered && correctAnswer === String.fromCharCode(65 + index),
|
|
'wrong': answered && selectedAnswer === String.fromCharCode(65 + index) && correctAnswer !== String.fromCharCode(65 + index)
|
|
}"
|
|
@click="handleAnswer(option, index)"
|
|
>
|
|
<text class="option-text">{{ option }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-else-if="gameState === 'finished'" class="result-screen">
|
|
<view class="result-card">
|
|
<text class="result-title">答题结束</text>
|
|
<view class="result-stats">
|
|
<view class="result-stat-item">
|
|
<text class="result-stat-label">答题总数</text>
|
|
<text class="result-stat-value">{{ totalCount }}</text>
|
|
</view>
|
|
<view class="result-stat-item">
|
|
<text class="result-stat-label">正确</text>
|
|
<text class="result-stat-value correct">{{ correctCount }}</text>
|
|
</view>
|
|
<view class="result-stat-item">
|
|
<text class="result-stat-label">错误</text>
|
|
<text class="result-stat-value wrong">{{ wrongCount }}</text>
|
|
</view>
|
|
<view class="result-stat-item">
|
|
<text class="result-stat-label">正确率</text>
|
|
<text class="result-stat-value">{{ accuracy }}%</text>
|
|
</view>
|
|
</view>
|
|
<button class="restart-btn" @click="restartGame">再来一次</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '../../utils/api.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
gameState: 'prepare',
|
|
prepareCountdown: 5,
|
|
countdown: 60,
|
|
timerProgress: 100,
|
|
question: null,
|
|
answered: false,
|
|
correctAnswer: '',
|
|
selectedAnswer: '',
|
|
correctCount: 0,
|
|
wrongCount: 0,
|
|
totalCount: 0,
|
|
prepareTimer: null,
|
|
gameTimer: null
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
accuracy() {
|
|
if (this.totalCount === 0) return 0
|
|
return Math.round((this.correctCount / this.totalCount) * 100)
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.startPrepare()
|
|
},
|
|
|
|
onUnload() {
|
|
this.clearTimers()
|
|
},
|
|
|
|
methods: {
|
|
startPrepare() {
|
|
this.gameState = 'prepare'
|
|
this.prepareCountdown = 5
|
|
this.prepareTimer = setInterval(() => {
|
|
this.prepareCountdown--
|
|
if (this.prepareCountdown <= 0) {
|
|
this.clearTimers()
|
|
this.startGame()
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
startGame() {
|
|
this.gameState = 'playing'
|
|
this.countdown = 60
|
|
this.timerProgress = 100
|
|
this.correctCount = 0
|
|
this.wrongCount = 0
|
|
this.totalCount = 0
|
|
this.loadQuestion()
|
|
|
|
this.gameTimer = setInterval(() => {
|
|
this.countdown--
|
|
this.timerProgress = (this.countdown / 60) * 100
|
|
if (this.countdown <= 0) {
|
|
this.clearTimers()
|
|
this.finishGame()
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
async loadQuestion() {
|
|
try {
|
|
const res = await api.getQuestion()
|
|
if (res.data) {
|
|
this.question = res.data
|
|
this.resetAnswer()
|
|
}
|
|
} catch (error) {
|
|
console.error('获取题目失败:', error)
|
|
}
|
|
},
|
|
|
|
resetAnswer() {
|
|
this.answered = false
|
|
this.correctAnswer = ''
|
|
this.selectedAnswer = ''
|
|
},
|
|
|
|
getCategoryText(category) {
|
|
return category || '其他'
|
|
},
|
|
|
|
getDifficultyText(difficulty) {
|
|
if (!difficulty && difficulty !== 0) return '简单'
|
|
if (difficulty <= 30) return '简单'
|
|
if (difficulty <= 60) return '中等'
|
|
if (difficulty <= 80) return '困难'
|
|
return '极难'
|
|
},
|
|
|
|
getDifficultyClass(difficulty) {
|
|
if (!difficulty && difficulty !== 0) return 'difficulty-easy'
|
|
if (difficulty <= 30) return 'difficulty-easy'
|
|
if (difficulty <= 60) return 'difficulty-medium'
|
|
if (difficulty <= 80) return 'difficulty-hard'
|
|
return 'difficulty-extreme'
|
|
},
|
|
|
|
async handleAnswer(option, index) {
|
|
if (this.answered) return
|
|
|
|
const answer = String.fromCharCode(65 + index)
|
|
this.selectedAnswer = answer
|
|
this.answered = true
|
|
this.totalCount++
|
|
|
|
try {
|
|
const res = await api.answerQuestion(this.question.sn, answer)
|
|
if (res.data) {
|
|
this.correctAnswer = res.data.answer || answer
|
|
|
|
if (this.correctAnswer === answer) {
|
|
this.correctCount++
|
|
} else {
|
|
this.wrongCount++
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.loadQuestion()
|
|
}, 500)
|
|
}
|
|
} catch (error) {
|
|
console.error('提交答案失败:', error)
|
|
this.wrongCount++
|
|
setTimeout(() => {
|
|
this.loadQuestion()
|
|
}, 500)
|
|
}
|
|
},
|
|
|
|
finishGame() {
|
|
this.gameState = 'finished'
|
|
},
|
|
|
|
restartGame() {
|
|
this.startPrepare()
|
|
},
|
|
|
|
clearTimers() {
|
|
if (this.prepareTimer) {
|
|
clearInterval(this.prepareTimer)
|
|
this.prepareTimer = null
|
|
}
|
|
if (this.gameTimer) {
|
|
clearInterval(this.gameTimer)
|
|
this.gameTimer = null
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
padding: 40rpx;
|
|
}
|
|
|
|
.prepare-screen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.countdown-circle {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.countdown-text {
|
|
font-size: 120rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.prepare-text {
|
|
font-size: 40rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.game-screen {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.timer-bar {
|
|
position: relative;
|
|
height: 80rpx;
|
|
background: #e0e0e0;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.timer-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.timer-text {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stats-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.stat-value.correct {
|
|
color: #28a745;
|
|
}
|
|
|
|
.stat-value.wrong {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.question-card {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.question-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
|
|
.question-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.question-meta {
|
|
display: flex;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.meta-tag {
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.category-tag {
|
|
background: #e3f2fd;
|
|
}
|
|
|
|
.difficulty-tag {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.difficulty-easy {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.difficulty-medium {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.difficulty-hard {
|
|
background: #fd7e14;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.difficulty-extreme {
|
|
background: #dc3545;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.meta-text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.question-content {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.question-text {
|
|
font-size: 30rpx;
|
|
color: #666;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.options-list {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 30rpx;
|
|
margin-bottom: 20rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.option-item:active {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.option-item.correct {
|
|
background: #d4edda;
|
|
border: 2rpx solid #28a745;
|
|
}
|
|
|
|
.option-item.wrong {
|
|
background: #f8d7da;
|
|
border: 2rpx solid #dc3545;
|
|
}
|
|
|
|
.option-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
|
|
.result-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.result-card {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 60rpx 40rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
width: 100%;
|
|
}
|
|
|
|
.result-title {
|
|
display: block;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.result-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.result-stat-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 30rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.result-stat-label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.result-stat-value {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.result-stat-value.correct {
|
|
color: #28a745;
|
|
}
|
|
|
|
.result-stat-value.wrong {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.restart-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
border-radius: 40rpx;
|
|
border: none;
|
|
}
|
|
</style>
|