Authored by 徐祁xuqi

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

... ... @@ -26,6 +26,9 @@ var deleteDialog = '<div class="order-delete-confirm">' +
var html = $tpl.html();
var active;
var dialogMessage = '<p class="message-title"><i class="order-icon {{messageIcon}}"></i>{{messageTitle}}</p><p class="message-summary">{{messageSummary}}</p>';
var $dialogEdit = $('#edit-dialog-tpl');
var $addressManage, $province, $city, $county, $selectList, $name, $phone, $address, $telCode, $tel, isProvinceChecked = false;
function cancelFactory(id) {
var options = {
... ... @@ -76,8 +79,60 @@ function cancelFactory(id) {
return new Dialog(options);
}
function showMessgaeDialog(message_icon, message_title, message_summary, cb) {
var template = Handlebars.compile(dialogMessage);
var html = template({messageIcon: message_icon, messageTitle: message_title, messageSummary: message_summary});
var options = {
mask: true,
btns: [
{
id: 'message-sure',
name: '确定',
btnClass: ['message-sure'],
cb: function() {
active.close();
cb && cb();
}
}
],
content: html,
className: 'message-dialog',
};
return new Dialog(options);
}
// 编辑订单
function editOrder(id) {
var options = {
mask: true,
btns: [
{
id: 'edit-sure',
name: '确定',
btnClass: ['edit-sure'],
cb: function() {
saveAddress(id);
}
},
{
id: 'edit-no',
name: '取消',
btnClass: ['edit-no'],
cb: function() {
active.close();
}
}
],
content: $dialogEdit.html(),
className: 'edit-order-dialog'
};
return new Dialog(options);
}
$tpl.remove();
$dialogEdit.remove();
//查看物流
$('.check-logistics').click(function () {
... ... @@ -121,6 +176,11 @@ $('.me-orders, .order-detail').on('click', '.cancel-order', function (e) {
var id = $(this).closest('.order, .order-detail').data('id');
active = deleteOrder(id, this);
active.show();
}).on('click', '.edit-order', function() {
$(this).addClass('edit-order-active');
active = editOrder($(this).closest('.order, .order-detail').data('id'))
active.show();
newAddress(0);
});
function deleteOrder(id, obj) {
// 是否为彻底删除
... ... @@ -170,4 +230,325 @@ function deleteOrder(id, obj) {
className: 'delete-dialog',
};
return new Dialog(options);
}
// 地址操作
function newAddress(id) {
var code, codeId;
var pId = id || 0; //如果没有传id则获取所有省列表
var addressCodeReg = /[0-9]{2}/gi;
$addressManage = $('.edit-order-dialog');
$province = $addressManage.find('select[name="province"]');
$city = $addressManage.find('select[name="city"]');
$county = $addressManage.find('select[name="county"]');
$selectList = $addressManage.find('select[name="province"],select[name="city"]');
$name = $addressManage.find('.inp[name="name"]');
$phone = $addressManage.find('.inp[name="phone"]');
$address = $addressManage.find('.inp[name="address"]');
$telCode = $addressManage.find('.inp[name="tel-code"]');
$tel = $addressManage.find('.inp[name="tel"]');
var validate = validateForm();
code = $province.data("areacode") + '';
codeId = !!code && code.match(addressCodeReg);
//获取省
getAddress({
id: pId,
type: 'getProvince',
selectId: codeId[0]
}, function() {
var provinceId = $province.val();
if (provinceId !== '0') {
isProvinceChecked = true;
//如果获取的省有默认选中项则获取市
getAddress({
id: provinceId,
type: 'getCity',
selectId: '' + codeId[0] + codeId[1]
}, function() {
var cityId = $city.val();
//如果获取的市有默认选中项则获取县
if (cityId !== '0') {
getAddress({
id: cityId,
type: 'getCounty',
selectId: code
});
}
});
} else {
$addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
$addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
}
});
// 发生change事件时获取下一级地址
$selectList.change(function() {
var $this = $(this);
if ($this.attr('name') === 'province') {
if ($this.val() === '0') {
$addressManage.find('select[name="city"]').html('<option value="0">请选择城市</option>');
$addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
} else {
getAddress({
id: $this.val(),
type: 'getCity'
}, function() {
isProvinceChecked = true;
});
$addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
}
}
if ($this.attr('name') === 'city' && isProvinceChecked) {
if ($this.val() === '0') {
$addressManage.find('select[name="county"]').html('<option value="0">请选择区县</option>');
} else {
getAddress({
id: $this.val(),
type: 'getCounty'
});
}
}
});
$name.on('blur', function() {
validate.name($.trim($name.val()));
});
$address.on('blur', function() {
validate.address($.trim($address.val()));
});
$phone.on('blur', function() {
validate.mobile($.trim($phone.val()));
});
$tel.on('blur', function() {
validate.tel($.trim($telCode.val()), $.trim($tel.val()));
})
$county.on('change', function() {
validate.city($province.val(), $city.val(),$county.val());
})
}
/**
* @description: 改函数会返回地址信息
* d {Object} type: 'getProvince'获取省 type: 'getCity'获取城市 type: 'getCounty'获取县
* id: 0 && type: 'getProvince' 获取所有省,默认没有选中项
* id !== 0 && type: 'getProvince' 获取所有省,默认选中用户所在的省
*/
function getAddress(d, callback) {
var $obj;
var selectId = d.selectId;
if (d.type === 'getProvince') {
//url = 'getProvince';
$obj = $province;
} else if (d.type === 'getCity') {
//url = 'getCity';
$obj = $city;
} else if (d.type === 'getCounty') {
//url = 'getCounty';
$obj = $county;
}
$.ajax({
type: 'GET',
url: '/cart/index/getAreaList',
dataType: 'json',
data: {
id: d.id * 1
}
}).then(function(d) {
structureOption($obj, d.data, selectId);
if (typeof callback === 'function') {
callback();
}
});
}
// 构建select下拉选项
function structureOption($obj, data, selectId) {
var i,
optionHtml = '',
defaultOption,
isStar = '';
for (i = 0; i < data.length; i++) {
if (data[i].is_support_express === 'Y') {
isStar = '*';
} else {
isStar = '';
}
if (data[i].id === selectId) {
optionHtml += '<option selected value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
} else {
optionHtml += '<option value="' + data[i].id + '">' + isStar + data[i].caption + '</option>';
}
}
if ($obj.attr('name') === 'province') {
defaultOption = '<option value="0">请选择省份</option>';
} else if ($obj.attr('name') === 'city') {
defaultOption = '<option value="0">请选择城市</option>';
} else if ($obj.attr('name') === 'county') {
defaultOption = '<option value="0">请选择区县</option>';
}
$obj.html(defaultOption + optionHtml);
}
// 保存地址
function saveAddress(id) {
var name = $name.val(),
province = $province.val(),
city = $city.val(),
county = $county.val(),
address = $address.val(),
phone = $phone.val(),
telCode = $telCode.val(),
tel = $tel.val();
// var $err_name = $name.siblings('.error'),
// $err_province = $province.siblings('.error'),
// $err_address = $address.siblings('.error'),
// $err_phone = $phone.siblings('.error'),
// $err_tel = $tel.siblings('.error');
var postData = {
orderCode: id,
userName: name,
areaCode: county,
address: address,
mobile: phone,
phoneCode: telCode,
phoneNum: tel
};
var validate = validateForm();
if (!validate.name(name) || !validate.city(province, city, county) || !validate.address(address) || !validate.mobile(phone) || !validate.tel(telCode, tel)) {
return;
}
$.ajax({
type: 'post',
url: '/home/orders/modifyAddress',
data: postData
}).then(function(d) {
if (d.code === 200) {
active.close();
active = showMessgaeDialog('icon-waiting', '订单修改', '您的订单正在尝试修改,请耐心等待。稍后可在订单详情页查看修改情况!', function() {
location.reload(true);
});
active.show();
} else {
new dialog.Alert(d.message).show();
}
})
}
function validateForm() {
var $err_name = $name.siblings('.error'),
$err_province = $province.siblings('.error'),
$err_address = $address.siblings('.error'),
$err_phone = $phone.siblings('.error'),
$err_tel = $tel.siblings('.error');
var nameReg = /^[\u4e00-\u9fa5]{2,5}$/;
var addressReg = /^[a-zA-Z0-9-#()()\u4e00-\u9fa5]+$/;
var phoneReg = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
var telCodeReg = /^[0-9]{3,4}$/;
var telReg = /^[0-9]{8}$/;
var _right_html = '<i class="order-icon icon-right"></i>';
var _error_html = '<i class="order-icon icon-error"></i><b></b>';
return {
name: function(name) {
if (!nameReg.test(name)) {
$err_name.html(_error_html);
$err_name.find('b').html('真实姓名至少2个中文,最多5个中文');
$err_name.show();
return false;
} else {
$err_name.html(_right_html).show();
return true;
}
},
city: function(province, city, county) {
if (province === '0' || city === '0' || county === '0') {
$err_province.html(_error_html);
$err_province.find('b').html('请填写完整的省市区信息');
$err_province.show();
return false;
} else {
$err_province.html(_right_html).show();
return true;
}
},
address: function(address) {
if (!addressReg.test(address)) {
var message = '详细地址不能为空';
if ($.trim(address) !== '') {
message = '只能包含数字、字母、汉字、#、-、()及其组合';
}
$err_address.html(_error_html);
$err_address.find('b').html(message);
$err_address.show();
return false;
} else {
$err_address.html(_right_html).show();
return true;
}
},
mobile: function(phone) {
if (!phoneReg.test(phone)) {
var message = '手机号码不能为空';
if ($.trim(phone) !== '') {
message = '你输入的联系电话格式不正确';
}
$err_phone.html(_error_html);
$err_phone.find('b').html(message);
$err_phone.show();
return false;
} else {
$err_phone.html(_right_html).show();
return true;
}
},
tel: function(telCode, tel) {
if(telCode === '' && tel === ''){
_right_html = '';
}
if ((!!telCode && !telCodeReg.test(telCode)) || (!!tel && !telReg.test(tel)) ||
(telCodeReg.test(telCode) && !telReg.test(tel)) ||
(!telCodeReg.test(telCode) && telReg.test(tel))) {
$err_tel.html(_error_html);
$err_tel.find('b').html('你输入的电话格式不正确');
$err_tel.show();
return false;
} else {
$err_tel.html(_right_html).show();
return true;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -418,4 +418,191 @@
margin-left:60px;
border-color: #cdcdcd;
}
}
\ No newline at end of file
}
.message-dialog{
width: 350px;
background: #fff;
padding: 20px 30px 35px 30px;
.message-title{
margin-top: 40px;
margin-bottom: 27px;
font-size: 24px;
font-weight: 700;
}
.message-summary{
width: 250px;
margin: 0 auto 22px;
font-size: 14px;
word-wrap: break-word;
line-height: 20px;
}
.btns {
padding: 15px 30px 0;
text-align: center;
.btn {
height: 35px;
font-size: 15px;
line-height: 35px;
}
.message-sure {
width: 130px;
color: #fff;
background: #000;
border: none;
}
}
.close{
top: 15px;
right: 15px;
.iconfont{
font-size: 30px;
}
}
}
.edit-order-dialog {
width: 600px;
background: #fff;
padding: 20px 30px 35px 30px;
header {
font-size: 18px;
padding-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
color: #000;
text-align: left;
}
.close{
top: 15px;
right: 30px;
.iconfont{
font-size: 30px;
}
}
.edit-order-info {
text-align: left;
li {
height: 26px;
margin:20px 0;
line-height: 26px;
font-size: 14px;
}
.form-required{
color: #d70400;
font-family: SimSun;
font-size: 16px;
margin-right: 10px;
vertical-align: -6px;
}
label {
display:inline-block;
width:90px;
text-align:right;
}
.inp{
width:188px;
height: 18px;
line-height:18px;
padding:3px 0;
border:1px solid #e8e8e8;
margin-left: 10px;
text-indent: 5px;
box-sizing: content-box;
}
.w271{
width:271px;
}
.w40{
width:40px;
}
.inp[name='tel']{
margin-left: 0;
}
}
.ml10{
margin-left:10px;
}
select{
height: 25px;
line-height: 25px;
width: 100px;
padding: 0;
border: 1px solid #ccc;
}
.error{
display: none;
margin-left:20px;
color:#db3d50;
font-size:12px;
.icon-error{
margin-right: 8px;
vertical-align:text-bottom;
}
}
.btns {
padding: 15px 30px 0;
text-align: center;
.btn {
height: 35px;
font-size: 15px;
line-height: 35px;
}
.edit-sure {
width: 130px;
color: #fff;
background: #000;
border: none;
}
.edit-no {
margin-left: 30px;
background: #fff;
color: #000;
border-color: #000;
width: 126px;
}
}
.tip{
margin: 20px 0 ;
font-size: 12px;
text-align: left;
color: #db3d50;
}
}
.order-icon{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
background: resolve(/home/order-sprite.png);;
}
.icon-success{
width: 30px;
height: 30px;
vertical-align: -6px;
background-position: 0 0;
}
.icon-waiting{
width: 30px;
height: 30px;
vertical-align: -6px;
background-position: -32px 0 ;
}
.icon-arrow{
width: 11px;
height: 7px;
background-position: -36px -33px;
}
.icon-error{
width: 15px;
height: 15px;
background-position:0 -33px;
}
.icon-recycle{
width: 15px;
height: 17px;
background-position: -18px -33px;
}
... ...