first commit
This commit is contained in:
@@ -0,0 +1,540 @@
|
||||
<!--#
|
||||
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>
|
||||
const 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 + ',是否重新答题？'
|
||||
}
|
||||
|
||||
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 = [...new Set(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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,464 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.middle-subject {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f6f7f9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle-subject-info-padding {
|
||||
padding: 10px;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
.middle-subject-info-scroll {
|
||||
/*height: 100%;*/
|
||||
height: calc(100vh - 110px);
|
||||
max-height: calc(100vh - 110px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.middle-subject-info-head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-subject-topic-icon {
|
||||
width: 30px;
|
||||
padding: 2px;
|
||||
font-size: 10px;
|
||||
background-color: #1678ff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.middle-subject-title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bolder;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.middle-subject-other {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.middle-subject-topic {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 1rem;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle-subject-topic-title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.middle-subject-topic-submit {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-subject-topic-desc {
|
||||
color: rgb(160, 160, 160);
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.itx_field {
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.middle-subject-topic-submit .u-btn {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.middle-subject-info-search {
|
||||
position: absolute;
|
||||
bottom: 45%;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
z-index: 999;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 20px rgb(230, 230, 230);
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.middle-subject-info-search-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
box-shadow: 0 0 10px #1678ff;
|
||||
border-radius: 20px 0 0 20px;
|
||||
background-color: #FFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.middle-subject-info-search-info {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
height: inherit;
|
||||
z-index: 999;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px #1678ff;
|
||||
border-radius: 20px 0 0 20px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 64px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 20px rgb(230, 230, 230);
|
||||
z-index: 999;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-save {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-save .van-button {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.wsm {
|
||||
max-height: 80px;
|
||||
/*overflow: scroll;*/
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.wsm * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wsm p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wsmPopup {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="middle-subject">
|
||||
<van-nav-bar title="在线调查" left-arrow
|
||||
@click-left="history.back()"></van-nav-bar>
|
||||
|
||||
<div class="middle-subject-info">
|
||||
<div class="middle-subject-info-scroll">
|
||||
<div class="middle-subject-info-padding">
|
||||
<div class="middle-subject-info-head">
|
||||
<div class="middle-subject-title">{{ questionData.qtitle }}</div>
|
||||
<div class="middle-subject-other">
|
||||
<template v-if="questionData.qlx!==3">
|
||||
<!-- <span>创建人：{{ questionData.username }}</span>-->
|
||||
<!-- <span>总题数：{{ issueList.length }}</span>-->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-subject-info-body">
|
||||
<div class="middle-subject-topic" v-for="(issue,issueIndex) in issueList" :key="issue.qid">
|
||||
<div v-if="!issue.iisdx" class="middle-subject-topic-icon">
|
||||
<span>多选</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<span v-if="issue.iisbd" style="color: red;">*</span>
|
||||
<span class="middle-subject-topic-title">
|
||||
{{ issueIndex + 1 }}.
|
||||
{{ removeHTMLTag(issue.iname) }}
|
||||
<span v-if="issue.iminselect">（最少选择：{{issue.iminselect}}）</span>
|
||||
<span v-if="issue.imaxselect">（最多选择：{{issue.imaxselect}}）</span>
|
||||
<div v-if="issue.its" class="middle-subject-topic-desc"
|
||||
style="margin-left: 17px;font-size: 12px;font-weight: 500;">
|
||||
{{ issue.its }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 选择题 -->
|
||||
<template v-if="issue.itx===1">
|
||||
<!-- 单选题 -->
|
||||
<van-radio-group v-if="issue.iisdx" v-model="issue.rwid" :disabled="replyFinish">
|
||||
<div v-for="(wor,worIndex) in issue.wors" :key="wor.wid">
|
||||
<van-radio :ref="wor.wid" :name="wor.wid">
|
||||
{{ letterList[worIndex] }}. {{ wor.wtxt }}
|
||||
</van-radio>
|
||||
<div class="middle-subject-topic-desc">
|
||||
<van-row gutter="16">
|
||||
<van-col span="8" v-if="wor.wimg">
|
||||
<image style="height: 80px;width: 80px"
|
||||
:src="'/file_server/fileStreamPreview?id='+wor.wimg"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</van-col>
|
||||
<van-col span="16" v-if="wor.wsm">
|
||||
<div class="wsm" v-html="wor.wsm" @click="openWsm(wor.wsm)"></div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
</van-radio-group>
|
||||
|
||||
<!-- 多选题 -->
|
||||
<van-checkbox-group v-else-if="!issue.iisdx" v-model="issue.rwid"
|
||||
:disabled="replyFinish"
|
||||
:max="issue.imaxselect ? issue.imaxselect:0">
|
||||
<div v-for="(wor,worIndex) in issue.wors" :key="worIndex">
|
||||
<van-checkbox :ref="wor.wid" :name="wor.wid" shape="square">
|
||||
{{ letterList[worIndex] }}. {{ wor.wtxt }}
|
||||
</van-checkbox>
|
||||
<div class="middle-subject-topic-desc">
|
||||
<van-row gutter="16">
|
||||
<van-col span="8" v-if="wor.wimg">
|
||||
<image style="height: 80px;width: 80px"
|
||||
:src="'/file_server/fileStreamPreview?id='+wor.wimg"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</van-col>
|
||||
<van-col span="16" v-if="wor.wsm">
|
||||
<div class="wsm" v-html=" wor.wsm" @click="openWsm(wor.wsm)"></div>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
|
||||
<!-- 填空题 -->
|
||||
<template v-if="issue.itx===2">
|
||||
<van-field v-model="issue.rval" type="text" border
|
||||
class="itx_field"
|
||||
cursor-spacing="100"
|
||||
:show-confirmbar="false"
|
||||
:disabled="replyFinish" :auto-height="true" maxlength="2000"></van-field>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-subject-info-footer">
|
||||
<div class="middle-subject-info-footer-save">
|
||||
<van-button size="medium" type="primary" @click="saveAnswer"
|
||||
:disabled="replyFinish">保存
|
||||
</van-button>
|
||||
<van-button size="medium" type="info" :disabled="replyFinish"
|
||||
@click="submitAnswer">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="wsmPopup" round :style="{ height: '80%',width:'90%' }">
|
||||
<div v-html="wsmContent" class="wsmPopup"></div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
questionData: {},
|
||||
issueList: [],
|
||||
replyInfo: [],
|
||||
wsmContent: null,
|
||||
wsmPopup: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
letterList() {
|
||||
const alphabet = Array.from(new Array(26), (ele, index) => {
|
||||
return String.fromCharCode(65 + index);
|
||||
})
|
||||
return alphabet
|
||||
},
|
||||
replyFinish() {
|
||||
return this.replyInfo.some(v => !v.save)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openWsm(content) {
|
||||
this.wsmContent = content
|
||||
this.wsmPopup = true
|
||||
},
|
||||
|
||||
async getQuestionData() {
|
||||
const resp = await $.get('/mobile/question/h5/questionInfo/' + this.id)
|
||||
this.questionData = resp.data
|
||||
this.issueList = this.questionData && this.questionData.issues
|
||||
},
|
||||
saveAnswer() {
|
||||
const formData = this.formatFormData()
|
||||
formData.forEach(v => v.save = true)
|
||||
this.$modal.loading('保存中')
|
||||
$.post('/mobile/question/h5/saveAnswer', {repliesArray: JSON.stringify(formData)}).then(res => {
|
||||
this.$modal.closeLoading()
|
||||
if (res.code === 0) {
|
||||
this.$modal.msg('保存成功')
|
||||
this.getReply()
|
||||
} else {
|
||||
this.$modal.msg('保存失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
submitAnswer() {
|
||||
const formData = this.formatFormData()
|
||||
formData.forEach(v => v.save = false)
|
||||
this.$modal.confirm('您确定要提交吗？提交后不能修改！').then(() => {
|
||||
this.$modal.loading('提交中')
|
||||
$.post('/mobile/question/h5/saveAnswer', {repliesArray: JSON.stringify(formData)}).then(res => {
|
||||
this.$modal.closeLoading()
|
||||
if (res.code === 0) {
|
||||
this.$modal.msg('提交成功')
|
||||
this.getReply()
|
||||
} else {
|
||||
this.$modal.msg('提交失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
validAnswer() {
|
||||
|
||||
},
|
||||
|
||||
//格式化提交数据
|
||||
formatFormData() {
|
||||
const formData = []
|
||||
this.issueList.forEach(v => {
|
||||
if (v.itx === 1 && v.iisdx) {
|
||||
//单选
|
||||
if (v.rwid) {
|
||||
formData.push({
|
||||
"rwid": v.rwid,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
}
|
||||
} else if (v.itx === 1 && !v.iisdx) {
|
||||
//多选
|
||||
if (v.rwid) {
|
||||
v.rwid.forEach(r => {
|
||||
formData.push({
|
||||
"rwid": r,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (v.itx === 2) {
|
||||
if (v.rval) {
|
||||
formData.push({
|
||||
"rval": v.rval,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return formData
|
||||
},
|
||||
//获取回答信息并赋值
|
||||
async getReply() {
|
||||
const resp = await $.get('/mobile/question/h5/answerInfo/' + this.id)
|
||||
this.replyInfo = resp.data
|
||||
this.issueList.forEach((issue, issueIndex) => {
|
||||
if (issue.itx === 1 && issue.iisdx) {
|
||||
//单选
|
||||
const rw = this.replyInfo.find(answer => answer.issueId === issue.iid)
|
||||
this.$set(this.issueList[issueIndex], 'rwid', rw ? rw.rwid : null)
|
||||
} else if (issue.itx === 1 && !issue.iisdx) {
|
||||
//多选
|
||||
const rws = this.replyInfo.filter(answer => answer.issueId === issue.iid).map(v => v.rwid)
|
||||
this.$set(this.issueList[issueIndex], 'rwid', rws ? rws : [])
|
||||
} else if (issue.itx === 2) {
|
||||
//填空题
|
||||
const rw = this.replyInfo.find(answer => answer.issueId === issue.iid)
|
||||
this.$set(this.issueList[issueIndex], 'rval', rw ? rw.rval : null)
|
||||
}
|
||||
})
|
||||
},
|
||||
defaultChecked() {
|
||||
const itx = this.issueList[0]['itx']
|
||||
const iisdx = this.issueList[0]['iisdx']
|
||||
|
||||
//判断用户是否选过 并且是选择题才可以
|
||||
if (this.replyInfo.length === 0 && itx === 1) {
|
||||
if (iisdx) {
|
||||
const defaultOption = this.issueList[0]['wors'].find(v => v.wismr === true)
|
||||
this.$set(this.issueList[0], 'rwid', defaultOption ? defaultOption.rwid : null)
|
||||
} else {
|
||||
const defaultOptionIds = this.issueList[0]['wors'].filter(v => v.wismr === true).map(v => v.wid)
|
||||
this.$set(this.issueList[0], 'rwid', defaultOptionIds ? defaultOptionIds : [])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.id = GetQueryString("id")
|
||||
await this.getQuestionData()
|
||||
await this.getReply()
|
||||
// await this.defaultChecked()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,105 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cell-card {
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
width: 90%;
|
||||
margin: 20px auto;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.text-overflow {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="问卷调查" left-arrow placeholder fixed @click-left="history.back()"></van-nav-bar>
|
||||
<div>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model="loading"
|
||||
:finished="finished"
|
||||
:finished-text="tableData.length>0?'没有更多了':''"
|
||||
@load="onLoad">
|
||||
<van-cell v-for="item in tableData" class="cell-card" @click="openView(item.qid)">
|
||||
<div class="text-overflow" style="font-weight: bold">{{item.qtitle}}</div>
|
||||
<div style="font-size: 12px" v-html="item.qsm"></div>
|
||||
</van-cell>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
<van-empty
|
||||
v-if="tableData.length==0"
|
||||
class="custom-image"
|
||||
image="/none.svg"
|
||||
description="暂无数据"
|
||||
></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
loading: false,
|
||||
finished: false,
|
||||
refreshing: false,
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
},
|
||||
tableData: [],
|
||||
appid: 'wx9fd2b07ea126f9f6',
|
||||
redirect_uri: location.protocol + "//" + location.host,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onRefresh() {
|
||||
this.tableData = []
|
||||
this.pageForm = {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
}
|
||||
await this.onLoad()
|
||||
setTimeout(() => {
|
||||
this.refreshing = false
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
async onLoad() {
|
||||
this.loading = true
|
||||
$.post('/mobile/question/list/pageData', this.pageForm).then(res => {
|
||||
this.loading = false
|
||||
if (res.code === 0) {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
openView(id) {
|
||||
window.location.href = this.redirect_uri + '/platform/zgfw/mobile/questionnaire?qid=' + id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,405 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.top-back {
|
||||
width: 100%;
|
||||
background-color: rgb(22, 120, 255);
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: fixed;
|
||||
left: 40px;
|
||||
top: 110px;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 46px - 44px);
|
||||
max-height: calc(100vh - 46px - 44px);
|
||||
overflow-y: scroll;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
.quizzes-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.quizzes-item-v {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.quizzes-item-info {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quizzes-item-info-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.quizzes-item-info-icon img {
|
||||
width: 6rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.quizzes-item-info-title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.quizzes-item-info-right {
|
||||
font-size: 13px;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.quizzes-item-info-tip {
|
||||
color: #606266;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.quizzes-item-info-text {
|
||||
color: #232426;
|
||||
}
|
||||
|
||||
.winPopup {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.winPopup img {
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.winPopup .van-popup__close-icon {
|
||||
|
||||
}
|
||||
|
||||
.iconDiv {
|
||||
color: white;
|
||||
font-size: 66px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.win_tag {
|
||||
position: relative;
|
||||
top: 16px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background-color: #1867b0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
top: 1px;
|
||||
border-radius: 6px;
|
||||
right: 5px;
|
||||
padding: 1px 7px;
|
||||
/*transform: rotate(0deg);*/
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="container">
|
||||
<van-nav-bar title="列表" left-arrow placeholder fixed
|
||||
@click-left="history.back()"></van-nav-bar>
|
||||
|
||||
<div class="search-fixed" style="z-index: 100">
|
||||
<van-dropdown-menu active-color="#1989fa">
|
||||
<van-dropdown-item v-model="queryForm.year" :options="yearList"
|
||||
@change="formChange"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="queryForm.status" :options="questionStatusList"
|
||||
@change="formChange"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<!-- <van-tabs v-model="queryForm.status" @change="doSearch">-->
|
||||
<!-- <van-tab title="进行中" name="1"></van-tab>-->
|
||||
<!-- <van-tab title="已结束" name="2"></van-tab>-->
|
||||
<!-- </van-tabs>-->
|
||||
|
||||
<div class="content" style="margin: 60px auto 80px auto">
|
||||
<div v-for="(item, index) in tableData" :id="item.qid" :key="item.qid">
|
||||
<div class="quizzes-item" @click="openAnswer(item)">
|
||||
<div>
|
||||
<div class="tag" style="background-color: #bc62c5" v-if="[1,3].includes(item.qflag)">活动未开启</div>
|
||||
<div class="tag"
|
||||
v-else-if="[2].includes(item.qflag) && moment(item.startTime).valueOf() > moment().valueOf()">
|
||||
活动未开始
|
||||
</div>
|
||||
<div class="tag"
|
||||
v-else-if="[2].includes(item.qflag) &&moment(item.startTime).valueOf() < moment().valueOf() && moment().valueOf() < moment(item.endTime).valueOf()">
|
||||
活动进行中
|
||||
</div>
|
||||
<div class="tag" style="background-color: #f14646"
|
||||
v-else-if="[2].includes(item.qflag) &&moment().valueOf() > moment(item.endTime).valueOf()">
|
||||
活动结束
|
||||
</div>
|
||||
</div>
|
||||
<div class="quizzes-item-v">
|
||||
<div class="quizzes-item-info">
|
||||
<div class="quizzes-item-info-icon">
|
||||
<image src="/assets/mobile/svg/question/quizzes2.svg"/>
|
||||
</div>
|
||||
<div class="quizzes-item-info-v">
|
||||
<div class="quizzes-item-info-title">{{ item.qtitle }}</div>
|
||||
<div class="quizzes-item-info-right">
|
||||
<span class="quizzes-item-info-tip">创建时间:</span>
|
||||
<span class="quizzes-item-info-text">
|
||||
{{ moment(item.createTime).format('YYYY年MM月DD日') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="quizzes-item-info-right" v-if="item.qlx!==4">
|
||||
<span class="quizzes-item-info-tip">题目数量:</span>
|
||||
<span class="quizzes-item-info-text">
|
||||
{{item.ctMode === 1 ? item.topicTotal : item.ctNum }}
|
||||
</span>
|
||||
<span class="quizzes-item-info-text" style="position: absolute;right: 0">
|
||||
<van-tag @click.stop="showWinInfo(item)" type="primary" class="win_tag"
|
||||
v-if="item.qlx===2 && item.isRaffle && moment(item.startTime).diff(moment(new Date().getTime()),'days') < 0">获奖信息</van-tag>
|
||||
<!-- v-if="moment(item.startTime).diff(moment(new Date().getTime()),'days') < 0"-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-empty v-if="finished && !tableData.length" text="暂无问卷" icon-size="320"
|
||||
src="/static/img/notData.svg">
|
||||
</van-empty>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="winPopupShow" class="winPopup"
|
||||
:style="{ height: '100%' }"
|
||||
>
|
||||
<div style="display: flex;align-items: center">
|
||||
<img v-if="isWin" width="100%" height="60%" src="/assets/mobile/img/question/win.png"/>
|
||||
<img v-if="!isWin" width="100%" height="50%" src="/assets/mobile/img/question/noWin1.png"/>
|
||||
</div>
|
||||
<div class="iconDiv">
|
||||
<div v-if="isWin" style="font-size: 14px;!important;">恭喜您中奖了，本次活动中奖机会只有一次喔！</div>
|
||||
<van-icon @click="winPopupShow = false" name="close"></van-icon>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
questionStatus: '1',
|
||||
scrollTop: 0,
|
||||
statusBarHeight: 0,
|
||||
pageLoading: false,
|
||||
queryForm: {
|
||||
year: '',
|
||||
status: null
|
||||
},
|
||||
winPopupShow: false,
|
||||
isWin: false,
|
||||
|
||||
questionStatusList: [
|
||||
{text: '全部', value: 1},
|
||||
{text: '未开启', value: 4},
|
||||
{text: '未开始', value: 5},
|
||||
{text: '进行中', value: 2},
|
||||
{text: '已结束', value: 3}
|
||||
]
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.init();
|
||||
this.queryForm.type = GetQueryString("type")
|
||||
this.doSearch()
|
||||
},
|
||||
methods: {
|
||||
formChange() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
async init() {
|
||||
this.$set(this.queryForm, "status", 1)
|
||||
this.$set(this.queryForm, "year", new Date().getFullYear())
|
||||
},
|
||||
async showWinInfo({qid}) {
|
||||
const {data} = await $.post('/mobile/question/h5/winInfo', {questionId: 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)
|
||||
this.winPopupShow = true
|
||||
|
||||
/*vant.Dialog.alert({
|
||||
message: '每人仅有一次中奖机会喔，立即查询获奖信息。'
|
||||
}).then(() => {
|
||||
this.winPopupShow = true
|
||||
});*/
|
||||
},
|
||||
pageData() {
|
||||
this.$modal.loading()
|
||||
this.tableLoading = true
|
||||
|
||||
$.post('/mobile/question/h5/pageData', {...this.pageForm, ...this.queryForm}).then(res => {
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
this.pageForm.totalCount = res.data.totalCount
|
||||
if (this.tableData.length === this.pageForm.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.tableLoading = false
|
||||
this.$modal.closeLoading()
|
||||
})
|
||||
|
||||
|
||||
// $.post('/activity/question/h5/pageData', this.pageForm, {
|
||||
// params: this.queryForm
|
||||
// }).then(res => {
|
||||
// this.tableData = this.tableData.concat(res.data.list)
|
||||
// this.pageForm.totalCount = res.data.totalCount
|
||||
// if (this.tableData.length === this.pageForm.totalCount) {
|
||||
// this.finished = true
|
||||
// } else {
|
||||
// this.pageForm.pageNumber++
|
||||
// }
|
||||
// this.tableLoading = false
|
||||
// this.$modal.closeLoading()
|
||||
// }).finally(() => {
|
||||
// this.tableLoading = false
|
||||
// this.finished = true
|
||||
// this.$modal.closeLoading()
|
||||
// })
|
||||
},
|
||||
|
||||
tabChange(index) {
|
||||
this.page.current = index;
|
||||
// this.refresh();
|
||||
},
|
||||
lower(e) {
|
||||
if (!this.finished) this.loadData();
|
||||
},
|
||||
|
||||
async hasPermissionByIssue(groupId) {
|
||||
const resp = await this.$http.get('/platform/question/applets/list/hasPermission', {
|
||||
params: {groupId: groupId}
|
||||
})
|
||||
return resp
|
||||
},
|
||||
|
||||
async openAnswer(item) {
|
||||
const {qid, qlx, qflag, activityUserScopeId} = item
|
||||
if (qflag !== 2) {
|
||||
this.$modal.msg('该活动未开启!')
|
||||
return
|
||||
}
|
||||
|
||||
const now = new Date().getTime()
|
||||
if (now < item.startTime || now > item.endTime) {
|
||||
this.$modal.msg('不在开启时间内!')
|
||||
return
|
||||
}
|
||||
|
||||
if (activityUserScopeId) {
|
||||
const resp = await $.get('/mobile/question/h5/checkPermission/' + activityUserScopeId)
|
||||
if (!resp.data) {
|
||||
this.$modal.msg('您无权限参加')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (qlx === 1) {
|
||||
//调查
|
||||
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
||||
} else if (qlx === 2) {
|
||||
//答题
|
||||
// location.href = '?id=' + qid
|
||||
location.href = '/mobile/question/h5/answer/index?id=' + qid
|
||||
|
||||
} else if (qlx === 3) {
|
||||
//购物
|
||||
location.href = '/mobile/question/h5/shop/index?id=' + qid
|
||||
} else if (qlx === 4) {
|
||||
//蛋糕卡
|
||||
location.href = '/mobile/question/h5/cake/index?id=' + qid
|
||||
}
|
||||
|
||||
|
||||
// if (qlx === 4) {
|
||||
// if (item.startTime > new Date().getTime() || item.endTime < new Date().getTime()) {
|
||||
// uni.showToast({
|
||||
// title: "不在开启时间内",
|
||||
// icon: 'none',
|
||||
// duration: 2000
|
||||
// });
|
||||
// return
|
||||
// }
|
||||
// if (item.startTime)
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/quizzes/cakeAnswer/cakeAnswer?id=" + id
|
||||
// });
|
||||
// } else if (qlx === 2) {
|
||||
// if (activityUserScopeId) {
|
||||
// const resp = await this.hasPermissionByIssue(activityUserScopeId)
|
||||
// if (resp.code !== 0) {
|
||||
// uni.showToast({
|
||||
// title: resp.msg,
|
||||
// icon: 'none',
|
||||
// duration: 2000
|
||||
// });
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/quizzes/choiceAnswer/choiceAnswer?id=" + id
|
||||
// });
|
||||
// } else {
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/quizzes/answer?id=" + id
|
||||
// });
|
||||
// }
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,416 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
<!--在线调查-->
|
||||
<style>
|
||||
.middle-subject {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #f6f7f9;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle-subject-info-padding {
|
||||
padding: 10px;
|
||||
background-color: #f6f7f9;
|
||||
}
|
||||
|
||||
.middle-subject-info-scroll {
|
||||
/*height: 100%;*/
|
||||
height: calc(100vh - 110px);
|
||||
max-height: calc(100vh - 110px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.middle-subject-info-head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-subject-topic-icon {
|
||||
width: 30px;
|
||||
padding: 2px;
|
||||
font-size: 10px;
|
||||
background-color: #1678ff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.middle-subject-title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: bolder;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.middle-subject-other {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.middle-subject-topic {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 1rem;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.middle-subject-topic-title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.middle-subject-topic-submit {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-subject-topic-desc {
|
||||
color: rgb(160, 160, 160);
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.itx_field {
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
color: #606266;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
outline: none;
|
||||
padding: 0 15px;
|
||||
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.middle-subject-topic-submit .u-btn {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.middle-subject-info-search {
|
||||
position: absolute;
|
||||
bottom: 45%;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
z-index: 999;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 20px rgb(230, 230, 230);
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.middle-subject-info-search-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
box-shadow: 0 0 10px #1678ff;
|
||||
border-radius: 20px 0 0 20px;
|
||||
background-color: #FFF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.middle-subject-info-search-info {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
height: inherit;
|
||||
z-index: 999;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px #1678ff;
|
||||
border-radius: 20px 0 0 20px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 64px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0 0 20px rgb(230, 230, 230);
|
||||
z-index: 999;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-save {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-save .van-button {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="middle-subject">
|
||||
<van-nav-bar title="在线调查" left-arrow
|
||||
@click-left="history.back()"></van-nav-bar>
|
||||
|
||||
<div class="middle-subject-info">
|
||||
<div class="middle-subject-info-scroll">
|
||||
<div class="middle-subject-info-padding">
|
||||
<div class="middle-subject-info-head">
|
||||
<div class="middle-subject-title">{{ questionData.qtitle }}</div>
|
||||
<div class="middle-subject-other">
|
||||
<template v-if="questionData.qlx!==3">
|
||||
<!-- <span>创建人：{{ questionData.username }}</span>-->
|
||||
<!-- <span>总题数：{{ issueList.length }}</span>-->
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-subject-info-body">
|
||||
<div class="middle-subject-topic" v-for="(issue,issueIndex) in issueList" :key="issue.qid">
|
||||
<div v-if="!issue.iisdx" class="middle-subject-topic-icon">
|
||||
<span>多选</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px">
|
||||
<span v-if="issue.iisbd" style="color: red;">*</span>
|
||||
<span class="middle-subject-topic-title">
|
||||
{{ issueIndex + 1 }}.
|
||||
{{ removeHTMLTag(issue.iname) }}
|
||||
<span v-if="issue.iminselect">（最少选择：{{issue.iminselect}}）</span>
|
||||
<span v-if="issue.imaxselect">（最多选择：{{issue.imaxselect}}）</span>
|
||||
<div v-if="issue.its" class="middle-subject-topic-desc"
|
||||
style="margin-left: 17px;font-size: 12px;font-weight: 500;">
|
||||
{{ issue.its }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 选择题 -->
|
||||
<template v-if="issue.itx===1">
|
||||
<!-- 单选题 -->
|
||||
<van-radio-group v-if="issue.iisdx" v-model="issue.rwid" :disabled="replyFinish">
|
||||
<div v-for="(wor,worIndex) in issue.wors" :key="wor.wid">
|
||||
<van-radio :ref="wor.wid" :name="wor.wid">
|
||||
{{ letterList[worIndex] }}. {{ wor.wtxt }}
|
||||
</van-radio>
|
||||
<div class="middle-subject-topic-desc">
|
||||
<van-row gutter="16">
|
||||
<van-col span="8" v-if="wor.wimg">
|
||||
<image style="height: 80px;width: 80px" :src="wor.wimg"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</van-col>
|
||||
<van-col span="16" v-if="wor.wsm">
|
||||
{{ wor.wsm }}
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
</van-radio-group>
|
||||
|
||||
<!-- 多选题 -->
|
||||
<van-checkbox-group v-else-if="!issue.iisdx" v-model="issue.rwid"
|
||||
:disabled="replyFinish"
|
||||
:max="issue.imaxselect ? issue.imaxselect:0">
|
||||
<div v-for="(wor,worIndex) in issue.wors" :key="worIndex">
|
||||
<van-checkbox :ref="wor.wid" :name="wor.wid" shape="square">
|
||||
{{ letterList[worIndex] }}. {{ wor.wtxt }}
|
||||
</van-checkbox>
|
||||
<div class="middle-subject-topic-desc">
|
||||
<van-row gutter="16">
|
||||
<van-col span="8" v-if="wor.wimg">
|
||||
<image style="height: 80px;width: 80px" :src="wor.wimg"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
</van-col>
|
||||
<van-col span="16" v-if="wor.wsm">
|
||||
{{ wor.wsm }}
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
|
||||
<!-- 填空题 -->
|
||||
<template v-if="issue.itx===2">
|
||||
<van-field v-model="issue.rval" type="text" border
|
||||
class="itx_field"
|
||||
cursor-spacing="100"
|
||||
:show-confirmbar="false"
|
||||
:disabled="replyFinish" :auto-height="true" maxlength="2000"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle-subject-info-footer">
|
||||
<div class="middle-subject-info-footer-save">
|
||||
<van-button size="medium" type="primary" @click="saveAnswer"
|
||||
:disabled="replyFinish">保存
|
||||
</van-button>
|
||||
<van-button size="medium" type="info" :disabled="replyFinish"
|
||||
@click="submitAnswer">
|
||||
提交
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
questionData: {},
|
||||
issueList: [],
|
||||
replyInfo: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
letterList() {
|
||||
const alphabet = Array.from(new Array(26), (ele, index) => {
|
||||
return String.fromCharCode(65 + index);
|
||||
})
|
||||
return alphabet
|
||||
},
|
||||
replyFinish() {
|
||||
return this.replyInfo.some(v => !v.save)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getQuestionData() {
|
||||
const resp = await $.get('/mobile/question/h5/questionInfo/' + this.id)
|
||||
this.questionData = resp.data
|
||||
this.issueList = this.questionData && this.questionData.issues
|
||||
},
|
||||
saveAnswer() {
|
||||
const formData = this.formatFormData()
|
||||
formData.forEach(v => v.save = true)
|
||||
this.$modal.loading('保存中')
|
||||
$.post('/mobile/question/h5/saveAnswer', {repliesArray: JSON.stringify(formData)}).then(res => {
|
||||
this.$modal.closeLoading()
|
||||
if (res.code === 0) {
|
||||
this.$modal.msg('保存成功')
|
||||
this.getReply()
|
||||
} else {
|
||||
this.$modal.msg('保存失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
submitAnswer() {
|
||||
const formData = this.formatFormData()
|
||||
formData.forEach(v => v.save = false)
|
||||
this.$modal.confirm('您确定要提交吗？提交后不能修改！').then(() => {
|
||||
this.$modal.loading('提交中')
|
||||
$.post('/mobile/question/h5/saveAnswer', {repliesArray: JSON.stringify(formData)}).then(res => {
|
||||
this.$modal.closeLoading()
|
||||
if (res.code === 0) {
|
||||
this.$modal.msg('提交成功')
|
||||
this.getReply()
|
||||
} else {
|
||||
this.$modal.msg('提交失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
validAnswer() {
|
||||
|
||||
},
|
||||
|
||||
//格式化提交数据
|
||||
formatFormData() {
|
||||
const formData = []
|
||||
this.issueList.forEach(v => {
|
||||
if (v.itx === 1 && v.iisdx) {
|
||||
//单选
|
||||
if (v.rwid) {
|
||||
formData.push({
|
||||
"rwid": v.rwid,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
}
|
||||
} else if (v.itx === 1 && !v.iisdx) {
|
||||
//多选
|
||||
if (v.rwid) {
|
||||
v.rwid.forEach(r => {
|
||||
formData.push({
|
||||
"rwid": r,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (v.itx === 2) {
|
||||
if (v.rval) {
|
||||
debugger
|
||||
formData.push({
|
||||
"rwid": v.wors[0].wid,
|
||||
"rval": v.rval,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
return formData
|
||||
},
|
||||
//获取回答信息并赋值
|
||||
async getReply() {
|
||||
const resp = await $.get('/mobile/question/h5/answerInfo/' + this.id)
|
||||
this.replyInfo = resp.data
|
||||
this.issueList.forEach((issue, issueIndex) => {
|
||||
if (issue.itx === 1 && issue.iisdx) {
|
||||
//单选
|
||||
const rw = this.replyInfo.find(answer => answer.issueId === issue.iid)
|
||||
this.$set(this.issueList[issueIndex], 'rwid', rw ? rw.rwid : null)
|
||||
} else if (issue.itx === 1 && !issue.iisdx) {
|
||||
//多选
|
||||
const rws = this.replyInfo.filter(answer => answer.issueId === issue.iid).map(v => v.rwid)
|
||||
this.$set(this.issueList[issueIndex], 'rwid', rws ? rws : [])
|
||||
} else if (issue.itx === 2) {
|
||||
//填空题
|
||||
const rw = this.replyInfo.find(answer => answer.issueId === issue.iid)
|
||||
this.$set(this.issueList[issueIndex], 'rval', rw ? rw.rval : null)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.id = GetQueryString("id")
|
||||
await this.getQuestionData()
|
||||
await this.getReply()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user