hookehuyr

feat(广告页): 新增广告页面及相关配置

- 添加广告页面组件及样式文件
- 在app配置中添加广告页路由
- 禁用其他页面的分享功能
- 注释广告组件的配置获取逻辑
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-18 15:23:48
* @LastEditTime: 2025-09-19 13:30:18
* @FilePath: /lls_program/src/app.config.js
* @Description: 文件描述
*/
export default {
pages: [
'pages/AdPage/index',
'pages/Dashboard/index',
'pages/Welcome/index',
'pages/auth/index',
......
......@@ -182,7 +182,7 @@ defineExpose({
// 组件挂载时获取配置并检查是否需要显示
onMounted(async () => {
// 先获取广告配置
await fetchAdConfig()
// await fetchAdConfig()
})
</script>
......
/*
* @Date: 2025-09-19 13:29:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-19 13:49:45
* @FilePath: /lls_program/src/pages/AdPage/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '欢迎页',
enableShareAppMessage: true,
usingComponents: {
},
}
/* 广告页面样式 */
.ad-page {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.ad-background {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
}
.share-button-container {
position: absolute;
top: 30rpx;
right: 30rpx;
z-index: 10;
}
.share-button {
padding: 1rpx 24rpx;
background: rgba(0, 0, 0, 0.6);
color: white;
border: none;
border-radius: 32rpx;
font-size: 24rpx;
font-weight: 500;
backdrop-filter: blur(10rpx);
-webkit-backdrop-filter: blur(10rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: rgba(0, 0, 0, 0.8);
}
}
.loading-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
z-index: 20;
}
.loading-text {
font-size: 32rpx;
color: #666;
font-weight: 500;
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-19 13:48:33
* @FilePath: /lls_program/src/pages/AdPage/index.vue
* @Description: 广告页面
-->
<template>
<view class="ad-page">
<!-- 背景图片 -->
<view
class="ad-background"
:style="{ backgroundImage: adImageUrl ? `url(${adImageUrl})` : '' }"
@tap="handleImageClick"
>
<!-- 右上角分享按钮 -->
<view class="share-button-container" @tap.stop>
<button
class="share-button"
open-type="share"
>
推荐给朋友
</button>
</view>
</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading-container">
<view class="loading-text">加载中...</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { getBootPageAPI } from "@/api";
import { getMyFamiliesAPI } from "@/api/family";
import { silentAuth } from "@/utils/authRedirect";
import "./index.less";
// 定义响应式数据
const adImageUrl = ref('');
const loading = ref(true);
const hasFamily = ref(false);
/**
* 获取广告配置
*/
const fetchAdConfig = async () => {
try {
const { code, data } = await getBootPageAPI();
if (code && data) {
adImageUrl.value = data.adImageUrl;
}
} catch (error) {
console.error('获取广告配置失败:', error);
}
};
/**
* 检查用户是否加入家庭
*/
const checkUserFamily = async () => {
try {
const { code, data } = await getMyFamiliesAPI();
hasFamily.value = code && data && data.length > 0;
} catch (error) {
console.error('检查用户家庭状态失败:', error);
hasFamily.value = false;
}
};
/**
* 静默授权
*/
const performSilentAuth = async () => {
try {
await silentAuth();
} catch (error) {
console.error('静默授权失败:', error);
}
};
/**
* 点击图片处理
*/
const handleImageClick = () => {
if (hasFamily.value) {
// 已加入家庭,跳转到dashboard页面
Taro.redirectTo({
url: '/pages/Dashboard/index'
});
} else {
// 未加入家庭,跳转到welcome页面
Taro.redirectTo({
url: '/pages/Welcome/index'
});
}
};
/**
* 页面初始化
*/
onMounted(async () => {
try {
// 执行静默授权
await performSilentAuth();
// 并行获取广告配置和检查家庭状态
await Promise.all([
fetchAdConfig(),
checkUserFamily()
]);
} catch (error) {
console.error('页面初始化失败:', error);
} finally {
loading.value = false;
}
});
/**
* 定义分享给朋友的内容
* @returns {Object} 分享配置对象
*/
const onShareAppMessage = (res) => {
const shareData = {
title: '和家人一起走路、一起打卡、一起兑换',
path: `/pages/AdPage/index`,
imageUrl: ''
};
return shareData;
}
// 使用Taro的useShareAppMessage Hook来处理分享
Taro.useShareAppMessage((res) => {
return onShareAppMessage(res);
});
</script>
......@@ -7,6 +7,6 @@
*/
export default {
navigationBarTitleText: '首页',
enableShareAppMessage: true,
// enableShareAppMessage: true,
// enableShareTimeline: true
}
......
/*
* @Date: 2025-08-27 18:25:54
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-17 19:58:30
* @LastEditTime: 2025-09-19 13:46:45
* @FilePath: /lls_program/src/pages/Welcome/index.config.js
* @Description: 文件描述
*/
......@@ -9,6 +9,6 @@ export default {
navigationBarTitleText: '老来赛',
navigationBarBackgroundColor: '#fff',
navigationBarTextStyle: 'black',
enableShareAppMessage: true,
// enableShareAppMessage: true,
// enableShareTimeline: true
}
......