基于uni-app实现京东收货地址

本文是用uni-app来实现收货地址城市选择，如果你想要用jquery实现相同效果可以查看我之前写的文章，用jQuery仿京东收货地址。本次的功能实现相比用jquery会比较简单，关键在于我们对缓存数据进行了特殊处理。对应最新的行政区划乡镇清单可以进入http://lbsyun.baidu.com/index.php?title=open/开发资源进行下载查阅。

第一数据结构：{"86":{"110000":"北京市"}}，我们的数据都是以对应的地区编号作为key，地区名作为value。这样的做法是方便数据遍历。

第二UI代码：分成三部分，顶部栏、数据显示栏【选择切换栏】、省市区地区数据显示栏。对已加载的数据进行缓存，于是我们采用循环来创建这些数据。逻辑代码比较清晰，具体看下方完整代码。

我们在选择的城市地区的时候，需要判断是不是已经选择过了，如果选择过了不做数据处理操作，反之移除往后选择的数据。代码实现比较简单，我就不多阐述，本案例对应的部分样式采用colorui。

完整的代码如下：

<template><view class="choiceAddress"><view class="headerInfo"><view class="top"><text>请选择所在地区</text><text class="cuIcon-roundclosefill" @tap="closeChoice"></text></view><!-- 已选择的信息 --><view class="titleArea"><view class="has-choose-box flex-row pad-left"><view class="title" v-for="(item, index) in selectInfo" :key="index" :class="item.IsActive ? 'active' : ''" @tap="changeNavbar(index)"><text>{{ item.Name }}</text></view></view></view></view><!-- 城市信息 --><view class="cityInfo"><scroll-view scroll-y="true" id="city-item-box"><view class="cu-list menu" v-for="(pitem, index) in paintInfoList" v-show="pitem.IsActive" :key="pitem.Id"><view class="cu-item" v-for="item in pitem.Child" :key="item.ID" :class="item.ID === pitem.SelectId ? 'active' : ''"><view class="content" @tap="handleChoice(item, index)"><text class="cuIcon-roundcheck text-grey" v-if="item.ID === pitem.SelectId"></text><text class="text-grey">{{ item.Name }}</text></view></view></view></scroll-view></view></view>
</template><script>
export default {data() {return {region: {},paintInfoList: [], //需要绘画的城市信息selectInfo: [{IsActive: true,ID: '-1',ParentId: '-1',Name: '请选择'}] //所选择的地址信息};},props: {regionInfo: {type: Array,required: true},callback: {type: Function,required: true}},methods: {closeChoice(){this.callback(true,this.selectInfo);},changeNavbar(index) {for (let item of this.selectInfo) {item.IsActive = false;}this.selectInfo[index].IsActive = true;for (let item of this.paintInfoList) {item.IsActive = false;}this.paintInfoList[index].IsActive = true;},handleChoice(item, index) {let tempIndex = index + 1;let selectItem = this.selectInfo[index];if (item.ID != selectItem.ID) {this.selectInfo.splice(tempIndex, this.selectInfo.length - 1);this.paintInfoList.splice(tempIndex, this.paintInfoList.length - 1);selectItem.ID = item.ID;selectItem.ParentId = item.ParentId;selectItem.Name = item.Name;selectItem.IsActive = false;this.paintInfoList[index].SelectId = item.ID;this.paintInfoList[index].IsActive = false;let tempArray = this.getRegionInfo(item.ID);if (tempArray !== null && tempArray !== undefined && tempArray.length > 0) {this.selectInfo.push({IsActive: true,ID: '-1',ParentId: '-1',Name: '请选择'});this.paintInfoList.push({Id: 'Y' + new Date().getTime(),SelectId: '',IsActive: true,Child: tempArray});} else {selectItem.IsActive = true;this.paintInfoList[index].IsActive = true;this.callback(true,this.selectInfo);}}},getRegionInfo(key) {let tempObj = this.region[key];let tempArray = []; //接收处理的数组if (tempObj === undefined) return tempArray;if (key === '86') {Object.keys(tempObj).forEach(keyName => {if (keyName === '910000') {tempArray.push({ID: '810000',ParentId: '-1',Name: '香港特别行政区'});tempArray.push({ID: '820000',ParentId: '-1',Name: '澳门特别行政区'});} else {tempArray.push({ID: keyName,ParentId: '-1',Name: tempObj[keyName]});}});} else {Object.keys(tempObj).forEach(keyName => {tempArray.push({ID: keyName,ParentId: key,Name: tempObj[keyName]});});}return tempArray;},init() {if (this.regionInfo.length > 0) {for (let item of this.regionInfo) {this.getRegionInfo(item);}}}},created() {uni.request({url: 'static/json/newRegion.json',success: res => {this.region = res.data;let tempArray = this.getRegionInfo('86');this.paintInfoList.push({Id: 'Y' + new Date().getTime(),IsActive: true,Child: tempArray});this.init();}});}
};
</script><style lang="scss">
.flex-row {display: flex;flex-direction: row;
}
.pad-left {padding-left: 30upx;
}
view {font-size: 26upx;
}
.choiceAddress {background-color: #ffffff;position: relative;.headerInfo {.top {height: 80upx;line-height: 80upx;text-align: center;font-size: 32upx;color: #8799a3;position: relative;.cuIcon-roundclosefill {position: absolute;top: 50%;transform: translateY(-50%);right: 20upx;}}}
}.has-choose-box {height: 60upx;line-height: 60upx;box-shadow: 0 5upx 5upx #ccc;.title {margin-right: 50upx;border-bottom: 2upx solid #f5f5f5;}.title.active {color: #007aff;border-color: #007aff;}
}#city-item-box {margin-top: 4upx;height: 500upx;.cu-list + .cu-list {margin-top: 0;}.cu-list.menu > .cu-item {min-height: 68upx;}.cu-list.menu > .cu-item.active {padding-left: 0;.cuIcon-roundcheck {margin-right: 0;}.text-grey,.line-grey,.lines-grey {color: #007aff !important;}}
}
</style>

效果展示：

对应资源文件下载地址：https://download.csdn.net/download/qq_21726707/12002263

基于uni-app实现京东收货地址相关推荐

Android仿京东收货地址
Android仿京东三级联动收货地址 1.在本地新建assets目录,存放三级联动json数据,取本地json数据作为数据源 String data = com.miles.zcstc.fingerd ...
android 京东收货地址,手机京东商城怎么添加收货地址?
想必有很多人都使用过手机京东购物,购物就需要一个收货地址,在手机京东上,具体怎么添加一个收货地址呢?或者说,由于某些特殊的原因,比如帮别人买东西,或者自己不在原来的地方住了,需要修改原来的收货地址,这 ...
uniApp使用uni.chooseAddress()获取微信收货地址
获取微信收货地址使用uniapp或者原生微信小程序获取微信的收货地址 1.需要在开发平台申请权限在[开发]-[开发管理]-[接口设置]-[获取用户收货地址]–申请该权限,审核通过后方可使用. 2. ...
仿京东收货地址三级联动
声明我没有用tabLayout(pageSlidingTabStrip) + viewpager + fragment 如果用上面的方法实现更加简单我用的是一个listvi ...
用jQuery仿京东收货地址
代码优化及修正说明,新增两个功能,第一.指定parentId[用于筛选对应数据的根节点数],第二.返回所选择的数据数据及创建的class名称[用于重新绑定点击事件].代码实例及创建代码如下: < ...
Vue3电商项目实战-结算支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】
文章目录 05-结算-收货地址-添加 06-结算-收货地址-修改 07-结算-提交订单 05-结算-收货地址-添加目的:实现收货地址的添加. 大致步骤: 独立组件,准备一个对话框完成表单布局完成 ...
php商城手机端省市显示,jQuery仿手机京东商城收货地址城市选择
jQuery仿手机京东商城收货地址城市选择 js代码 /** * 默认调用 */ !function () { var $target = $('#J_Address'); $target.cityS ...
HMS Core定位服务在生活服务类App中可以自动填写收货地址啦
在涉及团购.外卖.快递.家政.物流.搬家等生活服务类的App.小程序中,填写收货地址是用户高频使用的功能.这一功能通常采取让用户手动填写的解决方案,例如上下拉动选择浙江省–>杭州市–>西湖 ...
方便代理下单的EcStore收货地址一键分析插件，同时支持淘宝/京东/一号店
使用EcStore开展分销的网站,代理需要经常代客下单,每个客户收货地址都不同,要选择和填写多个内容才能完成地址输入:省.市.区.详细地址.收货人姓名.手机电话等,非常麻烦,也容易输入错误. 安装Ec ...

基于uni-app实现京东收货地址

基于uni-app实现京东收货地址相关推荐

最新文章

热门文章