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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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 smarty模版引擎中的缓存应用
2009/12/02 PHP
php 生成文字png图片的代码
2011/04/17 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP fclose函数用法总结
2019/02/15 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python让函数不返回结果的方法
2020/06/22 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
Java如何格式化日期
2012/08/07 面试题
消防安全汇报材料
2014/02/08 职场文书
大学生就业策划书范文
2014/04/04 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android