dcloud编辑收货地址mui
2017-01-15 00:00
176 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/mui.picker.css" rel="stylesheet" />
<link href="../../css/mui.poppicker.css" rel="stylesheet" />
<style>
.mui-bar.mui-bar-nav .savebtn{position: absolute; right:3%; top: 10px;}
.delete-address{float: right; margin-right: 10px; color:red;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="editpage">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">编辑地址</h1>
</header>
<form class="mui-input-group" style="margin-top: 50px; padding-bottom: 40px;">
<div class="mui-input-row">
<label>收货人</label>
<input type="text" required="required" class="mui-input-clear" placeholder="请输入姓名" id="consignee">
</div>
<div class="mui-input-row">
<label>联系电话</label>
<input type="text" required="required" maxlength="11" class="mui-input-clear" placeholder="请输入电话号码" id="phone">
</div>
<div class="mui-input-row">
<label>选择地区</label>
<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button' style="width: 30%;padding: 8px 0px;float: left;margin-top:5px">地区选择</button>
<input type="hidden" name="" id="" value="">
</div>
<div class="mui-input-row">
<label>所在地区</label>
<div id='cityResult3' style="float: left;height: 48px;line-height: 48px;"></div>
</div>
<div class="mui-input-row">
<label>详细地址</label>
<input type="text" class="mui-input-clear" placeholder="请输入详细地址" id="address">
</div>
<div class="mui-input-row">
<label>邮编</label>
<input type="text" class="mui-input-clear" placeholder="请输入详细地址" id="zipcode">
</div>
<button style="margin-top: 50px;" type="submit" class="mui-btn mui-btn-blue mui-btn-block" id="edit">完成</button>
</form>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.picker.js"></script>
<script src="../../js/mui.poppicker.js"></script>
<script src="../../js/areaJson.js"></script>
<script type="text/javascript">
mui.init({
beforeback: function(){
//获得列表界面的webview
var list = plus.webview.getWebviewById('ucenter_address');
//触发列表界面的自定义事件（refresh）,从而进行数据刷新
mui.fire(list,'refresh');
//返回true，继续页面关闭逻辑
return true;
}
});
var isOrderCome;//判断是从哪里点击进入的
mui.plusReady(function(){
var self = plus.webview.currentWebview();
var addressId = self.idss.user_receipt_address_id;
var userId = self.idss.user_id;
var consignee = self.idss.consignee;
var province = self.idss.province;
var city = self.idss.city;
var district = self.idss.district;
var address = self.idss.address;
var phone = self.idss.phone;
var zipcode = self.idss.zipcode;
var isDefault = self.idss.is_default;
var provinceAreaId = self.idss.province_area_id;
var cityAreaId = self.idss.city_area_id;
var districtAreaId = self.idss.district_area_id;
isOrderCome = self.isOrderCome;
var cityPicker3 = new mui.PopPicker({
layer: 3
});
cityPicker3.setData(areas);
var showCityPickerButton = document.getElementById('showCityPicker3');
var cityResult3 = document.getElementById('cityResult3');
cityResult3.innerHTML = "<span id='province' data-province-area-id='"+provinceAreaId+"'>" + province + " </span>"
+"<span id='city' data-city-area-id='"+cityAreaId+"'>" + city + " </span>"
+"<span id='district' data-district-area-id='"+districtAreaId+"'>" + district + " </span>";
showCityPickerButton.addEventListener('tap', function(event) {
setTimeout(function(){
cityPicker3.show(function(items) {
var provinceText = (items[0] || {}).value;
var cityText = (items[1] || {}).value;
var districtText = (items[2] || {}).value;
cityResult3.innerHTML = "<span id='province' data-province-area-id='"+(items[0] || {}).value+"'>"+(items[0] || {}).text+" </span>"
+"<span id='city' data-city-area-id='"+(items[1] || {}).value+"'>"+(items[1] || {}).text+" </span>"
+"<span id='district' data-district-area-id='"+(items[2] || {}).value+"'>"+(items[2] || {}).text+" </span>";
//返回 false 可以阻止选择框的关闭
//return false;
});
},200)
}, false);
var consigneeC = document.getElementById("consignee");
var phoneC = document.getElementById("phone");
var provinceC = document.getElementById("province");
var cityC = document.getElementById("city");
var districtC = document.getElementById("district");
var addressC = document.getElementById("address");
var zipcodeC = document.getElementById("zipcode");
setTimeout(function(){
mui.ajax('http://',{
data:{
access_token:'WyJOdz09IiwiTVRRNE5ERXlPRFUwTnc9PSIsIk1USTVOakF3TUE9PSJd',
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
//headers:{'Content-Type':'application/json'},
success:function(data){
//console.log(JSON.stringify(data));
if(data.code == 1){
//console.log(addressId)
consigneeC.value = consignee;
phoneC.value = phone;
addressC.value = address;
zipcodeC.value = zipcode;
}else{
mui.toast('失败');
}
},
error:function(xhr,type,errorThrown){
//异常处理；
mui.toast('系统异常');
}
});
},500);
});
mui(document.body).on('tap', '#edit', function(e) {
var self = plus.webview.currentWebview();
var addressId = self.idss.user_receipt_address_id;
mui(this).button('loading');
var consignee = document.getElementById("consignee").value;
var phone = document.getElementById("phone").value;
var province = document.getElementById("province").getAttribute("data-province-area-id");
//var provinceIndex = province.selectedIndex;
//var provinceText = province.options[provinceIndex].value;
var city = document.getElementById("city").getAttribute("data-city-area-id");
var district = document.getElementById("district").getAttribute("data-district-area-id");
var address = document.getElementById("address").value;
var zipcode = document.getElementById("zipcode").value;
setTimeout(function() {
mui.ajax('http://',{
data:{
access_token:'WyJOdz09IiwiTVRRNE16WTRNakEwT1E9PSIsIk1USTVOakF3TUE9PSJd',
consignee:consignee,
phone: phone,
province:province,
city:city,
district:district,
address:address,
zipcode:zipcode,
user_receipt_address_id:addressId
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
//headers:{'Content-Type':'application/json'},
success:function(data){
console.log(JSON.stringify(data));
if(data.code == 1){
mui.toast('编辑成功');
if(isOrderCome){
mui.back();
}else{
setTimeout(function(){
mui.openWindow({
url: 'ucenter_address.html',
id: 'manage',
createNew:true,
show: {
aniShow: 'slide-in-right',
duration: 200
},
waiting:{
autoShow: false
}
});
},1000);
}
}else{
mui.toast('失败');
}
},
error:function(xhr,type,errorThrown){
mui.toast('系统异常');
}
});
mui(this).button('reset');
}.bind(this), 500);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/mui.picker.css" rel="stylesheet" />
<link href="../../css/mui.poppicker.css" rel="stylesheet" />
<style>
.mui-bar.mui-bar-nav .savebtn{position: absolute; right:3%; top: 10px;}
.delete-address{float: right; margin-right: 10px; color:red;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="editpage">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">编辑地址</h1>
</header>
<form class="mui-input-group" style="margin-top: 50px; padding-bottom: 40px;">
<div class="mui-input-row">
<label>收货人</label>
<input type="text" required="required" class="mui-input-clear" placeholder="请输入姓名" id="consignee">
</div>
<div class="mui-input-row">
<label>联系电话</label>
<input type="text" required="required" maxlength="11" class="mui-input-clear" placeholder="请输入电话号码" id="phone">
</div>
<div class="mui-input-row">
<label>选择地区</label>
<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button' style="width: 30%;padding: 8px 0px;float: left;margin-top:5px">地区选择</button>
<input type="hidden" name="" id="" value="">
</div>
<div class="mui-input-row">
<label>所在地区</label>
<div id='cityResult3' style="float: left;height: 48px;line-height: 48px;"></div>
</div>
<div class="mui-input-row">
<label>详细地址</label>
<input type="text" class="mui-input-clear" placeholder="请输入详细地址" id="address">
</div>
<div class="mui-input-row">
<label>邮编</label>
<input type="text" class="mui-input-clear" placeholder="请输入详细地址" id="zipcode">
</div>
<button style="margin-top: 50px;" type="submit" class="mui-btn mui-btn-blue mui-btn-block" id="edit">完成</button>
</form>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.picker.js"></script>
<script src="../../js/mui.poppicker.js"></script>
<script src="../../js/areaJson.js"></script>
<script type="text/javascript">
mui.init({
beforeback: function(){
//获得列表界面的webview
var list = plus.webview.getWebviewById('ucenter_address');
//触发列表界面的自定义事件（refresh）,从而进行数据刷新
mui.fire(list,'refresh');
//返回true，继续页面关闭逻辑
return true;
}
});
var isOrderCome;//判断是从哪里点击进入的
mui.plusReady(function(){
var self = plus.webview.currentWebview();
var addressId = self.idss.user_receipt_address_id;
var userId = self.idss.user_id;
var consignee = self.idss.consignee;
var province = self.idss.province;
var city = self.idss.city;
var district = self.idss.district;
var address = self.idss.address;
var phone = self.idss.phone;
var zipcode = self.idss.zipcode;
var isDefault = self.idss.is_default;
var provinceAreaId = self.idss.province_area_id;
var cityAreaId = self.idss.city_area_id;
var districtAreaId = self.idss.district_area_id;
isOrderCome = self.isOrderCome;
var cityPicker3 = new mui.PopPicker({
layer: 3
});
cityPicker3.setData(areas);
var showCityPickerButton = document.getElementById('showCityPicker3');
var cityResult3 = document.getElementById('cityResult3');
cityResult3.innerHTML = "<span id='province' data-province-area-id='"+provinceAreaId+"'>" + province + " </span>"
+"<span id='city' data-city-area-id='"+cityAreaId+"'>" + city + " </span>"
+"<span id='district' data-district-area-id='"+districtAreaId+"'>" + district + " </span>";
showCityPickerButton.addEventListener('tap', function(event) {
setTimeout(function(){
cityPicker3.show(function(items) {
var provinceText = (items[0] || {}).value;
var cityText = (items[1] || {}).value;
var districtText = (items[2] || {}).value;
cityResult3.innerHTML = "<span id='province' data-province-area-id='"+(items[0] || {}).value+"'>"+(items[0] || {}).text+" </span>"
+"<span id='city' data-city-area-id='"+(items[1] || {}).value+"'>"+(items[1] || {}).text+" </span>"
+"<span id='district' data-district-area-id='"+(items[2] || {}).value+"'>"+(items[2] || {}).text+" </span>";
//返回 false 可以阻止选择框的关闭
//return false;
});
},200)
}, false);
var consigneeC = document.getElementById("consignee");
var phoneC = document.getElementById("phone");
var provinceC = document.getElementById("province");
var cityC = document.getElementById("city");
var districtC = document.getElementById("district");
var addressC = document.getElementById("address");
var zipcodeC = document.getElementById("zipcode");
setTimeout(function(){
mui.ajax('http://',{
data:{
access_token:'WyJOdz09IiwiTVRRNE5ERXlPRFUwTnc9PSIsIk1USTVOakF3TUE9PSJd',
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
//headers:{'Content-Type':'application/json'},
success:function(data){
//console.log(JSON.stringify(data));
if(data.code == 1){
//console.log(addressId)
consigneeC.value = consignee;
phoneC.value = phone;
addressC.value = address;
zipcodeC.value = zipcode;
}else{
mui.toast('失败');
}
},
error:function(xhr,type,errorThrown){
//异常处理；
mui.toast('系统异常');
}
});
},500);
});
mui(document.body).on('tap', '#edit', function(e) {
var self = plus.webview.currentWebview();
var addressId = self.idss.user_receipt_address_id;
mui(this).button('loading');
var consignee = document.getElementById("consignee").value;
var phone = document.getElementById("phone").value;
var province = document.getElementById("province").getAttribute("data-province-area-id");
//var provinceIndex = province.selectedIndex;
//var provinceText = province.options[provinceIndex].value;
var city = document.getElementById("city").getAttribute("data-city-area-id");
var district = document.getElementById("district").getAttribute("data-district-area-id");
var address = document.getElementById("address").value;
var zipcode = document.getElementById("zipcode").value;
setTimeout(function() {
mui.ajax('http://',{
data:{
access_token:'WyJOdz09IiwiTVRRNE16WTRNakEwT1E9PSIsIk1USTVOakF3TUE9PSJd',
consignee:consignee,
phone: phone,
province:province,
city:city,
district:district,
address:address,
zipcode:zipcode,
user_receipt_address_id:addressId
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
//headers:{'Content-Type':'application/json'},
success:function(data){
console.log(JSON.stringify(data));
if(data.code == 1){
mui.toast('编辑成功');
if(isOrderCome){
mui.back();
}else{
setTimeout(function(){
mui.openWindow({
url: 'ucenter_address.html',
id: 'manage',
createNew:true,
show: {
aniShow: 'slide-in-right',
duration: 200
},
waiting:{
autoShow: false
}
});
},1000);
}
}else{
mui.toast('失败');
}
},
error:function(xhr,type,errorThrown){
mui.toast('系统异常');
}
});
mui(this).button('reset');
}.bind(this), 500);
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- dcloud管理收货地址mui
- 实现163收件人显示效果支持编辑删除,自动提示及邮件地址验证
- asp.net [分享] js获取复制本页地址 编辑:吴立星
- 动态生成地址信息和编辑、删除信息管理
- js实现移动端编辑添加地址【模仿京东】
- dcloud mui html5plus 5+sdk
- DCloud MUI 中的HTML5+ 之简单调用系统相册
- c语言：编辑程序输出取数组地址
- 分享一个移动端编辑添加地址[模仿京东]
- DCloud-MUI 下拉刷新与加载更多
- DCloud-MUI 下拉刷新与加载更多
- FPE修改教程进阶(地址编辑部分)
- 在线编辑地址
- mui仿京东地址 css + js （动态数据）
- Dcloud中mui 微信支付接口完美实现付款代码（PHP微信支付demo）
- Dcloud mui 获取table tr的td值
- 编辑网页时候应该如何写地址
- Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码（PHP支付宝demo）
- mui常用功能链接地址
- Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码（PHP支付宝demo）