243 lines
7.8 KiB
Vue
243 lines
7.8 KiB
Vue
<template>
|
||
<div class="answer-container">
|
||
<template v-if="lists.length > 0">
|
||
<div class="answer-item" v-for="(answer, indexAns) in lists" :key="indexAns">
|
||
<div class="answer-left">
|
||
<div class="left-title">
|
||
<div>{{ answer.questionCategoryName }}</div>
|
||
<div>随机抽选{{ answer.questionSum }}道题，答题时间为{{ answer.answerTime }}分钟</div>
|
||
</div>
|
||
<div class="answer-btn">
|
||
<div class="btn start" @click="handleStart(answer)">开始答题</div>
|
||
<div class="btn history" @click="handleHistory(answer)">历史记录</div>
|
||
</div>
|
||
</div>
|
||
<div class="answer-progress">
|
||
<nut-circle-progress
|
||
:progress="amastery(answer.know)"
|
||
:stroke-width="progressInfo.width"
|
||
:radius="progressInfo.radius"
|
||
:color="useColor(amastery(answer.know))"
|
||
>
|
||
<div class="progress-con">
|
||
<div>{{ amastery(answer.know) }}%</div>
|
||
<div>掌握率</div>
|
||
</div>
|
||
</nut-circle-progress>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<Nodata v-else />
|
||
<div class="unit-answering" @click="handleLook">
|
||
<div class="unit-con">
|
||
<div class="answering-con">
|
||
<div class="unit-title">
|
||
<div>{{ cardInfo.title }}</div>
|
||
<div>{{ cardInfo.con }}</div>
|
||
</div>
|
||
<div class="unit-image"></div>
|
||
</div>
|
||
<div class="lookBtn">点击查看</div>
|
||
</div>
|
||
</div>
|
||
<dialog-overlay
|
||
:show="dialogCon.show"
|
||
:content="dialogCon.con"
|
||
:imgUrl="dialogCon.url"
|
||
:okText="dialogCon.okText"
|
||
@cancel="handleCancel"
|
||
@ok="handleSubmit"
|
||
>
|
||
<template #content>
|
||
<div class="overlay-con">{{ dialogCon.con }}</div>
|
||
</template>
|
||
</dialog-overlay>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import DialogOverlay from '/@/views/23-physical-questions/components/dialogOverlay.vue';
|
||
import tipsIcon from '/@/assets/images/questions/tips.png';
|
||
import { useColor, amastery } from './questionHooks';
|
||
import { homeListApi } from '/@/views/23-physical-questions/questionApI';
|
||
import { newPageParams, openPage } from '/@/hooks/openPage';
|
||
import Nodata from '/@/views/23-physical-questions/components/noData.vue';
|
||
|
||
const dialogCon = ref({
|
||
show: false,
|
||
url: tipsIcon,
|
||
con: '',
|
||
okText: '开始答题',
|
||
});
|
||
const progressInfo = ref({
|
||
width: '5',
|
||
radius: '36',
|
||
});
|
||
const cardInfo = ref({
|
||
title: '单位答题活动',
|
||
con: '单位组织答题活动，获取一定积分，赢得超大奖励',
|
||
});
|
||
const lists = ref([]);
|
||
const questDetail = ref({});
|
||
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
|
||
function getList() {
|
||
homeListApi({}).then((res: any) => {
|
||
if (res.code === 200) {
|
||
lists.value = res.result;
|
||
}
|
||
});
|
||
}
|
||
// 打开弹窗
|
||
function handleStart(item: any) {
|
||
questDetail.value = item;
|
||
dialogCon.value.show = true;
|
||
dialogCon.value.con = `共${item.questionSum}道题，答题时长为${item.answerTime}分钟，是否确认开始答题？`;
|
||
}
|
||
function handleCancel() {
|
||
dialogCon.value.show = false;
|
||
}
|
||
// 进入答题
|
||
function handleSubmit() {
|
||
dialogCon.value.show = false;
|
||
openPage(
|
||
'/physical-answer',
|
||
newPageParams({
|
||
id: questDetail.value.questionCategoryId,
|
||
answerTime: questDetail.value.answerTime,
|
||
affirmBack: 1,
|
||
})
|
||
);
|
||
}
|
||
// 单位答题活动
|
||
function handleLook() {
|
||
openPage(
|
||
'/physical-activity',
|
||
newPageParams({
|
||
startNewActivity: 2,
|
||
})
|
||
);
|
||
}
|
||
// 历史记录
|
||
function handleHistory(item: any) {
|
||
openPage(
|
||
'/physical-history',
|
||
newPageParams({
|
||
id: item.questionCategoryId,
|
||
})
|
||
);
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.answer-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background-color: #f5f7fb;
|
||
.overlay-con{
|
||
text-align: center;
|
||
}
|
||
.answer-item {
|
||
background-color: #ffffff;
|
||
margin: 12px 0;
|
||
padding: 20px;
|
||
display: flex;
|
||
border-radius: 16px;
|
||
.answer-left {
|
||
width: 80%;
|
||
.left-title {
|
||
> div:nth-child(1) {
|
||
font-weight: bold;
|
||
color: #333333;
|
||
font-size: 16px;
|
||
}
|
||
> div:nth-child(2) {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
padding-top: 3px;
|
||
}
|
||
}
|
||
.answer-btn {
|
||
display: flex;
|
||
padding-top: 10px;
|
||
.btn {
|
||
width: 73px;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
font-size: 13px;
|
||
}
|
||
.start {
|
||
color: #ffffff;
|
||
background-color: #1a68ee;
|
||
}
|
||
.history {
|
||
color: #1a68ee;
|
||
border: 1px solid #1a68ee;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
}
|
||
.answer-progress {
|
||
width: 20%;
|
||
.progress-con {
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.unit-answering {
|
||
width: 100%;
|
||
height: 140px;
|
||
border-radius: 16px;
|
||
background-color: #1a68ee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.unit-con {
|
||
width: 96%;
|
||
height: 98%;
|
||
border-radius: 16px;
|
||
background-color: #ffffff;
|
||
padding: 20px;
|
||
.answering-con {
|
||
display: flex;
|
||
.unit-title {
|
||
flex: 1;
|
||
> div:nth-child(1) {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
> div:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
padding-top: 2px;
|
||
}
|
||
}
|
||
.unit-image {
|
||
margin-top: 20px;
|
||
width: 61px;
|
||
height: 61px;
|
||
background: url('/@/assets/images/questions/answer.png') no-repeat;
|
||
background-size: contain;
|
||
}
|
||
}
|
||
.lookBtn {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1a68ee;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|