模仿老乡鸡点餐小程序选择门店功能

1.wxml

<!--pages/home/chooseShop/chooseShop.wxml-->
<wxs src="../../../common.wxs" module="common" />
<view class="choose_head">
  <view>
    <view class="choose_head_btn">附近门店</view>
  </view>
  <view class="choose_head_search" bindtap="goSearch">
    <image src="../../../icons/search.png" class="choose_head_search_icon"></image>
    <text>搜索</text>
  </view>
</view>

<view class="choose_main">
  <map id="map" longitude="118.789393" latitude="31.967154" scale="12" v-if="hasMarker" markers="{{markers}}" bindmarkertap="markertap" style="height:{{showMap == true?'160px':'0px'}}">
  </map>
  <view class="mapBtn" bindtap="mapChange">
    <text>{{showMap == true?'收起地图':'展开地图'}}</text>
    <image src="../../../icons/row.png" class="mapBtn_icon" style="{{row}}"></image>
  </view>

  <block wx:for="{{storeList}}" wx:for-item="store" wx:key="{{index}}">
    <view class="choose_item">
      <view class="choose_item_left">
        <view>
          <view class="choose_item_name">{{store.name}}</view>
          <view>
            <image src="../../../icons/address.png" style="width:8px;height:10px;margin-right:3px;"></image>
            <text style="margin-top:20px;">{{store.address}}</text>
          </view>
        </view>

        <view class="choose_item_flag">24h营业</view>
      </view>
      <view class="choose_item_right">
        <view class="buy_btn" data-storeid="{{store.storeId}}" bindtap="buy">去下单</view>
        <text style="font-size:11px;">距离{{common.inverse(store.distance)}}</text>
        <view class="choose_item_right_btn">
          <view data-phone="{{store.phone}}" bindtap="callPhone">
            <image src="../../../icons/phone.png" style="width:33px;height:33px;"></image>
          </view>

          <view data-store="{{store}}" bindtap="openLocation">
            <image src="../../../icons/plane.png" style="width:33px;height:33px;margin-left:10px;"></image>
          </view>
        </view>
      </view>
    </view>
  </block>
</view>

2.js

// pages/home/chooseShop/chooseShop.js
const httpRequest = require("../../../providers/httpRequest");
const globalData = getApp().globalData;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    markers: [{
      iconPath: "/icons/icon_address.png", //浮标图片路径，推荐png图片
      id: 0, // Id支持多个，方便后期点击浮标获取相关信息
      latitude: 31.967154, // 经度
      longitude: 118.789393, //纬度
      width: 30, // 浮标宽度
      height: 30, // 浮标高度
    }],
    hasMarker: false,//是否显示标记
    showMap: true,//是否展开地图
    row: '',//展开、收起图标的样式
    storeList: [],//附近门店列表
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

    this.getLocation()

  },

  // 点击浮标
  markertap(e) { // 这是一个事件，在wxml中绑定这个事件，点击浮标后
    wx.openLocation({ //此设置属于高级APi,可以打开微信内置地图组件
      latitude: this.data.storeList[0].lat,
      longitude: this.data.storeList[0].lng,
    });
  },

  /** 获取当前地理位置 */
  getLocation: function() {
    var _this = this;
    // 查看用户是否授权获取当前地理位置
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        // _location = {
        //   latitude: res.latitude, // 纬度
        //   longitude: res.longitude // 经度
        // }
        // 获取门店列表
        _this.getStoreList(res.latitude, res.longitude);
      },
      fail: function(err) {
        if (err.errMsg == "getLocation:fail auth deny") { // 未授权
          wx.showModal({
            title: '是否授权获取当前位置',
            content: '需要获取您的地理位置，请确认授权，否则无法获取您附近的门店信息',
            success: function(res) {
              if (res.confirm) {
                // 前往设置授权
                wx.openSetting();
              }
            }
          })
        }
      }
    });
  },

  /** 获取门店列表 */
  getStoreList: function(lat, lng) {
    var _this = this;
    httpRequest.get("xxx/xxx", {
      lat: lat || _location.latitude, // 纬度
      lng: lng || _location.longitude, // 经度
      order: "range",
    }, function(data) {
      console.log(data.result.data)
      if (data.code == 200) {
        if (data.result.data.length > 0) {
          var storeList = data.result.data;
          _this.setData({
            storeList: storeList,
            hasMarker: true,
            markers: [{
              iconPath: "/icons/icon_address.png", //浮标图片路径，推荐png图片
              id: 0, // Id支持多个，方便后期点击浮标获取相关信息
              latitude: storeList[0].lat, // 经度
              longitude: storeList[0].lng, //纬度
              width: 30, // 浮标宽度
              height: 30, // 浮标高度
              callout: {//气泡框
                content: storeList[0].name,
                color: '#4c5264',
                bgColor: "#fff",
                padding: "5px 10px",
                display: "ALWAYS",//气泡框是否常显
              }
            }]
          });
          console.log(_this.data.markers)
        }
        console.log(_this.data.storeList)
      } else {
        wx.showModal({
          content: data.message,
        })
      }
    })
  },
  // 搜索
  goSearch: function() {
    var that = this;
    wx.chooseLocation({
      latitude: this.data.storeList.length > 0 ? this.data.storeList[0].lat : '',
      longitude: this.data.storeList.length > 0 ? this.data.storeList[0].lng : '',
      success: function(res) {
        // console.log(res);
        that.getStoreList(res.latitude, res.longitude)
      }
    })
  },
  // 是否展示地图
  mapChange() {
    if (this.data.showMap == true) {
      this.setData({
        showMap: !this.data.showMap,
        row: "transform:rotate(180deg)"
      });
    } else {
      this.setData({
        showMap: !this.data.showMap,
        row: "transform:rotate(360deg)"
      });
    }
  },

  /**拨打客服电话 */
  callPhone: function(e) {
    wx.makePhoneCall({
      phoneNumber: e.currentTarget.dataset.phone
    });
  },

  // 打开地图查看位置
  openLocation: function(e) {
    wx.openLocation({
      latitude: e.currentTarget.dataset.store.lat,
      longitude: e.currentTarget.dataset.store.lng,
    })
  },

  // 去下单
  buy(e) {
    var storeid = e.currentTarget.dataset.storeid;
    wx.setStorageSync('storeid', storeid)
    if (!wx.getStorageSync('token')) {
      this.outLogin()
    } else {
      wx.switchTab({
        url: '../home?storeId=' + storeid,
      })
    }
  },

  outLogin: function() {
    wx.showModal({
      content: '您已退出登录，请先登录账号',
      complete: function() {
        wx.switchTab({
          url: '../../mine/mine',
        })
      }
    });
  },
})

3.wxss

/* pages/home/chooseShop/chooseShop.wxss */

page {
  background-color: rgba(0, 0, 0, 0.04);
}

.choose_head {
  padding: 0 20px;
  background-color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.choose_head_btn {
  padding: 10px 0;
  box-sizing: border-box;
  color: #ff6969;
  border-bottom: 2px solid #ff6969;
}

.choose_head_search {
  color: #727072;
  font-size: 12px;
  padding: 5px 13px;
  background-color: #f6f6f6;
  border-radius: 20px;
}

.choose_head_search_icon {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 3px;
}

.choose_main {
  padding: 10px;
}

#map {
  width: 100%;
  transition: height 0.3s;
}

.mapBtn {
  text-align: center;
  padding: 7px;
  font-size: 12px;
  color: #4c5264;
  background-color: #fff;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.mapBtn_icon {
  width: 15px;
  height: 8px;
  margin-left: 5px;
  transition: all 0.3s;
}

.choose_item {
  padding: 10px 15px;
  background-color: #fff;
  color: #424242;
  font-size: 12px;
  margin-bottom: 15px;
  display: flex;
}

.choose_item_left {
  width: 70%;
  border-right: 1px solid #e7eaf0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.choose_item_name {
  font-size: 16px;
  font-weight: bold;
  color: #4c5264;
}

.choose_item_flag {
  color: #ff6969;
  font-size: 11px;
  width: 50px;
  border: 1px solid #ff6969;
  text-align: center;
  border-radius: 5px;
}

.choose_item_right {
  width: 30%;
  box-sizing: border-box;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.choose_item_right_btn {
  display: flex;
  margin-top: 10px;
}

.buy_btn {
  font-size: 15px;
  color: #ff6969;
}