在线答题
This commit is contained in:
aixianling
466
src/apps/party/AppOnlineAnswer/AppOnlineAnswer.vue
Normal file
466
src/apps/party/AppOnlineAnswer/AppOnlineAnswer.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<template>
|
||||
<section class="AppOnlineAnswer">
|
||||
<div class="page" v-if="list.length">
|
||||
<img src="./static/img/answer-bg.png" alt="" class="bg-img">
|
||||
<div class="subject-content" v-if="!showAnwser">
|
||||
<div class="btn" v-if="showTopBtn" @click="confirm()">{{ topBtnText }}</div>
|
||||
<div class="bg-fff pad-b48">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span class="tips"></span>{{ list[index].type == 1 ? '单选' : '多选' }}题
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="big-num">{{ index + 1 }}</span>/{{ list.length }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text">{{ list[index].title }}</div>
|
||||
<!-- 单选 -->
|
||||
<div v-if="list[index].type == 1">
|
||||
<div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
|
||||
:class="{ 'item-click': clickIndex === i, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && clickIndex == i && item.checked == 0}">
|
||||
<img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
|
||||
<img src="./static/img/error-icon.png" alt=""
|
||||
v-if="showAnalysis && clickIndex == i && item.checked == 0">
|
||||
{{ item.sort }} {{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 多选 -->
|
||||
<div v-if="list[index].type == 2">
|
||||
<div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
|
||||
:class="{ 'item-click': item.isCheked, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && item.isCheked && item.checked == 0}">
|
||||
<img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
|
||||
<img src="./static/img/error-icon.png" alt=""
|
||||
v-if="showAnalysis && clickIndex == i && item.checked == 0">
|
||||
{{ item.sort }} {{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="item item-click">A. 吴起镇</div>
|
||||
<div class="item item-success"> <img src="./static/img/success-icon.png" alt="">吴起镇</div>
|
||||
<div class="item item-error"> <img src="./static/img/error-icon.png" alt="">吴起镇</div>
|
||||
<div class="item">A. 吴起镇</div> -->
|
||||
</div>
|
||||
<div class="bg-fff mar-t32" v-if="showAnalysis">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<span class="tips"></span>答案解析
|
||||
</div>
|
||||
</div>
|
||||
<div class="success-title">正确答案：{{ list[index].answer }}</div>
|
||||
<div class="success-text">
|
||||
<u-parse :html="list[index].analysis"></u-parse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subject-content" v-else>
|
||||
<div class="bg-fff pad-b48">
|
||||
<img src="./static/img/answer-head.png" alt="" class="head-img">
|
||||
<div class="head-content">
|
||||
<p>本次答对题目数</p>
|
||||
<div>{{ resultInfo.right }}</div>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<span class="info-item">正确率: {{ resultInfo.rate }}</span>
|
||||
<span class="info-item">用时: {{ useTime }}</span>
|
||||
<span class="info-item mar-b132">错题数: {{ resultInfo.wrong }}</span>
|
||||
</div>
|
||||
<span class="big-btn mar-r22" @click="back">返回</span>
|
||||
<span class="big-btn bg-red" @click="again">再来一组</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="list.length == 0"/>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "AppOnlineAnswer",
|
||||
appName: "在线答题",
|
||||
computed: {
|
||||
...mapState(["user", "token"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAnwser: false,
|
||||
index: 0,
|
||||
clickIndex: '',
|
||||
list: [],
|
||||
showTopBtn: false,
|
||||
topBtnText: '',
|
||||
showAnalysis: false,
|
||||
createdTime: '',
|
||||
endTime: '',
|
||||
useTime: '',
|
||||
resultInfo: {}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.createdTime = Date.parse(new Date())
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
itemClick(i) {
|
||||
if (this.showAnalysis) return
|
||||
|
||||
if (this.list[this.index].type == 1) { //单选
|
||||
this.clickIndex = i
|
||||
this.showTopBtn = true
|
||||
}
|
||||
if (this.list[this.index].type == 2) { //多选
|
||||
this.showTopBtn = false
|
||||
this.list[this.index].items[i].isCheked = !this.list[this.index].items[i].isCheked
|
||||
this.list[this.index].items.map((item) => {
|
||||
if (item.isCheked) {
|
||||
this.showTopBtn = true
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
this.topBtnText = '确定'
|
||||
},
|
||||
confirm() {
|
||||
if (this.list[this.index].type == 1) { //单选
|
||||
this.list[this.index].result = this.list[this.index].items[this.clickIndex].sort
|
||||
}
|
||||
if (this.list[this.index].type == 2) { //多选
|
||||
var resultList = []
|
||||
this.list[this.index].items.map((item) => {
|
||||
if (item.isCheked) {
|
||||
resultList.push(item.sort)
|
||||
}
|
||||
})
|
||||
this.list[this.index].result = resultList.join(',')
|
||||
}
|
||||
|
||||
console.log(this.list)
|
||||
|
||||
|
||||
if (this.topBtnText == '下一题') { //next
|
||||
if (this.index < this.list.length - 1) {
|
||||
this.index++
|
||||
this.init()
|
||||
} else { //答完了
|
||||
this.showTopBtn = false
|
||||
this.endTime = Date.parse(new Date());
|
||||
this.useTime = this.intervalTime(this.endTime - this.createdTime)
|
||||
this.getResult()
|
||||
}
|
||||
}
|
||||
if (this.topBtnText == '确定') { //确定选项
|
||||
this.showAnalysis = true
|
||||
this.topBtnText = '下一题'
|
||||
}
|
||||
},
|
||||
getResult() {
|
||||
this.$http.post(`/app/apppartyquestion/checkAnswer`, this.list).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.resultInfo = res.data
|
||||
this.showAnwser = true
|
||||
}
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
this.$http.post(`/app/apppartyquestion/getQuestions`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.map((item) => {
|
||||
item.answerList = []
|
||||
item.items.map((i) => {
|
||||
if (i.checked == 1) {
|
||||
item.answerList.push(i.sort)
|
||||
}
|
||||
})
|
||||
item.answer = item.answerList.join(',')
|
||||
|
||||
if (item.type == 2) { //多选
|
||||
item.isCheck = false
|
||||
}
|
||||
})
|
||||
this.list = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
intervalTime(time) {
|
||||
var leave1 = time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
|
||||
var hours = Math.floor(leave1 / (3600 * 1000));
|
||||
hours = hours < 10 ? '0' + hours : hours
|
||||
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
|
||||
var minutes = Math.floor(leave2 / (60 * 1000));
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes
|
||||
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
|
||||
var seconds = Math.round(leave3 / 1000);
|
||||
seconds = seconds < 10 ? '0' + seconds : seconds
|
||||
return hours + ":" + minutes + ":" + seconds
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({delta: 1})
|
||||
},
|
||||
again() {
|
||||
this.init()
|
||||
this.index = 0
|
||||
this.list = []
|
||||
this.getList()
|
||||
this.createdTime = Date.parse(new Date())
|
||||
},
|
||||
init() {
|
||||
this.showAnwser = false
|
||||
this.clickIndex = ''
|
||||
this.showTopBtn = false
|
||||
this.topBtnText = ''
|
||||
this.showAnalysis = false
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "../../../common/common.css";
|
||||
|
||||
.AppOnlineAnswer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F6F6F6;
|
||||
|
||||
.bg-img {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.subject-content {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
padding: 24px 36px 48px 36px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 124px;
|
||||
z-index: 9;
|
||||
|
||||
.btn {
|
||||
padding: 0 30px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
background: #D03A28;
|
||||
border-radius: 4px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
right: 36px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.pad-top {
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.pad-b48 {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.mar-t32 {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.bg-fff {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 6px 8px 4px rgba(218, 227, 234, 0.42);
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid #F2F3F5;
|
||||
padding: 24px 30px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
|
||||
.tips {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 36px;
|
||||
background: #E02617;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
line-height: 48px;
|
||||
|
||||
.big-num {
|
||||
font-size: 72px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 48px 40px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 612px;
|
||||
background: #FAFBFC;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #F2F3F5;
|
||||
margin-bottom: 28px;
|
||||
margin-left: 32px;
|
||||
padding: 26px 48px;
|
||||
box-sizing: border-box;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #687178;
|
||||
line-height: 44px;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-click {
|
||||
background: #F5F5F2;
|
||||
border: 1px solid #AD9B8D;
|
||||
color: #B7A38E;
|
||||
}
|
||||
|
||||
.item-success {
|
||||
background: #E9FAF0;
|
||||
border: 1px solid #E9FAF0;
|
||||
color: #40BF6F;
|
||||
}
|
||||
|
||||
.item-error {
|
||||
background: #FDEBEB;
|
||||
border: 1px solid #FDEBEB;
|
||||
color: #D03A28;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
padding: 32px 0 0 40px;
|
||||
font-size: 32px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
padding: 32px 40px 56px;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 48px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.head-img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.head-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 56px 0 0 72px;
|
||||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
font-size: 38px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FBE5E6;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 100px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FBE5E6;
|
||||
line-height: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 88px 32px 40px;
|
||||
|
||||
.info-item {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.mar-b132 {
|
||||
margin-bottom: 132px;
|
||||
}
|
||||
}
|
||||
|
||||
.big-btn {
|
||||
display: inline-block;
|
||||
width: 296px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E4E5E7;
|
||||
font-size: 34px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bg-red {
|
||||
border: 0;
|
||||
background: #D03A28;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mar-r22 {
|
||||
margin: 0 22px 0 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user