帮我用vue和elementui写一个卖泡面的前端页面的详细代码
时间: 2024-05-05 10:19:00 浏览: 25
好的,以下是使用 Vue 和 ElementUI 编写一个卖泡面的前端页面的详细代码:
```
<template>
<div class="paomen-container">
<el-row>
<el-col :span="12">
<h2>泡面选购</h2>
</el-col>
<el-col :span="12">
<el-input placeholder="请输入关键字搜索泡面" v-model="searchText" clearable></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="6" v-for="product in filteredProducts" :key="product.id">
<el-card :body-style="{ padding: '0px' }">
<img :src="product.imageUrl" class="product-image" />
<div style="padding: 14px;">
<span class="product-name">{{ product.name }}</span>
<div class="product-price">{{ product.price }} 元</div>
<el-button type="primary" :disabled="product.inventory === 0" @click="addProductToCart(product)">
{{ product.inventory > 0 ? "加入购物车" : "已售罄" }}
</el-button>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog title="购物车" :visible.sync="cartDialogVisible" width="30%">
<el-table :data="cartItems" style="width: 100%">
<el-table-column prop="name" label="商品名称"></el-table-column>
<el-table-column prop="price" label="单价"></el-table-column>
<el-table-column prop="quantity" label="数量"></el-table-column>
<el-table-column prop="subtotal" label="小计"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="placeOrder">下单</el-button>
<el-button @click="clearCart">清空</el-button>
<el-button @click="cartDialogVisible = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
name: "Paomen",
data() {
return {
searchText: "",
cartDialogVisible: false
};
},
computed: {
...mapState(["productList", "cartItems"]),
...mapGetters(["filteredProducts"])
},
methods: {
...mapActions(["addProductToCart", "placeOrder", "clearCart"])
}
};
</script>
<style>
.paomen-container {
padding: 24px;
}
.paomen-container h2 {
margin-bottom: 16px;
}
.product-image {
height: 150px;
}
.product-name {
font-size: 16px;
display: block;
}
.product-price {
font-size: 14px;
margin-top: 10px;
}
.dialog-footer {
display: flex;
justify-content: space-between;
}
</style>
```
注:以上代码需要同时使用 Vuex 状态管理和 ElementUI 组件库。该页面主要由一个产品列表和一个购物车弹框组成,每个产品都包含名称、价格和图像,并可以添加到购物车中,购物车弹框显示已添加到购物车中的产品列表和总价,可以下单或清空购物车。