<!--pages/customer/shippingAddress.wxml-->
<view class="container">
<view class="customerInfo">
<view class="hd-title font-color-666">
{{type == 'add' ? '添加收货地址' : '编辑收货地址'}}
</view>
<view class="view-list ">
<view class="list__hd">
<view class="weui-label font-color-666">备注名称</view>
</view>
<view class="list__bd">
<input class="choose" bindinput="bindKeyInput" value="{{customerInfo.customerName}}" placeholder="如:TA的公司/TA家" placeholder-class="font-color-ccc"/>
</view>
</view>
<view class="line-10 bg-color-eee"></view>
<view class="view-list line-before-bottom ">
<view class="list__hd">
<view class="weui-label font-color-666">收货人</view>
</view>
<view class="list__bd">
<input class="choose" bindinput="bindKeyInput" value="{{customerInfo.customerName}}" placeholder="请输入收货人姓名" placeholder-class="font-color-ccc"/>
</view>
</view>
<view class="view-list">
<view class="list__hd">
<view class="weui-label font-color-666">手机号码</view>
</view>
<view class="list__bd">
<input class="choose" bindinput="bindKeyInput" value="{{customerInfo.customerName}}" placeholder="请输入收货人手机号" placeholder-class="font-color-ccc"/>
</view>
</view>
</view>
<view class="butbox" style="margin:30rpx auto; ">
<navigator url="shippingAddress?type=add" class="but bg-color-c24e4e font-color-white"> {{type == 'add' ? '添加收货地址' : '保存收货地址'}}</navigator>
</view>
</view>
<view class="modal">
<view class="modal-mask {{maskVisual}}" bindtap="cascadeDismiss"></view>
<view animation="{{animationData}}" class="modal-content">
<view class="modal-header">
<text class="modal-title">所在地区</text>
<text class="modal-close" bindtap="cascadeDismiss">X</text>
</view>
<view class="modal-body">
<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="0">{{provinceName}}</text>
<text class="viewpager-title {{current == 1 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="1">{{cityName}}</text>
<text class="viewpager-title {{current == 2 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="2">{{countyName}}</text>
<text class="viewpager-title {{current == 3 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="3">{{townName}}</text>
<text class="viewpager-title {{current == 4 ? 'area-selected' : ''}}" bindtap="changeCurrent" data-current="4">{{villageName}}</text>
<view class="viewpager-divider"></view>
<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">
<block wx:if="{{province.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{province}}" wx:key="index" data-index="{{index}}" bindtap="provinceTapped">
<text wx:if="{{provinceName == item.name}}" class="area-selected">{{item.name}}</text>
<text wx:else>{{item.name}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{city.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="cityTapped">
<text wx:if="{{cityName == item.name}}" class="area-selected">{{item.name}}</text>
<text wx:else >{{item.name}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{county.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{county}}" wx:key="index" data-index="{{index}}" bindtap="countyTapped">
<text wx:if="{{countyName == item.name}}" class="area-selected">{{item.name}}</text>
<text wx:else>{{item.name}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{town.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{town}}" wx:key="index" data-index="{{index}}" bindtap="townTapped">
<text wx:if="{{townName == item.name}}" class="area-selected">{{item.name}}</text>
<text wx:else>{{item.name}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
<block wx:if="{{village.length > 0}}">
<swiper-item>
<scroll-view scroll-y="true" class="viewpager-listview">
<view wx:for="{{village}}" wx:key="index" data-index="{{index}}" bindtap="villageTapped">
<text wx:if="{{villageName == item.name}}" class="area-selected">{{item.name}}</text>
<text wx:else>{{item.name}}</text>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
|
/* pages/customer/shippingAddress.wxss */
.hd-title{
display:flex;
align-items: center;
height: 90rpx;
padding:0 30rpx;
}
.view-list{
background-color: #fff;
display: flex;
flex-direction: row;
}
.view-list .choose{
width: 100%;
height: 110rpx;
position: relative;
display: flex;
align-items: center;
}
.list__hd{
display: flex;
padding-left:30rpx;
height: 110rpx;
align-items: center;
}
.font-color-ccc{
color: #cccccc;
}
/*地址选择器
*弹窗主体*/
.modal-content {
position: fixed;
bottom: -285px;
left: 0;
width: 100%;
height: 285px;
/*box-shadow: 10rpx 0 30rpx rgba(0,0,0,.9);*/
margin-top: 5px;
background: #fff;
z-index: 999;
}
/*遮罩层*/
.modal-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .8;
z-index: 99;
}
/*弹窗头部*/
.modal-header {
margin: 2px 0;
font-size: 16px;
color: #666;
display: flex;
flex-direction: row;
justify-content: space-between;
line-height: 30px;
}
/*所在地区字样*/
.modal-title {
text-align: center;
width: 100%;
}
/*关闭按钮*/
.modal-close {
width: 20px;
}
.modal-body {
font-size: 14px;
}
/*每级地区标题*/
.viewpager-title {
padding: 0 10px;
/*color: #f03118;*/
line-height: 30px;
}
/*分隔线*/
.viewpager-divider {
width: 100%;
height: 1px;
background: #ccc;
}
/*左右滑动控件*/
.swiper-area {
height:220px;
}
/*地址列表ListView容器*/
.viewpager-listview {
padding-top: 5px;
height: 100%;
}
/*每行地址item项*/
.viewpager-listview view{
line-height: 30px;
padding: 0 10px;
}
/*高亮当前所选地区*/
.area-selected {
color: red;
}
/*初始隐藏*/
.hidden {
display: none;
}
/*运行时显示*/
.show {
display: block;
}
/*单元格*/
.cell {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items:center;
margin: 4px;
border-bottom: 1px solid #eee;
line-height: 28px;
}
.cell:last-child {
border-bottom: 0;
}
/*label显示字符*/
.cell text:first-child {
width: 50px;
}
/*请选择区域*/
.region {
width: 90%;
}
|
// pages/customer/shippingAddress.js
Page({
data:{
type:'',
maskVisual: 'hidden',// mask 遮罩层
current: 0, //地址层级索引
proviceid: '',
cityid: '',
countyid: '',
townid: '',
villageid: '',
province: [],//省
city: [],//市
county: [],//区
town: [], //街道
village: [],//乡村
provinceName: '请选择',
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
//判断是否带有type 编辑收获地址或者添加收获地址
let type = options.type=='add' ? 'add' : 'edit';
let title = options.type=='add' ? '添加收货地址' : '编辑收货地址';
wx.setNavigationBarTitle({
title: title
})
this.setData({
type:type
})
this.getAddres();
},
//获取选择好的省
getprovince() {
//通过proviceid 找到省份名字
let provincelist = this.data.province;
//findIndex() 方法找到proviceid 的省份的名字
let i = provincelist.findIndex((value) => {
return value.id == this.data.proviceid;
})
// console.log('通过id找到的位置是',this.data.proviceid,i)
this.setData({
provinceName: provincelist[i].name
})
},
//获取选择好的市
getcity() {
app.tools.get(`/seller/customer_area?provice_id=${this.data.proviceid}`, (city) => {
//console.log(province)
this.setData({
city: city.list
});
// console.log(JSON.stringify(this.data.city))
//通过cityid 找到城市名字
let citylist = this.data.city;
//findIndex() 方法找到proviceid 的省份的名字
let i = citylist.findIndex((value) => {
return value.id == this.data.cityid;
})
console.log('通过id找到的位置是', this.data.cityid, i)
this.setData({
cityName: citylist[i].name
})
})
},
//获取选择好的区
getcounty() {
app.tools.get(`/seller/customer_area?city_id=${this.data.cityid}`, (county) => {
//console.log(province)
this.setData({
county:county.list
});
// console.log(JSON.stringify(this.data.city))
//通过cityid 找到城市名字
let countylist = this.data.county;
//findIndex() 方法找到proviceid 的省份的名字
let i = countylist.findIndex((value) => {
return value.id == this.data.countyid;
})
console.log('通过id找到的位置是',this.data.countyid,i, countylist[i].name)
this.setData({
countyName: countylist[i].name
})
})
},
//获取选择好的街道
gettown() {
app.tools.get(`/seller/customer_area?county_id=${this.data.countyid}`,(town) => {
//console.log(province)
this.setData({
town: town.list
});
// console.log(JSON.stringify(this.data.city))
//通过cityid 找到城市名字
let townlist = this.data.town;
//findIndex() 方法找到proviceid 的省份的名字
let i = townlist.findIndex((value) => {
return value.id == this.data.townid;
})
// console.log('通过id找到的位置是',this.data.proviceid,i)
this.setData({
townName: townlist[i].name
})
})
},
//获取选择好的乡镇
getvillage() {
app.tools.get(`/seller/customer_area?town_id=${this.data.townid}`, (village) => {
//console.log(province)
this.setData({
village: village.list
});
// console.log(JSON.stringify(this.data.city))
//通过cityid 找到城市名字
let villagelist = this.data.village;
//findIndex() 方法找到proviceid 的省份的名字
let i = villagelist.findIndex((value) => {
return value.id == this.data.villageid;
})
// console.log('通过id找到的位置是',this.data.proviceid,i)
this.setData({
villageName: villagelist[i].name
})
})
},
cascadePopup: function () {
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease-in-out',
});
this.animation = animation;
animation.translateY(-285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'show',
});
},
cascadeDismiss: function () {
this.animation.translateY(285).step();
this.setData({
animationData: this.animation.export(),
maskVisual: 'hidden'
});
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
模板简介：该模板名称为【微信小程序酒类商城编辑收货地址设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
