vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

// 评分
  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 = \'很满意\'
    }

<textarea v-bind:maxlength=\"Surplus\" @input=\"descArea\" v-model=\"inputText\" name=\"abstract\" id=\"abstract\" placeholder=\"宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧！\"></textarea>

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

let reader = new FileReader()
     let that = this
     reader.readAsDataURL(file)
     reader.  = function (e) {
      console.log(this.result)
      that.imgUrls.push(this.result)
     }

<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>

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.  = 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>