feat: 实现主题管理功能，优化样式和组件

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(() => {});
+			},
 			/**
 			 * 微信小程序版本提交更新版本 解决缓存问题
 			 */

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,
+  });
+}

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.$mainColor = computed(() => store.getters.mainColor)
-  app.config.globalProperties.$lightColor = config.lightColor
+  app.config.globalProperties.$lightColor = computed(() => store.getters.lightColor)
-  app.config.globalProperties.$aiderLightColor = config.aiderLightColor
+  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

pages.json

@@ -855,7 +855,7 @@
 	},
 	"tabBar": {
 		"color": "#666",
-		"selectedColor": "#ff573e",
+		"selectedColor": "#ff3c2a",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{

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;

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;
 }
 

pages/tabbar/cart/cartList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="themeStyle">
     <u-navbar
       class="cart-navbar"
       :style="cartNavbarStyle"

pages/tabbar/category/category.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="category-wrap">
+  <view class="category-wrap" :style="themeStyle">
     <u-navbar
       class="navbar"
       :auto-back="false"

pages/tabbar/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="themeStyle">
     <!-- 楼层装修组件 -->
     <tpl ref="tpl" />
   </div>

pages/tabbar/home/template/advertising.scss

@@ -10,7 +10,7 @@
     .price-text {
       font-size: 15px;
       font-weight: 500;
-      color: #e1212b;
+      color: $main-color;
     }
   }
   .join-item {

pages/tabbar/home/template/tpl_group.vue

@@ -73,7 +73,7 @@ export default {
   .price-text {
     font-size: 15px;
     font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
   }
 }
 .join-item {

pages/tabbar/home/template/tpl_integral.vue

@@ -70,7 +70,7 @@ export default {
   .price-text {
     font-size: 15px;
     font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
   }
 }
 .join-item {

pages/tabbar/home/template/tpl_promotions_detail.vue

@@ -198,7 +198,7 @@ export default {
   .price-text {
     font-size: 28rpx;
     font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
   }
 }
 .join-item {
@@ -248,7 +248,7 @@ export default {
     margin-left: 20rpx;
   }
   .sub {
-    background-color: #e1212b;
+    background-color: $main-color;
     margin-right: 80rpx;
   }
   .sub-seckill {
@@ -256,9 +256,9 @@ export default {
     padding: 0 !important;
   }
   .sub-seckill-block {
-    background: rgba($main-color, 0.3);
+    background: var(--theme-primary-30, rgba(255, 60, 42, 0.3));
     border-radius: 100px !important;
-    color: rgba($main-color, 0.7);
+    color: var(--theme-primary-70, rgba(255, 60, 42, 0.7));
     overflow: hidden;
     padding-right: 8rpx;
   }

pages/tabbar/home/template/tpl_spike.vue

@@ -77,7 +77,7 @@ export default {
   .price-text {
     font-size: 15px;
     font-weight: 500;
-    color: #e1212b;
+    color: $main-color;
   }
 }
 .join-item {

pages/tabbar/home/views.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="wrapper" :style="themeStyle">
     <!-- uni 中不能使用 vue component 所以用if判断每个组件 -->
     <div v-for="(item, index) in pageData.list" :key="index">
       <!-- 搜索栏，如果在楼层装修顶部则会自动浮动，否则不浮动 -->

pages/tabbar/user/my.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="user">
+  <view class="user" :style="themeStyle">
     <!-- 个人信息 -->
     <view class="status_bar">
       <!-- 这里是状态栏 -->

store/index.js

@@ -1,5 +1,9 @@
 import { createStore } from 'vuex'
 import storage from '@/utils/storage'
+import config from '@/config/config'
+import { DEFAULT_THEME, loadCachedTheme } from '@/utils/theme'
+
+const cachedTheme = loadCachedTheme()
 
 const store = createStore({
   state: {
@@ -11,7 +15,13 @@ const store = createStore({
     hasLogin: storage.getHasLogin(),
     userInfo: storage.getUserInfo(),
     uuid: storage.getUuid(),
-    token: ''
+    token: '',
+    theme: cachedTheme || { ...DEFAULT_THEME },
+  },
+  getters: {
+    mainColor: (state) => state.theme.mainColor,
+    lightColor: (state) => state.theme.lightColor,
+    aiderLightColor: (state) => state.theme.aiderLightColor,
   },
   mutations: {
     login(state, userInfo) {
@@ -26,8 +36,15 @@ const store = createStore({
     },
     setRemark(state, remark) {
       state.remark = remark
+    },
+    SET_THEME(state, theme) {
+      state.theme = {
+        mainColor: theme.mainColor || DEFAULT_THEME.mainColor,
+        lightColor: theme.lightColor || DEFAULT_THEME.lightColor,
+        aiderLightColor: theme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
       }
     },
+  },
   actions: {}
 })
 

uni.scss

@@ -29,13 +29,13 @@ $uni-color-error: #dd524d;
 /**微信登录按钮颜色 */
 $weChat-color:#00a327;
 /**主颜色*/
-$main-color: #ff3c2a;
+$main-color: var(--theme-primary, #ff3c2a);
 /*用于金钱等颜色 */
-$price-color: #ff3c2a;
+$price-color: var(--theme-primary, #ff3c2a);
 /*主题高亮颜色*/
-$light-color: #ff6b35;
+$light-color: var(--theme-light, #ff6b35);
 /*辅助高亮颜色*/
-$aider-light-color: #ff9f28;
+$aider-light-color: var(--theme-aider, #ff9f28);
 
 /*主题高亮背景颜色*/
 $main-light-color: #edfcf7;
@@ -72,7 +72,7 @@ $font-weight: 400;
 
 // 渐变主题颜色
 .bg-linear-gradient {
-	background-image: linear-gradient(25deg, #fa123b, #ff6b35, #ff9f28, #ffcc03);
+	background-image: linear-gradient(25deg, var(--theme-primary, #fa123b), var(--theme-light, #ff6b35), var(--theme-aider, #ff9f28), #ffcc03);
 }
 .uni-tabbar .uni-tabbar__icon {
 	width: 20px;

utils/filters.js

@@ -3,6 +3,11 @@ import { getUserInfo } from "@/api/members";
 import storage from "@/utils/storage.js";
 import config from "@/config/config";
 import Foundation from "./Foundation.js";
+import store from "@/store";
+
+function getMainColor() {
+  return store.getters.mainColor || config.mainColor;
+}
 
 /**
  * 解析商品图片地址，兼容上传 JSON 与纯 URL，非法时返回占位图
@@ -356,7 +361,7 @@ export function quiteLoginOut () {
   uni.showModal({
     title: "提示",
     content: "是否退出登录？",
-    confirmColor: config.mainColor,
+    confirmColor: getMainColor(),
     async success (res) {
       if (res.confirm) {
         storage.setAccessToken("");
@@ -378,7 +383,7 @@ export function logoff () {
   uni.showModal({
     title: "提示",
     content: "确认注销用户么？注销用户将无法再次登录并失去当前数据。",
-    confirmColor: config.mainColor,
+    confirmColor: getMainColor(),
     async success (res) {
       if (res.confirm) {
         await logoffConfirm();
@@ -415,7 +420,7 @@ export function tipsToLogin (type) {
       content: "当前用户未登录是否登录？",
       confirmText: "确定",
       cancelText: "取消",
-      confirmColor: config.mainColor,
+      confirmColor: getMainColor(),
       success: (res) => {
         if (res.confirm) {
           navigateToLogin();

utils/theme.js

@@ -0,0 +1,77 @@
+import config from "@/config/config";
+
+export const DEFAULT_THEME = {
+  mainColor: config.mainColor,
+  lightColor: config.lightColor,
+  aiderLightColor: config.aiderLightColor,
+};
+
+const STORAGE_KEY = "theme_setting";
+const EXPIRATION_KEY = "theme_setting_expiration_time";
+
+export function normalizeTheme(data = {}) {
+  return {
+    mainColor: data.themeColor || DEFAULT_THEME.mainColor,
+    lightColor: data.lightColor || DEFAULT_THEME.lightColor,
+    aiderLightColor: data.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+  };
+}
+
+export function cacheTheme(theme) {
+  const expirationTime = new Date().setHours(new Date().getHours() + 1);
+  uni.setStorageSync(EXPIRATION_KEY, expirationTime);
+  uni.setStorageSync(STORAGE_KEY, theme);
+}
+
+export function loadCachedTheme() {
+  const expirationTime = uni.getStorageSync(EXPIRATION_KEY);
+  const cacheValid =
+    expirationTime && new Date() <= new Date(Number(expirationTime));
+  if (!cacheValid) return null;
+  try {
+    return uni.getStorageSync(STORAGE_KEY) || null;
+  } catch {
+    return null;
+  }
+}
+
+export function applyTabBarStyle(mainColor) {
+  if (!mainColor) return;
+  try {
+    uni.setTabBarStyle({
+      selectedColor: mainColor,
+    });
+  } catch (e) {
+    // 非 tabBar 页面可能报错，忽略
+  }
+}
+
+function hexToRgba(hex, alpha) {
+  if (!hex) return `rgba(255, 60, 42, ${alpha})`;
+  const normalized = String(hex).replace("#", "");
+  const full =
+    normalized.length === 3
+      ? normalized
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : normalized;
+  if (full.length !== 6) return `rgba(255, 60, 42, ${alpha})`;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+export function getThemeStyle(theme) {
+  const primary = theme.mainColor || DEFAULT_THEME.mainColor;
+  return {
+    "--theme-primary": primary,
+    "--theme-light": theme.lightColor || DEFAULT_THEME.lightColor,
+    "--theme-aider": theme.aiderLightColor || DEFAULT_THEME.aiderLightColor,
+    "--theme-primary-10": hexToRgba(primary, 0.1),
+    "--theme-primary-20": hexToRgba(primary, 0.2),
+    "--theme-primary-30": hexToRgba(primary, 0.3),
+    "--theme-primary-70": hexToRgba(primary, 0.7),
+  };
+}