<!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" />
<script src="../../js/mui.min.js"></script>
<style>
.jays-address-box{background-color: #fff; padding: 10px; margin-bottom: 10px;}
.jays-address-box:last-of-type{margin-bottom: 80px;}
.jays-address-list{border-bottom: 1px solid #dcdcdc; overflow: hidden;}
.jays-address-list div span:last-child{float:right;}
.jays-address-list p{margin-top: 10px;}
.jays-address-tail{overflow: hidden;}
.jays-address-tail div{float: left;}
.jays-address-tail div:first-child{margin-top: 4px;}
.jays-address-tail div:last-child{float: right; margin-top: 10px;}
.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
font-size: 22px;
}
.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
top:8px;
left:0px !important;
}
.mui-checkbox.mui-left label, .mui-radio.mui-left label{padding-left:28px}
.mui-btn-block{position: fixed; bottom: 0px;}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="manage">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="backorder"></a>
<h1 class="mui-title">管理收货地址</h1>
</header>
<div style="position:fixed;z-index:-1;top:50%;left:50%;margin-left:-26px;margin-top:-50px;height:40px;line-height:40px;font-size:14px;color:#999;" id="loading">加载中...</div>
<div class="mui-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" style="padding-top:45px;">
<!--这里放置真实显示的DOM内容-->
<!--<div class="jays-address-box">
<div class="jays-address-list">
<div>
<span></span>
<span>15192780165</span>
</div>
<p><span>上海</span><span>上海市</span><span>长宁区</span><span>新泾镇</span>凌空SOHO </p>
</div>
<div class="jays-address-tail">
<div class="mui-input-row mui-radio mui-left">
<label>默认地址</label>
<input name="address" type="radio" checked>
</div>
<div>
<a href="#" id="edit"><span class="mui-icon mui-icon-compose"></span>编辑</a>
<a href="#"><span class="mui-icon mui-icon-trash"></span>删除</a>
</div>
</div>
</div>-->
</div>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="add" style="height:50px;top:0px;border-radius:0px">添加新地址</button>
</nav>
</body>
<script type="text/javascript">
mui.init();
mui('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
var isOrderCome;
mui.plusReady(function(){
var access_token = plus.storage.getItem("login");
var self = plus.webview.currentWebview();
document.addEventListener("refresh",function(){//返回列表刷新自定义事件
self.reload(true);
})
isOrderCome = self.isorder_id;
setTimeout(function(){
mui.ajax('http://',{
data:{
access_token:access_token
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
//headers:{'Content-Type':'application/json'},
success:function(data){
var list = document.querySelector('.mui-scroll');
//console.log(JSON.stringify(data));
if(data.code == 1){
for(var i=0;i<data.data.length;i++){
var content = document.createElement('div');
content.className = 'jays-address-box';
if(isOrderCome){
document.getElementById("backorder").style.display = "none";//订单进入禁止返回按钮
if(data.data[i].is_default == 0){
content.innerHTML = "<div class='jays-address-list' id='"+data.data[i].user_receipt_address_id+"'><div><span>"
+ data.data[i].consignee + "</span><span>" + data.data[i].phone
+ "</span></div><p><span>" + data.data[i].province + "</span><span>"
+ data.data[i].city + "</span><span>" + data.data[i].district
+ "</span><span>" + data.data[i].address +"</span></p></div><div class='jays-address-tail'>"
+"<div class='mui-input-row mui-radio mui-left' id='ismoren' address-id='"+data.data[i].user_receipt_address_id+"' address-consignee='"+data.data[i].consignee+"' address-phone='"+data.data[i].phone+"' address-address='"+data.data[i].address+"' ><label>默认地址</label><input name='address' type='radio' ></div>"
+"<div><a href='#' class='editaddress' data-edit='"+data.data[i].user_receipt_address_id
+"' data-user-id='"+data.data[i].user_id
+"' data-consignee='"+data.data[i].consignee
+"' data-province='"+data.data[i].province
+"' data-city='"+data.data[i].city
+"' data-district='"+data.data[i].district
+"' data-address='"+data.data[i].address
+"' data-phone='"+data.data[i].phone
+"' data-zipcode='"+data.data[i].zipcode
+"' data-is-default='"+data.data[i].is_default
+"' data-province-area-id='"+data.data[i].province_area_id
+"' data-city-area-id='"+data.data[i].city_area_id
+"' data-district-area-id='"+data.data[i].district_area_id
+"'><span class='mui-icon mui-icon-compose'></span>编辑</a><a href='#' class='deladdress' data-delete='"
+data.data[i].user_receipt_address_id+"'><span class='mui-icon mui-icon-trash'></span>删除</a></div></div>";
}else{
content.innerHTML = "<div class='jays-address-list' id='"+data.data[i].user_receipt_address_id+"'><div><span>"
+ data.data[i].consignee + "</span><span>" + data.data[i].phone
+ "</span></div><p><span>" + data.data[i].province + "</span><span>"
+ data.data[i].city + "</span><span>" + data.data[i].district
+ "</span><span>" + data.data[i].address +"</span></p></div><div class='jays-address-tail'>"
+"<div class='mui-input-row mui-radio mui-left' id='ismoren' address-id='"+data.data[i].user_receipt_address_id+"' address-consignee='"+data.data[i].consignee+"' address-phone='"+data.data[i].phone+"' address-address='"+data.data[i].address+"' ><label>默认地址</label><input name='address' type='radio' checked></div>"
+"<div><a href='#' class='editaddress' data-edit='"+data.data[i].user_receipt_address_id
+"' data-user-id='"+data.data[i].user_id
+"' data-consignee='"+data.data[i].consignee
+"' data-province='"+data.data[i].province
+"' data-city='"+data.data[i].city
+"' data-district='"+data.data[i].district
+"' data-address='"+data.data[i].address
+"' data-phone='"+data.data[i].phone
+"' data-zipcode='"+data.data[i].zipcode
+"' data-is-default='"+data.data[i].is_default
+"' data-province-area-id='"+data.data[i].province_area_id
+"' data-city-area-id='"+data.data[i].city_area_id
+"' data-district-area-id='"+data.data[i].district_area_id
+"'><span class='mui-icon mui-icon-compose'></span>编辑</a><a href='#' class='deladdress' data-delete='"
+data.data[i].user_receipt_address_id+"'><span class='mui-icon mui-icon-trash'></span>删除</a></div></div>";
}
}else{
content.innerHTML = "<div class='jays-address-list' id='"+data.data[i].user_receipt_address_id+"'><div><span>"
+ data.data[i].consignee + "</span><span>" + data.data[i].phone
+ "</span></div><p><span>" + data.data[i].province + "</span><span>"
+ data.data[i].city + "</span><span>" + data.data[i].district
+ "</span><span>" + data.data[i].address +"</span></p></div><div class='jays-address-tail'>"
+"<div><a href='#' class='editaddress' data-edit='"+data.data[i].user_receipt_address_id
+"' data-user-id='"+data.data[i].user_id
+"' data-consignee='"+data.data[i].consignee
+"' data-province='"+data.data[i].province
+"' data-city='"+data.data[i].city
+"' data-district='"+data.data[i].district
+"' data-address='"+data.data[i].address
+"' data-phone='"+data.data[i].phone
+"' data-zipcode='"+data.data[i].zipcode
+"' data-is-default='"+data.data[i].is_default
+"' data-province-area-id='"+data.data[i].province_area_id
+"' data-city-area-id='"+data.data[i].city_area_id
+"' data-district-area-id='"+data.data[i].district_area_id
+"'><span class='mui-icon mui-icon-compose'></span>编辑</a><a href='#' class='deladdress' data-delete='"
+data.data[i].user_receipt_address_id+"'><span class='mui-icon mui-icon-trash'></span>删除</a></div></div>";
}
list.appendChild(content);
}
}else{
mui.toast('失败');
}
},
error:function(xhr,type,errorThrown){
//异常处理;
mui.toast('系统异常');
}
});
},500);
mui("body").on('tap','#ismoren',function(){
var address_id = this.getAttribute("address-id");
var address_consignee = this.getAttribute("address-consignee");
var address_phone = this.getAttribute("address-phone");
var address_address = this.getAttribute("address-address");
mui.ajax('http://',{
data:{
user_receipt_address_id:address_id,
access_token:access_token
},
dataType:'json',
type:'post',
timeout:10000,
success:function(data){
//console.log(JSON.stringify(data));
if(data.code == 1){
mui.toast("成功...");
setTimeout(function(){
orderye = plus.webview.getWebviewById("order");
//console.log(JSON.stringify(orderye));
mui.fire(orderye,'addressedit',{
username:address_consignee,
phone:address_phone,
address:address_address,
address_id:address_id
})
mui.back();
},1000);
}else{
mui.toast("系统错误,请检查网络");
}
},
error:function(xhr,type,errorThrown){
console.log(type);
}
});
})
});
mui("body").on('tap','.deladdress',function(){
var del = this.getAttribute("data-delete");
//console.log(del);
if(confirm('确定删除么?')){
setTimeout(function(){
mui.ajax('http://',{
data:{
access_token:'WyJOdz09IiwiTVRRNE5ERXlPRFUwTnc9PSIsIk1USTVOakF3TUE9PSJd',
user_receipt_address_id:del
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
//headers:{'Content-Type':'application/json'},
success:function(data){
if(data.code == 1){
var removed = document.getElementById(del).parentNode;
removed.parentNode.removeChild(removed);
mui.toast('删除成功');
location.reload();
}else{
mui.toast('删除失败');
}
},
error:function(xhr,type,errorThrown){
//异常处理;
mui.toast('系统异常');
}
});
},1000);
}
});
mui("body").on('tap','.editaddress',function(){
var addressId = this.getAttribute("data-edit");
var userId = this.getAttribute("data-user-id");
var consignee = this.getAttribute("data-consignee");
var province = this.getAttribute("data-province");
var city = this.getAttribute("data-city");
var district = this.getAttribute("data-district");
var address = this.getAttribute("data-address");
var phone = this.getAttribute("data-phone");
var zipcode = this.getAttribute("data-zipcode");
var isDefault = this.getAttribute("data-is-default");
var provinceAreaId = this.getAttribute("data-province-area-id");
var cityAreaId = this.getAttribute("data-city-area-id");
var districtAreaId = this.getAttribute("data-district-area-id");
//console.log(addressId);
mui.openWindow({
url: 'ucenter_address_edit.html',
id: 'editpage',
show: {
aniShow: 'slide-in-right',
duration: 200
},
extras:{
idss: {
user_receipt_address_id:addressId,
user_id:userId,
consignee:consignee,
province:province,
city:city,
district:district,
address:address,
phone:phone,
zipcode:zipcode,
is_default:isDefault,
province_area_id:provinceAreaId,
city_area_id:cityAreaId,
district_area_id:districtAreaId
},
isOrderCome:isOrderCome
},
waiting:{
autoShow: false
}
});
})
document.getElementById('add').addEventListener('tap',function () {
var add = mui.openWindow({
url: 'ucenter_address_add.html',
id: 'addpage',
show: {
aniShow: 'slide-in-right',
duration: 200
},
extras:{
isOrderCome:isOrderCome
},
waiting:{
autoShow: false
}
});
});
</script>
<script>
window.onload = function(){
setTimeout(function(){
document.getElementById("loading").style.display = "none";
},1000)
}
</script>
</html>
js拼接html换行方式\
var a_a = document.createElement("div");
a_a.innerHTML = '<a class="weui-cell weui-cell_access" href="javascript:void(0);">\
<div class="weui-cell__bd">\
<p>王炸</p>\
</div>\
<div class="weui-cell__ft update">2018-01-11 <span class="state">亚</span></div>\
</a>';
document.getElementById("parent").appendChild(a_a);