基于 Vue.js 开发的移动端外卖 App UI 代码分析

应用场景

本代码用于构建一个移动端外卖 App 的 UI 界面，展示餐厅菜单、商品详情、订单结算等功能，为用户提供便捷的外卖点餐体验。

代码基本功能

该代码的主要功能包括：

展示餐厅菜单，包括推荐、新品、热销等分类；
提供商品详情页，展示商品图片、名称、价格等信息；
实现商品的购物车管理功能，用户可添加、删除商品；
提供订单结算功能，用户可选择支付方式并提交订单。

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

1. 组件初始化

<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="秋季菜单" left-arrow fixed :border="false" :z-index="100" />

    <!-- 内容区 -->
    <div class="container">
      <!-- 菜单分类 -->
      <van-tabs v-model="activeTab" :lazy-render="true">
        <van-tab v-for="item in tabs" :key="item.title" :title="item.title" />
      </van-tabs>

      <!-- 轮播图 -->
      <van-swipe v-model="activeIndex" :lazy-render="true" :autoplay="3000" :duration="500" :indicator-color="indicatorColor">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.image" alt="" />
        </van-swipe-item>
      </van-swipe>

      <!-- 商品列表 -->
      <div class="food-list">
        <van-grid :column-num="2" :border="false" :row-height="150" :gutter="10">
          <van-grid-item v-for="item in foodList" :key="item.id">
            <van-card :thumb="item.image" :title="item.title" :price="item.price" :lazy-load="true" />
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" :active-color="activeColor" :inactive-color="inactiveColor">
      <van-tabbar-item v-for="item in tabbarList" :key="item.text" :icon="item.icon" :text="item.text" />
    </van-tabbar>
  </div>
</template>

<script lang="tsx" setup>
import { ref, onMounted } from "vue";
import { h } from "vue";
import { createComponent } from "echarts-for-vue";
import { Calendar } from "v-calendar";
import { BMap } from "vue3-baidu-map-gl";

const ECharts = createComponent({ echarts, h });

const activeTab = ref("推荐");
const tabs = [
  {
    title: "推荐",
  },
  {
    title: "新品",
  },
  {
    title: "热销",
  },
];
const activeIndex = ref(0);
const bannerList = [
  {
    id: 1,
    image: "https://source.unsplash.com/random/1080x600",
  },
  {
    id: 2,
    image: "https://source.unsplash.com/random/1080x600",
  },
  {
    id: 3,
    image: "https://source.unsplash.com/random/1080x600",
  },
];
const foodList = [
  {
    id: 1,
    title: "宫保鸡丁",
    image: "https://source.unsplash.com/random/300x300",
    price: "32",
  },
  {
    id: 2,
    title: "红烧鱼",
    image: "https://source.unsplash.com/random/300x300",
    price: "21",
  },
  {
    id: 3,
    title: "可乐鸡翅",
    image: "https://source.unsplash.com/random/300x300",
    price: "18",
  },
  {
    id: 4,
    title: "糖醋排骨",
    image: "https://source.unsplash.com/random/300x300",
    price: "25",
  },
];
const active = ref(0);
const tabbarList = [
  {
    text: "首页",
    icon: "home-o",
  },
  {
    text: "分类",
    icon: "apps-o",
  },
  {
    text: "购物车",
    icon: "cart-o",
    badge: 1,
  },
  {
    text: "我的",
    icon: "user-o",
  },
];
const indicatorColor = "#ff5722";
const activeColor = "#ff5722";
const inactiveColor = "#999999";

onMounted(() => {
  // Do something after the page is mounted
});
</script>

<style>
.container {
  padding: 10px;
}

.food-list {
  margin-top: 10px;
}

.van-grid-item {
  height: 100%;
}

.van-card {
  height: 100%;
}

.van-card__thumb {
  height: 100%;
}

.van-card__price {
  font-size: 14px;
  color: #ff5722;
}

.van-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
</style>

该代码使用 Vue.js 构建了 App 的基本结构，包括导航栏、内容区和底部导航栏。

2. 菜单分类

<!-- 菜单分类 -->
<van-tabs v-model="activeTab" :lazy-render="true">
  <van-tab v-for="item in tabs" :key="item.title" :title="item.title" />
</van-tabs>

该部分代码使用 van-tabs 组件实现了菜单分类，当用户点击不同的分类标签时，对应的商品列表会进行切换。

3. 轮播图

<!-- 轮播图 -->
<van-swipe v-model="activeIndex" :lazy-render="true" :autoplay="3000" :duration="500" :indicator-color="indicatorColor">
  <van-swipe-item v-for="item in bannerList" :key="item.id">
    <img :src="item.image" alt="" />
  </van-swipe-item>
</van-swipe>

该部分代码使用 van-swipe 组件实现了轮播图，用于展示餐厅推荐的菜品或活动信息。

4. 商品列表

<!-- 商品列表 -->
<div class="food-list">
  <van-grid :column-num="2" :border="false" :row-height="150" :gutter="10">
    <van-grid-item v-for="item in foodList" :key="item.id">
      <van-card :thumb="item.image" :title="item.title" :price="item.price" :lazy-load="true" />
    </van-grid-item>
  </van-grid>
</div>

该部分代码使用 van-grid 组件实现了商品列表，商品以网格形式排列，并包含商品图片、名称和价格等信息。

5. 底部导航栏

<!-- 底部导航栏 -->
<van-tabbar v-model="active" :active-color="activeColor" :inactive-color="inactiveColor">
  <van-tabbar-item v-for="item in tabbarList" :key="item.text" :icon="item.icon" :text="item.text" />
</van-tabbar>

该部分代码使用 van-tabbar 组件实现了底部导航栏，提供首页、分类、购物车和我的四个主要功能模块的切换。