Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3919b6e7 1 parent 95be378c

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

重构活动按钮文本显示逻辑，根据用户状态显示不同文本
改进页面样式包括背景渐变、按钮阴影和交互效果
移除未使用的头像变量并优化定位授权检查流程
Inline Side-by-side
Showing 2 changed files with 99 additions and 50 deletions
......@@ -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));
backdrop-filter: blur(20rpx);
background: linear-gradient(
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);
border: 1rpx solid rgba(255, 213, 145, 0.8);
border-radius: 12rpx;
background-color: rgba(255, 247, 230, 0.95);
border: 1rpx solid rgba(255, 213, 145, 0.9);
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);
border: 1rpx solid rgba(255, 163, 158, 0.8);
background-color: rgba(255, 241, 240, 0.95);
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);
backdrop-filter: blur(10rpx);
box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.5), 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
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%);
border: none;
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
background: linear-gradient(135deg, rgba(24, 144, 255, 0.95) 0%, rgba(9, 109, 217, 0.95) 100%);
border: 1rpx solid rgba(255, 255, 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;
......
<!--
* @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 {
handleJoinActivity();
return
}
// 如果位置获取失败，重新获取位置
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()
}
// 处理页面加载时的授权检查
......