添加获取用户位置

Liuyi

2024-10-09 16c98154ca67d48665ed3a83874d43fdc626ac60

添加获取用户位置

 App.vue

@@ -2,9 +2,11 @@
    import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
    import { wxLoginApi } from './api/index.js'
    onLaunch(() => {
        uni.removeStorageSync('openId');
        if(!uni.getStorageSync('openId')){
            wx.login({
                success:async (res1)=>{
                    //存储微信登录的code
                    uni.setStorageSync('code',res1.code)
                    await wxLoginApi({code:res1.code}).then((res2) =>{
                    uni.setStorageSync('openId',res2.data.userId)

 api/index.js

@@ -34,8 +34,12 @@
export function deleteAddressApi(id){
    return request(`/userAddress/remove?id=${id}`,{},'GET')
}
//设置默认值
//设置地址默认值
export function setAddressDefaultApi(id){
    return request(`/userAddress/editDefault?id=${id}`,{},'GET')
}
//获取设备站点列表
export function searchFacilityApi(data){
    return request('/waterFacility/search',data,'POST')
}


 manifest.json

@@ -54,7 +54,13 @@
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
        "usingComponents" : true,
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于计算直饮水设备与您的距离"
            }
        },
        "requiredPrivateInfos": ["getLocation"]
    },
    "mp-alipay" : {
        "usingComponents" : true

 pages.json

@@ -73,7 +73,7 @@
            }
        },
        {
            "path" : "pages/deviceList/index",
            "path" : "pages/facilityList/index",
            "style": {
                "navigationStyle":"custom"
            }

 pages/deviceList/index.vue

文件已删除

 pages/facilityList/index.vue

对比新文件
@@ -0,0 +1,143 @@
<template>
    <view class="container">
        <navbar title = '设备列表'></navbar>
        <view class="content">
            <view class="list">
                <block v-for="(item,index) in deviceList" :key="index">
                    <view class="item">
                        <view class="item-img">
                            <image src="../../static/logo.png" alt=''></image>
                        </view>
                        <view class="item-info">
                            <view class="info-name">{{item.facilityName}}</view>
                            <view class="info-addr">
                                <text class="addr-text">地址：{{item.address}}</text>
                                <view>
                                    <image src="../../static/images/index/icon22.png" alt=''></image>
                                    <text>{{item.distance}}km</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<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) {
        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 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)
                }
            })
        })
    })
</script>

<style lang="scss">
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#E8EFFF);
            padding:32rpx 32rpx 100rpx;
            box-sizing: border-box;
            .list{
                width:100%;
                height:100%;
                overflow: scroll;
                // background-color: #f1ffef;
                .item{
                    height:200rpx;
                    width:100%;
                    background-color: #FFFFFF;
                    border-radius: 24rpx;
                    padding:0 20rpx;
                    margin-bottom:20rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items:center;
                    .item-img{
                        image{
                            width:130rpx;
                            height: 130rpx;
                        }
                    }
                    .item-info{
                        display: flex;
                        flex-direction: column;
                        margin-left:20rpx;
                        justify-content: space-between;
                        .info-name{
                            color:#222c35;
                        }
                        .info-addr{
                            display: flex;
                            justify-content: space-between;
                            align-items:center;
                            .addr-text{
                                width:340rpx;
                                height:80rpx;
                                color: #6a6e75;
                                font-size:26rpx;
                            }
                            view{
                                display: flex;
                                justify-content: space-between;
                                align-items:center;
                                image{
                                    width:50rpx;
                                    height:50rpx;
                                }
                                text{
                                    color: #6a6e75;
                                    font-size:26rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 pages/index/index.vue

@@ -149,7 +149,7 @@
                    <image src="../../static/images/index/home21.png" alt=""></image>
                    <view>送水到家</view>
                </view>
                <view @click="navTo('/pages/deviceList/index')" class="box1-bg box1-two">
                <view @click="navTo('/pages/facilityList/index')" class="box1-bg box1-two">
                    <image src="../../static/images/index/icon22.png" alt=""></image>
                    <view>附近设备</view>
                    <!-- <view>账户余额（元)</view>

 unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
{
  "hash": "bb2e2c43",
  "configHash": "539dec94",
  "lockfileHash": "f3d35e11",
  "browserHash": "ee67bce4",
  "hash": "01069312",
  "configHash": "14deb472",
  "lockfileHash": "8eeba737",
  "browserHash": "7ec93261",
  "optimized": {},
  "chunks": {}
}

 unpackage/dist/dev/mp-weixin/api/index.js

@@ -30,6 +30,9 @@
function setAddressDefaultApi(id) {
  return util_request.request(`/userAddress/editDefault?id=${id}`, {}, "GET");
}
function searchFacilityApi(data) {
  return util_request.request("/waterFacility/search", data, "POST");
}
exports.creatUserArchive = creatUserArchive;
exports.deleteAddressApi = deleteAddressApi;
exports.editAddressApi = editAddressApi;
@@ -38,5 +41,6 @@
exports.getUserInfo = getUserInfo;
exports.getVipInfoApi = getVipInfoApi;
exports.searchAddress = searchAddress;
exports.searchFacilityApi = searchFacilityApi;
exports.setAddressDefaultApi = setAddressDefaultApi;
exports.wxLoginApi = wxLoginApi;

 unpackage/dist/dev/mp-weixin/app.js

@@ -15,12 +15,13 @@
  "./pages/addressAdd/index.js";
  "./pages/addressLocate/index.js";
  "./pages/success/index.js";
  "./pages/deviceList/index.js";
  "./pages/facilityList/index.js";
}
const _sfc_main = {
  __name: "App",
  setup(__props) {
    common_vendor.onLaunch(() => {
      common_vendor.index.removeStorageSync("openId");
      if (!common_vendor.index.getStorageSync("openId")) {
        common_vendor.wx$1.login({
          success: async (res1) => {

 unpackage/dist/dev/mp-weixin/app.json

@@ -12,11 +12,19 @@
    "pages/addressAdd/index",
    "pages/addressLocate/index",
    "pages/success/index",
    "pages/deviceList/index"
    "pages/facilityList/index"
  ],
  "window": {
    "navigationStyle": "custom"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于计算直饮水设备与您的距离"
    }
  },
  "requiredPrivateInfos": [
    "getLocation"
  ],
  "usingComponents": {
    "navbar": "/components/navbar/navbar",
    "da-tree": "/components/da-tree/index"

 unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -92,7 +92,7 @@
        m: common_assets._imports_4,
        n: common_vendor.o(($event) => navTo("/pages/sendWater/index")),
        o: common_assets._imports_1$1,
        p: common_vendor.o(($event) => navTo("/pages/deviceList/index")),
        p: common_vendor.o(($event) => navTo("/pages/facilityList/index")),
        q: common_assets._imports_6,
        r: common_vendor.o(($event) => toScan()),
        s: common_vendor.f(functionList.value, (item, index, i0) => {