用vue写一个外卖的点单的页面
时间: 2023-12-04 22:02:51 浏览: 38
好的,以下是一个简单的外卖点单页面的 Vue 代码示例:
```html
<template>
<div>
<h2>外卖点单</h2>
<div v-for="item in items" :key="item.id">
<h3>{{ item.name }}</h3>
<p>{{ item.description }}</p>
<p>价格:{{ item.price }}元</p>
<button @click="addToCart(item)">加入购物车</button>
</div>
<h2>购物车</h2>
<div v-if="cartItems.length === 0">
<p>购物车是空的</p>
</div>
<ul v-else>
<li v-for="item in cartItems" :key="item.id">
{{ item.name }} x{{ item.quantity }} = {{ item.price * item.quantity }}元
<button @click="removeFromCart(item)">移除</button>
</li>
</ul>
<p>总价:{{ totalPrice }}元</p>
<button @click="checkout">结算</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
name: '红烧牛肉面',
description: '牛肉面配上浓郁的红烧汤底',
price: 18
},
{
id: 2,
name: '香辣小龙虾',
description: '麻辣鲜香,口感鲜美',
price: 58
}
],
cartItems: [],
totalPrice: 0
};
},
methods: {
addToCart(item) {
const existingItem = this.cartItems.find(cartItem => cartItem.id === item.id);
if (existingItem) {
existingItem.quantity++;
} else {
this.cartItems.push({
...item,
quantity: 1
});
}
this.totalPrice += item.price;
},
removeFromCart(item) {
const index = this.cartItems.indexOf(item);
if (index !== -1) {
const cartItem = this.cartItems[index];
this.totalPrice -= cartItem.price * cartItem.quantity;
this.cartItems.splice(index, 1);
}
},
checkout() {
alert(`您需要支付${this.totalPrice}元`);
}
}
};
</script>
```
这个代码示例包括了外卖点单的基本功能,包括商品列表、加入购物车、移除购物车、计算总价和结算等。你可以根据自己的需要进行修改和扩展。