<template>
  <div>
    <!-- 使用 van-action-bar 组件 -->
    <van-action-bar>
      <!-- van-action-bar-icon 是动作栏的图标 -->
      <van-action-bar-icon
        icon="chat-o"
        text="客服"
        @click="handleChatClick"
      />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        @click="handleCartClick"
      />
      <van-action-bar-icon
        icon="shop-o"
        text="店铺"
        @click="handleShopClick"
      />
      <van-action-bar-icon
        icon="friends-o"
        text="朋友"
        @click="handleFriendsClick"
      />
      <van-action-bar-icon
        icon="exchange"
        text="换一批"
        @click="handleExchangeClick"
      />
    </van-action-bar>
  </div>
</template>

<script>
export default {
  setup() {
    // 处理点击客服图标的回调
    const handleChatClick = () => {
      console.log('点击客服');
    };

    // 处理点击购物车图标的回调
    const handleCartClick = () => {
      console.log('点击购物车');
    };

    // 处理点击店铺图标的回调
    const handleShopClick = () => {
      console.log('点击店铺');
    };

    // 处理点击朋友图标的回调
    const handleFriendsClick = () => {
      console.log('点击朋友');
    };

    // 处理点击换一批图标的回调
    const handleExchangeClick = () => {
      console.log('点击换一批');
    };

    return {
      handleChatClick,
      handleCartClick,
      handleShopClick,
      handleFriendsClick,
      handleExchangeClick,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>