417 lines
15 KiB
HTML
417 lines
15 KiB
HTML
<!--#
|
||
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>
|
||
var 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>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|