feat: 皮肤走离线接口

public/static/offline/JSON/theme.json

@@ -0,0 +1,139 @@
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": {
+    "image": {
+      "parking": "/qianmugo/themes/fashion/parking.png",
+      "recBg": "/qianmugo/themes/fashion/recBg.png",
+      "keyboard": "/qianmugo/themes/fashion/keyboard.png",
+      "loc": "/qianmugo/themes/fashion/loc.png",
+      "searchIcon": "/qianmugo/themes/fashion/searchIcon.png",
+      "activity": "/qianmugo/themes/fashion/activity.png",
+      "movie": "/qianmugo/themes/fashion/movie.png",
+      "write_active": "/qianmugo/themes/fashion/write_active.png",
+      "mall": "/qianmugo/themes/fashion/mall.png",
+      "gridActive": "/qianmugo/themes/fashion/gridActive.png",
+      "searchClear": "/qianmugo/themes/fashion/searchClear.png",
+      "back": "/qianmugo/themes/fashion/back.png",
+      "billboardLoc": "/qianmugo/themes/fashion/billboardLoc.png",
+      "billboardHeaderBgV": "/qianmugo/themes/fashion/billboardHeaderBgV.png",
+      "delete": "/qianmugo/themes/fashion/delete.png",
+      "keyboard_active": "/qianmugo/themes/fashion/keyboard_active.png",
+      "rowActive": "/qianmugo/themes/fashion/rowActive.png",
+      "grid": "/qianmugo/themes/fashion/grid.png",
+      "member": "/qianmugo/themes/fashion/member.png",
+      "row": "/qianmugo/themes/fashion/row.png",
+      "searchClose": "/qianmugo/themes/fashion/searchClose.png",
+      "write": "/qianmugo/themes/fashion/write.png",
+      "billboardHeaderBgH": "/qianmugo/themes/fashion/billboardHeaderBgH.png",
+      "brandQrcodeClose": "/qianmugo/themes/fashion/brandQrcodeClose.png"
+    },
+    "index": {
+      "recBg": "rgba(255, 255, 255, 0.6)",
+      "guideBackground": "rgba(255, 255, 255, 0.6)",
+      "guideQrcodeBg": "#ffffff",
+      "guideBorder": "2px solid rgba(255, 255, 255, 0.6)",
+      "hotSearchBg": "rgba(255, 255, 255, 0.8)",
+      "hotSearchColor": "rgba(0, 0, 0, 0.6)",
+      "guideMetaColor": "rgba(0, 0, 0, 0.6)",
+      "guideTopBg": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
+      "recBorder": "2px solid rgba(255, 255, 255, 0.6)",
+      "foodBorder": "4px solid #F68B51",
+      "hotSearchTitleColor": "#fff",
+      "guideColor": "#000000",
+      "foodBg": "rgba(255, 255, 255, 0.6)"
+    },
+    "global": { "background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)", "appBackground": "#dee6f6", "radius": "" },
+    "menu": {
+      "color": "#ffffff",
+      "activeBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
+      "activeBg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
+      "activeBg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
+      "activeBg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
+      "indexBg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
+      "activeBg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
+      "indexBg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
+      "indexBg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
+      "indexColor": "#FFFFFF",
+      "barBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",
+      "bg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
+      "bg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
+      "bg4": "linear-gradient(180deg, #c57df1 0%, #ec86f2 100%)",
+      "indexBg1": "linear-gradient(180deg, #e97893 0%, #f48bca 100%)",
+      "bg3": "linear-gradient(180deg, #53ba82 0%, #89d963 100%)",
+      "indexBg2": "linear-gradient(180deg, #f29348 0%, #f9ba61 100%)",
+      "bg5": "linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%)",
+      "activeColor": "#ffffff"
+    },
+    "carousel": { "titleColor": "#fff", "introColor": "#fff" },
+    "billboard": {
+      "titleColor": "#fff",
+      "background": "linear-gradient(180deg, #6257d7 0%, #f191c0 100%)",
+      "metaColor": "rgba(255, 255, 255, 0.8)",
+      "arrowRadius": "100px",
+      "legendColor": "rgba(255, 255, 255, 0.6)"
+    },
+    "food": { "background": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%)", "metaColor": "rgba(0, 0, 0, 0.6)" },
+    "search": {
+      "resultTitleColor": "rgba(0, 0, 0, 0.8)",
+      "writeColor": "#516DD8",
+      "topBg": "rgba(255, 255, 255, 0.6)",
+      "tabActiveBg": "#FFFFFF",
+      "tabColor": "rgba(0, 0, 0, 0.6)",
+      "hotSearchBg": "rgba(255, 255, 255, 0.8)",
+      "placeholderMetaColor": "rgba(81, 109, 216, 1)",
+      "resultMetaColor": "rgba(0, 0, 0, 0.6)",
+      "hotSearchColor": "rgba(0, 0, 0, 0.6)",
+      "tabActiveColor": "rgba(0, 0, 0, 0.8)",
+      "facTitleColor": "rgba(0, 0, 0, 0.8)",
+      "tabsBg": "rgba(0, 0, 0, 0.05)",
+      "keyColor": "rgba(0, 0, 0, 0.8)",
+      "background": "linear-gradient(180deg, #E0E3EE 0%, #D4D9E7 100%)",
+      "facNameColor": "rgba(0, 0, 0, 0.6)",
+      "keyBg": "#FFFFFF",
+      "barBackground": "#FFFFFF",
+      "keyboardActiveBg": "linear-gradient(180deg, #435ACD 0%, #749CF3 100%)",
+      "hotSearchTitleColor": "rgba(0, 0, 0, 0.8)"
+    },
+    "activities": {
+      "detailBg": "#FFFFFF",
+      "titleColor": "rgba(0, 0, 0, 0.8)",
+      "introColor": "rgba(0, 0, 0, 0.6)",
+      "btnColor": "#FFFFFF",
+      "btnBg": "linear-gradient(113.71deg, #435ACD 0%, #749CF3 100%)",
+      "radius": "16px"
+    },
+    "searchBar": {
+      "border": "2px solid #ffffff",
+      "stickBg": "#747ED3",
+      "borderRadius": "100px",
+      "placeholderColor": "rgba(0, 0, 0, 0.6)",
+      "color": "rgba(0, 0, 0, 0.8)",
+      "background": "rgba(255, 255, 255, 0.6)",
+      "backBorderRadius": "100px"
+    },
+    "weather": { "iconColor": "#fff", "textColor": "#fff" },
+    "time": { "monthColor": "#fff", "timeColor": "#fff", "weekColor": "#f0b92b" },
+    "brand": {
+      "floorMetaColor": "rgba(255, 255, 255, 0.8)",
+      "color": "rgba(0, 0, 0, 0.8)",
+      "qrcodeTextColor": "rgba(0, 0, 0, 0.8)",
+      "qrcodeBg": "rgba(255, 255, 255, 0.8)",
+      "background": "rgba(255, 255, 255, 0.6)",
+      "floorNameColor": "#fff",
+      "metaColor": "rgba(0, 0, 0, 0.6)"
+    },
+    "map": { "background": "#dee2f6" },
+    "guide": {
+      "floorActiveBg": "linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, #FFFFFF 100%)",
+      "allFloorBg": "left / 150px 100% no-repeat linear-gradient(180deg, #6257d7 0%, #f191c0 100%), #dee6f6",
+      "floorColor": "#FFFFFF",
+      "floorBg": "linear-gradient(90deg, #302159 0%, #7756b4 96.35%)",
+      "floorActiveColor": "rgba(0, 0, 0, 0.8)",
+      "allFloorBgH": "right / 100px 100vh no-repeat var(--guide-floorBg), left / calc(100vw - 510px - 100px) 100vh no-repeat #dee6f6",
+      "arrowRadius": "100px",
+      "currentColor": "rgba(0, 0, 0, 0.8)",
+      "currentBg": "linear-gradient(99.5deg, #F0B92B 0%, #F9D556 100%)"
+    }
+  }
+}

src/components/PublicComponent/PublicComponent.vue

@@ -76,12 +76,6 @@ onMounted(() => {
     send(`type:online`)
   }, 30000)
 
-  store.SET_CURRENT_THEME('main')
-  // let i = 0
-  // setInterval(() => {
-  //   i++
-  //   store.SET_CURRENT_THEME(['main', 'fashion', 'highend', 'luxury', 'business', 'dark'][i % 6])
-  // }, 5000)
   window.addEventListener('touchend', checkHandleScreen)
 })
 onBeforeUnmount(() => {

src/composables/useInitConfigAndMallInfo.js

@@ -1,10 +1,22 @@
-import { getConfig, getCurrentFloor, getGuideList } from '@/http/api'
+import { getConfig, getCurrentFloor, getGuideList, getTheme } from '@/http/api'
 import { useStore } from '@/store/root'
 
 export const useInitConfigAndMallInfo = async () => {
   const _config = await getConfig()
   const store = useStore()
 
+  {
+    const { data: theme } = await getTheme()
+    const r = document.querySelector(':root')
+    Object.entries(theme).forEach(([cat, obj]) => {
+      Object.entries(obj).forEach(([k, v]) => r.style.setProperty(`--${cat}-${k}`, v))
+    })
+    theme.images = Object.entries(theme.image)
+      .map(([k, v]) => [k, _config.data.sourceUrl + v])
+      .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+    store.SET_THEME(theme)
+  }
+
   store.SET_CONFIG(_config.data)
 
   const _currentFloor = await getCurrentFloor()

src/http/api.js

@@ -1,6 +1,9 @@
 import { post, get } from './http'
 import { url } from '@/http/config'
 
+//获取皮肤
+export const getTheme = () => get(`/static/offline/JSON/theme.json`)
+
 //首页热搜及卡片
 export const getIndexList = () => get(`${url().sourceUrl}/JSON/index.json`)
 

src/store/root/actions.js

@@ -51,14 +51,10 @@ export const actions = {
   SET_MAP_DATA(data) {
     this.mapData = data
   },
-  SET_CURRENT_THEME(data) {
-    this.currentThemeName = data
-    const r = document.querySelector(':root')
-    Object.entries(themes[data]).forEach(([cat, obj]) => {
-      Object.entries(obj).forEach(([k, v]) => r.style.setProperty(`--${cat}-${k}`, v))
-    })
-  },
   SET_FACILITY(data) {
     this.facility = data
+  },
+  SET_THEME(data) {
+    this.theme = data
   }
 }

src/store/root/getters.js

@@ -50,6 +50,3 @@ export const currentFloorShopMap = ({ currentFloor: device, shopList, mapData })
       return { ...acc, [shop.shopId]: result }
     }, {})
 }
-export const theme = state => {
-  return state.themes[state.currentThemeName]
-}

src/store/root/state.js

@@ -1,5 +1,4 @@
 import { sidebarList } from '@/components/Sidebar/list'
-import themes from '@/themes'
 
 export const state = () => ({
   sidebarList,
@@ -19,8 +18,7 @@ export const state = () => ({
   isUseFace: 0, //是否使用人脸 0:不使用 1: 使用
   isUseSpeech: 1, //是否使用语音 0:不使用 1: 使用
   mapData: null,
-  themes,
-  currentThemeName: 'main',
+  theme: null,
   facility: null
 })