<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>意见反馈</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/mshop/js/common/zepto.min.js?<?php echo shop_version(); ?>"></script>

    <style type="text/css">
        html,
        body,
        form,
        p,
        textarea,
        input{
            padding: 0;
            margin: 0;
            font-size: 14px;
        }
        html {
            width: 100%;
            height: 100%;
            position: relative;
            background: #f6f6f6;
        }
        input,textarea {
            border: none;
            background: #fff;
            -webkit-appearance: none;
            outline:none;
            color:#454545;
        }
        textarea{resize:none}
        .text {
            width: 90%;
            height: 160px;
            margin:10px auto;
            margin-top: 20px;
            border: none;
            border-radius: 5px;
        }
        .text textarea {
            width: 92%;
            height: 84%;
            padding: 4%;
        }
        .input_msg {
            background: #fff;
            margin: 0 auto;
            margin-bottom: 10px;
            width: 86%;
            padding-left: 4%;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
        }
        input {
            width: 80%;
        }
        span {
            color: #858585;
        }
        .prompt {
            width: 88%;
            margin: 0 auto;
            color: #858585;
        }
        .prompt p {
            font-size: 12px;
        }
        input.submit {
            width: 90%;
            height: 40px;
            background: #ff4e4e;
            display: block;
            margin: 15px auto;
            border-radius: 5px;
            color: #fff;
        }
        .layer_box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            display: none;
        }
        .layer {
            text-align: center;
            width: 80%;
            height: 193px;
            border-radius: 5px;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 25%;
            margin-left: -40%;
        }
        .layer .title {

            font-size: 20px;
            height: 48px;
        }
        .title p {
            font-size: 19px;
            line-height: 49px;
            color: #454545;
        }
        .close {
            border-top: 1px solid #f6f6f6;
            height: 50px;
            line-height: 50px;
        }
        .close button{
            width: 100%;
            color: #ff4e4e;
            font-size: 18px;
            outline:none;
            border:0;
            background: #fff;
            -webkit-appearance: none;
        }
        .return_msg {
            margin: 10px 0;
            line-height: 20px;
        }
        .return_msg p{
            color: #959595;
            padding-bottom: 10px;
            height: 12px;
        }
        .img img {
            width: 50px;
            height: 50px;
        }
        input::-webkit-input-placeholder  {
            color: #858585 !important;
        }
        textarea::-webkit-input-placeholder  {
            color: #858585 !important;
        }
    </style>
</head>

<body>
<div class="maincontent">
    <form>
        <div class="text">
            <textarea placeholder="请输入150字" name="message" id="msg"></textarea>
        </div>
        <div class="input_msg">
            <label><span>电话：</span><input type="tel" placeholder="请输入您的电话号码" name="tel" id="tel"/></label>
        </div>
        <div class="prompt">
            <p>您可以留下联系方式方便我们及时反馈您的问题</p>
        </div>
        <div>
            <input type="button" value="提交" class="submit" id="submit" />
        </div>
    </form>

</div>
<div class="layer_box">
    <div class="layer">
        <div class="title">
            <p>反馈成功</p>
        </div>
        <div class="img">
            <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/mshop/images/right.png"/>
        </div>
        <div class="return_msg">
            <p>感谢你的反馈，我们会做的更好!</p>
        </div>
        <div class="close">
            <button>确定</button>
        </div>
    </div>
</div>

<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/bridge.js?<?php echo bonus_version(); ?>"></script>
<script>
    $(function()
    {
        $('#submit').on('touchstart',function(e){
            var msg=$('#msg').val(),
                msgLength=msg.length,
                tel=$('#tel').val();
            if(msgLength>150){
                alert("亲!最多可填150个字哦！");
                return;
            }
            if(msgLength==''){
                alert("亲！你的意见对我们很重要哦！");
                return;
            }

            var url_host=window.location.hostname;
            $('input').blur();
            $.ajax({
                type:'GET',
                dataType:'jsonp',
                jsonp:'callback',
                url:"http://" + url_host + '/mobile/index.php?act=member_feedback&op=add&client_type=ajax',
                data:{
                    feedback:msg,
                    mobile:tel
                },
                success:function(data) {
                    if(data.code=="200"){
                        $('.layer_box').css('display','block');
                    }
                    else {
                        return false;
                    }
                }
            })
        });

        $('.close').on('touchend',function(){
            event.preventDefault();
            $('.layer_box').css('display','none');
            call_native_handler('on_native_click','{"action":"back","params":null}');
        });

        if(isMobile.iOS()) {
            init_ios_bridge(function(bridge) { });
        } else if (isMobile.Android) {
            init_android_bridge();
        } else {
        }
    })
</script>

</body>
</html>

