134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
<template>
|
||
<view class="location_view" v-if="locationShow" :style="{'top':headerHeight+38+'px'}">
|
||
<view class="location_arrows"></view>
|
||
<view class="location_content">
|
||
<view class="location_close" @click="close()">
|
||
<image class="location_close_img" src="../../static/close.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="location_text">为了更准确定位附近门店，建议您</view>
|
||
<view class="location_btn" @click="handleGetLocation()">开启定位</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { frontstorelist } from '@/server/api';
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const { headerHeight,locationShow,storeName,storeId,latitude,longitude,locationName } = storeToRefs(counterStore);
|
||
const close = () => {
|
||
locationShow.value = false
|
||
}
|
||
const handleGetLocation = () => {
|
||
// 1. 检查是否已授权
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userLocation']) {
|
||
// 已授权，直接获取定位
|
||
getLocation();
|
||
} else {
|
||
// 未授权，发起授权请求
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success: () => getLocation(),
|
||
fail: () => showAuthGuide()
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
// 获取定位
|
||
const getLocation = () => {
|
||
uni.getLocation({
|
||
type: 'gcj02', // 微信小程序必须用 gcj02 坐标系
|
||
success: (res) => {
|
||
if(!storeName.value){
|
||
locationShow.value = false;
|
||
const params = {latitude:res.latitude,longitude:res.longitude,page:1,limit:1}
|
||
return frontstorelist(params).then(({data}) => {
|
||
storeName.value = data.list[0].name;
|
||
storeId.value = data.list[0].id;
|
||
latitude.value = res.latitude;
|
||
longitude.value = res.longitude;
|
||
})
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
storeName.value = '';
|
||
storeId.value = '';
|
||
latitude.value = '';
|
||
longitude.value = '';
|
||
locationName.value = "未获取到定位"
|
||
locationShow.value = true
|
||
}
|
||
});
|
||
};
|
||
|
||
// 引导用户手动开启授权
|
||
const showAuthGuide = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '需要位置权限才能使用该功能，是否去设置？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting(); // 跳转权限设置页
|
||
}
|
||
}
|
||
});
|
||
};
|
||
//生命周期钩子
|
||
onMounted(() => {});
|
||
onShow(() => {
|
||
getLocation();
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.location_view{
|
||
position: fixed;
|
||
left: 10px;
|
||
z-index: 99;
|
||
.location_arrows{
|
||
margin-left: 40rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 18rpx solid transparent;
|
||
border-right: 18rpx solid transparent;
|
||
border-bottom: 18rpx solid rgba(0, 0, 0, 0.70);
|
||
}
|
||
.location_content{
|
||
background-color: rgba(0, 0, 0, 0.70);
|
||
border-radius: 20rpx;
|
||
padding: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content:space-around;
|
||
.location_close{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.location_close_img{
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
}
|
||
.location_text{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
margin-right: 20rpx;
|
||
}
|
||
.location_btn{
|
||
background-color: #D9D9D9;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #000000;
|
||
padding: 8rpx 20rpx 8rpx 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |