wishlist.js
wishlist.js
import React, { Component } from 'react';
import './Wishlist.scss';
import WishlistItem from './WishlistItem';
import product1 from './product1.JPG';
class Wishlist extends Component {
state = {
wishlistItems: [],
seletedWishlistItems: {},
};
handleDelete = () => {
this.setState({
wishlistItems: this.state.wishlistItems.filter(
item => !this.state.seletedWishlistItems[item.id]
),
});
const selectedwishlistItems = Object.entries(
this.state.seletedWishlistItems
).reduce((acc, { key, value }) => {
if (value) {
return acc;
}
return {
...acc,
[key]: value,
};
}, {});handleClickCheck = id => {
this.setState({
seletedWishlistItems: {
...this.state.seletedWishlistItems,
[id]: !this.state.seletedWishlistItems[id],
},
});
};
componentDidMount() {
fetch(' http://10.58.4.112:8000/order/wishlist' )
.then(res => res.json())
.then(res => {
console.log(“patch”,res.result);
this.setState({
wishlistItems: res.result,
});
});
}
render() {
console.log(「アップコンポーネントレンダリング」,this.state);
console.log(this.state.wishlistItems[1]?.point);
return (
<div className="wishlistComponent">
<div className="orderWrap">
<div className="orderTitle">
<h2>푸핫 반가워요, 찜💘리스트</h2>
<p>
적립금 : 무려{' '}
<strong>{this.state.wishlistItems[1]?.point}</strong>원
</p>
{/* <ol>
<li className="pageOn">
<span>01</span>
장바구니
<span>
▶
<img src="" />
</span>
</li>
<li>
<span>02</span>
주문서작성/결제
<span>
▶
<img src="" />
</span>
</li>
<li className="pageOn">
<span>03</span>
주문완료
<span>
<img src="" />
</span>
</li>
</ol> */}
</div>
<div className="cartContent">
<form id="formCart" method="POST">
<div className="cartContentList">
<div className="orderTable">
<colgroup>
<col style={{ width: '3%' }}></col>
<col style={{ width: '60%' }}></col>
<col style={{ width: '20%' }}></col>
<col style={{ width: '17%' }}></col>
{/* <col style={{ width: '13%' }}></col> */}
{/* <col style={{ width: '20%' }}></col> */}
</colgroup>
<thead>
<tr>
<th>
<div className="formElement">
<input type="checkbox" />
<label></label>
</div>
</th>
<th>상품명/옵션</th>
<th>상품금액/수량</th>
<th>합계</th>
{/* <th class="dn">할인/적립</th>
<th class="dn">합계금액</th> */}
</tr>
</thead>
<tbody>
{this.state.wishlistItems ? (
this.state.wishlistItems.map(wishlistItem => {
return (
<WishlistItem
WishlistItems={this.state.WishlistItems}
// rowspan={
// index === 0
// ? this.state.wishlistItems.length
// : null
// }
point={wishlistItem.point}
count={wishlistItem.quantity}
price={wishlistItem.price}
name={wishlistItem.product}
thumnail={wishlistItem.product_thumnail}
// id={wishlistItem.id}
onClickCheck={this.handleClickCheck}
/>
);
})
) : (
<p>장바구니가 비었습니다. 텅~</p>
)}
</tbody>
</div>
</div>
</form>
{/* <div className="btnContinue">
<a>
<em> < 쇼핑 계속하기</em>
</a>
</div> */}
{/* <div className="priceSum">
<div className="priceSumContent">
<dl className="dl1">
<dt>
총<strong>100 </strong>개의 상품금액
</dt>
<dd>
<strong>34,900</strong>원
</dd>
</dl>
<span>
➕
<img />
</span>
<dl className="dl2">
<dt> 배송비</dt>
<dd>
<strong>0</strong>원
</dd>
</dl>
<span>
🔀
<img />
</span>
<dl className="dl3">
<dt>합계</dt>
<dd>
<strong className="dl3Amount">34,900</strong>원
</dd>
</dl>
</div>
</div>
*/}
<div className="btnOrderBox">
<div className="btnLeftOrder">
<button onClick={this.handleDelete}>선택상품 삭제</button>
<button>선택상품 장바구니</button>
</div>
</div>
{/* <div className="checkPoint">
<em>
❕ 주문서 작성단계에서 할인/적립금 적용을 하실 수 있습니다.
</em>
</div> */}
</div>
</div>
</div>
);}
export default Wishlist;
wishlistItem
import React, { Component } from 'react';
import product1 from './product1.JPG';
class WishlistItem extends Component {
render() {
console.log(“moyamoya”,this.props.price);
return (
<tr>
<td className="tdCheck">
<div className="formElement">
<input
type="checkbox"
onChange={() => this.props.onClickCheck(this.props.id)}
/>
<label></label>
</div>
</td>
<td className="tdLeft">
<div className="pickContent">
<span className="pickImage">
<a>
<img src={product1} />
</a>
</span>
<div className="pickInformation">
{/* <div className="pickBtnCoupon">
<a>
<img />
</a>
</div> */}
<a>{this.props.name} </a>
</div>
</div>
</td>
<td className="tdOrderAmount">
<div className="orderNumber">
<strong>
{this.props.price}원 /{this.props.count}개
</strong>
<div className="orderNumberChange">
<a>
<span>옵션/수량변경</span>
</a>
</div>
</div>
</td>
<td className="btnOrderBox">
<button className="btnRightOrder">장바구니</button>
<button className="btnLeftOrder">삭제하기</button>
</td>
</tr>
);}
export default WishlistItem;
3. wish.scss
.wishlistComponent {
.orderWrap {
width: 700px;
margin: 0 auto;
padding: 40px 0 50px 0;
.orderTitle {
//border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
padding-bottom: 20px;
h2 {
display: block;
font-size: 28px;
font-weight: bold;
}
p {
margin-top: 10px;
color: orangered;
font-weight: bold;
}
ol {
display: flex;
.pageOn {
color: #d1d1d1;
}
li {
font-size: 14px;
font-weight: bold;
// color: #d1d1d1;
span {
padding: 0 7px;
img {
}
}
}
}
}
.cartContent {
form {
.cartContentList {
// margin: 50px 0 10px 0;
font-size: 12px;
font-weight: bold;
.orderTable {
text-align: center;
colgroup {
}
thead {
// padding: 10px 0;
border-collapse: collapse;
text-align: center;
tr {
th {
padding: 10px 0;
background: #f7f7f7;
border-bottom: 1px solid #dbdbdb;
border-top: 1px solid #999999;
.formElement {
input {
}
label {
}
}
}
}
}
tbody {
tr {
td {
height: 100px;
vertical-align: middle;
border-bottom: 1px solid #dbdbdb;
color: #777777;
}
.tdCheck {
text-align: middle;
div {
input {
}
label {
}
}
}
.tdLeft {
.pickContent {
display: flex;
align-items: center;
.pickImage {
margin-right: 5px;
a {
img {
}
}
}
.pickInformation {
// .pickBtnCoupon {
// a {
// img {
// }
// }
// }
a {
}
}
}
}
.tdOrderAmount {
.orderNumber {
strong {
display: block;
color: #333333;
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
}
.orderNumberChange {
a {
font-size: 11px;
display: block;
padding: 5px;
border: 1px solid #dbdbdb;
vertical-align: middle;
color: #333;
span {
}
}
}
}
}
.btnOrderBox {
// padding-top: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// display: block;
// width: 100%;
// margin: 0 auto;
// padding: 30px;
.btnLeftOrder {
display: block;
font-size: 12px;
width: 68px;
border: 1px solid #a3a3a3;
padding: 3px;
color: #626262;
background: white;
}
.btnRightOrder {
display: block;
font-size: 14px;
width: 68px;
padding: 3px;
color: white;
font-size: 12px;
background: black;
border: 1px solid #000;
cursor: pointer;
margin-bottom: 5px;
}
}
.tdDelivery {
border-left: 1px solid #ebebeb;
br {
}
}
}
}
}
}
}
.btnContinue {
height: 20px;
font-size: 12px;
text-align: left;
a {
border-bottom: 1px solid #333333;
display: inline-block;
em {
}
}
}
.priceSum {
border: 2px solid #d6d6d6;
padding: 30px 40px;
margin-top: 30px;
font-size: 16px;
.priceSumContent {
display: flex;
justify-content: flex-end;
align-items: center;
dl {
font-size: 16px;
text-align: right;
dt {
font-size: 16px;
display: inline-block;
margin-bottom: 5px;
strong {
font-weight: bold;
}
}
dd {
strong {
font-weight: bold;
}
.dl3Amount {
color: #29c1bc !important;
font-size: 18px;
}
}
}
span {
display: inline-block;
padding: 0 20px;
img {
}
}
.priceTotal {
}
}
}
.btnOrderBox {
// padding-top: 30px;
display: flex;
justify-content: space-between;
.btnLeftOrder {
font-size: 12px;
button {
font-size: 12px;
width: 120px;
border: 1px solid #a3a3a3;
line-height: 28px;
height: 30px;
color: #626262;
background: white;
margin-right: 10px;
}
}
.btnRightOrder {
font-size: 14px;
button {
width: 190px;
height: 55px;
padding: 0 20px;
color: white;
font-size: 14px;
background: black;
border: 1px solid #000;
cursor: pointer;
font-weight: bold;
margin-left: 10px;
}
}
}
em {
font-size: 12px;
margin-top: 10px;
float: right;
}
}}
Reference
この問題について(wishlist.js), 我々は、より多くの情報をここで見つけました https://velog.io/@hook/wishlist.jsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol