效果图
因为是外包项目，代码以实现功能为要求而已，轻喷。
小程序部分代码
wxml
<view class="page">
<view class="content">
<view class="perosn item">
<text>收货人 :</text>
<input bindinput="inputName" value="{{formData.name}}" placeholder="请填写收货人姓名"/>
</view>
<view class="phone item">
<text>手机号码:</text>
<input bindinput="inputPhone" value="{{formData.phone}}" placeholder="请填写收货人手机号"/>
</view>
<view class="area item" bindtap="handleArea">
<text>所在地区:</text>
<input bindinput="inputArea" value="{{formData.area}}" disabled="true"
unselectable='on'
placeholder="请选择省市区" />
</view>
<view class="detail item">
<text>详细地址:</text>
<input bindinput="inputDetail" value="{{formData.detail}}" placeholder="街道、楼牌号详细地址"/>
</view>
<view class="tag">
<text>标签</text>
</view>
<view class="is-default">
<view>
<text>设置默认地址</text>
<text>提醒: 每次下单会默认推荐使用地址</text>
</view>
<view>
<switch checked="{{switchChecked}}" bindchange="switchChange"/>
</view>
</view>
</view>
<view class="bottom">
<view class="add-address" bindtap="saveAndUse">保存并使用</view>
</view>
<view class="province-city-area" wx:if="{{isShowActoion}}">
<view class="content-field {{isShowActoion?'show-animation':''}}" >
<view class="content" >
<view class="header" >
<text class="title">请选择所在地区</text>
<view class="close" bindtap="toClose">x</view>
</view>
<view class="country">中国大陆</view>
<view class="select-province-city-area">
<view class="options" wx:for="{{options}}" wx:key="index">
<view bindtap="optionChange" data-index="{{index}}" class="{{ item.isSelect?'selected': '' }}">{{item.name}}</view>
</view>
</view>
<view class="province-field-select" wx:if="{{navIndex==1}}">
<view class="hot-city">
<view class="title">热门城市</view>
<view class="hot-city-area">
<view class="city"
wx:for="{{hotCity}}"
wx:key="index"
data-index="{{index}}"
bindtap="hotCitySelect"
>{{item.shortName}}</view>
</view>
</view>
<view class="options-content">
<view wx:for="{{provinceAlphaList}}" wx:key="index">
<view class="alpha-content">{{item}}</view>
<view>
<view class="area-content"
wx:for="{{provinceDataMap[item]}}"
wx:for-item="subItem"
wx:for-index="subIndex"
wx:key="index"
data-alpha="{{item}}"
data-index="{{subIndex}}"
bindtap="provinceSelect"
>
<image wx:if="{{subItem.isSelect}}" style="width:40rpx;height:40rpx" mode="aspectFit" src="/icons/duigou.png" /> {{subItem.name}}
</view>
</view>
</view>
</view>
</view>
<view class="city-field-select" wx:if="{{navIndex==2}}">
<view style="height:840rpx" class="options-content">
<view wx:for="{{cityAlphaList}}" wx:key="index">
<view class="alpha-content">{{item}}</view>
<view>
<view class="area-content"
wx:for="{{cityDataMap[item]}}"
wx:for-item="subItem"
wx:for-index="subIndex"
wx:key="index"
data-alpha="{{item}}"
data-index="{{subIndex}}"
bindtap="citySelect"
>
<image wx:if="{{subItem.isSelect}}" style="width:40rpx;height:40rpx" mode="aspectFit" src="/icons/duigou.png" /> {{subItem.name}}
</view>
</view>
</view>
</view>
</view>
<view class="area-field-select" wx:if="{{navIndex==3}}">
<view style="height:840rpx" class="options-content" >
<view wx:for="{{areaAlphaList}}" wx:key="index">
<view class="alpha-content">{{item}}</view>
<!-- <view> -->
<view class="area-content"
wx:for="{{areaDataMap[item]}}"
wx:for-item="subItem"
wx:for-index="subIndex"
wx:key="index"
data-alpha="{{item}}"
data-index="{{subIndex}}"
bindtap="areaSelect"
>
<image wx:if="{{subItem.isSelect}}" style="width:40rpx;height:40rpx" mode="aspectFit" src="/icons/duigou.png" /> {{subItem.name}}
</view>
<!-- </view> -->
</view>
</view>
</view>
</view>
</view>
</view>
</view>
wxss文件内容
/* pages/address/add.wxss */
.page {
height: 100vh;
background-color: #fff;
position: relative;
}
.page .bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
line-height: 100rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.page .bottom .add-address {
display: flex;
align-items: center;
justify-content: center;
background-color: #ff3300;
height: 64rpx;
line-height: 64rpx;
border-radius: 64rpx;
color: #fff;
font-weight: bold;
width: 100%;
text-align: center;
margin: 0 32rpx;
font-size: 24rpx;
letter-spacing: 1px;
}
.content .item {
height: 100rpx;
display: flex;
align-items: center;
margin: 0 24rpx;
border-bottom: 1px solid #eee;
}
.content .item text {
margin-right: 24rpx;
width: 160rpx;
font-size: 28rpx;
color: #333;
}
.content .item input {
display: inline-block;
width: 100%;
font-size: 28rpx;
color: #333;
}
.province-city-area {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: #00000077;
}
.province-city-area .content-field {
position: absolute;
bottom: 0;
background-color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: 100%;
padding: 16rpx 0rpx 0;
}
.province-city-area .header {
display: flex;
justify-content: space-between;
padding: 12rpx 32rpx 30rpx;
}
.province-city-area .header .title {
font-size: 28rpx;
font-weight: bold;
}
.province-city-area .header .close {
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
border-radius: 22rpx;
text-align: center;
background-color: #eee;
color: #666;
font-size: 28rpx;
background-color: red;
}
.province-city-area .country {
font-size: 24rpx;
font-weight: bold;
margin-bottom: 16rpx;
padding: 0rpx 32rpx 16rpx;
}
.province-city-area .hot-city .title {
padding: 6rpx 32rpx;
font-size: 24rpx;
color: #999;
}
.province-city-area .hot-city .hot-city-area {
padding-top: 8rpx;
display: flex;
flex-wrap: wrap;
margin-right: 20rpx;
}
.province-city-area .hot-city .hot-city-area .city {
width: 25%;
text-align: center;
height: 50rpx;
line-height: 50rpx;
font-size: 22rpx;
color: #000;
}
.province-field-select {
height: 840rpx;
}
.options-content {
overflow: auto;
height: 640rpx;
padding: 6rpx 32rpx 24rpx;
}
.options-content .alpha-content {
height: 60rpx;
line-height: 60rpx;
font-size: 24rpx;
color: #000;
font-weight: bold;
border-bottom: 1px solid #eee;
}
.options-content .area-content {
height: 60rpx;
line-height: 60rpx;
color: #000;
font-size: 24rpx;
display: flex;
align-items: center;
}
.options-content .area-content image {
margin-right: 12rpx;
}
.select-province-city-area {
display: flex;
padding: 0rpx 32rpx 16rpx;
}
.select-province-city-area .options {
margin-right: 50rpx;
font-size: 24rpx;
color: #000;
}
.select-province-city-area .options view {
padding: 6rpx 0rpx;
border-radius: 4rpx;
}
.select-province-city-area .options .selected {
color: red;
}
.show-animation {
animation: mymove 0.3s ease-out;
}
@keyframes mymove {
from {
transform: translateY(1000rpx);
}
}
js文件内容
/*
* @Description:
* @Version: 1.0
* @Autor: in hengqi by mengze
* @Date: 2021-09-06 16:03:45
* @LastEditors: in hengqi by mengze
* @LastEditTime: 2021-09-10 18:03:30
*/
// pages/address/add.js
Page({
/**
* 页面的初始数据
*/
data: {
formData: {
name: '',
phone:'',
area:'',
detail: ''
},
isShowActoion: false,
navIndex:1,
switchChecked: false,
hotCity: [
{
provinceName: '北京',
provinceCode: '110000',
provinceCapital: 'B',
cityCode: '110100',
cityName: '北京市',
shortName: '北京',
cityCapital: 'B'
},
{
provinceName: '上海',
provinceCode: '310000',
provinceCapital: 'S',
cityCode: '310100',
cityName: '上海市',
shortName: '上海',
cityCapital: 'S'
},
{
provinceName: '广东',
provinceCode: '440000',
provinceCapital: 'G',
cityCode: '440100',
cityName: '广州市',
shortName: '广州',
cityCapital: 'G'
},
{
provinceName: '广东',
provinceCode: '440000',
provinceCapital: 'G',
cityCode: '440300',
cityName: '深圳市',
shortName: '深圳',
cityCapital: 'S'
},
{
provinceName: '浙江',
provinceCode: '330000',
provinceCapital: 'Z',
cityCode: '330100',
cityName: '杭州市',
shortName: '杭州',
cityCapital: 'H'
},
{
provinceName: '江苏',
provinceCode: '320000',
provinceCapital: 'J',
cityCode: '320100',
cityName: '南京市',
shortName: '南京',
cityCapital: 'N'
},
{
provinceName: '江苏',
provinceCode: '320000',
provinceCapital: 'J',
cityCode: '320500',
cityName: '苏州市',
shortName: '苏州',
cityCapital: 'S'
},
{
provinceName: '天津',
provinceCode: '120000',
provinceCapital: 'T',
cityCode: '120100',
cityName: '天津市',
shortName: '天津',
cityCapital: 'T'
},
{
provinceName: '湖北',
provinceCode: '420000',
provinceCapital: 'H',
cityCode: '420100',
cityName: '武汉市',
shortName: '武汉',
cityCapital: 'W'
},
{
provinceName: '湖南',
provinceCode: '430000',
provinceCapital: 'H',
cityCode: '430100',
cityName: '长沙市',
shortName: '长沙',
cityCapital: 'C'
},
{
provinceName: '重庆',
provinceCode: '500000',
provinceCapital: 'C',
cityCode: '500100',
cityName: '重庆市',
shortName: '重庆',
cityCapital: 'C'
},
{
provinceName: '四川',
provinceCode: '510000',
provinceCapital: 'S',
cityCode: '510100',
cityName: '成都市',
shortName: '成都',
cityCapital: 'C'
}
],
options:[
{
code: '',
name: '请选择',
isSelect: true
},
{
code: '',
name: '',
isSelect: false
},
{
code: '',
name: '',
isSelect: false
}
],
provinceDataMap: {},
provinceAlphaList: [],
cityDataMap: {},
cityAlphaList: [],
areaDataMap:{},
areaAlphaList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.getProvinceCityArea();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/***
* 切换默认地址的选择
*/
switchChange: function(){
},
handleArea(){
this.setData({
isShowActoion: true
})
},
/***
* 选取省
*/
provinceSelect( e ){
for( let item of this.data.options ){
item.isSelect = false
}
Object.keys(this.data.provinceDataMap).forEach(key=>{
let dataList = this.data.provinceDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
let dataset = e.currentTarget.dataset || {};
let alpha = dataset.alpha || "";
let index = dataset.index;
let dataList = this.data.provinceDataMap[alpha];
let dataItem = dataList[index];
dataItem.isSelect = true;
let option = this.data.options[0];
option.name = dataItem.name;
option.parentId = dataItem.parentId;
option.code = dataItem.areaCode;
let secondOption = this.data.options[1];
secondOption.name = "请选择";
secondOption.isSelect = true;
//清除第三项
let thirdOption = this.data.options[2];
thirdOption.name = "";
thirdOption.code = "";
thirdOption.isSelect = false;
this.setData({
provinceDataMap: this.data.provinceDataMap,
options: this.data.options,
navIndex: 2
})
this.getProvinceCityArea(2, dataItem.areaCode);
},
/***
* 选择市
*/
citySelect( e ){
Object.keys(this.data.cityDataMap).forEach(key=>{
let dataList = this.data.cityDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
for( let item of this.data.options ){
item.isSelect = false
}
let dataset = e.currentTarget.dataset || {};
let alpha = dataset.alpha || "";
let index = dataset.index;
// console.log(`alpha: ${alpha} - ${index}`)
let dataList = this.data.cityDataMap[alpha];
let dataItem = dataList[index];
dataItem.isSelect = true;
let option = this.data.options[1];
option.name = dataItem.name;
option.parentId = dataItem.parentId;
option.code = dataItem.areaCode;
let lastOption = this.data.options[2] || {};
this.data.options[2] = lastOption;
lastOption.name = "请选择";
lastOption.isSelect = true;
this.setData({
cityDataMap: this.data.cityDataMap,
options: this.data.options,
navIndex: 3
})
this.getProvinceCityArea(3, dataItem.areaCode);
},
toClose( e ){
this.setData({
isShowActoion: false
})
},
/***
* 选择县
*/
areaSelect( e ){
Object.keys(this.data.areaDataMap).forEach(key=>{
let dataList = this.data.areaDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
let dataset = e.currentTarget.dataset || {};
let alpha = dataset.alpha || "";
let index = dataset.index;
let dataList = this.data.areaDataMap[alpha];
let dataItem = dataList[index];
dataItem.isSelect = true;
for( let item of this.data.options ){
item.isSelect = false
}
let option = this.data.options[2];
option.name = dataItem.name;
option.parentId = dataItem.parentId;
option.code = dataItem.areaCode;
option.isSelect = true;
let options = this.data.options;
this.setData({
areaDataMap: this.data.areaDataMap,
options: this.data.options,
isShowActoion: false,
"formData.area":`${options[0].name}${options[1].name}${options[2].name}`
})
},
/***
* 获取省
*/
getProvinceCityArea: function( level, parentId ){
if(!level){
level = 1;
}
if( !parentId ){
parentId = '100000'
}
let globalData = getApp().globalData;
var baseUrl = globalData.baseUrl;
let that = this;
var reqTask = wx.request({
url: `${baseUrl}:8006/shopservice/address/area`,
data: {
level,
parentId
},
header: {'content-type':'application/json'},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: (result) => {
result = result.data;
if( result.code == 200 ){
let data = result.data || {};
let dataList = data.list || [];
let dataMap = {};
for( let item of dataList ){
item.isSelect = false;
let capital = item.pinYin.substr(0, 1);
if( !dataMap[capital] ){
dataMap[capital] = [];
}
dataMap[capital].push(item);
}
let alphaList = Object.keys(dataMap).sort();
if( level == 1 ){
that.setData({
provinceDataMap:dataMap,
provinceAlphaList:alphaList
})
}else if( level == 2 ){
that.setData({
cityDataMap: dataMap,
cityAlphaList: alphaList
})
}else if( level == 3 ){
this.setData({
areaDataMap: dataMap,
areaAlphaList: alphaList
})
}
}
},
fail: () => {},
complete: () => {}
});
},
/***
* 已经选择的省市区的按钮的事件响应
*/
optionChange( e ){
let dataset = e.currentTarget.dataset || {};
let index = dataset.index;
for( let item of this.data.options ){
item.isSelect = false;
}
let option = this.data.options[index];
option.isSelect = true;
this.setData({
navIndex:index+1,
options: this.data.options
})
},
/***
* 热门城市事件响应
*/
hotCitySelect( e ){
Object.keys(this.data.provinceDataMap).forEach(key=>{
let dataList = this.data.provinceDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
Object.keys(this.data.cityDataMap).forEach(key=>{
let dataList = this.data.cityDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
Object.keys(this.data.areaDataMap).forEach(key=>{
let dataList = this.data.areaDataMap[key] || [];
dataList.forEach( subItem=>{
subItem.isSelect = false;
});
})
let dataset = e.currentTarget.dataset || {};
let index = dataset.index;
//都是城市
let hotCity = this.data.hotCity[index];
let options = this.data.options;
let provinceOption = options[0];
provinceOption.code = hotCity.provinceCode;
provinceOption.name = hotCity.provinceName;
provinceOption.isSelect = false;
let cityOption = options[1];
cityOption.code = hotCity.cityCode;
cityOption.name = hotCity.cityName;
cityOption.isSelect = true;
let areaOption = options[2];
areaOption.code = "";
areaOption.name = "请选择";
areaOption.isSelect = false;
//匹配省的code
let provinceDataList = this.data.provinceDataMap[hotCity.provinceCapital] || [];
provinceDataList.forEach( item=>{
if( item.areaCode == hotCity.provinceCode ){
item.isSelect = true;
}
});
//清除原来的省市区的选中数据
this.setData({
provinceDataMap: this.data.provinceDataMap,
cityDataMap: this.data.cityDataMap,
areaDataMap: this.data.areaDataMap,
options: this.data.options,
navIndex: 2
})
this.getProvinceCityArea(2, provinceOption.code);
//匹配市的code
let cityDataList = this.data.cityDataMap[hotCity.cityCapital] || [];
cityDataList.forEach( item=>{
if( item.areaCode == hotCity.cityCode ){
item.isSelect = true;
}
});
},
inputDetail(e){
},
inputArea(e){
},
inputPhone(e){
},
inputName(e){
}
})
结尾
考虑到这里下载积分需要50，太黑； 把mysql文件放在我自己的企鹅群里面了。 我的企鹅群
