add_comment.html 21.1 KB

Edit Raw Blame History

<script type="text/javascript" src="__PUBLIC__/js/rem_new.js"></script>
<!DOCTYPE html >
<html>
<head>
    <meta charset="UTF-8">
    <title>评价宝贝</title>
    <include file="public/header"/>
    <include file="public/menu"/>
    <include file="public/navBall"/>
    <style type="text/css">
        .jsstar {
            list-style: none;
            margin: 0px;
            padding: 0px;
            height: 30px;
            position: relative;
        }

        .jsstar li {
            padding: 0px;
            float: left;
            width: 25px;
            height: 25px;
            margin-right: 5px;
            background: url(__STATIC__/images/star_rating.png) 0 0px no-repeat;
            background-size: auto 50px
        }

        .jsstar span {
            font-size: 14px;
            line-height: 30px;
            margin-left: 10px;
            color: #F00;
            vertical-align: top;
            display: none;
        }

        /*修改评价框  20170512*/
        .contentBox {
            border-radius: 5px;
            background: #fff;
            position: relative;
            width: 95%;
            margin: 0 auto;
            margin-top: 10px;
        }

        .pj dl dd textarea {
            width: 98%;
            height: 140px;
            display: block;
            border: 0;
            background: none;
            font-size: 16px;
            line-height: 24px;
            resize: none;
            padding: 2%;
            word-break: break-all;
        }

        .dtBox {
            height: 1.6rem;
            font-size: 0;
        }

        @media (max-width: 480px ) {
            .dtBox {
                height: 100px;
            }

            .pj dl dd textarea {
                height: 100px;
            }
        }

        @media (max-width: 480px ) {
            .pingfen {
                padding: 10px 20px;
            }
        }

        .delete{
            width: 15px;
            position: relative;
            right: 12px;
            top: -29px;
        }
        textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
           font-size: 12px;
        }
        textarea::-moz-placeholder { /* Firefox 19+ */
            font-size: 12px;
        }
        textarea:-ms-input-placeholder { /* IE 10+ */
            font-size: 12px;
        }
        textarea:-moz-placeholder { /* Firefox 18- */
            font-size: 12px;
        }


    </style>
    <link rel="stylesheet" href="__STATIC__/css/my_evaluate.css?v=__CSSVERSION__">
<body>

<!--<form id="add_comment" method="post" enctype="multipart/form-data" onSubmit="return validate_comment()">-->
<form name="add_comment" id="add_comment" autocomplete="off" method="" enctype="multipart/form-data">
    <input type="hidden" name="order_id" value="{$order_goods.order_id}">
    <input type="hidden" name="goods_id" value="{$order_goods.goods_id}">
    <div class="pj">
        <dl>
            <dt class="dtBox">
                <img src="{:getimg($goods.original_img,NOIMG,0,1)}" class="disib" style="width: 100%;"/>
            <div class="dis_vm"></div>
            </dt>
            <dd>
                <div style="width: 100%;height:50%">
                    <div class="goods_name ellipsis-2">{$goods.goods_name}</div>
                   <!-- <if condition="$good.guige">
                        <text class="norms">{$good.guige}</text>
                        <else/>
                        <text class="norms fs11">规格1</text>
                    </if>-->
                </div>

                <div style="width: 100%;height: 50%" class="flex ai_fe jc_sb">
                    <strong class="fr fs17">
                        <if condition="$order_goods.goods_price gt 0">
                           <text class="fs11">￥</text>{$order_goods.goods_price}
                        </if>
                        <if condition="$order_goods.integral gt 0">
                            <if condition="$order_goods.goods_price gt 0">+ </if>  <text class="fs11">{$order_goods.integral}积分</text>
                        </if>
                    </strong>
                    <dix class="fs14">x{$order_goods.goods_num}</dix>
                </div>
            </dd>
            </dd>
        </dl>

        <ul class="Refund">

            <div class="contentBox">
                <textarea style="background: rgb(248, 248, 248);height: 80px" id="content_13" name="content"
                          placeholder="已经收到商品，快来跟大家分享一下宝贝吧!"></textarea>
            </div>
            <ul class="upPic">
                <i id="showimg" class="rel" style="display: inline-block; vertical-align: middle;"></i>
                <span id="mfile" style=" position: relative;  display: inline-block; vertical-align: middle;
	        background-repeat: no-repeat;border:1px dashed rgb(196, 196, 196); border-radius: 2px;
	        background-size:100% 100%;width: 60px;height: 60px;text-align: center " onclick="is_img_val()">
			<input id="inputfile" type="file" name="comment_img_file" accept="image/*" style="opacity: 0;
			     width: 100%; height: 100%; position: absolute; top:0; right: 0;"
                   multiple onchange="handleFiles(this)">
                <img class="picture" src="__STATIC__/images/home_page/camera.png">
                   <div class="fg fs10 t_c">添加图片</div>
                   <div class="t_c fg fs020"><text id="picture_val">0</text>/3</div>
	</span>
            </ul>
        </ul>
        <div class="pingfen">

            <div class="score fs14">宝贝评分</div>
            <ul>
                <li class="fl fs12">描述相符</li>
                <ul class="jsstar "><span></span>
                    <input name="goods_rank" value="0" type="hidden">
                    <li title="1"></li>
                    <li title="2"></li>
                    <li title="3"></li>
                    <li title="4"></li>
                    <li title="5"></li>
                </ul>
                <div class="clear"></div>
            </ul>


            <ul>
                <li class="fl fs12">物流服务</li>
                <ul class="jsstar "><span></span>
                    <input name="deliver_rank" value="0" type="hidden">
                    <li title="1"></li>
                    <li title="2"></li>
                    <li title="3"></li>
                    <li title="4"></li>
                    <li title="5"></li>
                </ul>
                <div class="clear"></div>
            </ul>
                <ul>
                    <li class="fl fs12">服务态度</li>
                    <ul class="jsstar"><span></span>
                        <input name="service_rank" value="0" type="hidden">
                        <li title="1"></li>
                        <li title="2"></li>
                        <li title="3"></li>
                        <li title="4"></li>
                        <li title="5"></li>
                    </ul>
                </ul>

        </div>
    </div>
    <div class="flex jc_fe ai_center anonymous-frame fs14" onclick="anonymous_test()">
        <div class="imgs"></div>
        匿名评价
    </div>
    <div class="p_main">
	<span style=" display:block; width:90%; overflow:hidden; margin:auto; margin-bottom:20px; margin-top:20px;">
	<input value="提交评价" class="m_pingjia tac" onclick="submit_form()" type="button"/>
	</span>
    </div>
</form>
</body>

<script>
    var getstoid="<?php echo I('stoid')?>";
    var pdata = [];//上传图片的存放容器
    var upback=[];
    var wid = 0;
    $(function () {
        wid = $("body").width() /5.4;
        $("#mfile").width(wid);
        $("#mfile").height(wid);
    });
    function  is_img_val(){
          var val=$("#picture_val").text();
          console.log("val是什么东西5555555",val);
          if(val==3){
              $("#inputfile").attr("type","text");
          }
    }

    function submit_form(){
        var content = $("#content_13").val();

        if(content == ''){
            layer.open({content:'评价内容不能为空',time:2});
            return false;
        }
        var error = [];
        var img_num = 0;
        var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";//全部图片格式类型
        //var title = document.getElementById("title").value;
        var iok=1;
        $(".jsstar input").each(function(index){
            if(this.value == '0'){
                if(this.name == 'goods_rank'){
                    layer.open({content:'请给描述评分',time:2});
                    iok=0;
                    return false;
                };
                if(this.name == 'service_rank'){
                    layer.open({content:'请给服务评分',time:2});
                    iok=0;
                    return false;
                };
                if(this.name == 'deliver_rank'){
                    layer.open({content:'请给物流评分',time:2});
                    iok=0;
                    return false;
                };
                if(this.name == 'satisfaction_rank'){
                    iok=0;
                    layer.open({content:'请给商品评分',time:2});
                    return false;
                };
            }
        });
        if(iok==0){return;}

        var isok=1;
        $("#showimg input").each(function(index){
            FileExt = this.value.substr(this.value.lastIndexOf(".")).toLowerCase();
            if(this.value!=''){
                img_num++;
                if(AllImgExt.indexOf(FileExt+"|")==-1){
                    //error.push("第"+(index+1)+"张图片格式错误");
                    layer.open({content:"第"+(index+1)+"张图片格式错误",time:2});
                    isok=0;
                }
            }
        });
        if(isok==0){ return;  }
        var t=layer.open({shadeClose: false,type: 2 ,content: '提交中'});
        $.ajax({
            url:'/index.php/mobile/user/add_comment/isajax/1/stoid/'+getstoid,
            type:'post',
            data:$("#add_comment").serialize(),
            success:function (data) {

                if(data.status==1){
                    for(var i=0;i<pdata.length;i++) {
                        postFile(pdata[i],data.data.comment_id);
                    }
                    var twork=setInterval(function () {
                        //console.log(upback.length+":"+pdata.length);
                        //alert(upback.length+":"+pdata.length);
                        if(upback.length==pdata.length) {
                            layer.closeAll();
                            var err = "";
                            for (var i = 0; i < upback.length; i++) {
                                if(upback[i]==-1){
                                    err+=pdata[i][0]+","
                                }
                            }
                            if(err!=""){
                                layer.close(t);
                                layer.open({content:err+"上传失败",time:2});
                            }else{
                                layer.close(t);
                                layer.open({content:"评论成功",time:2});
                            }
                            setTimeout(function () {
                                window.location.href='/index.php/Mobile/User/comment/status/1/stoid/'+getstoid;
                            },1000);
                            clearInterval(twork);
                        }
                    },1000);

                }else{
                    layer.close(t);
                    //console.log(data.mag);
                    layer.open({content:data.msg,time:2});
                    clearInterval(twork);
                }
            }
        });
    }

    //点击星级
    $(document).ready(function(){
        $(".jsstar li").mouseover(function(){
            $(this).parent().find("li").css({"background-position":"left top"});
            for(var i=0; i<$(this).attr("title"); i++){
                $(this).parent().find("li").eq(i).css({"background-position":"left bottom"});
            }
        });

        $(".jsstar li").mouseout(function(){
            $(this).parent().find("li").css({"background-position":"left top"});
            for(var i=0; i<$(this).parent().find("input").val(); i++){
                $(this).parent().find("li").eq(i).css({"background-position":"left bottom"});
            }
        });

        $(".jsstar li").click(function(){
            $(this).parent().find("input").val($(this).attr("title"));
            $(this).parent().find("span").html($(this).attr("title")+"星");
        });
    });
    //买家印象
    $(document).ready(function() {
        $('.tag-define').click(function(){
            var goods_id = $(this).attr('data_id').substr(4);
            $(this).find('.define-label').hide();
            $(this).find('.define-input').show().focus();
            $(this).find('.define-input').blur(function(){
                var ce = $(this).val();
                $(this).parent('.tag-define').siblings('.tag-item').each(function(){
                    var a_text = $(this).text();
                    if(ce == a_text){
                        alert('已有该标签');
                        ce = '';
                        $('.define-input').val('');
                    }
                });
                if(ce == ''){
                    $(this).prev('.define-label').show();
                    $(this).hide();
                }else{
                    //remark[{$goods_list.goods_id}][rank]
                    $(this).parent('.tag-define').prev('.tag-item').after('<input type="hidden" name="remark['+goods_id+'][tag][]" value="'+ce+'"/><a href="javascript:void(0)" class="tag-item">'+ ce +'<i class="t-check"></i></a>');
                    $(this).prev('.define-label').show();
                    $(this).hide();
                    $(this).val('');
                }
            })
        });

    });
    var img_val=0;
    /*--上传图片预览--*/
    window.URL = window.URL || window.webkitURL;
    function handleFiles(obj) {


        var rq = document.getElementById("showimg");
        var htm = "";
        var files = obj.files;
       /* if (files.length + pdata.length > 3) {*/
        if (img_val> 3) {
            layer.open({content: '最多上传3张图片', time: 2});
            $("#inputfile").val("");
            return;
        }
        var istrue=0;
        for (var n = 0; n < files.length; n++) {
            if(files[n].size>6*1024*1024){
                layer.open({content: '你上传的图片超过6M：'+files[n].name,time:2});
                return;
            }
        }

        if (pdata.length > 0) {
            for (var m = 0; m < pdata.length; m++) {
                for (var n = 0; n < files.length; n++) {
                    console.log(pdata[m][1].name,"是什么",files[n].name);
                    if (pdata[m][1].name == files[n].name) {
                        layer.open({content: '你已经上传过该图片：'+files[n].name,time:2});
                        $("#inputfile").val("");
                        istrue = 1;
                        return;
                    }
                }
            }
        }
        if (istrue == 1) {
            layer.open({content: '你已经上传重复图片', time: 2});
            $("#inputfile").val("");
            return;
        }
        if (window.URL) {
            for (var i = 0; i < files.length; i++) {
                var src = window.URL.createObjectURL(files[i]); //创建一个object URL，并不是你的本地路径
                var img = document.createElement("img");
                img.setAttribute("src", src);
                img.setAttribute("Id", files[i].name);
                img.width = wid;
                img.height = wid;
                rq.appendChild(img);
                var ary = [files[i].name, files[i]];
                pdata.push(ary);
                //删除的图片
                var srcs="__WEBPUBLIC__/miniapp/images/cancel.png";
                var imgs = document.createElement("img");
                imgs.setAttribute("src", srcs);
                imgs.setAttribute("Id",files[i].name+"_0");
                imgs.setAttribute("onclick","delete_up_img(this)");
                imgs.setAttribute("class","delete");
                imgs.width = 15;
                img_val=img_val+1;

                rq.appendChild(imgs);

            }
        }else if (window.FileReader) {
            //opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
            for (var i = 0; i < files.length; i++) {
                var reader = new FileReader();
                reader.readAsDataURL(files[i]);
                reader.onload = function (e) {
                    var src = this.result; //创建一个object URL，并不是你的本地路径
                    var img = document.createElement("img");
                    img.setAttribute("src", src);
                    img.setAttribute("Id", files[i].name);
                    img.width = wid;
                    img.height = wid;
                    rq.appendChild(img);
                    var ary = [files[i].name, files[i]];
                    pdata.push(ary);
                    //删除的图片
                    var srcs="__WEBPUBLIC__/miniapp/images/cancel.png";
                    var imgs = document.createElement("img");
                    imgs.setAttribute("src", srcs);
                    imgs.setAttribute("Id",files[i].name+"_0");
                    imgs.setAttribute("onclick","delete_up_img(this)");
                    imgs.setAttribute("class","delete");
                    imgs.width = 15;
                    img_val=img_val+1;
                    rq.appendChild(imgs);

                }
            }
        }
        uploadnum();
        //console.log(pdata);

        //统计选择图片数量
       /* function uploadnum() {

            var imglist = $("#showimg img");//获取ID为div里面的所有img
            $("#picture_val").text(imglist.length);
        }*/
        /*--点击删除图片--*/
     /*  许程
      $("#showimg").find("img").click(function () {
            var obj = $(this);
            var i = layer.open({
                content: '确定要删除图片吗',
                btn: ['删除', '取消'],
                yes: function () {
                    var id = obj.attr('id');
                    for (var j = 0; j < pdata.length; j++) {
                        if (pdata[j][0] == id) {
                            pdata.splice(j, 1);//删除元素
                            obj.remove();
                        }
                    }
                    layer.close(i);
                }, no: function () {
                    layer.close(i);
                }
            });
            uploadnum();
        });*/

        $("#inputfile").val("");
    }

    function postFile(data,id) {
        //1.创建异步对象（小浏览器）
        var req;
        if(window.XMLHttpRequest){
            req=new XMLHttpRequest()
            if(req.overrideMimeType){
                req.overrideMimeType("text/xml");
            }
        }
        else if(window.ActiveXObject){
            var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
            for(var i=0;i<activeName.length;i++){
                try{
                    req=new ActiveXObject(activeName[i]);
                    break;
                }catch(e){

                }
            }
        }
        if(req==null || req==undefined){
            upback.push(-1);
        }

        //2.设置参数
        req.open("post", "/index.php/mobile/user/comment_up_load/id/"+id+'/stoid/'+getstoid, true);
        //3.设置 请求 报文体 的 编码格式（设置为 表单默认编码格式）
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // req.setRequestHeader("")
        //4.发送异步请求
        req.send(data[1]);//post传参在此处
        //4.设置回调函数
        req.onreadystatechange = function () {
            //请求状态readyState=4准备就绪,服务器返回的状态码status=200接收成功
            if (req.readyState == 4 && req.status == 200) {
                if (req.responseText== "0") {
                    upback.push(1);
                }else{
                    upback.push(-1);
                }
            }
            if (req.status==400) {
                upback.push(-1);
            }
        };
    }
    //统计选择图片数量
     function uploadnum() {
         $("#picture_val").text(img_val);
         /*许程
         var imglist = $("#showimg img");//获取ID为div里面的所有img
         $("#picture_val").text(imglist.length);*/
     }
    function delete_up_img(ob) {
        var id_name=$(ob).prev();
          var img_name=$(id_name).attr("id");
        for (var j = 0; j < pdata.length; j++) {

            if (pdata[j][0] == img_name) {

                pdata.splice(j, 1);//删除元素


            }
        }
        $(ob).prev().remove();
        $(ob).remove();
        img_val=img_val-1;
        uploadnum();

    }
   /* 匿名评价*/
    function anonymous_test() {
        var is_anonymous=$(".imgs").hasClass("sn");
        if(is_anonymous){
            $(".imgs").removeClass("sn");
        }else{
            $(".imgs").addClass("sn");
        }
    }
</script>
</html>