精华内容
下载资源
问答
  • 最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!接下来通过本文给大家分享vue实现类似淘宝商品评价页面星级评价及上传多张图片功能,需要的朋友参考下吧
  • 最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:   评价页   点击看大图,且可左右滑动 功能需求分析 默认为5颗星,为非常满意,...

    最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:

     

    评价页

     

    点击看大图,且可左右滑动

    功能需求分析

    1. 默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。
      2.评价内容,最多为200字。
      3.上传图片最多上传6张,图片不可拉伸,可删除,可点击放大左右滑动展示

    具体实现关键代码

    1. 关于星级功能:
      写一个五星数组,默认数组中有亮的星级图片,用bool值判断是否变暗。

       

          默认星级数组

       

      点击实现的关键代码:

      // 评分
          rating: function (index, string) {
              var total = this.stars.length // 星星总数
              var idx = index + 1 // 这代表选的第idx颗星-也代表应该显示的星星数量
              // 进入if说明页面为初始状态
              if (this.scoreStartNum === 0) {
                this.scoreStartNum = idx
                for (var i = 0; i < idx; i++) {
                  this.stars[i].src = starOnImg
                  this.stars[i].active = true
                }
              } else {
                // 如果再次点击当前选中的星级-仅取消掉当前星级,保留之前的。
                if (idx == this.scoreStartNum) {
                  for (var i = index; i < total; i++) {
                    if (i != 0) {
                      this.stars[i].src = starOffImg
                      this.stars[i].active = false
                    }
                  }
                }
                // 如果小于当前最高星级,则直接保留当前星级
                if (idx < this.scoreStartNum) {
                  for (var i = idx; i < this.scoreStartNum; i++) {
                    if (i != 0) {
                      this.stars[i].src = starOffImg
                      this.stars[i].active = false
                    }
                  }
                }
                // 如果大于当前星级,则直接选到该星级
                if (idx > this.scoreStartNum) {
                  for (var i = 0; i < idx; i++) {
                    this.stars[i].src = starOnImg
                    this.stars[i].active = true
                  }
                }
      
                var count = 0 // 计数器-统计当前有几颗星
                for (var i = 0; i < total; i++) {
                  if (this.stars[i].active) {
                    count++
                  }
                }
                this.scoreStartNum = count
              }
              if (this.scoreStartNum === 1) {
                this.scoreInfo = '很差'
              } else if (this.scoreStartNum === 2) {
                this.scoreInfo = '差'
              } else if (this.scoreStartNum === 3) {
                this.scoreInfo = '一般'
              } else if (this.scoreStartNum === 4) {
                this.scoreInfo = '满意'
              } else if (this.scoreStartNum === 5) {
                this.scoreInfo = '很满意'
              }

       

    2. 评价内容输入
    <textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="宝贝满足你的期待吗?说说你的使用心得,分享给想买的他们吧!"></textarea>

    Surplus 表示最大限制字数,v-model绑定输入字体,去掉边框可以设置:border: none;

    1. 上传多张图片功能

    单独写了个uploadImages组件,用input来设置图片上传

    <input type="file"  class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">

    在@change="handleChange"拿到图片信息,有两种方式展示:

    1. 图片流形式展示图片
    let reader = new FileReader()
              let that = this
              reader.readAsDataURL(file)
              reader.onload = function (e) {
                console.log(this.result)
                that.imgUrls.push(this.result)
              }

    2.上传阿里云等第三方,直接拿到图片url路径,在此我用的第一种方式。
    用mint-ui的录播图形式来做图片的左右滑动功能。

    <mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :continuous="false" :defaultIndex="num">
                <mt-swipe-item v-for="(item,index) in imgUrls" :key="item.id">
                  <div class="num"  >{{index+1+'/'+imgUrls.length}}</div>
                    <img :src="imgUrls[index]" class="img"/>
                </mt-swipe-item>
              </mt-swipe>

    :auto="0"为不自动播放,:show-indicators="false"表示不展示下面的圆点,:defaultIndex="num"默认展示第几张图片,:continuous="false" 是否重复播放。

    关键代码为:

    methods: {
        //拿到图片信息转化为图片流
        changeImage: function (e) {
          if (e.target.files.length <= (this.maxImages - this.imgUrls.length)) {
            for (var i = 0; i < e.target.files.length; i++) {
              let file = e.target.files[i]
              this.file = file
              console.log(this.file)
              let reader = new FileReader()
              let that = this
              reader.readAsDataURL(file)
              reader.onload = function (e) {
                console.log(this.result)
                that.imgUrls.push(this.result)
              }
            }
            // 剩余张数
            this.leftImages = this.maxImages - (this.imgUrls.length + e.target.files.length)
            this.pictureNums = String(this.maxImages - (this.imgUrls.length + e.target.files.length)) + '/' + String(this.maxImages)
          } else {
            Toast('只能选择' + (this.maxImages - this.imgUrls.length) + '张了')
          }
        },
        //删除
        delect (index) {
          this.imgUrls.splice(index, 1)
          this.leftImages++
          console.log('数量' + this.leftImages)
          if (this.leftImages == this.maxImages) {
            this.pictureNums = '上传图片'
          } else {
            this.pictureNums = String(this.leftImages) + '/' + String(this.maxImages)
          }
        },
        //轮播图滑动改变index
        handleChange(index){
          this.num = index
        },
        //看大图
        bigImg (index) {
          this.showBigImg = true
          this.num = index
        }
      }

    样式如下

    <template>
        <div class="avatar">
          <!--展示图片-->
          <div class="hasPic" v-if="imgUrls.length>0" v-for="(item,index) in imgUrls">
            <img class="seledPic" ref="picture" :src="item?item:require('../../static/images/imagebj.jpg')" name="avatar" @click="bigImg(index)">
            <img class="delect" src="../../static/images/del.png" @click="delect(index)">
          </div>
          <!--点击方法图左右滑动-->
          <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg">
            <div class="showImg">
              <mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :continuous="false" :defaultIndex="num">
                <mt-swipe-item v-for="(item,index) in imgUrls" :key="item.id">
                  <div class="num"  >{{index+1+'/'+imgUrls.length}}</div>
                    <img :src="imgUrls[index]" class="img"/>
                </mt-swipe-item>
              </mt-swipe>
    
            </div>
          </div>
          <!--默认图片-->
          <div class="selPic"  v-if="imgUrls.length<6">
            <img src="../../static/images/imagebj.jpg" name="avatar">
            <span>{{pictureNums}}</span>
            <input type="file"  class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">
          </div>
        </div>
      </template>

    完整项目地址为:https://github.com/dt8888/publicComment

    注意点:
    1.项目中用到了mint -ui,转移项目中录播图代码时,会报错,在终端项目中输入:npm i mint-ui -S

    1. 用到了px和rem自动转化(https://blog.csdn.net/helloxiaoliang/article/details/79226058

    2. 如有疑问,请评论,有空定会回复

    展开全文
  • vue实现评价星星功能

    2020-10-15 04:30:57
    主要为大家详细介绍了vue实现评价星星功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • jquery+mui+bootstrap实现评价页面改成纯vue实现 1.png 2.png 3.png 需求: jquery+mui+bootstrap实现评价页面, 包括评星,意见建议,邮箱,上传图片并把第一张显示在下方以及对每一个进行验证 jQuery图 ...

    jquery+mui+bootstrap实现评价页面改成纯vue实现
    1.png1.png
    2.png2.png
    3.png3.png
    需求: jquery+mui+bootstrap实现评价页面,
    包括评星,意见建议,邮箱,上传图片并把第一张显示在下方以及对每一个进行验证

    jQuery图
    在这里插入图片描述
    vue图
    在这里插入图片描述
    对比两个
    参考 https://www.jianshu.com/p/d63b1b002297

    //上传一张图片显示
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    var reader = new FileReader();
    
    reader.addEventListener("load", function () {
        preview.src = reader.result;
    }, false);
    
    if (file) {
        reader.readAsDataURL(file);
    }
    
     // 上传多张图片显示
     var preview = document.querySelector('#preview');
     var files = document.querySelector('input[type=file]').files;
    
     function readAndPreview(file) {
    
         // 确保 `file.name` 符合我们要求的扩展名
         if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
             var reader = new FileReader();
    
             reader.addEventListener("load", function () {
                 var image = new Image();
                 image.height = 100;
                 image.title = file.name;
                 image.src = this.result;
                 preview.appendChild(image);
             }, false);
    
             reader.readAsDataURL(file);
         }
    
     }
    
     if (files) {
         [].forEach.call(files, readAndPreview);
     }
    

    jquery源码:

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
    	<title>科可瑞尔</title>
    	<link rel="shortcut icon" href="images/fa.ico">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    	<meta name="apple-mobile-web-app-capable" content="yes">
    	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    	<link rel="stylesheet" href="mui/css/mui.min.css">
    	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    	<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
    	
    	<script src="config.js"></script>
    	
    	<style type="text/css">
    		.mui-bar{
    			background-color: white;
    		}
    		body {
    			background-color: white; 
    			/* font-size: 16px; */
                font-size: 13px;
    		}
    		.icons i{
    			font-size: 30px;
    			margin-left:15px;
    			height: 40px;
    			color: #FFCC00;
    		}
    		.fileinput-button {
                position: relative;
                display: inline-block;
                overflow: hidden;
            }
    
            .fileinput-button input{
                position:absolute;
                right: 0px;
                top: 0px;
                opacity: 0;
                font-size: 20px;
            }
    	</style>
      </head>
      
      <body style="background-color: white; color: black;">
      	<iframe id="target_fileSubmit" name="target_fileSubmit" style="display: none;"></iframe>
      	<header id="header" class="mui-bar mui-bar-nav">
    		<!-- <a href="index.jsp"><img style="text-align: left;" width="44px" alt="" src="images/return.png"></a> -->
    		<h1 class="mui-title">评价</h1>
    		<!-- <img style="float: right;" width="44px" alt="" src="images/plane.png"> -->
        </header>
        <!-- 五星 -->
        <div style="margin-top: 50px; margin-left: 20px;">	
            <div class="icons mui-inline icons_envirnment" style="margin-top: 10px;">
            	 机舱环境
                <i data-index="1" class="mui-icon mui-icon-star"></i>
                <i data-index="2" class="mui-icon mui-icon-star"></i>
                <i data-index="3" class="mui-icon mui-icon-star"></i>
                <i data-index="4" class="mui-icon mui-icon-star"></i>
                <i data-index="5" class="mui-icon mui-icon-star"></i>
            </div>
            <br>
            
            <div class="icons mui-inline icons_service">
            	服务态度
                <i data-index="1" class="mui-icon mui-icon-star"></i>
                <i data-index="2" class="mui-icon mui-icon-star"></i>
                <i data-index="3" class="mui-icon mui-icon-star"></i>
                <i data-index="4" class="mui-icon mui-icon-star"></i>
                <i data-index="5" class="mui-icon mui-icon-star"></i>
            </div>
            <br>
            
            <div class="icons mui-inline icons_food">
            	用餐口味
                <i data-index="1" class="mui-icon mui-icon-star"></i>
                <i data-index="2" class="mui-icon mui-icon-star"></i>
                <i data-index="3" class="mui-icon mui-icon-star"></i>
                <i data-index="4" class="mui-icon mui-icon-star"></i>
                <i data-index="5" class="mui-icon mui-icon-star"></i>
            </div>
            
            <div style="margin-top: 10px; margin-right: 20px;">
            	<textarea rows="6" id="commentInfo" name="commentInfo" placeholder="请输入您的意见或建议"></textarea>
            	<input type="text" id="commentEmail" name="commentEmail" placeholder="请输入您的邮箱"/>
                <label for="" style="padding-bottom: 5px;">上传图片</label>
            	<span class="btn btn-default fileinput-button" style=" width: 100%;">
    	            <span class="glyphicon glyphicon-plus"></span>
    	            <input type="file" id="commentImage" name="commentImage" style="margin-left: 15px;" accept="image/*;">
    	        </span>
            	<p id="previewImage"></p>
            </div>
        </div>
        <div style="position:fixed; bottom: -0.1rem; width:100%;">
            <button type="button" class="mui-btn mui-btn-primary" style="width: 100%; padding: 15px;" id="commentSubmitBtn">提交评论</button>
        </div>	
        <script src="mui/js/mui.min.js"></script>
    	<script src="jquery/jquery.min.js"></script>
    	<script src="bootstrap/js/bootstrap.min.js"></script>
    	<script type="text/javascript">
    	
    	history.pushState(null, null, document.URL);
        window.addEventListener('popstate', function (e) {
        	mui.confirm("确定要离开当前页面吗?","温馨提示",["取消","确定"], function(e){
     		   if(e.index==1){
     			  window.history.go(-1);
          	   }else{
          		  history.pushState(null, null, document.URL);
          	   }
            });
            
        });
    	
    	$(".icons_envirnment").on("click","i",function(e){
            var index=$(this).index()+1;  
            var max=$(".icons_envirnment i:last").index()+1;
           	for(var i=1;i<=max;i++){
               $(".icons_envirnment i:nth-child("+i+")").addClass("mui-icon-star-filled"); 
            }
            for(var i=index+1;i<=max;i++){ 
                $(".icons_envirnment i:nth-child("+i+")").removeClass("mui-icon-star-filled");
            }
            $('#commentEnvironmentValue').val($(this).index());
        });
    	
    	$(".icons_service").on("click","i",function(e){
            var index=$(this).index()+1;  
            var max=$(".icons_service i:last").index()+1;    
           	for(var i=1;i<=index;i++){
               $(".icons_service i:nth-child("+i+")").addClass("mui-icon-star-filled"); 
            }
            for(var i=index+1;i<=max;i++){ 
                $(".icons_service i:nth-child("+i+")").removeClass("mui-icon-star-filled");
            }
            $('#commentServiceValue').val($(this).index());
        });
    	
    	$(".icons_food").on("click","i",function(e){
            var index=$(this).index()+1;  
            var max=$(".icons_food i:last").index()+1;
           	for(var i=1;i<=index;i++){
               $(".icons_food i:nth-child("+i+")").addClass("mui-icon-star-filled"); 
            }
            for(var i=index+1;i<=max;i++){ 
                $(".icons_food i:nth-child("+i+")").removeClass("mui-icon-star-filled");
            }
            $('#commentFoodValue').val($(this).index());
        });
    	
    	$(document).ready(function() {
            $("#commentImage").change(function() {
                var fileReader = new FileReader();
                fileReader.onload = function(e) {
                    $("#previewImage").append("<image class='img-thumbnail' style='max-width:100%;height:auto;' src="+e.target.result+"/>");
                };
                var imageFile = this.files[0];
                fileReader.readAsDataURL(imageFile);
            });
            $("#commentSubmitBtn").click(
           	function() {
               var xhr=new XMLHttpRequest();
               xhr.open("post", adminUrl + "page/service/evaluateAddSubmit");
               xhr.onreadystatechange = function() {
                   if (xhr.readyState == 4) {
                       if(xhr.status == 200){
                    	   mui.alert("评论提交成功,谢谢您的宝贵意见","温馨提示","确认", function(e){
                         	   if(e.index==0){
                         		//   window.location.reload(); 
                                   location.href = 'index.html';
                         	   }
                           });
    	               }else{
    	            	   mui.alert("评论提交失败,请重新设置","温馨提示","确认", function(e){
    	            		   if(e.index==0){
                         		  window.location.reload(); 
                         	   }
                           });
    	               }
                   }
               };
               var commentImage = $("#commentImage")[0].files[0];
               var commentImageValue = $('input[name="commentImage"]').val();
               var commentEnvironmentValue=$("#commentEnvironmentValue").val();
               var commentServiceValue=$("#commentServiceValue").val();
               var commentFoodValue=$("#commentFoodValue").val();
               var commentInfo=$("#commentInfo").val();
               var commentEmail=$("#commentEmail").val();
               var regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
               if(commentEnvironmentValue==""){
            	   mui.alert("机舱环境星级值不能为空","温馨提示","确认");
            	   return false;
               }else if(commentServiceValue==""){
            	   mui.alert("服务态度星级值不能为空","温馨提示","确认");
            	   return false;
               }else if(commentFoodValue==""){
            	   mui.alert("用餐口味星级值不能为空","温馨提示","确认");
            	   return false;
               }else if(commentInfo==""){
            	   mui.alert("请填写您的意见或建议","温馨提示","确认");
            	   return false;
               }else if(commentEmail==""){
            	   mui.alert("请留下您的邮箱地址,我们会将反馈结果及时反馈给您","温馨提示","确认");
            	   return false;
               }else if(!regEmail.test(commentEmail)){
            	   mui.alert("您填写的邮箱格式不正确,请重新输入","温馨提示","确认");
            	   return false;
               }else if(commentImageValue==""){
            	   mui.alert("请对您认为不好的地方留下一张图片,方便我们定位问题","温馨提示","确认");
            	   return false;
               }else{
            	   var commentForm = new FormData();
                   commentForm.append("commentEnvironmentValue",commentEnvironmentValue);
                   commentForm.append("commentServiceValue",commentServiceValue);
                   commentForm.append("commentFoodValue",commentFoodValue);
                   commentForm.append("commentInfo",commentInfo);
                   commentForm.append("commentEmail",commentEmail);
                   commentForm.append("commentImage", commentImage);
                   xhr.send(commentForm); 
               }
           });
        });
    	</script>
      </body>
    </html>
    
    

    vue加原生js

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="mui/css/mui.min.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
        <style>
            body ,html{
                background-color: white;
                font-size: 13px;
                color: black;
            }
    
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            #star {
                position: relative;
                top: 60px;
            }
    
            .star-item {
                display: inline-block;
                background-repeat: no-repeat;
                width: 30px;
                height: 40px;
                margin-left: 10px;
                background-size: 100%;
            }
    
            .star-item.on {
                background-image: url(./img/1.png);
            }
    
            .star-item.half {
                background-image: url(./img/2.png);
            }
    
            .star-item.off {
                background-image: url(./img/3.png);
            }
    
            .fileinput-button {
                position: relative;
                display: inline-block;
                overflow: hidden;
            }
    
            .fileinput-button input{
                position:absolute;
                right: 0px;
                top: 0px;
                opacity: 0;
                font-size: 15px;
            }
            input[type=file] {
                display: block;
                width: 100%;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
            <iframe id="target_fileSubmit" name="target_fileSubmit" style="display: none;"></iframe>
            <header id="header" class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <!-- <a href="index.jsp"><img style="text-align: left;" width="44px" alt="" src="images/return.png"></a> -->
                <h1 class="mui-title">评价</h1>
                <!-- <img style="float: right;" width="44px" alt="" src="images/plane.png"> -->
            </header>
    
            <div id="star">
                <div class="mui-row">
                    <div class="mui-col-sm-8">
                        <li class="mui-table-view-cell"> 机舱环境</li>
                    </div>
                    <div class="mui-col-sm-6 ">
                        <li v-for="(itemClass,index) in icons_envirnment" :class="itemClass" class=" star-item" @click="stars_envirnment(index)"
                            v-bind:key="index"></li>
                        <!--性能优化 v-bind:key 数据不改变时不会重新渲染-->
                    </div>
    
                    <br>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-8">
                        <li class="mui-table-view-cell"> 服务态度</li>
                    </div>
                    <div class="mui-col-sm-6 ">
                        <li v-for="(itemClass,index) in icons_service" :class="itemClass" class=" star-item" @click="stars_service(index)"
                            v-bind:key="index"></li>
                    </div>
    
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-8">
                        <li class="mui-table-view-cell"> 用餐口味</li>
                    </div>
                    <div class="mui-col-sm-6 ">
                        <li v-for="(itemClass,index) in icons_food" :class="itemClass" class="star-item" @click="stars_food(index)"
                            v-bind:key="index"></li>
                    </div>
                </div>
            </div>
    
            <div style=" margin:60px 5px 20px;">
                <textarea rows="6" id="commentInfo" v-model="commentInfo" placeholder="请输入您的意见或建议"></textarea>
                <input type="text" id="commentEmail" v-model="commentEmail" placeholder="请输入您的邮箱" />
    
                <label for="" style="padding-bottom: 5px;">上传图片</label>
                <span class="btn btn-default fileinput-button" style=" width: 100%;">
                    <span class="glyphicon glyphicon-plus"></span>
                    <input type="file" id="commentImage" name="commentImage" style="margin-left: 15px;" accept="image/*;"
                        @change='onUpload'>
                </span>
                <img src="" height="200" alt="Image preview...">
                <!-- <p id="previewImage"></p> -->
            </div>
    
            <div style="position:fixed; bottom: -0.1rem; width:100%;">
                <button type="button" class="mui-btn mui-btn-primary" @click="submitBtn" style="width: 100%; padding: 15px;"
                    id="commentSubmitBtn">提交评论</button>
            </div>
        </div>
    
    
        <script src="vue/vue.min.js"></script>
        <script src="jquery/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="mui/js/mui.min.js"></script>
        <script>
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', function (e) {
                mui.confirm("确定要离开当前页面吗?", "温馨提示", ["取消", "确定"], function (e) {
                    if (e.index == 1) {
                        window.history.go(-1);
                    } else {
                        history.pushState(null, null, document.URL);
                    }
                });
    
            });
            var app = new Vue({
                el: '#app',
                data: {
                    score_envirnment: 0,
                    score_service: 0,
                    score_food: 0,
                    commentInfo: '',
                    commentEmail: '',
                },
                computed: { //计算属性
                    icons_envirnment() {
                        let result = []; // 返回的是一个数组,用来遍历输出星星
                        let score_envirnment = Math.floor(this.score_envirnment * 2) / 2; // 计算所有星星的数量
                        let hasDecimal = score_envirnment % 1 !== 0; // 非整数星星判断
                        let integer = Math.floor(score_envirnment); // 整数星星判断
                        for (let i = 0; i < integer; i++) { // 整数星星使用on
                            result.push("on"); // 一个整数星星就push一个CLS_ON到数组
                        }
                        if (hasDecimal) { // 非整数星星使用half
                            result.push("half"); // 类似
                        }
                        while (result.length < 5) { // 余下的用无星星补全,使用off
                            result.push("off");
                        }
                        return result;
                    },
                    icons_service() {
                        let result = []; // 返回的是一个数组,用来遍历输出星星
                        let score_service = Math.floor(this.score_service * 2) / 2; // 计算所有星星的数量
                        let hasDecimal = score_service % 1 !== 0; // 非整数星星判断
                        let integer = Math.floor(score_service); // 整数星星判断
                        for (let i = 0; i < integer; i++) { // 整数星星使用on
                            result.push("on"); // 一个整数星星就push一个CLS_ON到数组
                        }
                        if (hasDecimal) { // 非整数星星使用half
                            result.push("half"); // 类似
                        }
                        while (result.length < 5) { // 余下的用无星星补全,使用off
                            result.push("off");
                        }
                        return result;
                    },
                    icons_food() {
                        let result = []; // 返回的是一个数组,用来遍历输出星星
                        let score_food = Math.floor(this.score_food * 2) / 2; // 计算所有星星的数量
                        let hasDecimal = score_food % 1 !== 0; // 非整数星星判断
                        let integer = Math.floor(score_food); // 整数星星判断
                        for (let i = 0; i < integer; i++) { // 整数星星使用on
                            result.push("on"); // 一个整数星星就push一个CLS_ON到数组
                        }
                        if (hasDecimal) { // 非整数星星使用half
                            result.push("half"); // 类似
                        }
                        while (result.length < 5) { // 余下的用无星星补全,使用off
                            result.push("off");
                        }
                        return result;
                    },
                },
                ready: function () {
                    this.onUpload(e)
                },
                methods: {
                    stars_envirnment: function (index) {
                        this.score_envirnment = index + 1
                        console.log(index + 1)
                    },
                    stars_service: function (index) {
                        this.score_service = index + 1
                    },
                    stars_food: function (index) {
                        this.score_food = index + 1
                    },
    
                    onUpload(e) {
                        //console.log(e.target)
                        /* var fileReader = new FileReader();
                        fileReader.onload = function (e) {
    
                            document.getElementById('#previewImage').innerHTML = "<image class='img-thumbnail' style='max-width:100%;height:auto;' src=" + e
                                .target.result + "/>"; 
    
                            // 在被选元素的结尾(仍然在内部)插入指定内容
                            $("#previewImage").append(
                                "<image class='img-thumbnail' style='max-width:100%;height:auto;' src=" + e
                                .target.result + "/>");
                        };
                        // console.log(app)
                        var imageFile = e.target.files[0];
                        fileReader.readAsDataURL(imageFile); */
    
                        var preview = document.querySelector('img');
                        var file = document.querySelector('input[type=file]').files[0];
                        var reader = new FileReader();
    
                        reader.addEventListener("load", function () {
                            preview.src = reader.result;
                        }, false);
    
                        if (file) {
                            reader.readAsDataURL(file);
                        }
                    },
                    submitBtn: function () {
                        console.log("成功")
                        var xhr = new XMLHttpRequest();
                        //初始化一个请求
                        xhr.open("post", "http://192.168.188.1/nwmsucms/page/service/evaluateAddSubmit");
                        //只要 readyState 属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState 属性发生改变时触发 readystatechange 事件的时候被调用。
    
                        //    readyState :0 unsent /1 opened /2 HEADERS_RECEIVED /3	LOADING /4	DONE
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4) {
                                if (xhr.status == 200) {
                                    mui.alert("评论提交成功,谢谢您的宝贵意见", "温馨提示", "确认", function (e) {
                                        if (e.index == 0) {
                                            //window.location.reload(); 
                                            location.href = 'index.html';
                                        }
                                    });
                                } else {
                                    mui.alert("评论提交失败,请重新设置", "温馨提示", "确认", function (e) {
                                        if (e.index == 0) {
                                            window.location.reload();
                                        }
                                    });
                                }
                            }
                        };
    
                        //var commentImage = $("#commentImage")[0].files[0];
                        //var commentImageValue = $('input[name="commentImage"]').val();
                        var commentImage = document.getElementById('commentImage').files[0];
                        var commentImageValue = document.querySelector('input[type=file]').files[0];
    
                        var score_envirnment = this.score_envirnment;
                        var score_service = this.score_service;
                        var score_food = this.score_food;
    
                        var commentInfo = this.commentInfo;
                        var commentEmail = this.commentEmail;
    
                        var regEmail = new RegExp(
                            "^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
                        );
    
                        if (score_envirnment == "") {
                            mui.alert("机舱环境星级值不能为空", "温馨提示", "确认");
                            return false;
                        } else if (score_service == "") {
                            mui.alert("服务态度星级值不能为空", "温馨提示", "确认");
                            return false;
                        } else if (score_food == "") {
                            mui.alert("用餐口味星级值不能为空", "温馨提示", "确认");
                            return false;
                        } else if (commentInfo == "") {
                            mui.alert("请填写您的意见或建议", "温馨提示", "确认");
                            return false;
                        } else if (commentEmail == "") {
                            mui.alert("请留下您的邮箱地址,我们会将反馈结果及时反馈给您", "温馨提示", "确认");
                            return false;
                        } else if (!regEmail.test(commentEmail)) {
                            mui.alert("您填写的邮箱格式不正确,请重新输入", "温馨提示", "确认");
                            return false;
                        } else if (commentImageValue == "") {
                            mui.alert("请对您认为不好的地方留下一张图片,方便我们定位问题", "温馨提示", "确认");
                            return false;
                        } else {
                            var commentForm = new FormData();
                            commentForm.append("score_envirnment", score_envirnment);
                            commentForm.append("score_service", score_service);
                            commentForm.append("score_food", score_food);
                            commentForm.append("commentInfo", commentInfo);
                            commentForm.append("commentEmail", commentEmail);
                            commentForm.append("commentImage", commentImage);
                            xhr.send(commentForm);
                        }
                    }
                }
            })
        </script>
    </body>
    
    </html>
    
    展开全文
  • vue 监听页面滚动事件

    万次阅读 2019-02-18 01:41:03
    vue中监听页面滚动执行一些操作 mounted(){ window.addEventListener('scroll',this.handleScroll,true) }, methods: { handleScroll(e){ var scrollTop = e.target.documentElement.scrollTop || e.target.body...

    在vue中监听页面滚动执行一些操作

      mounted(){    window.addEventListener('scroll',this.handleScroll,true)  },
      methods: {
        handleScroll(e){      var scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;      // 执行代码
        },  }复制代码


    html

    <div id="app" > 
        <div class="min_container"  @scroll="scrollEvent" > </div>    <div class='go_more' v-if='more_show'  @click='GoMore' >加载更多</div>          <div class='go_more' v-else>没有更多评价了</div>
    </div>复制代码

    css

    .min_container {  padding-top: 1.1rem;  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  overflow-y: auto;}复制代码

    js 

        data 
    
        more_show: true, // 标志是否可以加载更多    more_show: true, // 标志是否可以加载更多    loading: false, // 只有在列表数据获取之后才可以设置为ture 在滚动加载更多的时候使用
    复制代码


     methords
    
     scrollEvent(eve) {
          const that = this      // console.log(      //   eve.srcElement.scrollTop,      //   eve.srcElement.offsetHeight,      //   eve.srcElement.scrollHeight      // );      if (        eve.srcElement.scrollTop + eve.srcElement.offsetHeight >          eve.srcElement.scrollHeight - 10 &&        this.more_show &&        this.loading      ) {
             // 执行函数
             // 中转参数      }    },
    复制代码

    回调函数

            that.loading = true;        if (that.evaluation_arr.length == that.page_count) {          that.more_show = false;        } else {          that.more_show = true;        }复制代码


    展开全文
  • Vue页面导出成PDF文件

    千次阅读 2020-08-14 15:17:39
    我在前端岗位上要实现个可视化图表页的PDF文件导出,在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法。 1. 下载npm包 npm install html2canvas npm install jspdf 2. 创建插件.js文件 Vue-...

    我在前端岗位上要实现个可视化图表页的PDF文件导出,在这里给大家分享下使用jsPDF和html2canvas包将Vue页面导出成PDF的方法。

    1. 下载npm包

    npm install html2canvas
    npm install jspdf 
    

    2. 创建插件.js文件

    Vue-cli项目的话是在./utils文件夹下,我在这里使用的nuxt框架,所以是在./plugins文件夹下。

    import html2Canvas from 'html2canvas';
    import JsPDF from 'jspdf';
    
    export default {
      install (Vue, options) {
        Vue.prototype.getPdf = function () {
          var title = this.pdfTitle;  // 导出的pdf文件名
          html2Canvas(document.querySelector(this.pdfSelector), { //导出的html元素
            allowTaint: true
          }).then(function (canvas) {
            let contentWidth = canvas.width;
            let contentHeight = canvas.height;
            let pageHeight = contentWidth / 592.28 * 841.89;
            let leftHeight = contentHeight;
            let position = 0;
            let imgWidth = 595.28;
            let imgHeight = 592.28 / contentWidth * contentHeight;
            let pageData = canvas.toDataURL('image/jpeg', 1.0);
            let PDF = new JsPDF('', 'pt', 'a4');
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                  PDF.addPage();
                }
              }
            }
            PDF.save(title + '.pdf');
          })
        }
      }
    }
    

    上面的插件代码可以直接复制,然后在引用的Vue文件中填入自己的参数就可以了。

    3. 修改引用页面

    导出按钮调用getPdf方法,data填入参数。

    <template>
      <div id="pdfPrint">
          	<!-- 调用getPdf方法 -->
            <el-button @click="getPdf('#pdfPrint')">保存为PDF</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          // 填入导出的pdf文件名和html元素
          pdfTitle: '因子评价报告',
          pdfSelector: '#pdfPrint',
        }
      },
    

    大概就是这样啦,非常地简单,有什么问题可以在下方评论区提问~

    展开全文
  • 实现评价界面
  • vue组件 评价-星星

    2020-04-22 11:01:50
    封装好rate.vue之后在你需要的页面引入 星星评价组件支持参数如下:星星的间距,是否可点击,最大评分,当前评分,星星的大小,是否展示描述,是否展示评分,描述数组,评分数组,亮星星,暗星星(图片地址) ...
  • 如图,这是滴滴打车订单的评价页面,里面核心主要有两个,第一个是星星与标签内容,第二个是文本框内容与剩余文字提醒。 我将评价界面的数据作为一个参数传入给前端,更符合前后端交互的思维,前端只是纯展示,...
  • vue+cube 评价/意见反馈页面

    千次阅读 2019-03-27 16:02:20
    ">匿名评价</cube-checkbox> --> ()" v-if="checked"> 匿名评价 </div> ()" v-if="!checked"> 匿名评价 </div> ;" :checked="checked" /> </div> data() { return { checked: true } } methods: { selCheck () {...
  •   去年的时候其实已经把Vue的文档,以及Vue权威指南这本书看的差不多了,也进行了相关的练习,但是由于年底项目比较紧张,所以也没有真正的在iOS项目中使用Vue去写页面。最近开始练习,用Vue写了一个简单的页面,...
  • vue实现订单多商品评价 最近在开发简易版商城,其中有发表评价功能,涉及到一个订单多商品评价。项目使用vue结合vant组件开发。 文章目录vue实现订单多商品评价效果图前提template初始化获取订单详情上传图片after...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,830
精华内容 1,132
关键字:

vue评价页面

vue 订阅