kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

在线答题

Browse Source
This commit is contained in:
aixianling
2021-12-20 10:09:17 +08:00
parent b4613e9f6e
commit a715749c2a
5 changed files with 117 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/apps/party/onlineAnswer/onlineAnswer.vue → src/apps/party/AppOnlineAnswer/AppOnlineAnswer.vue
View File

@@ -1,39 +1,43 @@
<template> <template>
<section class="home"> <section class="AppOnlineAnswer">
<div class="page" v-if="list.length"> <div class="page" v-if="list.length">
<img src="../../static/img/answer-bg.png" alt="" class="bg-img"> <img src="./static/img/answer-bg.png" alt="" class="bg-img">
<div class="subject-content" v-if="!showAnwser"> <div class="subject-content" v-if="!showAnwser">
<div class="btn" v-if="showTopBtn" @click="confirm()">{{topBtnText}}</div> <div class="btn" v-if="showTopBtn" @click="confirm()">{{ topBtnText }}</div>
<div class="bg-fff pad-b48"> <div class="bg-fff pad-b48">
<div class="title"> <div class="title">
<div class="left"> <div class="left">
<span class="tips"></span>{{list[index].type == 1 ? '单选' : '多选'}}题 <span class="tips"></span>{{ list[index].type == 1 ? '单选' : '多选' }}题
</div> </div>
<div class="right"> <div class="right">
<span class="big-num">{{index+1}}</span>/{{list.length}} <span class="big-num">{{ index + 1 }}</span>/{{ list.length }}
</div> </div>
</div> </div>
<div class="text">{{list[index].title}}</div> <div class="text">{{ list[index].title }}</div>
<!-- 单选 --> <!-- 单选 -->
<div v-if="list[index].type == 1"> <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}"> <div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
<img src="../../static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1"> :class="{ 'item-click': clickIndex === i, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && clickIndex == i && item.checked == 0}">
<img src="../../static/img/error-icon.png" alt="" v-if="showAnalysis && clickIndex == i && item.checked == 0"> <img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
{{item.sort}} &nbsp;{{item.content}} <img src="./static/img/error-icon.png" alt=""
v-if="showAnalysis && clickIndex == i && item.checked == 0">
{{ item.sort }} &nbsp;{{ item.content }}
</div> </div>
</div> </div>
<!-- 多选 --> <!-- 多选 -->
<div v-if="list[index].type == 2"> <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}"> <div class="item" v-for="(item, i) in list[index].items" :key="i" @click="itemClick(i)"
<img src="../../static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1"> :class="{ 'item-click': item.isCheked, 'item-success': showAnalysis && item.checked == 1, 'item-error': showAnalysis && item.isCheked && item.checked == 0}">
<img src="../../static/img/error-icon.png" alt="" v-if="showAnalysis && clickIndex == i && item.checked == 0"> <img src="./static/img/success-icon.png" alt="" v-if="showAnalysis && item.checked == 1">
{{item.sort}} &nbsp;{{item.content}} <img src="./static/img/error-icon.png" alt=""
v-if="showAnalysis && clickIndex == i && item.checked == 0">
{{ item.sort }} &nbsp;{{ item.content }}
</div> </div>
</div> </div>
<!-- <div class="item item-click">A. 吴起镇</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-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 item-error"> <img src="./static/img/error-icon.png" alt="">吴起镇</div>
<div class="item">A. 吴起镇</div> --> <div class="item">A. 吴起镇</div> -->
</div> </div>
<div class="bg-fff mar-t32" v-if="showAnalysis"> <div class="bg-fff mar-t32" v-if="showAnalysis">
@@ -42,35 +46,38 @@
<span class="tips"></span>答案解析 <span class="tips"></span>答案解析
</div> </div>
</div> </div>
<div class="success-title">正确答案：{{list[index].answer}}</div> <div class="success-title">正确答案：{{ list[index].answer }}</div>
<div class="success-text"><u-parse :html="list[index].analysis"></u-parse></div> <div class="success-text">
<u-parse :html="list[index].analysis"></u-parse>
</div>
</div> </div>
</div> </div>
<div class="subject-content" v-else> <div class="subject-content" v-else>
<div class="bg-fff pad-b48"> <div class="bg-fff pad-b48">
<img src="../../static/img/answer-head.png" alt="" class="head-img"> <img src="./static/img/answer-head.png" alt="" class="head-img">
<div class="head-content"> <div class="head-content">
<p>本次答对题目数</p> <p>本次答对题目数</p>
<div>{{resultInfo.right}}</div> <div>{{ resultInfo.right }}</div>
</div> </div>
<div class="info-content"> <div class="info-content">
<span class="info-item">正确率: {{resultInfo.rate}}</span> <span class="info-item">正确率: {{ resultInfo.rate }}</span>
<span class="info-item">用时: {{useTime}}</span> <span class="info-item">用时: {{ useTime }}</span>
<span class="info-item mar-b132">错题数: {{resultInfo.wrong}}</span> <span class="info-item mar-b132">错题数: {{ resultInfo.wrong }}</span>
</div> </div>
<span class="big-btn mar-r22" @click="back">返回</span> <span class="big-btn mar-r22" @click="back">返回</span>
<span class="big-btn bg-red" @click="again">再来一组</span> <span class="big-btn bg-red" @click="again">再来一组</span>
</div> </div>
</div> </div>
</div> </div>
<AiEmpty v-if="list.length == 0" /> <AiEmpty v-if="list.length == 0"/>
</section> </section>
</template> </template>
<script> <script>
import { mapState } from "vuex"; import {mapState} from "vuex";
export default { export default {
name: "home", name: "AppOnlineAnswer",
appName: "在线答题",
computed: { computed: {
...mapState(["user", "token"]), ...mapState(["user", "token"]),
}, },
@@ -89,7 +96,7 @@ export default {
resultInfo: {} resultInfo: {}
}; };
}, },
onLoad(options) { onLoad() {
this.createdTime = Date.parse(new Date()) this.createdTime = Date.parse(new Date())
this.getList() this.getList()
}, },
@@ -97,15 +104,15 @@ export default {
itemClick(i) { itemClick(i) {
if (this.showAnalysis) return if (this.showAnalysis) return
if(this.list[this.index].type == 1) { //单选 if (this.list[this.index].type == 1) { //单选
this.clickIndex = i this.clickIndex = i
this.showTopBtn = true this.showTopBtn = true
} }
if(this.list[this.index].type == 2) { //多选 if (this.list[this.index].type == 2) { //多选
this.showTopBtn = false this.showTopBtn = false
this.list[this.index].items[i].isCheked = !this.list[this.index].items[i].isCheked this.list[this.index].items[i].isCheked = !this.list[this.index].items[i].isCheked
this.list[this.index].items.map((item) => { this.list[this.index].items.map((item) => {
if(item.isCheked) { if (item.isCheked) {
this.showTopBtn = true this.showTopBtn = true
} }
}) })
@@ -114,13 +121,13 @@ export default {
this.topBtnText = '确定' this.topBtnText = '确定'
}, },
confirm() { confirm() {
if(this.list[this.index].type == 1) { //单选 if (this.list[this.index].type == 1) { //单选
this.list[this.index].result = this.list[this.index].items[this.clickIndex].sort this.list[this.index].result = this.list[this.index].items[this.clickIndex].sort
} }
if(this.list[this.index].type == 2) { //多选 if (this.list[this.index].type == 2) { //多选
var resultList = [] var resultList = []
this.list[this.index].items.map((item) => { this.list[this.index].items.map((item) => {
if(item.isCheked) { if (item.isCheked) {
resultList.push(item.sort) resultList.push(item.sort)
} }
}) })
@@ -130,18 +137,18 @@ export default {
console.log(this.list) console.log(this.list)
if(this.topBtnText == '下一题') { //next if (this.topBtnText == '下一题') { //next
if(this.index < this.list.length - 1) { if (this.index < this.list.length - 1) {
this.index ++ this.index++
this.init() this.init()
}else { //答完了 } else { //答完了
this.showTopBtn = false this.showTopBtn = false
this.endTime = Date.parse(new Date());var timestamp = Date.parse(new Date()); this.endTime = Date.parse(new Date());
this.useTime = this.intervalTime(this.endTime - this.createdTime) this.useTime = this.intervalTime(this.endTime - this.createdTime)
this.getResult() this.getResult()
} }
} }
if(this.topBtnText == '确定') { //确定选项 if (this.topBtnText == '确定') { //确定选项
this.showAnalysis = true this.showAnalysis = true
this.topBtnText = '下一题' this.topBtnText = '下一题'
} }
@@ -160,13 +167,13 @@ export default {
res.data.map((item) => { res.data.map((item) => {
item.answerList = [] item.answerList = []
item.items.map((i) => { item.items.map((i) => {
if(i.checked == 1) { if (i.checked == 1) {
item.answerList.push(i.sort) item.answerList.push(i.sort)
} }
}) })
item.answer = item.answerList.join(',') item.answer = item.answerList.join(',')
if(item.type == 2) { //多选 if (item.type == 2) { //多选
item.isCheck = false item.isCheck = false
} }
}) })
@@ -175,18 +182,16 @@ export default {
}); });
}, },
intervalTime(time) { intervalTime(time) {
var date3 = time var leave1 = time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var days = Math.floor(date3 / (24 * 3600 * 1000));
var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000)); var hours = Math.floor(leave1 / (3600 * 1000));
hours = hours < 10 ? '0'+hours : hours hours = hours < 10 ? '0' + hours : hours
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数 var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000)); var minutes = Math.floor(leave2 / (60 * 1000));
minutes = minutes < 10 ? '0'+minutes : minutes minutes = minutes < 10 ? '0' + minutes : minutes
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数 var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000); var seconds = Math.round(leave3 / 1000);
seconds = seconds < 10 ? '0'+seconds : seconds seconds = seconds < 10 ? '0' + seconds : seconds
return hours + ":" + minutes + ":" + seconds return hours + ":" + minutes + ":" + seconds
}, },
back() { back() {
uni.navigateBack({delta: 1}) uni.navigateBack({delta: 1})
@@ -210,7 +215,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../../common/common.css"; @import "../../../common/common.css";
.home {
.AppOnlineAnswer {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@@ -219,11 +225,13 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #F6F6F6; background-color: #F6F6F6;
.bg-img{
.bg-img {
width: 100%; width: 100%;
height: 800px; height: 800px;
} }
.subject-content{
.subject-content {
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
padding: 24px 36px 48px 36px; padding: 24px 36px 48px 36px;
@@ -231,7 +239,8 @@ export default {
position: absolute; position: absolute;
top: 124px; top: 124px;
z-index: 9; z-index: 9;
.btn{
.btn {
padding: 0 30px; padding: 0 30px;
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
@@ -247,22 +256,27 @@ export default {
right: 36px; right: 36px;
z-index: 99; z-index: 99;
} }
.pad-top{
.pad-top {
padding-top: 100px; padding-top: 100px;
} }
.pad-b48{
.pad-b48 {
padding-bottom: 48px; padding-bottom: 48px;
} }
.mar-t32{
.mar-t32 {
margin-top: 32px; margin-top: 32px;
} }
.bg-fff{
.bg-fff {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 6px 8px 4px rgba(218, 227, 234, 0.42); box-shadow: 0 6px 8px 4px rgba(218, 227, 234, 0.42);
position: relative; position: relative;
.title{
.title {
width: 100%; width: 100%;
height: 100px; height: 100px;
border-bottom: 1px solid #F2F3F5; border-bottom: 1px solid #F2F3F5;
@@ -270,13 +284,15 @@ export default {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left{
.left {
font-size: 36px; font-size: 36px;
font-family: PingFang-SC-Heavy, PingFang-SC; font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800; font-weight: 800;
color: #333; color: #333;
line-height: 50px; line-height: 50px;
.tips{
.tips {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 36px; height: 36px;
@@ -284,13 +300,15 @@ export default {
margin-right: 16px; margin-right: 16px;
} }
} }
.right{
.right {
font-size: 34px; font-size: 34px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #999; color: #999;
line-height: 48px; line-height: 48px;
.big-num{
.big-num {
font-size: 72px; font-size: 72px;
font-family: PingFang-SC-Heavy, PingFang-SC; font-family: PingFang-SC-Heavy, PingFang-SC;
font-weight: 800; font-weight: 800;
@@ -298,7 +316,8 @@ export default {
} }
} }
} }
.text{
.text {
padding: 48px 40px; padding: 48px 40px;
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@@ -307,7 +326,8 @@ export default {
line-height: 48px; line-height: 48px;
word-break: break-all; word-break: break-all;
} }
.item{
.item {
width: 612px; width: 612px;
background: #FAFBFC; background: #FAFBFC;
border-radius: 12px; border-radius: 12px;
@@ -321,29 +341,34 @@ export default {
font-weight: 500; font-weight: 500;
color: #687178; color: #687178;
line-height: 44px; line-height: 44px;
img{
img {
width: 36px; width: 36px;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
margin-right: 14px; margin-right: 14px;
} }
} }
.item-click{
.item-click {
background: #F5F5F2; background: #F5F5F2;
border: 1px solid #AD9B8D; border: 1px solid #AD9B8D;
color: #B7A38E; color: #B7A38E;
} }
.item-success{
.item-success {
background: #E9FAF0; background: #E9FAF0;
border: 1px solid #E9FAF0; border: 1px solid #E9FAF0;
color: #40BF6F; color: #40BF6F;
} }
.item-error{
.item-error {
background: #FDEBEB; background: #FDEBEB;
border: 1px solid #FDEBEB; border: 1px solid #FDEBEB;
color: #D03A28; color: #D03A28;
} }
.success-title{
.success-title {
padding: 32px 0 0 40px; padding: 32px 0 0 40px;
font-size: 32px; font-size: 32px;
font-family: PingFang-SC-Heavy, PingFang-SC; font-family: PingFang-SC-Heavy, PingFang-SC;
@@ -351,7 +376,8 @@ export default {
color: #333; color: #333;
line-height: 44px; line-height: 44px;
} }
.success-text{
.success-text {
padding: 32px 40px 56px; padding: 32px 40px 56px;
font-size: 32px; font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
@@ -360,11 +386,13 @@ export default {
line-height: 48px; line-height: 48px;
word-break: break-all; word-break: break-all;
} }
.head-img{
.head-img {
width: 100%; width: 100%;
height: 260px; height: 260px;
} }
.head-content{
.head-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 260px; height: 260px;
@@ -372,14 +400,16 @@ export default {
left: 0; left: 0;
padding: 56px 0 0 72px; padding: 56px 0 0 72px;
box-sizing: border-box; box-sizing: border-box;
p{
p {
font-size: 38px; font-size: 38px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #FBE5E6; color: #FBE5E6;
line-height: 52px; line-height: 52px;
} }
div{
div {
font-size: 100px; font-size: 100px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
@@ -387,9 +417,11 @@ export default {
line-height: 140px; line-height: 140px;
} }
} }
.info-content{
.info-content {
padding: 88px 32px 40px; padding: 88px 32px 40px;
.info-item{
.info-item {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
font-size: 34px; font-size: 34px;
@@ -399,11 +431,13 @@ export default {
line-height: 48px; line-height: 48px;
margin-bottom: 42px; margin-bottom: 42px;
} }
.mar-b132{
.mar-b132 {
margin-bottom: 132px; margin-bottom: 132px;
} }
} }
.big-btn{
.big-btn {
display: inline-block; display: inline-block;
width: 296px; width: 296px;
height: 88px; height: 88px;
@@ -416,12 +450,14 @@ export default {
font-weight: 400; font-weight: 400;
color: #666; color: #666;
} }
.bg-red{
.bg-red {
border: 0; border: 0;
background: #D03A28; background: #D03A28;
color: #fff; color: #fff;
} }
.mar-r22{
.mar-r22 {
margin: 0 22px 0 32px; margin: 0 22px 0 32px;
} }
} }

BIN
src/apps/party/AppOnlineAnswer/static/img/answer-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
src/apps/party/AppOnlineAnswer/static/img/answer-head.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/apps/party/AppOnlineAnswer/static/img/error-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/apps/party/AppOnlineAnswer/static/img/success-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB