评论

<template>
  <div>
     <!-- 评论页面头部 -->
     <div class="comment_header">
            <i @click='back'  class="el-icon-back"></i>
            <p class="title">发表评价</p>
            <p class="release" @click="addComment">发布</p>
     </div>
     <!-- 商品信息栏 -->
     <div class="goods">
         <div class="goods_i">
             <img src="../assets/image/photo_item.png" alt="商品信息照片">
         </div>
         <div class="goods_test">
             <p class="goods_title">
                 Apple iPhone11 (A2332)
                 128GB 黑色移动
             </p>
             <p class="configure">
                 <span class="color">颜色:黑色</span>
                 <span class="size">规格:128GB</span> 
             </p>
         </div>
     </div>
     <!-- 整体评价 -->
     <div class="all">
         <div class="whole">
             <ul class="StarsWrap">
                    <li style="color:#666666;">整体评价</li>
                    <li v-for="(i,index) in list" :key="index" @click="clickStars(index)">
                      <img :src="xing>index?stara:starb">
                    </li>
                    <li style="color:#9B9B9B;font-size: 0.14rem;">{{rateScoreText}}</li>
             </ul>
         </div>
     </div>
     <!-- 添加评价文字 -->
     <div class="address">
          <textarea name="" id="" placeholder="请评价高,立即开机使用,手机也不重,也不卡~"
                    v-model="content">
          </textarea>
     </div>
     <!-- 添加评价照片 -->
     <div class="address_photo">
         <ul class="add_img">
             <li v-if="seat"></li>
             <!-- 添加图片显示位置 -->
              <!-- 照片点击上传显示位置 -->
              <li v-for='(value, key) in imgs' class="addImg" style="30%;height:1rem;border:1px solid #ccc;">
                    <a class="close" @click="delImg(key)"><img src="../assets/image/delete.png" alt=""></a>
                   <img :src="getObjectURL(value)">
              </li>
              <!-- 添加照片logo图标按钮-->
              <li style="position: relative;" v-if="imgLen>=4 ? false : true">                 
                 <img style="0.3rem;padding-left: 0.3rem;padding-top:0.4rem;" src="../assets/image/camera_item.png" alt="">
                 <input  style="position: relative;left:0.1rem;opacity: 0;z-index: 300;" 
                        type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jpeg,image/gif,image/jpg"/>
                 <span style="position: absolute;left:0.18rem;top:0.7rem">添加图片</span>       
              </li>
             
         </ul>
         
        
     </div>
     <!-- 店铺评价星级点击 -->
     <div class="shop">
         <p>店铺评价</p>
         <div class="delivery">
                <ul class="StarsWrap">
                    <li style="color:#666666;">送货评价</li>
                    <li v-for="(i,index) in deliveryList" :key="index" @click="deliveryStars(index)">
                        <img :src="xing2>index?stara:starb">
                    </li>
                 </ul>
         </div>
         <div class="service">
                <ul class="StarsWrap">
                    <li style="color:#666666;">服务态度</li>
                    <li v-for="(i,index) in serviceList" :key="index" @click="serviceStars(index)">
                        <img :src="xing3>index?stara:starb">
                    </li>
                 </ul>
         </div>
     </div>


    
    

   
  </div>


</template>

<script>
    import offImg from '@/assets/image/off.png'
    import Img from '@/assets/image/half.png'
    export default{
        data(){
             return{
                seat:true,
                content:'',//评论内容
                picUrls:'',//评论图片URL
                level:'',//星级点评级别
                score:'',
                rateScoreText: '',
                rateScoreDesc: ['非常不满意', '不满意，比较差', '一般，还需改善', '比较满意', '非常满意'],
                stara:offImg,//亮星星
                list:[0,1,2,3,4],
                deliveryList:[0,1,2,3,4],
                serviceList:[0,1,2,3,4],
                starb:Img,//暗星星
                xing:0,
                xing2:0,
                xing3:0,
                formDate:new FormData(),
                imgs:{},
                imgLen:0,
                tupian:'',//评论图片文件
                pic:'',
                arr:[],
                valve:false,//用户是否提交评论照片的状态,默认没有提交
                id:this.$route.params.goodId
            }
        },
        methods:{
            //返回上一级目录
             back(){
                this.$router.go(-1)
            },
            // 整体评价点击
            clickStars(i){
                this.rateScoreText=this.rateScoreDesc[i]
                this.xing=i+1
                this.level=i+1;
                if(this.level<1){
                    alert("请提交星级点评")
                }
                console.log(this.level)
            },
            //店铺评价点击
            deliveryStars(i){
                this.xing2=i+1
                // console.log("点击了送货"+(i+1)+"颗星")
            },
            //服务态度点击
            serviceStars(i){
                this.xing3=i+1
                // console.log("点击了服务"+(i+1)+"颗星")
            },
            //点击添加评论
            addComment(){
                console.log(this.content)
              
                // console.log(this.goodsId)
                this.$axios.post("http://192.168.0.14:8080/wx/order/comment",{
                    type:0,//类型
                    orderGoodsId:this.id,//商品id
                    content:this.content,//评论内容
                    star:this.level,//评论星级
                    hasPicture:true,//是否上传图片
                    picUrls:this.arr //图片url数组
                }).then(res=>{
                    console.log(res)
                })

            },
            //添加照片 
            addImg(event){
                this.seat=false;
                let inputDOM=this.$refs.inputer;
                //通过DOM获取数据
                this.fil=inputDOM.files;
                let file=this.$refs.inputer.files[0];
                let file_s=file.size
                // if(file.=0){
                //     this.seat=false;
                // }else{
                //     this.seat=true;
                // }
                console.log(file);
                
                //新建表单存储数据
                let data=new FormData();
                data.append('file',file);               
                this.$axios.post("http://192.168.0.14:8080/wx/comment/uploadCommentPic",data).then(res=>{
                    //获取到照片追加到新的数组提交
                      this.pic=res.data.data.picUrl
                      this.arr.push(this.pic);
               })  
                let oldLen=this.imgLen;
                let len=this.fil.length_oldLen;
                if(len>2){
                    alert('最多可以上传3张+您还可以上传'+(3-oldLen)+'张');
                    return false;
                }
                for(let i=0;i<this.fil.length;i++){
                    let size=Math.floor(this.fil[i].size/1024);
                    if(size>5*1024*1024){
                        alert('请选择5M以内的图片!');
                        return false
                    }
                    this.imgLen++;
                    this.$set(this.imgs,this.fil[i].name+'?'+new Date().getTime()+i,this.fil[i]);
                   
                }
            },
            //浏览器
            getObjectURL(file){
                var url=null;
                if(window.createObjectURL!=undefined){
                    url=window.createObjectURL(file);
                }else if(window.URL!=undefined){
                    url=window.URL.createObjectURL(file);
                }else if(window.webkitURL!=undefined){
                    url=window.webkitURL.createObjectURL(file);
                }
                // console.log(url(1));
                return url;
            },
            // 删除照片
            delImg(key){
                this.$delete(this.imgs,key);
                this.imgLen--;
            },
            submit(){
                for(let key in this.imgs){
                    let name=key.split('?')[0];
                    this.formDate.append('multipartFiles',this.formData,{
                        headers:{'Content-Type':'multipart/form-data'}
                    }).then(res=>{
                        this.alertShow=true;
                    })
                }
            },
        },  
    }
    

  



</script>  

<style scoped>
.comment_header{
    padding: 0.15rem;
    padding-bottom: 0.3rem;
}
.comment_header i{
    font-size: 0.26rem;
    font-weight: bold;
    float: left;
}
.title{
    float: left;
    padding-left: 0.12rem;
    font-size: 0.18rem;
    font-weight: bold;
}
.comment_header .release{
    float:right;
    color:#FF5403;
    font-size: 0.16rem;
    font-weight: 500;
    padding-right: 0.1rem;
}
/* 商品信息样式 */
.goods{
    margin-top: 0.2rem;
    padding-left: 0.12rem;
    padding-right: 0.12rem;
    display: flex;
    justify-content: space-between;
}
.goods_title{
    color:#000000;
    font-size: 0.15rem;
    font-weight: 600;
    text-align: left;
}
.configure{
    60%;
    background-color: #F5F6FA;
    padding-left: 0.02rem;
    padding-right: 0.02rem;
    border-radius: 0.12rem;
    line-height: 0.2rem;
    margin-top: 0.12rem;
}
.configure span{
    color:#C8C8C8;
    font-size: 0.08rem;
    margin-left: 0.16rem;
}
/* 整体评价样式 */
.all{
    margin-top: 0.2rem;
    padding-left: 0.12rem;
}
/* 文字评价 */
.address{
    margin-top: 0.2rem;
}
.address textarea{
    3.43rem;
    height:1rem;
    margin-left: 0.12rem;
    border:none;
}
/* 评论添加照片 */
.address_photo{
    /*  86%;
    height: 1.2rem; */
     86%;
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
    overflow: hidden;
    /* overflow: auto; */
    margin-top: 0.1rem;
    margin-left: 0.12rem;
    margin-right: 0.12rem;
    padding-left: 0.12rem;
    padding-right: 0.12rem;
    border-radius: 0.12rem;
    box-shadow: 10px 5px 10px 0px #ccc;
}
.add_img li{
    30%;
    height:1rem;
    float: left;
    position: relative;
    margin-top: 0.08rem;
    margin-left: 0.08rem;
    border:1px solid #ccc;
}
.addImg>img{
    100%;
    /* height:1rem; */
}
.close{
    /* float: right;
     0.2rem;
    height: 0.2rem;
    margin-top: -0.1rem;
    margin-right: -0.1rem; */
     0.2rem;
    height: 0.2rem;
    position: absolute;
    right:-0.06rem;
    top:-0.08rem;
}
.close>img{
    100%;
}
/* .add li>img{
     100%;
} */

.shop{
    margin-top: 0.3rem;
    padding-left: 0.12rem;
}
.shop p{
    text-align: left;
    color:#666666;
    font-weight: 800;
    font-size: 0.16rem;
    padding-bottom: 0.09rem;
}
/* 星星点评 */
.StarsWrap{
   100%;
  display: flex;
  /* justify-content: space-between; */
  height: 0.2rem;
  margin: 0.1rem 0;
}
.StarsWrap li{
  float: left;
  margin-right: 0.1rem;
}

</style>