hust-epi/whepi-ui/templates/user/home.ftl

<#assign title="用户登录"/>
<#include "/home/frag.head.ftl" />

<div class="weui-tab">
    <div class="weui-tab__bd">
        <div id="first">
            <div class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="page__bd">
                    <header class="user-header">
                        <br/>
                        <br/>
                        <h1 class="user-title">家园抗击疫情公共服务平台</h1>
                        <br/>
                        <h1 class="user-title">用户登录</h1>
                    </header>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <div class="weui-form" id="fromMsg">
                        <div class="weui-cells_radio user-font">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是&nbsp;&nbsp;
                            <input name="Fruit" type="radio" value="1"/>家庭用户
                            <input name="Fruit" type="radio" value="2"/>业委会人员
                        </div>
                        <hr class="user-hr">
                        <div class="maindiv">
                            <div class="leftdiv">
                                <br/>
                                <div class="weui-cells__title" style="font-weight: 300;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<#if user ??>${user.nickName!''}</#if></div>
                                <div class="weui-cells__title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户登录</div>
                                <br/>
                            </div>
                            <div class="centerdiv"></div>
                            <div class="rightdiv">
                                <div class="weui-cells__title">联系人输入</div>
                                <div class="weui-cells">
                                    <div class="weui-cell">
                                        <div class="weui-cell__bd">
                                            <input class="weui-input" type="text" id="linkman" placeholder="请输入文本"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="weui-cells__title">手机号输入</div>
                                <div class="weui-cells">
                                    <div class="weui-cell">
                                        <div class="weui-cell__bd">
                                            <input class="weui-input" type="text" id="phone" placeholder="请输入文本"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="weui-form__opr-area">
                            <a class="weui-btn weui-btn_primary" href="javascript:;" onclick="goOn();" id="goOn">下一步</a>
                        </div>
                    </div>
                    <div class="page" id="tpl_msg_warn_userType" hidden="hidden">
                        <div class="weui-msg">
                            <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
                            <div class="weui-msg__text-area">
                                <h2 class="weui-msg__title">操作失败</h2>
                                <p class="weui-msg__desc" id="errorMsg">用户类型不能为空</p>
                            </div>
                            <div class="weui-msg__opr-area">
                                <p class="weui-btn-area">
                                    <a href="javascript:;" onclick="back();" class="weui-btn weui-btn_default">返回</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="page" id="tpl_msg_warn_linkman" hidden="hidden">
                        <div class="weui-msg">
                            <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
                            <div class="weui-msg__text-area">
                                <h2 class="weui-msg__title">操作失败</h2>
                                <p class="weui-msg__desc" id="errorMsg">联系人不能为空</p>
                            </div>
                            <div class="weui-msg__opr-area">
                                <p class="weui-btn-area">
                                    <a href="javascript:;" onclick="back();" class="weui-btn weui-btn_default">返回</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="page" id="tpl_msg_warn_phone" hidden="hidden">
                        <div class="weui-msg">
                            <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
                            <div class="weui-msg__text-area">
                                <h2 class="weui-msg__title">操作失败</h2>
                                <p class="weui-msg__desc" id="errorMsg">电话号码校验失败</p>
                            </div>
                            <div class="weui-msg__opr-area">
                                <p class="weui-btn-area">
                                    <a href="javascript:;" onclick="back();" class="weui-btn weui-btn_default">返回</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="second" hidden="hidden">
            <div class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="page__bd">
                    <header class="user-header">
                        <br/>
                        <h1 class="user-title"><#if user ??>${user.nickName!''}</#if>，请完善住址信息</h1>
                        <br/>
                    </header>
                    <br/>
                    <br/>
                    <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 class="weui-select" id="city" name="select1">
                                <option value="1">武汉</option>
                            </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 class="weui-select" id="area" name="select2">
                                <option value="420102">江岸区</option>
                                <option value="420103">江汉区</option>
                                <option value="420104">硚口区</option>
                                <option value="420105">汉阳区</option>
                                <option value="420106">武昌区</option>
                                <option value="420107">青山区</option>
                                <option value="420111">洪山区</option>
                                <option value="420112">东西湖区</option>
                                <option value="420113">汉南区</option>
                                <option value="420114">蔡甸区</option>
                                <option value="420115">江夏区</option>
                                <option value="420116">黄陂区</option>
                                <option value="420117">新洲区</option>
                            </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 class="weui-select" id="uptownId" name="select3">
                            </select>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_select weui-cell_select-after" id="unitMsg">
                        <div class="weui-cell__hd">
                            <label for="" class="weui-label">栋/单元</label>
                        </div>
                        <div class="weui-cell__bd">
                            <select class="weui-select" id="unitId" name="select4">
                            </select>
                        </div>
                    </div>
                    <div id="doorplateMsg">
                        <div class="weui-cells__title">门牌号输入</div>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="text" id="doorplate" placeholder="请输入文本"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <div class="weui-form__opr-area">
                        <a class="weui-btn weui-btn_primary" href="javascript:;" onclick="save();" id="save">确定</a>
                    </div>

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

    </div>
</div>
</div>
</body>
<#include "/home/frag.foot.ftl" />
<script>

    $(document).ready(function () {
        $("#area").on("change", function () {
            var area = $("#area").val();
            $("#uptownId").empty();
            $("#houseId").empty();
            getUptownData(area);
        });
        $("#uptownId").on("change", function () {
            getUptownUnitData();
            $("#houseId").empty();
        })
    })

    function getUptownData(area) {
        $.ajax({
            type: "GET",
            url: "/home/getUptownData.json?area=" + area,
            dataType: "json",
            success: function (data) {
                if (data.length > 0) {
                    $("#uptownId").empty();
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].uptownId + '">' + data[i].uptownName + '</option>';
                    }
                    $('#uptownId').append(html);
                    $("#uptownId").val(data[0].uptownId);
                    getUptownUnitData();
                }
            }
        });
    }

    function getUptownUnitData() {
        $.ajax({
            type: "GET",
            url: "/home/getUptownUnitData.json?uptownId=" + $("#uptownId").val(),
            data: {},
            dataType: "json",
            success: function (data) {
                if (data.length > 0) {
                    $("#unitId").empty();
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].unitId + '">'+data[i].ridgepole+'栋'+data[i].unit+'单元' + '</option>';
                    }
                    $('#unitId').append(html);
                    $("#unitId").val(data[0].unitId);
                }
            }
        });
    }

        <#if user_id ??>var userId = ${user_id!''}</#if>;

    function save() {
        console.log("userId:"+userId)
        var userType = $('input:radio:checked').val();
        var city = $("#city").val();
        if (!city) {
            alert("请选择城市！")
            return false;
        }
        var area = $("#area").val();
        if (!area) {
            alert("请选择区/县！")
            return false;
        }
        var uptownId = $("#uptownId").val();
        if (!uptownId) {
            alert("请选择小区！")
            return false;
        }
        var unitId = $("#unitId").val();
        var doorplate = $("#doorplate").val().trim();
        if (!unitId) {
            alert("栋/单元！")
            return false;
        }
        if (!doorplate) {
            alert("请选择门牌信息！")
            return false;
        }
        console.log(city)
        console.log(area)
        console.log(uptownId)
        console.log(unitId)
        console.log(doorplate)
        $.ajax({
            url: '/home/checkHouseId.json',
            type: "post",
            data: {
                "unitId": unitId,
                "doorplate": doorplate,
            },success: function (data) {
                if (!data.success) {
                    alert(data.msg);
                    return false;
                } else {
                    $.ajax({
                        url: '/home/saveUser.json',
                        type: "post",
                        data: {
                            "userId": userId,
                            "userType": $('input:radio:checked').val(),
                            "linkman": $("#linkman").val(),
                            "phone": $("#phone").val(),
                            "city": city,
                            "area": area,
                            "unitId": unitId,
                            "uptownId": uptownId,
                            "doorplate": doorplate,
                        },success: function (date) {
                            window.location.href = "/user/home.html?userId=" + userId + "&userType=" + $('input:radio:checked').val();
                        }
                    });
                }
            }
        });
    }

    function goOn() {
        var userType = $('input:radio:checked').val();
        if (!userType) {
            $("#tpl_msg_warn_userType").show();
            $("#tpl_msg_warn_linkman").hide();
            $("#tpl_msg_warn_phone").hide();
            $("#fromMsg").hide();
            return false;
        }
        var linkman = $("#linkman").val();
        if (!linkman) {
            $("#tpl_msg_warn_userType").hide();
            $("#tpl_msg_warn_linkman").show();
            $("#tpl_msg_warn_phone").hide();
            $("#fromMsg").hide();
            return false;
        }
        var phone = $("#phone").val();
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            $("#tpl_msg_warn_userType").hide();
            $("#tpl_msg_warn_linkman").hide();
            $("#tpl_msg_warn_phone").show();
            $("#fromMsg").hide();
            return false;
        }
        $("#tpl_msg_warn_userType").hide();
        $("#tpl_msg_warn_linkman").hide();
        $("#tpl_msg_warn_phone").hide();
        $("#first").hide();
        $("#second").show();
        console.log(userType)
        console.log(linkman)
        console.log(phone)
    }

    function back() {
        $("#tpl_msg_warn_userType").hide();
        $("#tpl_msg_warn_linkman").hide();
        $("#tpl_msg_warn_phone").hide();
        $("#fromMsg").show();
    }

</script>