MakeUpWeb/MyPage.html at master · gitseoyeon/MakeUpWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마이페이지</title>
    <style>


        section {
            margin: 20px;
        }


        .profile-container,
        .order-history-container {
            background-color: white;
            padding: 20px;
            margin-top: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .profile-picture {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .order-item {
            border-bottom: 1px solid #ddd;
            padding: 10px 0;
        }
    </style>
    <link rel="stylesheet" href="Style.css">
</head>

<body>

<header>
    <h1>Make Your Beauty</h1>

    <div class="button-container">
        <a href="AIPage.html" class="navigation-button">AI Recommend</a>
        <a href="Order.html" class="navigation-button">Order</a>
        <a href="shareThings.html" class="navigation-button">Community</a>
        <a href="mypage.html" class="navigation-button">MyPage</a>
    </div>
</header>

<section class="profile-container">
    <h2><img src="images/someone.png" width="25">프로필 정보</h2>
    <div class="profile-picture">
        <img src="images/profile.png">
    </div>
    <div>
        <p><strong>사용자 이름:</strong> 민서연</p>
        <p><strong>연락처 정보:</strong> tjdus1111@naver.com</p>
    </div>
</section>

<section class="order-history-container">
    <h2><img src="images/Packagage.png" width="25">주문 및 구매 내역</h2>
    <div id="order-history">
        <!-- 주문 내역이 여기에 표시됨 -->
    </div>
</section>

<script>

    document.addEventListener("DOMContentLoaded", function () {
        // 페이지 로드 시 주문 내역 표시
        displayOrderHistory();
    });

    function displayOrderHistory() {
        const orderHistoryContainer = document.getElementById("order-history");
        orderHistoryContainer.innerHTML = ""; // 기존 목록 초기화

        // 로컬 스토리지에서 저장된 주문 내역 불러오기
        const orderHistory = JSON.parse(localStorage.getItem("orderHistory")) || [];

        // 주문 내역을 화면에 표시
        orderHistory.forEach((order, index) => {
            // 임의의 주문 번호, 일자, 상태 설정
            const orderNumber = `#${index + 1}`;
            const orderDate = "2023-11-17";
            const orderStatus = "배송 완료";

            // 주문 번호, 일자, 상태 표시
            const orderInfo = document.createElement("p");
            orderInfo.innerHTML = `<strong>주문 번호:</strong> ${orderNumber} | <strong>주문 일자:</strong> ${orderDate} | <strong>주문 상태:</strong> ${orderStatus}`;
            orderHistoryContainer.appendChild(orderInfo);

            // 주문 상품 및 수량 표시
            const orderDetails = document.createElement("p");
            orderDetails.innerHTML = `<strong>주문 상품 및 수량<br></strong> ${formatOrderDetails(order)}`;
            orderHistoryContainer.appendChild(orderDetails);

            // 주문 내역 간 줄 바꿈
            const lineBreak = document.createElement("br");
            orderHistoryContainer.appendChild(lineBreak);
        });
    }

    function formatOrderDetails(order) {
        let formattedDetails = "";

        for (const type in order) {
            const detailsArray = order[type];

            detailsArray.forEach(item => {
                formattedDetails += `${type} - ${item.options.join(", ")} - 개수: ${item.quantity}<br>`;
            });
        }

        return formattedDetails;
    }

</script>


</body>

</html>