冲突合并

src/hooks/web/useDictionaries.js

@@ -14,11 +14,9 @@ const setDict = (type, val, cacheTime) => {
 
 export const getDict = (type) => {
     return new Promise((resolve) => {
-      const catchData = localStorage.getItem(type)
-      if (!catchData) {
-        return
-      }
-      if (catchData.expire && (Date.now() <= catchData.expire)) {
+      const item = localStorage.getItem(type)
+      const catchData = item ? JSON.parse(item) : null
+      if (catchData && catchData.expire && (Date.now() <= catchData.expire)) {
         return resolve(catchData.data)
       }
       // 传参按照规范参数传

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="parent">
-    <Headers class="headers"></Headers>
+  <div>
+    <Headers class="headers" @click="layoutClick"></Headers>
     <div style="margin-top: 50px;">
       <router-view></router-view>
     </div>
@@ -13,7 +13,14 @@
 import Headers from './personal/navBar.vue'
 import Footers from './personal/footer.vue'
 import Slider from './personal/slider.vue'
+import { useSharedState } from '@/store/sharedState'
 defineOptions({ name: 'layout-index' })
+
+const sharedState = useSharedState()
+
+const layoutClick = () => {
+  sharedState.increment()
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/personal/navBar.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <div class="banner">
+    <v-toolbar
+      class="banner"
+      density="compact"
+      style="padding-left: 0px;height: 50px;font-size: 14px;"
+    >
       <div class="innerBox">
         <div class="nav-logo">
           <v-img src="../../assets/logo.png"  aspect-ratio="16/9" cover :width="90" style="height: 40px"></v-img>
@@ -25,23 +29,24 @@
               <a href="">我要找工作</a>
               <a href="">我要招聘</a>
             </span>
-            <v-btn class="half-button" color="primary" size="small" @click="handleLogin">登录/注册</v-btn>
+            <v-btn class="half-button" border color="primary" size="small" @click="handleLogin">登录/注册</v-btn>
             <v-menu>
               <template v-slot:activator="{ props }">
                 <v-btn
                   class="ml-3"
                   icon="mdi-translate"
-                  size="x-small"
-                  color="primary"
+                  size="small"
                   v-bind="props"
                 >
                 </v-btn>
               </template>
-              <v-list density="compact" >
+              <v-list density="compact">
                 <v-list-item
                   v-for="item in localeStore.localeMap"
                   :key="item.name"
-                  :value="item.name"
+                  :value="item.lang"
+                  :active="localeStore.currentLocale.lang === item.lang"
+                  @click="localeStore.setCurrentLocale(item)"
                 >
                   <v-list-item-title>{{ item.name }}</v-list-item-title>
                 </v-list-item>
@@ -69,7 +74,7 @@
           </v-menu>
         </div>
       </div>
-    </div>
+    </v-toolbar>
     <Dialog :visible="show" :footer="true" title="企业注册" widthType="1" @close="show = false">
       <enterpriseRegister ref="enterpriseRegisterRef"></enterpriseRegister>
     </Dialog>

src/store/dictionaries.js

@@ -1,42 +0,0 @@
-/**
- * 获取字典信息 配置api过期自动读取
- */
-import { defineStore } from 'pinia'
-import { ref } from 'vue' 
-
-const DICT_CITY_API = {
-  DICT_CITY: Promise.resolve()
-}
-
-export const useDictionariesStore = defineStore('dictionaries', 
-  () => {
-
-    const DICT_CITY = ref({})
-
-    const setDict = (type, val, cacheTime) => {
-      [type].value = {
-        data: val,
-        expire: Date.now() + cacheTime
-      }
-    }
-
-    const getDict = (type) => {
-      return new Promise((resolve) => {
-        if ([type].value.expire && (Date.now() <= [type].value.expire)) {
-          return resolve([type].value.data)
-        }
-        DICT_CITY_API.DICT_CITY({ type }).then(({data}) => {
-          setDict(type, data, Date.now())
-          resolve(data)
-        })
-      })
-    }
-
-    return {
-      getDict
-    }
-  },
-  {
-    persist: true, // ref() 持久化响应
-  }
-)

src/store/sharedState.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useSharedState = defineStore('sharedState', {
+  state: () => ({
+    layoutClickCount: 0
+  }),
+  actions: {
+    increment() {
+      this.layoutClickCount++
+    }
+    // setMessage(message) {
+    //   this.message = this.message + message
+    // }
+  }
+})

src/views/Home/personal/components/jobTypeCard.vue

@@ -372,6 +372,7 @@ const handleMouseLeave = () => { // 鼠标移出
   card2Data.show = false
   // card2Data.show = true
 }
+
 </script>
 
 <style lang="scss" scoped>

src/views/Home/personal/components/search.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="search d-flex align-center">
     <div style="position: relative;">
-      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="drawer = !drawer">
+      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
         <span>职位类型</span>
         <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
       </div>
-      <!-- <jobTypeCard v-if="drawer" style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"></jobTypeCard> -->
-      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search></jobTypeCard>
+      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search @click.stop=""></jobTypeCard>
     </div>
     <v-text-field
       v-model="value"
@@ -23,15 +22,25 @@
 </template>
 
 <script setup>
+import { useSharedState } from '@/store/sharedState'
 import jobTypeCard from './jobTypeCard.vue'
 
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 defineOptions({ name:'personal-search'})
 
 const value = ref('')
 let drawer = ref(false)
 
+// 点击外部关闭职位下拉
+const sharedState = useSharedState()
+
+// 监听 layoutClickCount 变化
+watch(() => sharedState.layoutClickCount, () => {
+  // console.log('layoutClickCount', newValue)
+  if (drawer.value) drawer.value = false
+});
+
 </script>
 
 <style lang="scss" scoped>