feat(user): 重构用户端竞赛流程，集成后端API并优化交互体验
- 新增 `activityinfo` store 管理活动信息，支持持久化 - 重构 `competition` store，分离数据层与流程控制，新增音效管理 - 新增游戏API模块 (`game.ts`)，实现抽题、题目详情、提交结果等接口 - 用户端页面全面对接后端数据：首页轮播展示活动列表，组别/队伍页动态加载，封面页显示题目卡片 - 抽题页改为竹签翻转动画，游戏页集成题目详情与倒计时 - 优化布局组件，支持点击返回首页，统一路由参数传递 - 更新类型定义，支持富文本题目渲染 - 添加 `activityinfo` 拼写检查词条
This commit is contained in:
@ -2,12 +2,8 @@
|
||||
import { ref } from 'vue'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { useCompetitionStore } from '@/store/modules/competition'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
const store = useCompetitionStore()
|
||||
|
||||
const zoomedImage = ref<string | null>(null)
|
||||
|
||||
// Mock team data
|
||||
@ -59,20 +55,19 @@ function handleBack() {
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
const nextRoute = store.nextStep()
|
||||
routerPushByKey(nextRoute)
|
||||
routerPushByKey('user_draw')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout
|
||||
:show-title="true"
|
||||
:show-back="true"
|
||||
:show-back="false"
|
||||
:show-next="true"
|
||||
title="答题图解"
|
||||
action-position="top"
|
||||
back-btn-text="返回"
|
||||
next-btn-text="下一题"
|
||||
next-btn-text="继续抽题"
|
||||
btn-theme="light"
|
||||
@back="handleBack"
|
||||
@next="handleNext"
|
||||
@ -84,7 +79,7 @@ function handleNext() {
|
||||
备注：由AI模型评判
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-4 h-full gap-6 pb-8">
|
||||
<div v-if="teams && teams.length > 0" class="grid grid-cols-4 h-full gap-6 pb-8">
|
||||
<div
|
||||
v-for="team in teams" :key="team.id"
|
||||
class="flex flex-col border-2 border-gray-200 rounded-xl bg-white/90 p-4 shadow-sm"
|
||||
|
||||
@ -1,25 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetQuestionList } from '@/service/api/competition'
|
||||
import { useActivityInfoStore } from '@/store/modules/activityinfo'
|
||||
import { AudioController } from '@/utils/audio'
|
||||
import { mockData } from '../data/mock'
|
||||
import { filterRepeat } from '@/utils/data'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const activityInfoStore = useActivityInfoStore()
|
||||
const activityInfo = computed(() => activityInfoStore.activityInfo)
|
||||
|
||||
const { routerPushByKey, routerBack } = useRouterPush()
|
||||
const audioController = new AudioController()
|
||||
|
||||
const activityName = ref('星·辞海遨游')
|
||||
interface QuestionItem {
|
||||
id: number
|
||||
moduleName: string
|
||||
}
|
||||
|
||||
const questions = ref<QuestionItem[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const activityName = computed(() => activityInfo.value?.ActivityTitle || '星·辞海遨游')
|
||||
|
||||
// 记录已翻转的卡片索引
|
||||
const flippedCards = ref<Set<number>>(new Set())
|
||||
|
||||
// 计算是否所有卡片都已翻转 (当前显示4张卡片)
|
||||
const isAllFlipped = computed(() => flippedCards.value.size === 4)
|
||||
const isAllFlipped = computed(() => flippedCards.value.size === questions.value.length)
|
||||
|
||||
// 控制下一步按钮的显示（带延迟）
|
||||
const showNextButton = ref(false)
|
||||
let timer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// 获取路由参数
|
||||
const route = useRoute()
|
||||
const activityId = computed(() => activityInfoStore.activityId || Number(route.query?.activityId))
|
||||
const groupsId = computed(() => Number(route.query?.groupsId)) || activityInfoStore.groupId
|
||||
const teamId = computed(() => activityInfoStore.teamId || Number(route.query?.teamId))
|
||||
|
||||
async function getQuestions() {
|
||||
if (!activityId.value || !groupsId.value || !teamId.value) {
|
||||
window?.$message?.error('参数错误')
|
||||
return
|
||||
}
|
||||
|
||||
// 存 activityId,groupsId,teamId
|
||||
activityInfoStore.setActivityId(activityId.value)
|
||||
activityInfoStore.setGroupId(groupsId.value)
|
||||
activityInfoStore.setTeamId(teamId.value)
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const { data, error } = await fetchGetQuestionList(String(activityId.value))
|
||||
if (error) {
|
||||
window?.$message?.error(error.message)
|
||||
return
|
||||
}
|
||||
|
||||
const list = data?.data || []
|
||||
if (list && Array.isArray(list)) {
|
||||
// 根据ActitvityQuestionName去重
|
||||
const uniqueData = filterRepeat(list as any[], 'ActitvityQuestionName')
|
||||
questions.value = uniqueData.map((item: any) => ({
|
||||
id: item.Id,
|
||||
moduleName: item.ActitvityQuestionName,
|
||||
}))
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(isAllFlipped, (val) => {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
@ -37,11 +91,11 @@ watch(isAllFlipped, (val) => {
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_teams')
|
||||
routerBack()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
routerPushByKey('user_rules')
|
||||
routerPushByKey('user_rules', { query: { activityId: activityId.value, groupsId: groupsId.value, teamId: teamId.value } })
|
||||
}
|
||||
|
||||
function toggleFlip(index: number) {
|
||||
@ -53,19 +107,24 @@ function toggleFlip(index: number) {
|
||||
audioController.play('flip') // 播放翻牌音效
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getQuestions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout :show-back="true" :show-next="showNextButton" :title="activityName" @back="handleBack" @next="handleNext">
|
||||
<CompetitionLayout
|
||||
:show-back="true" :show-next="showNextButton" :title="activityName" @back="handleBack"
|
||||
@next="handleNext"
|
||||
>
|
||||
<div class="h-screen w-full overflow-hidden font-sans">
|
||||
<div class="relative z-10 h-full w-full">
|
||||
<div class="h-full w-full flex flex-col items-center pt-24">
|
||||
<!-- 卡片列表 -->
|
||||
<div class="perspective-container grid grid-cols-4 max-w-7xl w-full gap-10 px-12">
|
||||
<div
|
||||
v-for="(node, index) in mockData.nodes.slice(0, 4)"
|
||||
:key="node.nodeId"
|
||||
class="card-wrapper"
|
||||
v-for="(node, index) in questions.slice(0, 4)" :key="node.id" class="card-wrapper"
|
||||
@click="toggleFlip(index)"
|
||||
>
|
||||
<div class="flip-card-inner" :class="{ 'is-flipped': flippedCards.has(index) }">
|
||||
@ -82,12 +141,14 @@ function toggleFlip(index: number) {
|
||||
<!-- 内部装饰圈 -->
|
||||
<div class="inner-circle-decoration">
|
||||
<!-- 文字内容 -->
|
||||
<!-- <div class="relative z-10 transform text-center">
|
||||
<div class="card-text text-3xl text-[#5d4037] font-bold leading-tight font-serif drop-shadow-sm">
|
||||
<div class="relative z-10 transform text-center">
|
||||
<div
|
||||
class="card-text text-2xl text-[#333333] font-bold leading-tight font-serif drop-shadow-sm"
|
||||
>
|
||||
<span class="block">{{ node.moduleName.slice(0, 2) }}</span>
|
||||
<span class="block">{{ node.moduleName.slice(2) }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -259,10 +320,12 @@ function toggleFlip(index: number) {
|
||||
left: -150%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
10% {
|
||||
// 刚进入时瞬间变亮
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
100% {
|
||||
// 扫出视野
|
||||
top: 50%;
|
||||
@ -275,6 +338,7 @@ function toggleFlip(index: number) {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
@ -1,41 +1,216 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetQuestionOutline } from '@/service/api/game'
|
||||
import { useActivityInfoStore } from '@/store/modules/activityinfo'
|
||||
import { useCompetitionStore } from '@/store/modules/competition'
|
||||
import { AudioController } from '@/utils/audio'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const { routerPushByKey, routerBack } = useRouterPush()
|
||||
|
||||
// 获取路由参数
|
||||
const route = useRoute()
|
||||
const activityInfoStore = useActivityInfoStore()
|
||||
const activityId = computed(() => activityInfoStore.activityId || route.query?.activityId as string)
|
||||
|
||||
const store = useCompetitionStore()
|
||||
|
||||
const currentNode = computed(() => store.currentNode)
|
||||
function handleDraw() {
|
||||
routerPushByKey('user_game')
|
||||
const loading = ref(false)
|
||||
const question = ref<Api.Competition.QuestionListRecord | null>(null)
|
||||
const flippedId = ref<number | null>(null)
|
||||
const audioController = new AudioController()
|
||||
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const pageDescription = computed(() => {
|
||||
if (question.value) {
|
||||
return question.value.QuestionSubTitle || ''
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
async function initQuestions() {
|
||||
if (!activityId.value)
|
||||
return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const { data: outlineData, error } = await fetchGetQuestionOutline(Number(activityId.value), 0)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(outlineData, 'outlineData')
|
||||
if (error) {
|
||||
window?.$message?.error(error.message)
|
||||
return
|
||||
}
|
||||
|
||||
// 直接使用返回的对象数据，不进行数组转换
|
||||
if (outlineData && outlineData.data) {
|
||||
question.value = outlineData.data as unknown as Api.Competition.QuestionListRecord
|
||||
store.setQuestionList([question.value]) // Store expects array, so wrap it
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
window.$message?.error('获取题目失败，请重试')
|
||||
console.error(error)
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initQuestions()
|
||||
})
|
||||
|
||||
async function handleCardClick(item: Api.Competition.QuestionListRecord) {
|
||||
if (flippedId.value)
|
||||
return // 防止重复点击
|
||||
|
||||
try {
|
||||
// 1. 播放翻牌音效 (忽略音频错误)
|
||||
try {
|
||||
audioController.play('flip')
|
||||
}
|
||||
catch (e) {
|
||||
console.error('Audio play failed', e)
|
||||
}
|
||||
|
||||
// 2. 触发翻转动画
|
||||
flippedId.value = item.ID
|
||||
|
||||
// 3. 延迟1s后跳转
|
||||
setTimeout(() => {
|
||||
try {
|
||||
store.setCurrentQuestionInfo(item)
|
||||
routerPushByKey('user_game')
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Navigation failed', error)
|
||||
flippedId.value = null // 跳转失败则重置状态
|
||||
window.$message?.error('跳转失败，请重试')
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error)
|
||||
flippedId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_cover')
|
||||
routerBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout :show-back="true" :show-next="false" :title="currentNode?.moduleName || '抽题'" @back="handleBack">
|
||||
<CompetitionLayout :show-back="true" :show-next="false" :title="question?.ActitvityQuestionName || '抽题'" @back="handleBack">
|
||||
<div class="h-full w-full flex flex-col items-center pt-10 font-sans">
|
||||
<div v-if="currentNode" class="mb-20 max-w-4xl text-center">
|
||||
<div v-if="question" class="mb-10 max-w-4xl text-center">
|
||||
<div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">
|
||||
{{ currentNode.description }}
|
||||
{{ question?.ActitvityQuestionName || '' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 抽题按钮 (大圆形) -->
|
||||
<div class="group relative">
|
||||
<button
|
||||
class="h-64 w-64 flex flex-col items-center justify-center border-4 border-blue-400 rounded-full bg-gray-200/80 text-3xl text-gray-700 font-bold shadow-xl transition-all active:scale-95 hover:scale-105"
|
||||
@click="handleDraw"
|
||||
>
|
||||
<span>抽题</span>
|
||||
</button>
|
||||
<!-- 题目卡片列表 -->
|
||||
<div v-if="loading" class="text-xl text-gray-500">
|
||||
加载中...
|
||||
</div>
|
||||
<div v-else class="w-full flex flex-1 items-center justify-center pb-10">
|
||||
<div v-if="question" class="lottery-stick-container">
|
||||
<div
|
||||
class="lottery-stick"
|
||||
:class="{ 'is-selected': flippedId === question.ID }"
|
||||
@click="handleCardClick(question)"
|
||||
>
|
||||
<!-- 签身 (默认显示) -->
|
||||
<div class="stick-face stick-body">
|
||||
<div class="stick-top-mark" />
|
||||
<div class="writing-mode-vertical-rl h-full flex items-center justify-center text-xl text-yellow-900 font-bold tracking-widest opacity-80">
|
||||
抽 题
|
||||
</div>
|
||||
</div>
|
||||
<!-- 签面 (翻转后显示 - 实际上是放大显示的) -->
|
||||
<div class="stick-face stick-content">
|
||||
<span class="writing-mode-vertical-rl text-2xl text-red-600 font-bold">{{ question.ActitvityQuestionName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!loading && !question" class="text-xl text-gray-400">
|
||||
暂无题目
|
||||
</div>
|
||||
</div>
|
||||
</CompetitionLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.lottery-stick-container {
|
||||
width: 50px;
|
||||
height: 240px;
|
||||
perspective: 1000px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.lottery-stick-container:hover {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.lottery-stick {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.stick-face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 竹签样式 */
|
||||
.stick-body {
|
||||
background: linear-gradient(to right, #e6cba5, #d4b081, #c69c6d);
|
||||
border: 1px solid #b08d55;
|
||||
}
|
||||
|
||||
.stick-top-mark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #ef4444; /* red-500 */
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 翻转后的内容面 - 做成类似令牌的样子 */
|
||||
.stick-content {
|
||||
background: linear-gradient(to bottom, #fff9f0, #fff);
|
||||
border: 2px solid #b08d55;
|
||||
transform: rotateY(180deg);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 选中（抽出）动画状态 */
|
||||
.lottery-stick.is-selected {
|
||||
transform: translateY(-100px) scale(2) rotateY(180deg);
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* 竖排文字 */
|
||||
.writing-mode-vertical-rl {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,59 @@
|
||||
<!-- eslint-disable no-console -->
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetGameStatistics, fetchGetQuestionDetail, fetchSubmitQuestionResult } from '@/service/api/game'
|
||||
import { useActivityInfoStore } from '@/store/modules/activityinfo'
|
||||
import { useCompetitionStore } from '@/store/modules/competition'
|
||||
// import { uiTemplatesMapping } from '@/views/user/data/mock'
|
||||
import QuestionRenderer from '../modules/QuestionRenderer.vue'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
const store = useCompetitionStore()
|
||||
const activityInfoStore = useActivityInfoStore()
|
||||
const { activityId, groupId, activityInfo } = storeToRefs(activityInfoStore)
|
||||
const currentQuestionInfo = computed(() => store.currentQuestionInfo)
|
||||
const currentQuestionDetail = computed(() => store.currentQuestionDetail)
|
||||
const loading = ref(false)
|
||||
|
||||
// 本地倒计时控制（为了在页面上显示“开始答题”还是倒计时）
|
||||
const isStarted = ref(false)
|
||||
|
||||
const currentNode = computed(() => store.currentNode)
|
||||
const currentQuestion = computed(() => store.currentQuestion)
|
||||
const timeLeft = computed(() => store.timeLeft)
|
||||
console.log(activityInfo.value, 'activityInfo.value')
|
||||
console.log(currentQuestionInfo.value, 'currentQuestionInfo.value')
|
||||
console.log(currentQuestionDetail.value, 'currentQuestionDetail.value')
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchGetQuestionDetailData()
|
||||
})
|
||||
|
||||
// 监听倒计时，结束时自动跳转
|
||||
watch(() => store.timeLeft, (newVal) => {
|
||||
if (newVal === 0 && isStarted.value) {
|
||||
store.stopTimer()
|
||||
routerPushByKey('user_analysis')
|
||||
}
|
||||
})
|
||||
|
||||
// 优先使用 store 中的 API 数据，否则回退到 Mock 数据
|
||||
const template = computed(() => store.currentQuestionInfo?.UIType)
|
||||
const content = computed(() => {
|
||||
if (store.currentQuestionDetail) {
|
||||
const { Name, ImageUrl } = store.currentQuestionDetail
|
||||
return {
|
||||
title: Name,
|
||||
titleImage: ImageUrl,
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const formattedTime = computed(() => {
|
||||
const m = Math.floor(timeLeft.value / 60)
|
||||
const s = timeLeft.value % 60
|
||||
const time = store.timeLeft
|
||||
const m = Math.floor(time / 60)
|
||||
const s = time % 60
|
||||
const mm = m < 10 ? `0${m}` : m
|
||||
const ss = s < 10 ? `0${s}` : s
|
||||
return `倒计时 ${mm}:${ss}`
|
||||
@ -38,45 +72,94 @@ function handleBack() {
|
||||
routerPushByKey('user_draw')
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
/**
|
||||
* 获取题目详情
|
||||
*/
|
||||
async function fetchGetQuestionDetailData() {
|
||||
if (store.currentQuestionInfo) {
|
||||
loading.value = true
|
||||
try {
|
||||
const currentActivityId = String(activityId.value || '')
|
||||
const questionId = store.currentQuestionInfo.QuestionID || (store.currentQuestionInfo as any).Id
|
||||
const { data: detailData } = await fetchGetQuestionDetail(currentActivityId, questionId)
|
||||
console.log(detailData, 'detailData')
|
||||
if (detailData && detailData.data) {
|
||||
store.setCurrentQuestionDetail(detailData.data)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch question detail', error)
|
||||
window.$message?.error('获取题目详情失败')
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleNext() {
|
||||
// 点击开始答题
|
||||
if (!isStarted.value) {
|
||||
// 点击开始答题
|
||||
isStarted.value = true
|
||||
store.startTimer()
|
||||
store.startTimer(store.currentQuestionInfo?.QuestionTime || 10)
|
||||
|
||||
// 提交题目使用记录
|
||||
try {
|
||||
if (store.currentQuestionInfo && store.currentQuestionDetail) {
|
||||
const params: Api.Competition.QuestionAddParams = {
|
||||
RoomID: activityInfo.value?.RoomID || 0,
|
||||
MainID: activityId.value || 0,
|
||||
TeamGroupID: groupId.value || 0,
|
||||
QuestionID: store.currentQuestionInfo.ID, // 使用列表中的 ID
|
||||
QuestionDetaiID: store.currentQuestionDetail.Id || 0, // 详情 ID
|
||||
}
|
||||
console.log(params, 'params')
|
||||
await fetchSubmitQuestionResult(params)
|
||||
await fetchGetGameStatisticsData(params)
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to submit question result', error)
|
||||
// 不阻塞流程，仅记录错误
|
||||
}
|
||||
}
|
||||
else {
|
||||
// 答题中，点击直接进入下一页（或者也可以设计为暂停等，这里按原逻辑是直接跳过）
|
||||
// 备用逻辑：如果已经在答题中（理论上不会触发，因为上面已经跳转），直接跳转
|
||||
store.stopTimer()
|
||||
routerPushByKey('user_analysis')
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取游戏现场统计结果 */
|
||||
async function fetchGetGameStatisticsData(_params: Api.Competition.QuestionAddParams) {
|
||||
if (store.currentQuestionInfo && store.currentQuestionDetail) {
|
||||
try {
|
||||
const { data } = await fetchGetGameStatistics(_params)
|
||||
console.log(data, 'data')
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch game statistics', error)
|
||||
window.$message?.error('获取游戏现场统计结果失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout
|
||||
action-position="top"
|
||||
:show-back="true"
|
||||
:show-next="true"
|
||||
:title="currentNode?.moduleName || ''"
|
||||
back-btn-text="返回"
|
||||
:next-btn-text="isStarted ? formattedTime : '开始答题'"
|
||||
:next-disabled="isStarted"
|
||||
btn-theme="light"
|
||||
@back="handleBack"
|
||||
action-position="top" :show-back="false" :show-next="true"
|
||||
:title="store.currentQuestionInfo?.ActitvityQuestionName || ''" back-btn-text="返回"
|
||||
:next-btn-text="isStarted ? formattedTime : '开始答题'" :next-disabled="false" btn-theme="light" @back="handleBack"
|
||||
@next="handleNext"
|
||||
>
|
||||
<div class="relative h-full w-full flex flex-col items-center px-12 font-sans">
|
||||
<div class="relative h-full w-full flex flex-col items-center overflow-hidden px-12 font-sans">
|
||||
<!-- 题目说明 -->
|
||||
<!-- <div v-if="currentNode" class="m-2 text-2xl text-gray-800 font-medium">
|
||||
{{ currentNode.description }}
|
||||
</div> -->
|
||||
|
||||
<!-- <p>{{ store.currentQuestionInfo.ActitvityQuestionName }}</p> -->
|
||||
<!-- 题目内容区域 -->
|
||||
<div v-if="currentNode && currentQuestion" class="flex-2 mb-4 mt-12 w-full flex items-center justify-center">
|
||||
<QuestionRenderer
|
||||
:template="currentNode.uiTemplate" :content="currentQuestion.content"
|
||||
class="origin-center scale-150 transform"
|
||||
/>
|
||||
<div v-if="template && content" class="w-full flex flex-1 items-center justify-center overflow-hidden py-4">
|
||||
<div class="max-h-full max-w-full flex items-center justify-center">
|
||||
<QuestionRenderer :template="template" :content="content" class="origin-center scale-150 transform" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的 Next 按钮 (方便演示：右上角小区域) -->
|
||||
@ -90,7 +173,7 @@ function handleNext() {
|
||||
|
||||
<!-- 底部图表区域 -->
|
||||
<div
|
||||
class="relative z-20 h-64 max-w-5xl w-full flex flex-col border-2 border-blue-300 rounded-xl bg-white/90 p-4 shadow-lg backdrop-blur"
|
||||
class="relative z-20 h-64 max-w-5xl w-full flex flex-col shrink-0 border-2 border-blue-300 rounded-xl bg-white/90 p-4 shadow-lg backdrop-blur"
|
||||
>
|
||||
<!-- 图表标题栏 -->
|
||||
<div class="mb-4 flex items-center justify-between px-2">
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetGroupList } from '@/service/api/competition'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const { routerPushByKey, routerBack } = useRouterPush()
|
||||
const route = useRoute()
|
||||
|
||||
interface GroupItem {
|
||||
id: number
|
||||
@ -11,23 +14,40 @@ interface GroupItem {
|
||||
icon: string
|
||||
}
|
||||
|
||||
const groups = ref<GroupItem[]>([
|
||||
{ id: 1, name: '初赛一组', icon: 'activity' },
|
||||
{ id: 2, name: '初赛七组', icon: 'cast' },
|
||||
{ id: 3, name: '初赛八组', icon: 'chrome' },
|
||||
{ id: 4, name: '初赛九组', icon: 'heart' },
|
||||
{ id: 5, name: '初赛十组', icon: 'activity' },
|
||||
{ id: 6, name: '初赛六组', icon: 'cast' },
|
||||
{ id: 7, name: '初赛七组', icon: 'chrome' },
|
||||
{ id: 8, name: '初赛八组', icon: 'heart' },
|
||||
{ id: 9, name: '初赛九组', icon: 'activity' },
|
||||
{ id: 10, name: '初赛十组', icon: 'cast' },
|
||||
])
|
||||
const groups = ref<GroupItem[]>([])
|
||||
const loading = ref(false)
|
||||
const activityId = route.query.activityId as string
|
||||
|
||||
async function getGroups() {
|
||||
if (!activityId)
|
||||
return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const { data, error } = await fetchGetGroupList(activityId)
|
||||
if (error) {
|
||||
window?.$message?.error(error.message)
|
||||
return
|
||||
}
|
||||
|
||||
const list = data?.data || []
|
||||
if (list && Array.isArray(list)) {
|
||||
groups.value = list.map((item: any) => ({
|
||||
id: item.Id,
|
||||
name: item.Name,
|
||||
icon: 'activity', // Default icon since API might not provide one
|
||||
}))
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showContent = ref(false)
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_home')
|
||||
routerBack()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
@ -36,12 +56,13 @@ function handleNext() {
|
||||
|
||||
function selectGroup(_id: number) {
|
||||
// 选择组别逻辑
|
||||
routerPushByKey('user_teams', { query: { id: _id.toString() } })
|
||||
routerPushByKey('user_teams', { query: { activityId, groupsId: _id } })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
showContent.value = true
|
||||
getGroups()
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,27 +1,63 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { NCarousel } from 'naive-ui'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetActivityList } from '@/service/api/competition'
|
||||
import { useActivityInfoStore } from '@/store/modules/activityinfo'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const activityInfoStore = useActivityInfoStore()
|
||||
|
||||
interface EventItem {
|
||||
interface ActivityEvent extends Api.Competition.ActivityDetail {
|
||||
id: number
|
||||
title: string
|
||||
subTitle?: string
|
||||
icon: string
|
||||
status: 'active' | 'pending' | 'finished'
|
||||
status: string
|
||||
}
|
||||
|
||||
const events = ref<EventItem[]>([
|
||||
{ id: 1, title: '第九届阅读之星', subTitle: '第一轮', icon: 'activity', status: 'active' },
|
||||
{ id: 2, title: '第九届阅读之星', subTitle: '第二轮', icon: 'cast', status: 'pending' },
|
||||
{ id: 3, title: '第一届', subTitle: '星际知识大赛', icon: 'chrome', status: 'active' },
|
||||
{ id: 4, title: '第九届友谊赛', subTitle: '', icon: 'heart', status: 'finished' },
|
||||
])
|
||||
const events = ref<ActivityEvent[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
function handleEnter(id: number) {
|
||||
routerPushByKey('user_groups', { query: { id: id.toString() } })
|
||||
async function getEvents() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { data, error } = await fetchGetActivityList()
|
||||
if (error) {
|
||||
window.$message?.error(error.message)
|
||||
return
|
||||
}
|
||||
|
||||
const list = data?.data || []
|
||||
if (list && Array.isArray(list)) {
|
||||
events.value = list.map((item: any) => ({
|
||||
...item,
|
||||
id: item.Id,
|
||||
title: item.Name,
|
||||
subTitle: item.Description,
|
||||
icon: 'activity',
|
||||
status: 'active',
|
||||
}))
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Group events into chunks of 4 for the carousel
|
||||
const eventChunks = computed(() => {
|
||||
const result = []
|
||||
for (let i = 0; i < events.value.length; i += 4) {
|
||||
result.push(events.value.slice(i, i + 4))
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
function handleEnter(item: ActivityEvent) {
|
||||
activityInfoStore.setActivityInfo(item)
|
||||
routerPushByKey('user_groups', { query: { activityId: item.Id } })
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
@ -37,45 +73,58 @@ const showContent = ref(false)
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
showContent.value = true
|
||||
getEvents()
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout
|
||||
:show-back="false"
|
||||
:show-next="false"
|
||||
title="赛事总览"
|
||||
action-position="top"
|
||||
back-btn-text="返回"
|
||||
btn-theme="light"
|
||||
@back="handleBack"
|
||||
@next="handleNext"
|
||||
:show-back="false" :show-next="false" title="赛事总览" action-position="top" back-btn-text="返回"
|
||||
btn-theme="light" @back="handleBack" @next="handleNext"
|
||||
>
|
||||
<!-- Cards Section -->
|
||||
<div class="cards-container">
|
||||
<TransitionGroup name="list-anim" tag="div" class="cards-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in events" v-show="showContent" :key="item.id" class="event-card"
|
||||
:style="{ '--delay': `${index * 0.1}s` }" @click="handleEnter(item.id)"
|
||||
>
|
||||
<div class="card-top-bar" />
|
||||
<div class="card-body">
|
||||
<div class="icon-wrapper">
|
||||
<SvgIcon :local-icon="item.icon" class="event-icon" />
|
||||
</div>
|
||||
<div class="text-content">
|
||||
<h3 class="event-title">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p v-if="item.subTitle" class="event-subtitle">
|
||||
{{ item.subTitle }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="loading" class="h-full w-full flex-center">
|
||||
<div class="i-svg-spinners-90-ring-with-bg text-4xl text-primary" />
|
||||
</div>
|
||||
<NCarousel v-else-if="events.length > 0" show-arrow draggable dot-placement="bottom" class="group h-full">
|
||||
<template #arrow="{ prev, next }">
|
||||
<div class="custom-arrow left" @click="prev">
|
||||
<icon-ic-round-arrow-back class="text-4xl text-icon text-white" />
|
||||
</div>
|
||||
<div class="tassel" />
|
||||
<div class="custom-arrow right" @click="next">
|
||||
<icon-ic-round-arrow-forward class="text-4xl text-icon text-white" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-for="(chunk, chunkIndex) in eventChunks" :key="chunkIndex" class="cards-wrapper">
|
||||
<TransitionGroup name="list-anim">
|
||||
<div
|
||||
v-for="(item, index) in chunk" v-show="showContent" :key="item.id" class="event-card"
|
||||
:style="{ '--delay': `${index * 0.1}s` }" @click="handleEnter(item)"
|
||||
>
|
||||
<div class="card-top-bar" />
|
||||
<div class="card-body">
|
||||
<div class="icon-wrapper">
|
||||
<SvgIcon :local-icon="item.icon" class="event-icon" />
|
||||
</div>
|
||||
<div class="text-content">
|
||||
<h3 class="event-title">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p v-if="item.subTitle" class="event-subtitle">
|
||||
{{ item.subTitle }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tassel" />
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</NCarousel>
|
||||
<div v-else class="h-full w-full flex-center text-gray-500">
|
||||
暂无赛事数据
|
||||
</div>
|
||||
</div>
|
||||
</CompetitionLayout>
|
||||
</template>
|
||||
@ -237,4 +286,40 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: rgba($primary-color, 0.6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0; // 默认隐藏
|
||||
|
||||
&:hover {
|
||||
background-color: $primary-color;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标悬停在轮播图区域时显示箭头
|
||||
:deep(.n-carousel:hover) .custom-arrow,
|
||||
.group:hover .custom-arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityNode } from '../types'
|
||||
|
||||
defineProps<{
|
||||
title: string
|
||||
nodes: ActivityNode[]
|
||||
}>()
|
||||
|
||||
defineEmits(['start'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex flex-col items-center pt-24">
|
||||
<!-- 标题卷轴 -->
|
||||
<div class="relative mb-20">
|
||||
<!-- 卷轴主体 -->
|
||||
<div class="relative z-10 h-24 min-w-[400px] flex items-center justify-center border-2 border-orange-200 rounded-lg from-orange-100 to-orange-50 bg-gradient-to-b px-12 shadow-lg">
|
||||
<div class="absolute top-1/2 h-28 w-8 border-r-4 border-yellow-600 rounded-l-md bg-teal-700 shadow-md -left-4 -translate-y-1/2">
|
||||
<!-- 卷轴轴头 -->
|
||||
<div class="absolute left-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
<div class="absolute bottom-2 left-1 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
</div>
|
||||
<div class="absolute top-1/2 h-28 w-8 border-l-4 border-yellow-600 rounded-r-md bg-teal-700 shadow-md -right-4 -translate-y-1/2">
|
||||
<!-- 卷轴轴头 -->
|
||||
<div class="absolute right-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
<div class="absolute bottom-2 right-1 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
</div>
|
||||
|
||||
<!-- 飘带装饰 -->
|
||||
<div class="absolute h-12 w-24 rotate-12 transform rounded-full bg-green-200/50 blur-xl -right-12 -top-6 -z-10" />
|
||||
<div class="absolute h-12 w-24 transform rounded-full bg-green-200/50 blur-xl -bottom-6 -left-12 -z-10 -rotate-12" />
|
||||
|
||||
<h1 class="text-4xl text-gray-800 font-bold tracking-widest font-serif">
|
||||
{{ title }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片列表 -->
|
||||
<div class="grid grid-cols-4 max-w-7xl w-full gap-8 px-12">
|
||||
<div
|
||||
v-for="(node) in nodes.slice(0, 4)"
|
||||
:key="node.nodeId"
|
||||
class="group relative cursor-default"
|
||||
>
|
||||
<!-- 卡片背景 (仿古风) -->
|
||||
<div class="relative aspect-[3/4] w-full flex flex-col items-center justify-center overflow-hidden border-4 border-orange-200 rounded-2xl bg-orange-50/80 shadow-lg transition-transform hover:-translate-y-2">
|
||||
<!-- 内部装饰圈 -->
|
||||
<div class="absolute inset-4 flex items-center justify-center border-2 border-orange-300/50 rounded-xl border-dashed">
|
||||
<!-- 云纹装饰 (CSS模拟) -->
|
||||
<div class="absolute h-12 w-12 rounded-full bg-teal-100/30 blur-md -left-4 -top-4" />
|
||||
<div class="absolute h-12 w-12 rounded-full bg-teal-100/30 blur-md -bottom-4 -right-4" />
|
||||
</div>
|
||||
|
||||
<!-- 文字内容 -->
|
||||
<div class="relative z-10 transform text-center -rotate-2">
|
||||
<div class="text-3xl text-gray-800 font-bold leading-tight font-serif drop-shadow-sm">
|
||||
<!-- 强制换行处理，每两个字换行或根据长度 -->
|
||||
<span class="block">{{ node.moduleName.slice(0, 2) }}</span>
|
||||
<span class="block">{{ node.moduleName.slice(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 准备开始按钮 -->
|
||||
<div class="fixed bottom-12 right-12">
|
||||
<button
|
||||
class="border-2 border-red-200 rounded-full from-red-400 to-red-500 bg-gradient-to-r px-10 py-3 text-xl text-white font-bold shadow-lg transition active:scale-95 hover:from-red-500 hover:to-red-600"
|
||||
@click="$emit('start')"
|
||||
>
|
||||
准备开始
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些古风字体或特定样式 */
|
||||
</style>
|
||||
@ -1,148 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityNode, Question } from '../types'
|
||||
import { computed } from 'vue'
|
||||
import { uiTemplatesMapping } from '../data/mock'
|
||||
import QuestionRenderer from './QuestionRenderer.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
node: ActivityNode
|
||||
question: Question
|
||||
subStep: number
|
||||
timeLeft: number
|
||||
}>()
|
||||
|
||||
defineEmits(['back', 'next'])
|
||||
|
||||
const formattedTime = computed(() => {
|
||||
const m = Math.floor(props.timeLeft / 60)
|
||||
const s = props.timeLeft % 60
|
||||
return `${m}:${s < 10 ? `0${s}` : s}`
|
||||
})
|
||||
|
||||
// Mock chart data
|
||||
const chartData = [
|
||||
{ group: '第一组', total: 42, correct: 36 },
|
||||
{ group: '第二组', total: 20, correct: 16 },
|
||||
{ group: '第三组', total: 19, correct: 19 },
|
||||
{ group: '第四组', total: 17, correct: 14 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative h-full w-full flex flex-col items-center px-12 pt-28">
|
||||
<!-- 顶部栏 -->
|
||||
<div class="relative z-10 mb-8 w-full flex items-center justify-between">
|
||||
<!-- 返回按钮 -->
|
||||
<button
|
||||
class="border-2 border-red-400 rounded-full bg-white px-8 py-2 text-lg text-red-500 font-bold shadow-md transition hover:bg-red-50"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
返回
|
||||
</button>
|
||||
|
||||
<!-- 标题卷轴 -->
|
||||
<div class="absolute left-1/2 top-0 -translate-x-1/2">
|
||||
<div
|
||||
class="relative h-20 min-w-[300px] flex items-center justify-center border-2 border-orange-200 rounded-lg from-orange-100 to-orange-50 bg-gradient-to-b px-12 shadow-lg"
|
||||
>
|
||||
<div
|
||||
class="absolute top-1/2 h-24 w-6 border-r-4 border-yellow-600 rounded-l-md bg-teal-700 shadow-md -left-3 -translate-y-1/2"
|
||||
>
|
||||
<div class="absolute left-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
<div class="absolute bottom-2 left-1 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-1/2 h-24 w-6 border-l-4 border-yellow-600 rounded-r-md bg-teal-700 shadow-md -right-3 -translate-y-1/2"
|
||||
>
|
||||
<div class="absolute right-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
<div class="absolute bottom-2 right-1 h-2 w-full rounded-full bg-teal-600/50" />
|
||||
</div>
|
||||
<h1 class="text-3xl text-gray-800 font-bold tracking-widest font-serif">
|
||||
{{ node.moduleName }}
|
||||
<span class="text-sm text-red-500 font-bold">（{{ uiTemplatesMapping[node.uiTemplate] }}）</span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 倒计时 -->
|
||||
<div class="border-2 border-red-400 rounded-full bg-white px-6 py-2 shadow-md">
|
||||
<span class="text-xl text-red-500 font-bold">倒计时 {{ formattedTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 题目说明 -->
|
||||
<div class="m-14 text-2xl text-gray-800 font-medium">
|
||||
{{ node.description }}
|
||||
</div>
|
||||
|
||||
<!-- 题目内容区域 -->
|
||||
<div class="flex-2 mb-4 w-full flex items-center justify-center">
|
||||
<QuestionRenderer
|
||||
:template="node.uiTemplate" :content="question.content"
|
||||
class="origin-center scale-150 transform"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 隐藏的 Next 按钮 (点击题目区域或键盘操作，这里为了演示保留一个透明层或仅通过逻辑触发，或者暂时放一个不易察觉的按钮用于测试) -->
|
||||
<div class="absolute inset-0 z-0" @click="$emit('next')" /> <!-- 点击背景切换下一题，方便演示 -->
|
||||
|
||||
<!-- 底部图表区域 -->
|
||||
<div
|
||||
class="relative z-20 mb-8 h-64 max-w-5xl w-full flex flex-col border-2 border-blue-300 rounded-xl bg-white/90 p-4 shadow-lg backdrop-blur"
|
||||
>
|
||||
<!-- 图表标题栏 -->
|
||||
<div class="mb-4 flex items-center justify-between px-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-3 w-3 rotate-45 bg-orange-400" />
|
||||
<span class="text-lg text-blue-800 font-bold">答题进度</span>
|
||||
</div>
|
||||
<div class="flex gap-6 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-3 w-3 rounded-full bg-blue-400" />
|
||||
<span class="text-gray-600">答题数量</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="h-3 w-3 rounded-full bg-orange-300" />
|
||||
<span class="text-gray-600">正确数量</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图 -->
|
||||
<div class="flex flex-1 items-end justify-around px-8 pb-2">
|
||||
<div v-for="item in chartData" :key="item.group" class="w-16 flex flex-col items-center gap-2">
|
||||
<div class="h-32 flex items-end gap-2">
|
||||
<!-- Blue Bar -->
|
||||
<div
|
||||
class="relative w-6 rounded-t-md from-blue-500 to-blue-300 bg-gradient-to-t transition-all duration-1000"
|
||||
:style="{ height: `${item.total * 2}px` }"
|
||||
>
|
||||
<span class="absolute left-1/2 text-blue-800 font-bold -top-6 -translate-x-1/2">{{ item.total }}</span>
|
||||
</div>
|
||||
<!-- Orange Bar -->
|
||||
<div
|
||||
class="relative w-6 rounded-t-md from-orange-400 to-orange-200 bg-gradient-to-t transition-all duration-1000"
|
||||
:style="{ height: `${item.correct * 2}px` }"
|
||||
>
|
||||
<span class="absolute left-1/2 text-orange-600 font-bold -top-6 -translate-x-1/2">{{ item.correct
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-blue-800 font-bold">
|
||||
{{ item.group }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Question Renderer Override if needed */
|
||||
:deep(.question-content) {
|
||||
font-size: 4rem;
|
||||
color: #ef4444;
|
||||
/* red-500 */
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { ActivityNode } from '../types'
|
||||
|
||||
defineProps<{ node: ActivityNode }>()
|
||||
defineEmits(['back', 'draw'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full w-full flex flex-col items-center pt-44">
|
||||
<div class="mb-20 max-w-4xl text-center">
|
||||
<div class="text-2xl text-gray-800 font-medium leading-relaxed tracking-wide">
|
||||
{{ node.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 抽题按钮 (大圆形) -->
|
||||
<div class="group relative">
|
||||
<button
|
||||
class="h-64 w-64 flex flex-col items-center justify-center border-4 border-blue-400 rounded-full bg-gray-200/80 text-3xl text-gray-700 font-bold shadow-xl transition-all active:scale-95 hover:scale-105"
|
||||
@click="$emit('draw')"
|
||||
>
|
||||
<span>抽题</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -9,7 +9,11 @@ const props = defineProps<{
|
||||
|
||||
const pinyinChars = computed(() => {
|
||||
if (props.template === 'TEMPLATE_WORD_DICTATION' && props.content.title) {
|
||||
return props.content.title.split(' ')
|
||||
// 创建临时元素提取HTML文本内容
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = props.content.title
|
||||
const text = div.textContent || ''
|
||||
return text.trim().split(/\s+/).filter(Boolean)
|
||||
}
|
||||
return []
|
||||
})
|
||||
@ -19,8 +23,12 @@ const pinyinChars = computed(() => {
|
||||
<div class="min-h-[400px] w-full flex items-center justify-center p-6">
|
||||
<!-- 模板A: 汉字听写-提示 (拼音+提示) -->
|
||||
<div v-if="template === 'TEMPLATE_DICTATION_HINT'" class="text-center">
|
||||
<div class="mb-6 inline-block text-5xl text-red-500 font-bold leading-none" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
|
||||
“{{ content.title }}”
|
||||
<div
|
||||
class="mb-6 inline-block text-5xl font-bold leading-none"
|
||||
style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);"
|
||||
>
|
||||
<div class="rich-content" v-html="content.title" />
|
||||
<!-- “{{ content.title }}” -->
|
||||
</div>
|
||||
<!-- <div class="text-4xl text-gray-800 font-bold">
|
||||
{{ content.meta?.hint }}
|
||||
@ -29,15 +37,17 @@ const pinyinChars = computed(() => {
|
||||
|
||||
<!-- 模板B: 汉字听写-同音字 (大字) -->
|
||||
<div v-else-if="template === 'TEMPLATE_DICTATION_HOMOPHONE'" class="text-center">
|
||||
<div class="text-[100px] text-red-600 font-bold">
|
||||
“{{ content.title }}”
|
||||
<div class="homophone text-[100px] text-red-600 font-bold">
|
||||
<!-- “{{ content.title }}” -->
|
||||
<div class="rich-content" v-html="content.title" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模板C: 汉字加一加 (提示+部件) -->
|
||||
<div v-else-if="template === 'TEMPLATE_COMPONENT_ADD'" class="text-center">
|
||||
<div class="text-[100px] text-red-600 font-bold">
|
||||
{{ content.title }}
|
||||
<!-- {{ content.title }} -->
|
||||
<div class="rich-content" v-html="content.title" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -45,8 +55,7 @@ const pinyinChars = computed(() => {
|
||||
<div v-else-if="template === 'TEMPLATE_WORD_DICTATION'" class="flex flex-col items-center">
|
||||
<div class="mb-8 flex flex-wrap justify-center gap-6">
|
||||
<div
|
||||
v-for="(char, index) in pinyinChars"
|
||||
:key="index"
|
||||
v-for="(char, index) in pinyinChars" :key="index"
|
||||
class="relative h-32 w-32 flex select-none items-center justify-center border-2 border-red-500 bg-white"
|
||||
>
|
||||
<!-- 米字格背景 -->
|
||||
@ -71,7 +80,8 @@ const pinyinChars = computed(() => {
|
||||
<!-- 模板E: 成语-文字要求 -->
|
||||
<div v-else-if="template === 'TEMPLATE_IDIOM_TEXT_REQ'" class="text-center">
|
||||
<div class="mb-8 text-4xl text-gray-800 font-bold">
|
||||
{{ content.title }}
|
||||
<!-- {{ content.title }} -->
|
||||
<div class="rich-content" v-html="content.title" />
|
||||
</div>
|
||||
<!-- <div class="rounded bg-gray-100 px-4 py-2 text-xl text-gray-500">
|
||||
示例：{{ content.meta?.example }}
|
||||
@ -96,10 +106,7 @@ const pinyinChars = computed(() => {
|
||||
</div>
|
||||
<div class="options-container">
|
||||
<div
|
||||
v-for="(option, index) in content.options"
|
||||
:key="index"
|
||||
class="option-card group"
|
||||
:class="{
|
||||
v-for="(option, index) in content.options" :key="index" class="option-card group" :class="{
|
||||
'is-mixed': !option.renderType || option.renderType === 'mixed' || option.renderType === 'image',
|
||||
'is-text': option.renderType === 'text',
|
||||
}"
|
||||
@ -164,16 +171,21 @@ const pinyinChars = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 0.75rem; /* rounded-xl */
|
||||
padding: 1rem; /* p-4 */
|
||||
border-radius: 0.75rem;
|
||||
/* rounded-xl */
|
||||
padding: 1rem;
|
||||
/* p-4 */
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
border-color: #f87171; /* border-red-400 */
|
||||
background-color: #fef2f2; /* bg-red-50 */
|
||||
border-color: #f87171;
|
||||
/* border-red-400 */
|
||||
background-color: #fef2f2;
|
||||
/* bg-red-50 */
|
||||
box-shadow:
|
||||
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
/* shadow-lg */
|
||||
}
|
||||
|
||||
&.is-mixed {
|
||||
@ -182,7 +194,8 @@ const pinyinChars = computed(() => {
|
||||
|
||||
&.is-text {
|
||||
flex-direction: row;
|
||||
gap: 1rem; /* gap-4 */
|
||||
gap: 1rem;
|
||||
/* gap-4 */
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,8 +207,10 @@ const pinyinChars = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 0.5rem; /* rounded-lg */
|
||||
padding: 0.5rem; /* p-2 */
|
||||
border-radius: 0.5rem;
|
||||
/* rounded-lg */
|
||||
padding: 0.5rem;
|
||||
/* p-2 */
|
||||
}
|
||||
|
||||
.option-image {
|
||||
@ -211,14 +226,18 @@ const pinyinChars = computed(() => {
|
||||
|
||||
.tianzige-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 0.75rem; /* mb-3 */
|
||||
height: 8rem; /* h-32 */
|
||||
width: 8rem; /* w-32 */
|
||||
margin-bottom: 0.75rem;
|
||||
/* mb-3 */
|
||||
height: 8rem;
|
||||
/* h-32 */
|
||||
width: 8rem;
|
||||
/* w-32 */
|
||||
display: flex;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #ef4444; /* border-red-500 */
|
||||
border: 2px solid #ef4444;
|
||||
/* border-red-500 */
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
@ -236,7 +255,8 @@ const pinyinChars = computed(() => {
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-top: 1px dashed #f87171; /* border-red-400 */
|
||||
border-top: 1px dashed #f87171;
|
||||
/* border-red-400 */
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -246,7 +266,8 @@ const pinyinChars = computed(() => {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border-left: 1px dashed #f87171; /* border-red-400 */
|
||||
border-left: 1px dashed #f87171;
|
||||
/* border-red-400 */
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@ -258,43 +279,73 @@ const pinyinChars = computed(() => {
|
||||
}
|
||||
|
||||
.tianzige-text {
|
||||
font-family: 'KaiTi', 'STKaiti', serif; /* font-kaaiti */
|
||||
font-family: 'KaiTi', 'STKaiti', serif;
|
||||
/* font-kaaiti */
|
||||
z-index: 10;
|
||||
font-size: 3.75rem; /* text-6xl */
|
||||
font-size: 3.75rem;
|
||||
/* text-6xl */
|
||||
font-weight: 700;
|
||||
color: #1f2937; /* text-gray-800 */
|
||||
color: #1f2937;
|
||||
/* text-gray-800 */
|
||||
}
|
||||
|
||||
.option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem; /* gap-3 */
|
||||
gap: 0.75rem;
|
||||
/* gap-3 */
|
||||
}
|
||||
|
||||
.option-label {
|
||||
height: 2rem; /* h-8 */
|
||||
width: 2rem; /* w-8 */
|
||||
height: 2rem;
|
||||
/* h-8 */
|
||||
width: 2rem;
|
||||
/* w-8 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px; /* rounded-full */
|
||||
background-color: #fee2e2; /* bg-red-100 */
|
||||
color: #dc2626; /* text-red-600 */
|
||||
border-radius: 9999px;
|
||||
/* rounded-full */
|
||||
background-color: #fee2e2;
|
||||
/* bg-red-100 */
|
||||
color: #dc2626;
|
||||
/* text-red-600 */
|
||||
font-weight: 700;
|
||||
|
||||
.group:hover & {
|
||||
background-color: #ef4444; /* bg-red-500 */
|
||||
background-color: #ef4444;
|
||||
/* bg-red-500 */
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 1.25rem; /* text-xl */
|
||||
color: #374151; /* text-gray-700 */
|
||||
font-size: 1.25rem;
|
||||
/* text-xl */
|
||||
color: #374151;
|
||||
/* text-gray-700 */
|
||||
font-weight: 500;
|
||||
|
||||
.group:hover & {
|
||||
color: #b91c1c; /* text-red-700 */
|
||||
color: #b91c1c;
|
||||
/* text-red-700 */
|
||||
}
|
||||
}
|
||||
|
||||
.homophone {
|
||||
:deep(img) {
|
||||
height: 230px !important;
|
||||
width: auto !important;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-content {
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,39 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { useActivityInfoStore } from '@/store/modules/activityinfo'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const activityInfoStore = useActivityInfoStore()
|
||||
const activityInfo = computed(() => activityInfoStore.activityInfo)
|
||||
|
||||
// 获取路由参数
|
||||
const route = useRoute()
|
||||
const activityId = computed(() => activityInfoStore.activityId || route.query?.activityId as string)
|
||||
const groupsId = computed(() => activityInfoStore.groupId || route.query?.groupsId as string)
|
||||
const teamId = computed(() => activityInfoStore.teamId || route.query?.teamId as string)
|
||||
|
||||
const { routerPushByKey, routerBack } = useRouterPush()
|
||||
|
||||
const activityName = ref('规则介绍')
|
||||
const rulesContent = ref('')
|
||||
|
||||
const mockContent = `<p>本轮环节共有4道题目,分别是“<strong>诗词理解</strong>”、“<strong>联想对对碰</strong>”、“<strong>逆向接诗句</strong>”、“<strong>情景猜诗句</strong>”</p><p>阅读完题目介绍，主持人点击“<strong>开始作答</strong>”后均在答题本田字格上作答</p><p><br></p><p> “<strong>诗词理解</strong>” 根据题目选择正确答案</p><p> “<strong>联想对对碰</strong>” 根据关键信息写出完整诗句</p><p> “<strong>逆向接诗句</strong>” 根据关键信息写出关联诗句</p><p> “<strong>情景猜诗句</strong>” 根据情景写出关联诗句</p><p><br></p><p><span style=\"background-color: rgb(89, 191, 192);\">答题倒计时结束后，界面自动跳转到下一题</span></p>
|
||||
`
|
||||
const mockContent = computed(() => activityInfo.value?.ActivityContent || '')
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
rulesContent.value = mockContent
|
||||
rulesContent.value = mockContent.value
|
||||
}, 100)
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_cover')
|
||||
// routerPushByKey('user_cover')
|
||||
routerBack()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
routerPushByKey('user_draw')
|
||||
routerPushByKey('user_draw', { query: { activityId: activityId.value, groupsId: groupsId.value, teamId: teamId.value } })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
import { fetchGetTeamListByGroupId } from '@/service/api/competition'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
const { routerPushByKey, routerBack } = useRouterPush()
|
||||
const route = useRoute()
|
||||
|
||||
interface TeamItem {
|
||||
id: number
|
||||
@ -11,17 +14,40 @@ interface TeamItem {
|
||||
icon: string
|
||||
}
|
||||
|
||||
const teams = ref<TeamItem[]>([
|
||||
{ id: 1, name: '1号代表队', icon: 'star' },
|
||||
{ id: 2, name: '2号代表队', icon: 'star' },
|
||||
{ id: 3, name: '3号代表队', icon: 'star' },
|
||||
{ id: 4, name: '4号代表队', icon: 'star' },
|
||||
])
|
||||
const teams = ref<TeamItem[]>([])
|
||||
const loading = ref(false)
|
||||
const activityId = route.query.activityId
|
||||
const groupsId = route.query.groupsId
|
||||
|
||||
async function getTeams() {
|
||||
if (!groupsId)
|
||||
return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const { data, error } = await fetchGetTeamListByGroupId(Number(groupsId))
|
||||
if (error) {
|
||||
window?.$message?.error(error.message)
|
||||
return
|
||||
}
|
||||
const list = data?.data || []
|
||||
if (list && Array.isArray(list)) {
|
||||
teams.value = list.map((item: any) => ({
|
||||
id: item.Id,
|
||||
name: item.Name,
|
||||
icon: 'star', // Default icon
|
||||
}))
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showContent = ref(false)
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_groups')
|
||||
routerBack()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
@ -31,12 +57,13 @@ function handleNext() {
|
||||
|
||||
function selectTeam(_id: number) {
|
||||
// 选择队伍逻辑
|
||||
routerPushByKey('user_cover', { query: { id: _id.toString() } })
|
||||
routerPushByKey('user_cover', { query: { activityId, groupsId, teamId: _id } })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
showContent.value = true
|
||||
getTeams()
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
@ -61,8 +88,7 @@ onMounted(() => {
|
||||
<TransitionGroup name="list-anim" tag="div" class="teams-grid">
|
||||
<div
|
||||
v-for="(item, index) in teams" v-show="showContent" :key="item.id" class="team-item"
|
||||
:style="{ '--delay': `${index * 0.1}s` }"
|
||||
@click="selectTeam(item.id)"
|
||||
:style="{ '--delay': `${index * 0.1}s` }" @click="selectTeam(item.id)"
|
||||
>
|
||||
<div class="icon-wrapper">
|
||||
<img src="@/assets/imgs/user/star-icon.svg" alt="team-icon" class="h-full w-full object-cover">
|
||||
|
||||
Reference in New Issue
Block a user