677 lines
15 KiB
Vue
677 lines
15 KiB
Vue
<template>
|
||
<view class="theme-page theme-transition" :style="{ background: themeConfig.bgColor }">
|
||
<!-- 背景装饰 -->
|
||
<view class="page-decoration deco-1" :style="{ background: themeConfig.primaryColor + '10' }"></view>
|
||
<view class="page-decoration deco-2" :style="{ background: themeConfig.secondaryColor + '10' }"></view>
|
||
|
||
<!-- 页面头部 -->
|
||
<view class="page-header">
|
||
<view class="header-decoration">
|
||
<view class="header-glow" :style="{ background: `radial-gradient(circle, ${themeConfig.primaryColor}20 0%, transparent 70%)` }"></view>
|
||
</view>
|
||
<view class="header-title-row">
|
||
<view class="header-icon-wrap" :style="{ background: themeConfig.primaryColor + '15' }">
|
||
<text class="header-icon">🎨</text>
|
||
</view>
|
||
<view class="header-text">
|
||
<text class="page-title theme-transition" :style="{ color: themeConfig.textPrimary }">主题皮肤</text>
|
||
<text class="page-subtitle theme-transition" :style="{ color: themeConfig.textSecondary }">选择你喜欢的配色方案</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="theme-list">
|
||
<!-- 遍历主题列表 -->
|
||
<view
|
||
class="theme-item card theme-transition"
|
||
v-for="(theme, key) in validThemeList"
|
||
:key="`theme-${key}`"
|
||
@click="selectTheme(key)"
|
||
:style="getThemeItemStyle(theme, key)"
|
||
>
|
||
<!-- 主题预览区域 -->
|
||
<view class="theme-preview"
|
||
:style="{ background: theme.bgColor }">
|
||
<view class="preview-shine"></view>
|
||
<view class="preview-circle-wrap">
|
||
<view class="preview-circle" :style="{ background: `linear-gradient(135deg, ${theme.primaryColor} 0%, ${theme.secondaryColor} 100%)` }">
|
||
<view class="preview-circle-inner" :style="{ background: theme.cardBgColor }"></view>
|
||
</view>
|
||
</view>
|
||
<view class="preview-colors">
|
||
<view class="preview-color-item primary" :style="{ background: theme.primaryColor }"></view>
|
||
<view class="preview-color-item secondary" :style="{ background: theme.secondaryColor }"></view>
|
||
<view class="preview-color-item accent" :style="{ background: theme.warningColor }"></view>
|
||
<view class="preview-color-item text" :style="{ background: theme.textPrimary }"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主题信息区 -->
|
||
<view class="theme-info">
|
||
<view class="theme-name-row">
|
||
<text class="theme-name theme-transition" :style="{ color: theme.textPrimary }">
|
||
{{ theme.name }}
|
||
</text>
|
||
<view class="theme-badge" v-if="currentThemeKey === key" :style="{ background: theme.primaryColor }">
|
||
<text class="badge-text">当前</text>
|
||
</view>
|
||
</view>
|
||
<text class="theme-desc theme-transition" :style="{ color: theme.textSecondary }">
|
||
{{ getThemeDesc(key) }}
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 选中标识 -->
|
||
<view class="active-indicator theme-transition" v-if="currentThemeKey === key">
|
||
<view class="indicator-ring" :style="{ borderColor: theme.primaryColor }"></view>
|
||
<view class="indicator-inner" :style="{ background: themeConfig.primaryColor }">
|
||
<FaIcon icon="check" :size="12" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部提示 -->
|
||
<view class="bottom-area">
|
||
<view class="tip-card theme-transition" :style="{ background: themeConfig.cardBgColor }">
|
||
<view class="tip-icon-wrap" :style="{ background: themeConfig.primaryColor + '15' }">
|
||
<text class="tip-icon">💡</text>
|
||
</view>
|
||
<view class="tip-content">
|
||
<text class="tip-title theme-transition" :style="{ color: themeConfig.textPrimary }">提示</text>
|
||
<text class="tip-text theme-transition" :style="{ color: themeConfig.textSecondary }">主题变更将同步到所有页面</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
THEME_PRESETS,
|
||
getThemeConfigFromStorage,
|
||
getThemeKeyFromStorage,
|
||
switchTheme,
|
||
DEFAULT_THEME_KEY,
|
||
THEME_CHANGE_EVENT
|
||
} from '@/utils/theme.js'
|
||
import { refreshNavBarTheme, forceApplyTabBarTheme } from '@/utils/themeGlobal'
|
||
import FaIcon from '@/components/FaIcon.vue'
|
||
|
||
export default {
|
||
components: { FaIcon },
|
||
data() {
|
||
return {
|
||
currentThemeKey: '',
|
||
themeConfig: getThemeConfigFromStorage() || THEME_PRESETS[DEFAULT_THEME_KEY],
|
||
THEME_PRESETS,
|
||
isSwitching: false
|
||
}
|
||
},
|
||
// 计算属性：过滤有效主题 + 实时获取配置
|
||
computed: {
|
||
// 过滤掉无效的主题配置，避免循环异常
|
||
validThemeList() {
|
||
const validThemes = {}
|
||
Object.keys(THEME_PRESETS).forEach(key => {
|
||
if (THEME_PRESETS[key]?.name && THEME_PRESETS[key]?.primaryColor) {
|
||
validThemes[key] = THEME_PRESETS[key]
|
||
}
|
||
})
|
||
return validThemes
|
||
},
|
||
// 实时读取最新主题配置（优先级：全局 > 本地 > 默认）
|
||
currentThemeConfig() {
|
||
const appInstance = getApp({ allowDefault: true })
|
||
return appInstance?.globalData?.themeConfig
|
||
|| getThemeConfigFromStorage()
|
||
|| THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initPage()
|
||
},
|
||
onShow() {
|
||
this.syncThemeState()
|
||
refreshNavBarTheme()
|
||
},
|
||
onUnload() {
|
||
uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
|
||
},
|
||
methods: {
|
||
initPage() {
|
||
this.syncThemeState()
|
||
this.watchThemeChange()
|
||
},
|
||
|
||
syncThemeState() {
|
||
const appInstance = getApp({ allowDefault: true })
|
||
this.currentThemeKey = appInstance?.globalData?.themeKey
|
||
|| getThemeKeyFromStorage()
|
||
|| DEFAULT_THEME_KEY
|
||
this.themeConfig = appInstance?.globalData?.themeConfig
|
||
|| getThemeConfigFromStorage()
|
||
|| THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
},
|
||
|
||
watchThemeChange() {
|
||
this.themeChangeHandler = ({ key, config }) => {
|
||
if (!key || !config) return
|
||
if (this.currentThemeKey !== key) {
|
||
this.currentThemeKey = key
|
||
this.themeConfig = config
|
||
}
|
||
}
|
||
uni.$on(THEME_CHANGE_EVENT, this.themeChangeHandler)
|
||
},
|
||
|
||
/**
|
||
* 获取主题项样式（简化逻辑 + 性能优化）
|
||
*/
|
||
getThemeItemStyle(theme, key) {
|
||
const isActive = this.currentThemeKey === key
|
||
return {
|
||
backgroundColor: theme.cardBgColor,
|
||
color: theme.textPrimary,
|
||
borderRadius: '28rpx',
|
||
boxShadow: `0 6rpx 20rpx ${theme.shadowColor}`,
|
||
border: `2rpx solid ${isActive ? theme.primaryColor : theme.borderColor}`,
|
||
marginBottom: isActive ? '0' : '20rpx' // 选中项减少下边距，突出显示
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取主题描述（增强用户认知）
|
||
*/
|
||
getThemeDesc(key) {
|
||
const descMap = {
|
||
default: '暖阳黄 · 明亮活泼，适合日常',
|
||
mint: '清新青 · 自然舒适，清爽怡人',
|
||
cherry: '樱花粉 · 梦幻浪漫，少女心满满',
|
||
sky: '晴空蓝 · 清爽明亮，干净利落',
|
||
dark: '深邃夜 · 护眼深色，夜间更舒适',
|
||
cream: '薰衣草 · 温柔治愈，浪漫梦幻',
|
||
ocean: '柑橘橙 · 元气满满，活力四射',
|
||
matcha: '薄荷青 · 清凉冰爽，沁心舒爽'
|
||
}
|
||
return descMap[key] || '自定义主题风格'
|
||
},
|
||
|
||
/**
|
||
* 选择主题（防重复点击 + 友好交互）
|
||
*/
|
||
async selectTheme(themeKey) {
|
||
// 防重复点击 + 合法性校验
|
||
if (this.isSwitching || this.currentThemeKey === themeKey || !this.validThemeList[themeKey]) {
|
||
return
|
||
}
|
||
|
||
this.isSwitching = true // 上锁
|
||
uni.showLoading({ title: '切换中...', mask: true }) // 遮罩防止误操作
|
||
|
||
try {
|
||
// 调用核心切换方法
|
||
const success = await switchTheme(themeKey)
|
||
|
||
if (success) {
|
||
// 延迟返回，等待提示展示（提升体验）
|
||
setTimeout(() => {
|
||
this.jumpToMyPage()
|
||
}, 800)
|
||
} else {
|
||
uni.showToast({
|
||
title: '主题已生效，云端同步失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
// 同步失败也返回页面
|
||
setTimeout(() => this.jumpToMyPage(), 2000)
|
||
}
|
||
} catch (error) {
|
||
console.error('切换主题异常:', error)
|
||
uni.showToast({
|
||
title: '切换失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} finally {
|
||
uni.hideLoading()
|
||
this.isSwitching = false // 解锁
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 跳转回我的页面（多层兜底，适配所有场景）
|
||
*/
|
||
jumpToMyPage() {
|
||
const pages = getCurrentPages()
|
||
// 场景1：从我的页面跳转 → 回退
|
||
if (pages.length > 1) {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
fail: () => this.forceJumpToMyPage(),
|
||
success: () => this.postJumpRefresh()
|
||
})
|
||
} else {
|
||
// 场景2：直接打开 → 强制跳转
|
||
this.forceJumpToMyPage()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 强制跳转我的页面（终极兜底）
|
||
*/
|
||
forceJumpToMyPage() {
|
||
// 优先级：switchTab（tabBar）> redirectTo > navigateTo
|
||
const jumpMethods = [
|
||
() => uni.switchTab({
|
||
url: '/pages/mine/mine',
|
||
success: () => this.postJumpRefresh(),
|
||
fail: () => {}
|
||
}),
|
||
() => uni.redirectTo({
|
||
url: '/pages/mine/mine',
|
||
success: () => this.postJumpRefresh(),
|
||
fail: () => {}
|
||
}),
|
||
() => uni.navigateTo({
|
||
url: '/pages/mine/mine',
|
||
success: () => this.postJumpRefresh(),
|
||
fail: () => {}
|
||
})
|
||
]
|
||
|
||
// 依次尝试跳转，直到成功
|
||
const tryJump = (index = 0) => {
|
||
if (index >= jumpMethods.length) return
|
||
jumpMethods[index]()
|
||
setTimeout(() => tryJump(index + 1), 300)
|
||
}
|
||
tryJump()
|
||
},
|
||
|
||
/**
|
||
* 跳转后刷新TabBar样式（关键：确保TabBar颜色立即更新）
|
||
*/
|
||
postJumpRefresh() {
|
||
setTimeout(() => {
|
||
const appInstance = getApp({ allowDefault: true })
|
||
if (appInstance?.globalData?.themeConfig) {
|
||
forceApplyTabBarTheme(appInstance.globalData.themeConfig)
|
||
}
|
||
}, 100)
|
||
setTimeout(() => {
|
||
const appInstance = getApp({ allowDefault: true })
|
||
if (appInstance?.globalData?.themeConfig) {
|
||
forceApplyTabBarTheme(appInstance.globalData.themeConfig)
|
||
}
|
||
}, 300)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.theme-page {
|
||
padding: 20rpx 24rpx;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 页面装饰 */
|
||
.page-decoration {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.deco-1 {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
top: -100rpx;
|
||
right: -100rpx;
|
||
animation: float1 8s ease-in-out infinite;
|
||
}
|
||
|
||
.deco-2 {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
bottom: 100rpx;
|
||
left: -60rpx;
|
||
animation: float2 6s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float1 {
|
||
0%, 100% { transform: translate(0, 0); }
|
||
50% { transform: translate(20rpx, 20rpx); }
|
||
}
|
||
|
||
@keyframes float2 {
|
||
0%, 100% { transform: translate(0, 0); }
|
||
50% { transform: translate(-15rpx, -15rpx); }
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.page-header {
|
||
margin-bottom: 40rpx;
|
||
padding: 40rpx 0;
|
||
position: relative;
|
||
}
|
||
|
||
.header-decoration {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.header-glow {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: -50rpx;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
|
||
.header-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.header-icon-wrap {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.header-icon {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.header-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 42rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
.page-subtitle {
|
||
font-size: 28rpx;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
/* 主题列表 */
|
||
.theme-list {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* 主题项 */
|
||
.theme-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-radius: 12rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.theme-item:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.theme-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4rpx;
|
||
background: linear-gradient(90deg, transparent, var(--primaryColor), transparent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.theme-item.active::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 主题预览区 */
|
||
.theme-preview {
|
||
width: 150rpx;
|
||
height: 110rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14rpx;
|
||
margin-right: 28rpx;
|
||
border: 2rpx solid rgba(0,0,0,0.04);
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-shine {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 50%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.preview-circle-wrap {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.preview-circle {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 50%;
|
||
box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.12);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.preview-circle-inner {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.preview-colors {
|
||
display: flex;
|
||
gap: 8rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.preview-color-item {
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
border-radius: 6rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.preview-color-item.primary {
|
||
border-radius: 8rpx 8rpx 2rpx 8rpx;
|
||
}
|
||
|
||
.preview-color-item.secondary {
|
||
border-radius: 8rpx 8rpx 8rpx 2rpx;
|
||
}
|
||
|
||
.preview-color-item.accent {
|
||
border-radius: 8rpx 2rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.preview-color-item.text {
|
||
border-radius: 2rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
/* 主题信息区 */
|
||
.theme-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.theme-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.theme-name {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.theme-badge {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.theme-desc {
|
||
font-size: 26rpx;
|
||
opacity: 0.7;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 选中标识 */
|
||
.active-indicator {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
.indicator-ring {
|
||
position: absolute;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
border: 3rpx solid;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
animation: ringPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.indicator-inner {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.check-icon {
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@keyframes ringPulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(1.15);
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
/* 底部区域 */
|
||
.bottom-area {
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
.tip-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 20rpx;
|
||
padding: 28rpx 32rpx;
|
||
border-radius: 12rpx;
|
||
box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.tip-icon-wrap {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.tip-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.tip-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 26rpx;
|
||
opacity: 0.75;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 全局过渡类 */
|
||
.theme-transition {
|
||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
|
||
/* 覆盖card基础样式 */
|
||
.card {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
</style> |