基于 Vue.js 和 ECharts 实现药店查找卡片

应用场景介绍

该卡片组件旨在为用户提供一种直观且用户友好的方式来查找附近的药店。用户可以通过字母或数字选项卡筛选药店，并查看每个药店的基本信息，包括地址、联系方式和营业时间。

代码基本功能介绍

• **药店搜索：**用户可以使用搜索栏搜索特定药店。
• **字母和数字选项卡：**用户可以通过选项卡按字母或数字对药店进行筛选。
• **药店列表：**药店列表显示每个药店的名称、地址、联系方式和营业时间。
• **药店详情：**用户可以点击药店列表中的任何药店以查看其详细信息，包括地图位置。

功能实现步骤及关键代码分析说明

1. 初始化数据和组件

import { ref } from "vue";
const data = ref([
  {
    name: "Pharmacy 01",
    address: "123 Main Street",
    ...
  },
  ...
]);

使用 ref 钩子初始化药店数据。

2. 创建药店列表

<div class="grid grid-cols-3 gap-4">
  <van-card
    v-for="pharmacy in data"
    :key="pharmacy.name"
    :thumb="`https://source.unsplash.com/random/100x100`"
  >
    ...
  </van-card>
</div>

使用 v-for 指令遍历药店数据并创建药店列表。

3. 添加药店详细信息

<van-card
  :thumb="`https://source.unsplash.com/random/100x100`"
>
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <van-icon name="location-o" class="text-blue-500 text-2xl mr-2" />
      <h3 class="text-gray-700 text-base font-semibold">
        {{ pharmacy.name }}
      </h3>
    </div>
    <van-icon name="arrow-right" class="text-gray-500 text-2xl" />
  </div>
  <div class="mt-2">
    <p class="text-gray-500 text-sm">
      {{ pharmacy.address }}
    </p>
  </div>
</van-card>

在药店卡中，添加了药店名称、地址、联系方式和营业时间等详细信息。

4. 实现字母和数字筛选

<van-tabs>
  <van-tab>A-Z</van-tab>
  <van-tab>0-9</van-tab>
</van-tabs>

使用 van-tabs 组件创建字母和数字选项卡。

import { computed } from "vue";
const filteredData = computed(() => {
  if (activeTab === "A-Z") {
    return data.value.sort((a, b) => a.name.localeCompare(b.name));
  } else {
    return data.value.sort((a, b) => parseInt(a.name.split(" ")[1]) - parseInt(b.name.split(" ")[1]));
  }
});

使用 computed 钩子根据当前选定的选项卡对药店数据进行筛选。

总结与展望

通过结合 Vue.js 和 ECharts，我们成功地开发了一个功能强大且用户友好的药店查找卡片。该卡片提供了一种直观的方式来查找附近的药店，并提供了有关每个药店的重要信息。

未来，该卡片可以进一步扩展和优化，例如：

• 添加地图集成，允许用户查看药店的位置。
• 实时更新药店数据，以反映营业时间和库存的变化。
• 根据用户的地理位置和偏好提供个性化推荐。