###话不多说 直接上代码
<template> <div> <div class="evaluate"> <ul> <li class="shopping_cart" v-for="item in orderList.entries" v-bind:key="item.id"> <div class="shop_img"> <img :src="item.product.url" alt=""/> </div> <div class="shopping_center"> <div class="shopping_descript_top"> {{item.product.name}} </div> <div class="shopping_descript_bottom"> <ul> <li class="shopping_price">￥{{item.basePrice.value | numFilter}}</li> </ul> </div> </div> </li> </ul> </div> <div class="star_evaluate"> <div class="star_div"> <ul> <li class="title"> <span>商品评分：</span> </li> <li> <div class="title_hint">满意的话请给我们5星好评哦！</div> <div> <ul class="star_ul"> <li :class="['star',{'em_active':item <= itemIndex}]" v-for="(item,index) in star" @click="starChange(index)" v-bind:key="item.id"> <em class="icon iconfont" v-if="item > itemIndex"></em> <em class="icon iconfont" v-if="item <= itemIndex"></em> </li> </ul> </div> </li> </ul> </div> </div> <div class="upload"> <div class="eval_content"> <textarea name="comment" v-model="comment" id="comment" maxlength="200" placeholder="您的评价对其他用户都是很重要的参考哦..." ></textarea> </div> <div class="eval-list"> <div class="demo-upload-list" v-for="item in fileList" v-bind:key="item.code"> <!-- <div v-if="item.status === 'finished'"> --> <div> <img :src="item.url" /> <!-- <img :src="item.url"> --> <div class="demo-upload-list-cover"> <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon> <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon> </div> </div> <!-- <div v-else> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> </div> --> </div> <div class="eval-upload"> <div class="upload_img"> <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" /> <div @click="uploadFile"> <em class="icon iconfont"></em> <p>添加图片</p> </div> </div> <p class="upload_hint">最多上传3张图哦</p> </div> </div> <Modal title="View Image" v-model="visible"> <img :src="imgUrl" v-if="visible" style="width: 100%"> </Modal> </div> <div class="btn_div"> <a href="javascript:;" class="btn btn-large" @click="SubmitProductComment">提交</a> </div> <bose-prompt :model="isPrompt" :isIcon="isIcon" :content="content"></bose-prompt> </div> </template> <script> import LayoutList from "@components/layout/LayoutList"; import ScrollContainer from "@components/atom/ScrollContainer"; import { Api, Global,Util } from "@utils/global"; import Prompt from "@components/atom/Prompt"; function getFileUrl(obj) { // let url; var url = []; for(var i = 0;i < obj.files.length;i++){ url.push(window.URL.createObjectURL(obj.files.item(i))); } // url = window.URL.createObjectURL(obj.files.item(0)); return url; } export default { data() { return { star: [1, 2, 3, 4, 5], orderList: [], //商品列表 itemIndex: 5, // 选中的星星数 defaultList: [ { code: "a42bdcc1178e62b4694c830f028db5c0", url: "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar" }, { code: "bc7521e033abdd1e92222d733590f104", url: "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar" } ], imgName: "", visible: false, uploadList: [], imgData: { accept: "image/gif, image/jpeg, image/png, image/jpg" }, fileList: [],//上传的图片 files:[], orderCode:Util.getUrlParam("ordercode"), comment:null,//评论的内容 uploadImgNumber:3,// 上传图片的 数量 filesUrl:[],// 上传图片成功的地址 isPrompt: false, // 提示信息框 显示/隐藏 isIcon: true, // 弹框提示是否需要icon 对勾 图标 content: null // 提示信息 }; }, mounted() { this.$store.dispatch('init', this.getList); // this.getList(); }, components: { LayoutList, ScrollContainer, "bose-prompt": Prompt, }, methods: { redirect: Util.redirect, clearProm() { setTimeout(() => { this.isPrompt = false; }, 2000); }, starChange(index) { this.itemIndex = index + 1; }, getList() { Api.ajax({ key: "getOrderByCode", data: { ordercode: this.orderCode } }).then( res => { // console.log(res) this.orderList = res; }, res => {} ); }, uploadFile() { // this.fileChange(); document.getElementById("upload_file").click(); }, fileChange(el) { //上传图片 this.uploadImgNumber = this.uploadImgNumber - this.filesUrl.length; if(el.target.files.length > this.uploadImgNumber){ // alert('最多只能选择3张图片！'); this.content = '最多只能选择3张图片！'; this.isPrompt = true; this.isIcon = false; this.clearProm(); return false; } var that = this; //上传头像图片 // var imagesArr = []; var length = el.target.files.length; for(var i = 0;i < el.target.files.length;i++){ var file = el.target.files[i]; var _type = file.name; _type = _type.split('.') if(_type[1] != 'png' && _type[1] != 'jpeg' && _type[1] != 'jpg'&& _type[1] != 'gif'&& _type[1] != 'bmp'){ // alert('暂不支持视频上传，请上传图片！'); that.content = '暂不支持视频上传，请上传图片！'; that.isPrompt = true; that.isIcon = false; that.clearProm(); return false; } var reader = new FileReader(); reader.readAsDataURL(file); debugger reader.onload = function (e) { debugger //压缩图片 var img = new Image(), quality = 1.0;//图像质量 img.setAttribute("crossOrigin",'Anonymous'); img.src = e.target.result; img.onload=(res)=>{ that.handlerImg(img, img.width, img.height); } } } }, handlerImg(_img, width, height){ // debugger var width = _img.width, //图片resize宽度 height = _img.height; //计算比例 var rate = 1; if(width >= height){ if(width > 720){ rate = 720 / width; } }else{ if(height > 720){ rate = 720 / height; } } _img.width = width * rate; _img.height = height * rate; var that = this; var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d"),img = new Image(); img.src = _img.src; canvas.width = width; canvas.height = width * (_img.height / _img.width); drawer.drawImage(img, 0, 0, canvas.width, canvas.height); img.src = canvas.toDataURL("image/jpeg", 0.8); // 读取到的图片base64 数据编码 将此编码字符串传给后台即可 var imgcode = img.src; var _code = imgcode.split(','); var imagesArr = []; imagesArr.push(_code[1]) Api.ajax({ key: "upload", type: "POST", data: { images:imagesArr } }).then( res => { if(res.msgCode == '00001'){ var _res = that.filesUrl ? that.filesUrl : []; _res.push(res.mediaList[0]); that.filesUrl = _res; that.fileList = _res; }else if(res.msgCode == '00002'){ alert('图片数量不能超过3张！'); }else if(res.msgCode == '00003'){ alert('上传图片过大！'); }else if(res.msgCode == '00004'){ alert('上传失败！'); }else if(res.msgCode == '00005'){ alert('已经进行过评价！'); } }, res => { // console.log(res) } ); }, handleView(item) { this.imgUrl = item.url; this.visible = true; }, handleRemove(item) { //删除上传的图片 var images = []; images.push(item.code) Api.ajax({ key: "deletePicture", type: "POST", data: { images:images } }).then( res => { // console.log(res) this.fileList.splice(this.fileList.indexOf(item), 1); // console.log(this.fileList.length) this.uploadImgNumber = 3 - this.fileList.length; }, res => {} ); }, SubmitProductComment(){ //提交商品评价 var _filesUrl = []; for(var i = 0;i < this.filesUrl.length;i++){ _filesUrl.push(this.filesUrl[i].url) } //files:JSON.stringify(_filesUrl), var params = { orderCode:this.orderCode, files:JSON.stringify(_filesUrl), star:this.itemIndex, comment:this.comment } Api.ajax({ key: "getSubmitProductCommentByOrderCode", type: 'POST', data: params, }).then( res => { // console.log(res) // this.redirect('orderList',{type:4,tab:4}); if(res.msgCode == '00001'){ // console.log(res) this.redirect('orderList',{type:4,tab:4}); }else if(res.msgCode == '00002'){ alert('提交参数有误！'); }else if(res.msgCode == '00003'){ alert('订单状态异常！'); }else if(res.msgCode == '00004'){ alert('评论内容不能超过200个字！'); }else if(res.msgCode == '00005'){ alert('评价内容包含敏感词，请修改！'); } }, res => {} ); } } }; </script> <style lang="scss"> @import "@/assets/css/variables.scss"; .evaluate { padding: 30px; width: 100%; height: 100%; background-color: $ff; margin-bottom: 20px; ul { .shopping_cart { display: flex; .shop_img { width: 180px; height: 180px; img { width: 100%; } } } .shopping_center { width: 480px; height: 180px; padding: 0px 16px; .shopping_descript_top { width: 380px; height: 85px; font-size: 28px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 24px; } .shopping_descript_bottom { ul { display: flex; .shopping_price { width: 330px; font-size: 32px; } } } } } } .star_evaluate { padding: 30px; background-color: $ff; margin-bottom: 20px; .star_div { ul { display: flex; .title { width: 130px; // height: 165px; span { font-size: 26px; color: $normal; } } li { .title_hint { font-size: 26px; color: $sub; } .star_ul { padding-top: 10px; .star { margin-right: 15px; em { font-size: 54px; color: $border; } } .em_active { em { color: $star-yellow; } } } } } } } .eval_content { textarea { width: 100%; } } .upload { padding: 30px; background-color: $ff; .upload_hint { font-size: 24px; color: $sub; } .upload_img { background: #fff; border: 1px dashed #ccc; border-radius: 0.04rem; text-align: center; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.2s ease; width: 145px; height: 145px; div { width: 100%; // line-height: 75px; padding-top: 25px; em { color: $sub; } p { color: $sub; } } } } .demo-upload-list { display: inline-block; width: 145px; height: 145px; text-align: center; line-height: 145px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); margin-right: 8px; } .demo-upload-list img { width: 100%; height: 100%; } .demo-upload-list-cover { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); } .demo-upload-list:hover .demo-upload-list-cover { display: block; } .demo-upload-list-cover i { color: #fff; font-size: 20px; cursor: pointer; margin: 0 2px; } .v-transfer-dom { .ivu-modal-wrap { .ivu-modal { padding: 10px; width: 100% !important; } } } .btn_div { padding: 30px; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: $border; } input:-moz-placeholder, textarea:-moz-placeholder { color: $border; } input::-moz-placeholder, textarea::-moz-placeholder { color: $border; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: $border; } .eval-list{ display: flex; } </style>