您的位置：首页 > 产品设计 > UI/UE

dcloud管理收货地址mui

2017-01-15 00:00 211 查看

<!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;">





</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航