apply_personage.html 23.5 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="zh">
{include file="public/head"/}
<style>
    .form-group {
        position: relative;
    }

    .form-group .tipsInfo {
        position: absolute;
        width: 100%;
        height: 20px;
        font-size: 10px;
        color: red;
        top: 50px;
        left: 26px;
    }

    .form-group .photoTips {
        top: 21px;
        left: 150px;
    }

    .content {
        width: 100%;
        font-size: 0;
        background: rgba(249, 249, 249, 1);
    }

    .content .titleBoxContent {
        width: 100%;
        background: rgba(255, 255, 255, 1);
    }

    .content .titleBoxContent .titleBox {
        width: 1200px;
        height: 62px;
        line-height: 62px;
        margin: 10px auto;
        background: rgba(255, 255, 255, 1);
    }

    .content .titleBoxContent .titleBox span:first-child {
        display: inline-block;
        float: left;
        width: 6px;
        height: 20px;
        margin-top: 21px;
        background: rgba(0, 159, 142, 1);
        border-radius: 2px;
    }

    .content .titleBoxContent .titleBox span:last-child {
        width: 100px;
        height: 22px;
        line-height: 22px;
        float: left;
        margin-top: 20px;
        padding-left: 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 159, 142, 1);
    }

    .content .contentBox {
        width: 100%;
        background: rgba(255, 255, 255, 1);
    }

    .content .contentBox .contentMain {
        width: 1200px;
        height: 1251px;
        padding-top: 20px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 1);
    }

    .content .contentBox .contentMain form {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(61, 68, 77, 1);
    }

    .content .contentBox .contentMain form .form-group {
        width: 100%;
        height: 68px;
        margin: 0 0 10px 0;
        padding: 0 30px;
        background: rgba(249, 249, 249, 1);
    }

    .content .contentBox .contentMain form .form-group .control-label {
        min-width: 50px;
        height: 68px;
        line-height: 68px;
        margin: 0;
        padding: 0;
        text-align: left;
    }

    .content .contentBox .contentMain form .form-group div {
        height: 100%;
        padding: 0 0 0 15px;
    }

    .content .contentBox .contentMain form .form-group div .form-control {
        width: 100%;
        height: 100%;
        border: 0;
        box-shadow: none;
        background: rgba(249, 249, 249, 1);
    }

    .exampleBox {
        height: 120px !important;
    }

    .exampleBox img {
        height: 98px;
        width: 150px;
    }

    .exampleBoxLabel {
        vertical-align: top;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(61, 68, 77, 1);
    }

    .exampleBoxAsk {
        height: auto !important;
        display: inline-block;
        vertical-align: bottom;
        padding-left: 12px !important;
    }

    .exampleBoxAsk p {
        margin: 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
        color: rgba(140, 145, 152, 1);
    }

    /*身份证照片框样式*/
    .content .contentBox .contentMain form .idCardPhotoBox {
        height: 191px;
        padding: 0;
    }

    .content .contentBox .contentMain form .idCardPhotoBox .control-label {
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 30px;
        border-bottom: 1px solid rgba(238, 238, 238, 1);
    }

    .content .contentBox .contentMain form .idCardPhotoBox div {
        height: 130px;
        padding: 0 30px;
    }

    /*手持身份证照片框样式*/
    .content .contentBox .contentMain form .handIDCardPhoto {
        height: 313px;
        padding: 0;
    }

    .content .contentBox .contentMain form .handIDCardPhoto .control-label {
        width: 100%;
        height: 60px;
        line-height: 60px;
        padding: 0 30px;
        border-bottom: 1px solid rgba(238, 238, 238, 1);
    }

    .content .contentBox .contentMain form .handIDCardPhoto div {
        height: 100%;
        padding: 0 30px;
    }

    /*用户协议样式*/
    .content .contentBox .contentMain form .agreementBox {
        width: 100%;
        height: 17px;
        margin: 20px 0 10px 0;
        padding: 0;
        background: rgba(255, 255, 255, 1);
    }

    .content .contentBox .contentMain form .agreementBox div {
        padding: 0;

    }

    .content .contentBox .contentMain form .agreementBox div img {
        cursor: pointer;
    }

    .content .contentBox .contentMain form .agreementBox p {
        display: inline-block;
        height: 17px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 17px;
        color: #8C9198;
    }

    .content .contentBox .contentMain form .agreementBox p a {
        color: #009F8E;
    }

    /*申请入驻按钮框样式*/
    .content .contentBox .contentMain form .buttonBox {
        width: 100%;
        height: auto;
        padding: 0;
        background: rgba(255, 255, 255, 1);
    }

    .content .contentBox .contentMain form .buttonBox .btn {
        width: 451px;
        height: 54px;
        background: rgba(0, 159, 142, 1);
        border-radius: 4px;
        border: 0;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        color: rgba(255, 255, 255, 1);
    }
</style>
<style>
    /*上传图片样式重置*/
    .uploadBox {
        display:flex;
        align-items: center;
        padding: 16px 0 !important;
    }
    .imgClick {
        width: 150px!important;
        height: 96px!important;
        font-size: 0;
        position: relative;
        background: url(__CDN__/assets/store/images/idCardBoxFileupload.png) no-repeat;
    }
    .imgClick input {
        width: 150px;
        height: 96px;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .images{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left:0!important;
        padding-right: 0!important;
    }
    .imagesItem{
        width:150px!important;
        height:96px!important;
        font-size: 0;
        display:flex;
        align-items: center;
        position: relative;
        padding: 0 10px 0 0!important;
    }
    .imagesItem img{
        width:100%;
        height:100%;
    }
    .closeImage{
        position: absolute;
        top: -5px;
        right: 5px;
        width: 18px!important;
        height: 18px!important;
        background: rgba(197, 197, 197, 1);
        border-radius: 50%;
        padding: 0!important;
        font-size: 16px;
        text-align: center;
        line-height: 18px;
        color: #efefef;
        font-style: normal;
        cursor: pointer;
        z-index: 777;
    }
</style>
<style>
    .search_keyword {
        z-index: 700;
        top: 67px;
        left: 152px;
        position: absolute;
        width: 350px;
        height: auto;
        background: #ffffff;
        border-radius: 4px;
        list-style-type: none;
        box-shadow: 1px 1px 4px #000;
        cursor: pointer;
    }

    .searchitem {
        padding: 8px;
        text-align: left;
    }

    .searchitem:nth-child(1) {
        margin-top: 5px;
    }

    .searchitem:hover {
        background: #C8C8C9;
    }

    .searchitem_title {
        font-size: 14px;
    }

    .searchitem_area {
        font-size: 12px;
        color: #6B6B6B;
    }
</style>
<body>
{include file="public/header"/}
<!--主要内容-->
<div class="content">
    {include file="public/nav"/}
    <div class="titleBoxContent">
        <div class="titleBox">
            <span></span>
            <span>个人店铺</span>
        </div>
    </div>
    <div class="contentBox">
        <div class="contentMain">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="contactsName" class="col-sm-1 control-label">
                        <span class="mustFill">*</span>
                        联系人姓名
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="contactsName" placeholder="请输入联系人姓名">
                        <span id="contactsNameTips" class="tipsInfo"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="idCardNum" class="col-sm-1 control-label">
                        <span class="mustFill">*</span>
                        身份证号
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="idCardNum" placeholder="请输入身份证号">
                        <span id="idCardNumTips" class="tipsInfo"></span>
                    </div>
                </div>

                <div class="form-group idCardPhotoBox">
                    <label for="idCardPhoto" class="col-sm-12 control-label">
                        <span class="mustFill">*</span>
                        身份证照片
                    </label>
                    <span id="idCardPhotoTips" class="tipsInfo photoTips"></span>
                    <div id="idCardPhoto" class="col-sm-12">
                        <div class="uploadBox">
                            <div class="images">

                            </div>
                            <div class="imgClick">
                                <input type="file" name="file" multiple id="idCardBox"/>
                            </div>
                        </div>
                        <div class="uploadBox idCardBox"></div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="phoneNum" class="col-sm-1 control-label">
                        <span class="mustFill">*</span>
                        联系人电话
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="phoneNum" placeholder="请输入联系人电话">
                        <span id="phoneNumTips" class="tipsInfo"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="landline" class="col-sm-1 control-label">
                        座机号
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="landline" placeholder="请输入座机号">
                    </div>
                </div>
                <input id="province" type="hidden"/>
                <input id="city" type="hidden"/>
                <input id="district" type="hidden"/>
                <input id="lng" type="hidden"/>
                <input id="lat" type="hidden"/>
                <div class="form-group">
                    <label for="address" class="col-sm-1 control-label">
                        <span class="mustFill">*</span>
                        联系人地址
                    </label>
                    <div class="col-sm-11" style="position: relative">
                        <input type="text" class="form-control" id="address" placeholder="请输入联系人地址" autocomplete="off">
                        <span id="addressTips" class="tipsInfo"></span>
                    </div>
                    <ul class="search_keyword">

                    </ul>
                </div>

                <div class="form-group handIDCardPhoto">
                    <label for="handIDCardPhoto" class="col-sm-12 control-label">
                        <span class="mustFill">*</span>
                        手持身份证照片
                    </label>
                    <span id="handIDCardPhotoTips" class="tipsInfo photoTips"></span>
                    <div id="handIDCardPhoto" class="col-sm-12" style="height: 130px">
                        <div class="uploadBox">
                            <div class="images">

                            </div>
                            <div class="imgClick">
                                <input type="file" name="file" multiple id="handIDCardPhotoBox"/>
                            </div>
                        </div>
                        <div class="uploadBox handIDCardPhotoBox"></div>
                    </div>
                    <div class="exampleBox col-sm-12">
                        <span class="exampleBoxLabel">示例：</span>
                        <img src="__CDN__/assets/store/images/exampleImg.png" alt="img">
                        <div class="exampleBoxAsk">
                            <p>1.要求身份证本人手持身份证进行拍照</p>
                            <p>2.请勿遮挡住身份证号码、有效期、照片需清晰</p>
                            <p>3.照片支持jpg、gif、jpeg、png、bmp格式，大小不超过10M</p>
                        </div>

                    </div>
                </div>

                <div class="form-group">
                    <label for="recommenderName" class="col-sm-1 control-label">
                        平台推荐人
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="recommenderName" placeholder="请输入平台推荐人">
                    </div>
                </div>

                <div class="form-group">
                    <label for="recommenderPhone" class="col-sm-1 control-label">
                        推荐人电话
                    </label>
                    <div class="col-sm-11">
                        <input type="text" class="form-control" id="recommenderPhone" placeholder="请输入推荐人电话">
                    </div>
                </div>

                <div class="form-group agreementBox">
                    <div class="col-sm-12">
                        <img id="radio" src="__CDN__/assets/store/images/radioUnSelect.png" alt="radio"
                             onclick="changeRadioState()">
                        <p>我已阅读并同意<a href="javascript:void(0)" onclick="supplierAgreement()">《供应商入驻协议》</a></p>
                    </div>
                </div>

                <div class="form-group buttonBox">
                    <button type="button" class="btn" onclick="applySettledIn()">申请入驻</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--供应商入驻协议模态窗-->
<div class="modal fade" id="agreementModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    用户协议
                </h4>
            </div>
            <div class="modal-body">
                <!--以下为测试数据-->
                {$site.agreement}
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
{include file="public/js"/}
<script>
    var radioFlag = false;//同意入驻协议标识
    var idCardImgFileArr = [];
    var handIDCardImgFileArr = [];

    //供应商入驻协议
    function supplierAgreement() {
        $('#agreementModal').modal();
    }

    //申请入驻
    function applySettledIn() {
        var idCardBox_length = $('#idCardBox').parent().prev().find('.imagesItem').length;
        console.log(idCardBox_length);
        var handIDCardPhotoBox_length = $('#handIDCardPhotoBox').parent().prev().find('.imagesItem').length;
        var linkname = $('#contactsName').val();//联系人姓名
        var idcard = $('#idCardNum').val();//身份证号
        var idcard_verify = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;//身份证号正则
        var mobile = $('#phoneNum').val();//联系人电话
        var mobile_verify = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;//联系人电话正则
        var tel = $('#landline').val();//座机号
        var province = $("#province").val();//省
        var city = $("#city").val();//市
        var county = $("#district").val();//区
        var address = $('#address').val();//联系人地址
        var lng = $("#lng").val();//经度
        var lat = $("#lat").val();//纬度
        var referrer = $('#recommenderName').val();//平台推荐人
        var referrer_phone = $('#recommenderPhone').val();//平台推荐人电话
        if (linkname == '') {
            toast('请输入联系人姓名');
            return false;
        } else if (idcard == '') {
            toast('请输入身份证号');
            return false;
        } else if (!idcard_verify.test(idcard)) {
            toast('请输入有效的身份证号');
            return false;
        } else if (idCardBox_length == 0) {
            toast('请上传身份证照片');
            return false;
        } else if (mobile == '') {
            toast('请输入联系人电话');
            return false;
        } else if (!mobile_verify.test(mobile)) {
            toast('请输入有效的联系人电话');
            return false;
        } else if (address == '' || lng == '' || lat == '') {
            toast('请输入联系人地址');
            return false;
        } else if (handIDCardPhotoBox_length == 0) {
            toast('请上传手持身份证照片');
            return false;
        } else if (!radioFlag) {
            toast('请同意供应商入驻协议');
            return false;
        }
        var idCardImgFileArr = [];
        for (var i1 = 0; i1 < idCardBox_length; i1++) {
            idCardImgFileArr.push($('#idCardBox').parent().prev().find('.imagesItem').eq(i1).find('img').attr('src'));
        }
        var card_images = idCardImgFileArr.toString();
        var handIDCardImgFileArr = [];
        for (var i2 = 0; i2 < handIDCardPhotoBox_length; i2++) {
            handIDCardImgFileArr.push($('#handIDCardPhotoBox').parent().prev().find('.imagesItem').eq(i2).find('img').attr('src'));
        }
        var thumbnail = handIDCardImgFileArr.toString();
        console.log(card_images);
        console.log(thumbnail);
        $.ajax({
            url: "{:url('enter/submit_personage')}",
            type: "POST",
            data: {
                "linkname": linkname, "idcard": idcard, "card_images": card_images, "phone": mobile,
                "province": province, "city": city, "county": county, "address": address, "lng": lng, "lat": lat,
                "thumbnail": thumbnail, "tel": tel, "referrer": referrer, "referrer_phone": referrer_phone
            },
            success: function (res) {
                console.log(res);
                if (res.code == 1) {
                    toast('提交成功,请耐心等待审核');
                    setTimeout(function(){
                        window.location.href = "{:url('index/index/index')}";
                    },3000);
                }
            },
            error: function (res) {
                toast('与服务器断开连接');
            }
        })
    }

    //入驻协议radio点击
    function changeRadioState() {
        var imgSrc = $('#radio').attr('src');
        if (imgSrc == '__CDN__/assets/store/images/radioUnSelect.png') {
            radioFlag = true;
            $('#radio').attr('src', '__CDN__/assets/store/images/radioSelected.png');
        } else {
            radioFlag = false;
            $('#radio').attr('src', '__CDN__/assets/store/images/radioUnSelect.png');
        }
    }

    //上传身份证照片
    $('body').on('change', '#idCardBox', function () {
        var self = $(this);
        var filePath = self.val();
        var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        console.log(filePath);
        // 检查是否是图片
        if (filePath == '') {
            toast('未选择任何图片');
            return false;
        }
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            toast('上传错误,文件格式必须为：png/jpg/jpeg');
            return false;
        }
        var files = this.files;
        upload(files,self);
    });

    //上传手持身份证照片
    $('body').on('change', '#handIDCardPhotoBox', function () {
        var self = $(this);
        var filePath = self.val();
        var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
        console.log(filePath);
        // 检查是否是图片
        if (filePath == '') {
            toast('未选择任何图片');
            return false;
        }
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            toast('上传错误,文件格式必须为：png/jpg/jpeg');
            return false;
        }
        var files = this.files;
        upload(files,self);
    });

    //关键字输入提示
    $("#address").bind("input propertychange", function (event) {
        var keyword = $(this).val();
        $.ajax({
            url: "{:url('sundry/get_address')}",
            type: "POST",
            data: {"keyword": keyword},
            success: function (res) {
                console.log(res);
                var list = res.data.list;
                var html = "";
                $(list).each(function (key, li) {
                    var province = '';
                    if(li.province != undefined){
                        province = li.province+"-";
                    }
                    var city = '';
                    if(li.city != undefined){
                        city = li.city;
                    }
                    var district = '';
                    if(li.district != undefined){
                        district = "-"+li.district;
                    }
                    html += "<li class=\"searchitem\" data-province=\"" + province + "\" data-city=\"" + city + "\" data-district=\"" + district + "\" data-address=\"" + li.address + "\" data-lng=\"" + li.location.lng + "\" data-lat=\"" + li.location.lat + "\">\n" +
                        "                            <span class=\"searchitem_title\">\n" +
                        "                                " + li.title + "\n" +
                        "                            </span>\n" +
                        "                            <span class=\"searchitem_area\">\n" +
                        "                                " + province + city  + district + "\n" +
                        "                            </span>\n" +
                        "                        </li>";
                })
                $('.search_keyword').html(html);
            },
            error: function (res) {
                toast('与服务器断开连接');
            },
        })
    });
    //选择地址
    $('.search_keyword').on('click', '.searchitem', function () {
        var province = $(this).attr('data-province');
        var city = $(this).attr('data-city');
        var district = $(this).attr('data-district');
        var address = $(this).attr('data-address');
        var lng = $(this).attr('data-lng');
        var lat = $(this).attr('data-lat');
        $("#province").val(province);
        $("#city").val(city);
        $("#district").val(district);
        $("#address").val(address);
        $("#lng").val(lng);
        $("#lat").val(lat);
        $('.search_keyword').html('');
    });
    //隐藏关键字输入提示
    $("body").click(function () {
        $('.search_keyword').html('');
    });
</script>
</body>
</html>