存档点
This commit is contained in:
533
pages/quick/quick.vue
Normal file
533
pages/quick/quick.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<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 {
|
||||
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>
|
||||
Reference in New Issue
Block a user