ai-postcard/src/components/Language.vue

<script setup>
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const route = useRoute();
const router = useRouter();
const { t, locale } = useI18n();

onMounted(() => {
  let lang = route.params.lang;
  console.log("lang >>", lang);

  if (lang && lang !== "") {
    chooseLang(lang);
  }
});

function chooseLang(lang) {
  console.log("選擇語言：", lang);
  locale.value = lang; // i18n locale
  localStorage.setItem("lang", lang);
  router.push("/step1");
}

let langList = reactive([
  {
    lang: "中文",
    value: "zh-tw",
  },
  {
    lang: "English",
    value: "en-us",
  },
  {
    lang: "日本語",
    value: "ja-jp",
  },
  {
    lang: "한국어",
    value: "ko-kr",
  },
]);
</script>

<template>
  <div class="lang-content">
    <div style="position: relative">
      <section>
        <h3>歡迎來到 AI 明信片</h3>
        <p>請選擇您的語言</p>
      </section>
      <button
        v-for="(item, index) in langList"
        :key="index"
        @click="chooseLang(item.value)"
        class="main-btn"
      >
        {{ item.lang }}
      </button>
    </div>
  </div>
</template>

<style lang="scss">
.lang-content {
  width: 100%;
  height: 100vh;
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #231816;
  background-size: cover;
  background-position: center center;

  section {
    margin: 2.5rem auto;
    color: white;
  }

  h3 {
    font-size: 2rem;
    margin-bottom: 1rem;

    @media (max-width: 600px) {
      font-size: 1.6rem;
    }
  }

  p {
    font-size: 1.625rem;

    @media (max-width: 600px) {
      font-size: 1.5rem;
    }
  }

  .main-btn {
    margin: 0 auto 2.5rem;
  }
}
</style>