419 lines
16 KiB
HTML
419 lines
16 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: 20px;
|
||
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: 5px;
|
||
}
|
||
|
||
.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 0.2s cubic-bezier(0.645, 0.045, 0.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="pjaxReplace('/mobile/index')"></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"
|
||
v-html="issue.its"
|
||
style="margin-left: 17px; font-size: 12px; font-weight: 500"
|
||
></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 v1 = this.issueList.some((v) => v.itx === 1 && v.iisbd && v.rwid == null)
|
||
if (v1) {
|
||
this.$modal.msg("请选择后再提交")
|
||
return
|
||
}
|
||
const v2 = this.issueList.some((v) => v.itx === 2 && v.iisbd && (v.rval == null || v.rval === ""))
|
||
if (v2) {
|
||
this.$modal.msg("请填写后再提交")
|
||
return
|
||
}
|
||
|
||
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>
|
||
|
||
<!--#
|
||
}
|
||
#-->
|