我正設計一個兌換劵系統的UI，系統在前端分為三個部份—分別為兌換劵列表、兌換頁、商戶用的驗證頁
以下是兌換劵列表的HTML:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8" />
    <title>優惠券列表 - 分組顯示 (修改版)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            font-family: Arial, "微軟正黑體", sans-serif;
            margin: 0; padding: 20px; background: #f5f5f5;
            max-width: 960px; margin-left: auto; margin-right: auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 15px;
        }
        /* 搜尋區 */
        .search-container {
            margin-bottom: 25px;
            position: relative;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
        #storeSearchInput {
            width: 100%;
            padding: 10px 12px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
        }
        .suggestions-list {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 100;
            background: white;
            border: 1px solid #ccc;
            border-top: none;
            max-height: 150px;
            overflow-y: auto;
            border-radius: 0 0 6px 6px;
            display: none;
        }
        .suggestions-list li {
            padding: 8px 12px;
            cursor: pointer;
        }
        .suggestions-list li:hover {
            background-color: #f0f0f0;
        }

        /* 大分類區塊 */
        .redeemlist-category {
            background: white;
            margin-bottom: 25px;
            border-radius: 8px;
            box-shadow: 0 0 7px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .redeemlist-category-header {
            background: #007bff;
            color: white;
            padding: 12px 20px;
            font-size: 20px;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .redeemlist-category-header span {
            font-weight: bold;
        }
        .redeemlist-category-header .toggle-icon {
            font-weight: bold;
            font-size: 20px;
            line-height: 1;
            user-select: none;
            transition: transform 0.3s ease;
        }
        .redeemlist-category.collapsed .redeemlist-category-header .toggle-icon {
            transform: rotate(-90deg);
        }

        /* 賣家群組 */
        .redeemlist-seller-group {
            padding: 10px 20px 20px 20px;
            border-top: 1px solid #ddd;
        }
        .redeemlist-seller-name {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 12px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 6px;
            color: #333;
            display: flex;
            align-items: center;
        }
        .redeemlist-seller-logo {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: contain;
            margin-right: 12px;
            border: 1px solid #ddd;
            background: white;
            flex-shrink: 0;
        }

        /* 單筆兌換券列表樣式 */
        .redeemlist-item {
            display: flex;
            align-items: center;
            background: #fff;
            box-shadow: 0 0 3px rgba(0,0,0,0.05);
            margin-bottom: 15px;
            border-radius: 6px;
            padding: 10px 15px;
            max-height: 100px;
        }
        /* 兌換券圖片 */
        .redeemlist-coupon-img {
            width: 90px;
            height: 90px;
            border-radius: 6px;
            object-fit: cover;
            margin-right: 15px;
            flex-shrink: 0;
            border: 1px solid #ddd;
            background: #fafafa;
        }

        /* 文字內容（中間區塊） */
        .redeemlist-text-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0; /* 避免寬度溢出 */
        }
        .redeemlist-name {
            font-weight: 600;
            font-size: 17px;
            color: #222;
            margin-bottom: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .redeemlist-desc {
            color: #555;
            font-size: 14px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }

        /* 右側狀態或按鈕區 */
        .redeemlist-status-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            padding-left: 15px;
            border-left: 2px solid #ddd;
        }
        .redeemlist-remaining {
            font-size: 13px;
            color: #888;
            margin-bottom: 6px;
        }
        .redeemlist-btn-use {
            background: #007bff;
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.25s ease;
        }
        .redeemlist-btn-use:hover {
            background: #0056b3;
        }
        .redeemlist-status-text {
            font-weight: bold;
            font-size: 15px;
            color: #c00;
            white-space: nowrap;
        }


        /* 手機響應，兌換券圖片左方排列，詳情右方 */
        @media screen and (max-width: 600px) {
            .redeemlist-item {
                flex-direction: row;
                max-height: none;
                height:auto;
                padding: 10px 10px;
            }
            .redeemlist-coupon-img {
                width: 80px;
                height: 80px;
                margin: 0 10px 0 0;
            }
            .redeemlist-text-content {
                margin-bottom: 0;
                min-width: 0;
                white-space: normal;
            }
            .redeemlist-name,
            .redeemlist-desc {
                white-space: normal;
            }
            .redeemlist-status-area {
                border-left: 2px solid #ddd;
                border-top: none;
                padding-left: 15px;
                padding-top: 0;
                min-width: 120px;
                width: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .redeemlist-remaining {
                margin-bottom: 6px;
            }
            .redeemlist-btn-use {
                width: 100%;
                padding: 8px 15px;
            }
        }
    </style>
</head>
<body>
    <h1>我的優惠券列表</h1>

    <div class="search-container">
        <input type="text" id="storeSearchInput" placeholder="搜尋商店名稱..." autocomplete="off" />
        <ul class="suggestions-list" id="suggestionsList"></ul>
    </div>

    <!-- 可使用 -->
    <section class="redeemlist-category" id="redeemlist-category-available">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-available')">
            <span>可使用的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content">
            <!-- 賣家A -->
            <div class="redeemlist-seller-group" data-seller-name="幸福冰淇淋店">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://picsum.photos/40" alt="幸福冰淇淋店 Logo" />
                    幸福冰淇淋店
                </div>

                <div class="redeemlist-item" 
                    data-coupon-id="c001" 
                    data-prod-name="夏季限定冰淇淋折扣" 
                    data-store-name="幸福冰淇淋店" 
                    data-checkcode="AB12-CD34-EF56-78GH" 
                    data-seller-logo="https://picsum.photos/40" 
                    >
                    <img class="redeemlist-coupon-img" src="https://picsum.photos/90" alt="冰淇淋券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">夏季限定冰淇淋折扣</div>
                        <div class="redeemlist-desc">使用期限：2024-07-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：3 次</div>
                        <button class="redeemlist-btn-use" onclick="useCoupon(this)">使用</button>
                    </div>
                </div>

                <div class="redeemlist-item"
                    data-coupon-id="c002"
                    data-prod-name="冰淇淋新品體驗券"
                    data-store-name="幸福冰淇淋店" 
                    data-checkcode="ZX98-YT76-RF54-32PL"
                    data-seller-logo="https://picsum.photos/40" 
                    >
                    <img class="redeemlist-coupon-img" src="https://picsum.photos/90" alt="新口味券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">冰淇淋新品體驗券</div>
                        <div class="redeemlist-desc">使用期限：2024-08-15</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：1 次</div>
                        <button class="redeemlist-btn-use" onclick="useCoupon(this)">使用</button>
                    </div>
                </div>
            </div>

            <!-- 賣家B -->
            <div class="redeemlist-seller-group" data-seller-name="城市咖啡館">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://picsum.photos/40" alt="城市咖啡館 Logo" />
                    城市咖啡館
                </div>

                <div class="redeemlist-item" 
                    data-coupon-id="c003" 
                    data-prod-name="無限次咖啡兌換券" 
                    data-store-name="城市咖啡館"
                    data-checkcode="MN34-OP56-QR78-ST90"
                    data-seller-logo="https://picsum.photos/40"
                    >
                    <img class="redeemlist-coupon-img" src="https://picsum.photos/90" alt="咖啡券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">無限次咖啡兌換券</div>
                        <div class="redeemlist-desc">使用期限：2024-12-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-remaining">剩餘次數：無限</div>
                        <button class="redeemlist-btn-use" onclick="useCoupon(this)">使用</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 已使用 -->
    <section class="redeemlist-category redeemlist-collapsed" id="redeemlist-category-used">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-used')">
            <span>已使用的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content" style="display:none;">
            <div class="redeemlist-seller-group" data-seller-name="幸福冰淇淋店">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://picsum.photos/40" alt="幸福冰淇淋店 Logo" />
                    幸福冰淇淋店
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://picsum.photos/90" alt="冰淇淋券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">冬季優惠冰淇淋折扣</div>
                        <div class="redeemlist-desc">使用日期：2024-05-01</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-status-text">已使用</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 已過期 -->
    <section class="redeemlist-category redeemlist-collapsed" id="redeemlist-category-expired">
        <div class="redeemlist-category-header" onclick="toggleCategory('redeemlist-category-expired')">
            <span>已過期的優惠券</span>
            <span class="toggle-icon">▼</span>
        </div>
        <div class="redeemlist-category-content" style="display:none;">
            <div class="redeemlist-seller-group" data-seller-name="超值購物商城">
                <div class="redeemlist-seller-name">
                    <img class="redeemlist-seller-logo" src="https://picsum.photos/40" alt="超值購物商城 Logo" />
                    超值購物商城
                </div>

                <div class="redeemlist-item">
                    <img class="redeemlist-coupon-img" src="https://picsum.photos/90" alt="折扣券圖片" />
                    <div class="redeemlist-text-content">
                        <div class="redeemlist-name">購物折扣100元</div>
                        <div class="redeemlist-desc">使用期限：2023-12-31</div>
                    </div>
                    <div class="redeemlist-status-area">
                        <div class="redeemlist-status-text">已過期</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<script>
    // 切換分類區塊收展
    function toggleCategory(id) {
        const category = document.getElementById(id);
        if (!category) return;

        const content = category.querySelector('.redeemlist-category-content');
        const icon = category.querySelector('.toggle-icon');
        if (content.style.display === "none" || content.style.display === "") {
            content.style.display = "block";
            category.classList.remove('redeemlist-collapsed');
            icon.style.transform = 'rotate(0deg)';
        } else {
            content.style.display = "none";
            category.classList.add('redeemlist-collapsed');
            icon.style.transform = 'rotate(-90deg)';
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // 展開可使用區塊
        const availableSection = document.getElementById('redeemlist-category-available');
        if (availableSection) {
            const content = availableSection.querySelector('.redeemlist-category-content');
            const icon = availableSection.querySelector('.toggle-icon');
            content.style.display = 'block';
            icon.style.transform = 'rotate(0deg)';
            availableSection.classList.remove('redeemlist-collapsed');
        }

        initSearch();
    });

    // 搜尋功能
    function initSearch() {
        const input = document.getElementById('storeSearchInput');
        const suggestionList = document.getElementById('suggestionsList');
        const sellerGroups = [...document.querySelectorAll('.redeemlist-seller-group')];

        // 取得所有商店名稱(不重複)
        const storeNames = sellerGroups.map(g => g.getAttribute('data-seller-name'));
        const uniqueStoreNames = [...new Set(storeNames)];

        function filterSellerGroups(keyword) {
            sellerGroups.forEach(group => {
                const name = group.getAttribute('data-seller-name');
                if(name.indexOf(keyword) !== -1) {
                    group.style.display = "";
                } else {
                    group.style.display = "none";
                }
            });
        }

        function showSuggestions(keyword) {
            if(!keyword) {
                suggestionList.style.display = 'none';
                return;
            }
            const filteredStores = uniqueStoreNames.filter(name => name.includes(keyword));
            if(filteredStores.length === 0) {
                suggestionList.style.display = 'none';
                return;
            }
            suggestionList.innerHTML = '';
            filteredStores.forEach(name => {
                const li = document.createElement('li');
                li.textContent = name;
                li.addEventListener('click', () => {
                    input.value = name;
                    suggestionList.style.display = 'none';
                    filterSellerGroups(name);
                });
                suggestionList.appendChild(li);
            });
            suggestionList.style.display = 'block';
        }

        input.addEventListener('input', (e) => {
            const val = e.target.value.trim();
            showSuggestions(val);
            filterSellerGroups(val);
        });
        // 點擊外部關閉建議列表
        document.addEventListener('click', (e) => {
            if (!input.contains(e.target) && !suggestionList.contains(e.target)) {
                suggestionList.style.display = 'none';
            }
        });
    }

    // 使用按鈕點擊事件，與優惠碼使用頁面連結
    function useCoupon(button) {
        const item = button.closest('.redeemlist-item');
        if(!item) return;

        const prodName = encodeURIComponent(item.getAttribute('data-prod-name') || '');
        const storeName = encodeURIComponent(item.getAttribute('data-store-name') || '');
        const checkcode = encodeURIComponent(item.getAttribute('data-checkcode') || '');
        const sellerLogo = encodeURIComponent(item.getAttribute('data-seller-logo') || '');

        // 連結到優惠碼使用頁，並透過 URL query帶參數
        // 例如: redeem.html?prodName=...&storeName=...&checkcode=...&sellerLogo=...
        // 這裡示範簡易開新分頁
        const redeemPageUrl = `redeem.html?prodName=${prodName}&storeName=${storeName}&checkcode=${checkcode}&sellerLogo=${sellerLogo}`;
        window.open(redeemPageUrl, '_blank');
    }

</script>
</body>
</html>

兌換頁:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8" />
    <title>優惠碼使用頁面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        /* 保留原style */
        body {
            font-family: "微軟正黑體", Arial, sans-serif;
            padding: 20px;
            background: #fff;
            max-width: 700px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 15px;
        }
        .redeempage-detail {
            border: 1px solid #ddd;
            padding: 20px 25px;
            border-radius: 10px;
            box-sizing: border-box;
        }
        .redeempage-info-group {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }
        .redeempage-seller-logo {
            width: 80px;
            height: 80px;
            object-fit: contain;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .redeempage-text-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.4;
            overflow-wrap: break-word;
        }
        .redeempage-text-row {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }
        .redeempage-text-label {
            font-weight: bold;
            width: 100px;
            flex-shrink: 0;
        }
        .redeempage-text-value {
            word-break: break-word;
        }
        #redeempage-qrcode {
            margin: 20px auto 15px;
            width: 200px;
            height: 200px;
            display: block;
        }
        .redeempage-checkcode-text {
            font-size: 24px;
            letter-spacing: 4px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            user-select: all;
            word-break: break-word;
        }
        .redeempage-countdown {
            font-size: 18px;
            text-align: center;
            color: #c00;
            font-weight: bold;
        }

        @media screen and (max-width: 767px) {
            body {
                padding: 15px 10px;
                max-width: 100%;
            }
            .redeempage-detail {
                padding: 15px;
                border-radius: 6px;
            }
            .redeempage-info-group {
                flex-direction: row;
                margin-bottom: 15px;
            }
            .redeempage-seller-logo {
                width: 65px;
                height: 65px;
                margin-right: 12px;
            }
            .redeempage-text-label {
                width: 90px;
                font-size: 14px;
            }
            .redeempage-text-value {
                font-size: 14px;
            }
            .redeempage-checkcode-text {
                font-size: 20px;
                margin-bottom: 12px;
            }
            .redeempage-countdown {
                font-size: 16px;
            }
            #redeempage-qrcode {
                width: 160px;
                height: 160px;
                margin-bottom: 12px;
            }
        }

        @media screen and (max-width: 480px) {
            .redeempage-info-group {
                flex-direction: row;
                margin-bottom: 12px;
            }
            .redeempage-seller-logo {
                width: 55px;
                height: 55px;
                margin-right: 10px;
            }
            .redeempage-text-label {
                width: 80px;
                font-size: 13px;
            }
            .redeempage-text-value {
                font-size: 13px;
            }
            .redeempage-checkcode-text {
                font-size: 18px;
                margin-bottom: 10px;
                letter-spacing: 3px;
            }
            .redeempage-countdown {
                font-size: 14px;
            }
            #redeempage-qrcode {
                width: 130px;
                height: 130px;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <h1>優惠碼詳情</h1>
    <div class="redeempage-detail">

        <div class="redeempage-info-group">
            <img class="redeempage-seller-logo" src="" alt="賣家 Logo" id="sellerLogoImg" />
            <div class="redeempage-text-content">
                <div class="redeempage-text-row">
                    <div class="redeempage-text-label">商品名稱：</div>
                    <div class="redeempage-text-value" id="redeempage-prodName">-</div>
                </div>
                <div class="redeempage-text-row">
                    <div class="redeempage-text-label">賣家名稱：</div>
                    <div class="redeempage-text-value" id="redeempage-sellerName">-</div>
                </div>
            </div>
        </div>

        <canvas id="redeempage-qrcode"></canvas>
        <div class="redeempage-checkcode-text" id="redeempage-checkcodeText">-</div>
        <div class="redeempage-countdown">有效期限剩餘：<span id="redeempage-timer">15:00</span></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
    <script>
        // 解析 URL 參數
        function getQueryParams() {
            const params = {};
            location.search.substring(1).split("&").forEach(pair => {
                const [key, val] = pair.split("=");
                if(key) params[decodeURIComponent(key)] = decodeURIComponent(val || '');
            });
            return params;
        }

        const params = getQueryParams();
        const prodName = params.prodName || '-';
        const sellerName = params.storeName || '-';
        const checkcode = params.checkcode || 'XXXX-XXXX-XXXX-XXXX';
        const sellerLogo = params.sellerLogo || '';

        document.getElementById('redeempage-prodName').textContent = prodName;
        document.getElementById('redeempage-sellerName').textContent = sellerName;
        document.getElementById('redeempage-checkcodeText').textContent = checkcode;

        const logoImg = document.getElementById('sellerLogoImg');
        if(sellerLogo){
            logoImg.src = sellerLogo;
        } else {
            logoImg.src = 'https://picsum.photos/80'; // 預設圖片
        }

        const qrcodeContainer = document.getElementById('redeempage-qrcode');
        QRCode.toCanvas(qrcodeContainer, checkcode, { width: 200, margin: 2 }, function (error) {
            if (error) console.error(error);
        });

        // 倒數計時 15 分鐘
        const expireSeconds = 15 * 60;
        let remainingSeconds = expireSeconds;

        const timerElem = document.getElementById('redeempage-timer');
        function updateTimer() {
            if (remainingSeconds <= 0) {
                timerElem.textContent = '已過期';
                clearInterval(timerInterval);
                alert('優惠碼已過期，請重新產生。');
                return;
            }
            const min = Math.floor(remainingSeconds / 60).toString().padStart(2, '0');
            const sec = (remainingSeconds % 60).toString().padStart(2, '0');
            timerElem.textContent = `${min}:${sec}`;
            remainingSeconds--;
        }
        updateTimer();
        const timerInterval = setInterval(updateTimer, 1000);
    </script>
</body>
</html>

而驗證頁需要達到以下需求：