llll/question.vue

<template>
  <view>
    <!-- 问题容器，只有在 question 存在时才显示 -->  
    <view class="question-container" v-if="question">
      <text>问题: {{ question }}</text>
      <!-- 用户输入答案的输入框 -->
      <input v-model="studentAnswer" placeholder="请输入你的答案" class="answer-input" />
      <!-- 提交答案 -->
      <button @click="checkAnswer" class="button">提交答案</button>
    </view>

    <view class="txzz">
      <button @click="selectRandomStudent" style="width: 320px;">
        <text>天选之子：{{ selectedStudent?.name || '点击选择' }}</text>
      </button>
      <text v-if="selectedStudent">当前积分: {{ selectedStudent.points }}</text>
    </view>
    
    <!-- 签到 -->
    <view class="atten">
      <button @click="signIn" class="button">签到</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const studentAnswer = ref(''); 
const question = ref(''); 
const correctAnswer = ref(''); 
const rcallData = ref([]); // 学生数据
const selectedStudent = ref(null); // 被选中的学生

const fetchQuestion = async () => {
    try {
        const res = await uni.request({
            url: 'http://10.198.140.41:3000/api/questions',
            method: 'GET'
        });

        if (res.statusCode === 200 && res.data.length > 0) {
            const questionData = res.data[0];
            question.value = questionData.question; 
            correctAnswer.value = questionData.correctAnswer; 
        } else {
            console.error('获取问题失败:', res);
            uni.showToast({ title: '无法获取问题', icon: 'none' });
        }
    } catch (error) {
        console.error('请求时发生错误:', error);
        uni.showToast({ title: '网络错误', icon: 'none' });
    }
};

const getans = async () => {
    try {
        let res = await uni.request({
            url: "http://10.198.140.41:3000/api/upload",
            method: 'GET',
        });
        
        if (res && res.data) {
            rcallData.value = res.data.map(student => ({
                name: student.name,
                points: student.points || 0
            }));
            console.log(rcallData.value);
        }
    } catch (error) {
        console.error("获取学生数据失败:", error);
    }
};

const selectRandomStudent = () => {
    if (rcallData.value.length === 0) {
        uni.showToast({
            title: '没有学生数据',
            icon: 'none'
        });
        return;
    }
    const randomIndex = Math.floor(Math.random() * rcallData.value.length);
    selectedStudent.value = rcallData.value[randomIndex];
};

const checkAnswer = async () => {
    if (!selectedStudent.value) {
        uni.showToast({
            title: '请先选择天选之子',
            icon: 'none'
        });
        return;
    }

    if (studentAnswer.value.trim() === '') {
        uni.showToast({
            title: '请输入答案', 
            icon: 'none'
        });
        return;
    }

    if (studentAnswer.value === correctAnswer.value) {
        selectedStudent.value.points += 2;
        uni.showToast({
            title: '回答正确', 
            icon: 'success'
        });
    } else {
        selectedStudent.value.points -= 1;
        uni.showToast({
            title: '回答错误', 
            icon: 'none'
        });
    }

    studentAnswer.value = '';

    await sendAttendance(selectedStudent.value);
};

const signIn = () => {
    if (selectedStudent.value) {
        selectedStudent.value.points += 1;
        uni.showToast({
            title: '签到成功', 
            icon: 'success'
        });
    }
};

const sendAttendance = async (student) => {
    try {
        const response = await uni.request({
            url: "http://10.198.140.41:3000/api/upload",
            method: 'POST',
            data: {
                name: student.name,
                points: selectedStudent.value.points
            },
            header: {
                'Content-Type': 'application/json'
            }
        });

        if (response.statusCode === 200) {
            console.log('Attendance updated successfully:', response.data);
        } else {
            console.error('Failed to update attendance:', response.data);
        }
    } catch (error) {
        console.error('Error occurred while updating attendance:', error);
    }
};

onMounted(() => {
    fetchQuestion();
    getans();
});
</script>

<style scoped>
.button {
  display: block;
  width: 320px;
  height: 60px;
  margin: 10px auto;
  padding: 10px;
  margin-top: 25px;
  background-color: #1E90FF;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.answer-input {
  width: 90%;
  padding: 10px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.question-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 10px;
}

.txzz {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.atten {
  display: flex;
  align-content: center;
  bottom: 40px;
}
</style>