偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

封装的ajax获取数据。代码可能有些是多余的，没做处理！！点击提交后有弹框，在这里我没有贴出来。
第一次写博客，这些也是别人教我的，经理解后，贴出来于大家分享

 

——html——

<script type="text/javascript" src="../../js/public/vue.min.js" ></script>

<script type="text/javascript" src="../../js/public/mui.min.js"></script>

<style>

.mui-input-group {
background: #fff;
}
.mui-input-row label {
width: 100%;
}
.mui-radio.mui-left label {
padding:20px 15px;
padding-left: 28px;
}
.mui-radio.mui-left input[type='radio']{
left: 0;
}
.mui-radio input[type='radio']{
top:19px;
width:22px;
height: 22px;
}
.mui-radio input[type='radio']:before {
position: relative;
top: 2px;
width: 18px;
height: 18px;
display: inline-block;
content: '';
background: url(../../img/question1.jpg) no-repeat;
background-size:90%;
}
.mui-radio input[type='radio']:checked:before {
content:'';
background: url(../../img/question2.jpg) no-repeat;
background-size:90%;
}
.mui-checkbox{width:auto;height: auto;border:none;}
.mui-checkbox.mui-left input[type=checkbox] {
top: 12px;
}

</style>

<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-arrowadd"></a>
<h1 class="mui-title">问卷调查</h1>
</header>
<div class="mui-content mui-content-bgcolor" id="vmode">
<div class="questionnaire2">
<div id="questionnaire2-box">
<div class="questionitem" v-for="(item,index) in questionitems" :data-index="index" @click="oprev(index)">
<div class="questionbox" v-show="active === index">
<div class="questionnaire2-tit">
<p>{{index+1}}/10</p>
<p>{{item.question_title}}</p>
</div>
<div class="questionnaire2-con">
<dl class="mui-input-group">
<dd class="mui-input-row mui-radio mui-left" v-for="(items,i) in item.question_answerlist" :key='i'>
<input type="radio" name="radio2" :value="items.answer_id" v-model="answer"/><label class="advice">{{items.answer_option}}</label>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>

<div class="questionnaire2-fot">
<a @click="olast">上一题</a><a @click="oNext" v-if='showNext'>下一题</a>
<input type="button" id="questionbtn" v-else @click ='subquestion' value="提交"/>
</div>

 

——css——

/* 问卷调查 */
.questionnaire2{margin:40px 20px 0 ;background-color: #fff;}

.questionnaire2-tit{background-color: #06b5ff;border-top-left-radius: 10px;border-top-right-radius: 10px;padding:10px 0;}
.questionnaire2-tit p{ color: #fff;font-size: 18px;text-align: center;margin-bottom: 0;padding:0 10px;}
.questionnaire2-tit p:nth-of-type(2){text-align: left;padding-top:10px;min-height:33px;max-height:73px;overflow: hidden;}

.questionnaire2-con{padding:0 10px;background-color: #fff;}
.questionnaire2-con dl{margin:0;}
.questionnaire2-con dl dd{margin:0;border-bottom: 1px solid #f4f4f4;height:auto!important;}

.questionnaire2-fot{margin-left: 20px;margin-right: 20px; border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;overflow: hidden;background-color: #fff;box-sizing: border-box;border-top:1px solid #f4f4f4;}
.questionnaire2-fot a{display: inline-block;float: left; width:50%;padding:15px 0;text-align: center; color: #999;}
.questionnaire2-fot a:first-child{border-right:1px solid #f4f4f4;}
.questionnaire2-fot #next.w{width:100%;}

.questionnaire2-fot #questionbtn{width:50%;border:none;font-size: 17px;padding:15px 0; color: #007aff; }

——js——

mui.init();

var vum = new Vue({
el: '#vmode',
data: {
questionitems: '',
questionScoreStatus: '',
answerlistitems: [],
active: 0,
answer: "",
answerArray: [],
showNext: true,
showtip: false,
score_level: ''
},
mounted: function() {
/**
* 问题列表
*/
app.ajax('financial/pjQuestionlist', {
type: 'post',
data: {},
ok: function(json) {
vum.questionitems = json.data;
},
ng: function(json) {
mui.alert(json);
}
});

},
methods: {
oprev: function(i) {
vum.active = i
if(vum.active == vum.questionitems.length - 1) {
vum.showNext = false
} else {
vum.showNext = true
}
},
review() {
linkToPage('questionNaire');
},
olast: function() {
let i = vum.active - 1
vum.answer = vum.answerArray[i]
if(i < 0) {
return
} else {
this.oprev(i)
}
},
subquestion: function() {
/**
* 答案提交
*/
if(vum.answer) {
vum.answerArray[vum.active] = vum.answer
vum.answer = ''
} else {
mui.alert('请选择一个答案');
return false;
}
var param = {};
param['financial_bid'] = localStorage.getItem("financial_bid");
param["answer_ids"] = vum.answerArray.join(',');
var pstr = param['financial_bid'] + param["answer_ids"];
param['signature'] = app.signature(true, pstr); //签名
app.ajax('financial/pjQuestionAnswer', {
type: 'post',
data: param,
ok: function(json) {
mui(".popover1").popover('show');
vum.score_level = json.data.score_level;
document.getElementById("goinvest").addEventListener('tap', function() {
mui(".popover1").popover('hide');
linkToPage("invest");
});
},
ng: function(json) {
mui.alert(json);
}
});
},
oNext: function() {
if(vum.answer) {
vum.answerArray[vum.active] = vum.answer
vum.answer = ''
} else {
mui.alert('请选择一个答案');
return false;
}
let i = vum.active + 1
if(i != vum.questionitems.length) {
this.oprev(i)
}
}

}
});

 

不想复制的朋友可以到这里下载个demo看看，demo经过处理，可直接运行。