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 user-font" style="font-weight: 300;">&nbsp;&nbsp;&nbsp;&nbsp;<#if user ??>${user.nickName!''}</#if></div>
                                <div class="weui-cells__title user-font">&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="420100">武汉市</option>
                                <option value="420200">黄石市</option>
                                <option value="420300">十堰市</option>
                                <option value="420500">宜昌市</option>
                                <option value="420600">襄阳市</option>
                                <option value="420700">鄂州市</option>
                                <option value="420800">荆门市</option>
                                <option value="420900">孝感市</option>
                                <option value="421000">荆州市</option>
                                <option value="421100">黄冈市</option>
                                <option value="421200">咸宁市</option>
                                <option value="421300">随州市</option>
                                <option value="422800">恩施土家族苗族自治州</option>
                                <option value="429000">省直辖县级行政区划</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" id="danweiTitle">栋/单元</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" id="menpaiTitle">门牌号码</div>
                        <div class="weui-cells">
                            <div class="weui-cell">
                                <div class="weui-cell__bd">
                                    <input class="weui-input" type="text" id="doorplate" placeholder="请输入门牌号码: 如 108"/>
                                </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);
        });

        $("#city").on("change", function () {
            var city = $("#city").val();

            $("#area").empty();
            $("#uptownId").empty();
            $("#houseId").empty();

            var areaData = [];
            switch (parseInt(city)) {
                case 420100 :{

                    areaData=[
                        {value: 420102,	text: "江岸区"},
                        {value: 420103,	text: "江汉区"},
                        {value: 420104,	text: "硚口区"},
                        {value: 420105,	text: "汉阳区"},
                        {value: 420106,	text: "武昌区"},
                        {value: 420107,	text: "青山区"},
                        {value: 420111,	text: "洪山区"},
                        {value: 420112,	text: "东西湖区"},
                        {value: 420113,	text: "汉南区"},
                        {value: 420114,	text: "蔡甸区"},
                        {value: 420115,	text: "江夏区"},
                        {value: 420116,	text: "黄陂区"},
                        {value: 420117,	text: "新洲区"}
                    ];
                  break;
                }
                case 420200 :{
                    areaData=[
                        {value: 420202,	text:"黄石港区"},
                        {value: 420203,	text:"西塞山区"},
                        {value: 420204,	text:"下陆区"},
                        {value: 420205,	text:"铁山区"},
                        {value: 420222,	text:"阳新县"},
                        {value: 420281,	text:"大冶市"}
                      ];
                  break;
                }
                case 420300 :{
                    areaData=[
                        {value: 420302,	text: "茅箭区"},
                        {value: 420303,	text: "张湾区"},
                        {value: 420321,	text: "郧县"},
                        {value: 420322,	text: "郧西县"},
                        {value: 420323,	text: "竹山县"},
                        {value: 420324,	text: "竹溪县"},
                        {value: 420325,	text: "房县"},
                        {value: 420381,	text: "丹江口市"}
                    ];
                  break;
                }
                case 420500 :{
                    areaData=[
                        {value: 420502,	text: "西陵区"},
                        {value: 420503,	text: "伍家岗区"},
                        {value: 420504,	text: "点军区"},
                        {value: 420505,	text: "猇亭区"},
                        {value: 420506,	text: "夷陵区"},
                        {value: 420525,	text: "远安县"},
                        {value: 420526,	text: "兴山县"},
                        {value: 420527,	text: "秭归县"},
                        {value: 420528,	text: "长阳土家族自治县"},
                        {value: 420529,	text: "五峰土家族自治县"},
                        {value: 420581,	text: "宜都市"},
                        {value: 420582,	text: "当阳市"},
                        {value: 420583,	text: "枝江市"},
                    ];
                  break;
                }
                case 420600 :{
                    areaData=[
                        {value: 420602,	text: "襄城区"},
                        {value: 420606,	text: "樊城区"},
                        {value: 420607,	text: "襄州区"},
                        {value: 420624,	text: "南漳县"},
                        {value: 420625,	text: "谷城县"},
                        {value: 420626,	text: "保康县"},
                        {value: 420682,	text: "老河口市"},
                        {value: 420683,	text: "枣阳市"},
                        {value: 420684,	text: "宜城市"},
                    ];
                  break;
                }
                case 420700 :{
                    areaData=[
                        {value: 420702,	text: "梁子湖区"},
                        {value: 420703,	text: "华容区"},
                        {value: 420704,	text: "鄂城区"},
                    ];
                  break;
                }
                case 420800 :{
                    areaData=[
                        {value: 420802,	text: "东宝区"},
                        {value: 420804,	text: "掇刀区"},
                        {value: 420821,	text: "京山县"},
                        {value: 420822,	text: "沙洋县"},
                        {value: 420881,	text: "钟祥市"},

                    ];
                  break;
                }
                case 420900 :{
                    areaData=[
                        {value: 420902,	text: "孝南区"},
                        {value: 420921,	text: "孝昌县"},
                        {value: 420922,	text: "大悟县"},
                        {value: 420923,	text: "云梦县"},
                        {value: 420981,	text: "应城市"},
                        {value: 420982,	text: "安陆市"},
                        {value: 420984,	text: "汉川市"},

                    ];
                  break;
                }
                case 421000 :{
                    areaData=[
                        {value: 421002,	text: "沙市区"},
                        {value: 421003,	text: "荆州区"},
                        {value: 421022,	text: "公安县"},
                        {value: 421023,	text: "监利县"},
                        {value: 421024,	text: "江陵县"},
                        {value: 421081,	text: "石首市"},
                        {value: 421083,	text: "洪湖市"},
                        {value: 421087,	text: "松滋市"},

                    ];
                  break;
                }
                case 421100 :{
                    areaData=[
                        {value: 421102,	text: "黄州区"},
                        {value: 421121,	text: "团风县"},
                        {value: 421122,	text: "红安县"},
                        {value: 421123,	text: "罗田县"},
                        {value: 421124,	text: "英山县"},
                        {value: 421125,	text: "浠水县"},
                        {value: 421126,	text: "蕲春县"},
                        {value: 421127,	text: "黄梅县"},
                        {value: 421181,	text: "麻城市"},
                        {value: 421182,	text: "武穴市"},

                    ];
                  break;
                }
                case 421200 :{
                    areaData=[
                        {value: 421202,	text: "咸安区"},
                        {value: 421221,	text: "嘉鱼县"},
                        {value: 421222,	text: "通城县"},
                        {value: 421223,	text: "崇阳县"},
                        {value: 421224,	text: "通山县"},
                        {value: 421281,	text: "赤壁市"},

                    ];
                  break;
                }
                case 421300 :{
                    areaData=[
                        {value: 421303,	text: "曾都区"},
                        {value: 421321,	text: "随县"},
                        {value: 421381,	text: "广水市"},
                    ];
                  break;
                }
                case 422800 :{
                    areaData=[
                        {value: 422801,	text: "恩施市"},
                        {value: 422802,	text: "利川市"},
                        {value: 422822,	text: "建始县"},
                        {value: 422823,	text: "巴东县"},
                        {value: 422825,	text: "宣恩县"},
                        {value: 422826,	text: "咸丰县"},
                        {value: 422827,	text: "来凤县"},
                        {value: 422828,	text: "鹤峰县"},

                    ];
                  break;
                }
                case 429000 :{
                    areaData=[
                        {value: 429004,	text: "仙桃市"},
                        {value: 429005,	text: "潜江市"},
                        {value: 429006,	text: "天门市"},
                        {value: 429021,	text: "神农架林区"},
                    ];
                  break;
                }
            }
            var html = "";
            for (var i = 0; i < areaData.length; i++) {
                html += '<option value="' + areaData[i].value + '">' + areaData[i].text + '</option>';
            }
            $('#area').append(html);
            $("#area").val(areaData[0].value);
        });

        $("#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);
                    var uptownId = $("#uptownId").val();
                    // console.log("uptownId:"+uptownId);
                    if (uptownId == '1238790987234') {
                        console.log("单位");
                        $("#danweiTitle").text("单位");
                        $("#menpaiTitle").text("工号");
                        $("#doorplate").attr("placeholder", "输入工号");

                    } else {
                        console.log("小区");
                        $("#danweiTitle").text("栋/单元");
                        $("#menpaiTitle").text("门牌号码");
                        $("#doorplate").attr("placeholder", "请输入门牌号码: 如 108");
                    }
                    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++) {
                        var uptownId = $("#uptownId").val();
                        if (uptownId == '1238790987234') {
                            html += '<option value="' + data[i].unitId + '">'+data[i].ridgepole+data[i].unit + '</option>';
                        } else {
                            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=1";
                        }
                    });
                }
            }
        });
    }

    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>