master

分支 (1)

管理

管理

master

wxPhone
/
me-shop-ordercomment.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>评价</title>
    <link rel="stylesheet" href="./css/same-css.css">
    <link rel="stylesheet" href="./css/me-shop-ordercomment-css.css">
    <script src="./js/jquery-3.1.0.min.js"></script>
    <script src="./js/lrz.all.bundle.js"></script>
</head>
<body>

<div class="text">
    <textarea rows="4" cols="50" placeholder="亲，猛戳这里！！！您的评价对我们不断完善服务十分宝贵"></textarea>
</div>

<div class="upload">
    <div class="upload-main">
        <input type="file" id="uploadphoto1" name="uploadfile" value="请点击上传图片" style="display:none;"/>
        <div class="img-list"></div>
        <a href="javascript:void(0);" onclick="uploadphoto1.click()" class="uploadbtn"></a>
    </div>

    <div class="upload-main">
        <input type="file" id="uploadphoto2" name="uploadfile" value="请点击上传图片" style="display:none;"/>
        <div class="img-list"></div>
        <a href="javascript:void(0);" onclick="uploadphoto2.click()" class="uploadbtn"></a>
    </div>

    <div class="upload-main">
        <input type="file" id="uploadphoto3" name="uploadfile" value="请点击上传图片" style="display:none;"/>
        <div class="img-list"></div>
        <a href="javascript:void(0);" onclick="uploadphoto3.click()" class="uploadbtn"></a>
    </div>
</div>

<div class="star">
    <div class="describe">
        <div>描述相符</div>
        <ul>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
        </ul>
    </div>
    <div class="service">
        <div>服务态度</div>
        <ul>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
        </ul>
    </div>
    <div class="speed">
        <div>物流速度</div>
        <ul>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
            <li><img src="./images/star-0.png" alt=""></li>
        </ul>
    </div>
</div>

<button>发表评价</button>
<script>

    $(document).ready(function () {
        var star0, star1, star2;
        $('.describe ul li').click(function () {

            var $this = $(this);
            var liList = $('.describe ul li');
            for(var i = 0; i < liList.length; i++){
                if(i <= $(this).index()){
                    $(liList[i]).children().attr('src','./images/star-1.png');
                }else{
                    $(liList[i]).children().attr('src','./images/star-0.png');
                }
            }
            star0 = $(this).index();
            addClass();
        });

        $('.service ul li').click(function () {
            var $this = $(this);
            var liList = $('.service ul li');
            for(var i = 0; i < liList.length; i++){
                if(i <= $(this).index()){
                    $(liList[i]).children().attr('src','./images/star-1.png');
                }else{
                    $(liList[i]).children().attr('src','./images/star-0.png');
                }
            }
            star1 = $(this).index();
            addClass();
        });

        $('.speed ul li').click(function () {
            var $this = $(this);
            var liList = $('.speed ul li');
            for(var i = 0; i < liList.length; i++){
                if(i <= $(this).index()){
                    $(liList[i]).children().attr('src','./images/star-1.png');
                }else{
                    $(liList[i]).children().attr('src','./images/star-0.png');
                }
            }
            star2 = $(this).index();
            addClass();
        });

        $('button').click(function(){
            console.log(star0,star1,star2)
        });


        $('input[name=uploadfile]').on('change', function () {
            var $this = $(this);
            lrz(this.files[0], {width: 220}).then(function (rst) {
                console.log(rst);
                var attrSrc = '<img src="' + rst.base64 + '" alt="" />';
                $this.parent().find('.img-list').append(attrSrc);
                //DONE 比较图片宽高。高度大于宽度，就以宽度为100%，高度自适应；宽度大于高度，就以高度为100%，宽度自适应
                $this.parent().find('.img-list img').on('load', function () {
                    var picWidth =  $this.parent().find('.img-list img').width();
                    var picHeight = $this.parent().find('.img-list img').height();
//                    console.log('高：'+ picHeight + ';' + '宽：' + picWidth );
                    if(picWidth >= picHeight){
                        $this.parent().find('.img-list img').css('height','100%');
                    } else if(picHeight > picWidth){
                        $this.parent().find('.img-list img').css('width','100%');
                    }
                });
                $this.parent().find('.img-list').show();
                $this.parent().find('a').hide();
                /*$.ajax({
                 url: '',
                 type: 'post',
                 data: {img: rst.base64},
                 dataType: 'json',
                 timeout: 200000,
                 success: function (response) {
                 if (response.ecd == '0') {
                 alert('成功');
                 return true;
                 } else {
                 return alert(response.msg);
                 }
                 },
                 error: function (jqXHR, textStatus, errorThrown) {

                 if (textStatus == 'timeout') {
                 alert('请求超时');
                 return false;
                 }
                 alert(jqXHR.responseText);
                 }
                 });*/
            }).catch(function (err) {

            }).always(function () {

            });
        });


        function addClass(){
            if(!isNaN(star0) === true){
                if(!isNaN(star1) === true){
                    if(!isNaN(star2) === true){
                        $('button').addClass('btn');
                    }
                }
            }
        }
    });

</script>
</body>
</html>