feat(广告页): 新增广告页面及相关配置
- 添加广告页面组件及样式文件 - 在app配置中添加广告页路由 - 禁用其他页面的分享功能 - 注释广告组件的配置获取逻辑
Showing
7 changed files
with
221 additions
and
5 deletions
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-06-28 10:33:00 | 2 | * @Date: 2025-06-28 10:33:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-18 15:23:48 | 4 | + * @LastEditTime: 2025-09-19 13:30:18 |
| 5 | * @FilePath: /lls_program/src/app.config.js | 5 | * @FilePath: /lls_program/src/app.config.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| 8 | export default { | 8 | export default { |
| 9 | pages: [ | 9 | pages: [ |
| 10 | + 'pages/AdPage/index', | ||
| 10 | 'pages/Dashboard/index', | 11 | 'pages/Dashboard/index', |
| 11 | 'pages/Welcome/index', | 12 | 'pages/Welcome/index', |
| 12 | 'pages/auth/index', | 13 | 'pages/auth/index', | ... | ... |
| ... | @@ -182,7 +182,7 @@ defineExpose({ | ... | @@ -182,7 +182,7 @@ defineExpose({ |
| 182 | // 组件挂载时获取配置并检查是否需要显示 | 182 | // 组件挂载时获取配置并检查是否需要显示 |
| 183 | onMounted(async () => { | 183 | onMounted(async () => { |
| 184 | // 先获取广告配置 | 184 | // 先获取广告配置 |
| 185 | - await fetchAdConfig() | 185 | + // await fetchAdConfig() |
| 186 | }) | 186 | }) |
| 187 | </script> | 187 | </script> |
| 188 | 188 | ... | ... |
src/pages/AdPage/index.config.js
0 → 100755
| 1 | +/* | ||
| 2 | + * @Date: 2025-09-19 13:29:06 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-09-19 13:49:45 | ||
| 5 | + * @FilePath: /lls_program/src/pages/AdPage/index.config.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +export default { | ||
| 9 | + navigationBarTitleText: '欢迎页', | ||
| 10 | + enableShareAppMessage: true, | ||
| 11 | + usingComponents: { | ||
| 12 | + }, | ||
| 13 | +} |
src/pages/AdPage/index.less
0 → 100644
| 1 | +/* 广告页面样式 */ | ||
| 2 | +.ad-page { | ||
| 3 | + width: 100vw; | ||
| 4 | + height: 100vh; | ||
| 5 | + position: relative; | ||
| 6 | + overflow: hidden; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.ad-background { | ||
| 10 | + width: 100%; | ||
| 11 | + height: 100%; | ||
| 12 | + background-size: cover; | ||
| 13 | + background-position: center; | ||
| 14 | + background-repeat: no-repeat; | ||
| 15 | + position: relative; | ||
| 16 | + cursor: pointer; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +.share-button-container { | ||
| 20 | + position: absolute; | ||
| 21 | + top: 30rpx; | ||
| 22 | + right: 30rpx; | ||
| 23 | + z-index: 10; | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +.share-button { | ||
| 27 | + padding: 1rpx 24rpx; | ||
| 28 | + background: rgba(0, 0, 0, 0.6); | ||
| 29 | + color: white; | ||
| 30 | + border: none; | ||
| 31 | + border-radius: 32rpx; | ||
| 32 | + font-size: 24rpx; | ||
| 33 | + font-weight: 500; | ||
| 34 | + backdrop-filter: blur(10rpx); | ||
| 35 | + -webkit-backdrop-filter: blur(10rpx); | ||
| 36 | + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); | ||
| 37 | + transition: all 0.3s ease; | ||
| 38 | + | ||
| 39 | + &:active { | ||
| 40 | + transform: scale(0.95); | ||
| 41 | + background: rgba(0, 0, 0, 0.8); | ||
| 42 | + } | ||
| 43 | +} | ||
| 44 | + | ||
| 45 | +.loading-container { | ||
| 46 | + position: absolute; | ||
| 47 | + top: 0; | ||
| 48 | + left: 0; | ||
| 49 | + width: 100%; | ||
| 50 | + height: 100%; | ||
| 51 | + display: flex; | ||
| 52 | + align-items: center; | ||
| 53 | + justify-content: center; | ||
| 54 | + background: rgba(255, 255, 255, 0.9); | ||
| 55 | + z-index: 20; | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +.loading-text { | ||
| 59 | + font-size: 32rpx; | ||
| 60 | + color: #666; | ||
| 61 | + font-weight: 500; | ||
| 62 | +} |
src/pages/AdPage/index.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + * @Date: 2022-09-19 14:11:06 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-09-19 13:48:33 | ||
| 5 | + * @FilePath: /lls_program/src/pages/AdPage/index.vue | ||
| 6 | + * @Description: 广告页面 | ||
| 7 | +--> | ||
| 8 | +<template> | ||
| 9 | + <view class="ad-page"> | ||
| 10 | + <!-- 背景图片 --> | ||
| 11 | + <view | ||
| 12 | + class="ad-background" | ||
| 13 | + :style="{ backgroundImage: adImageUrl ? `url(${adImageUrl})` : '' }" | ||
| 14 | + @tap="handleImageClick" | ||
| 15 | + > | ||
| 16 | + <!-- 右上角分享按钮 --> | ||
| 17 | + <view class="share-button-container" @tap.stop> | ||
| 18 | + <button | ||
| 19 | + class="share-button" | ||
| 20 | + open-type="share" | ||
| 21 | + > | ||
| 22 | + 推荐给朋友 | ||
| 23 | + </button> | ||
| 24 | + </view> | ||
| 25 | + </view> | ||
| 26 | + | ||
| 27 | + <!-- 加载状态 --> | ||
| 28 | + <view v-if="loading" class="loading-container"> | ||
| 29 | + <view class="loading-text">加载中...</view> | ||
| 30 | + </view> | ||
| 31 | + </view> | ||
| 32 | +</template> | ||
| 33 | + | ||
| 34 | +<script setup> | ||
| 35 | +import { ref, onMounted } from "vue"; | ||
| 36 | +import Taro from "@tarojs/taro"; | ||
| 37 | +import { getBootPageAPI } from "@/api"; | ||
| 38 | +import { getMyFamiliesAPI } from "@/api/family"; | ||
| 39 | +import { silentAuth } from "@/utils/authRedirect"; | ||
| 40 | +import "./index.less"; | ||
| 41 | + | ||
| 42 | +// 定义响应式数据 | ||
| 43 | +const adImageUrl = ref(''); | ||
| 44 | +const loading = ref(true); | ||
| 45 | +const hasFamily = ref(false); | ||
| 46 | + | ||
| 47 | +/** | ||
| 48 | + * 获取广告配置 | ||
| 49 | + */ | ||
| 50 | +const fetchAdConfig = async () => { | ||
| 51 | + try { | ||
| 52 | + const { code, data } = await getBootPageAPI(); | ||
| 53 | + if (code && data) { | ||
| 54 | + adImageUrl.value = data.adImageUrl; | ||
| 55 | + } | ||
| 56 | + } catch (error) { | ||
| 57 | + console.error('获取广告配置失败:', error); | ||
| 58 | + } | ||
| 59 | +}; | ||
| 60 | + | ||
| 61 | +/** | ||
| 62 | + * 检查用户是否加入家庭 | ||
| 63 | + */ | ||
| 64 | +const checkUserFamily = async () => { | ||
| 65 | + try { | ||
| 66 | + const { code, data } = await getMyFamiliesAPI(); | ||
| 67 | + hasFamily.value = code && data && data.length > 0; | ||
| 68 | + } catch (error) { | ||
| 69 | + console.error('检查用户家庭状态失败:', error); | ||
| 70 | + hasFamily.value = false; | ||
| 71 | + } | ||
| 72 | +}; | ||
| 73 | + | ||
| 74 | +/** | ||
| 75 | + * 静默授权 | ||
| 76 | + */ | ||
| 77 | +const performSilentAuth = async () => { | ||
| 78 | + try { | ||
| 79 | + await silentAuth(); | ||
| 80 | + } catch (error) { | ||
| 81 | + console.error('静默授权失败:', error); | ||
| 82 | + } | ||
| 83 | +}; | ||
| 84 | + | ||
| 85 | +/** | ||
| 86 | + * 点击图片处理 | ||
| 87 | + */ | ||
| 88 | +const handleImageClick = () => { | ||
| 89 | + if (hasFamily.value) { | ||
| 90 | + // 已加入家庭,跳转到dashboard页面 | ||
| 91 | + Taro.redirectTo({ | ||
| 92 | + url: '/pages/Dashboard/index' | ||
| 93 | + }); | ||
| 94 | + } else { | ||
| 95 | + // 未加入家庭,跳转到welcome页面 | ||
| 96 | + Taro.redirectTo({ | ||
| 97 | + url: '/pages/Welcome/index' | ||
| 98 | + }); | ||
| 99 | + } | ||
| 100 | +}; | ||
| 101 | + | ||
| 102 | +/** | ||
| 103 | + * 页面初始化 | ||
| 104 | + */ | ||
| 105 | +onMounted(async () => { | ||
| 106 | + try { | ||
| 107 | + // 执行静默授权 | ||
| 108 | + await performSilentAuth(); | ||
| 109 | + | ||
| 110 | + // 并行获取广告配置和检查家庭状态 | ||
| 111 | + await Promise.all([ | ||
| 112 | + fetchAdConfig(), | ||
| 113 | + checkUserFamily() | ||
| 114 | + ]); | ||
| 115 | + } catch (error) { | ||
| 116 | + console.error('页面初始化失败:', error); | ||
| 117 | + } finally { | ||
| 118 | + loading.value = false; | ||
| 119 | + } | ||
| 120 | +}); | ||
| 121 | + | ||
| 122 | +/** | ||
| 123 | + * 定义分享给朋友的内容 | ||
| 124 | + * @returns {Object} 分享配置对象 | ||
| 125 | + */ | ||
| 126 | +const onShareAppMessage = (res) => { | ||
| 127 | + const shareData = { | ||
| 128 | + title: '和家人一起走路、一起打卡、一起兑换', | ||
| 129 | + path: `/pages/AdPage/index`, | ||
| 130 | + imageUrl: '' | ||
| 131 | + }; | ||
| 132 | + | ||
| 133 | + return shareData; | ||
| 134 | +} | ||
| 135 | + | ||
| 136 | +// 使用Taro的useShareAppMessage Hook来处理分享 | ||
| 137 | +Taro.useShareAppMessage((res) => { | ||
| 138 | + return onShareAppMessage(res); | ||
| 139 | +}); | ||
| 140 | +</script> |
| ... | @@ -7,6 +7,6 @@ | ... | @@ -7,6 +7,6 @@ |
| 7 | */ | 7 | */ |
| 8 | export default { | 8 | export default { |
| 9 | navigationBarTitleText: '首页', | 9 | navigationBarTitleText: '首页', |
| 10 | - enableShareAppMessage: true, | 10 | + // enableShareAppMessage: true, |
| 11 | // enableShareTimeline: true | 11 | // enableShareTimeline: true |
| 12 | } | 12 | } | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-08-27 18:25:54 | 2 | * @Date: 2025-08-27 18:25:54 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-17 19:58:30 | 4 | + * @LastEditTime: 2025-09-19 13:46:45 |
| 5 | * @FilePath: /lls_program/src/pages/Welcome/index.config.js | 5 | * @FilePath: /lls_program/src/pages/Welcome/index.config.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -9,6 +9,6 @@ export default { | ... | @@ -9,6 +9,6 @@ export default { |
| 9 | navigationBarTitleText: '老来赛', | 9 | navigationBarTitleText: '老来赛', |
| 10 | navigationBarBackgroundColor: '#fff', | 10 | navigationBarBackgroundColor: '#fff', |
| 11 | navigationBarTextStyle: 'black', | 11 | navigationBarTextStyle: 'black', |
| 12 | - enableShareAppMessage: true, | 12 | + // enableShareAppMessage: true, |
| 13 | // enableShareTimeline: true | 13 | // enableShareTimeline: true |
| 14 | } | 14 | } | ... | ... |
-
Please register or login to post a comment