<!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 ; $('.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() { if(submit_common('.form_data',form_data)) { allow_submit = false; var data = { id: "{$typeInfo.id}", param: form_data.join(',') }; // console.log(data); // _common("{:url('submit_form')}",data,[$('.num').html(res.data),$('.mask').show()]) $.ajax({ url: "{:url('submit_form')}", type: "POST", data: data, dataType: "JSON", success: function (res) { // console.log(res); if (res.code == 1) { $('.num').html(res.data); $('.mask').show() // setTimeout(function() { // window.location.href = res.url; // },1000); } else { _error(res.msg); } }, error: function(XHR,errorMsg,errorType) { _error(errorMsg); }, complete: function(XHR,TS) { allow_submit = true; } }); } // $('.mask').show() }); $('.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) { console.log($(this).find('input').attr('type')); 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 { 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>