first commit
This commit is contained in:
@@ -0,0 +1,714 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Indie Flower';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(/assets/platform/fonts/m8JVjfNVeKWVnh3QMuKkFcZVaUuH.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
.page-survey {
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
}
|
||||
|
||||
.page-survey .survey-container {
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.survey-container .question-list {
|
||||
flex: auto;
|
||||
padding-bottom: 84px;
|
||||
}
|
||||
|
||||
.question {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.question-head {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.question-tags {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.question-title {
|
||||
position: relative;
|
||||
font-size: 1.125em;
|
||||
font-weight: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.question-seq {
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.question-title .text {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.question-body {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.question-footer {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.van-checkbox {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.page-control {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
column-gap: 20px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.survey-head-top {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.survey-head-top .randomCount {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
color: #000000;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 5px;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
.survey-head-top .score {
|
||||
/*font-family: 'Comic Sans MS', cursive;*/
|
||||
/*font-family: 'Indie Flower', cursive;*/
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
.survey-head {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.survey-head .title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.survey-head .desc {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="root">
|
||||
<m-page-loading v-if="mLoading"></m-page-loading>
|
||||
<van-nav-bar title="知识竞答" left-arrow placeholder fixed
|
||||
@click-left="history.go(-1)"></van-nav-bar>
|
||||
<template v-if="!mLoading">
|
||||
<div class="page-survey" style="touch-action: manipulation;min-height: 100vh;">
|
||||
<div class="survey-container">
|
||||
<!-- v-if="questionData.qlx==2 && (questionData.ctMode==1 || questionData.ctMode==2)"-->
|
||||
<div class="survey-head-top">
|
||||
<template>
|
||||
<div v-if="questionData.qlx==2 && questionData.ctMode==2 && isSameDay && randomCount > 0"
|
||||
class="randomCount"
|
||||
@click="openRandomCount">
|
||||
第<span>{{randomCount}}</span>轮
|
||||
</div>
|
||||
<div v-if="questionData.qlx==2 && (questionData.ctMode==1 || (questionData.ctMode==2 && !isSameDay))"
|
||||
class="randomCount"
|
||||
@click="openRandomCount">
|
||||
<!--定时定题 可切换时间查看以前的题目-->
|
||||
<span>{{currentDate}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="score" v-if="finishAnswer && ( currentScore || currentScore===0 )">
|
||||
{{questionData.calcScoreMode==1?'今日最高成绩':'得分'}}{{currentScore}}
|
||||
</div>
|
||||
<div class="timer" v-if="questionData.enableTimer && !finishAnswer">
|
||||
<span>剩余时间：{{remainder}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="survey-head">
|
||||
<div class="title">
|
||||
{{questionData.qtitle}}
|
||||
</div>
|
||||
<!-- <div class="desc">-->
|
||||
<!-- {{titleMsg}}-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="question-list">
|
||||
<section v-for="(issue,issueIdx) in issueList" :key="issue.iid" class="question"
|
||||
:id="'issue'+issue.iid">
|
||||
<div class="question-head">
|
||||
<div class="question-tags">
|
||||
<template v-if="issue.itx===1">
|
||||
<van-tag :type="issue.iisdx?'primary':'warning'" size="large">
|
||||
{{issue.iisdx?'单选':'多选'}}
|
||||
</van-tag>
|
||||
</template>
|
||||
<!-- <van-tag v-if="issue.fraction" type="primary" size="large">{{issue.fraction}}分-->
|
||||
<!-- </van-tag>-->
|
||||
</div>
|
||||
<h2 class="question-title">
|
||||
<span class="question-seq">
|
||||
<b>
|
||||
{{issueIdx+1}}.
|
||||
</b>
|
||||
</span>
|
||||
<div class="text" v-html="issue.iname"></div>
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
<div class="question-body">
|
||||
<van-checkbox-group v-model="issue.userSelect" :ref="'checkboxGroup'+issue.iid">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
v-for="(item,index) in issue.wors"
|
||||
clickable
|
||||
:key="item"
|
||||
:title="item.wtxt"
|
||||
@click="cellToggle(issue,item.wid)"
|
||||
>
|
||||
<template #label v-if="finishAnswer || finishAllAnswer">
|
||||
<div>
|
||||
{{item.correct?'正确答案':''}}
|
||||
</div>
|
||||
</template>
|
||||
<template #icon>
|
||||
<van-checkbox :name="item.wid" :ref="'checkboxes'+item.wid"
|
||||
:disabled="finishAnswer || finishAllAnswer"
|
||||
:shape="issue.iisdx?'round':'square'"></van-checkbox>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
</div>
|
||||
<div class="question-footer" v-if="finishAnswer || finishAllAnswer">
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;"
|
||||
:style="{color:(issue.isEqual?'#15db81':'red')}">
|
||||
{{issue.isEqual?'回答正确':'回答错误'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page-control" v-if="!finishAnswer">
|
||||
<!--非计时模式才能保存 否则没意义了-->
|
||||
<van-button type="info" block @click="save()" v-if="!questionData.enableTimer">保存</van-button>
|
||||
<van-button type="info" block @click="submit()">提交</van-button>
|
||||
</div>
|
||||
<div class="page-control" style="grid-template-columns: auto"
|
||||
v-if="canAnswerAgain && finishAnswer && moment().format('YYYY-MM-DD') === currentDate">
|
||||
<van-button type="info" block @click="answerAgain">
|
||||
再答一次
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<van-action-sheet
|
||||
v-model="randomCountSheetShow"
|
||||
:actions="randomActions"
|
||||
@select="randomCountSelect"
|
||||
cancel-text="取消"
|
||||
close-on-click-action
|
||||
></van-action-sheet>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const BASE_URL = '/mobile/question/h5'
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
questionData: {
|
||||
issues: []
|
||||
},
|
||||
currentIssueIndex: 0,
|
||||
replyInfo: [],
|
||||
finishAnswer: false,
|
||||
finishAllAnswer: false,
|
||||
mLoading: true,
|
||||
|
||||
//用户已答题总轮数
|
||||
randomCount: null,
|
||||
currentRandomCountScore: 0,
|
||||
sumScore: 0,
|
||||
randomCountSheetShow: false,
|
||||
randomActions: [],
|
||||
currentRandomCount: null,
|
||||
|
||||
//能否再次答题
|
||||
canAnswerAgain: false,
|
||||
|
||||
//当前的时间（针对定时定题）
|
||||
currentDate: moment().format('YYYY-MM-DD'),
|
||||
|
||||
//当前分数
|
||||
currentScore: null,
|
||||
|
||||
//获取用户已回答的轮数 针对单天随机
|
||||
userHasAnswerRandomNum: 0,
|
||||
|
||||
//倒计时计时器
|
||||
timerInterval: null,
|
||||
//答题时间（使用秒）
|
||||
countDownSeconds: 0,
|
||||
//剩余时间
|
||||
remainder: null
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
issueList() {
|
||||
return this.questionData.issues
|
||||
},
|
||||
titleMsg() {
|
||||
const radios = this.issueList.filter(v => v.itx === 1 && v.iisdx)
|
||||
const checkBoxes = this.issueList.filter(v => v.itx === 1 && !v.iisdx)
|
||||
|
||||
const radioScore = radios && radios.length > 0 ? radios[0].fraction : 0
|
||||
const checkBoxesScore = checkBoxes && checkBoxes.length > 0 ? checkBoxes[0].fraction : 0
|
||||
|
||||
const radioScoreSum = radios.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)
|
||||
const checkBoxesScoreSum = checkBoxes.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)
|
||||
|
||||
const sumScore = radioScoreSum + checkBoxesScoreSum
|
||||
|
||||
let radiosText = ''
|
||||
let checkBoxesText = ''
|
||||
|
||||
if (radios && radios.length > 0) {
|
||||
radiosText = "单选题" + radios.length + "题，每题" + radioScore + "分，合计" + radioScoreSum + "分；"
|
||||
}
|
||||
if (checkBoxes && checkBoxes.length > 0) {
|
||||
checkBoxesText = "多选题" + checkBoxes.length + "题，每题" + checkBoxesScore + "分，合计" + checkBoxesScoreSum + "分；总分" + sumScore + "分。"
|
||||
}
|
||||
return "说明：" + radiosText + checkBoxesText
|
||||
},
|
||||
|
||||
fullScore() {
|
||||
return this.issueList.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
|
||||
},
|
||||
radioNum() {
|
||||
return this.issueList.filter(v => v.idx === 1 && v.iisdx).map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
|
||||
},
|
||||
checkBoxNum() {
|
||||
|
||||
},
|
||||
|
||||
//判断是否为同一天
|
||||
isSameDay() {
|
||||
if (this.questionData.startTime && this.questionData.endTime) {
|
||||
return moment(this.questionData.startTime).isSame(moment(this.questionData.endTime), 'day')
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
openRandomCount() {
|
||||
this.randomCountSheetShow = true
|
||||
this.randomActions = []
|
||||
|
||||
if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
|
||||
for (let i = 0; i < this.userHasAnswerRandomNum; i++) {
|
||||
this.randomActions.push({
|
||||
name: '第' + (i + 1) + '轮',
|
||||
val: i + 1
|
||||
})
|
||||
}
|
||||
} else if (this.questionData.qlx == 2 && (this.questionData.ctMode == 1 || (this.questionData.ctMode == 2 && !this.isSameDay))) {
|
||||
const {startTime, endTime} = this.questionData
|
||||
const startMoment = moment(startTime)
|
||||
const endMoment = moment(endTime)
|
||||
const now = moment()
|
||||
// 计算两个日期之间相差的天数
|
||||
const daysDifference = endMoment.diff(startMoment, 'days')
|
||||
for (let i = 0; i <= daysDifference; i++) {
|
||||
this.randomActions.push({
|
||||
name: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
|
||||
val: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
|
||||
disabled: moment(startMoment.clone().add(i, 'days').format('YYYY-MM-DD')).isAfter(now)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
async randomCountSelect(val) {
|
||||
if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
|
||||
this.randomCount = val.val
|
||||
} else if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && !this.isSameDay) {
|
||||
this.currentDate = val.val
|
||||
} else if (this.questionData.qlx == 2 && this.questionData.ctMode == 1) {
|
||||
this.currentDate = val.val
|
||||
}
|
||||
await this.getQuestionData()
|
||||
await this.checkUserFinishAnswer()
|
||||
await this.checkCanAnswerAgain()
|
||||
await this.getScore()
|
||||
},
|
||||
|
||||
async getQuestionData() {
|
||||
const resp = await $.get(BASE_URL + '/questionInfo/' + this.id, {
|
||||
currentDate: this.currentDate,
|
||||
randomCount: this.randomCount
|
||||
})
|
||||
this.questionData = resp.data
|
||||
},
|
||||
cellToggle(issue, worId) {
|
||||
if (this.finishAnswer || this.finishAllAnswer) {
|
||||
return
|
||||
}
|
||||
this.toggle(issue, worId)
|
||||
},
|
||||
|
||||
toggle(issue, worId) {
|
||||
//单选
|
||||
if (issue.iisdx) {
|
||||
vue.$refs['checkboxGroup' + issue.iid][0].toggleAll(false)
|
||||
} else {
|
||||
|
||||
}
|
||||
console.log(issue.userSelect)
|
||||
this.$refs['checkboxes' + worId][0].toggle()
|
||||
setTimeout(() => {
|
||||
console.log(issue.userSelect)
|
||||
})
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$modal.confirm('保存后下次可继续做答，您确定要保存吗？').then(async () => {
|
||||
const replies = this.questionData.issues.map(v => {
|
||||
return {
|
||||
qid: v.iid,
|
||||
issueId: v.iid,
|
||||
userSelect: v.userSelect,
|
||||
}
|
||||
})
|
||||
|
||||
const {code} = await $.post(BASE_URL + '/saveAnswer', {
|
||||
replies: JSON.stringify(replies),
|
||||
questionId: this.questionData.qid,
|
||||
isSave: true,
|
||||
randomCount: this.randomCount
|
||||
})
|
||||
this.$modal.closeLoading()
|
||||
if (code === 0) {
|
||||
this.$modal.msg('保存成功')
|
||||
} else {
|
||||
this.$modal.msg('保存失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
submit() {
|
||||
const iids = this.questionData.issues.filter(v => !v.userSelect).map(v => v.iid)
|
||||
|
||||
if (iids.length > 0) {
|
||||
this.$toast('您还有' + iids.length + '题未作答，请答完后再提交！')
|
||||
document.getElementById('issue' + iids[0]).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
'inline': 'start'
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
const msg = '一旦提交不可修改，您确定要提交吗？'
|
||||
|
||||
this.$modal.confirm(msg).then(async () => {
|
||||
this.autoSubmit()
|
||||
// const replies = this.questionData.issues.map(v => {
|
||||
// return {
|
||||
// qid: this.id,
|
||||
// issueId: v.iid,
|
||||
// userSelect: v.userSelect,
|
||||
// }
|
||||
// })
|
||||
//
|
||||
// const {code} = await $.post(BASE_URL + '/saveAnswer', {
|
||||
// replies: JSON.stringify(replies),
|
||||
// questionId: this.questionData.qid,
|
||||
// isSave: false,
|
||||
// randomCount: this.randomCount
|
||||
// })
|
||||
// this.$modal.closeLoading()
|
||||
// if (code === 0) {
|
||||
// this.$modal.msg('提交成功')
|
||||
// await this.getUserHasAnswerRandomNum()
|
||||
// await this.checkUserFinishAnswer()
|
||||
// await this.getReply()
|
||||
// await this.assignmentAnswer()
|
||||
// await this.checkUserFinishAnswer()
|
||||
// await this.checkCanAnswerAgain()
|
||||
// await this.getScore()
|
||||
// }
|
||||
})
|
||||
},
|
||||
|
||||
async autoSubmit() {
|
||||
const replies = this.questionData.issues.map(v => {
|
||||
return {
|
||||
qid: this.id,
|
||||
issueId: v.iid,
|
||||
userSelect: v.userSelect,
|
||||
}
|
||||
})
|
||||
|
||||
let takeTime = null
|
||||
if (this.questionData.enableTimer) {
|
||||
takeTime = this.questionData.timerMinute * 60 - this.countDownSeconds
|
||||
}
|
||||
|
||||
const {code} = await $.post(BASE_URL + '/saveAnswer', {
|
||||
replies: JSON.stringify(replies),
|
||||
questionId: this.questionData.qid,
|
||||
isSave: false,
|
||||
randomCount: this.randomCount,
|
||||
takeTime: takeTime
|
||||
})
|
||||
this.$modal.closeLoading()
|
||||
if (code === 0) {
|
||||
this.$modal.msg('提交成功')
|
||||
await this.getUserHasAnswerRandomNum()
|
||||
await this.checkUserFinishAnswer()
|
||||
await this.getReply()
|
||||
await this.assignmentAnswer()
|
||||
await this.checkUserFinishAnswer()
|
||||
await this.checkCanAnswerAgain()
|
||||
await this.getScore()
|
||||
}
|
||||
},
|
||||
|
||||
//获取回答信息
|
||||
async getReply() {
|
||||
const resp = await $.get(BASE_URL + '/answerInfo/' + this.id, {
|
||||
randomCount: this.randomCount,
|
||||
currentDate: this.currentDate
|
||||
})
|
||||
this.replyInfo = resp.data
|
||||
},
|
||||
//用户是否全部答完提交
|
||||
async checkUserFinishAnswer() {
|
||||
this.mLoading = true
|
||||
const resp = await $.get(BASE_URL + '/checkUserFinishAnswer', {
|
||||
questionId: this.id,
|
||||
randomCount: this.randomCount,
|
||||
currentDate: this.currentDate
|
||||
})
|
||||
this.mLoading = false
|
||||
this.finishAnswer = resp.data
|
||||
await this.getReply()
|
||||
await this.assignmentAnswer()
|
||||
},
|
||||
|
||||
//答案赋值
|
||||
assignmentAnswer() {
|
||||
this.questionData.issues.forEach(issue => {
|
||||
const rwids = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
|
||||
rwids.forEach(rwid => {
|
||||
this.toggle(issue, rwid)
|
||||
})
|
||||
const wids = issue.wors.filter(v => v.correct).map(v => v.wid)
|
||||
const userSelects = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
|
||||
const isEqual = wids.length === userSelects.length && wids.every(value => userSelects.includes(value))
|
||||
issue.isEqual = isEqual
|
||||
})
|
||||
},
|
||||
|
||||
answerAgain() {
|
||||
if(this.questionData.ctMode===3){
|
||||
$.post(BASE_URL + '/answerAgainCommon', {id: this.id}).then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.questionData = resp.data
|
||||
this.finishAnswer = false
|
||||
setTimeout(() => {
|
||||
this.questionData.issues.forEach(issue => {
|
||||
issue.wors.forEach(wor => {
|
||||
this.$refs['checkboxes' + wor.wid][0].toggle(false)
|
||||
})
|
||||
})
|
||||
}, 0)
|
||||
this.checkTimer()
|
||||
}
|
||||
})
|
||||
|
||||
// location.reload()
|
||||
// this.finishAnswer = false
|
||||
// setTimeout(() => {
|
||||
// this.questionData.issues.forEach(issue => {
|
||||
// issue.wors.forEach(wor => {
|
||||
// this.$refs['checkboxes' + wor.wid][0].toggle(false)
|
||||
// })
|
||||
// })
|
||||
// }, 0)
|
||||
// this.checkTimer()
|
||||
}else{
|
||||
this.finishAnswer = false
|
||||
setTimeout(() => {
|
||||
this.questionData.issues.forEach(issue => {
|
||||
issue.wors.forEach(wor => {
|
||||
this.$refs['checkboxes' + wor.wid][0].toggle(false)
|
||||
})
|
||||
})
|
||||
}, 0)
|
||||
this.checkTimer()
|
||||
}
|
||||
},
|
||||
|
||||
async getUserHasAnswerRandomNum() {
|
||||
const resp = await $.get(BASE_URL + '/getUserHasAnswerRandomNum', {
|
||||
questionId: this.id
|
||||
})
|
||||
this.userHasAnswerRandomNum = resp.data
|
||||
this.randomCount = this.userHasAnswerRandomNum
|
||||
},
|
||||
|
||||
async checkCanAnswerAgain() {
|
||||
const resp = await $.get(BASE_URL + '/checkCanAnswerAgain', {
|
||||
questionId: this.id,
|
||||
randomCount: this.randomCount,
|
||||
currentDate: this.currentDate
|
||||
})
|
||||
this.canAnswerAgain = resp.data
|
||||
},
|
||||
|
||||
async getScore() {
|
||||
const resp = await $.get(BASE_URL + '/getScore/', {
|
||||
questionId: this.id,
|
||||
randomCount: this.randomCount,
|
||||
currentDate: this.currentDate
|
||||
})
|
||||
this.currentScore = resp.data
|
||||
},
|
||||
checkTimer() {
|
||||
if(this.questionData.enableTimer){
|
||||
if (this.timerInterval) {
|
||||
clearInterval(this.timerInterval)
|
||||
}
|
||||
if (!this.finishAnswer) {
|
||||
this.$dialog.alert({
|
||||
title: '提示',
|
||||
message: '本次答题时间' + this.questionData.timerMinute + '分钟，请尽快完成！'
|
||||
}).then(() => {
|
||||
this.countDownSeconds = this.questionData.timerMinute * 60
|
||||
this.updateCountdown()
|
||||
this.timerInterval = setInterval(() => {
|
||||
this.updateCountdown()
|
||||
}, 1000)
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateCountdown() {
|
||||
// 计算剩余的分钟和秒数
|
||||
let mins = Math.floor(this.countDownSeconds / 60)
|
||||
let secs = this.countDownSeconds % 60
|
||||
// 格式化时间，确保分钟和秒数始终是两位数
|
||||
mins = mins < 10 ? '0' + mins : mins;
|
||||
secs = secs < 10 ? '0' + secs : secs;
|
||||
this.remainder = mins + ':' + secs
|
||||
// 如果倒计时结束，显示结束信息
|
||||
if (this.countDownSeconds <= 0) {
|
||||
this.remainder = '时间到'
|
||||
clearInterval(this.timerInterval)
|
||||
this.$dialog.alert({
|
||||
title: '提示',
|
||||
message: '答题时间到，请点击确认提交答案！'
|
||||
}).then(() => {
|
||||
this.autoSubmit()
|
||||
})
|
||||
} else {
|
||||
this.countDownSeconds = this.countDownSeconds - 1
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
if (this.timerInterval) {
|
||||
clearInterval(this.timerInterval)
|
||||
}
|
||||
this.id = GetQueryString("id")
|
||||
await this.getQuestionData()
|
||||
await this.checkCanAnswerAgain()
|
||||
await this.getUserHasAnswerRandomNum()
|
||||
await this.checkUserFinishAnswer()
|
||||
await this.getScore()
|
||||
await this.checkTimer()
|
||||
this.mLoading = false
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('pageshow', async e => {
|
||||
if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
|
||||
vue.id = GetQueryString("id")
|
||||
await vue.getQuestionData()
|
||||
// await vue.getRanDomModeNum()
|
||||
// await vue.getSumScore()
|
||||
// await vue.checkUserFinishAnswer()
|
||||
// await vue.getCurrentRandomCountScore()
|
||||
this.mLoading = false
|
||||
}
|
||||
})
|
||||
|
||||
</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,398 @@
|
||||
<!--#
|
||||
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: 15px;
|
||||
}
|
||||
|
||||
.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-v{
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="container">
|
||||
<van-sticky>
|
||||
<van-nav-bar title="列表" left-arrow
|
||||
@click-left="history.back()"></van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<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">
|
||||
<div v-for="(item, index) in tableData" :id="item.qid" :key="item.qid">
|
||||
<div class="quizzes-item" @click="openAnswer(item)">
|
||||
<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.startTime).format('YYYY年MM月DD日') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="quizzes-item-info-right">
|
||||
<span class="quizzes-item-info-tip">活动结束时间:</span>
|
||||
<span class="quizzes-item-info-text">
|
||||
{{ moment(item.endTime).format('YYYY年MM月DD日') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="quizzes-item-info-right" v-if="item.isRaffle">
|
||||
<!-- <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;bottom: 0">
|
||||
<!-- <van-tag @click.stop="showWinInfo(item)" type="primary" class="win_tag"-->
|
||||
<!-- v-if="item.qlx===2 && item.isRaffle && item.zjTotal>0">获奖信息</van-tag>-->
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: end" v-if="item.isRaffle">
|
||||
<!-- <van-button size="small" type="info" round color="#1867b0" @click.stop="receivePrize(item)">领取奖品</van-button>-->
|
||||
</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>
|
||||
|
||||
<van-dialog v-model="tipShow" title="提示">
|
||||
<div>活动期间，每天答题次数不限，每天答题的最终成绩取最高分。每天答题得90分(含)以上者，可参加线上抽奖活动。</div>
|
||||
<div>6月17日至6月23日每天线上抽取“幸运奖”100名'。</div>
|
||||
</van-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
questionStatus: '1',
|
||||
scrollTop: 0,
|
||||
statusBarHeight: 0,
|
||||
pageLoading: false,
|
||||
queryForm: {
|
||||
status: '1'
|
||||
},
|
||||
winPopupShow: false,
|
||||
isWin: false,
|
||||
|
||||
tipShow:false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.queryForm.type = GetQueryString("type")
|
||||
this.doSearch()
|
||||
},
|
||||
methods: {
|
||||
receivePrize(item){
|
||||
location.href = '/mobile/question/h5/answer/raffle?qid='+item.qid
|
||||
},
|
||||
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 (qid === '827cc4ef9cde47ed97bc21f6be75f91a') {
|
||||
this.$dialog.alert({
|
||||
title:'提示',
|
||||
messageAlign:'left',
|
||||
message: '<div style="text-indent: 2em;">活动期间，每天答题次数不限，每天答题的最终成绩取最高分。每天答题得90分(含)以上者，可参加线上抽奖活动。<div>' +
|
||||
'<div style="text-indent: 2em;">6月17日至6月23日每天线上抽取“幸运奖”100名。</div>'+
|
||||
'<div style="text-indent: 2em;">答题并提交成功后，可于次日查看获奖信息。</div>'
|
||||
,
|
||||
}).then(()=>{
|
||||
if (qlx === 1) {
|
||||
//调查
|
||||
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
||||
} else if (qlx === 2) {
|
||||
//答题
|
||||
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
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (qlx === 1) {
|
||||
//调查
|
||||
location.href = '/mobile/question/h5/poll/index?id=' + qid
|
||||
} else if (qlx === 2) {
|
||||
//答题
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,558 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.reward-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 15px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.employee-id {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.user-detail-card {
|
||||
background: #f8f8ff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.detail-item.full-width {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.detail-item .van-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.detail-item .label {
|
||||
color: #666;
|
||||
margin-right: 8px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.detail-item .value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #eee;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #68a7c2 0%, #157ea9 100%);
|
||||
padding: 20px;
|
||||
color: white;
|
||||
border-radius: 0 0 30px 30px;
|
||||
position: relative;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 25px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-text h1 {
|
||||
font-size: 32px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-text p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin: 20px 16px 20px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.survey-info {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.survey-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.survey-details {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 12px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.detail-item .van-icon {
|
||||
margin-right: 8px;
|
||||
color: #1867b0;
|
||||
}
|
||||
|
||||
.reward-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 30px 0;
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
margin-bottom: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-item.active .status-icon {
|
||||
color: #1867b0;
|
||||
}
|
||||
|
||||
.status-text h3 {
|
||||
font-size: 16px;
|
||||
margin: 0 0 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-text p {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.receive-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.receive-time .van-icon {
|
||||
margin-right: 8px;
|
||||
color: #1867b0;
|
||||
}
|
||||
|
||||
.action-area {
|
||||
padding: 20px 16px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-area .van-button {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.qrcode-popup {
|
||||
width: 90%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.qrcode-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.qrcode-title .van-icon {
|
||||
margin-right: 8px;
|
||||
color: #1867b0;
|
||||
}
|
||||
|
||||
.qrcode-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.qrcode-tips {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.qrcode-tips p {
|
||||
margin: 8px 0;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.qrcode-tips .sub-tips {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 主题色按钮样式 */
|
||||
.van-button--primary {
|
||||
background: #1867b0;
|
||||
border-color: #1867b0;
|
||||
}
|
||||
|
||||
.van-button--primary:active {
|
||||
background: #1165b2;
|
||||
border-color: #1165b2;
|
||||
}
|
||||
|
||||
|
||||
.success-status{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="领取奖品" left-arrow placeholder fixed @click-left="history.go(-1)"></van-nav-bar>
|
||||
|
||||
<div class="reward-page">
|
||||
<!-- 问卷信息卡片 -->
|
||||
<div class="content-card">
|
||||
<div class="survey-info">
|
||||
<div class="survey-title">{{ questionTitle }}</div>
|
||||
<div class="survey-details">
|
||||
<!-- <div class="detail-item">-->
|
||||
<!-- <van-icon name="clock-o"></van-icon>-->
|
||||
<!-- <span>中奖日期：{{ moment(surveyInfo.winDate).format('YYYY-MM-DD') }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="detail-item">
|
||||
<van-icon name="medal-o"></van-icon>
|
||||
<span>答题得分：{{ surveyInfo.score }}分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="user-detail-card">
|
||||
<div class="detail-row">
|
||||
<div class="detail-item full-width">
|
||||
<van-icon name="contact" color="#1867b0"></van-icon>
|
||||
<span class="label">姓名</span>
|
||||
<span class="value">{{ surveyInfo.userName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-item full-width">
|
||||
<van-icon name="card" color="#1867b0"></van-icon>
|
||||
<span class="label">工号</span>
|
||||
<span class="value">{{ surveyInfo.loginName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-item full-width">
|
||||
<van-icon name="home-o" color="#1867b0"></van-icon>
|
||||
<span class="label">单位</span>
|
||||
<span class="value">{{ surveyInfo.unitName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<div class="detail-item full-width">
|
||||
<van-icon name="home-o" color="#1867b0"></van-icon>
|
||||
<span class="label">工会</span>
|
||||
<span class="value">{{ surveyInfo.unionName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 领奖状态 -->
|
||||
<div class="reward-status">
|
||||
<div class="status-item" :class="{ active: hasQualification }">
|
||||
<div class="status-icon">
|
||||
<van-icon name="certificate" size="28"></van-icon>
|
||||
</div>
|
||||
<div class="status-text">
|
||||
<h3>领奖资格</h3>
|
||||
<p>{{ hasQualification ? '已获得' : '未获得' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item" :class="{ active: hasReceive }">
|
||||
<div class="status-icon">
|
||||
<van-icon name="gift-o" size="28"></van-icon>
|
||||
</div>
|
||||
<div class="status-text">
|
||||
<h3>领奖状态</h3>
|
||||
<p>{{ hasReceive ? '已领取':'未领取' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 领取时间 -->
|
||||
<div class="receive-time">
|
||||
<van-icon name="underway-o"></van-icon>
|
||||
<span>领取时间：{{ surveyInfo.receiveTime || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 领奖按钮 -->
|
||||
<div class="action-area">
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
round
|
||||
:disabled="!canReceive"
|
||||
@click="handleReceive"
|
||||
size="large"
|
||||
>
|
||||
{{ buttonText }}
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 二维码弹窗 -->
|
||||
<van-popup v-model="showQRCode" round class="qrcode-popup" @closed="handlePopupClosed">
|
||||
<div class="qrcode-container">
|
||||
<div class="qrcode-title">
|
||||
<van-icon name="qr" size="24"></van-icon>
|
||||
<span>领奖二维码</span>
|
||||
</div>
|
||||
<div class="qrcode-wrapper">
|
||||
<img :src="qrcodeText" alt="" style="width: 300px;height: 300px"/>
|
||||
</div>
|
||||
|
||||
<div class="status-wrapper">
|
||||
<van-loading v-if="checking" size="24px" vertical>
|
||||
等待工作人员扫码
|
||||
</van-loading>
|
||||
<div v-else-if="surveyInfo.isReceive" class="success-status">
|
||||
<van-icon name="checked" color="#07c160" size="24px"></van-icon>
|
||||
<span>领取成功</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qrcode-tips">
|
||||
<p>请到工会出示二维码领取奖品</p>
|
||||
<p class="sub-tips">工作时间：周一至周五 9:00-17:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
questionId: GetQueryString("qid"),
|
||||
questionTitle: null,
|
||||
surveyInfo: {
|
||||
title: '',
|
||||
score: 0
|
||||
},
|
||||
showQRCode: false,
|
||||
qrcodeText: '',
|
||||
|
||||
checking: false
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasQualification() {
|
||||
return !$.isEmptyObject(this.surveyInfo)
|
||||
},
|
||||
canReceive() {
|
||||
return this.hasQualification && !this.isReceive
|
||||
},
|
||||
hasReceive() {
|
||||
if (this.hasQualification) {
|
||||
return this.surveyInfo.isReceive
|
||||
}
|
||||
},
|
||||
|
||||
buttonText() {
|
||||
if (!this.hasQualification) return '暂无领奖资格'
|
||||
if (this.hasReceive) return '已领取奖品'
|
||||
return '立即领取奖品'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleReceive() {
|
||||
if(this.hasReceive){
|
||||
this.$toast('您已经领取奖品')
|
||||
return
|
||||
}
|
||||
|
||||
this.showQRCode = true
|
||||
this.qrcodeText = jrQrcode.getQrBase64(this.surveyInfo.id)
|
||||
this.checking = true
|
||||
// 开始轮询检查领取状态
|
||||
this.startCheckingStatus()
|
||||
},
|
||||
|
||||
// 开始轮询检查
|
||||
startCheckingStatus() {
|
||||
// 清除可能存在的旧定时器
|
||||
this.clearCheckTimer()
|
||||
// 设置新的轮询定时器
|
||||
this.checkTimer = setInterval(async () => {
|
||||
try {
|
||||
const {data} = await $.get('/mobile/question/h5/surveyInfo', {questionId: this.questionId})
|
||||
this.surveyInfo = data
|
||||
if (this.surveyInfo && this.surveyInfo.isReceive) {
|
||||
this.checking = false
|
||||
// 清除定时器
|
||||
this.clearCheckTimer()
|
||||
// 显示成功提示
|
||||
this.$toast.success('领取成功！')
|
||||
// 延迟关闭弹窗
|
||||
// setTimeout(() => {
|
||||
// this.showQRCode = false
|
||||
// }, 1500)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查领取状态失败：', error)
|
||||
this.$toast('检查领取状态失败，请重试')
|
||||
this.clearCheckTimer()
|
||||
}
|
||||
}, 3000)
|
||||
},
|
||||
// 清除定时器
|
||||
clearCheckTimer() {
|
||||
if (this.checkTimer) {
|
||||
clearInterval(this.checkTimer)
|
||||
this.checkTimer = null
|
||||
}
|
||||
},
|
||||
|
||||
// 弹窗关闭时的处理
|
||||
handlePopupClosed() {
|
||||
this.clearCheckTimer()
|
||||
this.checking = false
|
||||
},
|
||||
|
||||
// 获取问卷信息
|
||||
getQuestionTitle() {
|
||||
$.get('/mobile/question/h5/questionTitle', {questionId: this.questionId}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.questionTitle = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取中奖信息
|
||||
getSurveyInfo(){
|
||||
$.post('/mobile/question/h5/surveyInfo', {questionId: this.questionId}).then(res=>{
|
||||
if (res.code === 0) {
|
||||
this.surveyInfo = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getQuestionTitle()
|
||||
this.getSurveyInfo()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,678 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.page-container {
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.van-dropdown-menu {
|
||||
position: fixed;
|
||||
top: 46px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.van-dropdown-menu__item {
|
||||
flex: 1;
|
||||
flex-shrink: unset;
|
||||
}
|
||||
|
||||
|
||||
.fixed-header {
|
||||
position: fixed;
|
||||
top: 90px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: #f7f8fa; /* 与页面背景色保持一致 */
|
||||
}
|
||||
|
||||
.fixed-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 10px;
|
||||
background: linear-gradient(to bottom, rgba(247, 248, 250, 1), rgba(247, 248, 250, 0));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.staff-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.staff-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.card-content .info-item {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 70px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.card-container .receive-time {
|
||||
font-size: 14px;
|
||||
color: #07c160;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #ebedf0;
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stats-item:not(:last-child):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 60%;
|
||||
width: 1px;
|
||||
background: #ebedf0;
|
||||
}
|
||||
|
||||
.stats-number {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #323233;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 12px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.total-number {
|
||||
color: #1989fa;
|
||||
}
|
||||
|
||||
.received-number {
|
||||
color: #07c160;
|
||||
}
|
||||
|
||||
.pending-number {
|
||||
color: #ff976a;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
margin-top: 210px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 10px 16px;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
border-radius: 24px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 8px rgba(25, 137, 250, 0.2);
|
||||
}
|
||||
|
||||
.scan-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #000;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 导航栏样式覆盖 */
|
||||
.scan-wrapper .van-nav-bar {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.scan-wrapper .van-nav-bar__title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.scan-wrapper .van-nav-bar__text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#reader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 确保扫描区域在中间 */
|
||||
#reader video {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.confirm-dialog {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: #323233;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.confirm-dialog .info-item {
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.confirm-dialog .info-item .label {
|
||||
width: 80px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
.confirm-dialog .info-item .value {
|
||||
flex: 1;
|
||||
color: #323233;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dialog-footer .van-button {
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.confirm-dialog .receive-time {
|
||||
color: #969799;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.confirm-dialog .van-tag {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.confirm-dialog .van-button--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div v-if="!scanStatus">
|
||||
<van-nav-bar title="发放奖品" left-arrow placeholder fixed @click-left="history.go(-1)"></van-nav-bar>
|
||||
|
||||
<!-- 问卷下拉框 -->
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="pageForm.questionId" :options="questionOptions"
|
||||
@change="onSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="fixed-header">
|
||||
<div class="search-bar">
|
||||
<van-search
|
||||
v-model="pageForm.searchKeyword"
|
||||
placeholder="请输入姓名或工号"
|
||||
@search="onSearch"
|
||||
shape="round"
|
||||
></van-search>
|
||||
</div>
|
||||
<!-- 统计面板 -->
|
||||
<div class="stats-panel">
|
||||
<div class="stats-content">
|
||||
<div class="stats-grid">
|
||||
<div class="stats-item">
|
||||
<div class="stats-number total-number">{{totalCount}}</div>
|
||||
<div class="stats-label">总人数</div>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<div class="stats-number received-number">{{receivedCount}}</div>
|
||||
<div class="stats-label">已领取</div>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<div class="stats-number pending-number">{{pendingCount}}</div>
|
||||
<div class="stats-label">未领取</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人员 -->
|
||||
<div class="card-container">
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div
|
||||
v-for="item in staffList"
|
||||
:key="item.id"
|
||||
class="staff-card"
|
||||
>
|
||||
<div class="card-header">
|
||||
<span class="staff-name">{{item.userName}}</span>
|
||||
<van-tag
|
||||
:type="item.isReceive ? 'success' : 'warning'"
|
||||
round
|
||||
size="large"
|
||||
>
|
||||
{{item.isReceive ? '已领取' : '未领取'}}
|
||||
</van-tag>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="info-item">
|
||||
<span class="info-label">工号：</span>
|
||||
<span>{{item.loginName}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">部门：</span>
|
||||
<span>{{item.unitName}}</span>
|
||||
</div>
|
||||
<div class="receive-time" v-if="item.isReceive">
|
||||
领取时间：{{item.receiveTime}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
|
||||
<!-- 底部扫描按钮 -->
|
||||
<div class="bottom-bar">
|
||||
<van-button
|
||||
type="primary"
|
||||
block
|
||||
class="scan-button"
|
||||
@click="startScan"
|
||||
icon="scan"
|
||||
color="#1867b0"
|
||||
>
|
||||
扫描二维码发放奖品
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确认发放弹窗 -->
|
||||
<van-popup
|
||||
v-model="showConfirmDialog"
|
||||
round
|
||||
position="center"
|
||||
:style="{ width: '80%' }"
|
||||
>
|
||||
<div class="confirm-dialog">
|
||||
<!-- 标题 -->
|
||||
<div class="dialog-title">
|
||||
确认发放奖品
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="dialog-content" v-if="currentStaff">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span class="value">{{currentStaff.userName}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">工号：</span>
|
||||
<span class="value">{{currentStaff.loginName}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">单位：</span>
|
||||
<span class="value">{{currentStaff.unitName}}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">工会：</span>
|
||||
<span class="value">{{currentStaff.unionName}}</span>
|
||||
</div>
|
||||
<!-- 添加领取状态 -->
|
||||
<div class="info-item">
|
||||
<span class="label">状态：</span>
|
||||
<span class="value">
|
||||
<van-tag :type="currentStaff.isReceive ? 'success' : 'warning'" round>
|
||||
{{currentStaff.isReceive ? '已领取' : '未领取'}}
|
||||
</van-tag>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 如果已领取则显示领取时间 -->
|
||||
<div class="info-item" v-if="currentStaff.isReceive">
|
||||
<span class="label">领取时间：</span>
|
||||
<span class="value">{{currentStaff.receiveTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮区 -->
|
||||
<div class="dialog-footer">
|
||||
<van-button
|
||||
plain
|
||||
round
|
||||
block
|
||||
@click="showConfirmDialog = false"
|
||||
>
|
||||
取消
|
||||
</van-button>
|
||||
<van-button
|
||||
type="primary"
|
||||
round
|
||||
block
|
||||
@click="confirmReceive"
|
||||
:loading="confirmLoading"
|
||||
:disabled="currentStaff.isReceive"
|
||||
>
|
||||
确认发放
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 扫描界面 -->
|
||||
<div v-if="scanStatus" class="scan-wrapper">
|
||||
<div class="scan-header">
|
||||
<van-nav-bar
|
||||
title="扫描二维码"
|
||||
left-text="返回"
|
||||
left-arrow
|
||||
@click-left="exitScan"
|
||||
:border="false"
|
||||
fixed
|
||||
>
|
||||
<template #left>
|
||||
<van-icon name="arrow-left" size="20" color="#fff"></van-icon>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</div>
|
||||
<div id="reader"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let html5QrCode = null
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
questionOptions: [],
|
||||
pageForm: {
|
||||
questionId: null,
|
||||
searchKeyword: null,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0
|
||||
},
|
||||
loading: false,
|
||||
finished: false,
|
||||
staffList: [],
|
||||
|
||||
showConfirmDialog: false,
|
||||
currentStaff: {},
|
||||
|
||||
totalCount: 0,
|
||||
receivedCount: 0,
|
||||
pendingCount: 0,
|
||||
cameraId: null,
|
||||
devices: null,
|
||||
|
||||
scanStatus: false,
|
||||
|
||||
confirmLoading: false
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.staffList = []
|
||||
this.finished = false;
|
||||
this.onLoad()
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
if (!this.pageForm.questionId) {
|
||||
this.loading = false;
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
this.finished = false
|
||||
|
||||
try {
|
||||
const {code, data} = await $.post('/mobile/question/h5/winnerList', this.pageForm)
|
||||
this.staffList = [...this.staffList, ...data.list];
|
||||
if (data.list.length < this.pageForm.pageSize) {
|
||||
this.finished = true;
|
||||
}
|
||||
this.pageForm.pageNumber++;
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.loading = false;
|
||||
this.finished = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 更新统计数据
|
||||
updateStats() {
|
||||
$.get('/mobile/question/h5/winnerCount', {questionId: this.pageForm.questionId}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.totalCount = res.data.totalCount;
|
||||
this.receivedCount = res.data.receivedCount;
|
||||
this.pendingCount = res.data.pendingCount;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 开始扫描
|
||||
startScan() {
|
||||
Html5Qrcode.getCameras().then((devices) => {
|
||||
if (devices && devices.length) {
|
||||
// 如果有2个摄像头，1为前置的
|
||||
if (devices.length > 1) {
|
||||
this.cameraId = devices[1].id;
|
||||
} else {
|
||||
this.cameraId = devices[0].id;
|
||||
}
|
||||
let isHuawei = navigator.userAgent.toLowerCase().match(/huawei/i) === 'huawei';
|
||||
if (isHuawei) {
|
||||
const backCamera = devices.filter(o => o.label.includes('back'))
|
||||
this.cameraId = backCamera[0].id;
|
||||
}
|
||||
this.devices = devices;
|
||||
this.scanStatus = true
|
||||
|
||||
this.$nextTick(() => {
|
||||
html5QrCode = new Html5Qrcode("reader");
|
||||
html5QrCode.start(
|
||||
this.cameraId,
|
||||
{
|
||||
fps: 20,
|
||||
qrbox: {width: 250, height: 250},
|
||||
aspectRatio: 1.7777777777777777,
|
||||
},
|
||||
(decodedText, decodedResult) => {
|
||||
this.handleScanResult(decodedText)
|
||||
},
|
||||
(errorMessage) => {
|
||||
console.log(errorMessage);
|
||||
}
|
||||
).catch(err => {
|
||||
alert(err)
|
||||
});
|
||||
})
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
alert(err)
|
||||
})
|
||||
},
|
||||
|
||||
// 停止扫描
|
||||
exitScan() {
|
||||
this.scanStatus = false;
|
||||
if (html5QrCode) {
|
||||
html5QrCode.stop().then(() => {
|
||||
console.log('扫描已停止');
|
||||
}).catch((err) => {
|
||||
console.log('停止扫描出错:', err);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
//校验扫描结果
|
||||
handleScanResult(result) {
|
||||
this.exitScan()
|
||||
if (!result) {
|
||||
this.$toast.fail('请扫描正确的二维码')
|
||||
return
|
||||
}
|
||||
$.post('/mobile/question/h5/checkScanResult', {
|
||||
questionId: this.pageForm.questionId,
|
||||
id: result
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.currentStaff = res.data;
|
||||
this.showConfirmDialog = true;
|
||||
} else {
|
||||
this.$toast.fail(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 确认领取奖品
|
||||
async confirmReceive() {
|
||||
if (!this.currentStaff) return;
|
||||
this.confirmLoading = true;
|
||||
try {
|
||||
const res = await $.post('/mobile/question/h5/confirmReceive', {
|
||||
questionId: this.pageForm.questionId,
|
||||
id: this.currentStaff.id
|
||||
});
|
||||
|
||||
if (res.code === 0) {
|
||||
// 重新搜索
|
||||
this.onSearch()
|
||||
// 更新统计数据
|
||||
this.updateStats();
|
||||
// 提示成功
|
||||
this.$toast.success('发放成功');
|
||||
// 关闭弹窗
|
||||
this.showConfirmDialog = false;
|
||||
// 重置当前
|
||||
// this.currentStaff = null;
|
||||
} else {
|
||||
this.$toast.fail(res.msg || '发放失败');
|
||||
}
|
||||
} catch (err) {
|
||||
this.$toast.fail('网络错误，请重试');
|
||||
} finally {
|
||||
this.confirmLoading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
$.get('/mobile/question/h5/listQuestion').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.questionOptions = res.data.map(v => {
|
||||
return {
|
||||
text: v.qtitle,
|
||||
value: v.qid
|
||||
}
|
||||
})
|
||||
if (this.questionOptions.length > 0) {
|
||||
this.pageForm.questionId = this.questionOptions[0].value
|
||||
// 设置完questionId后主动加载数据
|
||||
this.onLoad();
|
||||
// 同时更新统计数据
|
||||
this.updateStats();
|
||||
|
||||
//this.handleScanResult('999')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,502 @@
|
||||
<!--#
|
||||
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%;*/
|
||||
width: calc((100% - 100px) / 2);
|
||||
}
|
||||
|
||||
.middle-subject-info-footer-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.van-radio__label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.totalMoney {
|
||||
width: 80px;
|
||||
max-width: 80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
</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>
|
||||
<van-row style="margin-top: 10px;">
|
||||
<van-col :span="8"
|
||||
style="height: 28px;line-height: 28px;font-size: 14px;color: #d16565">
|
||||
单价：￥{{ wor.price }}
|
||||
</van-col>
|
||||
<van-col :span="16" style="display: flex;justify-content: right"
|
||||
v-if="issue.rwid === wor.wid">
|
||||
<view style="height: 28px;line-height: 28px;font-size: 14px;color: #d16565;">
|
||||
数量：
|
||||
</view>
|
||||
<van-stepper v-model="wor.number" :disabled="replyFinish" integer
|
||||
disable-input :default-value="0"
|
||||
:min="0"></van-stepper>
|
||||
</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="wor.wid">
|
||||
<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>
|
||||
<van-row style="margin-top: 10px;">
|
||||
<van-col :span="8"
|
||||
style="height: 28px;line-height: 28px;font-size: 14px;color: #d16565">
|
||||
单价：￥{{ wor.price }}
|
||||
</van-col>
|
||||
<van-col :span="16" style="display: flex;justify-content: right"
|
||||
v-if="issue.rwid && issue.rwid.includes(wor.wid)">
|
||||
<view style="height: 28px;line-height: 28px;font-size: 14px;color: #d16565;">
|
||||
数量：
|
||||
</view>
|
||||
<van-stepper v-model="wor.number" :disabled="replyFinish" integer
|
||||
disable-input :default-value="0"
|
||||
:min="0"></van-stepper>
|
||||
</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">
|
||||
<div class="totalMoney">
|
||||
￥{{ totalMoney }}
|
||||
</div>
|
||||
<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)
|
||||
},
|
||||
totalMoney() {
|
||||
let sum = 0
|
||||
this.issueList.forEach(v => {
|
||||
if (v.itx === 1 && v.iisdx && v.rwid) {
|
||||
//单选
|
||||
const sel = v.wors.find(w => w.wid === v.rwid)
|
||||
sum += sel.number * sel.price
|
||||
} else if (v.itx === 1 && !v.iisdx && v.rwid) {
|
||||
//多选
|
||||
sum += v.wors.filter(w => v.rwid.includes(w.wid)).map(w => isNaN(w.price * w.number) ? 0 : w.price * w.number).reduce((a, b) => a + b, 0)
|
||||
}
|
||||
})
|
||||
return sum
|
||||
}
|
||||
},
|
||||
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(true)
|
||||
if (formData.length === 0) {
|
||||
this.$modal.msg('请先选择后再保存')
|
||||
return
|
||||
}
|
||||
if (formData.some(v => v.number === 0)) {
|
||||
this.$modal.msg('最少选择一项')
|
||||
return
|
||||
}
|
||||
|
||||
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(false)
|
||||
if (formData.length === 0) {
|
||||
this.$modal.msg('请先选择后再提交')
|
||||
return
|
||||
}
|
||||
if (formData.some(v => v.number === 0)) {
|
||||
this.$modal.msg('最少选择一项')
|
||||
return
|
||||
}
|
||||
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('提交失败')
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//格式化提交数据
|
||||
formatFormData(save) {
|
||||
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,
|
||||
"number": v.wors.find(w => w.wid === v.rwid).number,
|
||||
"save": save
|
||||
})
|
||||
}
|
||||
} 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,
|
||||
"number": v.wors.find(w => w.wid === r).number,
|
||||
"save": save
|
||||
})
|
||||
})
|
||||
}
|
||||
} else if (v.itx === 2) {
|
||||
if (v.rval) {
|
||||
formData.push({
|
||||
"rval": v.rval,
|
||||
"qid": this.questionData.qid,
|
||||
"issueId": v.iid,
|
||||
"save": save
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
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)
|
||||
if (rw) {
|
||||
const worIndex = issue.wors.findIndex(v => v.wid === rw.rwid)
|
||||
this.$set(this.issueList[issueIndex]['wors'][worIndex], 'number', rw ? rw.number : 0)
|
||||
}
|
||||
} else if (issue.itx === 1 && !issue.iisdx) {
|
||||
//多选
|
||||
const rws = this.replyInfo.filter(answer => answer.issueId === issue.iid)
|
||||
this.$set(this.issueList[issueIndex], 'rwid', rws ? rws.map(v => v.rwid) : [])
|
||||
if (rws) {
|
||||
rws.forEach(rw => {
|
||||
const worIndex = issue.wors.findIndex(v => v.wid === rw.rwid)
|
||||
this.$set(issue.wors[worIndex], 'number', rw ? rw.number : 0)
|
||||
})
|
||||
}
|
||||
} 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