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


Posted in Javascript onOctober 29, 2018

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

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

评价页

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

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

功能需求分析

1.默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度。

 2.评价内容,最多为200字。

 3.上传图片最多上传6张,图片不可拉伸,可删除,可点击放大左右滑动展示

具体实现关键代码

 关于星级功能:

 写一个五星数组,默认数组中有亮的星级图片,用bool值判断是否变暗。 

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 = '很满意'
  }

2. 评价内容输入

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

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

上传多张图片功能

单独写了个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"拿到图片信息,有两种方式展示:

图片流形式展示图片

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

 用到了px和rem自动转化  https://3water.com/article/149721.htm

总结

以上所述是小编给大家介绍的vue实现类似淘宝商品评价页面星级评价及上传多张图片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
javascript常用函数(1)
Nov 04 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 #Javascript
简单说说angular.json文件的使用
Oct 29 #Javascript
JS 实现获取验证码 倒计时功能
Oct 29 #Javascript
浅析微信扫码登录原理(小结)
Oct 29 #Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 #Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 #Javascript
vue mounted 调用两次的完美解决办法
Oct 29 #Javascript
You might like
第六章 php目录与文件操作
2011/12/30 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php cli 小技巧
2013/06/03 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
IE8 原生JSON支持
2009/04/13 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
Vue.use源码分析
2017/04/22 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python urllib2运行过程原理解析
2020/06/04 Python
详解Python IO口多路复用
2020/06/17 Python
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
项目建议书范文
2014/05/12 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
介绍信范文大全
2015/05/07 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
初中班主任工作随笔
2015/08/15 职场文书