Skip to content

Commit c7d61ab

Browse files
UdMLianUdMLian
committed
购物车
1 parent 0ec67e1 commit c7d61ab

File tree

7 files changed

+469
-7
lines changed

7 files changed

+469
-7
lines changed

‎components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ declare module 'vue' {
1414
ElCarousel: typeof import('element-plus/es')['ElCarousel']
1515
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
1616
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
17+
ElEmpty: typeof import('element-plus/es')['ElEmpty']
1718
ElForm: typeof import('element-plus/es')['ElForm']
1819
ElFormItem: typeof import('element-plus/es')['ElFormItem']
1920
ElInput: typeof import('element-plus/es')['ElInput']

‎src/router/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Home from '@/views/Home/index.vue'
55
import Category from '@/views/Category/index.vue'
66
import SubCategory from '@/views/SubCategory/index.vue'
77
import Detail from '@/views/Detail/index.vue'
8-
8+
import CartList from '@/views/CartList/index.vue'
99
const router = createRouter({
1010
history: createWebHistory(import.meta.env.BASE_URL),
1111
routes: [
@@ -28,6 +28,10 @@ const router = createRouter({
2828
{
2929
path: 'detail/:id',
3030
component: Detail
31+
},
32+
{
33+
path: 'cartlist',
34+
component: CartList
3135
}
3236
]
3337
},

‎src/stores/cartStore.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
//封装购物车模块
22
import { defineStore } from 'pinia'
3-
import { ref } from 'vue'
3+
import { computed, ref } from 'vue'
44
export const useCartStore = defineStore('cart', () => {
55
//1,定义state
6-
const cartList = ref([])
6+
interface CartItem {
7+
skuId: number | string
8+
name: string
9+
price: number
10+
picture?: string
11+
count: number
12+
checked?: boolean
13+
}
14+
const cartList = ref<CartItem[]>([])
715
//2,定义action
816
const addCart = (goods) => {
917
const item = cartList.value.find((item) => goods.skuId === item.skuId)
@@ -13,7 +21,17 @@ export const useCartStore = defineStore('cart', () => {
1321
cartList.value.push(goods)
1422
}
1523
}
16-
return { addCart, cartList }
24+
const delCart = (skuId) => {
25+
const idx = cartList.value.findIndex((item) => { skuId === item.skuId })
26+
cartList.value.splice(idx, 1)
27+
}
28+
//计算属性
29+
//1,总的数量
30+
const allCount = computed(() => cartList.value.reduce((a, c) => a + c.count, 0))
31+
//2,总价
32+
const allPrice = computed(() => cartList.value.reduce((a, c) => a + c.count * c.price, 0))
33+
34+
return { addCart, cartList, delCart, allCount, allPrice }
1735
}, {
1836
persist: true
1937
})

‎src/views/CartList/index.vue‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<script setup>
2+
import { useCartStore } from '@/stores/cartStore';
3+
const cartStore = useCartStore()
4+
5+
const cartList = cartStore.cartList
6+
</script>
7+
8+
<template>
9+
<div class="xtx-cart-page">
10+
<div class="container m-top-20">
11+
<div class="cart">
12+
<table>
13+
<thead>
14+
<tr>
15+
<th width="120">
16+
<el-checkbox />
17+
</th>
18+
<th width="400">商品信息</th>
19+
<th width="220">单价</th>
20+
<th width="180">数量</th>
21+
<th width="180">小计</th>
22+
<th width="140">操作</th>
23+
</tr>
24+
</thead>
25+
<!-- 商品列表 -->
26+
<tbody>
27+
<tr v-for="i in cartStore.cartList" :key="i.id">
28+
<td>
29+
<el-checkbox />
30+
</td>
31+
<td>
32+
<div class="goods">
33+
<RouterLink to="/">
34+
<img :src="i.picture" alt="" />
35+
</RouterLink>
36+
<div>
37+
<p class="name ellipsis">
38+
{{ i.name }}
39+
</p>
40+
</div>
41+
</div>
42+
</td>
43+
<td class="tc">
44+
<p>¥{{ i.price }}</p>
45+
</td>
46+
<td class="tc">
47+
<el-input-number v-model="i.count" />
48+
</td>
49+
<td class="tc">
50+
<p class="f16 red">¥{{ (i.price * i.count).toFixed(2) }}</p>
51+
</td>
52+
<td class="tc">
53+
<p>
54+
<el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
55+
@confirm="delCart(i)">
56+
<template #reference>
57+
<a href="javascript:;">删除</a>
58+
</template>
59+
</el-popconfirm>
60+
</p>
61+
</td>
62+
</tr>
63+
<tr v-if="cartStore.cartList.length === 0">
64+
<td colspan="6">
65+
<div class="cart-none">
66+
<el-empty description="购物车列表为空">
67+
<el-button type="primary">随便逛逛</el-button>
68+
</el-empty>
69+
</div>
70+
</td>
71+
</tr>
72+
</tbody>
73+
</table>
74+
</div>
75+
<!-- 操作栏 -->
76+
<div class="action">
77+
<div class="batch">
78+
共 10 件商品，已选择 2 件，商品合计：
79+
<span class="red">¥ 200.00 </span>
80+
</div>
81+
<div class="total">
82+
<el-button size="large" type="primary">下单结算</el-button>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</template>
88+
89+
<style scoped lang="scss">
90+
.xtx-cart-page {
91+
margin-top: 20px;
92+
93+
.cart {
94+
background: #fff;
95+
color: #666;
96+
97+
table {
98+
border-spacing: 0;
99+
border-collapse: collapse;
100+
line-height: 24px;
101+
102+
th,
103+
td {
104+
padding: 10px;
105+
border-bottom: 1px solid #f5f5f5;
106+
107+
&:first-child {
108+
text-align: left;
109+
padding-left: 30px;
110+
color: #999;
111+
}
112+
}
113+
114+
th {
115+
font-size: 16px;
116+
font-weight: normal;
117+
line-height: 50px;
118+
}
119+
}
120+
}
121+
122+
.cart-none {
123+
text-align: center;
124+
padding: 120px 0;
125+
background: #fff;
126+
127+
p {
128+
color: #999;
129+
padding: 20px 0;
130+
}
131+
}
132+
133+
.tc {
134+
text-align: center;
135+
136+
a {
137+
color: $xtxColor;
138+
}
139+
140+
.xtx-numbox {
141+
margin: 0 auto;
142+
width: 120px;
143+
}
144+
}
145+
146+
.red {
147+
color: $priceColor;
148+
}
149+
150+
.green {
151+
color: $xtxColor;
152+
}
153+
154+
.f16 {
155+
font-size: 16px;
156+
}
157+
158+
.goods {
159+
display: flex;
160+
align-items: center;
161+
162+
img {
163+
width: 100px;
164+
height: 100px;
165+
}
166+
167+
>div {
168+
width: 280px;
169+
font-size: 16px;
170+
padding-left: 10px;
171+
172+
.attr {
173+
font-size: 14px;
174+
color: #999;
175+
}
176+
}
177+
}
178+
179+
.action {
180+
display: flex;
181+
background: #fff;
182+
margin-top: 20px;
183+
height: 80px;
184+
align-items: center;
185+
font-size: 16px;
186+
justify-content: space-between;
187+
padding: 0 30px;
188+
189+
.xtx-checkbox {
190+
color: #999;
191+
}
192+
193+
.batch {
194+
a {
195+
margin-left: 20px;
196+
}
197+
}
198+
199+
.red {
200+
font-size: 18px;
201+
margin-right: 20px;
202+
font-weight: bold;
203+
}
204+
}
205+
206+
.tit {
207+
color: #666;
208+
font-size: 16px;
209+
font-weight: normal;
210+
line-height: 50px;
211+
}
212+
}
213+
</style>

‎src/views/Detail/index.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const addCart = () => {
3636
count: count.value,
3737
skuId: skuObj.skuId,
3838
attrsText: skuObj.specsText,
39-
selected: true
39+
selected: true,
40+
price: goods.value.price
4041
})
4142
} else {
4243
ElMessage.warning('请选择规格')
@@ -123,7 +124,7 @@ const addCart = () => {
123124

124125
<!-- 按钮组件 -->
125126
<div>
126-
<el-button size="large" class="btn">
127+
<el-button @click="addCart" size="large" class="btn">
127128
加入购物车
128129
</el-button>
129130
</div>

0 commit comments

Comments
 (0)