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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JavaScript实现打字游戏
Feb 19 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与ASP
2006/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python中property属性实例解析
2018/02/10 Python
python获取array中指定元素的示例
2019/11/26 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
python 画图 图例自由定义方式
2020/04/17 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
解决方案设计综合面试题
2015/08/31 面试题
煤矿班组长竞聘书
2014/03/31 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
单位考核聘任报告
2015/03/02 职场文书
政协常委会议主持词
2015/07/03 职场文书
Python基础之进程详解
2021/05/21 Python