hust-epi/whepi-ui/templates/cust/market.ftl

<#assign title="推介客户"/>
<#include "/cust/frag.head.ftl" />

<header class="demos-header">
    <h1 class="demos-title">${title}</h1>
</header>

<div class="weui-cells__title">客户</div>
<div class="weui-cells weui-cells_form">
    <#if user?? && user.userId??>
    <input type="hidden" id="userId" value="${user.userId}">
    </#if>
    <#if openId?? >
    <input type="hidden" id="openId" value="${openId}">
    </#if>
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">客户姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="customerName" placeholder="客户姓名">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">客户手机</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="customerTel" type="tel" placeholder="客户手机">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">客户人数</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="customerNumber" type="number" placeholder="客户人数">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label for="orderCreateAt" class="weui-label">时间</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="orderCreateAt" type="datetime-local" value="${orderCreateAtValue}" onChange="setMinTime()"
                   min="2019-02-16T00:00:01">
        </div>
    </div>
</div>

<div class="weui-cells__title">场地</div>
<div class="weui-cells">
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">场地</label>
        </div>
        <div class="weui-cell__bd">
            <select id="roomPlace" class="weui-select" name="roomPlace">

            </select>
        </div>
    </div>
    <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
            <label for="" class="weui-label">包厢</label>
        </div>
        <div class="weui-cell__bd">
            <select id="roomName" class="weui-select" name="roomName">

            </select>
        </div>
    </div>
</div>

<label for="weuiAgree" class="weui-agree" style="display: none">
    <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
    <span class="weui-agree__text">
        阅读并同意<a href="javascript:void(0);">《相关条款》</a>
      </span>
</label>

<div class="weui-btn-area">

    <a id="btnOk" class="weui-btn weui-btn_primary" href="javascript:">
            <#if order??>修改<#else>预订</#if>
    </a>
    <a id="btnModifys" class="weui-btn weui-btn_default" href="javascript:">修改预订</a>
</div>

<#include "/cust/frag.foot.ftl" />
<script>

    <#--var userId = '${user.userId}';-->

    var room = ${room_json!'{}'};
    var order = ${order!'null'};
    var userId = '${userId!'null'}';

    var lastDateTime = '${orderCreateAtValue}';
    function setMinTime() {
        var date = new Date();
        var maxT = date.getTime() + 10 * 3600 * 1000; //两小时范围  东八时区
        var time = (new Date($('#orderCreateAt').val())).getTime();
        if (time>maxT || time < maxT-2 * 3600 * 1000) {
            $.alert('请选择两小时以内的时间' + time + '--' + maxT);
            $('#orderCreateAt').val(lastDateTime);
        } else {
            lastDateTime = $('#orderCreateAt').val();
        }

    }

    (function ($) {

        // Date.prototype.Format = function (fmt) {
        //     var o = {
        //         "M+": this.getMonth() + 1, //月份
        //         "d+": this.getDate(), //日
        //         "H+": this.getHours(), //小时
        //         "m+": this.getMinutes(), //分
        //         "s+": this.getSeconds(), //秒
        //         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        //         "S": this.getMilliseconds() //毫秒
        //     };
        //     if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        //     for (var k in o)
        //         if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        //     return fmt;
        // };

        $('#roomPlace').empty();
        $('#roomPlace').append($('<option value="">请选择</option>'));
        for (var key in room) {
            if (!room.hasOwnProperty(key)) continue;
            $('#roomPlace').append($('<option value="' + key + '">' + key + '</option>'));
        }

        $('#roomPlace').on('change', function (v) {
            var names = room[$('#roomPlace').val()];
            $('#roomName').empty();
            $('#roomName').append($('<option value="">请选择</option>'));
            for (var key in names) {
                if (!names.hasOwnProperty(key)) continue;
                $('#roomName').append($('<option value="' + names[key] + '">' + key + '</option>'));
            }
        });

        $('#roomName').empty();
        $('#roomName').append($('<option value="">请选择</option>'));

        $('#roomName').on('change', function (v) {
            var roomName = $("#roomName").find("option:selected").text();
            if (roomName.indexOf('不可预定')>=0) {
                $('#roomName').val('').change();
                $.alert('该包厢不可预定');
            }
        });

        if ($.type(order) === 'object' && order.hasOwnProperty('roomId')) {
            $('#roomPlace').val(order.placeName).change();
            $('#roomName').val(order.roomId).change();
            $('#customerName').val(order.customerName);
            $('#customerTel').val(order.customerTel);
            $('#customerNumber').val(order.customerNumber);
        }

        $('#btnOk').on('click', function () {

            var $me = $(this);
            if ($me.is('.weui-btn_loading')) {
                //已经按下了
                return;
            }

            var userId = $('#userId').val();
            var roomPlace = $('#roomPlace').val();
            var roomId = $('#roomName').val();
            var roomName = $("#roomName").find("option:selected").text();
            var customerName = $('#customerName').val();
            var customerTel = $('#customerTel').val();
            var customerNumber = $('#customerNumber').val();
            var orderCreateAt = $('#orderCreateAt').val();

            if (roomPlace === null || roomPlace === '') {
                $.alert('请选择场地');
                return;
            }
            if (roomId === null || roomId === '') {
                $.alert('请选择包厢');
                return;
            }
            if (roomName.indexOf('不可预定')>=0) {
                $.alert('该包厢不可预定');
                return;
            }

            $.showLoading();
            //$me.addClass('weui-btn_loading');
            //$me.html($me.html() + '...');

            var data = {
                'userId': userId,
                'roomId': roomId,
                'roomName': roomName,
                'customerName': customerName,
                'customerTel': customerTel,
                'customerNumber': customerNumber,
                'orderCreateAt': orderCreateAt
            };
            if (order != null) {
                data.orderId = order.orderId;
                data.userId = '${userId!'null'}';
            }

            $.ajax({
                url: '/cust/save_order.json',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                type: 'post',
                success: function (data) {
                    if (data.success) {
                        window.location.replace('/prompt/prompt.html?title=预定成功&message=' + roomPlace + '-' + roomName);
                    } else {
                        $.alert(data.msg);
                    }
                },
                error: function () {
                    $.alert("网络异常");
                },
                complete: function () {
                    $.hideLoading();
                }
            });

        });

        $('#btnModifys').on('click', function () {
            window.location.href = '/cust/mark_list.html?openId=' + $('#openId').val();
        });

    })(jQuery);


</script>