vue学习篇：渲染前端页面

最新推荐文章于 2024-12-20 10:49:26 发布
Jack_num1
最新推荐文章于 2024-12-20 10:49:26 发布
阅读量388
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue
本文链接：https://blog.youkuaiyun.com/Jack_num1/article/details/88947722
Vue 专栏收录该内容
4 篇文章
订阅专栏
本文介绍了一个基于微信的调查问卷系统的实现细节，包括单选题、多选题、开放题等不同类型的问题设置方法，以及如何通过Vue.js进行状态管理和页面交互。此外，还介绍了前后端数据交互的过程。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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">&bull;{{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>