Authored by 徐祁xuqi

Merge remote-tracking branch 'origin/hotfix/editOrder'

@@ -26,6 +26,9 @@ var deleteDialog = '<div class="order-delete-confirm">' + @@ -26,6 +26,9 @@ var deleteDialog = '<div class="order-delete-confirm">' +
26 var html = $tpl.html(); 26 var html = $tpl.html();
27 27
28 var active; 28 var active;
  29 +var dialogMessage = '<p class="message-title"><i class="order-icon {{messageIcon}}"></i>{{messageTitle}}</p><p class="message-summary">{{messageSummary}}</p>';
  30 +var $dialogEdit = $('#edit-dialog-tpl');
  31 +var $addressManage, $province, $city, $county, $selectList, $name, $phone, $address, $telCode, $tel, isProvinceChecked = false;
29 32
30 function cancelFactory(id) { 33 function cancelFactory(id) {
31 var options = { 34 var options = {
@@ -76,8 +79,60 @@ function cancelFactory(id) { @@ -76,8 +79,60 @@ function cancelFactory(id) {
76 79
77 return new Dialog(options); 80 return new Dialog(options);
78 } 81 }
  82 +function showMessgaeDialog(message_icon, message_title, message_summary, cb) {
  83 + var template = Handlebars.compile(dialogMessage);
  84 + var html = template({messageIcon: message_icon, messageTitle: message_title, messageSummary: message_summary});
  85 + var options = {
  86 + mask: true,
  87 + btns: [
  88 + {
  89 + id: 'message-sure',
  90 + name: '确定',
  91 + btnClass: ['message-sure'],
  92 + cb: function() {
  93 + active.close();
  94 + cb && cb();
  95 + }
  96 + }
  97 + ],
  98 + content: html,
  99 + className: 'message-dialog',
  100 + };
  101 +
  102 + return new Dialog(options);
  103 +
  104 +}
  105 +// 编辑订单
  106 +function editOrder(id) {
  107 + var options = {
  108 + mask: true,
  109 + btns: [
  110 + {
  111 + id: 'edit-sure',
  112 + name: '确定',
  113 + btnClass: ['edit-sure'],
  114 + cb: function() {
  115 + saveAddress(id);
  116 + }
  117 + },
  118 + {
  119 + id: 'edit-no',
  120 + name: '取消',
  121 + btnClass: ['edit-no'],
  122 + cb: function() {
  123 + active.close();
  124 + }
  125 + }
  126 + ],
  127 + content: $dialogEdit.html(),
  128 + className: 'edit-order-dialog'
  129 + };
  130 +
  131 + return new Dialog(options);
  132 +}
79 133
80 $tpl.remove(); 134 $tpl.remove();
  135 +$dialogEdit.remove();
81 136
82 //查看物流 137 //查看物流
83 $('.check-logistics').click(function () { 138 $('.check-logistics').click(function () {
@@ -121,6 +176,11 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function (e) { @@ -121,6 +176,11 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function (e) {
121 var id = $(this).closest('.order, .order-detail').data('id'); 176 var id = $(this).closest('.order, .order-detail').data('id');
122 active = deleteOrder(id, this); 177 active = deleteOrder(id, this);
123 active.show(); 178 active.show();
  179 +}).on('click', '.edit-order', function() {
  180 + $(this).addClass('edit-order-active');
  181 + active = editOrder($(this).closest('.order, .order-detail').data('id'))
  182 + active.show();
  183 + newAddress(0);
124 }); 184 });
125 function deleteOrder(id, obj) { 185 function deleteOrder(id, obj) {
126 // 是否为彻底删除 186 // 是否为彻底删除
@@ -170,4 +230,325 @@ function deleteOrder(id, obj) { @@ -170,4 +230,325 @@ function deleteOrder(id, obj) {
170 className: 'delete-dialog', 230 className: 'delete-dialog',
171 }; 231 };
172 return new Dialog(options); 232 return new Dialog(options);
  233 +}
  234 +// 地址操作
  235 +function newAddress(id) {
  236 + var code, codeId;
  237 +
  238 + var pId = id || 0; //如果没有传id则获取所有省列表
  239 +
  240 + var addressCodeReg = /[0-9]{2}/gi;
  241 +
  242 + $addressManage = $('.edit-order-dialog');
  243 + $province = $addressManage.find('select[name="province"]');
  244 + $city = $addressManage.find('select[name="city"]');
  245 + $county = $addressManage.find('select[name="county"]');
  246 + $selectList = $addressManage.find('select[name="province"],select[name="city"]');
  247 + $name = $addressManage.find('.inp[name="name"]');
  248 + $phone = $addressManage.find('.inp[name="phone"]');
  249 + $address = $addressManage.find('.inp[name="address"]');
  250 + $telCode = $addressManage.find('.inp[name="tel-code"]');
  251 + $tel = $addressManage.find('.inp[name="tel"]');
  252 +
  253 + var validate = validateForm();
  254 +
  255 + code = $province.data("areacode") + '';
  256 + codeId = !!code && code.match(addressCodeReg);
  257 +
  258 + //获取省
  259 + getAddress({
  260 + id: pId,
  261 + type: 'getProvince',
  262 + selectId: codeId[0]
  263 + }, function() {
  264 +
  265 + var provinceId = $province.val();
  266 +
  267 + if (provinceId !== '0') {
  268 + isProvinceChecked = true;
  269 +
  270 + //如果获取的省有默认选中项则获取市
  271 + getAddress({
  272 + id: provinceId,
  273 + type: 'getCity',
  274 + selectId: '' + codeId[0] + codeId[1]
  275 + }, function() {
  276 +
  277 + var cityId = $city.val();
  278 +
  279 + //如果获取的市有默认选中项则获取县
  280 + if (cityId !== '0') {
  281 + getAddress({
  282 + id: cityId,
  283 + type: 'getCounty',
  284 + selectId: code
  285 + });
  286 + }
  287 + });
  288 + } else {
  289 + $addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
  290 + $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
  291 + }
  292 + });
  293 +
  294 + // 发生change事件时获取下一级地址
  295 + $selectList.change(function() {
  296 +
  297 + var $this = $(this);
  298 +
  299 + if ($this.attr('name') === 'province') {
  300 +
  301 + if ($this.val() === '0') {
  302 + $addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
  303 + $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
  304 + } else {
  305 + getAddress({
  306 + id: $this.val(),
  307 + type: 'getCity'
  308 + }, function() {
  309 + isProvinceChecked = true;
  310 + });
  311 + $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
  312 + }
  313 + }
  314 +
  315 + if ($this.attr('name') === 'city' && isProvinceChecked) {
  316 +
  317 + if ($this.val() === '0') {
  318 + $addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
  319 + } else {
  320 + getAddress({
  321 + id: $this.val(),
  322 + type: 'getCounty'
  323 + });
  324 + }
  325 + }
  326 + });
  327 + $name.on('blur', function() {
  328 + validate.name($.trim($name.val()));
  329 + });
  330 + $address.on('blur', function() {
  331 + validate.address($.trim($address.val()));
  332 + });
  333 + $phone.on('blur', function() {
  334 + validate.mobile($.trim($phone.val()));
  335 + });
  336 + $tel.on('blur', function() {
  337 + validate.tel($.trim($telCode.val()), $.trim($tel.val()));
  338 + })
  339 + $county.on('change', function() {
  340 + validate.city($province.val(), $city.val(),$county.val());
  341 + })
  342 +}
  343 +/**
  344 + * @description: 改函数会返回地址信息
  345 + * d {Object} type: 'getProvince'获取省 type: 'getCity'获取城市 type: 'getCounty'获取县
  346 + * id: 0 && type: 'getProvince' 获取所有省,默认没有选中项
  347 + * id !== 0 && type: 'getProvince' 获取所有省,默认选中用户所在的省
  348 + */
  349 +function getAddress(d, callback) {
  350 +
  351 + var $obj;
  352 + var selectId = d.selectId;
  353 +
  354 + if (d.type === 'getProvince') {
  355 +
  356 + //url = 'getProvince';
  357 + $obj = $province;
  358 + } else if (d.type === 'getCity') {
  359 +
  360 + //url = 'getCity';
  361 + $obj = $city;
  362 + } else if (d.type === 'getCounty') {
  363 +
  364 + //url = 'getCounty';
  365 + $obj = $county;
  366 + }
  367 +
  368 + $.ajax({
  369 + type: 'GET',
  370 + url: '/cart/index/getAreaList',
  371 + dataType: 'json',
  372 + data: {
  373 + id: d.id * 1
  374 + }
  375 + }).then(function(d) {
  376 +
  377 + structureOption($obj, d.data, selectId);
  378 +
  379 + if (typeof callback === 'function') {
  380 + callback();
  381 + }
  382 +
  383 + });
  384 +}
  385 +
  386 +// 构建select下拉选项
  387 +function structureOption($obj, data, selectId) {
  388 +
  389 + var i,
  390 + optionHtml = '',
  391 + defaultOption,
  392 + isStar = '';
  393 +
  394 + for (i = 0; i < data.length; i++) {
  395 +
  396 + if (data[i].is_support_express === 'Y') {
  397 + isStar = '*';
  398 + } else {
  399 + isStar = '';
  400 + }
  401 +
  402 + if (data[i].id === selectId) {
  403 + optionHtml += '<option selected value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
  404 + } else {
  405 + optionHtml += '<option value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
  406 + }
  407 + }
  408 +
  409 +
  410 + if ($obj.attr('name') === 'province') {
  411 + defaultOption = '<option value="0">请选择省份</option>';
  412 + } else if ($obj.attr('name') === 'city') {
  413 + defaultOption = '<option value="0">请选择城市</option>';
  414 +
  415 + } else if ($obj.attr('name') === 'county') {
  416 + defaultOption = '<option value="0">请选择区县</option>';
  417 + }
  418 +
  419 + $obj.html(defaultOption + optionHtml);
  420 +}
  421 +
  422 +// 保存地址
  423 +function saveAddress(id) {
  424 + var name = $name.val(),
  425 + province = $province.val(),
  426 + city = $city.val(),
  427 + county = $county.val(),
  428 + address = $address.val(),
  429 + phone = $phone.val(),
  430 + telCode = $telCode.val(),
  431 + tel = $tel.val();
  432 +
  433 + // var $err_name = $name.siblings('.error'),
  434 + // $err_province = $province.siblings('.error'),
  435 + // $err_address = $address.siblings('.error'),
  436 + // $err_phone = $phone.siblings('.error'),
  437 + // $err_tel = $tel.siblings('.error');
  438 +
  439 + var postData = {
  440 + orderCode: id,
  441 + userName: name,
  442 + areaCode: county,
  443 + address: address,
  444 + mobile: phone,
  445 + phoneCode: telCode,
  446 + phoneNum: tel
  447 + };
  448 + var validate = validateForm();
  449 + if (!validate.name(name) || !validate.city(province, city, county) || !validate.address(address) || !validate.mobile(phone) || !validate.tel(telCode, tel)) {
  450 + return;
  451 + }
  452 +
  453 + $.ajax({
  454 + type: 'post',
  455 + url: '/home/orders/modifyAddress',
  456 + data: postData
  457 + }).then(function(d) {
  458 + if (d.code === 200) {
  459 + active.close();
  460 + active = showMessgaeDialog('icon-waiting', '订单修改', '您的订单正在尝试修改,请耐心等待。稍后可在订单详情页查看修改情况!', function() {
  461 + location.reload(true);
  462 + });
  463 + active.show();
  464 + } else {
  465 + new dialog.Alert(d.message).show();
  466 + }
  467 + })
  468 +}
  469 +function validateForm() {
  470 + var $err_name = $name.siblings('.error'),
  471 + $err_province = $province.siblings('.error'),
  472 + $err_address = $address.siblings('.error'),
  473 + $err_phone = $phone.siblings('.error'),
  474 + $err_tel = $tel.siblings('.error');
  475 +
  476 + var nameReg = /^[\u4e00-\u9fa5]{2,5}$/;
  477 + var addressReg = /^[a-zA-Z0-9-#()()\u4e00-\u9fa5]+$/;
  478 + var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  479 + var telCodeReg = /^[0-9]{3,4}$/;
  480 + var telReg = /^[0-9]{8}$/;
  481 + var _right_html = '<i class="order-icon icon-right"></i>';
  482 + var _error_html = '<i class="order-icon icon-error"></i><b></b>';
  483 +
  484 + return {
  485 + name: function(name) {
  486 + if (!nameReg.test(name)) {
  487 + $err_name.html(_error_html);
  488 + $err_name.find('b').html('真实姓名至少2个中文,最多5个中文');
  489 + $err_name.show();
  490 + return false;
  491 + } else {
  492 + $err_name.html(_right_html).show();
  493 + return true;
  494 + }
  495 + },
  496 + city: function(province, city, county) {
  497 + if (province === '0' || city === '0' || county === '0') {
  498 + $err_province.html(_error_html);
  499 + $err_province.find('b').html('请填写完整的省市区信息');
  500 + $err_province.show();
  501 + return false;
  502 + } else {
  503 + $err_province.html(_right_html).show();
  504 + return true;
  505 + }
  506 + },
  507 + address: function(address) {
  508 + if (!addressReg.test(address)) {
  509 + var message = '详细地址不能为空';
  510 + if ($.trim(address) !== '') {
  511 + message = '只能包含数字、字母、汉字、#、-、()及其组合';
  512 + }
  513 + $err_address.html(_error_html);
  514 + $err_address.find('b').html(message);
  515 + $err_address.show();
  516 + return false;
  517 + } else {
  518 + $err_address.html(_right_html).show();
  519 + return true;
  520 + }
  521 + },
  522 + mobile: function(phone) {
  523 + if (!phoneReg.test(phone)) {
  524 + var message = '手机号码不能为空';
  525 + if ($.trim(phone) !== '') {
  526 + message = '你输入的联系电话格式不正确';
  527 + }
  528 + $err_phone.html(_error_html);
  529 + $err_phone.find('b').html(message);
  530 + $err_phone.show();
  531 + return false;
  532 + } else {
  533 + $err_phone.html(_right_html).show();
  534 + return true;
  535 + }
  536 + },
  537 + tel: function(telCode, tel) {
  538 + if(telCode === '' && tel === ''){
  539 + _right_html = '';
  540 + }
  541 + if ((!!telCode && !telCodeReg.test(telCode)) || (!!tel && !telReg.test(tel)) ||
  542 + (telCodeReg.test(telCode) && !telReg.test(tel)) ||
  543 + (!telCodeReg.test(telCode) && telReg.test(tel))) {
  544 + $err_tel.html(_error_html);
  545 + $err_tel.find('b').html('你输入的电话格式不正确');
  546 + $err_tel.show();
  547 + return false;
  548 + } else {
  549 + $err_tel.html(_right_html).show();
  550 + return true;
  551 + }
  552 + }
  553 + }
173 } 554 }
@@ -418,4 +418,191 @@ @@ -418,4 +418,191 @@
418 margin-left:60px; 418 margin-left:60px;
419 border-color: #cdcdcd; 419 border-color: #cdcdcd;
420 } 420 }
421 -}  
  421 +}
  422 +.message-dialog{
  423 + width: 350px;
  424 + background: #fff;
  425 + padding: 20px 30px 35px 30px;
  426 + .message-title{
  427 + margin-top: 40px;
  428 + margin-bottom: 27px;
  429 + font-size: 24px;
  430 + font-weight: 700;
  431 + }
  432 + .message-summary{
  433 + width: 250px;
  434 + margin: 0 auto 22px;
  435 + font-size: 14px;
  436 + word-wrap: break-word;
  437 + line-height: 20px;
  438 + }
  439 + .btns {
  440 + padding: 15px 30px 0;
  441 + text-align: center;
  442 +
  443 + .btn {
  444 + height: 35px;
  445 + font-size: 15px;
  446 + line-height: 35px;
  447 + }
  448 +
  449 + .message-sure {
  450 + width: 130px;
  451 + color: #fff;
  452 + background: #000;
  453 + border: none;
  454 + }
  455 + }
  456 + .close{
  457 + top: 15px;
  458 + right: 15px;
  459 + .iconfont{
  460 + font-size: 30px;
  461 + }
  462 + }
  463 +}
  464 +.edit-order-dialog {
  465 + width: 600px;
  466 + background: #fff;
  467 + padding: 20px 30px 35px 30px;
  468 + header {
  469 + font-size: 18px;
  470 + padding-bottom: 20px;
  471 + border-bottom: 1px solid #e8e8e8;
  472 + color: #000;
  473 + text-align: left;
  474 + }
  475 + .close{
  476 + top: 15px;
  477 + right: 30px;
  478 + .iconfont{
  479 + font-size: 30px;
  480 + }
  481 + }
  482 + .edit-order-info {
  483 + text-align: left;
  484 +
  485 + li {
  486 + height: 26px;
  487 + margin:20px 0;
  488 + line-height: 26px;
  489 + font-size: 14px;
  490 + }
  491 + .form-required{
  492 + color: #d70400;
  493 + font-family: SimSun;
  494 + font-size: 16px;
  495 + margin-right: 10px;
  496 + vertical-align: -6px;
  497 + }
  498 + label {
  499 + display:inline-block;
  500 + width:90px;
  501 + text-align:right;
  502 + }
  503 +
  504 + .inp{
  505 + width:188px;
  506 + height: 18px;
  507 + line-height:18px;
  508 + padding:3px 0;
  509 + border:1px solid #e8e8e8;
  510 + margin-left: 10px;
  511 + text-indent: 5px;
  512 + box-sizing: content-box;
  513 + }
  514 + .w271{
  515 + width:271px;
  516 + }
  517 + .w40{
  518 + width:40px;
  519 + }
  520 + .inp[name='tel']{
  521 + margin-left: 0;
  522 + }
  523 + }
  524 + .ml10{
  525 + margin-left:10px;
  526 + }
  527 + select{
  528 + height: 25px;
  529 + line-height: 25px;
  530 + width: 100px;
  531 + padding: 0;
  532 + border: 1px solid #ccc;
  533 + }
  534 + .error{
  535 + display: none;
  536 + margin-left:20px;
  537 + color:#db3d50;
  538 + font-size:12px;
  539 + .icon-error{
  540 + margin-right: 8px;
  541 + vertical-align:text-bottom;
  542 + }
  543 + }
  544 + .btns {
  545 + padding: 15px 30px 0;
  546 + text-align: center;
  547 +
  548 + .btn {
  549 + height: 35px;
  550 + font-size: 15px;
  551 + line-height: 35px;
  552 + }
  553 +
  554 + .edit-sure {
  555 + width: 130px;
  556 + color: #fff;
  557 + background: #000;
  558 + border: none;
  559 + }
  560 +
  561 + .edit-no {
  562 + margin-left: 30px;
  563 + background: #fff;
  564 + color: #000;
  565 + border-color: #000;
  566 + width: 126px;
  567 + }
  568 + }
  569 + .tip{
  570 + margin: 20px 0 ;
  571 + font-size: 12px;
  572 + text-align: left;
  573 + color: #db3d50;
  574 + }
  575 +}
  576 +.order-icon{
  577 + display: inline-block;
  578 + vertical-align: middle;
  579 + margin-right: 10px;
  580 + background: resolve(/home/order-sprite.png);;
  581 +}
  582 +.icon-success{
  583 + width: 30px;
  584 + height: 30px;
  585 + vertical-align: -6px;
  586 + background-position: 0 0;
  587 +}
  588 +.icon-waiting{
  589 + width: 30px;
  590 + height: 30px;
  591 + vertical-align: -6px;
  592 + background-position: -32px 0 ;
  593 +}
  594 +.icon-arrow{
  595 + width: 11px;
  596 + height: 7px;
  597 + background-position: -36px -33px;
  598 +}
  599 +.icon-error{
  600 + width: 15px;
  601 + height: 15px;
  602 + background-position:0 -33px;
  603 +}
  604 +.icon-recycle{
  605 + width: 15px;
  606 + height: 17px;
  607 + background-position: -18px -33px;
  608 +}