Files
littleTiger/template/pc/rainbow/user/address_list.html

324 lines
15 KiB
HTML
Raw Permalink Normal View History

2019-02-28 19:48:21 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地址管理-{$tpshop_config['shop_info_store_title']}</title>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/tpshop.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/myaccount.css"/>
<script src="__STATIC__/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__PUBLIC__/js/layer/layer.js"></script>
</head>
<body class="bg-f5">
<include file="user/header"/>
<div class="home-index-middle">
<div class="w1224">
<div class="g-crumbs">
<a href="{:U('Home/User/index')}">我的商城</a>
<i class="litt-xyb"></i>
<span>地址管理</span>
</div>
<div class="home-main">
<include file="user/menu"/>
<div class="ri-menu fr">
<div class="menumain p">
<div class="goodpiece">
<h1>地址管理</h1>
<a class="address" href="javascript:;"><span class="co_blue">增加新地址</span></a>
</div>
<div class="grou_num_list address_list_jl ma-to-20">
<ul class="grou_tite">
<li class="sx2"><span>收货人</span></li>
<li class="sx1"><span>收货地址</span></li>
<li class="sx3"><span>联系电话</span></li>
<li class="sx5"><span>操作</span></li>
</ul>
<volist name="lists" id="list">
<ul class="add_conta">
<li class="sx2">
<span>{$list.consignee}</span>
</li>
<li class="sx1"><span>{$region_list[$list['province']]}</span><span>{$region_list[$list['city']]}</span><span>{$region_list[$list['district']]}</span><span>{$region_list[$list['twon']]}{$list.address}</span>
</li>
<li class="sx3"><span>{$list.mobile}</span></li>
<li class="sx5">
<if condition="$list['is_default'] neq 1">
<span><a class="address_set_default" data-address-id="{$list['address_id']}">设为默认</a></span>
<else/>
<span style="font-size:14px;background:#ffaa45;padding:2px;font-weight:400;"><a>默认地址</a></span>
</if>
<a class="address co_blue" data-address-id="{$list['address_id']}">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="address_delete co_blue" data-address-id="{$list['address_id']}">删除</a></li>
</ul>
</volist>
</div>
<p class="gp_num2">已保存<em class="red">{$lists|count}</em>条地址,还可以保存<em class="red">
<php>echo 20-count($lists);</php>
</em>条地址
</p>
</div>
</div>
</div>
</div>
</div>
<!--编辑地址弹窗-s--->
<div class="ui-dialog infom-dia" style="width: 700px">
<form id="address_form">
<input name="address_id" type="hidden" value="0">
<div class="ui-dialog-title">
<span>新增收货地址</span>
<a class="ui-dialog-close" title="关闭">
<span class="ui-icon ui-icon-delete"></span>
</a>
</div>
<div class="ui-dialog-content" style="height: 600px;width: 700px">
<div class="invoice-dialog">
<div class="zinvoice-tips">
<!--<span class="tip-cont">错误信息</span>-->
</div>
<div class="ui-switchable-panel">
<div class="invoice_title p">
<span class="label"><span class="red">*</span>收货人:</span>
<div class="fl">
<input class="invoice_tt" name="consignee" type="text" value="" maxlength="12"/>
<span class="err" id="err_consignee"></span>
</div>
</div>
<div class="invoice_title p">
<span class="label"><span class="red">*</span>手机或固定电话:</span>
<div class="fl">
<input class="invoice_tt" name="mobile" type="text" value=""
placeholder="固话号码格式:xx-xx(例如: 0755-86140485)" onblur="verifyMobile()" maxlength="15"/>
<span class="err" id="err_mobile"></span>
</div>
</div>
<div class="invoice_title p">
<span class="label"><span class="red">*</span>收货地址:</span>
<span class="err" id="err_province"></span>
<span class="err" id="err_city"></span>
<span class="err" id="err_district"></span>
<select class="di-bl fl seauii" name="province" id="province" onChange="get_city(this,0)">
<option value="0">请选择</option>
</select>
<select class="di-bl fl seauii" name="city" id="city" onChange="get_area(this)">
<option value="0">请选择</option>
</select>
<select class="di-bl fl seauii" name="district" id="district" onChange="get_twon(this)">
<option value="0">请选择</option>
</select>
<select class="di-bl fl seauii" name="twon" id="twon" style="display:none;">
</select>
</div>
<div class="invoice_title p">
<span class="label"><span class="red">*</span>详细地址:</span>
<span class="err" id="err_address"></span>
<div class="fl">
<input class="invoice_tt" name="address" type="text" placeholder="详细地址" maxlength="100"/>
</div>
</div>
<div class="invoice_title p">
<span class="label">邮编:</span>
<div class="fl">
<input class="invoice_tt" name="zipcode" type="text" value=""
onKeyUp="this.value=this.value.replace(/[^\d]/g,'')" maxlength="6"/>
<span class="err" id="err_zipcode"></span>
</div>
</div>
<div class="invoice_title p">
<span class="label">&nbsp;</span>
<div class="fl">
<div class="op-btns invoice_sendwithgift">
<button id="address_submit" type="button" class="btn-1">保存</button>
<a onclick="$('.ui-dialog-close').trigger('click');" class="btn-9">取消</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!--编辑地址弹窗-e--->
<div class="ui-mask"></div>
<!--footer-s-->
<div class="footer p">
<include file="public/footer"/>
</div>
<!--footer-e-->
<script type="text/javascript">
$(document).ready(function () {
get_province();
});
//验证手机
function verifyMobile(){
var phone = $("input[name='mobile']").val();
var isPhone = /^1[34578]\d{9}$/;//手机号码
var isMob= /^0?1[3|4|5|8][0-9]\d{8}$/;// 座机格式
if(!isMob.test(phone) && !isPhone.test(phone)){
$('#err_mobile').text('号码有误,请重填');
return false;
}else{
$('#err_mobile').text('');
}
}
//新增编辑地址
$(function () {
//新增编辑弹窗事件
$(document).on("click", '.address', function (e) {
var dh = $(document).height();
var dw = $(document).width();
$('.ui-mask').height(dh).width(dw).show();
$('.ui-dialog').show();
var address_id = $(this).data('address-id');
if (address_id > 0) {
$("input[name='address_id']").val(address_id);
$.ajax({
type: "POST",
url: "{:U('Home/User/address')}",
data: {address_id: address_id},
dataType: 'json',
success: function (data) {
if (data.status == 1) {
$("input[name='consignee']").val(data.result.user_address.consignee);
$("input[name='address']").val(data.result.user_address.address);
$("input[name='mobile']").val(data.result.user_address.mobile);
$("input[name='zipcode']").val(data.result.user_address.zipcode);
var city_list_option_html = '<option value="0">请选择</option>';
var district_list_option_html = '<option value="0">请选择</option>';
var twon_list_option_html = '<option value="0">请选择</option>';
$.each(data.result.city_list, function (n, value) {
city_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
});
$('#city').html(city_list_option_html).val(data.result.user_address.city);
$.each(data.result.district_list, function (n, value) {
district_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
});
$('#district').html(district_list_option_html).val(data.result.user_address.district);
$.each(data.result.twon_list, function (n, value) {
twon_list_option_html += '<option value="' + value.id + '">' + value.name + '</option>';
});
if (data.result.twon_list.length > 0) {
$('#twon').html(twon_list_option_html).val(data.result.user_address.twon).show();
}
$("#province").val(data.result.user_address.province);
} else {
layer.open({icon: 2, content: data.msg, time: 1000});
}
}
});
} else {
$("input[name='address_id']").val(0);
$("input[name='consignee']").val('');
$("input[name='address']").val('');
$("input[name='mobile']").val('');
$("input[name='zipcode']").val('');
$("#province").val(0);
$("#city").empty().html('<option value="0">请选择</option>');
$("#district").empty().html('<option value="0">请选择</option>');
$("#twon").empty().html('<option value="0">请选择</option>').hide();
}
})
//关闭弹窗事件
$(document).on("click", '.ui-dialog-close', function (e) {
$('.ui-mask').hide();
$('.ui-dialog').hide();
$('.err').hide();
})
//地址提交
$(document).on("click", '#address_submit', function (e) {
$(this).prop('disabled',true);
var that = $(this);
$.ajax({
type: "POST",
url: "{:U('Home/User/addressSave')}",
data: $('#address_form').serialize(),
dataType: 'json',
success: function (data) {
that.prop('disabled',false);
if (data.status == 1) {
location.reload();
} else {
layer.open({
icon: 2, content: data.msg, time: 1000, end: function () {
$.each(data.result, function (index, item) {
$('#err_' + index).text(item).show();
});
}
});
}
}
});
})
})
//设置默认地址
$(function () {
$(document).on("click", '.address_set_default', function (e) {
var address_id = $(this).data('address-id');
$.ajax({
type: "POST",
url: "{:U('Home/User/addressSetDefault')}",
data: {address_id: address_id},
dataType: 'json',
success: function (data) {
if (data.status == 1) {
location.reload();
} else {
layer.open({icon: 2, content: data.msg, time: 1000});
}
}
});
})
})
//删除地址
$(function () {
$(document).on("click", '.address_delete', function (e) {
var address_id = $(this).data('address-id');
$.ajax({
type: "POST",
url: "{:U('Home/User/addressDelete')}",
data: {address_id: address_id},
dataType: 'json',
success: function (data) {
if (data.status == 1) {
location.reload();
} else {
layer.open({icon: 2, content: data.msg, time: 1000});
}
}
});
})
})
//获取省列表
function get_province() {
$.ajax({
type: "GET",
url: "{:U('Home/Api/getProvince')}",
dataType: 'json',
success: function (data) {
if (data.status == 1) {
var option_html = '<option value="0">请选择</option>';
$.each(data.result, function (n, value) {
option_html += '<option value="' + value.id + '">' + value.name + '</option>';
});
$('#province').html(option_html);
} else {
layer.msg(data.msg, {icon: 2});
}
}
});
}
</script>
</body>
</html>