update
init
This commit is contained in:
@@ -0,0 +1,242 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user