<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="/public/WeChat/survey/css/mui.min.css" rel="stylesheet" /> <link href="/public/WeChat/survey/css/common.css" rel="stylesheet" /> <style type="text/css"> [v-cloak] { display: none; } .right-btn{ width: 1.22em; height: 1.22em; } .questions .right-btn img{ width: 16px; height: 16px; } /*.right-btn input[type=radio]{*/ /*background-image: url(/public/WeChat/survey/img/radio.png);*/ /*}*/ .right-btn input[type=radio]:checked.checkeds{ background-image: url(/public/WeChat/survey/img/radio-check.png); } /*.right-btn input[type=checkbox]{*/ /*background-image: url(/public/WeChat/survey/img/checkbox.png);*/ /*}*/ .right-btn input[type=checkbox]:checked.checkeds{ background-image: url(/public/WeChat/survey/img/checkbox-checked.png); } </style> </head> <body> <div id="app" v-cloak> <nav class="mui-bar mui-bar-tab box-flex align-center bottom"> <div class="flex-1 box-flex flex-column"> <div class="mui-text-center"> <img src="/public/WeChat/survey/img/all-hover.png" /> </div> <div class="all mui-text-center" v-cloak> {{curPage}}/{{total}} </div> </div> <div class="flex-1"> <div class="up mui-text-center" @tap="up"> <img src="/public/WeChat/survey/img/back.png" /> </div> </div> <div class="flex-1" v-if="curPage<total"> <div class="down mui-text-center" @tap="next"> <img src="/public/WeChat/survey/img/next.png" /> </div> </div> <div class="flex-1 box-flex flex-column" v-if="curPage===total"> <div class="mui-text-center"> <img src="/public/WeChat/survey/img/save.png" /> </div> <div class="all mui-text-center" @tap="submits"> 提交 </div> </div> </nav> <div class="lists mui-content" > <div class="mui-card m-t-m test" v-for="(item, index) in list"> <div class="title"> <span class="num">{{index+1}}.</span> <span class="type" v-if="item.sc_id_first">{{item.sc_id_first}}<b v-if="item.sc_id_second">•{{item.sc_id_second}}</b></span> <span class="info flex-1">{{item.sui_name}} <span v-if="item.sui_type === '0' ">(单选题)</span> <span v-if="item.sui_type === '1' ">(多选题)</span> <span v-if="item.sui_type === '2' ">(开放题)</span> <span v-if="item.sui_type === '3' ">(输入题)</span> </span> </div> <div class="questions" v-if="item.sui_type === '0'" :key="item.sui_id"> <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)" v-if="item.sui_type === '0' " v-for="(item1,index1) in item.sui_keys" :key="index1"> <div class="flex-1" > <span class="num" v-if="index1+1 === 1 ">A</span> <span class="num" v-if="index1+1 === 2 ">B</span> <span class="num" v-if="index1+1 === 3 ">C</span> <span class="num" v-if="index1+1 === 4 ">D</span> <span class="num" v-if="index1+1 === 5 ">E</span> <span class="num" v-if="index1+1 === 6 ">F</span> <span class="num" v-if="index1+1 === 7 ">G</span> : {{item1.itemname}} </div> <div class="right-btn" v-if="item.value.indexOf(item1.value)>0"> <input type="radio" :name="'radios'+item.sui_id" class="question_s" checked v-bind:value="item1.value"> </div> <div class="right-btn" v-else> <input type="radio" :name="'radios'+item.sui_id" class="question_s" v-bind:value="item1.value"> </div> </div> </div> <div class="questions" v-if="item.sui_type === '1'" :key="item.sui_id"> <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)" v-for="(item1,index1) in item.sui_keys" :key="index1"> <div class="flex-1" > <span class="num" v-if="index1+1 === 1 ">A</span> <span class="num" v-if="index1+1 === 2 ">B</span> <span class="num" v-if="index1+1 === 3 ">C</span> <span class="num" v-if="index1+1 === 4 ">D</span> <span class="num" v-if="index1+1 === 5 ">E</span> <span class="num" v-if="index1+1 === 6 ">F</span> <span class="num" v-if="index1+1 === 7 ">G</span> : {{item1.itemname}} </div> <div class="right-btn" v-if="item.value.indexOf(item1.value)>0"> <input type="checkbox" :name="'checkboxs'+item.sui_id" value='0' class="question_s" checked v-bind:value="item1.value"> </div> <div class="right-btn" v-else> <input type="checkbox" :name="'checkboxs'+item.sui_id" class="question_s" v-bind:value="item1.value"> </div> </div> </div> <div class="questions" v-if="item.sui_type === '2'" :key="item.sui_id"> <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item,item1)" v-for="(item1,index1) in item.sui_keys" :key="index1"> <div class="flex-1" > <span class="num" v-if="index1+1 === 1 ">A</span> <span class="num" v-if="index1+1 === 2 ">B</span> <span class="num" v-if="index1+1 === 3 ">C</span> <span class="num" v-if="index1+1 === 4 ">D</span> <span class="num" v-if="index1+1 === 5 ">E</span> <span class="num" v-if="index1+1 === 6 ">F</span> <span class="num" v-if="index1+1 === 7 ">G</span> : {{item1.itemname}} </div> <div class="right-btn" v-if="item.value.indexOf(item1.value)>0"> <input type="radio" :name="'radios'+item.sui_id" class="question_s" checked v-bind:value="item1.value"> </div> <div class="right-btn" v-else> <input type="radio" :name="'radios'+item.sui_id" class="question_s" v-bind:value="item1.value"> </div> </div> <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item)"> <div class="flex-1 box-flex align-center"> <div class="num">其它</div> <div class="flex-1 text"> <input type="text" placeholder="请输入" v-bind:value="item.value_text" v-on:blur.lazy="inputFun($event,item)" /> </div> </div> </div> </div> <div class="questions" v-if="item.sui_type === '3'"> <div class="mui-input-row box-flex algin-center flex-wrap" @tap="inputClick($event,item)"> <div class="flex-1 box-flex align-center"> <div class="flex-1 text"> <textarea type="text" placeholder="请输入" rows="5" v-bind:value="item.sd_value_text" v-on:blur.lazy="inputFun($event,item)"></textarea> </div> </div> </div> </div> </div> </div> </div> <script src="/public/WeChat/survey/js/mui.js"></script> <script src="/public/WeChat/survey/js/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script type="text/javascript"> var self; var post_url="{:U('surveyDonePage')}"; var app = new Vue({ el: "#app", data: { curPage: {$p}, total:{$pages}, count:{$count}, list: {$list}, su_id:{$su_id}, c_id:{$c_id}, s_id:{$s_id}, id:'', value:'', value_text:'', }, methods: { up() { if(this.curPage <= 1) { } else { this.curPage--; this.$options.methods.getDatas(); } }, next() { if(this.curPage < this.total) { this.curPage++; this.$options.methods.getDatas(); } else { } }, inputFun(e,item){ if(e.target.value!='' && item.id!=''){ var post_url="{:U('surveyDoneSubmit')}"; var params = new URLSearchParams(); params.append('value_text',e.target.value); params.append('id', item.id); // 获取下一页的数据 axios.post(post_url, params, {emulateJSON: true}).then(function (response) { var datalist = response.data.status; if (datalist>0) { // console.log(response.data.msg); } else { console.log(response.data.msg); } }) .catch(function (error) { console.log(error); }); } }, inputClick(e, item) { e.currentTarget.querySelector('input').click();//选中 var questionchoseInputs = e.currentTarget.parentElement.querySelectorAll('input.question_s'); var choseVal = ''; for (var i = 0, j = questionchoseInputs.length; i < j; i++) { if (questionchoseInputs[i].checked) { choseVal = choseVal + questionchoseInputs[i].value + ','; } } if (choseVal.length > 0 && item.id.length>0 || item.sui_type===1) { choseVal = choseVal.substr(0, choseVal.length - 1); var post_url="{:U('surveyDoneSubmit')}"; var params = new URLSearchParams(); params.append('value',choseVal); params.append('id', item.id); // 获取下一页的数据 axios.post(post_url, params, {emulateJSON: true}).then(function (response) { var datalist = response.data.status; if (datalist>0) { console.log(response.data.msg); } else { console.log(response.data.msg); } }) .catch(function (error) { console.log(error); }); } }, getDatas:function(){ var params = new URLSearchParams(); params.append('su_id',self.su_id); params.append('c_id', self.c_id); params.append('p', self.curPage); // 获取下一页的数据 axios.get(post_url+'?su_id='+self.su_id+'&c_id='+self.c_id+'&p='+self.curPage).then(function (response) { var datalist = JSON.parse(response.data.data);//将json字符串转换成json对象 if (datalist.length > 0) { self.list = datalist; console.log(response.data.msg); } else { console.log(response.data.msg); } }) .catch(function (error) { console.log(error); }); } , submits() { this.showDd = false; var title={ text:'提交试卷 ', class:'' }; var btnArray = [{ name:'取消', class:'btn-cancel' },{ name:'确认', class:'btn-confirm' }]; mui.confirm('是否提交问卷?', title, btnArray, function(e) { if(e.index == 1) { var params = new URLSearchParams(); params.append('su_id',self.su_id); params.append('s_id', self.s_id); params.append('c_id', self.c_id); axios.post("{:U('surveySubmit')}", params, {emulateJSON: true}).then(function (response) { var datalist = response.data.status; if (datalist > 0) { this.showDd = false; var btnArray = [{ name: '确定', class: 'btn-default-mini', parentClass:'bc-white' }]; var title = { text: ' ', class: 'inner-title bc-white' }; mui.confirm(response.data.msg, title, btnArray, function(e) { if(e.index == 0) { window.location = '{:U("Evaluate/evaluate")}'; } }) } else { this.showDd = false; var btnArray = [{ name: '确定', class: 'btn-default-mini', parentClass:'bc-white' }]; var title = { text: ' ', class: 'inner-title bc-white' }; mui.confirm(response.data.msg, title, btnArray, function(e) { }) } }) .catch(function (error) { console.log(error); }); } }); } }, created:function() { self = this;//必须重新定义,否则无法定位 } }) </script> </body> </html>
vue学习篇:渲染前端页面
最新推荐文章于 2023-07-26 17:45:58 发布