添加扫码成功操作页，修改主页面样式，更换主页图标

Liuyi

2024-10-16 7cbda90b02e31447122f1d22c9797b423d7bd9fc

 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>