vue-ptc/src/pages/repair/steps/StepOne.vue

<template>
  <h3 class="ptc-title">Choose a store</h3>
  <div class="ptc-block">
    <div class="ptc-inner-md pr">
      <form class="search-wrap" action="">
        <input
          v-model="code"
          type="search"
          class="search-input ptc-input"
          placeholder="Search by zip code"
          @input="autocomplete"
          @keydown="$event.keyCode === 13 && handleSearch()"
        />
        <div
          role="button"
          class="search-btn ptc-button"
          @click="handleSearch"
        ></div>
      </form>
      <div v-if="suggestions.length" class="search-suggestions">
        <div
          v-for="(item, index) of suggestions"
          :key="index"
          class="suggestion"
          @click="selectShop(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="shop-wrap">
        <div v-show="!postCode" class="tip">Nearby shops</div>
        <InfiniteList
          class="shop-list-wrap"
          :loading="loading"
          :has-more="hasMore"
          scroll-target=".shop-list-wrap"
          @loadmore="fetchData"
        >
          <ul class="shop-list">
            <li
              v-for="(item, index) of list"
              :key="index"
              class="shop-item border-bottom"
              @click="selectShop(item)"
            >
              <div class="shop-name">
                <span>{{ item.name }}</span>
                <!-- <span class="distance">3.5KM</span> -->
              </div>
              <div class="shop-address">
                {{ item.centre_name }},{{ item.address }}
              </div>
              <div class="shop-mark" :class="{ danger: !item.can_appointment }">
                <i class="icon"></i
                >{{
                  item.can_appointment
                    ? item.can_appointment_day
                    : 'No appointments available for the next 7 days'
                }}
              </div>
            </li>
          </ul>
        </InfiniteList>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { state } from '../store'
import { getShopList } from '@/service/repair'
import getLocation from '@/utils/getLocation'
import InfiniteList from '@/components/infinite-list/index.vue'
import { debounce } from 'lodash-es'

const loading = ref(false)
const hasMore = ref(true)
const list = ref<any[]>()
const suggestions = ref<any[]>([])
const code = ref('')
const postCode = ref('')

let pageNo = 1
let coords: GeolocationCoordinates | undefined

async function fetchData() {
  loading.value = true
  try {
    if (!list.value) {
      list.value = []
      const res = await getLocation({ timeout: 2000 })
      coords = res?.coords
    }
    let { results } = await getShopList({
      page: pageNo,
      size: 10,
      lat: coords?.latitude,
      lng: coords?.longitude,
      post_code: postCode.value,
    })
    results = results.results || results
    list.value.push(...results.items)
    pageNo++
    hasMore.value = list.value.length < results.pageBean.totalCount
  } catch {}
  loading.value = false
}

const autocomplete = debounce(async () => {
  const value = code.value.trim()
  if (!value) {
    suggestions.value = []
    return
  }
  const { results } = await getShopList({
    page: 1,
    size: 10,
    post_code: value,
  })
  suggestions.value = results.results?.items || results.items
}, 300)

function handleSearch() {
  const value = code.value.trim()
  if (value === postCode.value) return
  postCode.value = value
  pageNo = 1
  list.value = []
  suggestions.value = []
  fetchData()
}

function selectShop(shop: any) {
  state.shop = { ...shop }
  state.step++
}
</script>