F2E 2nd 第四關「線上支付」 挑戰筆記

發表於 分類於 Disqus：

本作品更新的進度到刻完第一個版面。
短期內不會進行更新。

作品

Lynn 的 F2E 2nd 作品列表 / 第四關：線上支付

設計稿

採用 公羽 的設計稿。

排版

這關我也依然只有排版出第一個畫面。
但是在切換頁面的部份，我想出一個比之前好一點的方法：在 <main> 的 dataset 中放入一個切換頁面專用的屬性。

這個靈感是來自以前寫 Angular 作業中的 Router ，讓其他元素都參考這個值，來決定要不要顯示。
如果是用直接修改每個 DOM 元素的 style.display ，或是切換 class ，都要寫好幾行，但這個方法只需要一行。

特別是因為這份設計稿中，有些區塊出現在不同的頁面中，如果以頁面做區分，那不同的頁面中會有重複的區塊。
所以我決定讓各區塊依照 <main> 的值來決定樣式，這樣就可以重複利用。

首先在 <main> 寫好預設的值及內含的區塊：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<main class="main" data-router="order">
    <!-- 進度條 -->
    <div class="progress"></div>
    <!-- 商品列表 -->
    <div class="product-list"></div>
    <!-- 支付方式 -->
    <div class="payment"></div>
    <!-- 信用卡表單 -->
    <div class="credit-information"></div>
    <!-- ATM 表單 -->
    <div class="atm-information"></div>
    <!-- 超商表單 -->
    <div class="convenience-information"></div>
    <!-- 支付成功畫面 -->
    <div class="success"></div>
    <!-- 支付失敗提示 -->
    <div class="fail"></div>
</main>

接著預設 <main> 底下的 <div> 為隱藏，並設定各區塊在什麼值下會顯示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.main>div {
    display: none;
}

.main[data-router="order"] .progress,
.main[data-router="order"] .product-list,
.main[data-router="order"] .payment,
.main[data-router="credit"] .progress,
.main[data-router="credit"] .payment,
.main[data-router="credit"] .credit-information,
.main[data-router="atm"] .progress,
.main[data-router="atm"] .payment,
.main[data-router="atm"] .atm-information,
.main[data-router="conveniece"] .progress,
.main[data-router="conveniece"] .payment,
.main[data-router="conveniece"] .convenience-information {
    display: flex;
}

剩下的就是將各區塊的內容刻出來，並讓按鈕切換 data-router 的值。

1
2
3
4
5
6
7
8
9
10
11
12
let main = document.querySelector('.main');
document.querySelector('.payment').addEventListener('click', function (event) {
    switch (event.target.className) {
        case 'button':
            main.dataset.router = event.target.dataset.a;
            break;
        case 'image':
        case 'text':
            main.dataset.router = event.target.parentElement.dataset.a;
            break;
    }
}, false);

商品列表

小結

由於只刻出一個版面，能紀錄的內容就比較少。
希望能更有效地利用時間，豐富學習的內容。