101-aiv1/src/views/BrandSearch.vue

<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "../stores/store";
// i18n
import { useI18n } from "vue-i18n";
// Axios
import axios from "axios";
// Components
import Navbar from "../components/Navbar.vue";

const { t } = useI18n();
const store = useMainStore();
let loading = ref(false);
let pageNum = ref(1); // 當前頁數(預設第一頁)
let pageAmount = ref(10); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數

let assignBrand = ref("");
let searchKeyword = ref("");
let noResults = ref(false);

// 按鈕篩選
function filterBrand(val) {
  if (val !== "全部") {
    assignBrand.value = val;
  } else {
    assignBrand.value = "";
  }
  getBrand();
  pageNum.value = 1;
}

watch(pageNum, () => {
  getBrand();
});

let data = reactive({
  list: [],
});

// 取得館外品牌
async function getBrand() {
  loading.value = true;

  let keyword = "館外";
  let url = `https://cmm.ai:9101/find_brand?language=ch&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;

  if (searchKeyword.value !== "") {
    url += `&search_name=${searchKeyword.value}`;
  }

  // 指定類別
  if (assignBrand.value !== "") {
    keyword += `,${assignBrand.value}`;
  }

  url += `&keyword=${keyword}`;

  try {
    const response = await axios.get(url);
    data.list = response.data.data;
    totalPages.value = getTotalPages(response.data.all_num, pageAmount.value); // 計算頁數
    loading.value = false;
    console.log("館外品牌", response.data.data);

    if (!response.data.data.length) {
      noResults.value = true;
    } else {
      noResults.value = false;
    }

    console.log("noResults.value", noResults.value);
  } catch (error) {
    console.error(error);
  }
}

getBrand();

// 計算頁數
function getTotalPages(totalRecords, recordsPerPage) {
  return Math.ceil(totalRecords / recordsPerPage);
}

// 截斷文字
const truncateText = (text, maxLength) => {
  text = text.replace(/\s+/g, "");
  if (text.length <= maxLength) {
    return text;
  }
  return text.substring(0, maxLength) + "...";
};

let brandList = reactive([
  {
    value: "全部",
    text: "external.all",
  },
  {
    value: "伴手禮",
    text: "external.gifts",
  },
  {
    value: "餐飲",
    text: "external.dining",
  },
  {
    value: "住宿",
    text: "external.accommodation",
  },
  {
    value: "美髮",
    text: "external.hairdressing",
  },
  {
    value: "汽車用品",
    text: "external.car_supplies",
  },
  {
    value: "休閒娛樂",
    text: "external.entertainment",
  },
  {
    value: "寵物用品",
    text: "external.pet_supplies",
  },
]);

function handleSearch() {
  console.log("Searching for:");
  searchKeyword.value;
}
</script>
<template>
  <Navbar />

  <div class="brand-list">
    <v-text-field
      v-model="searchKeyword"
      append-inner-icon="mdi-magnify"
      density="compact"
      label="搜尋品牌"
      variant="outlined"
      hide-details
      single-line
      @click:append-inner="getBrand"
      @keydown.enter="getBrand"
      class="border-sm rounded"
    ></v-text-field>

    <v-row class="mt-3 px-1">
      <v-col
        cols="6"
        v-for="(item, index) in brandList"
        :key="index"
        class="pa-2"
      >
        <button
          @click="filterBrand(item.value)"
          :class="{ active: item.value === assignBrand }"
          class="rounded brand-btn"
        >
          {{ t(item.text) }}
        </button>
      </v-col>
    </v-row>

    <div v-if="loading" class="d-flex justify-center pt-15">
      <v-progress-circular color="primary" indeterminate></v-progress-circular>
    </div>

    <v-row v-else-if="!loading && !noResults" class="content mt-0">
      <v-col
        cols="12"
        class="card"
        v-for="(item, index) in data.list"
        :key="index"
      >
        <a :href="item.info.url" target="_blank">
          <img class="card-img" :src="item.info.img" :alt="item.info.name" />
        </a>
        <h2>{{ item.info.name }}</h2>
        <p>{{ truncateText(item.info.content, 100) }}</p>
        <div class="d-flex align-center mt-3 mb-5">
          <img src="../assets/img/location-dot-solid.svg" width="15" alt="" />
          <p class="ms-2">{{ item.info.address }}</p>
        </div>
        <div class="cta">
          <a :href="item.info.url" target="_blank">
            <button>立即前往</button>
          </a>
        </div>
      </v-col>
    </v-row>

    <p v-else-if="noResults" class="text-center mt-10">
      找不到符合的資料，請重新搜尋。
    </p>

    <v-pagination
      v-if="!loading && !noResults"
      color="primary"
      v-model="pageNum"
      class="my-10"
      :length="totalPages"
    ></v-pagination>
  </div>
</template>

<style lang="scss">
.brand-list {
  width: 90%;
  margin: 30px auto;

  .brand-btn {
    width: 100%;
    padding: 0.7rem;
    color: var(--main-color);
    background-color: #f5f2eb;
    letter-spacing: 1px;
    transition: all 0.3s;

    &:hover {
      opacity: 0.8;
    }

    &.active {
      color: #fff;
      background-color: var(--main-color);
    }
  }

  .content {
    text-align: center;

    .card {
      border-bottom: 1px solid #cea84d;
      padding: 2rem 1rem;

      &:last-child {
        border-bottom: none !important;
      }
    }

    .card {
      letter-spacing: 0.05rem;

      h2 {
        margin: 0.5rem 0;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: left;
      }

      p {
        text-align: left;
      }

      .card-img {
        width: 100%;
        height: 220px;
        object-fit: contain;
      }

      .cta {
        text-align: right;

        button {
          padding: 10px 20px;
          border-radius: 100px;
          color: #fff;
          text-align: center;
          background-color: #b07843;
          letter-spacing: 0.05rem;
          text-decoration: none;
          transition: all 0.3s;
        }
      }
    }
  }

  .v-pagination {
    margin: auto;
    max-width: 300px;
  }

  .v-btn--icon.v-btn--density-default {
    width: 35px !important;
  }
}
</style>