How to use Vue to implement a Meituan-like catering ordering page?

Vue.js is a popular JavaScript framework commonly used for building single-page applications. Meituan is a well-known catering ordering platform. Its page design is simple and practical, and the user experience is good. This article will introduce how to use Vue to implement a Meituan-like catering ordering page.

1. Build a Vue project

First, you need to install Vue’s scaffolding tool Vue CLI. You can use the following command to install:

npm install -g @vue/cli

After installation, you can use the following command to create a new Vue project:

vue create vue-meituan

After creating the project, enter the project directory and start the development server:

cd vue-meituan
npm run serve

Open http://localhost:8080 in the browser, and you can see Vue’s default welcome page.

2. Design page layout

Before implementing the imitation Meituan catering ordering page, you need to design the layout and style of the page first. You can sketch the page using tools such as Photoshop or Sketch to determine information such as the position and appearance of each component on the page.

To simplify the process here, we directly use the already designed page, which includes a top navigation bar, a product list and a bottom menu bar. The main structure of the page is as follows:

<template>
  <div class="app">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <!-- ... -->
    </div>
    <!-- 商品列表 -->
    <div class="product-list">
      <!-- ... -->
    </div>
    <!-- 菜单栏 -->
    <div class="menu-bar">
      <!-- ... -->
    </div>
  </div>
</template>

<style>
  /* 样式 */
</style>

3. Implementing the navigation bar component

The navigation bar component consists of logo, search box and navigation menu. This component can be implemented using the Vue component:

<template>
  <div class="nav-bar">
    <!-- logo -->
    <div class="logo">
      <img src="logo.png" alt="美团">
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索商家、商品">
    </div>
    <!-- 导航菜单 -->
    <div class="menu">
      <ul>
        <li v-for="(item, index) in menuItems"
          :key="index"
          :class="{active: item.active}"
          @click="onMenuClick(index)">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {name: '点餐', active: true},
        {name: '评价', active: false},
        {name: '商家', active: false},
        {name: '我的', active: false},
      ],
    }
  },
  methods: {
    onMenuClick(index) {
      this.menuItems.forEach((item, i) => {
        item.active = i === index;
      });
    }
  }
};
</script>

<style>
  /* 样式 */
</style>

The data attribute is used here to store the data and status information of the navigation menu, and the menu items are dynamically generated through the v-for directive and the specified key-value pair. In the method onMenuClick, the activation state of the menu item will be set based on the click event.

4. Implement the product list component

The product list component includes product pictures, names, descriptions, prices, shopping carts and other information. This component can be implemented using the Vue component:

<template>
  <div class="product-list">
    <div v-for="(product, index) in products"
      :key="index"
      class="product-item">
      <div class="product-image">
        <img :src="product.image" :alt="product.name">
      </div>
      <div class="product-content">
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-desc">{{ product.desc }}</p>
        <div class="product-price">{{ product.price }} 元</div>
        <div class="product-action">
          <div class="cart-btn"
            :class="{active: product.count > 0}"
            @click="onCartClick(product)">
            <i class="iconfont icon-gouwuche"></i>
          </div>
          <div class="count"
            v-show="product.count > 0">
            {{ product.count }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          image: 'product-1.png',
          name: '烤鸭',
          desc: '烤鸭又称烤北京鸭，是中国传统名菜之一。',
          price: 58,
          count: 0,
        },
        // ...
      ]
    }
  },
  methods: {
    onCartClick(product) {
      product.count++;
    }
  }
};
</script>

<style>
  /* 样式 */
</style>

The data attribute is used here to store the data and status information of the product list, and the product list items are dynamically generated through the v-for directive and the specified key-value pair. In the method onCartClick, the quantity of the product will be increased according to the click event, and the display and hiding of the quantity will be controlled through the v-show instruction.

5. Implement the bottom menu bar component

The bottom menu bar component includes shopping cart, checkout and submission functions. This component can be implemented using the Vue component:

<template>
  <div class="menu-bar">
    <!-- 购物车 -->
    <div class="cart">
      <div class="cart-icon">
        <i class="iconfont icon-gouwuche"></i>
      </div>
      <div class="cart-count" v-show="totalCount > 0">
        {{ totalCount }}
      </div>
    </div>
    <!-- 总金额 -->
    <div class="total-price">
      合计 {{ totalPrice }} 元
    </div>
    <!-- 结算和提交 -->
    <div class="checkout">
      <div class="checkout-btn" v-show="totalPrice > 0">
        去结算
      </div>
      <div class="submit-btn" v-show="totalPrice > 0">
        提交订单
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    totalCount() {
      let count = 0;
      this.products.forEach(product => {
        count += product.count;
      });
      return count;
    },
    totalPrice() {
      let price = 0;
      this.products.forEach(product => {
        price += product.count * product.price;
      });
      return price;
    },
  }
};
</script>

<style>
  /* 样式 */
</style>

The computed attribute is used here to calculate the product quantity and total amount, and the v-show instruction is used to control the display and hiding of the settlement and submission buttons.

6. Summary

Through the above steps, Vue has been successfully used to implement a Meituan-like catering ordering page. Throughout the process, you need to use appropriate technologies and tools to design layout, draw components, write code, and debug and optimize the page to achieve a beautiful, practical, and efficient page.

The above is the detailed content of How to use Vue to implement a Meituan-like catering ordering page?. For more information, please follow other related articles on the PHP Chinese website!