Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9e77732

Browse files
完成confirm组件
1 parent 097c5c7 commit 9e77732

File tree

4 files changed

+58
-6
lines changed

4 files changed

+58
-6
lines changed

‎src/components/cart/detail/index.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
1-
import React, { useContext } from 'react'
1+
import React, { useContext,useState } from 'react'
22
import { DeleteOutlined } from '@ant-design/icons'
33
import detailCss from './index.module.css'
44
import Backdrop from '../../ui/backdrop'
5+
import Confirm from '../../ui/confirm'
56
import Counter from '../../meals/counter'
67
import cartCtx from '../../../store/cart'
78

89
function Detail ({ meals }) {
910

1011
const ctx = useContext(cartCtx)
1112

13+
const [showConfirm, setShowConfirm] = useState(false)
14+
15+
const clearFn = () => {
16+
setShowConfirm(true)
17+
}
18+
19+
const confirm = () => {
20+
ctx.clearCart()
21+
}
22+
23+
const cancel = () => {
24+
setShowConfirm(false)
25+
26+
}
27+
1228
return (
1329
<Backdrop>
1430
<div className={detailCss.detailBox} onClick={(e) => { e.stopPropagation() }}>
15-
1631
<div className={detailCss.top}>
1732
<p className={detailCss.title}>餐品详情</p>
18-
<div className={detailCss.del} onClick={ctx.clearCart}><DeleteOutlined className={detailCss.delIcon} />清空购物车</div>
33+
<div className={detailCss.del} onClick={clearFn}><DeleteOutlined className={detailCss.delIcon} />清空购物车</div>
1934
</div>
2035
<div className={detailCss.detailItem}>
2136
{
37+
// 购物车列表
2238
meals.map(meal =>
2339
<div className={detailCss.item} key={meal.id}>
2440
<img src={meal.img} alt={meal.title} className={detailCss.img} />
@@ -34,6 +50,7 @@ function Detail ({ meals }) {
3450
}
3551
</div>
3652
</div>
53+
{showConfirm && <Confirm confirm={confirm} cancel={cancel} text='确认清空购物车吗?'></Confirm>}
3754
</Backdrop>
3855
)
3956
}

‎src/components/cart/detail/index.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
height: 60rem;
2323
}
2424
.title {
25-
color: #3223223;
25+
color: #323223;
2626
font-size: 28rem;
2727
}
2828
.del {

‎src/components/ui/confirm/index.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React from 'react'
2+
import { Button } from 'antd'
23
import confirmCss from './index.module.css'
3-
function Confirm () {
4+
import Backdrop from '../backdrop'
5+
6+
7+
function Confirm ({ confirm, cancel, text = '' }) {
48
return (
5-
<div>Confirm</div>
9+
<Backdrop onClick={(e) => { e.stopPropagation() }}>
10+
<div className={confirmCss.stage}>
11+
<div className={confirmCss.text}>{text}</div>
12+
<div className={confirmCss.btn}>
13+
<Button onClick={cancel}>取消</Button>
14+
<Button type="primary" onClick={confirm}>确定</Button>
15+
</div>
16+
</div>
17+
</Backdrop>
618
)
719
}
820

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.stage {
2+
position: absolute;
3+
right: 40rem;
4+
left: 40rem;
5+
bottom: 40%;
6+
border-radius: 20rem;
7+
background-color: #fff;
8+
}
9+
.text {
10+
font-size: 30rem;
11+
color: #322323;
12+
text-align: center;
13+
height: 120rem;
14+
line-height: 120rem;
15+
flex: 1;
16+
}
17+
.btn {
18+
display: flex;
19+
justify-content: space-between;
20+
align-items: center;
21+
/* height: 80rem; */
22+
padding: 0 60rem 40rem 60rem;
23+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /