一、功能需求
- 显示当前位置
- 从数据库获取所有门店的信息
- 各个门店：点击对应按钮实现打电话联系，导航到门店
- 与其他页面交互
- 点击门店信息，携带门店信息跳转到门店详情页 shopDetail
- 点击【选这家】按钮，携带门店信息跳转到首页 home
二、代码实现
1.shop.wxml
1 <!-- 用户当前位置 --> 2 <view class="current"> 3 <image src="/images/currentLocation.png" class="location"></image> 4 <text>{{currentAddress}}当前位置</text> 5 <image src="/images/down.png" class="down"></image> 6 </view> 7 8 <!-- 门店列表 --> 9 <view class="shopItem" wx:for="{{shopList}}"> 10 <view class="left" bindtap="toShopDetail" data-item="{{item}}"> 11 <view class="name">{{item.name}}</view> 12 <view class="rightLine"> 13 <view class="distance">距离您{{item.distance}}</view> 14 <view class="address">{{item.address}}</view> 15 </view> 16 <view class="workTime">营业时间：{{item.workTime}}</view> 17 </view> 18 <view class="right"> 19 <view class="chooseOK" bindtap="chooseShop" data-item="{{item}}">选这家</view> 20 <view class="img"> 21 <image src="/images/call.png" class="call" bindtap="callPhone" data-item="{{item}}"></image> 22 <image src="/images/navigate.png" class="navigate" bindtap="navigateToResturant" data-item="{{item}}"></image> 23 </view> 24 </view> 25 </view>
2.shop.wxss
1 Page{ 2 background-color:#F2F2F2; 3 } 4 /*当前位置*/ 5 .current{ 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 background-color: #fff; 10 padding: 20rpx; 11 } 12 .current .location{ 13 width: 45rpx; 14 height: 40rpx; 15 } 16 .current .down{ 17 width: 30rpx; 18 height: 30rpx; 19 } 20 21 22 /*门店列表*/ 23 .shopItem{ 24 margin: 20rpx; 25 border: 2prx solid #ff9966; 26 border-radius: 10rpx; 27 background-color: #fff; 28 display: flex; 29 } 30 .left{ 31 padding: 20rpx; 32 } 33 .rightLine{ 34 border-right: 1rpx solid gainsboro; 35 } 36 .name{ 37 font-size: 30rpx; 38 color: #ff9966; 39 margin-bottom: 10rpx; 40 } 41 .distance{ 42 font-size: 28rpx; 43 color: gray; 44 margin-bottom: 8rpx; 45 } 46 .address{ 47 font-size: 28rpx; 48 color: gray; 49 width: 500rpx; 50 white-space: nowrap; 51 text-overflow: ellipsis; 52 overflow: hidden; 53 margin-bottom: 10rpx; 54 } 55 .workTime{ 56 font-size: 24rpx; 57 color: #c3c3c3; 58 } 59 .right{ 60 display: flex; 61 flex-direction: column; 62 justify-content: space-around; 63 align-items: center; 64 margin: 10rpx; 65 } 66 .right .chooseOK{ 67 font-size: 28rpx; 68 color: #ffffff; 69 padding: 5rpx 15rpx; 70 background-color: #ff9966; 71 } 72 .right .img{ 73 display: flex; 74 justify-content: space-around; 75 } 76 .call,.navigate{ 77 width: 50rpx; 78 height: 50rpx; 79 margin: 10rpx; 80 }
3.shop.js
1 //用户当前位置的经度和维度 2 let longitudeUser = \'\' 3 let latitudeUser = \'\' 4 //所选门店的经度和纬度 5 let longitudeShop = \'\' 6 let latitudeShop = \'\' 7 //用户当前位置和所选门店的距离 8 let distance = \'\' 9 //门店列表 10 let shopList = [] 11 Page({ 12 data: { 13 //当前位置经度、纬度 14 latitude:"", 15 longitude:"", 16 //门店数据 17 shopList:[], 18 }, 19 20 onLoad: function (options) { 21 //调用自定义方法获取门店列表 22 this.getShopList() 23 //调用自定义方法获取用户当前位置 24 this.getCurrentLocation() 25 }, 26 27 //获取用户当前位置 28 getCurrentLocation(){ 29 wx.getLocation({ 30 type: \'wgs84\', 31 }).then(res=>{ 32 console.log("用户允许获取当前位置",res); 33 //用户当前位置的经度和维度 34 latitudeUser = Number(res.latitude) 35 longitudeUser = Number(res.longitude) 36 console.log("当前位置的经度latitudeUser",latitudeUser); 37 console.log("当前位置的纬度longitudeUser",longitudeUser); 38 this.setData({ 39 latitude:res.latitude, 40 longitude:res.longitude 41 }) 42 }).catch(err=>{ 43 console.log("用户拒绝获取当前位置",err); 44 wx.showModal({ 45 title:"授权当前位置", 46 content:"需要授权位置信息才可以导航，点击去设置开启位置权限", 47 confirmText:"去设置", 48 success(res){ 49 console.log("弹窗点击",res); 50 if(res.confirm){ 51 wx.openSetting() //调起客户端小程序设置界面 52 } 53 } 54 }) 55 }) 56 }, 57 58 //获取门店列表（自定义） 59 getShopList(){ 60 //获取门店列表数据 61 wx.cloud.database().collection("shop").get() 62 .then(res=>{ 63 console.log("门店数据获取成功",res.data); 64 shopList = res.data 65 this.setData({ 66 shopList:res.data, 67 }) 68 //获取距离 69 for (var i =0;i<shopList.length;i++){ 70 latitudeShop = res.data[i].latitude 71 longitudeShop = res.data[i].longitude 72 console.log("门店的经度",latitudeShop); 73 console.log("门店的纬度",longitudeShop); 74 res.data[i].distance = this.getDistance(latitudeUser, latitudeUser, latitudeShop, longitudeShop) 75 console.log("门店与当前位置的距离",res.data[i].distance); 76 this.setData({ 77 shopList:res.data, 78 }) 79 //在数组shopList的对象中添加新字段distance 80 var distance = "shopList["+i+"].distance"; 81 this.setData({ 82 [distance]:res.data[i].distance 83 }) 84 console.log("新的数组",shopList); 85 } 86 }).catch(err=>{ 87 console.log("门店数据获取失败",err); 88 }) 89 }, 90 91 //选中门店 92 chooseShop(e){ 93 console.log("选中的门店信息",e); 94 //携带门店名称、联系电话、地址、经度、纬度5个参数跳转到首页 95 wx.reLaunch({ 96 url: \'/pages/home/home?name=\' 97 +e.currentTarget.dataset.item.name 98 +\'&phoneNumber=\'+e.currentTarget.dataset.item.phoneNumber 99 +\'&latitude=\'+e.currentTarget.dataset.item.latitude 100 +\'&longitude=\'+e.currentTarget.dataset.item.longitude 101 +\'&address=\'+e.currentTarget.dataset.item.address, 102 }) 103 }, 104 105 //联系餐厅 106 callPhone(e){ 107 console.log("用户点击了点击电话按钮",e); 108 wx.makePhoneCall({ //调起拨打电话弹窗 109 phoneNumber:e.currentTarget.dataset.item.phoneNumber 110 }) 111 }, 112 113 //导航前往 114 navigateToResturant(e){ 115 console.log("用户点击了点击导航按钮",e); 116 let item = e.currentTarget.dataset.item 117 //获取用户当前位置 118 wx.getLocation({ 119 type:"gcj02", //gcj02 返回可用于 wx.openLocation 的坐标 120 }).then(res=>{ 121 console.log("用户允许获取当前位置",res); 122 //地图搜索目的地 123 wx.openLocation({ 124 name:item.name, 125 address:item.address, 126 latitude:item.latitude, 127 longitude: item.longitude, 128 scale:16 129 }) 130 }).catch(err=>{ 131 console.log("用户拒绝获取当前位置",err); 132 wx.showModal({ 133 title:"授权当前位置", 134 content:"需要授权位置信息才可以导航，点击去设置开启位置权限", 135 confirmText:"去设置", 136 success(res){ 137 console.log("弹窗点击",res); 138 if(res.confirm){ 139 wx.openSetting() //调起客户端小程序设置界面 140 } 141 } 142 }) 143 }) 144 }, 145 //携带门店信息跳转到详情页 146 toShopDetail(e){ 147 console.log("用户点击了门店",e); 148 //携带门店信息跳转到门店信息详情页 149 wx.navigateTo({ 150 url: \'/pages/shopDetail/shopDetail?name=\'+e.currentTarget.dataset.item.name 151 +\'&address=\'+e.currentTarget.dataset.item.address 152 +\'&phoneNumber=\'+e.currentTarget.dataset.item.phoneNumber 153 +\'&longitude=\'+e.currentTarget.dataset.item.longitude 154 +\'&latitude=\'+e.currentTarget.dataset.item.latitude 155 , 156 }) 157 }, 158 159 // 计算距离函数 160 Rad(d) { 161 //根据经纬度判断距离 162 return d * Math.PI / 180.0; 163 }, 164 165 //计算用户位置和门店的距离（自定义） 166 getDistance(lat1, lng1, lat2, lng2) { 167 // lat1用户的纬度 168 // lng1用户的经度 169 // lat2商家的纬度 170 // lng2商家的经度 171 var radLat1 = this.Rad(lat1); 172 var radLat2 = this.Rad(lat2); 173 var a = radLat1 - radLat2; 174 var b = this.Rad(lng1) - this.Rad(lng2); 175 var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); 176 s = s * 6378.137; 177 s = Math.round(s * 10000) / 10000; 178 s = s.toFixed(1) + \'km\' //保留两位小数 179 console.log(\'经纬度计算的距离:\' + s) 180 return s 181 }, 182 })
三、实现效果
