prodio/web/layouts/default.vue

<script setup>
const router = useRouter()
import logoImg from '@/assets/img/logo.png';
import dotCircleImg from '@/assets/img/dotCircle.png';
import useStore from '@/store';

const localePath = useLocalePath()

const { locale } = useI18n()

const searchKeyword = ref('');

const navbarToggler = ref(null);

const store = useStore();

const { config } = storeToRefs(store);

// const cateData = computed(() => {
//     return cateRes.value.data
// });

const { data: cateRes } = await useMyFetch('/index/getCateList', "GET")

const goRoute = (path) => {
  const styles = window.getComputedStyle(navbarToggler.value);
  if (styles.display !== 'none') {
    // 收起選單
    navbarToggler.value.click();    
  }
  router.push(path);
}

const handleSearchSubmit = () => {
  if(!searchKeyword.value) return;
  router.push(localePath('/products/search/' + searchKeyword.value));
  searchKeyword.value = '';
}

watch(locale, (nVal,oVal) => {
  if(nVal !== oVal) {
    router.push(localePath('/'));
  }
})
</script>

<template>
  <header class="header">
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand" href="javascript:;">
          <div class="logo" @click="router.push(localeLocation('/'))">
            <!-- <img :src="logoImg" alt="prodio"> -->
            WEISEN
          </div>
        </a>
        <button ref="navbarToggler" class="navbar-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa-solid fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <div class="nav-link" @click="goRoute(localeLocation('/about/company'))">{{ $t('aboutus') }}</div>
            </li>
            <li class="nav-item">
              <div class="nav-link" data-toggle="dropdown" data-submenu>{{ $t('products') }}</div>
              <div class="dropdown-menu">
                <template v-for="(item, index) in cateRes.data" :key="index">
                  <div class="dropdown dropright dropdown-submenu" v-if="item.children.length > 0">
                    <button class="dropdown-item dropdown-toggle" type="button">{{ item.name }}</button>
                    <div class="dropdown-menu">
                      <div class="dropdown-item" v-for="(clip, i) in item.children" :key="i"
                        @click="goRoute(localeLocation('/products/list/' + clip.id))">{{ clip.name }}
                    </div>
                    </div>
                  </div>
                  <a class="dropdown-item" href="javascript:;" v-else>{{ item.name }}</a>
                </template>
              </div>
            </li>
            <li class="nav-item">
              <div class="nav-link" @click="goRoute(localeLocation('/social/news'))">{{ $t('news') }}</div>
            </li>
            <li class="nav-item">
              <div class="nav-link">{{ $t('contact') }}</div>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="javascript:;" @click="goRoute(localeLocation('/contact/form'))">{{
                  $t('Contact.form') }}</a></li>
                <li><a class="dropdown-item" href="javascript:;"
                    @click="goRoute(localeLocation('/contact/company'))">{{ $t('Contact.branch') }}</a></li>
              </ul>
            </li>
          </ul>
          <!-- <div class="landBtnGroup btn-group">
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'tw' }" :to="switchLocalePath('tw')">繁</NuxtLink>
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'cn' }" :to="switchLocalePath('cn')">简</NuxtLink>
            <NuxtLink class="btn chBtn" :class="{ active: locale === 'en' }" :to="switchLocalePath('en')">EN</NuxtLink>
          </div> -->
          <form class="searchBar" @submit="handleSearchSubmit">
						<input class="form-control form-control-sm bg-silver border-0" type="search" 
            placeholder="產品搜尋" 
            v-model="searchKeyword"
            aria-label="Search"
            >
						<button class="btn" @click.prevent="handleSearchSubmit"><i class="fa-solid fa-magnifying-glass"></i></button>
					</form>
          </div>
      </div>
    </nav>
  </header>
  <slot></slot>
  <footer class="footer">
    <div class="container">
      <div class="dotCircle left"><img :src="dotCircleImg" alt=""></div>
      <div class="dotCircle right"><img :src="dotCircleImg" alt=""></div>
      <div class="row gx-lg-5 justify-content-between mb-5">
        <div class="col-12 col-lg-auto">
          <a class="logoGroup" href="javascript:;" @click="router.push(localeLocation('/'))">
            <div class="logo">
              <!-- <img :src="logoImg" alt=""> -->
              WEISEN
            </div>
          </a>
          <!-- <div class="share_link">
              <a href="#"><div class="item fb"><i class="fa-brands fa-facebook-f"></i></div></a>
              <a href="#"><div class="item line"><i class="fa-brands fa-line"></i></div></a>
              <a href="#"><div class="item ins"><i class="fa-brands fa-instagram"></i></div></a>
            </div>					 -->
        </div>
        <div class="col-12 col-lg-auto">
          <div class="row gx-lg-5">
            <div class="col-12 col-lg-auto">
              <div class="fTitle">Service</div>
              <div class="site_link">
                <a href="javascript:;" @click="router.push(localeLocation('/about/company'))">{{ $t('aboutus') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/products'))">{{ $t('products') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/social/news'))">{{ $t('news') }}</a>
                <a href="javascript:;" @click="router.push(localeLocation('/contact/form'))">{{ $t('contact') }}</a>
              </div>
            </div>
            <div class="col-12 col-lg">
              <div class="fTitle">Company</div>
              <div class="info_link">
                <a href="javascript:void(0);">
                  <i class="fa-solid fa-map-location-dot"></i>
                  <div class="text">{{ config[locale].address }}</div>
                </a>
                <a :href="'mailto: ' + config[locale].email" v-if="config[locale].email">
                  <i class="fa-solid fa-envelope"></i>
                  <div class="text">{{ config[locale].email }}</div>
                </a>
                <div class="d-flex">
                  <a :href="'tel: ' + config[locale].tel" class="me-4" v-if="config[locale].tel">
                    <i class="fa-solid fa-phone"></i>
                    <div class="text">{{ config[locale].tel }}</div>
                  </a>
                  <a :href="'fax:' + config[locale].fax" v-if="config[locale].fax">
                    <i class="fa-solid fa-fax"></i>
                    <div class="text">{{ config[locale].fax }}</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-auto p-0">
          <div class="topBtn" @click="toTopClick">
            <i class="fa-solid fa-angles-up"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="copyright">{{ config[locale].copyright }}</div>
  </footer>
</template>