dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html>
<html class="remModel">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>感谢您的使用</title>
    <link rel="stylesheet" href="/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="/components/custom/css/common.css"/>
    <link rel="stylesheet" href="/pages/css/user-common.css">
    <style>
        HTML, .main {
            background: #fff;
        }

        .mark-list .mark-item {
            border: 1px solid #666;
            color: #666;
            border-radius: 3px;
            padding: 6px 15px;
            display: inline-block;
            font-size: 14px;
            margin: 6px 8px 6px 0;
        }

        .mark-list .mark-item:active {
            border: 1px solid #F08519;
            color: #F08519;
        }

        textarea::-webkit-input-placeholder {
            color: #ccc;
        }

        /*评分样式*/
        .score-point {
            line-height: 40px;
        }

        .score-point > * {
            vertical-align: middle;
        }

        .score-point-star {
            display: inline-block;
        }

        .star-light {
            color: #F08519 !important;
        }

        .comment-str textarea {
            border: none;
            padding: 0;
            overflow-x: visible;
            overflow-y: visible;
        }

        .submit-btn {
            margin-top: 100px;
            position: relative;
            bottom: 20px;
            width: 90%;
            left: 5%;
            border-radius: 20px;
            line-height: 40px;
            height: 40px;
            color: #fff;
            text-align: center;
            background: #F08519;
        }

        .mui-table-view:after {
            display: none;
        }

    </style>
</head>
<body class="">

<div class="main">

    <div class="mui-table-view">
        <div class="mui-table-view-cell mui-disabled">
            <div class="l-h-32">
                <i class="iconfont icon-shop font-b-4 font-18 v-middle"></i> <span class="font-14 v-middle">使用评分</span>
            </div>
            <div class="">
                <div class="commentStar">
                </div>
            </div>
        </div>

        <div class="mui-table-view-cell mui-disabled">
            <div class="mark-list">
                <a href="javascript:void(0)" class="mark-item">休闲放松</a>
                <a href="javascript:void(0)" class="mark-item">操作简单</a>
                <a href="javascript:void(0)" class="mark-item">整洁卫生</a>
                <a href="javascript:void(0)" class="mark-item">体验舒适</a>
                <a href="javascript:void(0)" class="mark-item">经济实惠</a>
                <a href="javascript:void(0)" class="mark-item">解乏神器</a>
            </div>
        </div>

        <div class="mui-table-view-cell mui-disabled">
            <div class="comment-str">
                <textarea id="description" class="font-14" rows="4" maxlength="140"
                          placeholder="满足你的期待吗？说说它的优点和美中不足的地方吧，期待您的五星好评哟！"></textarea>
            </div>
        </div>
    </div>

    <div class="submit-btn" onclick="window.submit&&submit()">提交</div>
</div>

<script src="/components/lib/jquery.min.js"></script>
<script src="/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/pages/js/user-common.js"></script>
<script>
    var logicalCode = localStorage.getItem("logicalCode");//获取logicalCode

    if (!logicalCode) {
        mui.toast("请您使用设备后评价");
        setTimeout(function () {
            history.back();
        }, 2000);
    }

    function StarScore(opt) {
        var el = $(opt.el);
        var list = opt.point;
        var panel = $("<div class='star-score'></div>");
        el.append(panel);

        for (var index in list) {
            var item = list[index];
            var title = item.title;
            var score = item.score || 0;
            var itemDom = $("<div class='score-point'><span class='font-14'></span><div class='score-point-star padding-l-r-10'><i></i><i></i><i></i><i></i><i></i></div><em class='font-14 font-b-4'></em></div>");
            itemDom.find("span").text(title);
            itemDom.find("em").text(getStarLevel(score));
            itemDom.find(".score-point-star i").addClass("iconfont icon-star font-b-4 font-22 padding-l-r-5");

            if (score > 0) {
                itemDom.find(".score-point-star i:nth-child(-n " + item.score + ")").removeClass("icon-star").addClass("icon-star-dark star-light");
            }
            // 事件绑定
            bindEvent(itemDom, item);

            panel.append(itemDom);
        }

        // 获取分数对应的评价
        function getStarLevel(score) {
            var map = {
                1: "非常差", 2: "差", 3: "一般", 4: "好", 5: "非常好",
            };
            return map[score];
        }

        // 绑定事件
        function bindEvent(dom, pointItem) {
            dom.find("i").on("tap", function () {
                var score = $(this).index() + 1;
                pointItem.score = score;
                $(this).siblings().removeClass("icon-star-dark star-light").addClass("icon-star");

                dom.find("em").text(getStarLevel(score));
                dom.find("i:nth-child(-n " + score + ")").removeClass("icon-star").addClass("icon-star-dark star-light");
            });
        }

        return {
            getScore: function () {
                return opt.point;
            }
        }
    }

    // 初始化评分
    var comment = StarScore({
        el: ".commentStar",
        point: [
            {title: "按摩力度", score: 0},
            {title: "舒适程度", score: 0},
            {title: "环境卫生", score: 0},
        ]
    });

    $(".mark-list a").on("tap", function () {
        var text = $(this).text();
        var v = $(".comment-str textarea").val();

        if (v.indexOf(text) == -1) {
            $(".comment-str textarea").val(v + " " + text);
        }

    });


    //提交反馈
    function submit() {
        var pointScore = comment.getScore();
        for (var index in pointScore) {
            var item = pointScore[index];
            if (item.score == 0) {
                mui.toast("请您评分");
                return;
            }
        }

        var description = $("#description").val();

        var data = {
            rating: pointScore,
            logicalCode: logicalCode,
            description: description
        };

        data = JSON.stringify(data);

        sendRequest({
            url: "/user/submitComment",
            type: "POST",
            contentType: "application/json",
            data: data,
            success: function (res) {
                if (res.result == 1) {
                    mui.toast("提交成功！");
                    setTimeout(function () {
                        replacePage("thanks.html");
                    }, 1000);
                } else {
                    mui.toast(res.description);
                }
            }
        });
    }
</script>
</body>
</html>