644 lines
15 KiB
Vue
644 lines
15 KiB
Vue
<template>
|
||
<view class="header-container">
|
||
<!-- 返回按钮（可选） -->
|
||
<view v-if="showBack" class="back-button" @click="handleBack">
|
||
<text class="back-icon" :style="{ color: backIconColor }">←</text>
|
||
</view>
|
||
|
||
<!-- 右侧图标区域 -->
|
||
<view class="right-icons">
|
||
<!-- 任务图标 -->
|
||
<view v-if="showTaskIcon" class="daily-task-group" @click="handleTaskClick">
|
||
<!-- 1. 上层：任务图标（悬浮在上面） -->
|
||
<view class="task-icon-box">
|
||
<image class="task-icon-img" src="/static/icon/task.png" mode="aspectFit"></image>
|
||
<image class="task-red-dot" src="/static/square/tishi.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 2. 下层：文字背景块 -->
|
||
<view class="task-text-box">
|
||
<text class="task-text-label">每日任务</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新手引导 -->
|
||
<!-- <view v-if="showGuideIcon" class="daily-task-group" @click="handleGuideClick">
|
||
1. 上层：新手引导（悬浮在上面）
|
||
<view class="task-icon-box">
|
||
<image class="task-icon-img" src="/static/icon/onboarding-bg.png" mode="aspectFit"></image>
|
||
<image class="task-red-dot" src="/static/square/tishi.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
2. 下层：文字背景块
|
||
<view class="task-text-box">
|
||
<text class="task-text-label">新手引导</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 星援活动 -->
|
||
<view v-if="showStarActivityIcon" class="daily-task-group" @click="handleStarActivityClick">
|
||
<!-- 1. 上层：星援活动（悬浮在上面） -->
|
||
<view class="task-icon-box">
|
||
<image class="task-icon-img" src="/static/icon/bus-icon.png" mode="aspectFit"></image>
|
||
<image class="task-red-dot" src="/static/square/tishi.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 2. 下层：文字背景块 -->
|
||
<view class="task-text-box">
|
||
<text class="task-text-label">星援活动</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 顶粉水晶余额 -->
|
||
<view class="crystal-balance-new">
|
||
<!-- 1. 左侧钻石图标：层级最高，盖住右侧背景 -->
|
||
<view class="crystal-icon-box">
|
||
<image class="crystal-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 2. 右侧容器：用于包裹背景和文字 -->
|
||
<view class="crystal-info-container">
|
||
<image class="crystal-bg-img" src="/static/square/shuijingzhanshikuang.png" mode="aspectFill"></image>
|
||
|
||
<!-- 上层：文字内容 -->
|
||
<view class="crystal-text-layer">
|
||
<text class="balance-number">{{ crystalBalance }}</text>
|
||
</view>
|
||
|
||
<!-- 收益文字 -->
|
||
<view class="crystal-bg-layer">
|
||
<text class="balance-income">收益 27.1/H</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 用户头像 -->
|
||
<view class="icon-item avatar-icon" @click="handleAvatarClick">
|
||
<Avatar :key="avatarKey" :userId="userUid" :avatarUrl="userAvatarUrl" :size="96" :borderWidth="2" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 任务弹窗 -->
|
||
<DailyTasks :visible="showTaskModal" @close="showTaskModal = false" />
|
||
|
||
<!-- 新手引导弹窗 -->
|
||
<GuideModal :visible="showGuideModal" @close="showGuideModal = false" @updated="handleGuideUpdated" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, onMounted, onUnmounted } from 'vue';
|
||
import { useStore } from 'vuex';
|
||
import Avatar from './Avatar.vue';
|
||
import DailyTasks from '@/pages/tasks/daily-tasks.vue';
|
||
import GuideModal from '@/pages/tasks/GuideModal.vue';
|
||
import { getActivityListApi } from '@/utils/api.js';
|
||
import { reportEvent } from '@/utils/task-api.js';
|
||
|
||
// 定义 props
|
||
const props = defineProps({
|
||
showBack: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
backUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
backIconColor: {
|
||
type: String,
|
||
default: '#000000'
|
||
},
|
||
showTaskIcon: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showGuideIcon: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
showStarActivityIcon: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
});
|
||
|
||
const store = useStore();
|
||
|
||
// 使用ref存储用户信息，使其具有响应式
|
||
const userInfo = ref(null);
|
||
const avatarKey = ref(0); // 用于强制刷新Avatar组件
|
||
|
||
// 任务弹窗显示状态
|
||
const showTaskModal = ref(false);
|
||
|
||
// 新手引导弹窗显示状态
|
||
const showGuideModal = ref(false);
|
||
|
||
// 从本地存储读取用户信息
|
||
const loadUserInfo = () => {
|
||
try {
|
||
const userStr = uni.getStorageSync('user');
|
||
if (userStr) {
|
||
userInfo.value = JSON.parse(userStr);
|
||
}
|
||
} catch (e) {
|
||
console.error('解析用户信息失败:', e);
|
||
userInfo.value = null;
|
||
}
|
||
};
|
||
|
||
// 获取用户UID
|
||
const userUid = computed(() => {
|
||
return userInfo.value?.uid || '';
|
||
});
|
||
|
||
// 获取用户头像URL
|
||
const userAvatarUrl = computed(() => {
|
||
return userInfo.value?.avatar_url || '';
|
||
});
|
||
|
||
// 获取水晶余额
|
||
const crystalBalance = computed(() => {
|
||
return userInfo.value?.crystal_balance ?? 9527;
|
||
});
|
||
|
||
// 监听头像更新事件
|
||
const handleAvatarUpdate = (data) => {
|
||
// 重新加载用户信息（含新 avatar_url）
|
||
loadUserInfo();
|
||
// 强制刷新Avatar组件
|
||
avatarKey.value += 1;
|
||
};
|
||
|
||
// 监听用户信息更新事件（如切换身份）
|
||
const handleUserInfoUpdate = () => {
|
||
loadUserInfo();
|
||
avatarKey.value += 1;
|
||
// 切换身份后重新检查每日登录状态
|
||
checkAndReportDailyLogin();
|
||
};
|
||
|
||
// 监听余额更新事件
|
||
const handleBalanceUpdate = (data) => {
|
||
if (userInfo.value) {
|
||
userInfo.value = { ...userInfo.value, crystal_balance: data.crystal_balance };
|
||
} else {
|
||
loadUserInfo();
|
||
}
|
||
};
|
||
|
||
// 检查并上报每日首次登录事件
|
||
function checkAndReportDailyLogin() {
|
||
// 5点之前属于昨日周期，不触发登录事件
|
||
const now = new Date()
|
||
const currentHour = now.getHours()
|
||
if (currentHour < 5) return // 5点之前不触发
|
||
|
||
const today = now.toISOString().split('T')[0]
|
||
const starId = uni.getStorageSync('star_id')
|
||
if (!starId) return
|
||
|
||
// 获取用户ID
|
||
const userStr = uni.getStorageSync('user')
|
||
let userId = null
|
||
if (userStr) {
|
||
try {
|
||
const user = JSON.parse(userStr)
|
||
userId = user?.uid || null
|
||
} catch (e) {}
|
||
}
|
||
if (!userId) return
|
||
|
||
// 每个用户每个明星身份有独立的每日登录状态
|
||
const dailyLoginKey = `daily_login_completed_${today}_${userId}_${starId}`
|
||
if (!uni.getStorageSync(dailyLoginKey)) {
|
||
reportEvent('daily_login', starId).then(() => {
|
||
// 报告成功后标记今日已完成，并清除昨日的记录
|
||
uni.setStorageSync(dailyLoginKey, true)
|
||
const yesterday = new Date(now.getTime() - 86400000).toISOString().split('T')[0]
|
||
uni.removeStorageSync(`daily_login_completed_${yesterday}_${userId}_${starId}`)
|
||
}).catch(err => {
|
||
console.error('上报登录事件失败:', err)
|
||
})
|
||
}
|
||
}
|
||
|
||
// 组件挂载时加载用户信息并监听事件
|
||
onMounted(() => {
|
||
loadUserInfo();
|
||
uni.$on('avatarUpdated', handleAvatarUpdate);
|
||
uni.$on('userInfoUpdated', handleUserInfoUpdate);
|
||
uni.$on('balanceUpdated', handleBalanceUpdate);
|
||
|
||
// 上报每日首次登录事件（每日5点重置后首次挂载时）
|
||
checkAndReportDailyLogin();
|
||
});
|
||
|
||
// 组件卸载时移除事件监听
|
||
onUnmounted(() => {
|
||
uni.$off('avatarUpdated', handleAvatarUpdate);
|
||
uni.$off('userInfoUpdated', handleUserInfoUpdate);
|
||
uni.$off('balanceUpdated', handleBalanceUpdate);
|
||
});
|
||
|
||
// 处理返回按钮点击
|
||
const handleBack = () => {
|
||
if (props.backUrl) {
|
||
uni.navigateTo({
|
||
url: props.backUrl
|
||
});
|
||
} else {
|
||
// 获取页面栈
|
||
const pages = getCurrentPages();
|
||
if (pages.length > 1) {
|
||
// 有上一页，执行返回
|
||
uni.navigateBack();
|
||
} else {
|
||
// 没有上一页，跳转到square页面
|
||
uni.reLaunch({
|
||
url: '/pages/square/square'
|
||
});
|
||
}
|
||
}
|
||
};
|
||
// 处理任务图标点击
|
||
const handleTaskClick = () => {
|
||
showTaskModal.value = true;
|
||
};
|
||
|
||
// 处理星援活动图标点击
|
||
const handleStarActivityClick = async () => {
|
||
try {
|
||
// 从本地存储获取star_id
|
||
const starId = uni.getStorageSync('star_id');
|
||
if (!starId) {
|
||
uni.showToast({
|
||
title: '无法获取用户信息',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 显示加载提示
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
|
||
// 调用API获取活动列表
|
||
const response = await getActivityListApi(starId, 1, 10);
|
||
|
||
uni.hideLoading();
|
||
|
||
// 检查响应数据
|
||
if (response && response.data && response.data.activities) {
|
||
const activities = response.data.activities;
|
||
|
||
// 查找activity_type为bus的活动
|
||
const busActivity = activities.find(activity => activity.activity_type === 'bus');
|
||
|
||
if (busActivity) {
|
||
// 跳转到应援活动页面
|
||
uni.navigateTo({
|
||
url: `/pages/support-activity/index?id=${busActivity.id}`
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无巴士应援活动',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取活动列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
console.error('获取活动列表失败:', error);
|
||
uni.showToast({
|
||
title: error.message || '获取活动列表失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 点击新手引导
|
||
const handleGuideClick = () => {
|
||
showGuideModal.value = true;
|
||
};
|
||
|
||
// 引导更新回调
|
||
const handleGuideUpdated = () => {
|
||
// 可以在这里刷新相关数据
|
||
console.log('[Header] Guide updated');
|
||
};
|
||
|
||
// 执行引导
|
||
const handleStartGuide = (params) => {
|
||
const key = typeof params === 'string' ? params : (params?.key || '');
|
||
const fromStep = typeof params === 'object' ? (params.fromStep ?? 0) : 0;
|
||
const targetPage = typeof params === 'object' ? (params.targetPage || '') : '';
|
||
|
||
console.log('[Header] handleStartGuide:', { key, fromStep, targetPage });
|
||
|
||
showGuideListModal.value = false;
|
||
|
||
// 根据引导类型跳转到对应页面
|
||
if (key === 'square_home') {
|
||
const navigateUrl = targetPage || '/pages/square/square';
|
||
uni.navigateTo({
|
||
url: navigateUrl,
|
||
success: () => {
|
||
setTimeout(() => {
|
||
if (fromStep === 0) {
|
||
store.dispatch("guide/startGuideFromBeginning", key);
|
||
} else {
|
||
store.dispatch("guide/resumeGuide", key);
|
||
}
|
||
}, 500);
|
||
}
|
||
});
|
||
} else {
|
||
if (fromStep === 0) {
|
||
store.dispatch("guide/startGuideFromBeginning", key);
|
||
} else {
|
||
store.dispatch("guide/resumeGuide", key);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 领取奖励成功
|
||
const handleClaimSuccess = (reward) => {
|
||
console.log("[Header] 领取奖励成功:", reward);
|
||
};
|
||
|
||
// 关闭任务弹窗
|
||
const closeTaskModal = () => {
|
||
showTaskModal.value = false;
|
||
};
|
||
|
||
// 处理头像点击
|
||
const handleAvatarClick = () => {
|
||
// 获取当前页面栈
|
||
const pages = getCurrentPages();
|
||
if (pages.length > 0) {
|
||
const currentPage = pages[pages.length - 1];
|
||
// 检查当前页面是否是个人信息页面
|
||
if (currentPage.route === 'pages/profile/myWorks') {
|
||
// 已经在个人信息页面，不执行跳转
|
||
return;
|
||
}
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/profile/myWorks'
|
||
});
|
||
};
|
||
|
||
// 将方法暴露给模板
|
||
defineExpose({
|
||
showTaskModal,
|
||
closeTaskModal
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.header-container {
|
||
position: fixed;
|
||
top: 80rpx;
|
||
left: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 144rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
z-index: 200;
|
||
}
|
||
|
||
.back-button {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.right-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
/* gap: 30rpx; */
|
||
margin-left: auto;
|
||
}
|
||
|
||
.daily-task-group {
|
||
position: relative;
|
||
/* 必须是相对定位，作为子元素的定位基准 */
|
||
width: 100rpx;
|
||
/* 控制整体宽度，根据图标大小调整 */
|
||
height: 120rpx;
|
||
/* 预估高度，包含图标和文字块 */
|
||
}
|
||
|
||
/* --- 上层图标样式 --- */
|
||
.task-icon-box {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
/* 固定在顶部 */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
/* 水平居中 */
|
||
width: 88rpx;
|
||
/* 图标宽度 */
|
||
height: 88rpx;
|
||
/* 图标高度 */
|
||
z-index: 10;
|
||
/* 确保图标在文字块上面 */
|
||
}
|
||
|
||
.task-icon-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 红点样式 */
|
||
.task-red-dot {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
right: 12rpx;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
}
|
||
|
||
/* --- 下层文字背景块 --- */
|
||
.task-text-box {
|
||
position: absolute;
|
||
top: 48rpx;
|
||
/* 关键：调整这个值，让文字块往上顶，与图标产生重叠 */
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 88rpx;
|
||
height: 80rpx;
|
||
background-image: url('/static/square/gerenzhongxincangpinkuang.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 5;
|
||
/* 必须比图标小，才能被覆盖 */
|
||
}
|
||
|
||
.task-text-label {
|
||
font-size: 16rpx;
|
||
color: #fff;
|
||
text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.9);
|
||
margin-top: 32rpx;
|
||
|
||
}
|
||
|
||
/* 水晶余额组件 */
|
||
.crystal-balance-new {
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
/* 底部对齐 */
|
||
position: relative;
|
||
/* 左侧留出足够空间给钻石图标，防止文字被压在图标正下方 */
|
||
padding-left: 50rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
/* --- 左侧钻石图标 --- */
|
||
.crystal-icon-box {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 10rpx;
|
||
/* 与右侧底部平齐 */
|
||
z-index: 10;
|
||
/* 最高层级：盖住右侧背景 */
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
.crystal-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* --- 右侧容器 --- */
|
||
.crystal-info-container {
|
||
position: relative;
|
||
height: 56rpx;
|
||
width: 80rpx;
|
||
border-radius: 16rpx;
|
||
bottom: 4rpx;
|
||
padding-right: 28rpx;
|
||
padding-left: 56rpx;
|
||
}
|
||
|
||
.crystal-bg-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* --- 上层：文字内容 --- */
|
||
.crystal-text-layer {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.balance-number {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: #FFB800;
|
||
font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
|
||
text-shadow:
|
||
0 0 10rpx rgba(255, 184, 0, 0.8),
|
||
0 2rpx 4rpx rgba(0, 0, 0, 0.5);
|
||
letter-spacing: 1rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.balance-income {
|
||
font-size: 18rpx;
|
||
color: #FFFFFF;
|
||
margin-bottom: 2rpx;
|
||
margin-left: 28rpx;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9);
|
||
}
|
||
|
||
/* --- 下层：渐变背景 --- */
|
||
.crystal-bg-layer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: -18rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 65%;
|
||
z-index: 1;
|
||
|
||
background: linear-gradient(to bottom right,
|
||
#F0E4B1 0%,
|
||
#F08399 50%,
|
||
#B94E7399 100%
|
||
);
|
||
|
||
box-shadow:
|
||
0 4rpx 12rpx rgba(255, 143, 158, 0.2),
|
||
0 2rpx 6rpx rgba(255, 143, 158, 0.15),
|
||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4),
|
||
inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.05);
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.icon-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
margin-left: 32rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.task-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.icon-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.avatar-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
</style>
|