comment.html 17.3 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>订单评价</title>
    {include file="public/head"}
    <!--提示层插件引入-->
    <link rel="stylesheet" href="__CDN__/assets/store/css/message.css">
    <script type="text/javascript" src="__CDN__/assets/store/js/message.js"></script>
    <style>
        li{
            list-style-type: none;
        }
        ul{
            margin: 0;
        }
        .clear{
            clear: both;
        }
        /*菜单样式*/
        .content{
            width: 100%;
            font-size: 0;
            background:rgba(249,249,249,1);
        }
        .content .navBarBox{
            width: 100%;
            height: 50px;
            background: rgba(0,159,142,1);
        }
        .content .navBarBox ul{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            padding: 0;
            font-size: 16px;
            font-family: PingFangSC-Semibold;
            color:rgba(255,255,255,1);
        }
        .content .navBarBox ul li{
            width: 144px;
            height: 100%;
            line-height: 50px;
            list-style-type: none;
            float: left;
        }
        .content .navBarBox ul li a{
            color: rgba(255,255,255,1);
        }
        .content .titleImgContent{
            width: 100%;
            height: 146px;
        }
        .content .titleImgContent img{
            width: 100%;
            height: 100%;
        }
        /*主要内容*/
        .contentBox{
            width: 100%;
            background-color: #FFFFFF;
            margin-top: 12px;
        }
        .contentMain{
            margin: auto;
            width: 1200px;
        }
        .contentTop{
            height: 60px;
            line-height: 60px;
        }
        .titleText{
            padding-left: 17px;
            height:22px;
            line-height:22px;
            font-size:16px;
            font-family:PingFang SC;
            font-weight:800;
            color:rgba(0,159,142,1);
            vertical-align: middle;
        }
        .titleLine{
            line-height: 20px;
            display: inline-block;
            width: 6px;
            height:20px;
            background:rgba(0,159,142,1);
            opacity:1;
            border-radius:2px;
            vertical-align: middle;
        }
        .contentList{
            background:rgba(249,249,249,1);
            border-radius:8px;
            /*margin-bottom: 20px;*/
        }
        /*店铺信息*/
        .orderDesc{
            padding: 12px 25px;
            width: 100%;
            height:75px;
            background:rgba(244,244,244,0.8);
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(6,18,30,1);
        }
        .orderDesc span{
            display: block;
            margin-bottom: 12px;
        }
        /*商品信息*/
        .goodsDescList{
            background-color: #FFFFFF;
            padding: 30px 25px 20px;
        }
        .goodsDesc{
            border-bottom: 1px solid rgba(238,238,238,1);
        }
        /*.goodsDescList:last-child .goodsDesc:last-child{*/
        /*    border: 0;*/
        /*}*/
        .goodsDesc .storeName{
            font-size:16px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(61,68,77,1);
        }
        .goodsPicText{
            margin-top: 16px;
        }
        .goodsPicText img{
            width: 72px;
            height: 72px;
        }
        .goodsPicText .goodsNameNum{
            margin-left: 13px;
            display: inline-block;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(61,68,77,1);
            vertical-align: middle;
        }
        .goodsPicText .goodsNameNum span{
            display: block;
        }
        .goodsPicText .goodsNameNum span:first-child{
            margin-bottom: 15px;
        }
        /*商品评分*/
        .goodsScore{
            margin: 10px 0;
        }
        .goodsScoreLabel{
            margin-bottom: 0;
            vertical-align: middle;
            display: inline-block;
            padding: 0 10px 0 5px;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(61,68,77,1);
        }
        .goodsScoreTextarea{
            resize: none;
            background:rgba(249,249,249,1)!important;
            padding: 20px;
            border: 0!important;
            box-shadow: none!important;
        }
        /*输入框中placeholer文字颜色*/
        .goodsScoreTextarea::-webkit-input-placeholder { /* WebKit browsers */
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(140,145,152,1)
        }
        .goodsScoreTextarea:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(140,145,152,1);
        }
        .goodsScoreTextarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(140,145,152,1)
        }
        .goodsScoreTextarea:-ms-input-placeholder { /* Internet Explorer 10+ */
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(140,145,152,1)
        }
        /*上传图片*/
        .uploadPic{
            margin-bottom: 50px;
        }
        .uploadPic label{
            display: inline-block;
            margin: 20px 0;
            font-size:14px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(61,68,77,1);
        }
        /*按钮样式*/
        .refundBtn{
            margin: 30px 25px 155px;
            background-color:rgba(0,159,142,1);
            color: #fff;
            width: 170px;
            height: 52px;
            font-size:16px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(255,255,255,1);
            border: 0;
        }
        .refundBtn:hover,.refundBtn:visited,.refundBtn:focus{
            color: #fff;
            color:rgba(255,255,255,1);
            border: 0;
        }
        /*上传图片*/
        .imgFileUploade{
            padding: 0;
        }
    </style>
    <style>
        .star_level span.star i{
            display:inline-block;background:url(/assets/store/images/no_star.png) no-repeat center center; background-size:20px 20px; width:30px; height:20px; padding:0; margin:0;
        }
        .star_level span.star.sel i{
            display:inline-block;background:url(/assets/store/images/star.png) no-repeat center center; background-size:20px 20px; width:30px; height:20px; padding:0; margin:0;
        }
        .box {
            display: flex;
        }
        .imgClick {
            width: 150px!important;
            height: 96px!important;
            font-size: 0;
            position: relative;
            background: url(/assets/store/images/idCardBoxFileupload.png) no-repeat;
        }
        .imgClick input {
            width: 150px;
            height: 96px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .images{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-left:0!important;
            padding-right: 0!important;
        }
        .imagesItem{
            width:150px!important;
            height:96px!important;
            font-size: 0;
            display:flex;
            align-items: center;
            position: relative;
            padding: 0 10px 0 0!important;
        }
        .imagesItem img{
            width:100%;
            height:100%;
        }
        .closeImage{
            position: absolute;
            top: -5px;
            right: 5px;
            width: 18px!important;
            height: 18px!important;
            background: rgba(197, 197, 197, 1);
            border-radius: 50%;
            padding: 0!important;
            font-size: 16px;
            text-align: center;
            line-height: 18px;
            color: #efefef;
            font-style: normal;
            cursor: pointer;
            z-index: 777;
        }
    </style>
</head>
<body>
{include file="public/header"}
<!--主要内容-->
<div class="content">
    {include file="public/nav"}
    <!--主要内容-->
    <div class="contentBox">
        <div class="contentMain">
            <div class="contentTop">
                <span class="titleLine"></span>
                <span class="titleText">
                   订单评价
                </span>
            </div>
            <div class="contentList">
                <!--店铺信息-->
                <div class="orderDesc">
                     <span>
                         订单号：{$order.num}
                     </span>
                    <span>
                         时间：{$order.createtime}
                     </span>
                </div>
                <!--商品信息-->
                {volist name="order.goods" id="vo"}
                <div class="goodsDescList" data-goods_id="{$vo.goods_id}" data-order_info_id="{$vo.id}">
                    <div class="goodsDesc">
                        <span class="storeName">{$order.store_name}</span>
                        <div class="goodsPicText">
                            <img src="{$vo.goods_image}" alt="">
                            <div class="goodsNameNum">
                                <span>{$vo.goodsname}</span>
                                <span>数量×{$vo.number}</span>
                            </div>
                            <div class="goodsScore" style="display: flex;align-items: center;">
                                <label class="goodsScoreLabel">商品评分</label>
                                <div class="score">
                                    <div class="photo star_level">
                                        <span class="star sel" title="1"><i></i></span>
                                        <span class="star sel" title="2"><i></i></span>
                                        <span class="star sel" title="3"><i></i></span>
                                        <span class="star sel" title="4"><i></i></span>
                                        <span class="star sel" title="5"><i></i></span>
                                        <input type="hidden" class="goodsScoreNum" name="score[]" value="5"/>
                                    </div>
                                    <div class="starNum">5分</div>
                                </div>
                            </div>
                        </div>
                        <textarea rows="7" class="form-control goodsScoreTextarea" name="content[]" placeholder="请输入您的商品评价"></textarea>
                        <div class="uploadPic">
                            <label>上传图片</label>
                            <div class="box uploadPicBox1">
                                <div class="images"></div>
                                <div class="imgClick">
                                    <input type="file" name="file[]" data-id="{$vo.id}" multiple id="refundBox"/>
                                    <input type="hidden" class="images_url" name="images[]" value=""/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
            <button type="button" class="btn refundBtn" onclick="submit()">提交评论</button>
        </div>
    </div>
</div>
{include file="public/footer"}
<!--begin:提示弹层-->
<div class="toast">提示框</div>
<div class="bg"></div>
<script>
    $(function () {
        //评分
        var starRating = 0;
        $('.photo span').on('click',function () {
            $(this).parent(".star_level").find("span.star").removeClass("sel");
            $(this).addClass("sel");
            $(this).prevAll().addClass("sel");
            var index = $(this).index()+1;
            console.log(index);
            $(this).prevAll().find('.high').css('z-index',1);
            $(this).find('.high').css('z-index',1);
            $(this).nextAll().find('.high').css('z-index',0);
            $('.starNum').html(parseFloat((index*1).toFixed(1))+'分');

            $(this).prevAll().find('.high').css('z-index',1);
            $(this).find('.high').css('z-index',1);
            starRating = index*1;
            $('.starNum').html(parseFloat(starRating.toFixed(1))+'分');
            $(this).parent().find('.goodsScoreNum').val(parseFloat(starRating.toFixed(1)));
        })
    });
    //上传手持身份证照片
    $('body').on('change', 'input[name="file[]"]', function () {
        var self = $(this);
        var filePath = self.val();
        var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        console.log(filePath);
        // 检查是否是图片
        if (filePath == '') {
            toast('未选择任何图片');
            return false;
        }
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            toast('上传错误,文件格式必须为：png/jpg/jpeg');
            return false;
        }
        var files = this.files;
        upload(files,self);
    });
    //上传图片
    function upload(files,self){
        $(files).each(function (key, file) {
            console.log(file);
            var formdata = new FormData();
            formdata.append("file", file);
            $.ajax({
                url: "{:url('api/common/upload')}",
                type: "POST",
                data: formdata,
                cache: false,
                processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
                contentType: false, // 不设置Content-type请求头
                success: function (res) {
                    console.log(res);
                    var img = self.parent().find('input[name="images[]"]').val();
                    if(img.length == 0) {
                        var img_arr = [];
                    } else {
                        var img_arr = img.split(',');
                    }
                    if (res.code == 1) {
                        var html = '<div class="imagesItem">\n' +
                            '                                    <img src="'+res.data.url+'" alt="">\n' +
                            '                                    <div class="closeImage">×</div>\n' +
                            '                                </div>';
                        img_arr.push(res.data.url);
                        img = img_arr.join(',');
                        self.parent().find('input[name="images[]"]').val(img);
                        self.parent().prev().append(html);
                        // idCardImgFileArr.push(res.data.url);
                    }
                },
                error: function(res){
                    toast('与服务器断开连接');
                }
            });
        });
    }
    //删除图片
    $('.uploadPicBox1').on('click', '.closeImage', function () {
        var src = $(this).prev().attr('src');
        var images = $(this).parents('.uploadPicBox1').find('.images_url').val();
        console.log(images);
        var img = images.split(',');
        var pos = $.inArray(src,img);
        img.splice(pos,1);
        img = img.join(',');
        $(this).parents('.uploadPicBox1').find('input[name="images[]"]').val(img);
        console.log(img);
        $(this).parent().remove();
    });

    //提交评论
    function submit() {
        var comment = [];
        for (var i=0; i<$('.goodsDescList').length; i++){
            var goods_id = $($('.goodsDescList')[i]).data('goods_id');
            var order_info_id = $($('.goodsDescList')[i]).data('order_info_id');
            var score = $($('.goodsScoreNum')[i]).val();
            var content = $($('.goodsScoreTextarea')[i]).val();
            var images = $($('.images_url')[i]).val();
            var obj = {
                order_info_id: order_info_id,
                goods_id: goods_id,
                score: score,
                content: content,
                images: images
            }
            comment.push(obj);
        }
        var data = {
            order_id: "{$order.id}",
            comment: comment
        };
        $.ajax({
            type: "post",
            url: "{:url('comment_submit')}",
            data: data,
            dataType: "json",
            success: function (e) {
                if(e.code == 1) {
                    toast(e.msg,1500,1);
                } else {
                    toast(e.msg);
                }
            },
            error: function (e) {
                console.log(e);
                toast('网络错误，请重试');
            }
        });
    }
    //提示弹层
    function toast(msg='玩命加载中~',time=2000, location = 0){
        $('.toast').text(msg);
        $('.toast').fadeToggle();
        // $('.bg').show();
        setTimeout(function(){
            $('.toast').fadeToggle();
            // $('.bg').hide();
            if(location) {
                history.back(-1);
            }
        },time);
    }
</script>
</body>
</html>