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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
js Dom实现换肤效果
Oct 21 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php日期操作技巧小结
2016/06/25 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Python 除法小技巧
2008/09/06 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
信息管理专业自荐书
2014/06/05 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis