write.html 13.7 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <include file="public@head_common"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/myweui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/augly.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/write/write.css" />
    <title>填写电子订单</title>
    <style type="text/css">

    </style>
</head>

<body>
<div class="header">
    <div class="return">
        <span class="back_href">
            <i class="iconfont icon-jiantou-copy"></i>返回
        </span>
    </div>
    填写电子订单
</div>
<div class="test_num"></div>
<div class="header_place"></div>

<div class="tab_tit">
    <p class="tab_item active">填写电子订单</p>
    <p class="tab_item view_orders">查看已提交订单</p>
</div>

<div class="form_data">
    <!--第一步-->
    <div class="write_one" style="display: ;">
        <div class="register_item baby_name">
            <div class="write_tit">
                <p class="tit">订单类型</p>
                <p class="detail">{$typeInfo.name}</p>
            </div>
            <volist name="typeInfo.groupA" id="vo">
                {$vo.html}
            </volist>
        </div>

        <notempty name="typeInfo.groupB">
            <div class="info_wrap parent_name">
                <volist name="typeInfo.groupB" id="vo">
                    {$vo.html}
                </volist>
            </div>
        </notempty>

        <notempty name="typeInfo.groupC">
            <div class="first_page next_btn">
                下一步
            </div>
            <else/>
            <div class="submit_btn next_btn">
                提交
            </div>
        </notempty>
    </div>

    <notempty name="typeInfo.groupC">
        <div class="write_two" style="display: none;">
            <div class="register_item baby_name">
                <volist name="typeInfo.groupC" id="vo">
                    {$vo.html}
                </volist>
            </div>
            <div class="write_two_btn">
                <div class="one_page two_btn_item">
                    上一步
                </div>
                <notempty name="typeInfo.groupD">
                    <div class="three_page two_btn_item">
                        下一步
                    </div>
                    <else/>
                    <div class="submit_btn two_btn_item">
                        提交
                    </div>
                </notempty>
            </div>
        </div>
    </notempty>

    <notempty name="typeInfo.groupD">
        <div class="write_three" style="display: none;">
            <div class="register_item baby_name">
                <volist name="typeInfo.groupD" id="vo">
                    {$vo.html}
                </volist>
            </div>
            <div class="write_two_btn">
                <div class="two_page two_btn_item">
                    上一步
                </div>
                <div class="submit_btn two_btn_item">
                    提交
                </div>
            </div>
        </div>
    </notempty>
</div>

<div class="mask" style="display: none;">
    <!--订单修改-->
    <div class="order_change" style="display: block;">
        <div class="order_change_pic">
            <img src="__TMPL__/public/mobile/images/tucengf.png" />
        </div>
        <div class="change_text">
            <img src="__TMPL__/public/mobile/images/closeimg.png" class="change_close" />
            <p class="change_text_o">您已提交成功</p>
            <p class="change_text_t">订单确认码为 <span class="num"></span></p>
            <p class="change_btn">确认</p>
        </div>
    </div>
</div>

<div class="bottom_icon">
    <img src="__TMPL__/public/mobile/images/biglogo@2x.png" class="bottom_img" />
    <p class="bottom_text">{$site_info.site_name}</p>
</div>
<script src="__TMPL__/public/mobile/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/weui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/myweui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/citypicker.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var form_data = [];
    var write_one = write_two = write_three = [];
    var allow_submit = true;
    var res = {
        data: ''
    };
    var uploadImgUrl ;
    var reg = /^1[0-9]{10}$/;
    $('.order_style').click(function() {
        $(this).addClass('active').siblings().removeClass('active')
    });
    $('.person_sex').click(function() {
        $(this).addClass('sex_active').siblings().removeClass('sex_active')
    });

    //第二部选择地址
    $('.add_btn').click(function() {
        $(this).addClass('add_active').siblings().removeClass('add_active')
    });

    $('#birthday').click(function() {
        weui.datePicker({
            start: 2000,
            end: 2030,
            defaultValue: [2015, 6, 9],
            onChange: function(result) {
                // console.log(result);
                //					$('.#birthday_input').val(result)
            },
            onConfirm: function(result) {
                var birthday = result[0].label + result[1].label + result[2].label
                // console.log(birthday)
                $('#birthday').val(birthday)
            },
            id: 'datePicker'
        });
    });

    $('#address').click(function() {
        weui.picker(rawCitiesData, {
            onConfirm: function(result) {
                $('#address').val(result[0].label + '-' + result[1].label + '-' + result[2].label);
            }
        });
    });

    $('#product').click(function() {
        var goodsList = JSON.parse(`{$goodsList}`);
        weui.picker(goodsList, {
            onChange: function(result) {
                console.log(result);
            },
            onConfirm: function(result) {
                $('#product').val(result[0].label)
                console.log(result);
            },
            id: 'multiPickerBtn'
        });
    });

    //下一步
    $('.first_page').click(function() {
        if(submit_common('.write_one',write_one)){
            $('.write_one').hide()
            $('.write_two').show()
        };
    });

    // 上一步
    $('.one_page').click(function() {
        $('.write_one').show();
        $('.write_two').hide()
    });
    $('.two_page').click(function() {
        $('.write_three').hide();
        $('.write_two').show()
    });

    // 下一步
    $('.three_page').click(function() {
        if(submit_common('.write_two',write_two)) {
            $('.write_three').show();
            $('.write_two').hide()
        }
    });
    // 关闭成功弹出框
    $('.change_close').click(function() {
        location.href = "{:url('order_type')}";
        // $('.mask').hide()
    });
    $('.change_btn').click(function() {
        location.href = "{:url('order_type')}";
        // $('.mask').hide()
    });

    // 提交订单
    $('.submit_btn').click(function() {
        var btn = $(this);
        var text = btn.text();
        if(submit_common('.form_data',form_data)) {
            if(allow_submit) {
                allow_submit = false;
                var data = {
                    id: "{$typeInfo.id}",
                    param: form_data.join(',')
                };
                $.ajax({
                    url: "{:url('submit_form')}",
                    type: "POST",
                    data: data,
                    dataType: "JSON",
                    beforeSend: function(){
                        btn.text(text+'中...');
                    },
                    success: function (res) {
                        // console.log(res);
                        if (res.code == 1) {
                            $('.num').html(res.data);
                            $('.mask').show()
                        } else {
                            _error(res.msg);
                        }
                    },
                    error: function(XHR,errorMsg,errorType) {
                        _error(errorMsg);
                    },
                    complete: function(XHR,TS) {
                        allow_submit = true;
                        btn.text(text);
                    }
                });
            }
        }
    });

    $('.order_long').click(function() {
        $(this).addClass('long_active').siblings().removeClass('long_active')
    });
    $('.more_gift').click(function() {
        $(this).addClass('long_active').siblings().removeClass('long_active')
    });
    $('.age').click(function() {
        $(this).addClass('long_active').siblings().removeClass('long_active')
    });
    $('.people').click(function() {
        $(this).addClass('long_active').siblings().removeClass('long_active')
    });
    $('.view_orders').click(function(){
        location.href = "{$myOrderUrl}";
    });

    // 验证表单数据通用方法
    function submit_common(sort, data) {
        var status = true;
        $(sort).find('.form_options').each(function(index,element){
            var value = '';
            if($(this).find('input').length > 0) {
                // 判断填写内容是否符合要求
                if($(this).find('input').val()=='' && $(this).find('input').attr('type') != 'file' && $(this).data('validate') == 1) {
                    data = [];
                    _error($(this).find('._validate').html()+'不能为空');
                    status = false;
                    return false;
                } else {
                    // 判断客户编号类型，长度必须为10位；判断手机号码格式是否正确
                    // if($(this).data('type') == 12 && $(this).find('input').val().length != 10 && $(this).data('validate') == 1) {
                    //     _error($(this).find('._validate').html()+'长度必须为10位');
                    //     status = false;
                    //     return false;
                    // } else
                    if($(this).data('type') == 3 && $(this).data('validate') == 1) {
                        if(!reg.test($(this).find('input').val())) {
                            _error($(this).find('._validate').html()+'格式错误');
                            status = false;
                            return false;
                        }
                        value = $(this).find('input').val();
                    } else {
                        value = $(this).find('input').val();
                    }
                }
            }
            if($(this).find('.order_style').length > 0) {
                value = $(this).find('.active').html();
            }
            data.push(value);
        });
        return status;
    }

    // 弹窗提示
    var popup_switch = true;
    function _error(test) {
        if(popup_switch) {
            popup_switch = false;
            $('.test_num').html(test);
            $('.test_num').removeClass('Augly-fadeout');
            $('.test_num').addClass('Augly-fadein');
            $('.test_num').show();
            setTimeout(function() {
                $('.test_num').removeClass('Augly-fadein');
                $('.test_num').addClass('Augly-fadeout');
                popup_switch = true
            }, 1500)
        } else {
            popup_switch = true
        }
    }
    // 上传图片
    $(".up_wrap").on("change","input[type='file']",function(){
        var file = this.files[0];
        var parent = $(this).parent().find('.up_pic');
        var filePath=$(this).val();
        if (this.files && this.files[0]) {
            if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1 || filePath.indexOf("jpeg")!=-1 ){
                var arr=filePath.split('\\');
                var fileName=arr[arr.length-1];
                $("#fileName").val(fileName);

                var reader = new FileReader();
                reader.onload = function(evt){
                    html = '<img src=" '+ evt.target.result +'" width="100%" height="100%" />'
                    parent.html(html);
                    parent.css('height','auto');
                }
                reader.readAsDataURL(this.files[0]);
                var formData = new FormData();
                formData.append("file", this.files[0]);
                formData.append("filetype", "image");
                formData.append("app", 'licence');
                var params = {
                    file: this.files[0],
                    fileType: "image",
                    app: 'licence'
                }
                $.ajax({
                    url: "{:url('portal/MemberSales/upload')}",
                    type: "POST",
                    data: formData,
                    contentType:false,
                    processData:false,
                    dataType:'json',
                    mimeType:"multipart/form-data",
                    success:function(res){
                        if(res.code == '1'){
                            console.log(res.data)
                            // toastr.success('上传成功！')
                            $('#up_wrap').val(res.data[0].filepath)
                        }
                    },
                    error:function(res){
                        console.log(res)
                    }
                })
            }else{
                toastr.warning('请按照要求上传图片！')
                $(this).val('')
            }

        }

    })
</script>
</body>

</html>