evaluate.html 10.5 KB

原文件审查历史永久链接


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_834805_0ml90wdq5hzm.css">
    <link rel="stylesheet" href="__INDEX__/css/base.css">
    <link rel="stylesheet" href="__INDEX__/css/swiper.min.css">
    <script type="text/javascript" src="__INDEX__/js/base.js"></script>
    <title>写评价</title>
    <style>
        body,html{
            width:100%;
            height:100%;
            background: #fff;
        }
        .evalute_rank{

            height:1.6rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.38rem 1.63rem;
        }
        .rank_type_img{
            font-size: 0;
            width:0.6rem;
            height:0.72rem;
        }
        .rank_type_img img{
            width:100%;
        }
        .evalute_text{
            width:0.6rem;
            text-align: center;
            font-size: 0.24rem;
            color:#CCCCCC;
        }
        .active{
            width:0.6rem;
            text-align: center;
            font-size: 0.24rem;
            color:#FE0A01;
        }
        .writevalute{
            width:6.86rem;
            height:3.6rem;
            background:#EBEBEB;
            border-radius: 0.1rem;
            margin: 0 auto;
            padding: 0.31rem 0.3rem;
        }
        #write_evalute{
            width:6.25rem;
            height:3rem;
            border:none;
            outline:none;
            background: #EBEBEB;
            color:#999999;
            font-size: 0.28rem;
        }
        .photo{
            display:flex;
            padding: 0.24rem 0.32rem;
        }
        .enter_photo{
            width:1.8rem;
            height:1.8rem;
            margin: 0 0.8rem 0 0;

        }
        .addphoto{
            width:1.8rem;
            height:1.8rem;
            margin-top:0.1rem;
        }
        #preview{
            width:1.6rem;
            height:1.6rem;
        }
        #preview img{
            width:100%;
            height:100%;
        }
        .pushimg{
            position:relative;
        }
        .cancel{
            width:0.32rem;
            height:0.32rem;
            font-size: 0;
            position: absolute;
            left:1.4rem;
            top:0.1rem;

        }
        .cancel img{
            width:100%;
            height:100%;
        }
        .enter_photo img,.addphoto img{
            width:100%;
        }
        .publish{
            width:6.86rem;
            height:0.88rem;
            text-align: center;
            line-height: 0.88rem;
            background:#FE0A01;
            color:#fff;
            font-size:0.32rem;
            position:fixed;
            bottom:0.55rem;
            left:0;
            right:0;
            margin:0 auto;
            box-shadow:0px 15px 30px 0px rgba(254,10,1,0.24);
            border-radius: 0.44rem;
        }
    </style>

</head>
<body>
<div class="container">
    <div class="evalute_rank">
        <div class="rank_type">
            <p class="rank_type_img">
                <img src="__INDEX__/img/rank1red.png" alt="" id="one">
            </p>
            <p class="evalute_text active" data-rank="3">好评</p>
        </div>
        <div class="rank_type">
            <p class="rank_type_img">
                <img src="__INDEX__/img/rank2gray.png" alt="" id="two">
            </p>
            <p class="evalute_text" data-rank="2">中评</p>
        </div>
        <div class="rank_type">
            <p class="rank_type_img">
                <img src="__INDEX__/img/rank3gray.png" alt="" id="three">
            </p>
            <p class="evalute_text" data-rank="1">差评</p>
        </div>
    </div>
    <div class="writevalute">
        <textarea name="" id="write_evalute" cols="30" rows="10" placeholder="请写下您的评价"></textarea>
    </div>

    <div class="photo">
        <div class="addimg" style="display:flex">

        </div>
        <div class="addphoto">
            <div id="preview">
                <img id="imghead" border="0" src="__INDEX__/img/tianjia@2x.png" style="width:100%;height:100%" onclick="$('#previewImg').click();">
            </div>
            <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
        </div>
    </div>
    <div class="publish">
        发表
    </div>
</div>
</body>
<script src="__INDEX__/js/jquery.min.js"></script>
<script>
    //好评，中评，差评
    $(".rank_type").click(function(){
        $(this).children(".evalute_text").addClass("active");
        $(this).siblings(".rank_type").children(".evalute_text").removeClass("active");
        if($(this).children(".evalute_text").html()=='好评'){
            $(this).children(".rank_type_img").children("img").attr("src","/static/index/img/rank1red.png");
            $("#two").attr("src", "/static/index/img/rank2gray.png")
            $("#three").attr("src", "/static/index/img/rank3gray.png")
        }else if($(this).children(".evalute_text").html()=='中评'){
            $(this).children(".rank_type_img").children("img").attr("src","/static/index/img/rank2red.png");
            $("#one").attr("src", "/static/index/img/rank1gray.png")
            $("#three").attr("src", "/static/index/img/rank3gray.png")
        }else if($(this).children(".evalute_text").html()=='差评'){
            $(this).children(".rank_type_img").children("img").attr("src","/static/index/img/rank3red.png");
            $("#one").attr("src", "/static/index/img/rank1gray.png")
            $("#two").attr("src", "/static/index/img/rank2gray.png")
        }
    })

    var src="";
    var more='';
    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {
            top: 0,
            left: 0,
            width: width,
            height: height
        };
        if(width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if(rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }

    function previewImage(file) {
        var MAXWIDTH = 60;
        var MAXHEIGHT = 77;
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
            var img = document.getElementById('imghead');
            img.onload = function () {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                //                 img.style.marginLeft = rect.left+'px';
                //img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                src = evt.target.result;
                //console.log(src);
                var text = '';
                text += ' <div class="pushimg">' +
                    '<p class="enter_photo">' +
                    '<img src="' + src + '" alt="">' +
                    '</p>' +
                    '<p class="cancel">' +
                    '<img src="__INDEX__/img/cancel.png" alt="">' +
                    '</p>' +
                    '</div>'

                $(".addimg").append(text);


                img.src = '__INDEX__/img/tianjia@2x.png';
            }
            reader.readAsDataURL(file.files[0]);
        } else //兼容IE
        {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }

        $(this).attr("src", "__INDEX__/img/tianjia@2x.png");
        var len = $(".enter_photo");
        //console.log(len.length)
        if (len == 3) {
            $("#preview").css("display", "none")
        }

        //删除图片
        //console.log($(".addimg"))
        $(".addimg").on("click", ".cancel", function () {
            $(this).parent(".pushimg").remove()
        })

        var formData = new FormData();
        var fileM = document.querySelector("#previewImg");
        //console.log(fileM)
        var fileObj = fileM.files[0];
        //console.log(fileObj);
        formData.append("files", fileObj);
        $.ajax({
            url: "{:url('user/Center/upload2')}",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                more=more+data.data+';';
            }
        });
    }

    //ajax如何传数组对象？
    $(".publish").click(function () {
        var content = $("#write_evalute").val();
        content = $.trim(content);
        if(content == '') {
            alert('评价内容不能为空')
            return false;
        }else {
            var data = {
                oid: '{$oid}',
                content: $("#write_evalute").val(),
                more: more,
                rank: $(".active").attr('data-rank')
            }
            $.ajax({
                url: "",
                data: data,
                type: "POST",
                dataType: "JSON",

                success: function (data) {
                    if (data.data === true) {
                        alert(data.msg);
                        window.location.href = data.url;
                    } else {
                        alert(data.msg);
                    }
                }
            })
        }
    })
</script>
</html>