编程技术

Document

Vue2 美食网站开发：多功能购物车与收藏系统的完整实现】 【从零开始！Vue2 打造美食管理平台，支持搜索、分类与购物车功能】 【Vue2 前端实战：美食网站开发，附完整源代码与详细教程】 【如何用

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>美食网站</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      height: 10vh;
      background-color: #FF5722;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content {
      flex: 1;
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 20px;
      padding: 20px;
      overflow-y: auto;
    }
    .menu-section {
      display: flex;
      flex-direction: column;
    }
    .toolbar {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .toolbar input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 10px;
    }
    .toolbar select {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .food-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }
    .food-card {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .food-card img {
      max-width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
    }
    .food-card h3 {
      font-size: 1.2rem;
      margin: 10px 0;
    }
    .food-card button {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #FF5722;
      color: white;
      margin-top: 10px;
    }
    .food-card button:hover {
      background-color: #E64A19;
    }
    .details-section {
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .details-section h3 {
      margin-bottom: 20px;
    }
    .details-section ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .details-section li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .cart-total {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <h1>美食网站</h1>
  </div>
  <div class="content">
    <div class="menu-section">
      <div class="toolbar">
        <input type="text" v-model="searchQuery" placeholder="搜索美食...">
        <select v-model="selectedCategory" @change="filterFoods">
          <option value="">所有分类</option>
          <option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
        </select>
      </div>
      <div class="food-list">
        <div class="food-card" v-for="food in filteredFoods" :key="food.id">
          <img :src="food.image" :alt="food.name">
          <h3>{{ food.name }}</h3>
          <p>价格：￥{{ food.price }}</p>
          <button @click="addToCart(food)">添加到购物车</button>
          <button @click="toggleFavorite(food)">❤️ {{ isFavorite(food) ? '已收藏' : '收藏' }}</button>
        </div>
      </div>
    </div>
    <div class="details-section">
      <h3>购物车</h3>
      <ul>
        <li v-for="(item, index) in cart" :key="index">
          <span>{{ item.name }} x {{ item.quantity }}</span>
          <span>￥{{ item.price * item.quantity }}</span>
          <button @click="removeFromCart(item)">移除</button>
        </li>
      </ul>
      <div class="cart-total">总价：￥{{ cartTotal }}</div>
    </div>
  </div>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    foods: [
      { id: 1, name: "烤鸡", category: "主菜", price: 50, image: "https://via.placeholder.com/200x150" },
      { id: 2, name: "披萨", category: "主菜", price: 80, image: "https://via.placeholder.com/200x150" },
      { id: 3, name: "沙拉", category: "配菜", price: 30, image: "https://via.placeholder.com/200x150" },
      { id: 4, name: "果汁", category: "饮品", price: 20, image: "https://via.placeholder.com/200x150" },
      { id: 5, name: "甜点", category: "甜品", price: 40, image: "https://via.placeholder.com/200x150" },
    ],
    searchQuery: "",
    selectedCategory: "",
    cart: [],
    favorites: [],
    categories: ["主菜", "配菜", "饮品", "甜品"],
  },
  computed: {
    filteredFoods() {
      let foods = this.foods;
      if (this.selectedCategory) {
        foods = foods.filter(food => food.category === this.selectedCategory);
      }
      if (this.searchQuery) {
        foods = foods.filter(food => food.name.includes(this.searchQuery));
      }
      return foods;
    },
    cartTotal() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
  methods: {
    addToCart(food) {
      const item = this.cart.find(item => item.id === food.id);
      if (item) {
        item.quantity++;
      } else {
        this.cart.push({ ...food, quantity: 1 });
      }
    },
    removeFromCart(food) {
      const index = this.cart.findIndex(item => item.id === food.id);
      if (index !== -1) {
        this.cart.splice(index, 1);
      }
    },
    toggleFavorite(food) {
      if (this.isFavorite(food)) {
        this.favorites = this.favorites.filter(item => item.id !== food.id);
      } else {
        this.favorites.push(food);
      }
    },
    isFavorite(food) {
      return this.favorites.some(item => item.id === food.id);
    },
  },
});
</script>
</body>
</html>