Vue全家桶—项目实战_4

1、把city.vue中的content内容封装到city-group.vue中

使用vant3中的标签

<van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(city, index) in groupData.hotCities">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>

      <template v-for="(group, index) in groupData.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, indey) in group.cities" :key="indey">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>

 

// 定义props
const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({})
  }
})

---

2、在city.vue中，因为获取两个title网速太慢可进行优化content

<template v-for="(value, key, index) in allCities">

        <city-group v-show="tabActive === key" :group-data="value" />

      </template>

---

3、热门  分组

<van-index-anchor index="热门" />

      <div class="list">

        <template v-for="(city, index) in groupData.hotCities">

          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>

        </template>

      </div>

 

// 动态的索引

const indexList = computed(() => {

  const list = props.groupData.cities.map(item => item.group)

  list.unshift("#")

  return list

})

// 监听城市的点击

const router = useRouter()

const cityStore = useCityStore()

const cityClick = (city) => {

  // 选中当前城市 store共享数据

  cityStore.currentCity = city

 

  // 返回上一级

  router.back()

}

 

在city.js中

 currentCity: {
      cityName: "广州"
    }

 

数据回显在home-search-box中回显

const cityStore = useCityStore()

const { currentCity } = storeToRefs(cityStore)