添加城市筛选模块

app.json

@@ -15,7 +15,8 @@
     "pages/order-detail/order-detail",
     "pages/coupon-list/coupon-list",
     "pages/coupon-detail/coupon-detail",
-    "pages/address-switch/address-switch"
+    "pages/address-switch/address-switch",
+    "pages/region/region"
   ],
   "window":{
     "navigationBarBackgroundColor": "#e61773",

pages/address-switch/address-switch.js

@@ -24,6 +24,11 @@ Page({
   showSearchPanel: function(e){
     console.log(e)
   },
+  toRegion: function(e){
+    wx.navigateTo({
+      url: '../region/region'
+    });
+  },
   /**
    * 生命周期函数--监听页面加载
    */

pages/address-switch/address-switch.wxml

@@ -1,5 +1,5 @@
 <view class="area-search-bar">
-  <view class="city-select md-select">
+  <view class="city-select md-select" bindtap="toRegion">
     <text>{{geoAddress.city_name}}</text>
     <span class="icon icon-down"></span>
   </view>

pages/region/region.js

@@ -0,0 +1,155 @@
+// pages/region/region.js
+var util = require('../../utils/util.js');
+var ports = require('../../utils/ports.js');
+//获取app实例
+var appInstance = getApp();
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    searchKey: '',
+    searchList: [],
+    hotCity: [],
+    cityList: [],
+    allCity: [],
+    timer: null
+  },
+  getHotCity: function(){
+    util.wxRequest({
+      url: ports.cityList
+    }).then((res) => {
+      this.setData({
+        hotCity: res.data.hot_city_list
+      });
+    })
+  },
+  getCityData: function(){
+    util.wxRequest({
+      url: ports.initialAddress
+    }).then((res) => {
+      var newData = {};
+      for (var d in res.data) {
+        if (res.data[d]) {
+          newData[d] = res.data[d];
+        }
+      }
+      this.setData({
+        cityList: newData
+      });
+      this.getAllCity();
+    })
+  },
+  getAllCity: function(){
+    var olist = this.data.cityList,
+        list = [];
+    for (let i in olist) {
+      list = list.concat(olist[i]);
+    }
+    this.setData({
+      allCity: list
+    });
+  },
+  searchListWithKey: function(e){
+    if(e.detail.value !== ''){
+      this.setData({
+        searchList: this.data.allCity.filter(data => {
+          return data.region_name && data.region_name.indexOf(e.detail.value) !== -1
+        })
+      });
+    }else{
+      this.setData({
+        searchList: []
+      });
+    }
+  },  
+  searchRegion: function(e){
+    var _self = this;
+    if(this.data.timer){
+      return;
+    }
+    //添加计时器
+    function setTimer(){
+     return setTimeout(function () {
+        clearTimeout(_self.data.timer);
+        _self.setData({
+          searchList: _self.searchListWithKey(e),
+          timer: null
+        });
+      }, 300);
+    }
+    this.setData({
+      timer: setTimer()
+    });
+  },
+  selectItem: function(e) {
+    appInstance.globalData.geoAddress.city_name = e.currentTarget.dataset.regionName;
+    this.setData({
+      searchKey: ''
+    });
+    var pages = getCurrentPages();
+    var prevPage = pages[pages.length - 2]; //上一个页面对象
+    prevPage.setGeoAddress && prevPage.setGeoAddress();
+    wx.navigateBack({
+      delta: 1
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getHotCity();
+    this.getCityData();
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/region/region.json

@@ -0,0 +1 @@
+{}

pages/region/region.wxml

@@ -0,0 +1,35 @@
+<!--pages/region/region.wxml-->
+<view class="region-wrap">
+  <view class="search-wrap">
+    <input placeholder="输入城市或地区名称" class="textfield search-input" bindinput="searchRegion"/>
+  </view>
+
+  <view class="sub-list search-list" wx:if="{{searchList.length > 0}}">
+    <view class="item-list">
+      <view class="item" wx:for="{{searchList}}" bindtap="selectItem" data-region-name="{{item.region_name}}">
+        <text>{{item.region_name}}</text>
+      </view>
+    </view>
+  </view>
+
+  <view class="list section">
+      <view class="list-header">热门城市</view>
+      <view class="item-list tag-list">
+        <view wx:for="{{hotCity}}" wx:for-item="hotCityItem" bindtap="selectItem" data-region-name="{{hotCityItem.region_name}}">
+          <text>{{hotCityItem.region_name}}</text>
+        </view>
+      </view>
+  </view>
+
+  <view class="list">
+    <view class="sub-list" wx:for="{{cityList}}" wx:for-item="cityListItem" wx:for-index="cityListIdx">
+      <view class="list-header">{{cityListIdx}}</view>
+      <view class="item-list">
+        <view class="item" wx:for="{{cityListItem}}" wx:for-item="cityItem" bindtap="selectItem" data-region-name="{{cityItem.region_name}}">
+          <text>{{cityItem.region_name}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+</view>

pages/region/region.wxss

@@ -0,0 +1,86 @@
+/* pages/region/region.wxss */
+  page {
+    display: block;
+    min-height: 100%;
+    background-color: #eee;
+  }
+  .search-list {
+      position: absolute;
+      z-index: 9;
+      width: 100%;
+      top: 90rpx;
+  }
+  .textfield {
+      padding: 10rpx 20rpx;
+      border-radius: 10rpx;
+      border: none;
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
+  }
+  .search-wrap {
+      padding: 20rpx 35rpx;
+      border-bottom: 1px solid #ccc;
+      background: #fff;
+  }
+  .search-wrap .textfield{
+      font-size: 28rpx;
+      background: #e8e8e8;
+  }
+  .region-wrap {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+  }
+  .list .list-header{
+      display: flex;
+      justify-content: space-between;
+      padding: 30rpx 20rpx;
+      font-size: 32rpx;
+      border-bottom: 1px solid #cfcfcf;
+  }
+  .list .tag-list:after{
+      content: "";
+      display: table;
+      clear: both;
+  }
+  .list .tag-list view{
+      float: left;
+      box-sizing: border-box;
+      margin-bottom: 20rpx;
+      padding: 0 10rpx;
+      width: 25%;
+      font-size: 28rpx;
+      text-align: center;
+      overflow: hidden;
+  }
+  .list .tag-list view text{
+      display: inline-block;
+      width: 100%;
+      padding: 20rpx 0;
+      border: 1px solid #cfcfcf;
+      border-radius: 10rpx;
+  }
+  .list .tag-list view.active text{
+      background: #e61772;
+  }
+  .list .tag-list{
+    padding: 30rpx 10rpx;
+  }
+  .section {
+      margin-bottom: 20rpx;
+      background: #fff;
+      padding: 0 20rpx;
+  }
+  .sub-list .list-header{
+      padding: 10rpx 20rpx;
+      color: #b2b2b2;
+  }
+  .sub-list .item-list {
+      padding: 0 20rpx;
+      background: #fff;
+  }
+  .sub-list .item-list .item {
+      padding: 28rpx;
+      border-bottom: 1px solid #ccc;
+      font-size: 28rpx;
+  }

utils/ports.js

@@ -15,9 +15,15 @@ module.exports = {
     // 地址模块
     getLocation: wdomain + '/Location/getLocation',
     addressList: wdomain + '/address/addressList',
+    // 省市区接口
+    areaData: wdomain + '/address/getAreaData',
+    // 城市列表接口
+    cityList: wdomain + '/store/citylist',
+    // 搜索城市
+    searchArea: wdomain + '/Address/searchAreaData',
     // 有门店的省市区列表
     regionList: wdomain + '/store/regionList',
-
+    initialAddress: wdomain + '/Address/initialsAddressData',
     // 订单模块
     // 确认订单
     checkoutOrder: wdomain + '/order/checkoutOrder',