1

李凌

2025-10-09 c17311ba1351cd5e64654c3fc7b2fe765b1e7382

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div class="lang">
    <fx-header>
      <template #title>
        {{ $t('setLanguage') }}
      </template>
    </fx-header>
    <div v-for="(item, index) in lang" :key="index" class="lang-padding" @click="handleSetLang(item.key)">
      <div class="lang-title flex items-center font-13 textColor">
        <img class="h-6 mr-3" :src="item.image" alt="">
        {{ item.title }}
      </div>
      <div class="lang-flex"></div>
      <img v-if="item.key == locale" src="../../assets/image/public/checked.png" style="width: 20px;height: 20px;" />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { SET_LANGUAGE } from '@/store/types.store'
import { useLanguageStore } from '@/store/language.store'
import { lang } from '@/config/index'
const { locale, t } = useI18n()
 
const languageStore = useLanguageStore()
 
// let lang = lang
 
onMounted(() => {
  console.log(locale.value)
})
const handleSetLang = (lang) => {
  locale.value = lang
  languageStore[SET_LANGUAGE](lang)
}
 
</script>
<style lang="scss" scoped>
.lang {
  width: 100%;
  box-sizing: border-box;
}
 
.CommonProblem-padding {
  padding-left: 25px;
  padding-right: 25px;
}
 
.lang-padding {
  padding: 15px 18px 22px 18px;
  box-sizing: border-box;
  // border-bottom: 1px solid $border_color;
  font-weight: 400;
  font-size: 18px;
  color: $text_color;
  display: flex;
}
 
.lang-flex {
  flex: 1;
}
</style>