index.html 22.6 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_886149_x7uh64tifl.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/swiper.min.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/weui.css"/>
    <!--<link rel="stylesheet" href="__TMPL__/public/assets/css/example.css"/>-->
    <link rel="stylesheet" href="__TMPL__/public/assets/css/base.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/index.css">

    <title>我要雇人</title>
    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/base.js"></script>

    <style>
        .weui-picker__item{
            font-size: 0.3rem;
        }

        .swiper-container,.swiper-wrapper,.swiper-slide{
            height:2.78rem;
        }
        .swiper-slide img{
            height:100%;
            width:100%;
        }
        .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
            bottom: 6px;
            left: 0;
            width: 100%;
        }
        .join{
            display:flex;
            height: 1rem;
            padding: 0 0.29rem;
            align-items: center;
            background: #F5F6FA;
            margin-top: 0.36rem;
        }
        #select{
            width:4rem;
            height:0.5rem;
            font-size: 0.3rem;
            background: transparent;
            margin-bottom: 1.1rem;
            border:none;
            outline: none;
        }
        .start, .end {
            width: 2.5rem;
            text-align: center;
            color: #97A0A8;
            font-size: 0.26rem;
            vertical-align: middle;

        }
        .list_attention{
            display:flex;
            justify-content: space-between;
            align-items: center;
        }
        .selsctoption{
            width: 4.5rem;

            color: #97A0A8;
            font-size: 0.26rem;
            height: 0.5rem;
            line-height: 0.5rem;
        }
        .callTel{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            position: fixed;
            left: 0;
            right: 0;
            z-index: 5;
        }
    </style>
</head>
<body>
<!--实名认证-->
<div class="registerwrapper" <eq name="final.is_check" value="1"> style="display: none" </eq>>
    <div class="registerpop">
        <div class="cloudhead">
            <p class="cloudone">
                <img src="__TMPL__/public/assets/images/aicon02@2x.png" alt="">
            </p>
            <p class="authrity">实名认证</p>
            <p class="cloudtwo">
                <img src="__TMPL__/public/assets/images/aicon01@2x.png" alt="">

            </p>
        </div>
        <div class="people">
            <p class="people_nameimg"><img src="__TMPL__/public/assets/images/aicon03@2x.png" alt=""></p>
            <p class="people_name">
                <input type="text" placeholder="姓名" class="peopelname">
            </p>
        </div>
        <div class="people">
            <p class="people_phoneimg"><img src="__TMPL__/public/assets/images/aicon04@2x.png" alt=""></p>
            <p class="people_phonename">
                <input type="text" placeholder="手机号" class="peopelphone">
            </p>
        </div>
        <div class="people">
            <p class="people_cardimg"><img src="__TMPL__/public/assets/images/aicon05@2x.png" alt=""></p>
            <p class="people_cardname">
                <input type="text" placeholder="身份证号" class="peopelcard">
            </p>
        </div>
        <div class="sub">提交</div>
    </div>
</div>

<!--联系客服-->
<div class="callTel" style="display: none">
<div class="registerpop" style="width: 5.86rem;height: 4.48rem;">
    <div class="cloudhead">
        <p class="cloudone">
            <img src="__TMPL__/public/assets/images/aicon02@2x.png" alt="">
        </p>
        <p class="authrity">客服电话</p>
        <p class="cloudtwo">
            <img src="__TMPL__/public/assets/images/aicon01@2x.png" alt="">

        </p>
    </div>
    <div style="margin-top: 12%; font-size: 0.6rem;">1232131</div>
</div>
</div>


<!--劳动者协议-->
<div class="workerwapper" style="display:none">
    <div class="worderpop">
        <div class="workerhead">
            {$final.art.title}
        </div>
        <div class="worktext">
            {$final.art.content}
        </div>
        <p class="agree">点击“同意”，即表示您同意上述内容。</p>
        <div class="agreebtn">
            <p class="cancel">取消</p>
            <p class="agreematerial">同意</p>
        </div>
    </div>
</div>

<!--提交审核之后的弹层-->
<div class="examinewrapper" style="display:none">
    <div class="examinepop">
        <div class="examine">
            <p class="waitexamine">您的申请已经提交，请等待审核</p>
            <p class="waitimg">
                <img src="__TMPL__/public/assets/images/aicon08@2x.png" alt="">
            </p>
        </div>

    </div>
</div>
<!--提交成功之后弹层-->
<div class="materialwrapper" style="display:none">
    <div class="materialpop">
        <p class="materialimg">
            <img src="__TMPL__/public/assets/images/bicon06@2x.png" alt="">
        </p>
        <div class="material_name">
            <p class="materialname">您已成功填写求职信息，请在个人中心</p>
            <p class="materialname">
                <a href="" class="myresume">我的简历</a>
                进行查看
            </p>
        </div>
    </div>
</div>
<div class="container">
    <div class="head">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <volist name="final.banner" id="banner">
                    <div class="swiper-slide">
                        <img src="{:cmf_get_image_url($banner.pic)}" alt="" >
                    </div>
                </volist>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="bad">
        <div class="position">
                <div class="sign">
                    <img src="__TMPL__/public/assets/images/aicon09@2x.png" alt="">
                </div>
                <!--<p class="place">我的位置：</p>-->
               <input type="text" class="place" placeholder="我的位置" readonly style="background: transparent;">

                <input type="text" class="enterplace"  readonly>


        </div>

        <!--雇佣信息-->
        <div class="hire">
            <p class="hire_img">
                <img src="__TMPL__/public/assets/images/aicon06@2x.png" alt="">
            </p>
            <p class="hire_name">雇佣信息</p>
            <p class="wire"></p>
        </div>

        <div class="join">
            <div class="list_name">雇佣事项</div>
            <div class="listenter list_attention" style="width:5rem;">
                <p class="selsctoption">请选择雇佣事项</p>
                <p class="row">
                    <img src="__TMPL__/public/assets/images/bicon01@2x.png" alt="">
                </p>
            </div>
        </div>
        <div class="list">
            <p class="list_name">雇主名称</p>
            <div class="listenter">
                <input type="text" placeholder="请输入雇主名称"  class="title">
            </div>
        </div>
        <div class="list">
            <p class="list_name">报酬总额</p>
            <div class="listenter">
                <input type="text" placeholder="请输入报酬总额" style="width: 4rem" id="money">
            </div>
            <p class="money">元</p>
        </div>
        <div class="list">
            <p class="list_name">招聘人数</p>
            <div class="listenter">
                <input type="text" placeholder="请输入招聘人数" style="width: 4rem;" class="people2">
            </div>
            <p class="money">人</p>
        </div>
        <div class="list">
            <p class="list_name" >工作时间</p>
            <p class="start">开始日期</p>
            <p class="money">至</p>
            <p class="end">结束日期</p>
        </div>
        <div class="list">
            <p class="list_name">工作地点</p>
            <div class="listenter">
                <input type="text" placeholder="请输入工作地点" class="address">
            </div>
        </div>
        <div class="work">
            <p class="workrequire">工作要求</p>
            <textarea name="" id="workrequire" cols="30" rows="5" placeholder="请输入工作要求" class="else" style="resize: none;"></textarea>
            <div class="wordnum">
                <p class="before">0</p>
                <p class="line">/</p>
                <p class="after">500</p>
            </div>
        </div>
        <div class="agree">
            <p class="iconfont select icon-weixuanze"></p>
            <div class="agreement">
                <p class="meagree">我已同意</p>
                <p class="protoal">《劳动者协议》</p>
            </div>
        </div>
        <div class="listenme">
            <div class="listen callTelAlert">
                <p class="listen_img">
                    <img src="__TMPL__/public/assets/images/aicon07@2x.png" alt="">
                </p>
                <p class="listen_name ">联系客服</p>
            </div>
            <div class="mesub">
                提交
            </div>
        </div>
    </div>

</div>
<!--begin:提示弹层-->
<div class="pop_fn"></div>
<script type="text/javascript" src="__TMPL__/public/assets/js/swiper.min.js"></script>
<script src="__TMPL__/public/assets/js/zepto.min.js"></script>
<script type="text/javascript" src="__TMPL__/public/assets/js/weui.js"></script>
<script src="__TMPL__/public/assets/js/example.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=HGLBZ-WD66X-2H74V-TJ6NI-NHNWZ-DNBJ5"></script>
<script>
    $('.callTelAlert').click(function () {
        $('.callTel').css('display','block');
    });

    $(".callTel").click(function(){

        $(this).css("display","none")
    })
    // window.event.stopPropagation();
    var mySwiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: true,//可选选项，自动滑动

    })


    //日期选择器
    var date=new Date();
    var year=date.getFullYear();
    console.log(year);
    var month=date.getMonth()+1;
    console.log(month);
    var day=date.getDate();
    console.log(day)
    //开始时间
    $('.start').on('click', function () {
        weui.datePicker({
            start: new Date(),
            end: new Date().getFullYear(),
            defaultValue: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()],
            onConfirm: function(result) {
                // 二级调用：时间
                show_expect_time_picker(result);
                $('.weui-picker').on('animationend webkitAnimationEnd', function() {
                    show_expect_time_picker(result);
                });
                var date=result[0]+"年"+result[1]+"月"+result[2]+"日";
                $(".start").html(date);
                // var attr = result[0]+'-'+result[1]+'-'+result[2];
                // $(".start").attr('index',attr);
            },
            className: 'order_day'
        })
    });
    //结束时间
    $('.end').on('click', function () {
        weui.datePicker({
            start: new Date(),
            end: new Date().getFullYear(),
            defaultValue: [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()],
            onConfirm: function(result) {
                // 二级调用：时间
                show_expect_time_picker1(result);
                $('.weui-picker').on('animationend webkitAnimationEnd', function() {
                    show_expect_time_picker1(result);
                });
                var date=result[0]+"年"+result[1]+"月"+result[2]+"日";
                $(".end").html(date);
                var attr = result[0]+'-'+result[1]+'-'+result[2];
                $(".end").attr('index',attr);
            },
            className: 'order_day'
        })
    });
    // 开始时间组件选择时分
    function show_expect_time_picker(date) {
        var hours = [],
            minites = [],
            symbol = [{
                label: ':',
                value: 0
            }];
        var d = new Date();
        var my_hours = d.getHours();
        var my_minutes = d.getMinutes();
        var date = date[0].value + '年' + (date[1].value>9?date[1].value:('0'+date[1].value)) + '月' + (date[2].value>9?date[2].value:('0'+date[2].value)) + '日';
        if (!hours.length) {
            for (var i = my_hours; i < 24; i++) {
                var hours_item = {};
                hours_item.label = ('' + i).length === 1 ? '0' + i : '' + i;
                hours_item.value = i;
                hours.push(hours_item);
            }
        }
        if (!minites.length) {
            for (var j = 0; j < 60; j++) {
                var minites_item = {};
                minites_item.label = ('' + j).length === 1 ? '0' + j : '' + j;
                minites_item.value = j;
                minites.push(minites_item);
            }
        }
        weui.picker(hours, symbol, minites, {
            defaultValue: [new Date().getHours(), 0, my_minutes],
            onConfirm: function(result) {
                var time = result[0].label + ':' + result[2].label;
                var expect_date = date + ' ' + time;
                var timestamp = Date.parse(new Date());
                var choosetamp = Date.parse(expect_date);
                $('.start').html(expect_date);
                // var attr = result[0]+'-'+result[1]+'-'+result[2];
                // $(".start").attr('index',attr);

            },
            className: 'mytime'
        });
    }
    //结束时间选择时分
    function show_expect_time_picker1(date) {
        var hours = [],
            minites = [],
            symbol = [{
                label: ':',
                value: 0
            }];
        var d = new Date();
        var my_hours = d.getHours();
        var my_minutes = d.getMinutes();
        var date = date[0].value + '年' + (date[1].value>9?date[1].value:('0'+date[1].value)) + '月' + (date[2].value>9?date[2].value:('0'+date[2].value)) + '日';
        if (!hours.length) {
            for (var i = my_hours; i < 24; i++) {
                var hours_item = {};
                hours_item.label = ('' + i).length === 1 ? '0' + i : '' + i;
                hours_item.value = i;
                hours.push(hours_item);
            }
        }
        if (!minites.length) {
            for (var j = 0; j < 60; j++) {
                var minites_item = {};
                minites_item.label = ('' + j).length === 1 ? '0' + j : '' + j;
                minites_item.value = j;
                minites.push(minites_item);
            }
        }
        weui.picker(hours, symbol, minites, {
            defaultValue: [new Date().getHours(), 0, my_minutes],
            onConfirm: function(result) {
                var time = result[0].label + ':' + result[2].label;
                var expect_date = date + ' ' + time;
                var timestamp = Date.parse(new Date());
                var choosetamp = Date.parse(expect_date);
                console.log(expect_date);
                $(".end").html(expect_date);
                var attr = result[0]+'-'+result[1]+'-'+result[2];
                $(".end").attr('index',attr);
            },
            className: 'mytime'
        });
    }


    //选择注意事项
    var joblist = JSON.parse(`{$final.select}`);
    console.log(joblist);
    $('.list_attention').on('click', function () {

        weui.picker(joblist, {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                $(".selsctoption").html(result[0].label)
                $(".selsctoption").attr('index',result[0].value)
            }
        });
    });
    // 实名认证提交
    $('.sub').click(function () {
        $.ajax({
            type: 'POST',
            url: "{:url('Index/Authentication')}",
            data: {
                'name' : $('.peopelname').val(),
                'tel' : $('.peopelphone').val(),
                'card_num' : $('.peopelcard').val()
            },
            success: function (res) {
                if(res.code == 1){
                    popup('实名认证成功');
                    $('.registerwrapper').css('display','none');
                }else{
                    popup(res.message)
                }
            },
            error: function (res) {
                popup('网络错误，请刷新')
            }
        });
    })

    //是否同意协议
    $(".select").click(function(){
        if($(this).attr("class")=='iconfont select icon-weixuanze'){
            $(this).removeClass("icon-weixuanze");
            $(this).addClass("icon-yixuanze");
        }else if($(this).attr("class")=='iconfont select icon-yixuanze'){
            $(this).removeClass("icon-yixuanze");
            $(this).addClass("icon-weixuanze");
        }
    })
    //字体输入
    $("#workrequire").keyup(function(){
        var len=$(this).val().length;
        $(".before").html(len)
        if(len>500){
            popup("请输入500个内的字");
        }
    });


    //提交时资料不完善
    $(".mesub").click(function(){
        var sel_id = $('.selsctoption').attr('index');
        var title = $('.title').val();
        var money = $('#money').val();
        var start_time = $(".start").text();
        var end_time = $('.end').text();
        var address = $('.address').val();
        var demand = $('.else').val();
        var people = $('.people2').val();
        // console.log(people);
        var isTrue = $(".select").hasClass("icon-yixuanze");
        if(isTrue == true){
            // console.log('4444444444444444');
            $.ajax({
                type: 'POST',
                url: "{:url('Index/hire')}",
                data: {
                    'select_id' : sel_id,
                    'title' : title,
                    'money' : money,
                    'start_time' : start_time,
                    'end_time' : end_time,
                    'address' : address,
                    'else' : demand,
                    'people' : people,
                },
                success: function (res) {
                    if(res.code == 1){
                        $('.examinewrapper').css('display','block');
                        setTimeout(function(){
                            location.href="{:url('Member/index')}"
                        },2000);
                    }else{
                        popup(res.message);
                    }
                    console.log(res);
                },
                error: function (res) {
                    console.log(res);
                }
             });
        }else{
            console.log('2w22222222');
            popup('请先勾选劳动者协议');
        }


    });
    //劳动者协议
    $(".protoal").click(function(){
        $(".workerwapper").css("display","block");
        $('.agreematerial').click(function () {
            $('.select').removeClass("icon-weixuanze");
            $('.select').addClass("icon-yixuanze");
        })

    });
    //取消劳动者协议
    $(".cancel,.agreematerial").click(function(){
       $(".workerwapper").css("display","none")
    })

    // 微信我的位置
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "{$config.appId}", // 必填，公众号的唯一标识
        timestamp: "{$config.timestamp}", // 必填，生成签名的时间戳
        nonceStr: "{$config.nonceStr}", // 必填，生成签名的随机串
        signature: "{$config.signature}",// 必填，签名
        jsApiList: [
            'getLocation',
            'openLocation',
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                console.log(res);
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                var speed = res.speed; // 速度，以米/每秒计
                var accuracy = res.accuracy; // 位置精度
                var data={
                    location:latitude+','+longitude,//纬度，经度
                    key:"HGLBZ-WD66X-2H74V-TJ6NI-NHNWZ-DNBJ5",
                    get_poi:0
                }
                var url="http://apis.map.qq.com/ws/geocoder/v1/?";
                data.output="jsonp";
                $.ajax({
                    type:"get",
                    dataType:'jsonp',
                    data:data,
                    jsonp:"callback",
                    jsonpCallback:"QQmap",
                    url:url,
                    success:function(json){
                        var isGet = $('.enterplace').text();
                        if(isGet.length == 0){
                            var addr =    "{$Request.param.addr}";
                            if(addr.length == 0){
                                $('.enterplace').val(json.result.address);
                            }else{
                                $('.enterplace').val(addr);
                            }
                        }

                    },
                    error : function(err){alert("服务端错误，请刷新浏览器后重试")}
                })
            }
        });
    });

    // 调取腾讯接口
    var txUrl = "https://3gimg.qq.com/lightmap/components/locationPicker2/index.html?callback=QQmap&type=0&backurl=http://yunzhi07.com&search=1&policy=1&mapdraggable=0&zoom=13&referer=myapp&key=HGLBZ-WD66X-2H74V-TJ6NI-NHNWZ-DNBJ5";
    $('.enterplace').click(function () {
        window.location.href = txUrl;
        // $('.enterplace').val(json.result.address);
    })

</script>


</body>
</html>