537 lines
20 KiB
HTML
537 lines
20 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.container {
|
|
/*height: calc(56vh);*/
|
|
width: 100%;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.header-info {
|
|
background: #FFFFFF;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-info .no {
|
|
font-weight: bolder;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card {
|
|
background: #FFFFFF;
|
|
margin: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.card .header {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-bottom: .1px solid #e2e2e2;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card .body {
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
|
|
.issue-card .issue {
|
|
height: calc(0%);
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 10px;
|
|
font-size: 14px;
|
|
color: #000;
|
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
}
|
|
|
|
.issue-card .issue div {
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.issue-card .options {
|
|
height: calc(0%);
|
|
padding: 0 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.issue-card .options .option {
|
|
padding: 10px 20px;
|
|
background: #eeeeee8f;
|
|
border: 1px solid rgba(234, 233, 233, 0.5);
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.issue-card .options .option-selected {
|
|
border: 1px solid #c59f48;
|
|
background: #fffbf3;
|
|
color: #c59f48;
|
|
}
|
|
|
|
.issue-card .options .option-correct {
|
|
border: 1px solid #ace59d;
|
|
background: #cdf3a8;
|
|
color: #ace59d;
|
|
}
|
|
|
|
.answer-card .body .result {
|
|
padding: 10px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.answer-card .body .result .success {
|
|
color: #71d5a1;
|
|
}
|
|
|
|
.answer-card .body .result .error {
|
|
color: red;
|
|
}
|
|
|
|
.answer-card .body .desc {
|
|
padding: 10px;
|
|
}
|
|
|
|
.footer-info {
|
|
background: #ffffff;
|
|
height: 50px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-info div {
|
|
flex: 1;
|
|
text-align: center;
|
|
/*line-height: 50px;*/
|
|
}
|
|
|
|
.win-info-button {
|
|
position: fixed;
|
|
bottom: 60px;
|
|
right: 10px;
|
|
transform: translateY(-50%);
|
|
padding: 5px;
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.winPopup {
|
|
width: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
.iconDiv {
|
|
color: white;
|
|
font-size: 66px;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="container">
|
|
<div class="header-info" v-if="false">
|
|
<div class="no">
|
|
序号：{{ currentIssueIndex + 1 + '/' + todayIssueList.length }}
|
|
</div>
|
|
<div class="no" v-if="questionData.qdtkssj && questionData.qdtjssj">
|
|
<van-icon name="clock-o" size="16"/>
|
|
答题时间：{{ questionData.qdtkssj + ' 至 ' + questionData.qdtjssj }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="question-card" v-for="(issue,issueIdx) in todayIssueList" :key="issue.issue">
|
|
<template v-if="issueIdx===currentIssueIndex">
|
|
<div class="card issue-card">
|
|
<div class="header">
|
|
<!-- <div class="issue-type">-->
|
|
<!-- <span v-if="issue.itx===1 && issue.iisdx">单选题</span>-->
|
|
<!-- <span v-if="issue.itx===1 && !issue.iisdx">多选题</span>-->
|
|
<!-- </div>-->
|
|
<div class="issue-type">
|
|
序号：{{ currentIssueIndex + 1 + '/' + todayIssueList.length }}
|
|
</div>
|
|
<div class="score">
|
|
分数：{{ issue.fraction }}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="body">
|
|
<div class="issue">
|
|
<div style="font-size: 16px" v-html="issue.iname"></div>
|
|
</div>
|
|
<div class="options">
|
|
<template v-for="wor in issue.wors">
|
|
<div class="option"
|
|
@click="optionSelect(issue,wor)"
|
|
:key="wor.wid"
|
|
:class="[currentSelectedWors.map(v=>v.wid).includes(wor.wid) ? 'option-selected':'']">
|
|
{{ wor.wtxt }}
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card answer-card" v-if="hasAnswerIssueIds.includes(issue.iid)">
|
|
<!-- <div class="header">-->
|
|
<!-- 答案-->
|
|
<!-- </div>-->
|
|
<div class="body">
|
|
<div class="result">
|
|
<span v-if="currentIssueAnswerResult" class="success">回答正确</span>
|
|
<span v-else class="error">回答错误</span>
|
|
</div>
|
|
<div class="desc">我的答案：{{ currentIssueMyAnswer }}</div>
|
|
<div class="desc" v-if="!currentIssueAnswerResult">正确答案：{{ correctWorsText }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="footer-info"
|
|
style="background: #FFFFFF;height: 50px;position: fixed;bottom: 0;left: 0;right: 0;display: flex;">
|
|
<div class="prev">
|
|
<van-button @click="changeIssue(false)" type="info" :disabled="currentIssueIndex<=0">
|
|
上一题
|
|
</van-button>
|
|
</div>
|
|
<div>
|
|
得分:{{ getScore() }}
|
|
</div>
|
|
<div class="next">
|
|
<!-- <template v-if="hasAnswerIssueIds.length === issueList.length">-->
|
|
<!-- <van-button>-->
|
|
<!-- 回答完毕-->
|
|
<!-- </van-button>-->
|
|
<!-- </template>-->
|
|
<!-- <template v-else>-->
|
|
<van-button v-if="!hasAnswerIssueIds.includes(currentIssueId)"
|
|
type="info"
|
|
:disabled="currentSelectedWors.length===0" @click="confirmAnswer">
|
|
确认答案
|
|
</van-button>
|
|
|
|
<van-button v-else
|
|
type="info"
|
|
:disabled="currentIssueIndex === todayIssueList.length-1"
|
|
@click="changeIssue(true)">
|
|
下一题
|
|
</van-button>
|
|
<!-- </template>-->
|
|
</div>
|
|
</div>
|
|
|
|
<!--<div class="win-info-button" @click="showWinInfo">
|
|
获奖信息
|
|
</div>-->
|
|
|
|
<van-popup v-model="winPopupShow" class="winPopup" :style="{ height: '100%' }">
|
|
<div>每人仅有一次机会</div>
|
|
<img v-if="isWin" width="100%" height="60%" style="margin-top: 100px"
|
|
src="/assets/mobile/img/question/win.png"/>
|
|
<img v-if="!isWin" width="100%" height="80%" src="/assets/mobile/img/question/noWin.png"/>
|
|
<div class="iconDiv">
|
|
<van-icon @click="winPopupShow = false" name="close"></van-icon>
|
|
</div>
|
|
</van-popup>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
questionData: {},
|
|
currentIssueIndex: 0,
|
|
currentIssue: null,
|
|
currentSelectedWors: [],
|
|
replyInfo: [],
|
|
todayStr: moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00',
|
|
winPopupShow: false,
|
|
winList: [],
|
|
isWin: false,
|
|
}
|
|
},
|
|
computed: {
|
|
currentIssueId() {
|
|
return this.currentIssue ? this.currentIssue.iid : null
|
|
},
|
|
issueList() {
|
|
if (this.questionData && this.questionData.issues && this.questionData.issues.length) {
|
|
return this.questionData.issues
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
todayIssueList() {
|
|
if (this.issueList && this.issueList.length > 0) {
|
|
return this.issueList.filter(v => v.displayDate === this.todayStr)
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
correctWorsText() {
|
|
return this.currentIssue && this.currentIssue.wors.filter(v => v.correct).map(v => v.wtxt).join('、')
|
|
},
|
|
currentIssueMyAnswer() {
|
|
return this.currentSelectedWors.map(v => v.wtxt).join('、')
|
|
},
|
|
//该题是否回答正确
|
|
currentIssueAnswerResult() {
|
|
const userSelectWorIds = this.currentSelectedWors.map(v => v.wid).slice().sort()
|
|
if (this.currentIssue) {
|
|
const correctWorIds = this.currentIssue.wors.filter(v => v.correct).map(v => v.wid).slice().sort()
|
|
return userSelectWorIds.length === correctWorIds.length && correctWorIds.every(v => userSelectWorIds.includes(v))
|
|
}
|
|
return false
|
|
},
|
|
//已经回答的题目
|
|
hasAnswerIssueIds() {
|
|
if (this.replyInfo && this.replyInfo.length) {
|
|
return this.replyInfo.map(v => v.issueId)
|
|
} else {
|
|
return []
|
|
}
|
|
},
|
|
todayScore() {
|
|
return this.todayIssueList.filter(v => {
|
|
const correctWids = v.wors.filter(v => v.correct).map(v => v.wid)
|
|
const rwids = this.replyInfo.filter(v => v.issueId === v.iid).map(v => v.rwid)
|
|
if (rwids && rwids.length > 0 && rwids.every(r => correctWids.includes(r))) {
|
|
return v
|
|
}
|
|
}).map(v => v.fraction).reduce((a, b) => {
|
|
return a + b
|
|
}, 0)
|
|
},
|
|
},
|
|
methods: {
|
|
async getQuestionData() {
|
|
const resp = await $.get('/mobile/question/h5/questionInfo/' + this.id)
|
|
this.questionData = resp.data
|
|
},
|
|
|
|
//获取回答信息
|
|
async getReply() {
|
|
const resp = await $.get('/mobile/question/h5/answerInfo/' + this.id)
|
|
this.replyInfo = resp.data
|
|
},
|
|
|
|
//点击选项
|
|
optionSelect(issue, wor) {
|
|
if (this.hasAnswerIssueIds.includes(issue.iid)) {
|
|
return
|
|
}
|
|
this.currentIssue = issue
|
|
if (this.currentIssue.itx === 1) {
|
|
if (this.currentIssue.iisdx) {
|
|
//单选
|
|
this.currentSelectedWors = [wor]
|
|
} else {
|
|
//多选
|
|
const idx = this.currentSelectedWors.findIndex(v => v.wid === wor.wid)
|
|
if (idx > -1) {
|
|
this.currentSelectedWors.splice(idx, 1)
|
|
} else {
|
|
this.currentSelectedWors.push(wor)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
//确认答案
|
|
async confirmAnswer() {
|
|
if (this.questionData.qdtkssj && this.questionData.qdtjssj) {
|
|
const startTimes = this.questionData.qdtkssj.split(':')
|
|
const endTimes = this.questionData.qdtjssj.split(':')
|
|
const nows = moment(new Date()).format('HH:mm:ss').split(':')
|
|
|
|
let startTime = new Date()
|
|
startTime.setHours(startTimes[0])
|
|
startTime.setMinutes(startTimes[1])
|
|
startTime.setSeconds(startTimes[2])
|
|
|
|
let endTime = new Date()
|
|
endTime.setHours(endTimes[0])
|
|
endTime.setMinutes(endTimes[1])
|
|
endTime.setSeconds(endTimes[2])
|
|
|
|
let nowTime = new Date()
|
|
nowTime.setHours(nows[0])
|
|
nowTime.setMinutes(nows[1])
|
|
nowTime.setSeconds(nows[2])
|
|
|
|
|
|
if (nowTime < startTime || nowTime > endTime) {
|
|
this.$modal.msg('不在答题时间范围内')
|
|
return
|
|
}
|
|
}
|
|
if (this.questionData.qrkdcs && this.questionData.qrkdcs > 0) {
|
|
const {data: canAnswer} = await $.get('/mobile/question/h5/canAnswer', {questionId: this.questionData.qid})
|
|
if (!canAnswer) {
|
|
this.$modal.msg('今日答题次数已超上限')
|
|
return
|
|
}
|
|
}
|
|
|
|
this.$modal.loading('提交中')
|
|
|
|
//用户选择的答案
|
|
const userSelectWorIds = this.currentSelectedWors.map(v => v.wid).slice().sort()
|
|
|
|
const formData = []
|
|
userSelectWorIds.forEach(v => {
|
|
formData.push({
|
|
qid: this.questionData.qid,
|
|
issueId: this.currentIssue.iid,
|
|
rwid: v,
|
|
save: false
|
|
})
|
|
})
|
|
|
|
$.post('/mobile/question/h5/saveAnswer2', {replies: JSON.stringify(formData)}).then(res => {
|
|
if (res.code === 0) {
|
|
const getReplyPromise = () => {
|
|
return new Promise(async resolve => {
|
|
await this.getReply()
|
|
resolve()
|
|
})
|
|
}
|
|
getReplyPromise().then(() => {
|
|
this.checkTodayReplyFinish()
|
|
})
|
|
this.$modal.closeLoading()
|
|
}
|
|
})
|
|
},
|
|
async checkTodayReplyFinish() {
|
|
if (this.issueList.map(x => x.iid).every(x => this.replyInfo.map(v => v.issueId).includes(x))) {
|
|
this.$modal.msg('全部答题完成')
|
|
} else if (this.todayIssueList.map(x => x.iid).every(x => this.replyInfo.map(v => v.issueId).includes(x))) {
|
|
const score = this.getScore()
|
|
const {data: scoreMap} = await $.get('/mobile/question/h5/todayMaxScore', {questionId: this.questionData.qid})
|
|
const scoreValues = Object.values(scoreMap)
|
|
let msg = null
|
|
if (scoreValues.length > 1) {
|
|
const maxScore = Math.max(...scoreValues)
|
|
msg = '今日答题已完成，您当前分数为' + score + ',历史最高分为' + maxScore + ',是否重新答题？'
|
|
} else {
|
|
msg = '今日答题已完成，您当前分数为' + score + ',是否重新答题？'
|
|
}
|
|
|
|
this.$modal.confirm(msg).then(async () => {
|
|
const {code} = await $.post('/mobile/question/h5/answerAgain', {questionId: this.questionData.qid})
|
|
await this.getReply()
|
|
const {ctMode} = this.questionData
|
|
this.initCurrentIssueInfo(this.questionData.issues.find(v => v.displayDate && v.displayDate.includes(moment(new Date()).format('YYYY-MM-DD'))).iid)
|
|
|
|
/*if (ctMode === 2) {
|
|
this.initCurrentIssueInfo(this.questionData.issues.find(v => v.displayDate && v.displayDate.includes(moment(new Date()).format('YYYY-MM-DD'))).iid)
|
|
} else {
|
|
this.initCurrentIssueInfo(this.questionData.issues[0].iid)
|
|
}*/
|
|
})
|
|
} else if (this.replyInfo.map(v => v.issueId).length === 0) {
|
|
|
|
}
|
|
},
|
|
initCurrentIssueInfo(issueId) {
|
|
if (issueId) {
|
|
this.currentIssue = this.questionData.issues.find(v => v.iid === issueId)
|
|
this.currentIssueIndex = this.todayIssueList.findIndex(v => v.iid === issueId)
|
|
this.currentSelectedWors = this.currentIssue.wors.filter(v => this.replyInfo.filter(v => v.issueId === issueId).map(v => v.rwid).includes(v.wid))
|
|
}
|
|
},
|
|
changeIssue(isNext) {
|
|
const index = isNext ? this.currentIssueIndex + 1 : this.currentIssueIndex - 1
|
|
const issueId = this.todayIssueList[index].iid
|
|
this.currentSelectedWors = []
|
|
this.initCurrentIssueInfo(issueId)
|
|
},
|
|
getScore() {
|
|
let sum = 0
|
|
if (this.replyInfo && this.replyInfo.length > 0) {
|
|
this.todayIssueList.forEach(v => {
|
|
const correctWids = v.wors.filter(x => x.correct).map(x => x.wid)
|
|
const rwids = this.replyInfo.filter(x => x.issueId === v.iid).map(x => x.rwid)
|
|
const eq = correctWids.length === rwids.length && correctWids.sort().toString() === rwids.sort().toString();
|
|
if (eq) {
|
|
sum += v.fraction
|
|
}
|
|
})
|
|
}
|
|
return sum
|
|
},
|
|
async showWinInfo() {
|
|
const {data} = await $.post('/mobile/question/h5/winInfo', {questionId: this.questionData.qid})
|
|
const userId = "${@shiro.getPrincipalProperty('id')}"
|
|
const user = data.find(o => o.id === userId)
|
|
this.isWin = user !== undefined
|
|
this.winList = data
|
|
console.log(this.isWin)
|
|
vant.Dialog.alert({
|
|
message: '每人仅有一次中奖机会喔，点击查询获奖信息。'
|
|
}).then(() => {
|
|
this.winPopupShow = true
|
|
});
|
|
}
|
|
|
|
},
|
|
async created() {
|
|
this.id = GetQueryString("id")
|
|
await this.getQuestionData()
|
|
await this.getReply()
|
|
const {ctMode} = this.questionData
|
|
|
|
this.initCurrentIssueInfo(this.questionData.issues.find(v => v.displayDate && v.displayDate.includes(moment(new Date()).format('YYYY-MM-DD')))?.iid)
|
|
/* if (ctMode === 2) {
|
|
this.initCurrentIssueInfo(this.questionData.issues.find(v => v.displayDate && v.displayDate.includes(moment(new Date()).format('YYYY-MM-DD'))).iid)
|
|
} else {
|
|
this.initCurrentIssueInfo(this.questionData.issues[0].iid)
|
|
}*/
|
|
const {data: scoreMap} = await $.get('/mobile/question/h5/todayMaxScore', {questionId: this.questionData.qid})
|
|
const scoreValues = Object.values(scoreMap)
|
|
let msg = null
|
|
console.log(scoreValues)
|
|
if (scoreValues.length >= 1 && this.todayIssueList.map(x => x.iid).some(x => !this.replyInfo.map(v => v.issueId).includes(x))) {
|
|
console.log(111)
|
|
const maxScore = Math.max(...scoreValues)
|
|
msg = '您历史的最高分数为' + maxScore + '分！'
|
|
this.$modal.confirm(msg).then(async () => {
|
|
|
|
})
|
|
} else {
|
|
this.checkTodayReplyFinish()
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|