From 7cbda90b02e31447122f1d22c9797b423d7bd9fc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 16 十月 2024 17:26:06 +0800
Subject: [PATCH] 添加扫码成功操作页，修改主页面样式，更换主页图标
---
pages/facilityList/index.vue | 69 ++++++++++++++++++----------------
1 files changed, 37 insertions(+), 32 deletions(-)
diff --git a/pages/facilityList/index.vue b/pages/facilityList/index.vue
index 7f39c05..d6ee2a7 100644
--- a/pages/facilityList/index.vue
+++ b/pages/facilityList/index.vue
@@ -10,7 +10,7 @@
</view>
<view class="item-info">
<view class="info-name">{{item.facilityName}}</view>
- <view class="info-addr">
+ <view class="info-addr" @click="openMap(item.lat,item.lon)">
<text class="addr-text">地址：{{item.address}}</text>
<view>
<image src="../../static/images/index/icon22.png" alt=''></image>
@@ -28,47 +28,52 @@
<script setup>
import { onMounted, ref } from 'vue'
import { searchFacilityApi } from '../../api/index.js'
- const deviceList = ref([
- {facilityName:'清源直饮水',address:'重庆市北碚区蔡家岗街道工业互联网产业园',distance:'30.12'},
- {facilityName:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
- {facilityName:'清源直饮水',address:'重庆市北碚区蔡家岗街道',distance:'30.12'},
- ])
- const latitudeUser = ref()
- const longitudeUser = ref()
- // 根据经纬度计算距离,根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
- function getDistances(lat1, lng1, lat2, lng2) {
+ const deviceList = ref([])
+ const userLocation = ref()
+ //获取设备信息
+ async function getFacilityList(){
+ await searchFacilityApi({limit:20,page:1}).then((res1) =>{
+ if(res1.code == 200){
+ deviceList.value = []
+ res1.data.list.forEach((item) =>{
+ //计算用户与饮水设备距离
+ let preDistance = getDistances(userLocation.value.lat,userLocation.value.lon,item.latitude,item.longitude)
+ deviceList.value.push({
+ facilityName:item.facilityName,
+ address:item.address,
+ distance:preDistance.km,
+ lat:item.latitude,
+ lon:item.longitude,
+ })
+ })
+ console.log('deviceList.value',deviceList.value)
+ }
+ })
+ }
+ // 根据经纬度计算距离,根据经纬度计算距离，参数分别为第一点的纬度，经度（用户）；第二点的纬度，经度(设备)
+ function getDistances(lat1, lon1, lat2, lon2) {
let EARTH_RADIUS = 6378.137;// 地球半径
let radLat1 = lat1 * Math.PI / 180.0; //lat1 * Math.PI / 180.0=>弧度计算
let radLat2 = lat2 * Math.PI / 180.0;
let a = radLat1 - radLat2;
- let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
+ let b = lon1 * Math.PI / 180.0 - lon2 * Math.PI / 180.0;
let 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)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;// 输出为公里
return { m: s * 1000, km: Number(s.toFixed(2)) }
}
- onMounted(async() =>{
- uni.getLocation({type: 'gcj02'}).then(async(res) =>{
- console.log('位置',res)
- latitudeUser.value = res.latitude
- longitudeUser.value = res.longitude
-
- await searchFacilityApi({limit:20,page:1}).then((res) =>{
- if(res.code == 200){
- // deviceList.value = []
- res.data.list.forEach((item) =>{
-
- let preDistance = getDistances(latitudeUser.value,106.4003121,item.latitude,item.longitude)
- deviceList.value.push({
- facilityName:item.facilityName,
- address:item.address,
- distance:preDistance.km
- })
- })
- console.log('deviceList.value',deviceList.value)
- }
- })
+ //打开地图导航
+ function openMap(lat,lon){
+ uni.openLocation({
+ latitude: parseFloat(lat),
+ longitude: parseFloat(lon),
+ scale:18
})
+ }
+ onMounted(async() =>{
+ userLocation.value = JSON.parse(uni.getStorageSync('userLocation'))
+ console.log('storage',userLocation.value)
+ await getFacilityList()
})
</script>
--
Gitblit v1.9.3