系统主题配置

src/App.vue

@@ -3,7 +3,7 @@ import config from "./config";
 import store from "@/store";
 import { getToken } from "@/utils/auth";
 
-import { defineComponent, getCurrentInstance, inject, onMounted, watchEffect } from "vue";
+import { defineComponent, getCurrentInstance, inject, nextTick, onMounted, watchEffect } from "vue";
 import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
 
 let tab = inject("$tab");
@@ -38,6 +38,11 @@ watchEffect(() => {
 
 onShow(() => {
   console.log("App Show");
+
+  //初始化默认主题
+  if (!proxy.$settingStore.$state.themeColor) {
+    proxy.$settingStore.SET_THEMECOLOR(proxy.$constData.themeList[0]);
+  }
 });
 
 onHide(() => {

src/api/system/user.js

@@ -34,8 +34,8 @@ export function updateUserProfile(data) {
 // 用户头像上传
 export function uploadAvatar(data) {
   return upload({
-    url: '/system/user/profile/avatar',
+    url: "/service-file/upload",
     name: data.name,
-    filePath: data.filePath
-  })
-}
+    filePath: data.filePath,
+  });
+}

src/pages.json

@@ -415,8 +415,8 @@
     "list": [
       {
         "pagePath": "pages/index",
-        "iconPath": "/static/images/tabBar/home.png",
-        "selectedIconPath": "/static/images/tabBar/home-selected.png",
+        "iconPath": "/static/images/tabBar/tab-home.png",
+        "selectedIconPath": "/static/images/tabBar/tab-home-blue.png",
         "text": "工作台"
       },
       // {
@@ -427,14 +427,14 @@
       // },
       {
         "pagePath": "pages/info/info",
-        "iconPath": "/static/images/tabBar/info.png",
-        "selectedIconPath": "/static/images/tabBar/info-selected.png",
+        "iconPath": "/static/images/tabBar/tab-info.png",
+        "selectedIconPath": "/static/images/tabBar/tab-info-blue.png",
         "text": "消息"
       },
       {
         "pagePath": "pages/mine/index",
-        "iconPath": "/static/images/tabBar/setting.png",
-        "selectedIconPath": "/static/images/tabBar/setting-selected.png",
+        "iconPath": "/static/images/tabBar/tab-my.png",
+        "selectedIconPath": "/static/images/tabBar/tab-my-blue.png",
         "text": "我的"
       }
     ]
@@ -442,7 +442,7 @@
   "globalStyle": {
     "navigationBarTextStyle": "white",
     "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#149EFF",
+    "navigationBarBackgroundColor": "#fff",
     "backgroundColor": "#F8F8F8"
     // "enablePullDownRefresh": true
   },

src/pages/business/mhxf/unitInfoCollection/index.vue

@@ -192,7 +192,7 @@
                   <u-checkbox :customStyle="{ marginBottom: '8px' }" label="自动喷水灭火系统" :name="1"> </u-checkbox>
                   <u-checkbox :customStyle="{ marginBottom: '8px' }" label="火灾自动报警系统" :name="2"> </u-checkbox>
                   <u-checkbox :customStyle="{ marginBottom: '8px' }" label="防排烟与排烟系统" :name="3"> </u-checkbox>
-                  <u-checkbox :customStyle="{ marginBottom: '8px' }" label="是否接入物联网" :name="4"> </u-checkbox>
+                  <u-checkbox :customStyle="{ marginBottom: '8px' }" label="消防物联网系统" :name="4"> </u-checkbox>
                 </u-checkbox-group>
               </u-form-item>
 

src/pages/business/mhxf/xunJian/xunJian.vue

@@ -43,18 +43,19 @@
 
 <script setup>
 import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
-import { ref, onMounted, inject } from "vue";
+import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, inject } from "vue";
 
 import chart from "./components/echarts/chart.vue";
 import json from "@/static/js/json.js";
 
-import publicStore from "@/store/modules/public";
-import useXunJianStore from "@/store/modules/xunJian";
-
 import { appPlanStatistics } from "@/api/business/mhxf/xunJian/index.js";
 
+import publicStore from "@/store/modules/public";
+import xunJianStore from "@/store/modules/xunJian";
 const publicStores = publicStore(); //全局公共Store
-const settingsStore = useXunJianStore(); //全局变量值Store
+const xunjianStore = xunJianStore(); //全局变量值Store
+
+const { proxy } = getCurrentInstance();
 
 const inspectList = json.xunJianList; //九宫格json数据
 
@@ -64,9 +65,9 @@ const currentDateList = ref([]);
 function navItemClick(url, id) {
   if (url) {
     if (id == 1) {
-      settingsStore.planTabs = 0;
+      xunjianStore.planTabs = 0;
     } else if (id == 2) {
-      settingsStore.planTabs = 1;
+      xunjianStore.planTabs = 1;
     }
 
     uni.navigateTo({
@@ -104,6 +105,11 @@ async function echartsApi() {
 onLoad(() => {
   echartsApi();
 });
+
+onShow(() => {
+  //调用系统主题颜色
+  proxy.$settingStore.systemThemeColor([1]);
+});
 </script>
 
 <style lang="scss"></style>

src/pages/index.vue

@@ -312,10 +312,6 @@ onLoad((option) => {
   getMobileBannerApi();
 });
 
-async function init() {
-  window.location.href = BASE_URL + "Com/getPageAuthorization1";
-}
-
 //APP扫码
 function scanCode() {
   uni.scanCode({
@@ -530,6 +526,11 @@ function getHandleData(param = {}) {
   });
 }
 
+onShow(() => {
+  //调用系统主题颜色
+   proxy.$settingStore.systemThemeColor([1, 2]);
+});
+
 // 自定义导航事件
 onNavigationBarButtonTap((e) => {
   if (e.float == "right") {

src/pages/login.vue

@@ -292,14 +292,6 @@ function handlePrivacy() {
 onLoad(() => {
   env();
 });
-
-// onReady(() => {
-//   //动态修改状态栏的颜色
-//   uni.setNavigationBarColor({
-//     frontColor: "#000000",
-//     backgroundColor: "#ff0000",
-//   });
-// });
 </script>
 
 <style>

src/plugins/constData.plugins.js

@@ -0,0 +1,158 @@
+export default {
+	// app应用名称
+	appName: '通用办公',
+
+	// 主题列表
+	themeList: [{
+		title: '官方',
+		name: 'rf',
+		color: '#149eff',
+		tabList: [
+			'/static/images/tabBar/tab-home-blue.png',
+			'/static/images/tabBar/tab-info-blue.png',
+			'/static/images/tabBar/tab-my-blue.png'
+		]
+	},
+	{
+		title: '嫣红',
+		name: 'red',
+		color: '#e54d42',
+		tabList: [
+			'/static/images/tabBar/tab-home-red.png',
+			'/static/images/tabBar/tab-info-red.png',
+			'/static/images/tabBar/tab-my-red.png'
+		]
+	},
+	{
+		title: '桔橙',
+		name: 'orange',
+		color: '#f37b1d',
+		tabList: [
+			'/static/images/tabBar/tab-home-orange.png',
+			'/static/images/tabBar/tab-info-orange.png',
+			'/static/images/tabBar/tab-my-orange.png'
+		]
+	},
+	{
+		title: '明黄',
+		name: 'yellow',
+		color: '#fbbd08',
+		tabList: [
+			'/static/images/tabBar/tab-home-yellow.png',
+			'/static/images/tabBar/tab-info-yellow.png',
+			'/static/images/tabBar/tab-my-yellow.png'
+		]
+	},
+	{
+		title: '橄榄',
+		name: 'olive',
+		color: '#8dc63f',
+		tabList: [
+			'/static/images/tabBar/tab-home-olive.png',
+			'/static/images/tabBar/tab-info-olive.png',
+			'/static/images/tabBar/tab-my-olive.png'
+		]
+	},
+	{
+		title: '森绿',
+		name: 'green',
+		color: '#39b54a',
+		tabList: [
+			'/static/images/tabBar/tab-home-green.png',
+			'/static/images/tabBar/tab-info-green.png',
+			'/static/images/tabBar/tab-my-green.png'
+		]
+	},
+	{
+		title: '天青',
+		name: 'cyan',
+		color: '#1cbbb4',
+		tabList: [
+			'/static/images/tabBar/tab-home-cyan.png',
+			'/static/images/tabBar/tab-info-cyan.png',
+			'/static/images/tabBar/tab-my-cyan.png'
+		]
+	},
+	{
+		title: '海蓝',
+		name: 'blue',
+		color: '#0081ff',
+		tabList: [
+			'/static/images/tabBar/tab-home-blue.png',
+			'/static/images/tabBar/tab-info-blue.png',
+			'/static/images/tabBar/tab-my-blue.png'
+		]
+	},
+	{
+		title: '姹紫',
+		name: 'purple',
+		color: '#6739b6',
+		tabList: [
+			'/static/images/tabBar/tab-home-purple.png',
+			'/static/images/tabBar/tab-info-purple.png',
+			'/static/images/tabBar/tab-my-purple.png'
+		]
+	},
+	{
+		title: '木槿',
+		name: 'mauve',
+		color: '#9c26b0',
+		tabList: [
+			'/static/images/tabBar/tab-home-mauve.png',
+			'/static/images/tabBar/tab-info-mauve.png',
+			'/static/images/tabBar/tab-my-mauve.png'
+		]
+	},
+	{
+		title: '桃粉',
+		name: 'pink',
+		color: '#e03997',
+		tabList: [
+			'/static/images/tabBar/tab-home-pink.png',
+			'/static/images/tabBar/tab-info-pink.png',
+			'/static/images/tabBar/tab-my-pink.png'
+		]
+	},
+	{
+		title: '棕褐',
+		name: 'brown',
+		color: '#a5673f',
+		tabList: [
+			'/static/images/tabBar/tab-home-brown.png',
+			'/static/images/tabBar/tab-info-brown.png',
+			'/static/images/tabBar/tab-my-brown.png'
+		]
+	},
+	{
+		title: '玄灰',
+		name: 'grey',
+		color: '#8799a3',
+		tabList: [
+			'/static/images/tabBar/tab-home-grey.png',
+			'/static/images/tabBar/tab-info-grey.png',
+			'/static/images/tabBar/tab-my-grey.png'
+		]
+	},
+	{
+		title: '草灰',
+		name: 'gray',
+		color: '#aaaaaa',
+		tabList: [
+			'/static/images/tabBar/tab-home-gray.png',
+			'/static/images/tabBar/tab-info-gray.png',
+			'/static/images/tabBar/tab-my-gray.png'
+		]
+	},
+	{
+		title: '墨黑',
+		name: 'black',
+		color: '#333333',
+		tabList: [
+			'/static/images/tabBar/tab-home-black.png',
+			'/static/images/tabBar/tab-info-black.png',
+			'/static/images/tabBar/tab-my-black.png'
+		]
+	}
+	],
+
+};

src/plugins/index.js

@@ -3,6 +3,8 @@ import auth from "./auth";
 import modal from "./modal";
 import common from "./common";
 import setting from "./setting";
+import constData from "./constData.plugins.js";
+import settingStore from "@/store/modules/setting.js";
 
 export default {
   install(app) {
@@ -21,5 +23,12 @@ export default {
     // 公共设置方法
     app.provide("$setting", setting);
     app.config.globalProperties.$setting = setting;
+    // 公共默认数据存储
+    app.provide("$constData", constData);
+    app.config.globalProperties.$constData = constData;
+    // 公共设置stroe
+    app.provide("$settingStore", settingStore());
+    app.config.globalProperties.$settingStore = settingStore();
+
   },
 };

src/static/iconfont/uciconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3620854 */
-  src: url('iconfont.woff2?t=1681973516727') format('woff2'),
-       url('iconfont.woff?t=1681973516727') format('woff'),
-       url('iconfont.ttf?t=1681973516727') format('truetype');
+  src: url('iconfont.woff2?t=1682565584492') format('woff2'),
+       url('iconfont.woff?t=1682565584492') format('woff'),
+       url('iconfont.ttf?t=1682565584492') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.ucicon-colorlens:before {
+  content: "\e64b";
+}
+
 .ucicon-shezhi:before {
   content: "\e70f";
 }

src/store/modules/setting.js

@@ -1,8 +1,13 @@
+
+import storage from "@/utils/storage";
+import constant from "@/utils/constant";
 import { defineStore } from "pinia";
 
 const settingStore = defineStore("setting", {
     state: () => ({
         currentSize: "",//APP缓存
+
+        themeColor: storage.get(constant.themeColor),//主题
     }),
     persist: {
         // 自定义数据持久化方式
@@ -16,7 +21,43 @@ const settingStore = defineStore("setting", {
             console.log("After" + context);
         },
     },
-    actions: {},
+    actions: {
+        /**
+         * @系统主题颜色
+         */
+        systemThemeColor(type) {
+            if (type.includes(1)) {
+                uni.setNavigationBarColor({
+                    frontColor: "#ffffff",
+                    backgroundColor: this.themeColor.color,
+                    animation: {
+                        duration: 400,
+                        timingFunc: "easeIn",
+                    },
+                });
+            }
+
+            if (type.includes(2)) {
+                uni.setTabBarStyle({
+                    selectedColor: this.themeColor.color,
+                    borderStyle: "white",
+                });
+
+                this.themeColor.tabList.forEach((selectedIconPath, index) => {
+                    uni.setTabBarItem({
+                        index,
+                        selectedIconPath,
+                    });
+                });
+            }
+        },
+
+        SET_THEMECOLOR(themeColor) {
+            // storage.get(constant.name)
+            this.themeColor = themeColor;
+            storage.set(constant.themeColor, themeColor);
+        },
+    },
 });
 
 export default settingStore;

src/store/modules/xunJian.js

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-const useXunJianStore = defineStore("xunJian", {
+const xunJianStore = defineStore("xunJian", {
   state: () => ({
     planTabs: 0, //巡检计划页 tabs切换值
     siteId: null, //巡检计划页 站点id
@@ -27,4 +27,4 @@ const useXunJianStore = defineStore("xunJian", {
   actions: {},
 });
 
-export default useXunJianStore;
+export default xunJianStore;

src/utils/constant.js

@@ -8,7 +8,9 @@ const constant = {
   loginBottomTitle: 'vuex_loginBottomTitle',
   loginBg: 'vuex_loginBg',
   loginLogo: 'vuex_loginLogo',
-  tenantId: 'vuex_tenantId', 
+  tenantId: 'vuex_tenantId',
+
+  themeColor: 'vuex_themeColor'
 }
 
 export default constant

src/utils/storage.js

@@ -4,7 +4,19 @@ import constant from './constant'
 let storageKey = 'storage_data'
 
 // 存储节点变量名
-let storageNodeKeys = [constant.avatar, constant.name, constant.phonenumber, constant.roles, constant.permissions, constant.loginTitle, constant.loginBottomTitle, constant.loginBg, constant.loginLogo, constant.tenantId]
+let storageNodeKeys = [
+  constant.avatar,
+  constant.name,
+  constant.phonenumber,
+  constant.roles,
+  constant.permissions,
+  constant.loginTitle,
+  constant.loginBottomTitle,
+  constant.loginBg,
+  constant.loginLogo,
+  constant.tenantId,
+  constant.themeColor
+]
 
 // 存储的数据
 let storageData = uni.getStorageSync(storageKey) || {}

src/utils/upload.js

@@ -1,5 +1,5 @@
 import useStores from "@/store/modules/user.js";
-import config from "@/config";
+import configs from "@/config";
 import { getToken } from "@/utils/auth";
 import modal from "@/plugins/modal";
 import common from "@/plugins/common";
@@ -20,10 +20,11 @@ const upload = (config) => {
     url = url.slice(0, -1);
     config.url = url;
   }
+
   return new Promise((resolve, reject) => {
     uni.uploadFile({
       timeout: config.timeout || timeout,
-      url: config.baseUrl + config.url,
+      url: configs.baseUrl + config.url,
       filePath: config.filePath,
       name: config.name || "file",
       header: config.header,