微信小程序实现选择地区demo，记录最近访问的地区

最终效果图：
在这里插入图片描述

index.wxml

<view class="container">
    <view class="search_contaniner">
      <view class="search_box">
          <input type="text" placeholder="省/市级/区县级" value="{{search_cont}}" bindinput="handleInput"/>
          <icon type="clear" size="32rpx" class="searhc_clear" wx:if="{{search_cont != ''}}" bindtap="handleClear"></icon>
      </view>
    </view>
</view>
<block wx:if="{{ search_cont == '' }}">
  <view class="now_location container">
        <view class="now_location_l">
          <text>当前：</text>
          <text>{{group_name}}</text>
        </view>
        <view class="now_location_r">
          <!-- <text class="iconfont icon-dingwei"></text>
          <text>重新定位</text> -->
        </view>
  </view>
  <view class="container search_view_content">
    <view class="search_view_item" wx:if="{{history_list.length > 0}}">
      <view class="search_view_title">最近访问</view>
      <view class="search_view_block_list">
        <block wx:for="{{history_list}}" wx:key="index">
          <view class="search_view_block" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name}}">{{item.group_name}}</view>
        </block>
      </view>
    </view>
    <view class="search_view_item">
      <view class="search_view_title">省级</view>
      <view class="search_view_block_list">
        <view class="search_view_block" bindtap="checkGroupid" data-groupid="61" data-groupName="陕西省">陕西省</view>
      </view>
    </view>
    <view class="search_view_item">
      <view class="search_view_title">市级</view>
      <view class="search_view_block_list">
        <block wx:for="{{list}}" wx:key="index">
          <view class="search_view_block" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name}}">{{item.group_name}}</view>
        </block>
      </view>
    </view>
    <block wx:for="{{list}}" wx:key="index">
      <view class="search_view_item" wx:if="{{item.children.length > 0}}">
        <view class="search_view_title">{{item.group_name}}</view>
        <view class="search_view_ul">
          <block wx:for="{{item.children}}" wx:key="index" wx:for-item="group">
            <view class="search_view_li" bindtap="checkGroupid" data-groupid="{{group.group_id}}" data-groupName="{{group.group_name}}">{{group.group_name}}</view>
          </block>
        </view>
      </view>
    </block>
  </view>
</block>
<block wx:else>
  <view class="container search_content">
    <block wx:if="{{search_list.length <= 0}}">
      <view class="search_empty">抱歉，未找到相关位置，可尝试修改后重试</view>
    </block>
    <block wx:else>
      <view class="search_ul">
        <block wx:for="{{search_list}}" wx:key="index">
          <view class="search_li">
            <view class="iconfont icon-dingwei1 search_li_l"></view>
            <view class="search_li_r" bindtap="checkGroupid" data-groupid="{{item.group_id}}" data-groupName="{{item.group_name1 + item.group_name}}">
              <view>
                <text class="setRed">{{item.group_name1}}</text>
                <text>{{item.group_name}}</text>
              </view>
              <text class="iconfont icon-xiangyoujiantou"></text>
            </view>
          </view>
        </block>
      </view>
    </block>
    

    
  </view>
</block>

index.js

const app = new getApp();
Page({
  data: {
    group_name: app.globalData.group_info.group_name, // 当前所选区划名
    search_cont: '', // 搜索关键词
    list: [], // 所有市区及地区列表
    history_list: [], // 最近访问 最多保存3个
    search_list: [], // 搜索后显示的列表
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  	// 获取是否存有历史数据
    const history_data = wx.getStorageSync('history_data');
    if(history_data){
      this.setData({
        history_list: JSON.parse(history_data)
      })
    }
    // 获取所有区划
    app.$http.get('get_list_groupAll', {}).then(res => {
      this.setData({
        list: res.content
      })
    }).catch(err => {
      console.log(err)
    });
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      group_name: app.globalData.group_info.group_name
    })
  },
  // 点击选择地区
  checkGroupid(e){
    console.log(e)
    const group_id = e.target.dataset.groupid;
    const group_name = e.target.dataset.groupname;
    app.globalData.group_info = {
      group_id: group_id,
      group_name: group_name
    };
    // 点击选择后将值记录至最近访问数组
    // const 
    this.setHistoryData({group_id: group_id, group_name: group_name});
    // 选择完毕后返回首页
    wx.navigateBack({
      delta: 1,
    })
  },
  // 搜索框触发输入事件
  handleInput(e){
    this.searchGroup(e.detail.value);
    this.setData({
      search_cont: e.detail.value
    })
  },
  // 搜索时触发，查询与搜索内容匹配的所有区划
  searchGroup(keys){
    const list = this.data.list;
    const new_list = [];
    list.forEach(item1 => {
      if(keys == item1.group_name.slice(0, keys.length)){
        new_list.push({group_id: item1.group_id, group_name: item1.group_name});
        if(item1.children.length > 0){
          item1.children.forEach(item2 => {
            if(keys == item2.group_name.slice(0, keys.length)){
              new_list.push({group_id: item2.group_id, group_name: item2.group_name});
            }
          })
        }
      }
    })
    this.setData({
      search_list: this.setColorList(keys, new_list)
    })
    console.log(this.data.search_list)
  },
  // 点击清空搜索
  handleClear(){
    this.setData({
      search_cont: '',
      search_list: []
    })
  },
  // 为搜索列表设置和关键词相等的字符设置颜色
  setColorList(keys, list){
    if(keys == '' || list.length < 1){
      return [];
    }
    var new_list = [];
    list.forEach((item, index) => {
      let val = {};
      val.group_id = item.group_id;
      val.group_name1 = item.group_name.slice(0, keys.length);
      val.group_name = item.group_name.replace(val.group_name1, '');
      new_list[index] = val;
    })
    return new_list;
  },
  // 设置历史数据
  setHistoryData(data={}){
    let history_list = this.data.history_list;
    if(JSON.stringify(data) != '{}'){
      history_list.unshift(data);
    }
    // 去重
    let uniqueArr = Array.from(new Set(history_list.map(JSON.stringify))).map(JSON.parse);
    // 检测最近访问数量是否超过3条，如超过则删除最后一条
    if(uniqueArr.length > 3){
      uniqueArr.splice(3, 1)
    }
    // console.log('unique', uniqueArr);
    this.setData({
      history_list: uniqueArr
    })
    wx.setStorageSync('history_data', JSON.stringify(uniqueArr))
  }

})

index.wxss

/* pages/search/index.wxss */
page{
  background-color: #eee;
}
.search_box{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 30rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search_box input{
  font-size: 28rpx;
  /* margin-left: 30rpx; */
}

.now_location{
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  border-radius: 15rpx;
}
.now_location text{
  font-size: 28rpx;
  color: #333;
}
.now_location_r .iconfont{
  margin-right: 10rpx;
}

.search_view_content{
  background-color: #fff;
  margin-top: 20rpx;
}
.search_view_item{
  margin-top: 30rpx;
}
.search_view_item:first-child{
  margin-top: 0;
}
.search_view_title{
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.search_view_block_list{
  display: grid;
  grid-template-columns: repeat(4, 23%);
  grid-gap: 20rpx;
}
.search_view_block{
  padding: 20rpx 0;
  text-align: center;
  font-size: 28rpx;
  border: 1px solid #ccc;
  border-radius: 15rpx;
  /* width: 23%; */
}

/* .search_view_ul{} */
.search_view_li{
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  font-size: 28rpx;
}
.search_view_li:first-child{
  padding-top: 0;
}

.search_content{
  min-height: 85vh;
  background-color: #fff;
}
.search_empty{
  text-align: center;
  font-size: 28rpx;
  color: #333;
}
.search_li{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search_li_l{
  margin-right: 16rpx;
}
.search_li_r{
  flex: 2;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setRed{
  color: red;
}