dcloud编辑收货地址mui

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

转载于:https://my.oschina.net/af666/blog/825149

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值