diff --git a/App.vue b/App.vue index caf4b61..57e52e6 100644 --- a/App.vue +++ b/App.vue @@ -8,6 +8,13 @@ import { } from "@/js_sdk/h5-copy/h5-copy.js"; import APPUpdate from "@/plugins/APPUpdate"; import storage from "@/utils/storage"; +import { getThemeSetting } from "@/api/common.js"; +import { + applyTabBarStyle, + cacheTheme, + loadCachedTheme, + normalizeTheme, +} from "@/utils/theme"; import { mapMutations } from "vuex"; @@ -36,6 +43,7 @@ import { * 监听返回(页面级 onBackPress 在 App.vue 不生效,保留空实现避免误导) */ onLaunch: function(val) { + this.initTheme(); if(val.query.inviter){ storage.setInviter(val.query.inviter) } @@ -69,7 +77,29 @@ import { // #endif }, methods: { - ...mapMutations(["login"]), + ...mapMutations(["login", "SET_THEME"]), + initTheme() { + const cached = loadCachedTheme(); + if (cached) { + this.SET_THEME(cached); + applyTabBarStyle(cached.mainColor); + } + getThemeSetting() + .then((res) => { + if (res.data && res.data.success && res.data.result && res.data.result.settingValue) { + try { + const raw = JSON.parse(res.data.result.settingValue); + const theme = normalizeTheme(raw); + this.SET_THEME(theme); + cacheTheme(theme); + applyTabBarStyle(theme.mainColor); + } catch (e) { + // 主题配置解析失败时使用缓存 + } + } + }) + .catch(() => {}); + }, /** * 微信小程序版本提交更新版本 解决缓存问题 */ diff --git a/api/common.js b/api/common.js index 20f7ce3..3050efc 100644 --- a/api/common.js +++ b/api/common.js @@ -30,3 +30,14 @@ export function getIMDetail() { * @type {string} */ export const upload = api.common + "/common/upload/file"; + +/** + * 获取主题色配置 + */ +export function getThemeSetting() { + return http.request({ + url: `${api.common}/common/common/site/theme`, + method: Method.GET, + message: false, + }); +} diff --git a/main.js b/main.js index 5b4c72f..e845274 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,4 @@ -import { createSSRApp } from 'vue' +import { createSSRApp, computed } from 'vue' import App from './App' import uviewPlus, { setConfig } from 'uview-plus' import store from './store' @@ -6,6 +6,7 @@ import config from '@/config/config' import airBtn from '@/components/m-airbtn/index.vue' import mpShare from '@/utils/mpShare.js' import * as filterUtils from './utils/filters.js' +import { getThemeStyle } from '@/utils/theme' export function createApp() { const app = createSSRApp(App) @@ -40,9 +41,11 @@ export function createApp() { }) app.config.globalProperties.$store = store - app.config.globalProperties.$mainColor = config.mainColor - app.config.globalProperties.$lightColor = config.lightColor - app.config.globalProperties.$aiderLightColor = config.aiderLightColor + app.config.globalProperties.$mainColor = computed(() => store.getters.mainColor) + app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor) + app.config.globalProperties.$aiderLightColor = computed( + () => store.getters.aiderLightColor + ) const filterMethods = {} Object.keys(filterUtils).forEach((key) => { @@ -50,7 +53,15 @@ export function createApp() { filterMethods[key] = filterUtils[key] } }) - app.mixin({ methods: filterMethods }) + + app.mixin({ + methods: filterMethods, + computed: { + themeStyle() { + return getThemeStyle(this.$store.state.theme) + }, + }, + }) app.mixin(mpShare) // #ifdef H5 diff --git a/pages.json b/pages.json index 489b660..1233801 100644 --- a/pages.json +++ b/pages.json @@ -855,7 +855,7 @@ }, "tabBar": { "color": "#666", - "selectedColor": "#ff573e", + "selectedColor": "#ff3c2a", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ diff --git a/pages/cart/payment/shareOrderGoods.vue b/pages/cart/payment/shareOrderGoods.vue index b19878e..e8d300a 100644 --- a/pages/cart/payment/shareOrderGoods.vue +++ b/pages/cart/payment/shareOrderGoods.vue @@ -321,7 +321,7 @@ page { background: $main-color; } .disabled { - background: rgba($main-color, $alpha: 0.2); + background: var(--theme-primary-20, rgba(255, 60, 42, 0.2)); } .home { color: $main-color; diff --git a/pages/mine/im/index-app.scss b/pages/mine/im/index-app.scss index ebec467..3e1115c 100644 --- a/pages/mine/im/index-app.scss +++ b/pages/mine/im/index-app.scss @@ -5087,7 +5087,7 @@ scroll-view.cu-steps .cu-item { } .bg-user-orang { - background-color:rgba($main-color,0.1); + background-color: var(--theme-primary-10, rgba(255, 60, 42, 0.1)); color: black; } diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue index 1f8c0d1..89b084d 100644 --- a/pages/tabbar/cart/cartList.vue +++ b/pages/tabbar/cart/cartList.vue @@ -1,5 +1,5 @@