draw.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>抽獎畫面 - 2022 中興大學抽獎系統</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="css/draw.css">
    <!-- Swiper -->
    <link rel="stylesheet" href="lib/swiper-bundle.min.css" />
    <script src="lib/swiper-bundle.min.js"></script>
    <!-- jquery -->
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>

<body>
    <!-- <div>
        <section class="section" id="slide">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="upper text-center">
                            <img src="./img/icon.png" width="400px">
                            <P>抽獎系統</P>
                        </div>
                        <div class="text-center">
                            <a class="button button-circle button-caution" style="color:white ;">開始</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div> -->
    <section class="section" id="slide_bg">
    </section>
    <!-- 響應式 -->
    <section class="section_rwd" id="rwd_stage"></section>
    <section class="section_title_rwd" id="rwd_title"></section>
    <section class="section_board_rwd" id="rwd_board"></section>
    <section class="section_result_rwd" id="rwd_result"></section>

    <!-- 文字、按鈕內容 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- 獎品圖片 -->
                <div class="lower">
                    <div class="custom-swiper-wrapper">
                        <!-- 箭頭prev -->
                        <div class="swiper-button-custom-prev"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                                height="40" viewBox="0 0 24 24" transform="rotate(180)">
                                <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
                            </svg>
                        </div>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="swiper-zoom-container">
                                        🖼️圖片載入中...
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 箭頭next -->
                        <div class="swiper-button-custom-next"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                                height="40" viewBox="0 0 24 24" transform="rotate(0)">
                                <path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z" />
                            </svg>
                        </div>
                    </div>
                    <!-- 獎品名稱 &數量-->

                </div>
                <div class="right">
                    <button class="draw_btn">抽獎</button>
                </div>

                <!-- 得獎名單 -->
                <!-- 獎品 得獎人的學號 學系 姓名 -->
                <div class="table-wrapper-scroll-y draw_table">
                    <table class="table">
                        <thead class="thead-light tableFixHead">
                            <tr>
                                <th scope="col">學號</th>
                                <th scope="col">學系</th>
                                <th scope="col">姓名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- start -->
                            <tr scope="row">
                                <td class="table-active" colspan="3" style="text-align: center;">獎項</td>
                            </tr>
                            <tr>
                                <th scope="row">3108049022</th>
                                <td>Mark</td>
                                <td>Otto</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                            </tr>
                        </tbody>
                        <tbody>
                            <!-- start -->
                            <tr scope="row">
                                <td class="table-active" colspan="3" style="text-align: center;">獎項</td>
                            </tr>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                            </tr>
                        </tbody>
                        <tbody>
                            <!-- start -->
                            <tr scope="row">
                                <td class="table-active" colspan="3" style="text-align: center;">獎項</td>
                            </tr>
                            <tr>
                                <th scope="row">1</th>
                                <td>Mark</td>
                                <td>Otto</td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Jacob</td>
                                <td>Thornton</td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Larry</td>
                                <td>the Bird</td>
                            </tr>
                        </tbody>
                    </table>
                </div>


            </div>
        </div>
        <div class="gift_text">
            <p>獎品名稱/數量</p>
        </div>
    </div>

    <script>
        const swiper = new Swiper(".swiper", {
            loop: true,
            zoom: true,
            spaceBetween: 40,
            grabCursor: true, // 游標為手掌
            navigation: {
                nextEl: ".swiper-button-custom-next",
                prevEl: ".swiper-button-custom-prev"
            },
        });
        onload = ev => {
            console.log(
                'draw log\n',
                parent.同學資料庫,
                parent.獎品資料庫
            );
            parent.window.獎品資料庫 = parent.獎品資料庫;
            console.log(parent.獎品資料庫.map(列 => 列[2])); // 所有圖片網址
            const arr = parent.獎品資料庫.map(列 => 列[2]);
            const obj = { ...arr };
            console.log(obj);

            $(".swiper-wrapper").html('');//清空

            $(".swiper").append(
                parent.獎品資料庫.map(列 => 列[2]).map(網址 =>
                    $("<div/>", { class: ".swiper-wrapper" })
                        .append($("<div/>", { class: ".swiper-zoom-container" })
                            .append($("<img/>", {
                                class: "img_shadow",
                                src: 網址.replace('open?', 'uc?')
                            }))
                        )
                )
            );
        }
        var 抽獎人數 = 1;
        $('#獎品選單', parent.document).change(ev => {
            for (const 獎品資料 of parent.獎品資料庫)
                if (獎品資料[0] == ev.target.value) 抽獎人數 = 獎品資料[1];
            if (抽獎人數 > 1) $('.draw_btn').html(`抽${抽獎人數}人`);
            else $('.draw_btn').html(`抽獎`);
        });
        $('.draw_btn').click(() => parent.抽獎(抽獎人數));


    </script>

</body>

</html>