Comment utiliser Vue pour implémenter une page de commande de restauration de type Meituan ?

Vue.js est un framework JavaScript populaire couramment utilisé pour créer des applications d'une seule page. Meituan est une plateforme de commande de restauration bien connue. La conception de ses pages est simple et pratique et l'expérience utilisateur est bonne. Cet article explique comment utiliser Vue pour implémenter une page de commande de restauration de type Meituan.

1. Créer un projet Vue

Tout d'abord, vous devez installer l'outil d'échafaudage de Vue, Vue CLI. Vous pouvez utiliser la commande suivante pour installer :

npm install -g @vue/cli

Après l'installation, vous pouvez utiliser la commande suivante pour créer un nouveau projet Vue :

vue create vue-meituan

Après avoir créé le projet, entrez dans le répertoire du projet et démarrez le serveur de développement :

cd vue-meituan
npm run serve

Ouvrir http dans le navigateur ://localhost:8080, vous pouvez voir la page d'accueil par défaut de Vue.

2. Concevoir la mise en page

Avant de mettre en œuvre une page de commande de restauration de type Meituan, vous devez d'abord concevoir la mise en page et le style de la page. Vous pouvez esquisser la page à l'aide d'outils tels que Photoshop ou Sketch pour déterminer des informations telles que la position et l'apparence de chaque composant sur la page.

Pour simplifier le processus ici, nous utilisons directement la page déjà conçue, qui comprend une barre de navigation supérieure, une liste de produits et une barre de menu inférieure. La structure principale de la page est la suivante :

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

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

3. Implémentez le composant de la barre de navigation

Le composant de la barre de navigation se compose d'un logo, d'un champ de recherche et d'un menu de navigation. Ce composant peut être implémenté à l'aide du composant Vue :

<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>

L'attribut data est utilisé ici pour stocker les données et les informations d'état du menu de navigation, et les éléments de menu sont générés dynamiquement via la directive v-for et la valeur-clé spécifiée. paire. Dans la méthode onMenuClick, l'état d'activation de l'élément de menu sera défini en fonction de l'événement click.

4. Implémentez le composant liste de produits

Le composant liste de produits comprend des images de produits, des noms, des descriptions, des prix, des paniers d'achat et d'autres informations. Ce composant peut être implémenté à l'aide du composant Vue :

<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>

L'attribut data est utilisé ici pour stocker les données et les informations d'état de la liste de produits, et les éléments de la liste de produits sont générés dynamiquement via la directive v-for et la clé spécifiée. paire de valeurs. Dans la méthode onCartClick, la quantité du produit sera augmentée en fonction de l'événement click, et l'affichage et le masquage de la quantité seront contrôlés via l'instruction v-show.

5. Implémentez le composant de la barre de menu inférieure

Le composant de la barre de menu inférieure comprend des fonctions telles que le panier, le paiement et la soumission. Ce composant peut être implémenté à l'aide du composant Vue :

<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>

L'attribut calculé est utilisé ici pour calculer le nombre d'articles et le montant total, et l'instruction v-show est utilisée pour contrôler l'affichage et le masquage des boutons de règlement et de soumission .

6. Résumé

Grâce aux étapes ci-dessus, Vue a été utilisé avec succès pour implémenter une page de commande de restauration de type Meituan. Tout au long du processus, vous devez utiliser des technologies et des outils appropriés pour concevoir la mise en page, dessiner des composants, écrire du code, déboguer et optimiser la page afin d'obtenir une page belle, pratique et efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!