wex5实战之管理收货地址

Posted 2020-08-24

今天要与大家分享的是实战项目之管理收货地址，现在各种电商app管理收货地址样式越来越多，效果也越来越好。本次项目步骤有这么几个：

1、list迭代json数据，初始化默认收货地址。

2、list数据增、删、改、查。

首先展示效果图，如下：

图一为管理地址页

图二为新增收货地址页

图三为选择城市地区

下面进行详细代码讲解：

1、初始化list数据

Model.prototype.addressDataCustomRefresh = function(event){

var addressData = event.source;

// var url = require.toUrl(url_window+"/uapp/get_placeOfReceipt.htm?jsoncallback=?");

        var url = require.toUrl(‘./json/mangae.json‘);

        $.ajaxSettings.async = false;

$.getJSON(url,function(data) {

addressData.loadData(data);

}); 

};

并在页面中设置默认地址样式

json格式为：

[

{"id":"23442","trueName":"酱爆","mobile":"1340000000","telephone":"13516958451","areaInfo":"广东省深圳市南山区**********","address_default":"0"},

{"id":"23432","trueName":"江小鱼","mobile":"1340000000","telephone":"18815421236","areaInfo":"广东省深圳市宝安区阳台山","address_default":"1"},

{"id":"23412","trueName":"扎小刀","mobile":"1340000000","telephone":"15565487952","areaInfo":"广东省深圳市宝安区西乡街道石街新村","address_default":"0"}

]

实现图一效果没有什么难度，看了wex5初级视频即可完成，有些项目中接口数据可能会没有外层那[]括号，那就需要在CustomRefresh函数中，先定义个数据[]，在getJSONpush上即可。

2、数据处理。

//新增

Model.prototype.newaddressClick = function(event){

var parems = {

id:"",

operator:"new"//设置标识判断为编辑还是新增地址

}

var url = require.toUrl(‘./add_address.w‘);

justep.Shell.showPage(url,parems);

};

//编辑

Model.prototype.editAddClick = function(event){

var row = event.bindingContext.$object;

var addressID = row.val("id");

var parems = {

id:addressID,

operator:"edit"//设置标识判断为编辑还是新增地址

}

// alert(addressID);

var url = require.toUrl(‘./add_address.w‘);

justep.Shell.showPage(url, parems);

};

使用showPage方法打开新增页面。

3、点击设置默认地址

//默认地址

Model.prototype.col10Click = function(event){

var row = event.bindingContext.$object;

var data = this.comp(‘addressData‘);

var url = require.toUrl(url_window+"/uapp/upDefault_placeOfReceipt.htm?jsoncallback=?");

var datas = {

id : row.val("id")//获取当前行id

}

$.ajaxSettings.async = false;

$.getJSON(url,datas,function(data) {//接口保存到数据库中

}); 

data.setValue("address_default", "0", data.find(["address_default"],["1"])[0]);//设置未选中行状态为0

data.setValue("address_default", "1",row);//设置当前行状态为1，

};

默认组件为radio。亦可设置别的组件

本文出自 “web前端攻城师” 博客，请务必保留此出处http://xiaochegnzi.blog.51cto.com/11150997/1885070