first commit
This commit is contained in:
@@ -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>
|
||||
var 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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user