hookehuyr

feat(ActivitiesCover): 改进位置授权和错误处理逻辑

添加位置获取失败状态和重试功能
优化位置授权提示样式和交互
隐藏图片预览组件的索引显示
......@@ -52,6 +52,7 @@
.location-tip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24rpx;
......@@ -60,6 +61,20 @@
border-radius: 12rpx;
margin-bottom: 32rpx;
backdrop-filter: blur(10rpx);
cursor: pointer;
transition: all 0.3s ease;
&:active {
background-color: rgba(255, 247, 230, 0.7);
transform: scale(0.98);
}
.tip-content {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
}
}
.tip-icon {
......@@ -73,6 +88,21 @@
font-weight: 500;
}
.tip-retry {
font-size: 22rpx;
color: #1890ff;
text-decoration: underline;
}
.location-error {
background-color: rgba(255, 241, 240, 0.9);
border: 1rpx solid rgba(255, 163, 158, 0.8);
.tip-text {
color: #cf1322;
}
}
.join-button {
width: 100%;
height: 88rpx;
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-04 15:34:50
* @LastEditTime: 2025-09-04 22:34:52
* @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
* @Description: 活动海报页面 - 展示活动信息并处理定位授权
-->
......@@ -24,9 +24,22 @@
<!-- 底部按钮区域 -->
<view class="bottom-section">
<view v-if="!hasLocationAuth" class="location-tip">
<view class="tip-icon">📍</view>
<view class="tip-text">需要获取您的位置信息来参与活动</view>
<!-- 未授权定位提示 -->
<view v-if="!hasLocationAuth && !locationError" class="location-tip" @click="retryGetLocation">
<view class="tip-content">
<view class="tip-icon">📍</view>
<view class="tip-text">需要获取您的位置信息来参与活动</view>
</view>
<view class="tip-retry">点击重新获取</view>
</view>
<!-- 位置获取失败提示 -->
<view v-if="hasLocationAuth && locationError" class="location-tip location-error" @click="retryGetLocation">
<view class="tip-content">
<view class="tip-icon">⚠️</view>
<view class="tip-text">可能是网络问题,获取位置信息失败</view>
</view>
<view class="tip-retry">点击重新获取</view>
</view>
<nut-button
......@@ -37,7 +50,7 @@
:loading="isJoining"
@click="checkFamilyStatusAndJoinActivity"
>
{{ hasLocationAuth ? '进入活动' : '参加活动' }}
{{ hasLocationAuth && !locationError ? '进入活动' : '参加活动' }}
</nut-button>
</view>
......@@ -100,6 +113,7 @@ const defaultPoster = 'https://cdn.ipadbiz.cn/lls_prog/images/welcome_1.png';
// 页面状态
const hasLocationAuth = ref(false) // 是否已授权定位
const locationError = ref(false) // 位置获取是否失败
const isJoining = ref(false) // 是否正在加入活动
const userLocation = ref({ lng: null, lat: null }) // 用户位置信息
const hasJoinedFamily = ref(false);
......@@ -161,6 +175,7 @@ const checkLocationAuth = async () => {
*/
const getUserLocation = async () => {
try {
locationError.value = false // 重置错误状态
const location = await Taro.getLocation({
type: 'gcj02'
})
......@@ -177,6 +192,8 @@ const getUserLocation = async () => {
if (error.errMsg && error.errMsg.includes('auth deny')) {
// 用户拒绝授权,引导用户手动开启
hasLocationAuth.value = false
locationError.value = false
await Taro.showModal({
title: '需要位置权限',
content: '参与活动需要获取您的位置信息,请在设置中开启位置权限',
......@@ -188,6 +205,8 @@ const getUserLocation = async () => {
}
})
} else {
// 网络或其他问题导致的获取失败
locationError.value = true
Taro.showToast({
title: '获取位置失败',
icon: 'none'
......@@ -224,6 +243,25 @@ const checkFamilyStatusAndJoinActivity = async () => {
/**
* 重新获取位置信息
*/
const retryGetLocation = async () => {
try {
const success = await getUserLocation()
if (success) {
hasLocationAuth.value = true
locationError.value = false
Taro.showToast({
title: '位置获取成功',
icon: 'success'
})
}
} catch (error) {
console.error('重新获取位置失败:', error)
}
}
/**
* 处理参加活动按钮点击
*/
const handleJoinActivity = async () => {
......
......@@ -112,6 +112,7 @@
v-model:show="previewVisible"
:images="previewImages"
:init-no="0"
:show-index="false"
@close="closePreview"
/>
......