feat(活动海报): 优化按钮逻辑并改进样式

重构活动按钮文本显示逻辑，根据用户状态显示不同文本改进页面样式包括背景渐变、按钮阴影和交互效果移除未使用的头像变量并优化定位授权检查流程

feat(活动海报): 优化按钮逻辑并改进样式
重构活动按钮文本显示逻辑，根据用户状态显示不同文本改进页面样式包括背景渐变、按钮阴影和交互效果移除未使用的头像变量并优化定位授权检查流程
hookehuyr
Commit 3919b6e7d42e20064c4d6cd4384480aaf4e613b7 3919b6e7 1 parent 95be378c
Showing 2 changed files with 99 additions and 50 deletions
src/pages/ActivitiesCover/index.less
src/pages/ActivitiesCover/index.vue
--- a/src/pages/ActivitiesCover/index.less
View file @3919b6e
+++ b/src/pages/ActivitiesCover/index.less
View file @3919b6e
@@ -11,7 +11,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 300rpx); // 减去底部区域的高度，确保背景图不被遮挡
     object-fit: contain;
     object-position: top center;
     z-index: 1;
@@ -45,9 +45,19 @@
     right: 0;
     padding: 40rpx;
     padding-bottom: 180rpx; // 为底部导航留出空间
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+    background: linear-gradient(
-    backdrop-filter: blur(20rpx);
+        transparent 0%,
+        rgba(0, 0, 0, 0.1) 20%,
+        rgba(0, 0, 0, 0.3) 50%,
+        rgba(0, 0, 0, 0.6) 80%,
+        rgba(0, 0, 0, 0.8) 100%
+    );
+    backdrop-filter: blur(30rpx);
+    -webkit-backdrop-filter: blur(30rpx);
     z-index: 5;
+
+    // 增加渐变高度，让过渡更自然
+    min-height: 300rpx;
 }
 .location-tip {
@@ -56,19 +66,22 @@
     align-items: center;
     justify-content: center;
     padding: 24rpx;
-    background-color: rgba(255, 247, 230, 0.9);
+    background-color: rgba(255, 247, 230, 0.95);
-    border: 1rpx solid rgba(255, 213, 145, 0.8);
+    border: 1rpx solid rgba(255, 213, 145, 0.9);
-    border-radius: 12rpx;
+    border-radius: 16rpx;
     margin-bottom: 32rpx;
-    backdrop-filter: blur(10rpx);
+    backdrop-filter: blur(20rpx);
+    -webkit-backdrop-filter: blur(20rpx);
     cursor: pointer;
     transition: all 0.3s ease;
-    
+    box-shadow: 0 4rpx 16rpx rgba(255, 213, 145, 0.3), 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+
     &:active {
-        background-color: rgba(255, 247, 230, 0.7);
+        background-color: rgba(255, 247, 230, 0.8);
         transform: scale(0.98);
+        box-shadow: 0 2rpx 8rpx rgba(255, 213, 145, 0.2), 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
     }
-    
+
     .tip-content {
         display: flex;
         align-items: center;
@@ -95,9 +108,15 @@
 }
 .location-error {
-    background-color: rgba(255, 241, 240, 0.9);
+    background-color: rgba(255, 241, 240, 0.95);
-    border: 1rpx solid rgba(255, 163, 158, 0.8);
+    border: 1rpx solid rgba(255, 163, 158, 0.9);
-    
+    box-shadow: 0 4rpx 16rpx rgba(255, 163, 158, 0.3), 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+
+    &:active {
+        background-color: rgba(255, 241, 240, 0.8);
+        box-shadow: 0 2rpx 8rpx rgba(255, 163, 158, 0.2), 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
+    }
+
     .tip-text {
         color: #cf1322;
     }
@@ -109,22 +128,26 @@
     border-radius: 44rpx;
     font-size: 32rpx;
     font-weight: 600;
-    box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.4);
+    box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.5), 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10rpx);
+    backdrop-filter: blur(15rpx);
-    
+    -webkit-backdrop-filter: blur(15rpx);
+    border: 1rpx solid rgba(255, 255, 255, 0.2);
+
     &:active {
         transform: translateY(2rpx);
-        box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
+        box-shadow: 0 4rpx 16rpx rgba(59, 130, 246, 0.4), 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
     }
     &.nut-button--primary {
-        background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+        background: linear-gradient(135deg, rgba(24, 144, 255, 0.95) 0%, rgba(9, 109, 217, 0.95) 100%);
-        border: none;
+        border: 1rpx solid rgba(255, 255, 255, 0.3);
-        box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
+        box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.4), 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
+        color: white;
+        text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
         &:active {
             transform: translateY(2rpx);
-            box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
+            box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3), 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
         }
     }
 }
@@ -157,7 +180,7 @@
     align-items: center;
     padding: 20rpx;
     border-radius: 12rpx;
-    
+
     &:active {
         background-color: #f5f5f5;
     }
@@ -218,13 +241,13 @@
     height: 80rpx;
     border-radius: 40rpx;
     font-size: 28rpx;
-    
+
     &.primary {
         background-color: #1890ff;
         color: white;
         border: none;
     }
-    
+
     &.secondary {
         background-color: #f5f5f5;
         color: #666;
--- a/src/pages/ActivitiesCover/index.vue
View file @3919b6e
+++ b/src/pages/ActivitiesCover/index.vue
View file @3919b6e
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-06 13:27:43
+ * @LastEditTime: 2025-09-06 18:09:54
  * @FilePath: /lls_program/src/pages/ActivitiesCover/index.vue
  * @Description: 活动海报页面 - 展示活动信息并处理定位授权
 -->
@@ -50,7 +50,7 @@
         :loading="isJoining"
         @click="checkFamilyStatusAndJoinActivity"
       >
-        {{ hasLocationAuth && !locationError ? '进入活动' : '参加活动' }}
+        {{ getButtonText() }}
       </nut-button>
     </view>
@@ -168,7 +168,7 @@ const show_save = ref(false) // 显示保存弹窗
 const startDraw = ref(false) // 开始绘制海报
 const posterPath = ref('') // 海报路径
 const nickname = ref('老来赛用户') // 用户昵称
-const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像
+// const avatar = ref('https://cdn.ipadbiz.cn/icon/tou@2x.png') // 用户头像
 // 保存选项
 const actions_save = ref([{
@@ -301,10 +301,38 @@ const getUserLocation = async (skipAuthCheck = false) => {
 }
 /**
+ * 获取按钮显示文本
+ */
+const getButtonText = () => {
+  // 如果没有加入家庭，显示"加入家庭"
+  if (!hasJoinedFamily.value) {
+    return '参加活动'
+  }
+
+  // 如果位置获取失败，显示"重新定位"
+  if (locationError.value) {
+    return '重新定位'
+  }
+
+  // 如果需要显示位置提示，说明需要授权
+  if (showLocationPrompt.value) {
+    return '授权定位'
+  }
+
+  // 如果已有定位授权且有位置信息，显示"进入活动"
+  if (hasLocationAuth.value && userLocation.value.lng && userLocation.value.lat) {
+    return '进入活动'
+  }
+
+  // 默认显示"参加活动"
+  return '参加活动'
+}
+
+/**
  * 检查用户是否加入家庭并处理参加活动按钮点击
  */
 const checkFamilyStatusAndJoinActivity = async () => {
-  // Mock data: hasJoinedFamily is set to false
+  // 如果没有加入家庭，引导用户加入家庭
   if (!hasJoinedFamily.value) {
     Taro.showModal({
       title: '提示',
@@ -319,9 +347,24 @@ const checkFamilyStatusAndJoinActivity = async () => {
         }
       },
     });
-  } else {
+    return
-    handleJoinActivity();
   }
+
+  // 如果位置获取失败，重新获取位置
+  if (locationError.value) {
+    await retryGetLocation()
+    return
+  }
+
+  // 如果需要显示位置提示，说明需要授权
+  if (showLocationPrompt.value) {
+    showLocationPrompt.value = false // 隐藏提示，直接尝试获取位置
+    await handleJoinActivity()
+    return
+  }
+
+  // 正常参加活动流程
+  await handleJoinActivity()
 };
@@ -402,25 +445,6 @@ const handleJoinActivity = async () => {
   isJoining.value = true
   try {
-    // 首先检查用户是否已加入家庭
-    if (!hasJoinedFamily.value) {
-      Taro.showModal({
-        title: '提示',
-        content: '没有加入家庭是无法参加活动的',
-        cancelText: '关闭',
-        confirmText: '前往加入',
-        success: (res) => {
-          if (res.confirm) {
-            Taro.navigateTo({
-              url: '/pages/Welcome/index',
-            });
-          }
-        },
-      });
-      isJoining.value = false
-      return
-    }
-
     // 检查定位授权状态
     const authSetting = await Taro.getSetting()
     const hasLocationPermission = authSetting.authSetting['scope.userLocation']
@@ -818,7 +842,9 @@ const initPageData = async () => {
       hasJoinedFamily.value = true
     }
   }
-  // 移除页面初始化时的定位权限检查，改为在用户点击参加活动时检查
+
+  // 检查定位授权状态（不获取位置，只检查权限）
+  await checkLocationAuth()
 }
 // 处理页面加载时的授权检查