chore: v3.0.0-4030620241128001

main
刘东阳 3 months ago
parent 48961be22b
commit 84e0330d7a

@ -46,6 +46,12 @@
"navigationBarTitleText": "plan"
}
},
{
"path": "pages/bussin/bussin",
"style": {
"navigationBarTitleText": "bussin"
}
},
{
"path": "pages/course/course",
"style": {

@ -0,0 +1,271 @@
<template>
<view class="container">
<view class="main" v-if="!showRankList">
<!-- 按钮区域 -->
<view class="button-container">
<button
v-if="activityStatus === '活动中'"
class="round-button"
@click="handleClick"
>
</button>
<view v-else class="status-text">
{{ activityStatus }}
</view>
</view>
<!-- 排行榜区域 -->
</view>
<view v-else >
<view class="title-view">
<text class="title">抢答</text>
</view>
<br/>
<text class="paimin">我的排名: 12</text>
<transition name="fade-slide">
<view class="rank-list">
<view
v-for="(item, index) in rankList"
:key="index"
class="rank-item"
:class="{
'black':1===1
}"
>
<text class="rank-number">{{ index + 1 }}</text>
<text class="rank-name">{{JSON.parse(item.infor).name }}</text>
<text class="rank-time">{{ (JSON.parse(item.infor).time/1000).toFixed() }}s</text>
</view>
</view>
</transition>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import moment from "moment";
const uid=ref('1');
const starttime=ref('123')
const rankList = ref([
]);
onLoad((options) => {
console.log('load', options)
if(options) {
console.log('options:', options.uuid)
uni.request({
url: 'http://localhost:3400/apistu/getinclassactive',
method: 'GET',
data: { // GET `data` `params` :ml-citation{ref="8" data="citationList"}
uuid: options.uuid
},
success: (res) => { /* ... */
console.log(res.data)
let infor=JSON.parse(res.data.infor)
console.log(infor.endtime)
starttime.value=infor.time;
uid.value=res.data.uuid;
}
});
uni.request({
url: 'http://localhost:3400/apistu/getqiangdainclass',
method: 'GET',
data: { // GET `data` `params` :ml-citation{ref="8" data="citationList"}
uuid: options.uuid,
},
success: (res) => { /* ... */
console.log(res.data)
rankList.value=res.data
let index=res.data.findIndex(item=>item.xuehao==='202413501063');
if(index!=-1){
showRankList.value = true; //
activityStatus.value = '未在活动中'; //
}
if(res.data.length>0) {
}
}
});
}
})
//
const activityStatus = ref('活动中'); // '', ''
const showRankList = ref(false); //
//
//
const handleClick = () => {
console.log('抢答按钮被点击');
uni.request({
url: 'http://localhost:3400/apistu/addinactivestu_qiangda',
method: 'POST',
data: { // GET `data` `params` :ml-citation{ref="8" data="citationList"}
uuid: uid.value,
kch:'202413501',
kctime:'n8z1A1',
xuehao: '202413501063',
time:moment().format('YYYY-MM-DD HH:mm:ss'),
starttime:starttime.value,
name:"刘东阳A",
touxiangcolor:"red"
},
success: (res) => { /* ... */
console.log(res.data)
rankList.value.push(res.data)
showRankList.value = true; //
activityStatus.value = '未在活动中'; //
}
});
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
padding: 20px;
}
/* 按钮样式保持不变 */
.round-button {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #4a90e2;
color: #fff;
font-size: 48px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.round-button:hover {
transform: scale(1.05);
}
.status-text {
font-size: 48px;
color: #999;
}
/* 排行榜容器 */
.rank-list-container {
padding: 0;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.rank-list {
border-radius: 16px;
padding: 20px;
margin-top: 4px;
}
.rank-title {
display: block;
font-size: 28px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: #333;
}
.rank-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #999;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 12px;
transition: background-color 0.3s ease;
}
.rank-item.gold {
background-color: #ffd700;
}
.rank-item.silver {
background-color: #c0c0c0;
}
.rank-item.bronze {
background-color: #cd7f32;
color: #fff;
}
.rank-item.black {
background-color: #fff;
color: black;
}
.rank-number {
font-size: 20px;
font-weight: bold;
min-width: 30px;
}
.rank-name {
flex: 1;
font-size: 18px;
}
.rank-time {
font-size: 16px;
color: #555;
}
/* 动画效果 */
.fade-slide-enter-active,
.fade-slide-leave-active {
transition: all 0.5s ease;
}
.fade-slide-enter-from,
.fade-slide-leave-to {
opacity: 0;
transform: translateY(20px);
}
.paimin{
position: relative;
top:9px;
margin-top: 10px;
color: #555;
margin-left: 20px;
}
.title{
margin: 20px;
position: relative;
top:9px
}
.title-view{
height: 40px;
position: relative;
justify-content: center;
background-color: white;
}
</style>

@ -1,10 +1,329 @@
<script setup lang="ts">
import { ref } from 'vue'
</script>
<template>
<view>课程答题</view>
<view class="quiz-container">
<!-- 动态渲染题目 -->
<view :key="question.uuid" class="question">
<view >
<image :src="question.pic" mode="aspectFit" class="question-image" />
<!-- 单选题刘东阳 -->
<view v-if="question.tx==='单选题'">
<view class="grid-container">
<view v-for="(item, index) in zm.slice(0,question.xuexiangnum)" :key="index" class="grid-item">
<button
:style="{backgroundColor:dx===item?'blue':''}"
class="choose-button"
@click="dx_one(item)"
>
{{ item }}
</button>
</view>
</view>
</view>
<view v-if="question.tx==='多选题'">
<view class="grid-container">
<view v-for="(item, index) in zm.slice(0,question.xuexiangnum)" :key="index" class="grid-item">
<button
:style="{backgroundColor:moredx.includes(item)?'blue':''}"
class="choose-button"
@click="moredx_one(item)"
>
{{ item }}
</button>
</view>
</view>
</view>
<view v-if="question.tx==='判断题'">
<view class="grid-container-pd" >
<view :key="index" class="grid-item">
<button
:style="{backgroundColor:dx===item?'blue':''}"
class="choose-button"
@click="dx_one(item)"
>
</button>
</view>
<view :key="index" class="grid-item">
</view>
<view :key="index" class="grid-item">
<button
:style="{backgroundColor:dx===item?'blue':''}"
class="choose-button"
@click="dx_one(item)"
>
×
</button>
</view>
</view>
</view>
<!-- 填空题 -->
<input v-if="question.type === 'fill'" v-model="userAnswers[question.id]" placeholder="请输入答案" />
<!-- 单选题 -->
<radio-group v-if="question.type === 'single'" :modelValue="userAnswers[question.id]"
@update:modelValue="handleRadioChange(question.id, $event)">
<label v-for="(option, i) in question.options" :key="i">
<radio :value="option.text[0]" />
<image v-if="option.image" :src="option.image" mode="aspectFit" class="option-image" />
<span v-else>{{ option.text }}</span>
</label>
</radio-group>
<!-- 多选题 -->
<checkbox-group v-if="question.type === 'multiple'" :modelValue="userAnswers[question.id]"
@update:modelValue="handleCheckboxChange(question.id, $event)">
<label v-for="(option, i) in question.options" :key="i">
<checkbox :value="option.text[0]" />
<image v-if="option.image" :src="option.image" mode="aspectFit" class="option-image" />
<span v-else>{{ option.text }}</span>
</label>
</checkbox-group>
<!-- 判断题 -->
<radio-group v-if="question.type === 'true-false'" :modelValue="userAnswers[question.id]"
@update:modelValue="handleRadioChange(question.id, $event)">
<label>
<radio value="true" /> 正确
</label>
<label>
<radio value="false" /> 错误
</label>
</radio-group>
</view>
</view>
<!-- 控制按钮 -->
<view class="controls">
<button @click="prevQuestion"></button>
<button @click="nextQuestion"></button>
<button @click="submitAnswers" type="primary">提交答案</button>
<button @click="resetQuiz"></button>
</view>
<!-- 答案反馈 -->
<view v-if="showResult" class="result">
<text v-for="(res, key) in results" :key="key" :style="{ color: res ? 'green' : 'red' }">
{{ key + 1 }} {{ res ? '✅ 正确' : '❌ 错误' }}
</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const zm=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
const dx=ref('0');
const moredx=ref([])
const question=ref({
uuid: "e87ed72f-cecc-4ebd-9f08-34e24730797f",
px: 7,
kch: "202413501",
tea: "2024101",
title: "填空题APPPEERF",
infor: "{\"pic\":\"http://localhost:89/2024101/c2b9cfd7-1d46-45a5-bb02-ab701ab6aa84.png\",\"tk\":[{\"daan\":\"A\",\"print\":3},{\"daan\":\"B\",\"print\":4}],\"morechoose\":[\"A\"],\"onechoose\":\"A\",\"xuexiangnum\":4,\"zitimu\":[{\"pic\":\"http://localhost:89/tmbefore.png\",\"tk\":[{\"daan\":\"\",\"print\":1}],\"morechoose\":[\"A\"],\"onechoose\":\"A\",\"xuexiangnum\":4,\"title\":\"\"}],\"uuid\":\"e87ed72f-cecc-4ebd-9f08-34e24730797f\",\"tx\":\"填空题\",\"title\":\"填空题APPPEERF\"}",
kctime: "n8z1A1",
pic: "http://localhost:89/2024101/c2b9cfd7-1d46-45a5-bb02-ab701ab6aa84.png",
tk: [
{
daan: "A",
print: 3
},
{
daan: "B",
print: 4
}
],
morechoose: [
"A"
],
onechoose: "A",
xuexiangnum: 10,
zitimu: [
],
tx: "判断题"
})
//
function dx_one(xx:string){
dx.value = xx
}
function moredx_one(xx:string){
if(moredx.value.includes(xx)){
moredx.value = moredx.value.filter(x=>x.value!==xx)
}else {
moredx.value.push(xx)
}
}
const quizData = [
{
id: 1,
type: 'fill',
questionImage: '/static/student-course/bg.png',
answer: '前端界面'
},
{
id: 2,
type: 'single',
questionImage: '/static/student-course/bg.png',
options: [
{ text: 'Vue Router', image: '/static/student-course/bg.png' },
{ text: 'Vuex', image: '/static/student-course/bg.png' },
{ text: 'Axios', image: '/static/student-course/bg.png' },
{ text: 'Vue', image: '/static/student-course/bg.png' }
],
answer: 'C'
},
{
id: 3,
type: 'multiple',
questionImage: '/static/student-course/bg.png',
options: [
{ text: 'ref', image: '/static/student-course/bg.png' },
{ text: 'reactive', image: '/static/student-course/bg.png' },
{ text: 'toRef', image: '/static/student-course/bg.png' },
{ text: 'defineProps', image: '/static/student-course/bg.png' }
],
answer: ['A', 'B', 'C']
},
{
id: 4,
type: 'true-false',
questionImage: '/static/student-course/bg.png',
answer: 'true'
}
]
const activeIndex = ref(0)
const showResult = ref(false)
// ID
const userAnswers = ref<Record<number, any>>({})
const results = ref<boolean[]>([])
function handleRadioChange(id: number, value: string) {
userAnswers.value[id] = value
}
function handleCheckboxChange(id: number, value: string[]) {
userAnswers.value[id] = value
}
function prevQuestion() {
if (activeIndex.value > 0) activeIndex.value--
}
function nextQuestion() {
if (activeIndex.value < quizData.length - 1) activeIndex.value++
}
function resetQuiz() {
userAnswers.value = {}
showResult.value = false
activeIndex.value = 0
}
function submitAnswers() {
const answers = quizData.map((question) => {
const userAnswer = userAnswers.value[question.id]
const correctAnswer = question.answer
//
if (question.type === 'fill') {
return userAnswer === correctAnswer
} else if (question.type === 'single') {
return userAnswer === correctAnswer
} else if (question.type === 'multiple') {
return (
Array.isArray(userAnswer) &&
Array.isArray(correctAnswer) &&
userAnswer.sort().join(',') === correctAnswer.sort().join(',')
)
} else if (question.type === 'true-false') {
return String(userAnswer) === String(correctAnswer)
}
return false
})
results.value = answers
showResult.value = true
}
</script>
<style scoped>
</style>
.controls {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 15px;
/* 控制按钮之间间距 */
flex-wrap: wrap;
}
.controls button {
padding: 12px 34px;
font-size: 16px;
border-radius: 8px;
background-color: #4CAF50;
color: white;
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.controls button:hover {
background-color: #45a049;
transform: translateY(-2px);
}
.controls button:active {
transform: translateY(0);
}
.controls button[type="primary"] {
background-color: #2196F3;
}
.controls button[type="primary"]:hover {
background-color: #1976D2;
}
.question-image{
margin-left: 35px;
}
.grid-container-pd
{
display: flex;
flex-wrap: wrap;
}
.grid-container {
display: flex;
flex-wrap: wrap;
margin-left: 10vw;
}
.grid-item {
width: calc(25% - 10px); /* 每个项目宽度为25%,减去间距 */
margin: 5px; /* 项目之间的间距 */
box-sizing: border-box; /* 确保padding和border不会影响宽度 */
}
.choose-button{
margin-top: 20px;
font-size: 18px;
margin-left: 10px;
font-weight: bold;
height: 18vw;
width: 18vw;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
border-radius: 50%;
}
</style>

@ -156,6 +156,14 @@ const enterinclassactive=(item)=>{
uni.navigateTo({
url: '/pages/checkin/checkin?uuid=' +item.id
});
}else if(item.lxA=='答题'){
uni.navigateTo({
url: '/pages/quiz/quiz?uuid=' +item.id
});
}else if(item.lxA=='抢答'){
uni.navigateTo({
url: '/pages/bussin/bussin?uuid=' +item.id
});
}
}
//

Loading…
Cancel
Save