wex5实战之管理收货地址(一)

今天要与大家分享的是实战项目之管理收货地址,现在各种电商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。亦可设置别的组件

时间: 2024-11-05 11:55:40

wex5实战之管理收货地址(一)的相关文章

wex5实战之管理收货地址(二)

接着上一张管理收货地址,这章主要讲解新增,编辑,选择省市区功能,主要有windowReceiver.windowDialog.tree组件的使用. 1.新增.编辑地址,页面. 在页面中放入windowReceiver.windowDialog组件 windowReceiver:用于接收地址参数,判断是否为新增或编辑. windowDialog:用于打开选择省市区弹窗,返回选择数据. Model.prototype.windowReceiver1Receive = function(event){

设置警告框样式为带有两个文本输入的警告框,用于收集用户收货地址和联系电话。并选择合适的代理方法,当警告框上的两输入框有一个为空时限制“购买”按钮点击。

收集购物信息  iOS项目 倒计时:588 步骤 /.panel-heading 项目需求 设置警告框样式为带有两个文本输入的警告框,用于收集用户收货地址和联系电话.并选择合适的代理方法,当警告框上的两输入框有一个为空时限制“购买”按钮点击. #import "TableViewController.h" @interface TableViewController ()<UIAlertViewDelegate> @property (nonatomic, strong)

微信收货地址开发分享

微信支付做了有一定时间了,现在就来做一些知识的总结,总体来说微信支付的文档不是非常的完美,其中存在一些问题.虽然坑很多,但是还是把问题解决了. 微信支付的收货地址共享功能,主要是统一的管理微信用户个人的收货地址,其收货地址可以被应用于所有可以调用的开发者.用户的收货地址包含了很多个人信息,因此该接口必须要通过申请,申请的方式可以在mp平台上查看到. 申请开通 包含微信支付功能时,则需要配置微信的支付目录(支付目录为绝对路径,例如支付接口为wxpay.php,而该文件在wxpay目录下,那么支付目

(转)微信收货地址开发分享

微信支付做了有一定时间了,现在就来做一些知识的总结,总体来说微信支付的文档不是非常的完美,其中存在一些问题.虽然坑很多,但是还是把问题解决了. 微信支付的收货地址共享功能,主要是统一的管理微信用户个人的收货地址,其收货地址可以被应用于所有可以调用的开发者.用户的收货地址包含了很多个人信息,因此该接口必须要通过申请,申请的方式可以在mp平台上查看到. 申请开通 包含微信支付功能时,则需要配置微信的支付目录(支付目录为绝对路径,例如支付接口为wxpay.php,而该文件在wxpay目录下,那么支付目

【小程序】获取微信 自带的 收货地址获取和整理

1.wx.chooseAddress(OBJECT) if(wx.chooseAddress){ wx.chooseAddress({ success: function (res) { console.log(JSON.stringify(res)) }, fail: function(err){ console.log(JSON.stringify(err)) } }) }else{ console.log('当前微信版本不支持chooseAddress'); } 2.数据处理,仅供参考 /

微信共享收货地址 edit_address:fail 吐白沫级解决方案

又被微信坑了一整天,看完官方文档怎么测试都不通过,我一直怀疑是新版本微信支付我没有设置“共享收货地址”开关造成的. 后来经过验证,新版本不需要做这件事了. 那么,我没错,是微信的文档没及时更新... 查了几个技术博客得知,这个接口在2016年的年中已经升级了,旧版的那个接口不能使了. 于是那个什么Addrsign就去见鬼了. 真的无力吐槽微信团队的文档水平和工作态度,这一家独大的优越感.. 好了好了,说正事儿: 首先,你得开通微信支付,其次,要在微信公众后台配置个安全域名的URL,设置下微信支付

微信支付开发(7) 收货地址共享接口V2

在这篇微信公众平台开发教程中,我们将介绍如何在网页中实现获取收货地址的功能. 收货地址共享接口 在2016年4月13日 进行过升级,2016年5月20日之后只能使用新接口,本教程为新版接口的教程! 本文分为以下二个部分: 生成JS-SDK权限验证签名 实现获取共享收货地址 一.微信JS-SDK 1. 获得Access Token access token的获得方法在前面有介绍,详情见 微信公众平台开发(26) ACCESS TOKEN 2. 获取jsapi_ticket 生成签名之前必须先了解一

微信支付v3开发(6) 收货地址共享接口

请看新版教程  微信支付开发(7) 收货地址共享接口V2 本文介绍微信支付下的收货地址共享接口的开发过程. 一. 简单介绍 微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,兴许能够免填写支持高速选择.也可添加和编辑. 此地址为用户属性.可在各商户的网页中共享使用.支持原生控件填写地址.地址数据会传递到商户. 地址共享是基于微信JavaScript API 实现.仅仅能在微信内置浏览器中使用,其它浏览器调用无效. 同一时候,须要微信5.0 版本号才干支持,建议通过user agen

微信支付开发(6) 收货地址共享接口

关键字:微信支付 收货地址共享作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/weixin-editAddress.html 本文介绍微信支付下的收货地址共享接口的开发过程. 一. 简介 微信收货地址共享,是指用户在微信浏览器内打开网页,填写过地址后,后续可以免填写支持快速选择,也可增加和编辑.此地址为用户属性,可在各商户的网页中共享使用.支持原生控件填写地址,地址数据会传递到商户. 地址共享是基于微信JavaScript API 实现,只能在微信内置浏