用vue写一个小程序商城
时间: 2023-10-21 09:03:33 浏览: 32
这是一个比较大的项目,需要前端、后端、数据库等多方面的知识,这里只能给您提供一个简单的示例,供您参考:
在这个小程序商城中,我们实现了以下功能:
- 展示商品列表
- 展示商品详情
- 加入购物车
- 购物车列表展示
- 结算
下面是示例代码:
```html
<!-- 商品列表 -->
<template>
<div>
<h1>商品列表</h1>
<ul>
<li v-for="item in items" :key="item.id">
<h2>{{ item.name }}</h2>
<p>{{ item.desc }}</p>
<p>价格:{{ item.price }}</p>
<button @click="addToCart(item)">加入购物车</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '商品1', desc: '这是商品1的描述', price: 10 },
{ id: 2, name: '商品2', desc: '这是商品2的描述', price: 20 },
{ id: 3, name: '商品3', desc: '这是商品3的描述', price: 30 },
],
};
},
methods: {
addToCart(item) {
this.$store.commit('addToCart', item);
},
},
};
</script>
<!-- 商品详情 -->
<template>
<div>
<h1>{{ item.name }}</h1>
<p>{{ item.desc }}</p>
<p>价格:{{ item.price }}</p>
<button @click="addToCart(item)">加入购物车</button>
</div>
</template>
<script>
export default {
computed: {
item() {
const itemId = this.$route.params.id;
return this.$store.getters.itemById(itemId);
},
},
methods: {
addToCart(item) {
this.$store.commit('addToCart', item);
},
},
};
</script>
<!-- 购物车 -->
<template>
<div>
<h1>购物车</h1>
<ul>
<li v-for="item in cartItems" :key="item.id">
<h2>{{ item.name }}</h2>
<p>数量:{{ item.quantity }}</p>
<p>小计:{{ item.price * item.quantity }}</p>
</li>
</ul>
<p>总计:{{ totalPrice }}</p>
<button @click="checkout">结算</button>
</div>
</template>
<script>
export default {
computed: {
cartItems() {
return this.$store.getters.cartItems;
},
totalPrice() {
return this.$store.getters.totalPrice;
},
},
methods: {
checkout() {
this.$store.commit('clearCart');
alert('结算成功!');
},
},
};
</script>
```
在这个示例中,我们使用 Vue.js 来构建小程序商城。其中,我们使用了 Vuex 来管理购物车的状态,通过 commit mutation 来添加商品、清空购物车等操作。
当然,这个示例只是一个简单的示例,实际的商城会更加复杂,需要更多的功能和细节处理。