繁体中文改成繁體中文

dengchaochao

2024-05-09 8b77b71e449f578c4154d5b62365a0dbbf123418

 src/page/language/index.vue

@@ -1,64 +1,111 @@
<template>
  <div class="lang">
    <assets-head :title="$t('语言设置')" />
    <div v-for="(item, index) in lang" :key="index" class="lang-padding" @click="handleSetLang(item.key)">
    <div
      v-for="(item, index) in lang"
      :key="index"
      class="lang-padding"
      @click="handleSetLang(item.key)"
    >
      <div class="lang-title flex items-center font-26 textColor">
        <img class="w-75 h-50 mr-24" :src="item.image" alt="">
        <img class="w-75 h-50 mr-24" :src="item.image" alt="" />
        {{ item.title }}
      </div>
      <div class="lang-flex"></div>
      <img v-if="item.key == $i18n.locale" src="../../assets/image/public/checked.png"
        style="width: 20px;height: 20px;" />
      <img
        v-if="item.key == $i18n.locale"
        src="../../assets/image/public/checked.png"
        style="width: 20px; height: 20px"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import assetsHead from "@/components/assets-head";
import { setStorage } from '@/utils/utis'
import { setStorage } from "@/utils/utis";
export default {
  data() {
    return {
      lang: [
        { title: '繁体中文', key: 'CN', image: require('../../assets/image/lang/hongkong.png') },
        { title: '简体中文', key: 'zh-CN', image: require('../../assets/image/lang/zh-CN.png') },
        { title: 'English', key: 'en', image: require('../../assets/image/lang/en-US.png') },//英语
        { title: '한국인', key: 'Korean', image: require('../../assets/image/lang/Korean.png') },//韩语
        { title: 'Deutsch', key: 'de', image: require('../../assets/image/lang/de.png') }, //德语
        { title: 'Français', key: 'fr', image: require('../../assets/image/lang/French.png') }, //法语
        { title: 'やまと', key: 'Japanese', image: require('../../assets/image/lang/Japanese.png') }, //日语
        { title: 'ไทย', key: 'th', image: require('../../assets/image/lang/Thai.png') }, //泰语
        {
          title: "繁體中文",
          key: "CN",
          image: require("../../assets/image/lang/hongkong.jpg"),
        },
        {
          title: "简体中文",
          key: "zh-CN",
          image: require("../../assets/image/lang/zh-CN.png"),
        },
        {
          title: "English",
          key: "en",
          image: require("../../assets/image/lang/en-US.png"),
        }, //英语
        {
          title: "한국인",
          key: "Korean",
          image: require("../../assets/image/lang/Korean.png"),
        }, //韩语
        {
          title: "Deutsch",
          key: "de",
          image: require("../../assets/image/lang/de.png"),
        }, //德语
        {
          title: "Français",
          key: "fr",
          image: require("../../assets/image/lang/French.png"),
        }, //法语
        {
          title: "やまと",
          key: "Japanese",
          image: require("../../assets/image/lang/Japanese.png"),
        }, //日语
        {
          title: "ไทย",
          key: "th",
          image: require("../../assets/image/lang/Thai.png"),
        }, //泰语
        // { title: 'español', key: 'es', image: require('../../assets/image/lang/Spanish.png') }, //西班牙
        // { title: 'عرب', key: 'ar', image: require('../../assets/image/lang/alb.png') }, //阿拉伯语
        { title: 'Tiếng Việt', key: 'vi', image: require('../../assets/image/lang/vi.png') },//越南语
        { title: 'Italiano', key: 'Italy', image: require('../../assets/image/lang/Italy.png') }, //意大利语

      ]
    }
        {
          title: "Tiếng Việt",
          key: "vi",
          image: require("../../assets/image/lang/vi.png"),
        }, //越南语
        {
          title: "Italiano",
          key: "Italy",
          image: require("../../assets/image/lang/Italy.png"),
        }, //意大利语
      ],
    };
  },
  components: {
    assetsHead,
  },
  computed: {
    ...mapGetters({
      activeLang: 'language'
    })
      activeLang: "language",
    }),
  },
  methods: {
    ...mapMutations('language', ['setLanguage']),
    ...mapMutations("language", ["setLanguage"]),
    handleSetLang(lang) {
      // 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
      this.$i18n.locale = lang
      this.$i18n.locale = lang;
      // 提交mutations
      this.setLanguage(lang)
      setStorage('popNotice', false)
      this.setLanguage(lang);
      setStorage("popNotice", false);
    },
    onClickLeft() {
      this.$router.push('/')
      console.log(this.$i18n.locale)
      this.$router.push("/");
      console.log(this.$i18n.locale);
    },
  }
}
  },
};
</script>
<style lang="scss" scoped>
.lang {