其实这是一个很小的功能，和联系人一样。下图是效果图：
由上面的单选决定下面的table是否显示。根据下拉框列表填充下面的发票详情。这里面是这样的，有专门的配送地址表，关联到个人的，你可以选择以前填写好的地址信息，也可以填写新的地址信息。实际上发票那张表和配送地址表就差了两个字段，1，is_open_invoice；2，plane_hotel_no。其实是前台数据校验之后再加上与之关联的订单编号（旅游订单），是否开具发票的标志。
常用发票地址下拉框显示：如果在个人中心下填写或者是已经保存过常用的地址，就可以点击它自动填充，不然的话就选择新地址，下面的输入框就会默认置空。
实现的代码如下：
主要是分为两个部分，一，是填写信息的时候，
controller:
1 public String toTravelOrderDetail(HttpServletRequest request,@RequestParam String orderNo) { 2 3 Map<String, Object> map=travelOrderService.selectOrderDetailByNo(orderNo); 4 request.setAttribute("map",map); 5 6 //取得联系地址（下拉框地址列表，和默认选中的下面的一条地址） 7 List<Delivery> deliveryAll = deliveryService.queryListByUserId(HXTXUtil.getUserId(request)); 8 request.setAttribute("delivery_all", deliveryAll); 9 10 String invoice_id = map.get("invoice_id")+""; 11 if(StringUtil.isNotEmpty(invoice_id)){ 12 request.setAttribute("delivery_info", deliveryService.selectById(invoice_id)); 13 }else{ 14 if (deliveryAll != null && deliveryAll.size() > 0) { 15 request.setAttribute("delivery_info", deliveryAll.get(0)); 16 } 17 } 18 ……
jsp以及写到jsp里面的js:
1 <%--发票信息--%> 2 <section class="panel panel-default space-t"> 3 <div class="panel-heading"> 4 <h4 class="theme-title-a"><strong>发票信息</strong></h4> 5 </div> 6 <div class="panel-body"> 7 <table class="table-form nobold" radio-toggle="iffapiao"> 8 <thead> 9 <tr> 10 <th width="120" class="vertop">是否需要发票</th> 11 <td colspan="3"> 12 <div class="radio-touch" id="iffapiao_div"> 13 <label class="radio-inline space-l"> 14 <input type="radio" name="iffapiao" <c:if test="${!empty map.invoice_id}"> checked="checked" </c:if> onclick="setPost(1)" value="1" radio-status="0"> 需要 15 </label> 16 <label class="radio-inline"> 17 <input type="radio" name="iffapiao" onclick="setPost(2)" <c:if test="${empty map.invoice_id}"> checked="checked" </c:if> value="2" radio-status="1">不需要 18 </label> 19 </div> 20 </td> 21 </tr> 22 </thead> 23 <tbody class="radio-control"> 24 <tr> 25 <th>常用发票地址<a style="color: red">*</a></th> 26 <td colspan="3"> 27 <select class="form-control" onchange="selectAddress(this)"> 28 <option value="">新地址</option> 29 <c:forEach items="${delivery_all}" var="li"> 30 <c:if test="${!empty li.province && !empty li.city && !empty li.region && !empty li.address}"> 31 <option selected value="${li.id}">${li.province},${li.city},${li.region},${li.address}</option> 32 </c:if> 33 </c:forEach> 34 </select> 35 </td> 36 </tr> 37 <tr> 38 <th>发票类型</th> 39 <td> 40 <select class="form-control"> 41 <option>增值税普通票（个人）</option> 42 </select> 43 </td> 44 <th>发票抬头<a style="color: red">*</a></th> 45 <td> 46 <input name="delivery.invoice" type="text" value="${delivery_info.invoice}" class="form-control"/> 47 </td> 48 </tr> 49 <tr> 50 <th>收件人<a style="color: red">*</a></th> 51 <td> 52 <input id ="_deliver-name" type="text" name="delivery.addressee" class="form-control" value="${delivery_info.addressee}"/> 53 </td> 54 <th>联系电话<a style="color: red">*</a></th> 55 <td> 56 <input name="delivery.phone" id="_deliver-mobile" type="text" class="form-control" value="${delivery_info.phone}"/> 57 </td> 58 59 </tr> 60 <tr> 61 <th>所在地区<a style="color: red">*</a></th> 62 <td> 63 <select id="_deliver-province" name="delivery.province" class="form-control"> 64 <option>${delivery_info.province}</option> 65 </select> 66 </td> 67 <td> 68 <select name="delivery.city" id="_deliver-city" class="form-control"> 69 <option>${delivery_info.city}</option> 70 </select> 71 </td> 72 <td> 73 <select name="delivery.region" id="_deliver-district" class="form-control"> 74 <option>${delivery_info.region}</option> 75 </select> 76 </td> 77 78 </tr> 79 <tr> 80 <th>详细地址<a style="color: red">*</a></th> 81 <td colspan="3"> 82 <input type="text" name="delivery.address" id = "_deliver-address" class="form-control" value="${delivery_info.address}"/> 83 </td> 84 </tr> 85 </tbody> 86 </table> 87 </div> 88 </section>
1 var address = []; 2 function selectAddress(o){ 3 address[""] = ["","","","","","","","",""] 4 <c:forEach items="${delivery_all}" var="li"> 5 address["${li.getId()}"] = ['${li.addressee}','${li.postcode}','${li.province}','${li.city}','${li.region}','${li.address}','${li.phone}']; 6 </c:forEach> 7 var key = $(o).val(); 8 if(key == ""){ 9 $("#_deliver-name").val("") 10 $("#_deliver-zipcode").val("") 11 $("#_deliver-address").val("") 12 $("#_deliver-mobile").val("") 13 $("#_deliver-city").val("") 14 $("#_deliver-district").val(""); 15 locationMgr.init({ province: "_deliver-province", city: "_deliver-city", district: "_deliver-district" }); 16 }else{ 17 $("#_deliver-name").val(address[key][0]) 18 $("#_deliver-province").val(address[key][2]) 19 var v = $("#_deliver-province").val(); 20 if(v != address[key][2]){ 21 $("#_deliver-province").append('<option value="'+ address[key][2] +'" SELECTED >'+ address[key][2] +'</option>'); 22 } 23 $("#_deliver-city").html(""); 24 $("#_deliver-district").html(""); 25 $("#_deliver-city").append('<option value="'+ address[key][3] +'" SELECTED >'+ address[key][3] +'</option>'); 26 $("#_deliver-district").append('<option value="'+ address[key][4] +'" SELECTED>'+ address[key][4] +'</option>'); 27 $("#_deliver-address").val(address[key][5]) 28 $("#_deliver-mobile").val(address[key][6]) 29 } 30 }
二，表单提交，以及提交后的保存数据校验，以及，数据保存。
js:
1 function submitInfo(){ 2 var travel = $("#travel_form").serialize(); 3 console.log(travel); 4 $.post(ctx + "/front/travel/order/submitTravelData.do", 5 travel 6 , function (data) { 7 console.log(data) 8 if(data.code == "200"){ 9 location = ctx + "/order/pay.do?orderId=${map.order_no}"; 10 }else{ 11 layer.msg(data.msg) 12 } 13 }) 14 }
impl:
1 public String submitTravelOrder(TravelVo vo){ 2 //验证信息是否正确 3 String delivery_id = null; 4 if(vo != null){ 5 TravelOrderInfo order = travelOrderInfoMapper.selectByNo(vo.getOrderNo()); 6 if(order != null){ 7 TravelProductInfo tpinfo = travelProductInfoMapper.selectByProdNo( order.getProdNo()); 8 …… …… …… 9 //需要发票 10 if("1".equals(vo.getIffapiao())){ 11 if(StringUtil.isEmpty(vo.getDelivery().getInvoice())){ 12 return "请输入发票抬头"; 13 } 14 15 if(StringUtil.isEmpty(vo.getDelivery().getAddressee())){ 16 return "请输入收件人"; 17 } 18 19 if(StringUtil.isEmpty(vo.getDelivery().getPhone())){ 20 return "请输入发票信息的联系电话"; 21 } 22 23 if(!CheckUtil.isMobile(vo.getDelivery().getPhone())){ 24 return "发票信息的联系电话格式不正确"; 25 } 26 27 if(StringUtil.isEmpty(vo.getDelivery().getProvince())){ 28 return "请输入所在地区省份"; 29 } 30 31 if(StringUtil.isEmpty(vo.getDelivery().getCity())){ 32 return "请输入所在市区"; 33 } 34 35 if(StringUtil.isEmpty(vo.getDelivery().getAddress())){ 36 return "请输入详细地址"; 37 } 38 39 delivery_id = UUID.randomUUID().toString().replace("-",""); 40 vo.getDelivery().setId(delivery_id); 41 } 42 43 // List<TravelPassengerInfo> tpilist = travelPassengerInfoMapper.selectByOrderNo(order.getOrderNo()); 44 if("Y".equals(tpinfo.getIsReqPassengers())){ 45 //删除乘客 46 travelPassengerInfoMapper.deleteByOrderNo(order.getOrderNo()); 47 //插入乘客 48 List<TravelPassengerInfo> plist = vo.getPassenger(); 49 for (TravelPassengerInfo item:plist) { 50 item.setTravelOrderNo(order.getOrderNo()); 51 item.setCreateTime(new Date()); 52 travelPassengerInfoMapper.insert(item); 53 } 54 } 55 //删除发票 56 String invoiceId = order.getInvoiceId(); 57 if(invoiceId != null){ 58 deliveryMapper.deleteByPrimaryKey(invoiceId); 59 } 60 //插入发票 61 if("1".equals(vo.getIffapiao())) { 62 vo.getDelivery().setCreateTime(new Date()); 63 deliveryMapper.insert(vo.getDelivery()); 64 65 //删除 66 invoiceMapper.delByPlaneHotelNo(order.getOrderNo()); 67 //发票 68 Invoice iv = new Invoice(); 69 iv.setId(UUID.randomUUID().toString().replaceAll("-","")); 70 iv.setAddressee(vo.getDelivery().getAddressee()); 71 iv.setInvoice(vo.getDelivery().getInvoice()); 72 iv.setPostcode(vo.getDelivery().getPostcode()); 73 iv.setProvince(vo.getDelivery().getProvince()); 74 iv.setCity(vo.getDelivery().getCity()); 75 iv.setRegion(vo.getDelivery().getRegion()); 76 iv.setAddress(vo.getDelivery().getAddress()); 77 iv.setPhone(vo.getDelivery().getPhone()); 78 iv.setTelephone(vo.getDelivery().getTelephone()); 79 //类型(机票:0;酒店:1;火车票:2,旅游：3) 80 iv.setType((short)(3)); 81 iv.setCreateUser(vo.getDelivery().getCreateUser()); 82 iv.setCreateTime(new Date()); 83 iv.setIsOpenInvoice((short)(0)); 84 iv.setPlaneHotelNo(order.getOrderNo()); 85 invoiceMapper.insert(iv); 86 } 87 88 89 //更改订单 90 order.setInvoiceId(delivery_id); 91 //order.setTotalPrice( order.getTotalPrice() ); 92 travelOrderInfoMapper.updateByPrimaryKey(order); 93 94 return null; 95 }else{ 96 return "对不起找不到订单["+vo.getOrderNo()+"]信息!!!"; 97 } 98 }else{ 99 return "对不起找不到订单信息!!!"; 100 } 101 } 102 }
这个过程里面我还发现一些问题：比如，单选控制的div显示隐藏、省市县的三级联动等，是由公共的js提供的初始化方法。
locationMgr.init({ province: "_deliver-province", city: "_deliver-city", district: "_deliver-district" });初始化省市县。
checkbox绑定: <table class="table-form nobold" radio-toggle="iffapiao"> <tbody class="radio-control">;huixing.radioToggle("iffapiao");
layer弹出页面层：
1 function showTrip ( ) { 2 //页面层 3 var h = $(window).height()-100 + "px"; 4 var w = $(window).width()- 200 + "px"; 5 var index = layer.open({ 6 type: 1, 7 title: '行程信息', 8 anim: 2, 9 //skin: 'layui-layer-rim', //加上边框 10 area: [w, h], //宽高 11 content: htmlDecode($('#trip').val()) 12 }); 13 //layer.full(index); 14 } 15 function htmlDecode(text){ 16 //1.首先动态创建一个容器标签元素，如DIV 17 var temp = document.createElement("div"); 18 //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持) 19 temp.innerHTML = text; 20 //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。 21 var output = temp.innerText || temp.textContent; 22 temp = null; 23 return output; 24 }
过滤特殊字符，订单编号： <input type="hidden" id="orderNo" value="${map.order_no}" escapeXml="true"/>
在开会的时候，我很惊讶的是，居然可以通过扒别人的js来做。。不明白。。有待解答